如何看懂UI效果图
又是一年毕业季，面对已经到来的求职热潮，刚毕业的“设计新人”如何在求职面试中少走弯路、顺利进入心仪的公司呢？
首先来了解一下什么是UI设计。
UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。
在飞速发展的电子产品中，界面设计工作一点点的被重视起来。做界面设计的“美工”也随之被称之为“UI设计师”。
其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。
UI的发展是伴随着电子媒体的升级发展而发展的。在中国，UI设计是伴随着iPhone4的大热而兴起的，到2013年左右，UI设计行业开始火起来，到2015年到达爆发，成为设计界的“网红”。
根据个人理解
UI的工作领域主要包括以下五个方面：
1、网页UI设计
2、移动端UI设计
3、智能设备UI设计（如智能汽车车载设备，如穿戴设备Apple Watch、家用设备小米电视，户外设备，其他商用设备等）
4、客户端UI设计（如QQ客户端）
5、游戏领域或其他
接下来，我们科普一下UI设计的历史吧。
大家接触UI这个名词是最近几年的事情，但是UI设计在设计行业一直存在，从最初我们用的电子产品、软件再到网站的建设，这些都是UI范畴，我们现在使用的电脑显示屏里的东西也都是UI。可以这么说，自从有了设计这个行业，UI这个名词其实就已经出现了。
那么，为什么到最近几年这个名词才被大家熟悉和这么火呢？因为越来越多的企业意识到设计的重要性和用户使用感受对产品的影响了，也就是用户体验。
国外UI对中国的影响很大，就如iPhone出现 iOS7发布，扁平化出现，行业大部分UI的风格趋向扁平化，国外的各种设计手法，流行趋势也影响着国内的很多设计师。
早期UI的出现
Windows 1.0（1985）
Mac早期操作界面
俄罗斯方块是在1985年6月由俄罗斯人发明的，这位发明者叫阿列克思·帕基特诺夫
广告灯箱，在屏上闪动的文字和图片
移动端UI的出现
手机UI的出现时间较早，但是真正被大家关注的是iPhone的出现，乔布斯把硬件和软件完美结合，加上优秀的用户体验，开辟了苹果的时代。在中国，UI设计行业也由此兴起，越来越多的设计师踏入这个行业。
UI的兴起
手机，平板电脑是主流的UI形式，如今效果与技术越来越成熟。Web UI用户体验也越来越专业，对用户体验也表现的很重视。
UI发展的多元化
除了比较主流的手机、平板以及web的UI设计之外，智能穿戴设备、智能家居的兴起也为UI设计提供了很大的空间。
必须指出的是，在国外没有纯粹的UI设计师，需要做产品经理，交换、程序开发等，是全能型的设计师，而在国内，对UI设计师有比较明确的界定。
一、 如何开始学习UI设计
1、 流程
首先是公司老板或者投资人有想法、有钱、有资源，他们会把想法告诉产品经理，产品经理就会开始做执行层面的事情，如对其进行需求分析、工作排期，输出需求分析文档，将其交给UE，UE制作原型图和交互说明文档，交给UI设计师。UI设计师拿着原型图去做图标、界面、切图、标注、适配等，交给程序员用代码实现，再交给测试人员，完成测试后交给运营。
UI设计师在整个流程中的工作是非常琐碎的、精确的，其实它没有那么大的重要性，主要是注重配合，在视觉上满足基本功能实现，使整个流程能够运转起来的角色。当然还需要跟不同的部门人员沟通，如需要充分地理解产品经理的需求，然后跟前端对接是否能把设计好的界面较为完美地呈现给终端用户等等。
2、 规范
【图标】
很多设计师以为UI设计就是设计图标。虽然事实并非如此，但图标的设计在整个UI设计中是比较基础的一个环节。特别是对于新人，所以大家一起来看看图标设计的规范吧：
（1）像素对齐
需要严格的做到像素对齐，尤其是在做较小尺寸的图标时，如果不严格的遵循像素对齐，那最终的显示效果就会出现问题。
（2）多用布尔运算
在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点：
· 让你的图标更加规范
· 对图形结构理解更加深刻
· 后期更改形状更加方便
（3）独特的风格
在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。
在这里值得一提就是，我们在做线性图标时，一定要保证描边粗细相同、圆角相同，如果这些基础的规则都没有遵循，那也就谈不上风格的统一、创新了。
（4）视觉大小统一
在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。
【标注】
如何把标注的思路整理清晰——结构化思维进行拆解，将大问题拆解成小问题，逐一击破！
标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。在进行标注时，首先去除导航栏和标签栏，因为这些控件通用性非常强，需要单独拿出来进行统一标注，这里我们只对内容区来进行标注示例。
（1）尺寸
我们要将页面上有所需要告知尺寸的内容进行标注，例如图标、图片、头像等等。关于尺寸维度的标注我们需要注意的是：
· 有圆角的地方，需要将圆角半径标出。
· 对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如按压状态、无效状态、选中状态等等，如果你不标明，开会就会默认没有这些效果。
· 一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。
· 很多没有经验的设计师不理解适配的原理，所以很容易将一些控件给出固定的尺寸大小，如果你将这个按钮的宽度和高度都标注出来，开发就会将这个按钮的大小写死，一旦遇到屏幕（白色区域）较宽的时候，按钮还是固定大小，就会影响视觉效果。所以正确的标注方法是给出按钮两边的间距，让整个按钮的宽度自适应（当然高度还是要固定的）,这样不论遇到哪种分辨率的尺寸，都能够保持相同的视觉效果，扩展性极强。
（2）文字
文字，需要标注文字的大小、字体、颜色、透明度、行高等等，当然也可以和开发进行沟通，对一些内容进行删减。关于文字的标注需要注意的事项：文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚。
表面上我们将标题文字的大小、颜色这些内容标注清楚就可以了，但是如果标题文字过多的时候该怎么处理呢？所以必须要给出一个极限情况的规范，比如最多显示多少个字符，字符超过极限值就用打点的方式处理。
（3）间距
有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题。
（4）颜色
需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项：切记文字的颜色已经归类到文字属性里面，不用重复标注，思路一定要保持清晰。
【命名】
很多UI设计师对于“命名”是没什么概念的，他们都是随随便便地用一些没有特定意思的字母去给页面命名，我觉得这是不好的。因为我觉得，统一的、规范的命名对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。而且，如果如果命名不统一，团队之间的成员很难达成共识，任务交接时需要很大的学习成本。
而更重要的是，有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。
（1）所有命名全部为小写英文字母
在程序员的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的，所以命名全部用小写的英文字母是最基本的规则。有些人会觉得写这么多英文太麻烦，但其实为了自己专业能力的提高，这种规范的命名方式是必须要经历的过程，当你习惯了这样的命名方式后，你的成就感会油然而生。
（2）命名格式
一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。
通用切片命名格式：
组件_类别_功能_状态@2x.png
举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）
模块特有切图命名规则：
模块_类别_功能_状态@2x.png
举例：mail_icon_search_pressed@2x.png（对应的中文为：邮件_图标_搜索_默认@2x.png）
我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。（要注意，命名中不能含有空格）
（3）常用英文单词表
如果所有命名都写为全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。至于怎么缩写，只要整个团队能够达成共识并且输出一份缩写清单，任何缩写规则都是可以的。
下面提供一些命名时常用的英文单词列表：
bg（backgrond 背景）
nav（navbar 导航栏）
tab（tabbar 标签栏）
btn（button 按钮）
img（image 图片）
del（delete 删除）
msg（message 提示信息）
pop（pop up 弹出）
icon（图标）
selected（选中）
disabled（不可点击）
default（默认）
pressed（按下）
back（返回）
edit（编辑）
content（内容）
left/center/right（左/中/右）
logo（标识）
login（登录）
refresh（刷新）
banner（广告）
link（链接）
user（用户）
download（下载）
note（注释）
3、 细节
这一部分的知识，如【交互常识】、【图标】、【图片】、【动效】观点一致。
另外要再强调两点：
（1）用户手势行为，单手手势的可操作范围、手势组合的考虑等等；
（2）因为UI更多的是数据驱动下的设计，所以不强调个性，强调的是合理的交互与团队合作精神。
二、 UI设计高手之路
对UI设计的工作有了具体的了解，并且实战过一段时间之后，我们就应该朝着“高手之路”进军吧。
1、 培养整体大局观
（1）提升高效沟通的能力
高手级别的UI设计师，需要花相当一部分时间用于与产品经理、UE、前端开发人员等进行沟通，甚至有可能直接跟客户沟通。这时候，你需要加强沟通的技巧，以实现高效的沟通。
（2）加强时间管理的能力
除了沟通技巧之外，高效地管理时间也是网页设计师需要提升的能力。你需要把网页设计过程中的时间安排提前规划好，并严格按照进度进行，以免延误Deadline。
（3）加强项目管理的能力
要知道，网页设计师不仅仅是埋头画图写代码的，你也需要了解整个项目从启动到规划、到执行、到结束的全过程，这样才更利于网页设计工作的开展。
2、 数据为导向
作为UI设计师要了解的是，好看的设计不一定受欢迎。UI设计的好与坏需要以数据为导向。这里要补充一点的是，如果品牌是刚建立的自身并没有任何数据参考，可根据潜在对手的数据去做出最优策略的设计，这也是数据驱动下设计的一种方法。
3、 更专业更广泛的发展方向
刚才已经说过了，在国外的大公司已经没有了单纯的UI设计师了，基本上都是UE设计师，当然根据国内的发展来说，UI设计还没有发展到那一步，但是作为设计师的你，我还是建议往以下两个方向去发展——
更专业：如三维UI、手绘UI、动效UI方向发展，
更广泛：如全栈UI、UE设计师方向全面去学习与发展。
毕竟设计日新月异，以前做个漂亮的图标就能轻松面试成功，现在更多时候需要的是你对于整个项目的理解，所以社会上对于UI设计师的要求越来越高，大家一定要时刻保持进步与终身学习的态度哦。
Ui设计是数据驱动下的设计，是服务于广大终端用户的，要做一名优秀的UI设计师就需要有全面的互联网知识，对于数据的敏感度，以及对于终端用户的洞察力。这就是UI有别于其他设计的地方。
