目前在行业里,关于APP界面设计规范也是层次不齐,很多都还停留在6的设备和iOS9的系统之上,而现在最新的是iPhone8和iOS11了(更新换代真的很快),我这里说的是最新的iOS界面设计规范(Android设计规范,下次再说)
一.关于设计工具
俗话说:工欲善其事必先利其器,好的工具可以让我们的工作效率更高,做界面设计我们用的最多的软件就是PS和AI了,如果你是Mac用户,可以使用Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度也就更快。
刚接触PS是从8.0开始,8.0–CS4–CS5–CS6–CC–CC2014–CC2015-CC2017一直到现在的最新版本PSCC2018,深刻体会,新的版本更好用,功能更多,效果更快,根据个人习惯,选择自己电脑适合的版本就好。
如果你的电脑系统是64位的建议安装最新版本2018版,如果你电脑系统是32位的,就只能安装CS系列版本,由于32位的系统配置太低,不支持安装最新版本。
二.设计稿尺寸
在看设计稿尺寸之前,我们先来了解一下APP界面设计构成。
界面构成由:布局层、图文排版层和图标层。
在iPhone6还没出的时候,都是用640×1136px来做设计稿的,自从6的发布,所有的设计稿尺寸以750×1334px来做设计稿尺寸。
再带大家来看看,到目前为止所有iPhone的尺寸(1-3代就不用考虑了):
iPhone界面设计规范:
iPhone界面尺寸:
以750x1334px作为设计稿标准尺寸的原由:
1.从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。
2.大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。
3.设计安卓版本时只需做最小的设计调整,提升设计效率。
所以做设计稿时请以750x1334px来做设计稿。
在文档建立参考线是一个很好的习惯,我希望大家也可以养成这个习惯,上下很容易设置,左右我习惯设置24px的距离。
我通过对国内外很多APP就行了对比,总结是24px更合理,这个是我的个人习惯,所以也不要当做是明文规则,你设置为30px,也是可以的。
这里再给大家略过下iPad的设计规范:
三.图标设计
iPhone图标尺寸:
图标设计请用栅格化系统进行设计。
设计尺寸:1024x1024px,尽可能的采用黄金比例设计。
四.设计字体
先来看一下字体的历史演变过程
iOS9:英文字体为HelveticaNeue
iOS9:中文字体由为冬青黑
iOS10:英文字体为SanFrancisco
iOS10:中文字体为苹方
字体大小的问题:
顶部操作栏文字大小34-38px
标题文字大小28-34px
正文文字大小26-30px
辅助性文字大小20-24px
Tabbar文字大小20px
文字大小只是一个范围,这要根据设计的视觉效果来决定,不要死记硬背,但是切记,字体大小要用偶数。
上面讲了界面设计,我们设计完界面,下面就开始讲下UI切图和标注。
一.切图工具和标注工具
1.切图工具:
Cutterman:一款PS的插件,切图非常方便,而且对PS版本要求比较高,针对CS6旧版本已经不维护更新了。推荐安装官方完整版PSCC及以上版本。
AssistorPS也是一款PS的切图标注插件,也被誉为神器;我使用了一下,感觉还可以,但是切图和标注上体验还是不高,但是AssistorPS的其他辅助功能还是很不错的,比如参考线辅助,圆角大小,磁铁功能。
需要学习软件的同学,大家可以百度搜索锦子会,去锦子会官网下载更多学习资源!如想要了解我的,请百度搜索罗锦,欢迎了解更多我的设计之路!
2.标注工具:
PxCook(像素大厨),是一款切图标注设计工具软件。自2.0.0版本开始,支持PSD文件的文字,颜色,距离自动智能识别。
优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。
标注功能包括:支持长度,颜色,区域,文字注释;从2.0.0版本开始,整体效率有了很大的提高,值得推荐的是自动智能识别标注。
但是,Parker并不是免费的,而是一款付费软件,需要60RMB。
MarkMan,也是一款高效的设计稿标注工具,支持Win/Mac,可免费使用基础功能,免费版的在体验上也是差强人意,毕竟是免费的,如果需要高级功能也是需要付费的60RMB。
以上工具各有优点和缺点,在选择上主要还是看个人的习惯,你觉得哪个用着顺手就选择哪个都可以。
二.页面标注
标注是非常重要的,前端开发哥哥能不能完美的的还原设计稿,很大一部分取决于我们的标注;如果不清楚你该怎么标,一定要和开发哥哥沟通!
沟通是非常有效解决问题的途径!
在这里我大致的说一下我的标注习惯,不需要将每一张效果图都进行标注,你标注的页面能保证开发能把每个页面都能顺利进行就可以了。
我拿我标注过的页面做个示例:
我们从上面的标注图可以看出,需要标注的内容有:
文字:字体大小、字体颜色
布局控件属性:控件宽高、背景色、透明度、描边、圆角大小
列表:列表高度、列表颜色、列表内内容上下间距
间距:控件之间的距离、左右边距
段落文字:字体大小、字体颜色、行距
全部属性:如导航栏文字大小、颜色,左右边距,默认间距等,你可以提前跟开发哥哥说好,不用标注
所有的页面标注总结起来就是:标文字,标间距,标大小,标区域
注:标注颜色格式是使用16进制(如:#FF0000),还是RGB(255,0,0)?你需要和开发哥哥商量一下,根据他的开发习惯,一般采用16进制色值就好了。
三.界面切图
我还是拿图举例来说明:
icon_alipay.png→iPhone1-3代的手机(已经不考虑了)
icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸,这就是我们通常所说的2倍图
icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸,这就是3倍图
可以简单的理解为倍数关系,如果你使用750x1334px(iPhone6/6S/7)尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。
其他总结
1.到底哪些资源需要切图,哪些不需要切图?
只要是无法用代码来实现和表达出来的,就需要切图
如果实在不清楚要不要切图,多和开发沟通,他会告诉你哪些是需要你切图。
2.切图需要切几套?(这里我只以iOS作为标准,安卓下次再说)
理论上,我们需要切3套图,是为了更好的适配
在实际工作中,iOS只需要切2套图就可以,分别为:@2x和@3x
3.切图需要注意以下几点:
切图输出格式必须为png24位、png8位、jpg格3种格式
同一模块内,切图大小应保持一致
切图输出大小必须保持为偶数
为了减小包的大小,所有切图尽量压缩后再给开发
关于UI切图和标注的基础知识就说到这里了,如果在UI设计工作中,不清楚该怎么切怎么标的时候。
请多和前端开发程序员交流,良好的沟通才是解决问题的唯一方法,切记不要一个人在那瞎琢磨。
UI设计是一个高薪的行业,选择好了再努力,工资必定上涨。
详细了解:零基础学习UI,如何4个月入职互联网公司?
那么如果你是零基础想学好UI设计或者是想转行UI设计,改变自己。
课程详情了解:
零基础学习UI,如何4个月入职互联网公司?
详情了解:
报名VIP课程可以获得什么权限(价值上万)
往期回顾:
人为什么宁愿吃生活的苦,也不愿吃学习的苦?(详情请点击链接跳转)
30岁之前,逼自己一把,让自己成为这样的人(详情请点击链接跳转)
请看下面的详细版课程介绍。
报名VIP课程可以获得什么权限(价值上万)(详情请点击链接跳转)
报名UI设计全能就业班成为VIP学员可学习UI设计全套完整超清课程,随时随地可学。
详情了解:2018年能让你成为月薪过万的UI设计师机会!
努力4个月,换一份高薪UI设计师工作值不值
想系统学习我们的UI设计全能班课程的同学请点击下面》如何正确学习UI设计
如何正确学习UI设计
更多精彩:
你们会教到什么软件呢?
我们的课程中主要会讲到4款软件,
分别是Photoshop,Illustrator,AfterEffects,AxureRP8。
简称,PS,AI,AE,ARP软件。
AI主要用于制作UI设计中的图标设计,也可以对UI中的一些引导页的插画图进行设计。
AE主要用于制作UI设计中的交互动效,在现今的UI产品中很多都是需要用动效的。
ARP主要用于制作UI设计中的原型图,线框图,流程图的设计。
学历低可以学习吗?
可以,一般UI设计工作的公司都为互联网公司,互联网公司卡能力严格一些,学历相对较低,不像传统企业卡的很严格,一般大型互联网公司有大专学历就行了,小型互联网公司有初中毕业就可以了。如果你有足够好的作品,就算学历真的是初中也是可以去大型互联网公司的。而且学历其实也可以提升的,通过成人高考,远程教育,自考等方式都可以提升。