带你了解近几年最火的设计职业UI设计（为什么会前景好，高收入）

第1章基础知识

学习一项技能，尤其是已经有一定沉淀并在行业有广泛应用的技能，就一定要对它先有充分的认知。在深入学习APP设计前，我们需要了解一下UIZH行业的基础知识。

1.1什么是UI设计

【UI的相关概念】

UI和GUI

用户界面（User interface） ，用户界面是一个比较广泛的概念，指人和机器互动过程中的界面，以手机为例，手机上的界面都属于用户界面。我们通过这个界面向手机发出指令，手机根据指令产生相应的反馈。设计这套界面视觉的人称呼为UI设计师。在设计师领域，（如图1-1所示）在PC端从事 页设计，我们称呼WUI（Web User Interface）设计师或者 页设计师。在移动端，从事移动设计的称呼为GUI（Graphics User Interface）设计师，因为移动端会有大量图形用户界面设计。在公司中，人们并不会很清楚的区分这两种职能，都统称为UI设计师。因为他们产出的都是界面，都需要对产品的界面视觉负责。

图1-1 UI、WUI、GUI关系图

UE与UED

用户体验（User Experience ），用户体验指用户在使用产品过程中的个人主观感受。关注用户使用前、使用过程中、使用后的整体感受，包括行为、情感、成就等各个方面。具体到产品层面上，用户体验包含以下几点：

性能：产品运行是否够快、是否稳定、是否占很多的系统资源等；

内容：产品的内容是否为用户解决一定的问题，内容是否满足用户的需要；

交互：产品交互是否顺畅，用户是否可以无障碍的使用界面；

界面：产品的logo、主题、颜色、布局等是否能给用户有统一整齐高质量的设计感。

用户体验是用户面对产品产生的整体使用感受，包括受品牌影响，用户个人使用经验的影响。所以不要狭隘的理解只与用户界面相关，那只是其中的一部分。

用户体验设计（User Experience Design），用户体验虽然个人主观感受，但是共性的体验是可以经由良好的设计提升的。所以国内大型互联 公司纷纷把体验设计提升到一个高度，组建用户体验设计团队，旨在提升用户使用产品的体验。自从2006年淘宝把设计部门称呼为UED后，国内很多企业也跟风组建自己的设计部门称呼为UED，UED逐渐成为互联 公司的设计部门代名词。但很多UED团队名不符实，团队中甚至没有独立设置用户体验研究的职位。这个职位的职能可能由产品人员或者交互设计师承担了。所以可能你所称呼的UE设计师，也许是一名交互设计师。

UCD

以用户为中心的设计（User Centered Design），UCD是一种设计思维模式。强调在产品设计过程中，从用户角度出发来进行设计，用户优先。产品设计有个BTU三圈图（Business, Technique, User），（如图1-2所示），即一个好的产品，应该同时兼顾商业盈利，技术实现和用户需求。在不同阶段需要考虑不同需求的优先级。所以UCD只是强调用户优先，并不代表在所有时候都是合适的。举例：有一个产品急需推出上线，但有部分功能缺失，因为技术难以短时间内实现。这个时候从UCD的角度来说是不合适推出的，因为功能缺失产品体验并不完整。但是从商业角度来看早一步推出就早一步抢占市场。这个时候就需要平衡。是否需要牺牲一部分体验，去抢占市场，照顾商业利益。

图1-2 BTU三圈图

目前国内互联 公司，设计师深感用户体验可能作为一种口 流于形式，对于日常工作并没有什么改变。从一个视觉设计师角度来说，我认为视觉设计师在工作中，不应把自己定位于一个描点画线上色的角色，应该在设计过程中始终更多的关注自己的上下游。交互上关注界面的流程，上下逻辑，思考产出的界面是否好用。开发上交流界面的实现，是否影响性能。产品上关注为什么要这样设计功能。把用户体验设计的态度贯穿于整个产品设计流程。一名优秀的用户体验设计师，需要对界面、交互和实现技术都有深入的理解。所以不要让用户体验成为一个口 ，而是作为一种思维方式，融入在日常工作中。

【UI的学习方法】

了解完基础的概念后，我们如何开始学习UI设计呢？下面介绍一些UI设计师学习的基础方法。

图形基础

UI设计确实需要很好的图形基础，目前国内知名的UI设计师，接触UI大多从学习画图标开始。这样充分的锻炼了设计师绘制图形的基础。手机界面就是设计师的画板，各种漂亮的界面图标就是设计师的绘画的成果。

