《移动UI设计与实战》项目六.pptx

移动UI设计与实战课程

新西兰NAMEKIWIApp项目设计交付文档项目六

任务1设计适配要点1：设计基准选择目前，移动端系统主要以Android和iOS为主，由于Android平台的差异化越来越大，在UI设计中通常以iOS为基准，以此去适配其他手机，可以降低设计成本，提高开发速度。因此，大家主要掌握iOS设计适配方法。设计基准选择是指挑选当前主流的手机屏幕分辨率作为设计适配标准。摒弃一些非主流甚至已经淘汰的手机屏幕尺寸。如图6-1-1所示，目前一般以iOS主流分辨率750px×1334px进行设计，像素倍率为@2x，因为它的尺寸向上或向下适配时，界面调整幅度最小，偏差不会太大，视觉比例也不会出现太大问题。而且与Android版本720px×1280px的尺寸相近，甚至屏幕密度也是相近的，所以只需做最小的设计调整。因此，iPhone6/7/8的750px×1334px是最适合基准尺寸。本项目也是使用iOS750px×1334px做基准尺寸的。

任务1设计适配要点2：设计基准图设计基准图是指按照选择的主流分辨率设计出来的界面，该界面可以适配多个屏幕尺寸。（1）设计基准图注意事项。按照iOS主流分辨率750px×1334px进行的设计基准图，除了图片外，其余部分需要用形状工具来做，以方便后期其余版本的调整。将图片转为智能对象，进行放大拉伸，只要不超过原有尺寸便不会失真。设计完成后，在设计基准图上进行标注和输出切图。（2）界面调整。1）适配Android界面。开发团队出于节省人力、时间等原因考虑，一般以iOS设计基准图为主导，适当调整绘制好的设计基准图，应用于Android平台中。花瓣App在iOS和Android平台的显示样式。

任务1设计适配要点2：设计基准图适配Android界面有如下5个步骤。①设计基准选择Android主流设计界面尺寸为720px×1280px。②设置界面结构中栏的尺寸（如状态栏高度为50px、导航栏高度为96px、标签栏高度为96px）。③设置两边边距（边距尺寸一般为24～30px）。④把iOS设计基准图页面中的元素拖放到Android界面中，将页面元素调整到恰当的位置，并调整元素间的间距为偶数。⑤将字体改为“思源”即可。2）适配Plus界面。iOS中像素倍率不同，栏的高度也有所不同。例如，iPhone7的屏幕分辨率为750px×1334px，状态栏高度为40px、导航栏高度为88px、标签栏高度为98px。而iPhone7Plus屏幕分辨率是1080px×1920px，但是设计时要以1242px×2208px的基准去进行设计。状态栏高度为60px、导航栏高度为132px、标签栏高度为146px。iPhone7和iPhone7Plus界面对比如图。

任务1设计适配要点2：设计基准图

任务1设计适配在界面上调整栏内部元素，内容区域也要进行重新调整。而图片需要单独适配，iPhone7Plus是iPhone7的1.65倍。需要在原图的高度上乘以1.65才是Plus的正确高度，但是位图一般放大会发虚，所以适配的图片最好以大尺寸去适配小尺寸。3）自动适配。自动适配是在设计基准图适配时需要注意文字流式和控件问题。文字流式和控件都是页面框架结构确定好后，文字根据屏幕的尺寸自动适应排列，图6-1-4所示为iPhone7和iPhone7Plus内容显示，红框标识为自动适配的内容。屏幕尺寸越大，显示的内容就会越多，充分发挥了大屏幕的优势。

任务1设计适配根据本项目实例的需求，明确iOS改版到Android系统中分辨率尺寸有所不同。除了栏的不同，其余页面元素基本一致。其中iOS设计基准图以750px×1334px进行设计，而改版适配到Android的尺寸应为720px×1280px。在iOS中字体为“苹方”，而改版到Android系统中则要换为“思源”字体。除此之外，所有数据改版适配到Android系统中，保证元素间的间距为偶数。适配效果如图。

任务2标注要点1：认识标注在设计基准图完成后，UI设计师需要和前端工程师进行交接，为了保证设计基准图与前端工程师书写出来的效果一致，就需要对设计基准图进行标注。标注含义是标示注记。需要将整个界面中关键元素的相关参数标注出来，前端工程师会参照标注图