作为一名合格的UI设计师，你应该知道的那些事！

　SuHu@iUI：UI设计在早已不是一个新兴的行业，在这个蒸蒸日上的互联网时代，我们也萌萌哒的发展了起来，各行各业的人才也相继涌入到我们的大家庭中，但随之而来也暴露了许多问题。

　　就是很多人虽然已经从事了UI设计行业，但他们对UI设计的基本专业知识却是相当匮乏的，甚至会受到一些错误的引导，也会因为一些专业术语而感到困惑，其实有些东西也不是一两句话能说清楚的，需要你切身实际的去体验，才会收获你真正需要的，那也是你所真正信服的。

　　不过为了拨开大家心中的雾霾，我给大家总结了一下UI设计的一些基本规范和常识（比较完整全面的一篇），篇幅较长，不建议几次性看完~

一名合格的 UI 设计师应该知道的那些事...

拟物化到扁平风的演变

Windows：

　　当然Win的历史相当悠久了，但在我的心中莫过于95、xp、以及win7了。

　　95的灰色框架（当时上计算机课唯一能玩的一款游戏就是扫地雷了~）。xp的渐变蓝色经典，现在想想还又如昨日，那段漫长的日子**。直到Win7，让我们看到了骚骚的半透明~也是进一次提升了拟物化的本质。



windows95



windowsXp



windows7

IOS:

从ios1到ios8 其实也是从拟物风到扁平化的演变，随着屏幕分辨率的不断变化，考虑到视觉兼容性、运行资源、储存空间等，拟物化逐渐被扁平风所代替。

　　从IOS7也就是iP5s的发布标志着IOS扁平风的登场，继而IOS8加入了许多优美的小动画，增强了用户的操作体验，使扁平风变得更加生动有趣。



IOS6及之前风格



IOS7、IOS8

Android：

安卓的历程就像是丑小鸭变成了白天鹅，去了趟“韩国”就是不一样哈哈哈~~其实安卓在5.0之前一直是个丑逼！

　　直到Goodle在安卓5.0上使用了全新的Material Design（需要详细了解MD设计准则的同学请关注我的微信公众号，并回复MD,即可获得），让安卓有了更特色的鲜明的设计语言，在界面美化这一点上足够与苹果相媲美啦～

有图有真相！



安卓5.0之前



安卓5.0之后

总结：

我认为！图标之所以称之为图标，就是因为它，风格上的统一性，大众化的通用性，功能上的象征性。

　　拟物化的图标确实很好看，有些质感调的和实物基本区分不出来，再加上一些设计和创意的思维简直完美，但在我看来它可以是一个艺术品，但不是一个合格的icon。即使是拟物化每天都会看到N多遍也会感觉到厌烦的。

　　当然了在体验方面苹果做的很巧妙，在扁平的基础上，通过交互体验添加了一些很有趣的小动画，**提高了用户的体验性，从而避免了扁平风看起来比较枯燥，简单的弊端。

分辨率

Android分辨率比较杂，但据网上数据统计一般为480*640、720*1280、1080*1920等几种最为常见。

IOS分辨率为640*960／4s，640*1136／5s，750*1334／6，1240*2208／6 plus（1080*1920为渲染尺寸）。

因为手机的页面的浏览为上下滑动，所以高度是不稳定的，那么我们去掉高度，两种系统的分辨率就剩下了480、640、720、750、1080。如果这五个数字是个规律测试题，那么你会发现480、720、1080的关系了吧，720除以1.5为480，720乘以1.5为1080。

　　那我为什么省去了中间的数字呢，其实很简单，实际体验中，在手机上相差几十个像素人眼是识别不到的。直接为倍数关系也是为了方便切图输出，更好的上下适配，提高工作效率，因此切三套或两套素材就可以实现了。



UI单位换算对照表

切图资源

IOS系统开发工程师设定的图片尺寸为苹果手机本身尺寸的一半。所以你设计的图片、banner、icon、文字都要为偶数。

　　以p6为模板举例子，在750*1334的设计稿中，一个640*400的素材，工程师再上传中这个素材会被默认为320*200的，（原因就是初代手机为iPhone 3GS分辨率为320*480，也就是IOS开发软件Xcode上传图片默认的原始尺寸，也就是一倍图一直沿用至今。）因此在在输出的时候，原始的图片后缀要加上@2x（2倍图@2x包含了4s、5s、6的尺寸）。输出6s尺寸的时候为原始图片的1.5倍后缀名为@3x（三倍图@3x也就是普拉斯），并且以png为主。

