作者：Omega（邵和明）
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
从零开始学UI——概念解析/实战提高/突破规则试读：
前言
我为什么要写这本书？
在人民邮电出版社邀请我写这本书之前，其实有不少朋友和出版社的编辑曾找到我，想要我写一些东西，我一直都是拒绝的，因为我没有什么把握能写一些真正从各个角度看都无懈可击的内容，所以对写书这件事情一直诚惶诚恐。
之前也陆陆续续写过一些文章，有基础的教程，有高级一点的教程，也有一些关于职业规划的文章，甚至跟朋友一起录过一系列的视频教程。我的性格又是那种，一旦自己学会了，掌握了，就觉得：“嗯？这事儿好像挺简单的，别人应该都懂的吧？”总觉得没有什么东西可以夸夸其谈。直到有一天开始带新人才发现，原来，还是有不少新手什么都不懂。
到2017年7月，就从业十年了，所以，在从业十年之际，诚惶诚恐的我，想写点东西给那些刚入行的新人们，一点点经验之谈。这本书并不能让你从入门到大师，因为从入门到大师真的不是一本书就能做到的，这本书只是讲一讲对于打算或者刚刚进入UI领域的新人，如何入门，因为我觉得，一旦入门，学会了学习的方法，你自己就会知道如何去成长，如何通过大量的实践和练习去顿悟。另外，本书附赠教学资源，包括素材文件、源文件、模板文件和GIF图片。扫描“资源下载”二维码即可获得下载方法。如需下载技术支持，请致函在前言中出现的网址要做链接 szys@ptpress.com.cn。如果你觉得书中我哪里说的不对，欢迎告诉我（如果想要联系我，可以到微信公众号“小课堂”后台留言）。资源下载
我不想按照一般的教程那样，先讲一大堆理论，然后搜一大堆案例，然后收尾，而是将我个人学习摸索的历程作为大纲，从不懂UI设计的概念到了解UI到底是什么，然后了解UI设计师主要做什么。接下来，摸爬滚打地进入各种设计网站看教程，学习软件，学习画图标，能做一点实际的东西之后，又开始系统化地去学习规则，再之后就是考虑职业化和职业发展的一些问题，如作为UI设计师接下来需要发展哪些技能，最后收尾。希望本书能让你有所收获。Omega（邵和明）1 UI基础
UI即User Interface的缩写，中文翻译为用户界面，现泛指用户界面设计。例如，网页设计、软件界面设计、手机操作系统设计、手机游戏或App界面设计、应用图标设计、操作动效设计等，都属于UI的范畴。1.1 用户界面的风格演变
UI本来包括图形界面设计以及交互设计，但随着设计师设计习惯的变化，UI渐渐成为GUI的泛称。GUI是Graphical User Interface（图形化用户界面）的缩写，第一代图形化用户界面问世于1973年，应用在美国Xerox PARC（施乐公司帕洛阿尔托研究中心）研发的个人计算机上，当时的操作系统被命名为Alto，Alto首次将所有的元素都集中到现代图形用户界面中，图1-1所示即为施乐Alto的历史图片。图1-1 施乐的Alto是首款拥有图形用户界面的台式计算机（图片来源：中关村在线）
在施乐研发出首款图形用户界面之前，所有的操作都需要通过键盘命令来执行，如果要打开一个文件夹，操作界面的视觉效果如图1-2所示，如果要做一个报表，操作界面的视觉效果如图1-3所示。图1-2 CP/M-86操作系统界面截图（图片来源：维基百科）图1-3 Apple II的VisiCalc 电子表格应用 （图片来源：维基百科）
在图形界面诞生之前，人们要学习使用计算机，需要对编程知识高度掌握，而计算机在当时造价不菲，必须要使用计算机的场合也比较少，这就造成了学习成本高而回报率低的现象，导致当时能使用计算机的人如凤毛麟角。
施乐的图形界面正式应用之后，其设计思路被史蒂芬。乔布斯和比尔。盖茨两个人发现并学习借鉴了，后来就研发出了Mac OS和Windows这两大迄今为止最流行的台式机操作系统。这两个操作系统的界面设计风格也成为GUI发展演变的典型代表。图1-4到图1-9所示为Mac OS比较典型的版本变化。
Mac OS 1.0～6.0，当时的系统名称为System Software，这几个版本的风格具有一致性，仅有黑和白两个颜色，甚至灰色都是通过像素间隔来实现的，图1-4所示即为Mac OS 6.0版本的系统风格。图1-4 Mac OS 6.0系统风格（图片来源：IT之家）
直到Mac OS 7.0，系统中才引入了彩色，如图1-5所示。图1-5 Mac OS 7.0系统风格（图片来源：IT之家）
1999年发布了Mac OS 9.0，如图1-6所示。在Mac OS X正式发布之前，Mac OS 9.0是Mac OS系列的最后一个系统版本。在这个界面中已经可以看出系统的拟物化趋势，但彩色深度和透明度仍然保持着20世纪的设计风格。图1-6 Mac OS 9.0系统风格（图片来源：IT之家）
Mac OS X系列是乔布斯回归苹果公司之后主导设计的操作系统，整个系列在乔布斯在任期间一直维持着拟物风格，具有强烈质感，图1-7所示即为Mac OS X 10.2版本的界面。图1-7 Mac OS X 10.2系统风格（图片来源：维基百科）
2013年6月发布的Mac OS X 10.9版本，被命名为Mavericks，同期发布的还有手机操作系统iOS 7，此时手机端的操作系统已经骤然由拟物风格转变为了超扁平风格，这对Mac OS X系列的设计风格也产生了一定影响，10.9版本的系统界面如图1-8所示，成为Mac OS X系列中沿用拟物化的最后一代操作系统。图1-8 Mac OS X 10.9系统风格（图片来源：Wikisend）
截至2016年底，Mac OS X系列最新的操作系统版本是10.11，被命名为EL Capitan，界面风格已经转变为非常明显的扁平化风格，如图1-9所示。与第一代超扁平风格有所不同，这个版本的界面设计增加了渐变和细节质感，还在界面中增加了磨砂玻璃的效果。此时，苹果手机端操作系统和桌面操作系统也完成了设计语言的统一。图1-9 Mac OS X 10.11系统风格（图片来源：softonic）
这里主要是对Mac OS中UI的发展史做了一个回顾，有兴趣的同学可以自行搜索Windows的界面风格演变。另外，移动端操作系统Android和iOS的系统风格演变，读者也可以自行翻阅资料了解。1.2 UI设计的种类
UI设计即界面设计，界面设计师需要从产品初期就参与评审，掌握好用户需求、产品功能点、产品逻辑结构及层级信息，并在设计过程中时常考虑界面是否有更好的形式来突出产品功能和提升用户体验。界面广泛应用于系统、软件、网页等各种应用场景，按照应用场景对界面设计进行简单的分类，有网页设计、软件操作界面设计、移动端软件界面设计和游戏界面设计，本书主要侧重于移动端软件界面设计的入门知识讲解。1.2.1 网页设计
网页界面设计要求设计师在进行界面设计时，时刻以“信息传达”为基础进行。而信息传达的媒介是通过视觉元素来呈现的，因此网页设计仍属于视觉传达的范畴，在进行界面设计时，应当遵守视觉传达的一般规律。网页设计师的主要工作，简而言之，就是创造出有吸引力的视觉艺术形式，来有效传达信息，并使信息的呈现变得更加清晰、准确。优秀的网页视觉设计，既能够明确网站定位、提升网站的格调，又能够简化网页操作引导，如图1-10所示。图1-10 简单明了的网页设计（图片来源：Behance）• 传达清晰的信息
信息清晰不仅仅是网页界面设计的基础原则，也是所有用户界面设计都必须遵从的基础原则。只有让用户有效理解界面传达的信息，才能进一步讨论更好的交互方式。“清晰”意味着用户能够准确接收到要表达的信息内容，并避免出错。• 以用户为中心
用户不会花太多时间在同一个网页页面内。在获得用户所需信息后，用户会跳转页面进入新的网页寻找信息。网页设计师需要站在用户角度进行设计，替用户节省时间，并充分考虑不同用户的操作习惯和对网络的了解程度，在大部分用户的立场上，将网页视觉设计得简洁明了、便于操作。“以用户为中心”意味着在进行设计之前，要对目标用户的需求、偏好以及操作习惯建立起充分认知。• 化繁为简
网页视觉设计的最终目标是为用户提供舒适的心理以及视觉体验，因此，在进行设计时，要提高用户对于网页的有效可控程度，不能布置繁杂的选项造成用户的操作困扰。用户不是网页设计师，对计算机使用经验停留在很初级的阶段，再加上不同用户使用习惯的不同，稍微复杂的操作就会导致用户的流失。“化繁为简”意味着设计师应该站在对网页原理和操作方式所知甚少的角度进行设计，减轻用户操作负担，创造“聪明”的网页。• 统一整体
在设计网页时，创造统一的风格，能够加深用户对网页的印象，形成网页独特的形象。风格统一的导航栏，可以更好地引导用户操作，花最短的时间找到所需信息。统一的页面操作选项，能够让用户在最短的时间内掌握整个网站的各种功能。如果网页设计风格不统一，会导致页面信息杂乱无章，用户需要用更多的时间成本换取信息，甚至可能会误导用户，使用户进行错误操作。“统一整体”不代表一成不变，在不同的网页选项中，可以通过不同的设计风格来对它们进行区分，也可以在网页改版时进行风格的更换，给用户带来耳目一新的感觉。• 合理布局
网页设计中的布局主要是指栏目、色块、图片、文字之间的搭配与协调。
合理布局要优先保证重要信息的突出、醒目。如图1-11中，网页名称利用大面积的蓝色进行衬托，而文章标题加粗加黑，文字部分则采用灰色的字体，能够给用户提供一种视觉引导。图1-11 布局合理的网页设计（图片来源：Behance）
合理布局要考虑的除了信息的突出与弱化以外，还有页面的配色。色彩在历史文化中形成了一定的表达语言。例如，红色令人感到温暖，蓝色令人感到平静，因此，网页的配色能够给用户带来最优先的视觉冲击。配色会令用户形成先入为主的印象，合理利用颜色，实现内容与形式的协调，是合理布局的必要基础。
合理布局还要求网页中图片与文字的搭配合理，图像过多意味着文字信息的减少，而文字过多则容易导致阅读时的枯燥乏味，合理的图文配比能够给页面带来生动感以及丰富感。
网页视觉设计师应当适应当下的硬件需求，了解响应式设计。兼容性高的网站，将拥有更大的用户群，这是因为响应式设计能够节约打开网页的时间，提升页面美观度，改善用户体验，最终吸引用户。1.2.2 软件界面设计
软件界面设计需要设计师掌握一定的手绘能力，同时拥有较高的审美水平，这里的软件主要是指桌面级系统（Mac OS X或者Windows等）的应用程序。软件设计的主要流程有5步：需求分析→设计分析→调研验证→方案改进→用户验证反馈。• 启动页设计
软件启动页的界面要适应各种操作系统，因此在选择图片时，要考虑到图片在不同屏幕上的显示效果，并在不同的平台上转换不同的格式。• 框架设计
框架设计要充分考虑用户使用习惯，确定好菜单栏、标签栏、滚动条、按钮的尺寸和位置。作为工具性的软件界面，要求界面设计简洁明了，易于操作，这就要求设计师必须对该工具软件的专业知识有所了解。例如车载系统的界面设计，要求界面设计师对胎压、时速、GPS、交通电台等选项和参数都有所了解，从而在设计时才能更好地迎合用户的操作习惯。• 按钮设计
软件中的按钮设计应该是具有交互性的，能够及时表明操作状态，例如悬停状态、选中状态、未选中状态等。软件中的按钮还应该简洁且具有指示效果，提示用户产生功能关联。要采用统一的风格进行按钮设计，突出提示功能差异较大的按钮。• 面板设计
操作面板可以采用选项卡的形式设置各个功能区间，并为信息设置下一级页面，供用户查看详情。设计“一键返回”的按钮，使用户能够直接返回主界面进行其他的操作。设计时应注意界面操作的流畅性，通过预判用户行为，采用信息缓存的形式，减少选项卡切换时用户的等待时间。• 菜单设计
菜单栏的按钮需要表明用户所处页面，可以设计两种主要状态，选中状态与未选中状态。存在下一级页面时，要设置有提示意味的箭头进行用户操作引导，不同功能区间则应该用线条分割或用大面积色块区分。1.2.3 App界面设计
App界面设计指的是手机上的软件界面设计，就是目前大家通常意义上理解的UI设计，也是本书重点讲解的内容。一个好的App界面设计需要在保证用户体验优秀的同时，视觉上也要美观，这里的判断依据包括交互简洁、风格新颖、创新、有吸引力、可实现等。• 交互简洁
交互简洁要求设计师在进行界面设计时，应该从典型用户的角度出发。在保证设计美观以及传达内容清晰的前提下，研究用户操作习惯，引导用户情绪，通过视觉设计来引导用户一步步地熟悉产品，让用户在使用产品的过程中能轻松找到自己需要的功能点而不至于迷失。同时要减少用户学习成本，一个有过多文字说明的App会减少用户的耐心。• 风格新颖
在进行App界面设计时，很多设计师通常会参考竞品的设计，结果最终设计出的界面与参考对象非常类似。优秀的UI设计师需要跳出惯性思维，在满足功能性的基础前提下，进行视觉上的创新。例如从拟物风格到扁平风格的创新，去除复杂的装饰元素，将功能性、交互提升到比视觉更重要的位置上，就是一次设计风格和设计思维的创新。
如果竞品采用了纯色的界面背景，设计师可以考虑如果使用照片或者炫彩的背景是否可以更好地贴合自己的产品等。当然，创新需要从产品本身出发，需要符合产品本身的调性。另外，视觉风格的创新可以帮助产品从大批竞品中脱颖而出，避免视觉风格上的同质化。• 创新
创新不仅仅是指视觉风格上的新颖，而是通过一些新的交互手段或者表达方式，解决用户在产品使用过程中的实际问题。界面设计的创新可以从易用性、趣味性、效率提升等几个方面着手，并且要考虑手机App的特性来进行。
比如说传统的书籍或者杂志，如果遇到一些需要注释的段落，需要翻到书或杂志的最后几页，才能看到。而如果做电子书App，我们不需要完全沿用传统纸质书的习惯，可以在需要注释的文字或者段落上加下划线，用户单击有下划线的文字或段落，就可以看到相应的注释，这样就可以提升阅读的效率，阅读体验也会更佳。• 有吸引力
有吸引力的第一步就是要在视觉上吸引用户，可以通过“差异化设计”等方式进行界面设计，巧妙地吸引用户眼球。但是，视觉上的美观并不能够长久地吸引用户，在诺曼的《情感化设计》一书中提出，只有使用户与产品产生共鸣才能长久地维系产品的吸引力，而视觉上的吸引最终会产生审美疲劳。使用具有情感共鸣的提示语或形象能够引导用户产生积极的心理效应和情感体验。• 可实现性
界面设计属于“设计”而非“艺术”，这意味着我们的设计目标是商业性质的，设计方案是需要落地的。做出来的界面如果技术上根本不能实现，或者实现成本太高，就是不合格的界面。UI设计师不仅仅要保证设计的视觉质量，同时也需要考虑到开发人员的实现能力，因此在进行界面设计之前，首先需要了解一些前端界面实现的相关知识，例如响应式设计、移动端的单位转换、动画效果的程序解决以及逻辑性等。1.2.4 游戏界面设计
游戏UI与其他几种UI不同的地方在于，游戏UI更加重视设计师的美术基础。游戏UI的主要目的是给玩家带来沉浸式的游戏体验。视觉作为连接虚拟世界和现实世界的窗口，在其中占有十分重要的战略地位。游戏UI的设计方式主要有两种，将UI融入游戏和弱化UI，前者对于设计师的手绘功底要求较高，后者对于交互设计的要求较高，要根据游戏类型判断选择何种方式实现沉浸式体验。• 将UI融入游戏
对于游戏界面设计来说，最好的UI是让玩家感觉不到它的存在。通常情况下，游戏玩家不希望通过窗口或是界面来看游戏中的虚拟世界，他们需要的是沉浸式的体验。这意味着我们在设计时，要尽可能地将UI与游戏中的虚拟环境相统一，使UI融入到游戏中去。如果做机甲战斗风格的游戏，就可以考虑UI采用蓝色半透明的科幻风格，出现方式甚至可以搭配电流音效，让界面与游戏本身更一致；而如果做中世纪战棋类游戏，就需要加入金属、黄金、宝石、锦旗等与时代更搭配的视觉元素来完成UI设计。• 弱化UI
弱化UI是把UI在界面中的占比减小，可以使用半透明对话框、细框界面窗口等，尽可能展示更多的游戏画面，让UI对游戏体验的打扰降低到最小，在一些VR（虚拟现实）类的游戏中，使用这种UI类型的游戏比较多。1.3 App界面设计师的职责
一般来说，每个设计师的喜好和能力不同，因此在设计任务分配的时候，也会根据不同设计师的特点来分配工作，这里大概讲一下UI设计师在工作中可能会遇到的工作任务。1.3.1 职责之内
UI设计师主要负责根据交互设计稿来做界面设计，包括界面布局的调整、界面色调的选择、风格的设定、图标的绘制、交互动画的设计、图片资源的输出、界面尺寸的标注、设计规范的制定、设计的走查跟进还原，有时也会做LOGO设计、VI设定、网页设计等。
移动端界面设计由于应用场景的不同，需要设计简单、轻量化，还需要准确地传达信息内容，让用户在App内尽快找到自己需要的功能。例如，地图类App 的界面需要帮助用户在最短的时间内获取所需信息，而娱乐类App的界面则需要帮助用户消磨时间。• 界面布局的调整
屏幕的布局需要满足用户的操作习惯以及视觉习惯。如图1-12所示，用户在屏幕上的阅读顺序通常是从上到下、从左到右，因此，为了节约用户时间，重要的信息应该放在屏幕最上方；用户在屏幕上的操作通常通过大拇指来完成，这就要求设计师将用户最常用的操作置于屏幕最下方，但要尽量避免将按钮置于手指的触碰死角。如图1-13所示，通常我们可以通过设置长按出现操作按钮的方式来使界面更加简洁，环状排列的按钮也更符合人体的手指滑动轨迹。图1-12 合理安排界面布局图1-13 长按出现操作按钮• 界面色调的选择
界面色调的选择是一门很重要的学问，色调首先需要根据客户和用户的定位以及诉求来选择。冷色调给人的感觉偏理性，暖色调给人的感觉偏感性，适宜的颜色能够在本身特性的基础上赋予App更多主观感受，而App反过来也促进了不同颜色带给人们的更多心理感知。在进行界面色调的选择时，首先可以参考竞品颜色，选择与竞品相近的颜色，例如，淘宝、小红书和聚美优品等购物类App，普遍选择了橙色、红色；而金融类的支付宝、手机银行等App则普遍选择了蓝色和白色作为界面主色调。其次也可以采用与竞品完全不同的颜色来进行区别定位，例如QQ用比较亮的蓝色和白色作为界面主色调，而微信采用的则是绿色和黑色，这种颜色的区别让QQ更符合面向青少年的定位，让微信更符合中青年白领的定位，颜色的不同也促进了两者视觉风格上的差异化发展。• 风格的设定
设计师在进行界面风格设定时，常常想突破原有的设计进行风格的创新，但这样的创新是具有一定风险的，如果能从趋势中发现潜在的先进点，的确能够使你的设计脱颖而出，但前提是它必须经得起市场的验证，任何设计师都不能为了标新立异而拿产品冒险。• 图标的绘制
图标对于界面设计师来说是花费时间最多的一项工作内容，图标能够加快用户获取信息的速度。画好一个图标需要关注图标的大小、造型以及氛围。图标的大小事实上影响到了每个功能的优先级，但对于不确定用户需求优先级的功能按钮，就需要设计一整套平级的图标，避免因图标大小带来对界面元素优先级的影响。在设计时，除了判断优先级大小以外，还必须要考虑到人的视觉影响因素。例如，正方形边长和圆形直径相等，但是在视觉上，正方形比圆形更大，因此在设计时，我们就要通过限定框，在画图前先规定好不同图形的视觉等大框，限定框可以参考Iconfont（阿里巴巴矢量图标库）中的矢量图形设计模板。图1-14所示为圆角正方形、圆形以及不同方向的长方形的限定框。图1-14 不同形状图标的限定框（图片来源：Iconfont）• 交互动画的设计
对于任何用户界面来说，视觉反馈都举足轻重，一方面视觉反馈可以明确用户对App的有效操控，另一方面视觉反馈可以提示用户App的正常运转。动效还可以反馈按钮功能的改变、屏幕空间的扩展、操作结果的提示等，动效还能够表现按钮与功能之间的层级关系，例如长按出现分享图标，则该图标最好从长按处弹出，而不是从屏幕侧面划出。• 图片资源的输出
图片资源输出时，若绘制的界面或图标拥有较多图层样式，在输出多种尺寸的资源时，直接缩放将会导致界面失真，或原有图形发生不符合预期的改变，这是因为缩放过程中图层样式中的参数不会等比缩放。因此，在输出资源时需要选中所有图层，转换为智能对象后再进行缩放处理，这里的细节操作会在后文的实操内容中详细介绍。• 界面尺寸的标注
页面标注是设计师与研发人员交接设计稿的重要环节，它说明了界面中元素与元素之间的距离、元素的尺寸、字体字号等详细信息。研发人员将根据标注去做界面的还原，将静态设计稿转化为可操作的程序。标注时需要保证所有的尺寸都是偶数，这是为了方便研发人员在写程序时进行屏幕单位的换算。• 设计规范的制定
规范能够帮助用户节约学习成本，将系统养成的使用习惯直接套用在App中，还能够帮助前端开发人员节约开发迭代的时间，直接调用自带标准控件进行程序开发。• 设计的跟进和还原
设计师将设计稿交到开发人员手上时，虽然已经标注好、切好图，但是不代表开发人员能够将界面表达得与设计稿完全一样，有时甚至会存在很大的偏差。因此，设计师要做好走查工作，检查页面的一致性，确保方案的可用性，确保屏幕上的按钮易于操作，确保文本易于阅读，检查界面颜色在不同屏幕上的展示效果。1.3.2 职责之外
所谓技多不压身，设计师涉猎的知识面可以广一点，但是设计的基本功一定要扎实。• 基础程序语言
通常，UI设计师不需要做编程相关的事情，但是懂一点基础的程序语言，能够减少页面修改次数，降低沟通成本。当然，越大的企业分工越细致，对专业水平的要求也就更高，因此，如果处于设计的初级阶段，首先应该提升自己的设计能力，其次才是了解基础的编程知识。• 手绘能力
通常，移动端界面设计师不需要太高超的手绘能力，但优秀的手绘能力，能够帮助你进行LOGO或者企业吉祥物、个性化软件皮肤的设计。1.4 合格UI设计师的必备技能1.4.1 了解互联网产品的诞生过程
在国内，UI设计师的概念是伴随着移动互联网的兴起而被大家所熟知的，因此，了解一款互联网产品从无到有的诞生过程是设计师的必修课，同时还需要明确UI设计师在整个过程中需要负责的工作。• 战略方向
一款互联网产品，需要有核心战略方向，即这款产品要通过什么方式解决什么问题。例如大家熟悉的“微信”，最开始的战略方向就是“通过语音留言的方式，解决人们沟通和交流的问题”。战略方向一般由企业的老板（BOSS）来决定。• 拆解功能点
确定战略方向后，就可以进行功能点的拆解了。例如“微信”以语音社交作为定位，就需要有信息列表页面、联系人页面、消息录音页面，需要有“录音”“发送”“播放语音”的功能，这些就是产品经理需要规划的事情。• 交互设计
基本的功能框架确定之后，就需要对这些框架进行功能点的设定，确定页面中功能点的分布，确定页面之间的跳转关系，这些就需要交互设计师来输出交互设计稿。• 界面设计
交互设计稿输出之后，就需要确定界面的视觉方案，包括界面布局、界面色调、界面风格、界面图标、界面动效等。这些就需要UI设计师来输出界面设计稿。• 产品开发
设计评审完成之后，产品经理需要拿着产品文档和设计稿与研发人员沟通具体的需求，研发人员开发产品之后，设计师需要跟进设计还原情况，测试没有问题后，产品就可以上线了。这样就基本完成了一款互联网产品的研发。• 其他
更完整的产品方案里，可能还会有用户研究、测试、运营、运维等步骤。1.4.2 深度掌握辅助工具
图1-15所示为Adobe公司开发的全套设计工具，界面设计师常用的可能有Adobe Photoshop、Adobe Illustrator、Adobe Flash、Adobe After Effect、Adobe Premiere等，但在本职工作中，用到最多的还是Photoshop。入门的同学只需要用心学好这一个工具就足够应对初级工作中需要解决的所有问题。图1-15 Adobe全套图标• Adobe Photoshop
UI设计师需要掌握的工具，最主要的就是Adobe Photoshop。版本不是很重要，但是每次版本更新，都会给UI设计师带来一些新的实用小功能。总体来说，Photoshop最近几年没有质的变化。• 演示软件
除了Photoshop以外，设计师最好能够基本掌握PowerPoint（Windows系统下）或者Keynote（Mac系统下），因为做设计提案、述职报告和晋级评审时，离不开一份漂亮的展示演讲稿。• 其他
其他工具，如动效软件（Adobe After Effect、Adobe Flash）、3D软件（Maya、3d max和犀牛等）、纯矢量工具（Adobe Illustrator和Sketch等）、视频编辑软件（Adobe Premiere等）等都可以了解一下。1.4.3 拥有良好的学习心态• 谦虚求教，举一反三
水满则溢，月满则亏。不仅仅是做设计，做很多事情都需要谦虚的态度。刚入门的时候，没有可以骄傲的资本，更应该保持自信、谦虚的心态，不要急着树立自己的设计风格，多听取别人的意见，多练习、多反思。
遇到一些好的设计稿，除了临摹练习之外，多思考一下原作者的创作思路，如果自己遇到同样的设计课题，会如何去思考，如何超越原作。• 积极交流，热心分享
UI设计师不能故步自封，要多将做出的作品发到一些专业的UI论坛，例如“UI中国”和“站酷”，也可以发到一些UI交流群，让更多的设计师前辈看到，无论是表扬还是批评的声音，都认真地参考和反思，很多时候可以帮助设计师发现自己未曾注意到的问题，从而获得成长。
多参加一些UI设计类的比赛，除了可以锻炼自己的视觉表达能力，还可以看到别的设计师是如何对一个命题课题做设计方案的。多对比，也是帮助自己成长的一种方式。如果获奖了，能够进一步扩大自己的影响力。参加设计类比赛是督促自己成长的很好的渠道。
学习任何一门知识，都是需要顿悟的，在学习的过程中，经常会有豁然开朗的感觉。这个时候可以记录一下自己的成长经验，分享给更多的设计新人，一方面可以增加自己的影响力，另一方面，教学相长，也可以让自己更好地理解和巩固学到的知识。• 自我总结，超越自己
设计师需要不断地超越自己。因此，对于作品的回顾尤为重要，反思作品中没有考虑周全的地方，可以反馈到正在设计的作品中。倘若无法发现问题，可能是你已经登峰造极，更可能是你没有好好学习。
UI设计的入门并不难，需要掌握的工具也不多，但UI并不是一门简单的学问，易学难精。2 设计入门
无论哪种类型的设计工作，配色、构图、字体和排版等设计要素都是核心内容。不同行业的设计师随着阅历和经验的增长，对这几个词汇的理解也会越来越深入，最后会感知到这些要素其实具有相同的本质，即审美。本章将重点讲解UI设计师可以从哪些方面去感知美和提升审美能力。2.1 审美2.1.1 审美观的概念及其重要性
审美观就是对美的鉴赏能力，是个看似简单实则抽象的概念。初级设计师的首要任务就是树立正确的审美观，提高自己的审美能力，这是因为审美能力的高低决定了设计师上升空间的大小。
审美能力在所有的设计能力中都是举足轻重的，但恰恰审美能力是无法通过培训机构或者某本书习得的。审美能力的养成是一个长期的过程，通过量变到质变的积累，还是有章可循的。
很多教初级技法类的Photoshop教程，设计稿都做得奇丑无比。尽管技法培养和审美能力的培养是两回事，但在学习技法的过程中，审美观如果被熏陶坏了，将导致设计稿缺乏视觉吸引力，从而无法做出优秀的设计。2.1.2 艺术与设计的区别
审美观是客观事物在人的心中引起的愉悦感受，是主观的，每个人的审美观也是有区别的。设计师应该求同存异，从虚无缥缈的主观感受中找到引起愉悦感受的共鸣点。艺术与设计的区别在于，艺术不要求取悦大众，它给大众带来的情绪可以是愉悦的、悲伤的、愤怒的，甚至消极颓废的，但设计服务于商业，其目的是在视觉上取悦大众、吸引大众。因此，设计师的审美观必须建立在大众审美观能接受的基础之上。
在成为大师之前，设计师不要轻易尝试标新立异。风格趋势是经过长期的市场检验形成的，在风格趋势内进行设计，是一种负责任的做法，能够表现出设计师不拿产品冒险的专业态度。当然，趋势不是自然形成的，所有的趋势都是由先驱引领形成的，在成为大师之后，你可以尝试超越目前大众的审美，去创造一些新的设计风格。2.1.3 如何培养自己的审美观
量变到质变。审美观的养成需要长期接触优秀设计作品、积累设计方法。入门设计师可以关注Behance、Dribbble和Zcool这些网站上最热门的设计作品帖，时间长了，慢慢就会形成良好的审美观。
实践是检验真理的唯一标准。形成了良好的审美观，也不意味着能设计出美观的作品，优秀的设计作品不是在观察的过程中形成的，而是在经过大量作品练习的基础之上形成的。入门设计师可以通过临摹、分析、默写、再创作、改进来学习一个优秀的设计作品，并完成对该作品的记忆和反思。
坚持才能进步。审美趋势随风而动，审美观的培养没有尽头，例如在iOS7之前，各大UI设计师注重的更多是质感，而2014年之后，则开始更讲究色彩搭配和平面构成了。设计风格的不停演变时刻提醒着设计师应不断观察和积累。2.2 配色2.2.1 色彩的基础知识
丰富多样的颜色是由3个基本要素构成的，分别是色相、明度和饱和度。图2-1所示即为一张带有色相、明度和饱和度信息的图片。图2-1 带有色相、明度、饱和度的海边小木屋• 色相（Hue）
色相是色彩最大的特征，也是区分色彩的主要依据。色相即每种颜色的相貌、名称，比如说色彩中的“赤橙黄绿青蓝紫”，指的就是色相。每种颜色都是光的一种物理现象。光有波粒二象性，不同波长的光产生了不同的色相。• 明度（Bright）
明度是指色彩的明暗和深浅程度，它取决于反射光的强弱。对于一些黑白的画面，例如老旧的黑白电视，电视画面上反应的就是图像的明度变化。在设计过程中，如果明度对比度弱，就会显得比较柔和或者比较模糊；如果明度对比强，就会很犀利或者过于刺激。图2-2所示是一张只包含明度信息的图片。图2-2 只包含明度信息的海边小木屋• 饱和度（Saturation）
饱和度也被称为纯度、彩度、浓度或艳度，是指色彩的纯净程度。通俗地说，颜色越亮眼，则饱和度越高；反之，则饱和度越低。严格地说，颜色中含有互补色的成分越多，则颜色的饱和度越低。例如在红色中掺入绿色，则随着绿色成分的增多，颜色将变为黑灰色，当二者比例达到1:1时，红色的饱和度也就降到了最低。当然，计算机中的颜色与色料混合的颜色是有所区别的，这也是为什么Photoshop中会设置RGB和CMYK的色彩模式。• Photoshop与色彩三要素
结合Photoshop的拾色器，我们来看一下色彩的三个基本要素。
如图2-3所示，在Photoshop拾色器中，首先保证右侧单选框选中的是H（Hue）这一项，那么中间条形的彩色色带就是色相。旁边会有个小滑轨，鼠标拖动这个小滑轨，可以改变选色的色相范围。左侧正方形的选色区域，会根据色相的大基调变化，如图2-4所示。对于这个正方形选色区来说，从上到下，明度会降低，从左到右，饱和度会升高。图2-3 Photoshop拾色器图2-4 Photoshop拾色器与颜色三要素2.2.2 色域与屏幕选择• 色域
色域也是入门设计师比较模糊的一个概念。
颜色是人类认知自然界的一个很重要的信息，人肉眼可识别的颜色有一千万种以上，颜色是人类对光线的一种解读和反馈。从这个角度来看，光可以分为可见光（红橙黄绿青蓝紫等）和不可见光（红外线、紫外线等），但是每个人对于光或者颜色的认知是主观的，如果想要大家客观分析颜色，就需要制定标准。国际上，将人类的眼睛能够看到的色彩范围定义为 CIE1931 色域标准，如图 2-5 所示。图2-5 CIE1931色域标准与常见色域
在图2-5中，由光谱围成的马蹄形区域就是人类可见光区域。不同线框代表不同类型的色域所能呈现的颜色种类。例如，黑色虚线框的sRGB就是我们在做设计稿时常用的色域。色域的含义是一个技术系统能够产生的颜色总和，而这个颜色总和在人类可见光范围内。
设计时常用的色域是sRGB，这里重点讲解这个色域。sRGB（standard Red Green Blue）是由Microsoft影像巨擘共同开发的一种彩色语言协议，是Microsoft联合HP、三菱、爱普生等厂商联合开发的sRGB通用色彩标准。受Microsoft强大用户群体影响力的威慑，让显示器、打印机和扫描仪等各种计算机外部设备与应用软件对于色彩有共通的语言。目前，数码图像采集和输出设备厂商都已经全线支持sRGB标准。sRGB标准的普及对数码用户，以及色彩相关行业用户有着“统一语言”的作用。
当色彩作为起决定作用的关键信息的重要组成部分时，其影响力的确不可忽视。例如，当投放一个来自计算机的服装样品图像时，就需要有真实、准确的色彩再现，而不能有偏差。sRGB模式消除了不同显示系统在色彩还原上的固有差异。由于显示器硬件的不同，自然会导致每个设备间的色彩显示存在差异，这样一来，图像经过不同的显示设备传输后，就不能够正确地再现原有的色彩。而有了sRGB技术，就可以保证，用户无论在哪种显示设备上观看图像，都可以得到统一的色彩。
对于手机屏幕来说，目前大部分的手机都是支持sRGB色域颜色显示的，这也是为了保证不同的屏幕下对颜色的解析基本一致。但是随着技术的发展和手机行业的竞争，人们开始对屏幕色彩提出更高的要求。例如苹果、三星还有华为等企业，都在旗舰级机型上使用了超出sRGB色域的屏幕。这样做的好处是能够让颜色更丰富，在图片本身支持的情况下可以让画面看起来更艳丽。不过目前计算机显示器支持全sRGB的还不是太多，因此为了保证兼容性，通常选择牺牲色彩的鲜艳程度。目前设计师的大部分设计稿在设计过程中选择sRGB模式就可以了。
色域在做设计稿的时候，是会经常遇到的，只是大家可能默认都忽略掉了。新建文档的时候，如图2-6所示，在“高级＞颜色配置文件”下拉框中，有一个选择色域配置的选项。在建立RGB颜色模式的文档时，默认会选择RGB：sRGB色域，做UI设计使用默认色彩模式就可以了。图2-6 Photoshop新建文档中色域配置• 屏幕选择
对于设计师来说，显示器的选择是一个很重要的课题，太差的显示器会让你在调整颜色的时候痛不欲生。在计算机屏幕上做好的设计稿一旦放到手机上查看，可能会与计算机显示器中的色彩产生巨大差别，即使是在不同的计算机显示器之间观看，也有可能使整体效果看起来一塌糊涂。对于视觉设计师来说，选择一个好的显示器是很有必要的。在设计领域比较知名的专业屏幕生产商是艺卓（Eizo Corporation），但是价格也比较吓人。当普通的27寸显示器卖到一千多人民币的时候，艺卓的售价大概在万元以上，土豪请随意，非土豪的大家可以买一些更亲民的大品牌，例如Dell、三星、苹果等。挑选的时候主要关注的参数是分辨率和色域，尽量买能够支持100%sRGB色域的显示器。另外，不要购买为影音效果特别加强过的显示器，这容易让画面过于艳丽，而效果图放在别人的普通显示器或者手机上时，视觉效果就会差很多，这会导致我们需要反复调整设计稿，大大增加工作量。2.2.3 常用颜色模式
RGB和CMYK都是颜色模型，设计师最常打交道的应该就是这两种颜色模型了。在UI设计中常用的模式也是这两种，因此下面就简单介绍一下这两者的基本显色原理。• RGB
RGB是电子屏幕显示的颜色模型，指的是R（Red）、G（Green）和B（Blue）这3种颜色混合在一起组成的色彩系统。RGB的成像原理是加法混合，为什么称之为加法混合呢？可以仔细观察你的计算机屏幕（非Retina屏幕），靠近看，可以看到一个个小晶格，而这些小晶格如果再放大看的话，就会变成图2-7所示的样子。图2-7 显示器成像
每一个小晶格是由3个发光单元组成的，而这3个发光单元都是纯色的但是相互独立，分别是红色（R）、绿色（G）和蓝色（B）。在形成屏幕上的一个像素点时，计算机会通过调整3个发光单元的发光亮度来形成一个像素点的颜色，而这个像素点的颜色、色相是它们混合形成的，亮度是3个发光单元亮度的叠加，因此RGB色彩模型也被称为加法混合模型。• CMYK
CMYK颜色模型，常用于印刷行业，例如做一些易拉宝或者彩色书籍印刷等。CMY是3种印刷油墨名称的首字母，这3种颜色分别是，青色Cyan、品红色Magenta和黄色Yellow。K是源自一种只使用黑墨的印刷版KEY PLATE。在该模式中，我们可以简单地理解为K代表的是黑色。与RGB相反，CMYK是减法混合。当它们的色彩相互叠加的时候，色彩相混，亮度降低。这是因为印刷成像是通过4种不同颜色的油墨依次叠加产生的，每次喷墨都会吸收更多的光线，让纸张的反光更弱，因此，颜色混合得越多，色彩的明度越低。
结合2.2.2节的配图2-5，可以看到sRGB色域与CMYK色域并不是重合的，sRGB相对覆盖面积大一点但并不能覆盖CMYK的所有颜色。这就导致两者在进行模式转换时，会有很多颜色发生严重的色偏，多数情况下颜色会变灰、变暗。为了避免色偏的问题，在做印刷类设计稿时，需要提前把颜色模式调整到CMYK模式，如图2-8所示。图2-8 CMYK颜色模式2.2.4 颜色与情感
每个国家甚至是每个民族，随着历史的发展，不同的颜色在文化中，慢慢被赋予了不同的含义。图2-9所示为常见的色彩与情感对应一览表。颜色自有的感情基调，可以很好地帮助我们定位设计稿，如图2-10所示。图2-9 颜色与情感（图片来源：CDC）图2-10 品牌与颜色（图片来源：GraphicHug）
如图2-11和图2-12所示，同一个行业的品牌颜色通常会比较一致。例如运动品牌在橙色和黄色里边出现的频度比较高，是因为橙色在大多数国家代表活力、运动、朝气等，与品牌调性更符合；金融行业的品牌在蓝色和绿色中出现得比较多，因为冷色调相对暖色调会更容易唤起人们的冷静和理智。图2-11 运动品牌颜色分布（图片来源：GraphicHug）图2-12 金融品牌颜色分布（图片来源：GraphicHug）
对颜色的感知是一个潜移默化的过程，既属于审美培养的一部分，又属于文化传统学习的一部分。多看多练，你会慢慢对这些色彩的情感定位产生明确的认知。新手在对颜色的情感把握不好时，可以通过分析竞品，与竞品色调保持一致，选择适合产品的色彩基调。提示关于颜色与情感需要注意的是，不同的国家之间，由于发展历史或信仰宗教不同，对同一种颜色的认知很有可能存在很大差别甚至完全相反。因此，如果做国外市场设计的话，需要多了解当地的文化，才能做出受当地人欢迎的设计。
试读结束[说明：试读内容隐藏了图片]