一.介面尺寸

目前市面上的苹果手机主要是:iphone6/6s,iphone6/6s plus,iphone7,iphone7 plus,iphone8,iphone8 plus,iphonex。

我们可以简单归纳为:iphone6,750*1334,326ppi;iphone6 plus,1242*2208,461ppi;iphonex,1125*2436,458ppi。它们分别对应的图片素材是:@2x,@3x,@3x。

所以我建议把1242*2208作为设计稿尺寸,对应@3x图。

为什么iphone6 plus 的设计稿分辨率是1242*2208而不是1080*1920呢?

确实iphone6 plus的实际屏幕分辨率是1080*1920,屏幕密度是401ppi。我们知道163ppi条件下,苹果系统规定1pt=1px,所以401/163=2.46,也就是此时1pt=2.46px,这并不是一个整数,那苹果系统为了方便开发,从写代码到渲染这一步,都是采用@3x素材,此时1pt=3px,ppi=489,到这里可能就有人问了,苹果系统采用的是1242*2208,461ppi啊!怎么不是489ppi呢??别急,我用下面这张图来说明原因。

Iphone6 plus UI设计规范
Iphone6 plus UI设计规范

想必到这里,大家应该知道1242*2208是怎么来的了。那有人就会发现这里存在误差的呀,对的,原本x=1318,取舍之后变成x=1242,相差76px。但是别忘了还有最后一步处理,渲染之后等比缩小处理到1080*1920屏幕上,继续看图。

Iphone6 plus UI设计规范
Iphone6 plus UI设计规范

结论:iphone6 plus屏幕分辨率实际上是1080*1920,ppi=401,它既不满足@2x,也不满足@3x,所以为了方便开发和设计,苹果系统把它归类到@3x里,但画布分别率是1242*2208而不是1318*2344,主要是考虑到X:Y必须等于9:16,这里产生的误差很小,可忽略。

二.组件大小

iphone6 plus

状态栏高度:60px

导航栏高度:132px

标签栏高度:148px

(大家也可以截屏在PS里测量)

注意:以下是个人经验总结的数值,仅供参考

导航栏图标:范围54*54px~66*66px

标签栏图标:范围68*68px~76*76px

列表最小高度:132px

内容和页边的距离:30px

最小点击区域:132px(如果是图标,那它的透明区域应该大于或等于132px)

字体大小

导航栏标题文字:50px

标签栏文字:28px

最小字号:26px

标题常用字号:46px

正文常用字号:42px

说明文字常用字号:36px

其他常用字号:34px,36px,38px

体常用灰度等级

20%亮度:标题,正文

40%亮度:二级标题,补充文本

60%亮度:说明文本,摘要

(肉眼容易区别相差20%亮度值的色彩)

三.单位

单位大家基本都能烂熟于心了,这里还是拿出来写写吧。

Px——像素

这个单位我们不陌生,它是图像的基本单位,也是最小单位。但要记住,它是相对单位,尺寸可大可小。

Pt——点

iOS系统规定的物理绝对单位,大概是1pt=0.16毫米,它的大小是固定的,可以用量尺测量。

那为什么iOS系统要发明这么一个单位出来呢?因为px是相对单位,即大小是根据显示屏变化的,为了保证不同屏幕尺寸手机上的组件物理尺寸是一样的,所以只需要保证pt值相同,我们肉眼看到的就是一样大的。那有人就会问,明明小手机比大手机字号小啊,确实,这个问题应该是缩放显示造成的吧。

PPI——像素密度

指屏幕1英寸长度上排列的像素点数量,PPI值越高代表屏幕显示效果越精细。

它的意义是为了区别屏幕显示的清晰程度,可以作为我们买手机的参考值。

需要注意的是163ppi这个数值,因为它是苹果公司规定的普屏像素密度,且此条件下1pt=1px,所以作为设计师,看到326ppi的屏幕时,自然想到1pt=2px,对应@2x素材。

分辨率

分辨率就是手机屏幕长宽上显示的做大像素数量,比如iphone6手机,分辨率时750*1334,表示x方向上最多显示750个像素,y方向上,最多显示1334个像素。分辨率并不能体现屏幕的显示清晰度,但设计师可以利用这个参数作为设计稿的尺寸。

