移动端UI设计规范指南

从事UI设计,一直没看到完整版的UI设计规范学习资料,特此总结整理方便大家学习交流~

很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,对做UI设计的基础概念也没有清晰的认识,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

01.UI基础概念

02.UI元素设计规范

03.UI版式设计规范

04.UI文字使用规范

05.UI颜色使用规范

06.UI输出规范

07.UI交互介绍

08.总结

在开始UI设计之前必须搞清楚物理像素、逻辑像素、倍率三个词。

屏幕都是由许多像素点组成,每个点发出不同颜色的光,构成我们看到的画面。像我们的熟悉iphone 6s 屏幕就是由750行、1334列像素点组成的矩阵图。设计师作图所用的分辨率就是指物理像素,简而言之,物理像素=分辨率,单位px

逻辑像素又叫逻辑点,是控制屏幕内容显示多寡的一个单位,单位符号pt,程序员在开发环节必须将设计师提供的物理像素转换成逻辑像素,并通过逻辑像素来控制页面显示哪些内容。不同设备逻辑像素与物理像素的比例是不同的。每个设备物理像素固定不变,我们调节显示器的分变率其实调节的是逻辑像素。

物理像素在硬件层面构成了液晶屏幕,逻辑像素在软件层面构成了画面图像倍率,1个逻辑像素对应1个物理像素,1pt=1px,倍率1x,1个逻辑像素对应1.5个物理素,1pt=1.5px,倍率1.5x,1个逻辑像素对应2个物理像素,1pt=2px,倍率2x,1个逻辑像素对应3个物理像素,1pt=3px,倍率3x,倍率=物理像素/逻辑像素。

由于开发工具不同,逻辑像素在ios,android名称不同,ios是pt,android是dp

那么ios设计时选择何种倍率?

要从开发换算、设计成本、效果查看、倍率转换、切图5个方面来综合选择。

开发换算,程序员拿到设计师提供的标注图以后,需要将标注中的物理像素转换成逻辑像素,即px转换为pt,这里便涉及到换算的问题。通常设计图中元素尺寸在三位数以内,对于一般人而言三位数以内除以1最容易,2其次,3最后,本轮排1x>2x>3x

设计成本,在2x逻辑像素下,列表高60pt,头像高51pt,二者不可能刚好居中对齐,势必偏移1pt,手机实际显示偏移2px;在3x物理像素下,列表高150px,头像高100px,转换到1x逻辑像素,100不能被3整除,势必造成偏移。为保证落地效果,1x倍率下尺寸必须为偶数,2x倍率下尺寸必须为4的倍数,3x倍率下尺寸必须为6的倍数,本轮排序1x>2x>3x

效果查看,我们通常会将效果图导入对应设备中进行查看,目前主流设备都采用2x,3x倍率,1x的设计图在主流设备上成倍放大的同时,分割线,描边线也会成倍的放大,如果不对这些细节二次调整,终端效果会很不理想。由于2x,3x之间等比缩放跨度不大,故而逻辑像素相同的两个2x,3x可以直接查看彼此的效果图,3x比2x效果好些,本轮排序3x>2x>1x

倍率转换,1x转换2x,3x极为方便;2x转换为1x需要除以2,转换3x需要乘以1.5较为便捷;3x转换2x需要除以3乘以2,转换1x需要除以3,比较繁琐,本轮排序1x>2x>3x

切图,1x设计图必须另外导出2x,3x两套切图,2x设计图导出3x需放大1.5倍,3x导2x需要除以3再乘以2,麻烦,本轮排序2x>3x>1x

综合比较分析,只有2x倍率设计图方便向上向下适配转换。

那么在确立ios设计尺寸以后,android是否需要另出一套图呢?答案是看需求,可以一稿配双平台。

在2x倍率下,ios有640x1136、750x1334、750x1624三种主流分辨率,android统一为720x1280,两平台采用相同的APP设计规范,逻辑像素换算方式一样,程序员根据同一份标注图开发,实现页面中元素尺寸完全相同,在ios3种尺寸中750x1334也最接近720p,宽度仅相差30px,相差比仅为0.04适配无差别,故而可以一稿配双平台,如果对实现效果要求较高,那就需要按720x1280再出图。

iPhone X依然可用750x1334设计,只是高度增加了290px,尺寸750*1624(@2x)注意状态栏的高度由原来的40px变成了88px,另外底部要预留68px的主页指示器的位置。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章