黑马程序员技术交流社区

标题: ios和安卓设计怎么适配?【UI设计师须知】 [打印本页]

作者: 绘儿    时间: 2022-5-3 15:58
标题: ios和安卓设计怎么适配?【UI设计师须知】


透彻了解UI设计,从此系列帖开始!
       面试避坑必看:设计师面试失败,绝大部分死在这50个问题上


目前移动端系统主要以Android和iOS为主,由干Android平台的差异化越来越大,在UI设计中通常以iOS系统为基准,以此去适配其他手机,可以降低设计成本,提高开发速度。


设计基准选择

设计基准选择指的是挑选当前主流的手机屏幕分辨率作为设计适配标准。摒弃些非主流甚至已经淘汰的手机屏幕尺寸,例如i0S@1x倍率的屏幕尺寸。

目前一般以iOS系统主流分辨率750x1334像素进行设计,像素倍率为@2x,因为它的尺寸向上或向下适配时,界面调整幅度最小,偏差不会太大,视觉比例也不会出现太大问题。而且与Android版本720x1280像素的尺寸相近,甚至屏幕密度也是相近的,所以只需做最小的设计调整。


设计基准图

设计基准图是指按照选择的主流分辨率设计出来的界面,该界面可以适配多个屏幕尺寸。下面将对设计基准图的设计注意事项以及调整方法做具体讲解。


1. 设计基准图注意事项

按照iOS系统主流分辨率750x1334像素进行的设计基准图,除了图片外其余部分需要用形状工具来做,方便后期其余版本的调整。将图片转为智能对象,进行放大拉伸只要不超过原有尺寸便不会失真。设计完成后,在设计基准图上进行标注和输出切图。


2. 界面调整
1) 改版Android界面

开发团队出于节省人力、时间等原因考虑,一般以ios系统设计基准图为主导,将绘制好的设计基准图进行适当调整、应用于Android平台中。

改版Android界面有如下几个步骤:

(1) 设计基准选择Android主流设计界面尺寸为720x1280像素。

(2) 设置界面结构中栏的尺寸(如状态栏高度为50像素、导航栏高度为96像素、标签栏高度为96像素)。

(3) 设置两边边距(边距尺寸一般为24~30像素)。

(4) 把iOS系统设计基准图页面中的元素拖放到Android界面中,将页面元素调整到恰当的位置,并调整元素间的间距为偶数。

(5) 将字体改为“思源”即可。


2) 适配Plus界面

对于ios系统中像素倍率不同,栏的高度有所不同。如iPhone 7的屏幕分辨率为750x1334像素,状态栏商度为的像素、导航栏高度为88像素、标签栏高度为98像素。而iPhone7 Plus高度为60像素、特就栏高度132像素、标茶栏高度为16像素。

在界面上进行调整栏内部元素,内容区域也要进行重新调整。而图片需要单独适配,iPhone 7 Plus是iPhone 7的1.65倍,需要在原图的高度上乘1.65才是Plus的正确高度,但是位图一般放大会发虚,所以适配的图片最好以大尺寸去适配小尺寸。


3. 自动适配

自动适配是在设计基准图适配时需要注意文字流式和控件的问题。文字流式和控件都是页面框架结构制定好后,文字根据屏幕的尺寸自动适应排列,屏幕尺寸越大,显示的内容就会越多,充分发挥了大屏幕的优势。


友情提示:若你是对设计不太了解的小萌新,看完这个问题后,却对设计还有太多的疑惑(前途、薪资、技术含量、女生是否好找工作.....),强烈推荐你观看《设计萌新必看:学习UI设计必问的50个问题,从此系列贴开始》,相信能扫除掉你心目中90%以上的常见问题,请狠狠点击下方链接:http://bbs.itheima.com/thread-514779-1-1.html





精华推荐:
UI设计师如何自我介绍最有用!
如何向面试官介绍你的项目
从工作对接——告诉你UI设计师的工作流程
破解HR常见5种面试套路,助你轻松拿下Offer
初级设计师面试失败,大部分败在这50个问题上
设计面试——应聘机试题怎么破1
设计面试——应聘机试题怎么破2
设计面试——应聘机试题怎么破3


--------------------------------------------------------------------------------------------
如果有用,记得点赞留言哦~
【推荐阅读】:黑马论坛快回帖仅需这简单3步http://bbs.itheima.com/thread-513666-1-1.html
获取【UI设计视频教程资料】加绘儿2168934524
--------------------------------------------------------------------------------------------

↑想看最新课程大纲,手机用户点此文字链即可跳到传智UI设计学科站↑






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2