​天津UI培训班,双十一加购这份iOS设计规范!

2018-11-01 浏览0次

天津UI培训班双十一加购这份iOS设计规范!

双十一的战火已经烧了半个月,过冬衣物、打折家电、日用品、零食……要买的东西屯在购物车里一望无际……

等等!UI设计师们别忘了!

这里有一份2018iOS设计规范,请加购!!

 

 

对比安卓的杂乱不一、规范标准常常无“官宣”,苹果的设计规范还是比较明确的。设计师们需要注意的就是苹果历代产品不同的屏幕尺寸和分辨率啦。

 

手机型号

实际像素

逻辑像素

张数

iPhone XS Max

1242 x 2688 px

414 x 896 pt

1

iPhone XR

828 x 1792 px

414 x 896 pt

1

iPhone X

1125 x 2436 px

375 x 812 pt

1

iPhone 8Plus

1242 x 2208 px

414 x 736 pt

1

iPhone 8

750 x 1334 px

375 x 667 pt

1

iPhone SE

640 x 1136 px

320 x 568 pt

1

 

 

因为流通量大、存货量大,我们在设计的时候还是以iphone6/7/8为基准设计尺寸。

下面是iphone6/7/8的设计规范:

 

1.iphone6/7/8组件尺寸

状态栏高度20pt40px

导航栏44pt88px

Tab49pt98px

导航标题字号建议17pt34px

导航栏图标建议22pt44px

Tab栏图标建议30pt60px

Tab栏图标注释文字11pt22px

左右安全距离建议12pt24px

字号从10pt20px)到34pt68px)均可,要视具体情况决定。

 

2.设计方式

UIKit从首页就可以找到,有 PSDSketch 以及 XD版本来对应各个设计软件里面的元素满足之后的设计。大家下载以后会发现所有文件均有两份,标识-iPhoneX -iPhoneX 专用,另一个是 iPhone6/7/8专用。

 

3.启动图标

在刚刚提到的首页资源中, Template-AppIcons-iOS 这个文件。设计师可以用自己的启动图标将智能对象的内容代替,然后所有尺寸的图标都会变成你的设计。图标的设计,使用AI等矢量软件比较好。

 

4.字体

iOS 9英文字体:Helvetica Neue

iOS 9中文字体:冬青黑

iOS 10英文字体:San Francisco

iOS 10中文字体:苹方(PingFang SC Light)

 

设计稿标准文字选用“苹方(PingFang SC Light) ”标题可加粗选用“苹方粗体”。

 

行间距:这一点没有固定的标准,具体要根据整体风格来调整,不过一般的规律是将行间距和字号的比例设置为1.5倍。

 

文字对齐:正文文字选择两端对齐左对齐。

 

关于字号:为了确保字体在不同尺寸下的所有类型都具备可读性,使用的字号应该不小于22px,内容样式使用34px的字号作为zui大尺寸,字体为偶数。

具体的文字大小,比较认可并且常用的范围是:

 

顶部操作栏文字大小:34-38px

标题文字大小:28-34px

正文文字大小:26-30px

辅助性文字大小:0-24px

Tab bar文字大小:20px

 

 

双十一要来了,UI设计师要对自己好一点!在诚筑说为每一位老师和同学都准备了精彩的双十一礼物,要不要来抽取你的幸运福袋呢?


该内容系 诚筑说 制作上传并发布,文章图文内容系该用户观点,并不是也不反映培训通平台之任何意见和主张,也不表示培训通同意或支持该用户上的任何内容、主张或立场。培训通对第三方内容之合法性、准确性、真实性、适用性、安全性等概不负责,也无法负责。若该网页内容涉嫌侵权,请发邮件qq:16720809。
温馨提示: 提交留言后老师会第一时间与您联系! 热线电话:4006664820