|
透彻了解UI设计，从此系列帖开始！
目前移动端系统主要以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. 自动适配自动适配是在设计基准图适配时需要注意文字流式和控件的问题。文字流式和控件都是页面框架结构制定好后，文字根据屏幕的尺寸自动适应排列，屏幕尺寸越大，显示的内容就会越多，充分发挥了大屏幕的优势。
| 
收藏
淘帖
踩
