第1章
UI设计基础
随着移动互联网时代的到来,传统视觉传达艺术逐渐被新的媒体艺术所取代。20 世
纪末,人们主要通过纸质媒体获取信息和资讯;21 世纪,人们越来越多地通过互联网与世
界接轨,利用互联网生活、学习、交友;而在近些年,人们更多地依赖智能手机上网进行工
作和娱乐。新技术改变了人们的生活方式。

UI 设计(用户界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。
UI 设计分为实体UI 和虚拟UI,互联网常用的UI 设计是虚拟UI 。
优秀的UI 设计不仅让软件变得有个性、有品位,还能让软件的操作变得舒适、简单、
自由,充分体现软件的定位和特点。

1.初识UI 
设计
1 

1.1 
什么是UI 
设计
1.
UI 的概念最初来源于美国硅谷,它的英文名字是userinterface,翻译成中文为“用户
界面”。用户界面设计和平面设计、包装设计有所不同。平面设计的作品有可能是一张图
或一张海报,但是UI 设计的作品不是一个界面,它是由若干个界面组成的。总的来说, 
用户界面设计对应的工作主要是视觉设计、交互设计以及用户体验三大部分。如果把UI 
比喻成一个人的形象,那视觉设计就是这个人的衣服、皮肤,交互设计就是这个人的身材
和骨架,用户体验就是这个人的脾气性格, 1.

如图1.1所示。


图1.1 各平台UI 设计展示

1.

2
UI 设计基础案例教程

1.2 
UI 
设计常用名词
1.
UI 设计分工精细,在进入UI 行业前,必须对UI 行业的专用名词及缩写进行了解。
UI 设计中常用的名词和缩写定义如下。
(1)UI:userinterface(用户界面)。UI 是指对软件的人机交互、操作逻辑、界面美
观的整体设计。

(2)GUI:graphicaluserinterface(图形用户界面)。GUI 在20 世纪80 年代由苹果
公司首先引入PC 领域,图形界面的特点是人们不需要记忆和键入烦琐的命令,只须使用
鼠标即可直接操纵界面。

(3)HUI:handuserinterface(手持设备用户界面)。HUI 包括智能手机、平板电脑、
掌上游戏机等。
(4)WUI:Webuserinterface(网页用户界面)。WUI 包括各种网站的界面还有操
作系统的界面等。
(5)IA:informationarchitecture(信息架构)。IA 研究信息的表达和传递。信息架
构是设计信息的组织结构,一般是产品经理的工作。
(6)UX:userexperience(用户体验)。UX 是指用户使用产品、系统或服务过程中的
主观感受,就是“这个东西好不好用,用起来方不方便”。
(7)IXD:interactiondesign(人机交互设计)。IXD 定义人造物的行为方式(人工制
品在特定场景下的反应方式)以及相关的界面。
(8)UCD:usercentereddesign(以用户为中心的设计)。UCD 在设计过程中以用户
体验为设计决策的中心,强调用户优先的设计模式。
(9)VD:visualdesign(视觉设计)。VD 界面视觉设计简单地说就是设计得美观

与否。

(10)CD:contentdesign(文案设计)。CD 是指编辑、撰写界面里的文字。

(11)PM:productmanager(产品经理)。PM 是每个产品的牵头人,负责决策产品

方向、架构和需求。

1.3 
UI 
设计的分类
1.
根据市场的主流需求,按用户和界面来分UI 设计可分为四种,分别是PC 端UI 设
计、移动端UI 设计、游戏UI 设计以及其他UI 设计。

(1)PC 端UI 设计。PC 端UI 设计也是UI 设计最早产生的地方。它包含计算机系
统UI 设计、Web设计和各种软件的UI 设计。因为计算机显示屏一般为19~24 英寸,这
个区域是很大的,所以首页要多放一些内容,尽量减少层级。由于在PC 上大部分操作是
用鼠标进行的,精度比较高,所以设计元素的尺寸可以小一点。最后整体风格是要图文信
息展示清晰明了,有利于用户的体验, 1.

如图1.2所示。

(2)移动端UI 设计。随着移动端设备在互联网中的地位日益重要,移动端的UI 设
计运用得越来越广泛。首当其冲的就是智能手机,智能手机系统必须需要一套UI 设计。
iOS 和安卓两大主流系统都有自己独特的UI 设计。其次是各类的App,并且各种平板设

第1章UI 设计基础


3 

图1.1.2 PC 端UI 设计展示
备也需要UI 设计,还有车载计算机、扫码,等等。这类产品的设计特点是由于屏幕区域
有限和一般用手指操作,因此层级较多,界面简洁,元素清晰,如图1.1.3和图1.1.4所示。
图1.3 移动端UI 设计展示(1)

1.
(3)游戏UI 设计。游戏UI 设计和其他UI 设计的表现手法不同,需要单独介绍。
先来介绍几张游戏UI 的效果图,它们的视觉冲击力很强,见图1.5和图1.6。从技术
1.1.
方面来说一般的UI 设计元素大部分是矢量图,而游戏UI 的设计元素大部分是用手绘完
成的,所以更加细腻。而且游戏界面又包含网页游戏界面、客户端界面等,形式多变。在
游戏UI 设计中,界面、图标、人物服饰的设计会随着游戏情节的变化而变化,所以把它单独
分一类
(4
。
)其他UI 设计。这里主要介绍一些比较冷门的或者是未来发展趋势所产生需要
进行UI 设计的产品,如卡拉OK 点歌机、医疗用具的界面设计、远程会议监控、可穿戴设
备UI 设计以及未来趋势的智能家居、虚拟现实,等等。这类产品需要体现科技感和信息


UI 设计基础案例教程

4 

图1.1.4 移动端UI 设计展示(2) 
图1.5 游戏UI 设计展示(1)

1.
图1.6 游戏UI 设计展示(

1.2) 
的直观性,如图1.7和图1.8所示。

1.1.
可见,UI 设计在我们日常生活中无处不在,并且和未来发展趋势紧密联系,就业前景

第1章UI 设计基础


5 

图1.1.7 其他UI 设计展示(1) 
图1.8 其他UI 设计展示(

1.2) 

也十分看好。接下来,就让我们开启UI 设计学习的大门,一步一步学习UI 设计吧。

1.初识设计行业
2 

1.1 
UI 
行业现状
2.
UI 设计是随着互联网特别是移动互联网的迅速发展而发展起来的。UI 设计作为新

事物,并没有被大众所熟知,以前国内各大招聘网站较少有招聘UI 设计师的信息,而更

多的是美工相关的工作。业界普遍认为UI 设计就是对页面进行美化的美工工作,设计

师能使用图像处理软件Photoshop就能胜任工作。然而最近几年,随着IT 开发成本的降

低,个人创业及中小型IT 企业在国内遍地开花,导致对UI 设计人才的需求井喷。此外, 

国内众多IT 企业如百度、腾讯、网易等,都成立了UI 设计部门。高级UI 专业人才需求

稀缺,人才资源争夺很激烈。

UI 设计作为设计行业的新兴领域,涉及面比较广,如游戏设计、环艺设计、平面设计、
广告设计等,集艺术学、心理学、美术学、逻辑学等学科知识于一体,需要设计师具备全面、
综合的技能。与此相应的是,资薪也很可观。

通过以“UI 设计师”为招聘筛选条件对百度招聘、智联招聘、猎聘网、中华英才网、若


6
UI 设计基础案例教程

邻社交招聘等网络招聘平台的数据收集,数据统计区间为一个月(2019 年10 月25 日至
11 月25 日), 以上网络招聘平台对UI 设计师的人才需求量约为8.8万人。其中,北京
25731 人、上海14738 人、广东17188 人(其中广州7597 人、深圳8660 人)、江苏5420 人、
浙江5168 人。根据以上数据分析,UI 设计师人才需求主要出现在国内一线城市或大中
城市。

以北京为基准,目前国内设计师月收入1万元以上的占总人数的34% 。随着国内信
息化进程的加快,二线、三线城市对UI 设计师的需求也迅猛提升,加入UI 设计行业的从
业人员人数还在持续攀升。影响UI 设计行业资薪水平的主要因素是工作岗位、从业年
限、公司规模等因素,如图1.1所示。

2.
图1.1 UI 设计工资所占比例

2.
UI 设计行业中的主要工作岗位包括设计管理、视觉设计、交互设计、用户研究、产品
设计等。按等级可以分为设计总监、首席设计、设计师、见习设计等。不同等级的设计师
需要掌握的技能和薪酬,如图1.2所示。

2.
图1.2 不同等级的设计师

2.
1.2 
未来UI 
设计的发展趋势
2.
未来随着生活质量水平的稳步提升,手机和计算机更大面积的普及,对UI 方面的需


7
第1章UI 设计基础

求更是必不可少。
未来UI 设计的应用领域主要体现在全息投影交互技术、图像加强技术、远程控制、
3D 打印机、运动感应技术、无人驾驶汽车、多功能眼镜技术、智能手表等领域。3D 全息投

影如图1.3所示,3D 打印技术如图1.4所示,无人驾驶汽车技术如图1.5所示。

2.2.2.
图1.33D 全息投影

2.
图1.43D 打印技术

2.
图1.5 无人驾驶汽车技术

2.

8
UI 设计基础案例教程

1.3 
UI 
设计师的发展方向
2.
1. 
运营类UI 
运营类UI 设计师首先需要具备的能力包括创意、策划、手绘、文案、英文、提案表述。
目前用户使用的软件基本固定,社交方面主要用微信、QQ,地图方面主要用高德,购物方
面主要用淘宝、京东,等等。由此可见,运营类的广告就要崭露头脚了,比如京东各个节日
的广告就可以证明这个现象,如图1.6所示。

2.
图1.6 京东广告

2.
UI 设计师还要具备能够进行个性化UI 设计的能力。市场上手机应用琳琅满目,各
个厂商、各种针对节日的设计推广层出不穷,这必然需要大量的运营类型UI 设计师一展
拳脚。除去规范的限制、需求的限制,平面设计能力、手绘造型能力以及创意表达能力的
重要性不言而喻(见图1.7), 这需要UI 设计师长期的积累。

2.
图1.7 手绘风格的设计推广

2.
2. 
产品类UI 
产品类UI 设计师需要具备的能力包括懂产品、懂用户体验、能分析数据、能实现产
品原型图。

从小型创业公司的模式不难看出来,大批老板懂资本市场,懂团队建设,有一定资源; 


9
第1章UI 设计基础

或者一个传统企业,有已经成熟的项目,那么他们需要一个核心的设计人员,能够单独建
立团队、单独完成产品初期的项目,能做产品宣传的PPT,做一个高保真原型放在手机
里,这样争取投资就会方便。

放眼全球,来自谷歌的设计师得出一个惊人的结论:在美国硅谷,单纯的UI 设计师
几乎已经不存在了。如果一个UI 视觉设计师不懂产品,不懂交互设计,不懂用户体验设
计,基本上就没有出路了。因此,UE(用户体验)+UI 可能才是UI 的真正发展方向和最
终形态。不可否认,职位的细分是一个方向,但是目前从中国一批互联网公司的设计师的
反馈来说,都在明确地走交互的路线,读各种交互的书籍强化自己、试用各种App 来增加
自己App 的阅读量。某UE 设计稿如图1.8所示。

2.
图1.8 UE 设计稿

2.
3. 
实现类UI 
实现类UI 设计师需要具备的能力包括懂动效、懂代码、能建站、能独立完成H5 类推
广页面,如果能懂一点后台开发就更好了。

从稳定的公司规模来看,一般小型公司会有1~2个设计师和6~10 个开发人员,说
明开发者的比例还是很大的。但是开发领域也在被细分,所以全能型设计师无论什么时
候,都很受中小型创业公司欢迎。如果UI 设计师懂一点代码( 2.那么就业机会

见图1.9), 
和待遇就会大大增加。既能设计效果图,还能亲手实现效果图,这样的UI 设计师,相信
每家中小型公司都求贤若渴。

4. 
新技术类UI 
新技术类UI 设计师需要具备的能力包括3D 技术等。

VR(虚拟现实) 以后VR 的界面设计( 2.会由谁来做呢?

这几年快速兴起, 见图1.10) 
肯定还是UI 设计师。

UI 设计师必须努力增加自己的专业知识,才能保证在下一个浪潮来临的时候还具备
竞争力。这是一个好的时代,因为互联网,人人都有机会从一个点出发并深扎进去,开花
结果;这也是一个坏的时代,技术、软件更新速度飞快,如果UI 设计师不了解新的技术、
不能掌握更高效的方法,那么下一个浪潮来临的时候必定会被淘汰。因为,淘汰人的永远
不是年龄而是思维与工具。


10 
UI 设计基础案例教程

图1.2.9 全能的设计师
图1.10 VR 的界面设计

2.
3 
UI 
设计工作流程

1.
UI 设计越来越与人们的生活紧密相关,精致而美观的界面总是能吸引用户的眼球, 
那么,一个软件产品的UI 设计经历了哪些阶段?UI 设计师在这个过程中的思考方式是
怎样的? 下面来看看UI 设计师的工作流程。

1.1 
自主研发产品的开发流程
3.
自主研发产品的开发流程包括产品需求分析、功能定义、交互原型、程序技术预研、效
果图绘制、开发、测试、发布上线、运营、迭代开发,如图1.1所示。其中,产品需求分析、

3.
功能定义、交互原型一般由产品经理完成,UI 设计师只负责做好产品的效果图即可。随
后,项目负责人、产品经理、UI 设计师、主要程序员会聚在一起开会,通过前期技术方面的
评估,即可以进行开发。UI 设计师负责根据交互原型设计好每一张界面的效果图,并且
进行标注和切图,这样就可以和开发的同事对接上。
这类性质的项目主要以用户为中心,主要用来研发自己的产品,并且该产品是直接面