Sketch的切图工具是本身自带的，在属性栏的右下角，默认设置了多倍图，你只需点击你绘制的icon和图片便能自动生成后缀名为xx@2x和xx@3x的图片，其中文件名不能有中文，需简要表明文件特性，状态等以便开发人员调用。相比ps中的Cutman更加方便，省去了新建在导出的这一步骤。（需要详细了解切图的同学，我会录制视频讲解）

Android系统开发平台其实与IOS大相径庭，例如以720*1280为模板，本身切图原始尺寸后缀名为xhdpi，扩大1.5倍为1080*1920的尺寸后缀名为xxhdpi。

（2倍图xhdpi包含了640*1136、640*960、720*1280、750*1334等。三倍图xxhdpi也就是1080*1920）

需要注意的是切图过程中要勤于与开发人员沟通，遇到问题及时解决。避免不必要的返工与误会。

总结：IOS:一般以750*1334为模板，状态栏高度：40px，导航栏高度：88px，标签栏高度：98px。切图输出的@2x属于4s、5s、6。@3x属于6s。Android：一般以720*1280为模板，状态栏高度：50px，导航栏高度：96px，标签栏高度：96px。xhdpi属于720*1280，xxhdpi属于1080*1920。（当然如果用Sketch做app界面的话这些都是有现成模板，如图只需要复制粘贴大法就能随意调用了）



Material Design UI模板



IOS UI模板

字体

IOS:中文字体Heiti SC（苹果黑体），英文字体Helvetica Neue LT。Android：Droid Sans Fallback。在Mac中这两种字体是系统自带的的，PC上则需要用其他字体代替了如苹果丽黑和黑体-简。

字号大小也是在一个范围内而且要用偶数，如标题文字 28-34px，正文文字 26-30px，辅助性文字 20-24px，Tab bar文字 20px。

尺寸单位

pt：Point，中文翻译为“点”，它并非指纸质印刷的“磅”单位，而是与dp和sp一样，是相对单位（并非物理尺寸，换算值取决于屏幕尺寸与像素密度），依据手指触摸屏幕的面积大约为7－10mm，而物理单位1mm≈5.26pt（1pt≈0.19mm），44pt大约相当于8mm。pt单位用于ios的UI设计，基于@1x（iPhone3GS）1pt=1px;@2x(iP4-6s)1pt=2px;@3x(iP6Plus)1pt=3px（依据“UI单位换算对照表”）。

ppi：Pixels per Inch译为“屏幕像素密度”，屏幕上每英寸可以显示的像素点的数量，但由于手机屏幕千变万化，我们则需要把不同的尺寸适应到相应像素的屏幕中，一般为120、160、360、480、640分别对应从320P 到2K 的显示屏，这样才能保证低密度屏幕和高密度屏幕显示的内容大致相同，也进一步提高了手机端运行速度。

dp：Android系统字号单位，以160ppi为标准，则1dp=1px，dp与px的换算公式为：1dp*ppi/160=1px，如果屏幕ppi为320，那么1dp=2px。一般为App界面中的字体单位。

sp：Android系统字号单位，一般为手机本身系统界面自带的一种字体单位，有小、中、大、超大等，可以再系统设定中更改。

标注

说道标注不得不夸一下Sketch中强大的第三方插件measure了。可爱的你遇到便捷的他，奋笔疾书的日子从此变成了咖啡泡馍时间了。它会上你的工作效率会更上一层楼。 它与PXCooK的差别就在于它可以同时标注16进制和RGB，背景色的透明度，字号大小以及行间距，并且可以自动生成html和静态的JS。

如图:





　　用Win的小伙伴也不要着急只要你有耐心依据以下几点做也会做到的哦~

　　首先PS上安装cutman，然后通过Pxcook标注就可以了（这里不多做解释了，如果你想了解请私密我吧~）

文字标注：字体大小、颜色、文本行高、上下间距

图片标注：尺寸大小、距离左或右的边距、与文字间距、上下间距

间距标注：分割线的高度、颜色、模块间隔、整体界面左右空白间距，一般为24px

区域标注：背景色、透明度、点击区域的长宽

九宫图

九宫图也叫点九图，是安卓开发平台的一种特殊图片形式，文件扩展名为：.9.png。主要是为了图形横向或纵向拉伸不变形，（例如按钮和对话框，如图）。IOS平台可以根据普通的图片进行编写代码将图片变形。也就是说IOS就不需要做九宫图啦~~

当然还有比较复杂的点就切图，比图异形的泡泡，一些组件元素等怎么切才能让文字居中显示呢。