在过去一段时间内，扁平化风格比较流行。图标设计主要以线性和色块为主。很多人质疑还有没有必要去练习写实图标，我的意见是需要的。国内的设计专业都有基础课：素描、速写、色彩。这是绘画入门的三大基础课题，（如图1-3所示）我们学习的图形设计过程也是以这个顺序逐步递进的。

图1-3绘画入门的三大基础课

可以理解学习写实图标就是练习素描基本功。我们在电脑上对现实世界的物体进行细致准确的描绘，就需要我们更仔细的观察事物。这个物体的透视是如何的，光照射的角度是如何的，在对应的形状中表现出什么明暗分布，随着写实功力的递增，你就会逐渐培养一双洞察细节的眼睛。在设计过程中可以考虑提炼图形，对原有的写实细节进行取舍，只保留核心的抽象图形，我们可以理解这个过程就是速写。最后通过学习一些软件技法对图形进行样式的渲染，这是最终的色彩课。所以我认为学习绘制写实图标是一项综合性的设计基础课。这个过程会锻炼你对所有设计和形体做出本能的反应，分析它们的美丑，找出核心所在。

设计软件

软件的掌握是一种硬技能，不管我们有多好的想法，都需要好的软件掌握来实现。我们需要掌握软件的基础操作，例如Photoshop中的形状工具、钢笔工具、文字工具、图层样式 。也需要了解曲线、色阶这部分图像调整功能。这些基础操作不在本书的讨论范围内。读者可以阅读学习相关软件基础教程书籍。下面介绍一些在UI设计中常见的软件（如图1-4所示）：

图1-4常用设计软件

Photoshop：是一款老牌像素处理软件。各种设计行业图形处理都会用到Photoshop，可以满足UI界面设计的日常需要。本书默认所有的设计演示通过Photoshop完成。

Illustrator ：是矢量软件，在处理一些及其复杂的图形路径时候，可以考虑使用Illustrator

也有设计师所有的图标在Illustrator 中完成，然后连接嵌入到Photoshop。

PS Play：腾讯开发的一款软件，通过WiFi 络连接手机和电脑，实时在终端设备上实时预览电脑上Photoshop的设计稿，可同步调试及截图保存到移动终端。

After Effects：现在扁平化设计成为主流，所以动效设计成为不可或缺的一部分。可通过这个软件设计动效平滑切换界面。

Mark Man：一款标注软件，在移动设计中并没有前端的角色，需要设计师自己对设计图进行标注切图。

设计规范

我们设计的应用是基于iOS、Android系统运行。这两个系统都有其官方设计规范，这些规范详细了罗列了一些通用性设计框架。比如iOS系统下的设计图需要建多大的尺寸。 Android是多大的尺寸。各自的系统状态栏、导航栏、标签栏高度是多少 。手机屏上最适字 是多大 能看清的最小字 是多少。iOS用什么字体 Android用什么字体。这些会在本书中后面章节有详细的介绍归纳。

当然官方设计规范可以理解一份通用的指南，如果想做出自己的特色，必须遵守而又不拘泥于规范。根据产品特性，制定出自己的一套设计规范。本书也介绍了相应的制定设计规范的方法。

临摹学习

理论与实践并行，我们熟悉相应的理论知识后，还需要做大量的设计练习。把设计知识融于实际的工作中，这个过程中手要勤，眼要宽。

手勤就是多练，业余时间去临摹成熟图标界面设计作品，再在合适的时机借鉴进实际的工作中。智慧源于心胸，心胸源于眼界，眼宽就是多去看设计 站开拓自己的眼界。如站酷（Zcool）、UI中国、追波（Dribbble）（如图1-5所示）等。多年以来我形成一个习惯就是每天花一个小时浏览下这些设计 站，看看最新的设计师作品。

图1-5知名设计 站

参与项目

经历一整套完整的设计流程，是最好的学习锻炼方式。从一开始讨论原型图到出效果图，再到切图以及标注给开发 。效果图要不断导出在手机上预览，核对电脑上的设计稿与和手机上预览的差距，你会不断在实践中提高。

当然有设计师会说，我目前正在学习状态，还没有参与到移动设计工作中，这也不是问题。 上有大量的现成设计案例，你可以按照你的想法二次重新设计，这种方法叫Redesign设计。通过假想的设计项目，思考整个项目的流程。精益求精的推翻和改变，不放过每个小图标等细节，同时能把自己设计思路完整展示说明出来。业界有这样的案例。某设计师不满Facebook的界面，按自己的想法独立重新设计了界面。并在设计 站上展示，由于二次设计效果出色，赢得了很多的 友的赞誉，也吸引Facebook的注意，最终收到了Facebook的Offer 。所以设计师们，赶紧动起手来吧。