四.色彩

我们知道,一个产品颜色最多不能超过三个自定义色相。这三个色相是:主题色,作为软件的标识和识别色彩;邻近色,作为辅助色彩,既可以和主题色有所区别体现层次,又不会显得跳跃;对比色,作为软件的醒目提示,但使用比例要小,起到强调的作用。

一些常用色彩

Iphone6 plus UI设计规范
Iphone6 plus UI设计规范

五.适配

适配原理

我们知道市面上苹果手机至少有四五种屏幕密度,那设计和开发不可能兼顾这么多屏幕的,所以苹果公司就发明了一个简单的方法,只需要设计一套图写一套代码,就可以适配所有机型。这个简单的方法是什么呢?

苹果公司发明了定义屏幕密度,也就是自定义的屏幕密度分类,它们是163ppi,326ppi,489ppi,对应的是@1x,@2x,@3x图片素材。这样我们就可以把市面上的苹果手机归类到某一定义屏幕密度下,把图片素材放大缩小就可以了。需要注意的是,定义屏幕密度和实际屏幕密度并不相等,所以会有小的误差,至于为什么苹果手机不按照定义屏幕密度来生产手机呢?原因是屏幕比例,技术,性价比造成的吧,话说只要误差不影响显示,苹果公司愿怎么造就怎么造吧。

程序员如何操作

开发其实并不关心你设计的是多少像素,而是你设计的素材是多少pt的,或者是几倍图,因为开发环境有专门针对定义屏幕密度的素材库文件,你切图给开发,他放到对应的素材库就好了。为了保证显示效果一致,原则上一个文字对应的pt值是固定的,所以无论你按照几倍图设计,换算成pt都是一样的,在标注这一环节,你要么全部标注成pt,要么用px标注,但要告诉开发要除以多少倍数。一句话,开发单位是pt,一套代码搞定。

设计师应该知道什么

你设计的几倍图到底是什么意思,如何和开发沟通。

六.切图

先明确你的设计稿是几倍图,比如你设计的是@3x图,那1:1切出的图就是3倍图。

切完图之后,不要忘了规范命名和压缩图片,一定要压缩图片!压缩图片!我推荐智图压缩工具。

标注

标注也是很重要的,没有标注,开发根本不知道你设计的是啥,像素大厨标注就很方便。

七.交互

其实交互才是真正考验设计师水平的方面,上面那些规范都是固定不变的知识,看一篇文章就能学到手。但是交互不一样,准确的说,它更像是组件的灵活应用,需要考虑的方面有用户体验,排版布局,功能逻辑。

举个简单的例子,有这样一个需求:六个大分类下有各自的内容,这里我们可以用tab选项卡,也可以用列表或者图标来设计这个功能,也许还有其它更好的解决办法,但到底哪个方法才是最优解呢?所以我们需要根据功能,结合用户体验和产品逻辑,来选择设计样式。

那怎么才能在交互上有所提升呢?首先,我们要了解开发组件库,因为用组件库里现成的样式,开发效率高,交互不会出错;其次,要多搜集组件样式,比如我们想加入一些创意,就可以参考网络资源,修改一些基本样式,这样既可以避免我们脑洞的设计实现不了或者出现逻辑问题,也可以把链接发给开发看,提高沟通效率。

一句话就是,平时要多留意一些组件样式和交互方式,比如常见的搜索,输入框,日历,弹框,开关,按钮,列表,tab,卡片等等。

八.补充

  • 对于iphonex的适配,我的解决办法是:按照iphone6 plus设计介面,但是要针对iphonex的屏幕重新布局,因为它的屏幕比例并不是9:16,特别是还有底部横条,按钮不能被横条挡着,影响美观不说,还会造成误操作,我们可以把底部按钮设计到右下角,避开那个横条。
  • 这里总结了设计规范包含的方面,这只是一个提纲,每个标题下还包含很多内容,需要大家去完善。
Iphone6 plus UI设计规范
Iphone6 plus UI设计规范

完。

原文地址:番茄设计匠(公众号)

作者:番茄设计匠

Iphone6 plus UI设计规范
Iphone6 plus UI设计规范