《中公版·UI设计师养成记:UI设计之道》全书分10章,主要讲解网页的UI设计,内容涵盖了UI设计的发展、设计原则、视觉元素、方法论、色彩搭配、网站分类及其UI设计要点、用户体验和交互设计等内容,系统地讲解了网页UI设计知识。对移动平台的UI设计、提升UI设计水平的拓展性知识也有详细的阐述,有助于读者了解UI设计规范、掌握设计方法、建构设计观念。

1.1什么是UI设计
1.1.1UI设计的概念
UI(UserInterface)设计即用户界面设计,是对软件的人机交互、操作逻辑、界面美观进行的整体设计。UI设计旨在创建一个帮助人与电子设备进行交互的媒介。通过友好的界面设计,复杂的产品结构、功能能够以简洁直观的形式得到展现,为用户带来良好的使用体验。
1.1.2UI设计的发展
20世纪70年代,图形界面设计**出现在电子设备显示屏上,由此拉开了UI设计的序幕。此后的50年间,伴随着互联网及电子产品的迅猛发展,UI设计也一路高歌猛进,发展成现今的热门行业。经历了从PC端到移动端的革命性演变,UI设计始终站在界面设计的前沿。以下具体介绍UI设计的发展历程。
1.1.2.1PC端UI设计的发展
(1)Windows系统UI设计的发展
Windows系统是由微软公司开发的一款基于PC平台的操作系统,自1985年发展至今,Windows系统已成为全球应用*广的PC端操作系统。
●Windows1.0
Windows1.0系统于1985年正式发布,界面布局采用简单的几何图形和鲜艳的配色。这是微软公司**尝试在电脑上加入图形的界面设计元素,但这种大胆的尝试在当时并未获得用户的普遍认可。
●Windows2.0
Windows2.0系统发行于1987年,是基于MS-DOS的操作系统,外观看起来与当时的MacOS系统相似。Windows2.0系统对图形功能的支持增强,实现了叠加窗口、自定义屏幕布局等经典的Windows系统功能。微软公司紧接着又推出了Windows386和Windows286系统,为Windows3.0系统的成功提供了技术积累。
●Windows3.0
Windows3.0系统于1990年发布。微软公司大幅改进了这一系统的界面设计,并发布了多个语言版本,此举拓宽了市场,使Windows系统在很多非英语母语**获得了应用和好评。
●Windows95
微软公司于1995年发布了Windows95系统,它可同时支持16位和32位的Windows系统。Windows95系统实现了图形界面设计领域的一次飞跃,界面设计**人性化,初学者也能很快上手使用。Windows95系统确定了很多至今仍被视为标准的设计准则。
●Windows98
Windows98系统于1998年正式发布。以Windows95系统为基础,Windows98的UI设计更注重设计界面和窗口的简洁化,使用户更专注地投入到工作中。Windows98系统全面集成了Internet标准,提升了网络信息浏览的方便快捷程度。
●Windows2000
微软公司于2000年发布了Windows2000系统,UI界面设计的整体色调开始趋向蓝色。从这一版本开始,微软公司意识到Windows系统的多平台操作特点,因此更注重对系统操作通用性的设计。
●WindowsXP
WindowsXP系统于2001年发布,微软公司的UI设计风格渐趋稳定。WindowsXP系统的界面设计清新简洁,风格鲜明独特,明显区别于同期的其他操作系统。凭借强大便捷**的操作特点,WindowsXP系统逐渐发展成为全球范围内*受欢迎的电脑操作系统。直至2014年,这一经典���统才正式退役。
●WindowsVista
WindowsVista系统于2006年正式发售,它包含多种新功能,采用了全新的UI设计和Aero界面风格。Vista意为“远景”,其在界面设计中表现为窗口的空间感视觉效果,使界面具有极强的科技感。
●Windows7.0
Windows7.0系统于2009年发布,是我们比较熟悉的操作系统,如图1-1所示。系统提供入门版、家庭普通版、家庭**版、专业版、企业版、旗舰版等多个使用版本,用以满足用户的不同需求。
图1-1Windows7.0界面设计
●Windows8.1
Windows8.1系统于2013年正式发布,确立了Metro的界面设计风格,如图1-2所示。微软公司启用了特有的动态磁贴设计,“开始”屏幕独具特色,将信息功能分割成颜色和大小不同的版块,即动态磁贴,用户可与动态磁贴进行交互。
图1-2Windows8.1界面设计
●Windows10
Windows10系统于2015年正式发布,系统的UI设计更趋扁平化,动态磁贴统一使用相近的蓝色,如图1-3所示。重新启用了位于屏幕左侧的开始菜单模式,将动态磁贴集中显示于屏幕右侧。系统新增了Cortana搜索功能,Cortana是Windows10系统的私人智能助手,可提供整理、搜索文件等功能,为用户提供了**智能的功能服务。
图1-3Windows10界面设计
(2)MacOS系统UI设计的发展
MacOS系统是在苹果Macintosh系列电脑上运行的操作系统。该系统于2001年更名为MacOSX,X为罗马数字10,意为第10代,代表MacOS系统的新纪元。MacOS系统专为苹果Mac系列电脑设计,不能用于其他的电脑平台。
●MacOS8
苹果公司于1997年发布了MacOS8系统。苹果公司注重UI设计中的色彩设计,以平铺方式将MacOS的标志置于蓝色背景中,在当时产生了突破性的视觉冲击效果。
●MacOS9
苹果公司于1999年发布了MacOS9系统。在UI设计上,整体与MacOS8系统区别不大,桌面背景颜色相对较深。
●MacOSX10.0
MacOSX10.0系统于2001年3月发布,代号“Cheetah”(猎豹)。该系统的界面设计发生了巨大变化,基本奠定了苹果电脑设计风格的雏形,某些设计模式甚至沿用至今,如工具栏、菜单栏的位置等。MacOSX10.0系统有多个升级版本,前期以大型猫科动物作为系统的代号,从MacOSX10.9系统开始以美国的地理位置、景区名称作为代号。以下只介绍在UI设计方面具有标志性特点的系统版本。
●MacOSX10.5
MacOSX10.5系统于2006年发布,代号“Leopard”(美洲豹)。该系统主要对状态栏的界面进行了改变,苹果公司开始着眼于拟物化设计,由此掀起了全球范围的拟物化设计热潮。
●MacOSX10.7
MacOSX10.7系统于2010年发布,代号“Lion”(狮)。该系统是**可通过APPStore下载的Mac系统。界面设计采用平铺式布局,将应用程序的启动图标平铺排列于桌面上。
●MacOSX10.10
MacOSX10.10系统于2014年发布,代号“Yosemite”(约塞米蒂**公园),如图1-4所示。界面、应用和持续性是MacOSX10.10系统的**提升方向。该系统的界面设计风格与同期发布的iOS7系统相融合,摒弃了拟物化设计,采用了全新的扁平化设计风格,同时结合了半透明的视觉效果,使界面更具可视性。
图1-4MacOSX10.10界面设计
●MacOSMojave10.14
2018年9月,苹果公司发布了MacOSMojave10.14系统,代号为“Mojave”(美国沙漠),它是目前*新的Mac系统,如图1-5所示。该系统进一步优化了UI设计,增加了深色模式,细节设计更加完善。
图1-5MacOSMojave10.14界面设计
1.1.2.2智能手机的UI设计
经历了从手提电话、非智能手机到智能手机的升级迭代,手机已然成为人们的生活必需品。在这一过程中,真正意义上的手机UI设计出现在智能手机中。智能手机具有强大且独立的操作系统、可自行安装与系统匹配的应用程序、全触摸式大屏幕等性能特点。
现今,手机操作系统包括iOS(苹果手机系统)、Android(安卓手机系统)、WindowsPhone(微软手机系统),如图1-6所示。这些手机系统在系统逻辑、架构、界面设计上各有特色,因此基于不同手机系统的UI设计规范也各有侧重。本书第9章对相关内容有具体讲述。
图1-6iOS、Android、Windows手机系统的界面
1.1.3UI设计的分类
根据用户和界面的不同,UI设计可分为PC端、移动端、其他平台的UI设计。
(1)PC端UI设计
PC端UI设计是针对电脑操作界面进行的UI设计,包括电脑版的QQ、微信、Photoshop软件、网页及网页中按钮图标等的UI设计。图1-7为网站的UI设计效果图。
(2)移动端UI设计
移动端UI设计是针对手机、平板电脑等移动端设备进行的UI设计,主要包括安装在智能手机、平板电脑等移动终端上的应用软件。图1-8为手机端APP的UI设计效果图。
(3)其他平台的UI设计
其他平台的UI设计是指除了PC端和移动端以外其他平台的UI设计,主要包括VR界面、AR界面、ATM界面、智能电视、车载系统等其他智能设备的UI设计。
图1-7网站UI设计
图1-8手机APPUI设计
1.2UI设计的发展前景与就业空间
1.2.1UI设计的发展前景
就目前来看,互联网仍是未来相当长的一段时间内中国经济发展的增长点。借助互联网的东风,UI设计行业也将继续保持良好的发展态势,成为“互联网 ”经济发展进程中不可或缺的行业。实际上,UI设计的水平在某种程度上代表着互联网企业、网站、APP应用的门面和窗口,国内外各大互联网企业越来越注重UI设计,均设有专门的UI设计部门,并致力于不断提升UI设计水准。
良好的行业发展势头、不断扩大的市场体量,以及相对较低的入行门槛,为UI设计行业带了广阔的就业空间。现如今,UI设计师已跻身十大高薪行业之列,一线城市普通从业者的平均年薪保持在10万~15万,**从业者平均年薪可达到30万以上。
1.2.2UI设计师的就业空间
UI设计涉及的工作环节众多,包含的岗位种类多样。从工作内容上划分,可将UI设计分为用户研究、交互设计、视觉设计,每一类又可细分为具体的岗位小类,分别对应不同的职位素养和技能要求。具有1年~2年工作经验的UI设计师一般应掌握2个~4个职位的工作技能。
(1)用户研究
●用户研究工程师
在了解UI设计知识的基础上,用户研究工程师还应具备一定的心理学、人文社会科学知识。在设计前期,用户研究工程师运用心理学知识,通过竞品分析、数据整合等方式,确定产品的用户范围和功能范围等指标性内容。用户研究工程师是为产品指明方向的岗位。
●用户测试工程师
在整个UI设计流程结束后,用户测试工程师负责对UI设计的可用性进行测试。测试无需口令代码指示,通过焦点小组、问卷调研等方式,评估、衡量UI设计中交互方式、用户体验的合理性以及界面的美观程度等要素信息。用户测试工程师是为产品设计设计把关的岗位。
(2)交互设计
●交互设计师
交互设计(InteractionDesign)主要是对人造系统的行为进行的设计。从字面上理解,交互就是两个或多个个体之间的交流与互动。在UI设计领域,交互设计师的工作是设计人与设备的对话方式,这是决定产品使用方式的岗位。

第1章初入UI设计世界1 1.1什么是UI设计/1 1.1.1UI设计的概念/1 1.1.2UI设计的发展/1 1.1.3UI设计的分类/6 1.2UI设计的发展前景与就业空间/8 1.2.1UI设计的发展前景/8 1.2.2UI设计师的就业空间/8 1.3UI设计的流程/9 第2章零基础的设计之路12 2.1软件是实现创意的基石/12 2.1.1Photoshop的功能/12 2.1.2Illustrator的功能/12 2.2UI设计风格的演变/13 2.2.1拟物化风格/14 2.2.2扁平化风格/14 2.3具有持续学习的能力/15 2.4从现实中汲取灵感/18 2.5以兴趣爱好为内驱动力/19 第3章UI设计原则20 3.1简单清晰/20 3.2便捷**/22 3.3**可控/24 3.4无形的界面设计/26 第4章UI设计的视觉元素28 4.1字体设计/28 4.1.1字体风格/28 4.1.2字体变形/31 4.1.3字体变形案例/33 4.1.4字体的设计原则/37 4.2图形设计/40 4.2.1图形样式和使用场景/40 4.2.2图形的设计原则/43 4.3图标设计/44 4.3.1图标的设计风格/44 4.3.2图标制作方法/45 4.3.3图标的设计原则/48 4.4按钮设计/50 4.4.1按钮的分类/51 4.4.2网页按钮的功能/53 4.4.3按钮的设计原则/54 第5章版式设计的方法论57 5.1版式设计的概念/57 5.2版式设计的构成与方法/58 5.2.1构成版面的基本图形元素/58 5.2.2版式设计的基本方法/61 5.3版式设计的原则/69 5.3.1对称与稳定/69 5.3.2对比与和谐/69 5.3.3实与虚/71 5.3.4一致与变幻/71 第6章色彩搭配技巧73 6.1什么是色彩/73 6.1.1色彩两大色系/73 6.1.2色彩三属性/74 6.1.3色彩的设计原则/76 6.2网页设计的配色技巧/79 6.2.1确定基本色调/79 6.2.2掌握基本的配色设计/80 6.2.3借助配色工具/84 6.3色彩情感的应用/85 6.3.1色彩的心理暗示/85 6.3.2色彩的视觉空间感/88 第7章网站的分类90 7.1专题网站/90 7.1.1什么是专题/90 7.1.2常见的专题类型/90 7.1.3专题页面的特点/96 7.1.4常见的版式布局/96 7.2企业网站/102 7.2.1什么是企业网站/102 7.2.2常见的企业网站类型/102 7.2.3常见的栏目架构/102 7.2.4常见的版式布局/106 7.3门户网站/107 7.3.1什么是门户网站/107 7.3.2门户网站的设计要点/107 7.4商城网站/108 7.4.1什么是商城网站/108 7.4.2商城网站的设计要点/109 7.5后台管理系统/109 7.5.1什么是后台管理系统/109 7.5.2后台管理系统的设计要点/110 7.6网页游戏/111 7.6.1什么是网页游戏/111 7.6.2网页游戏的UI设计风格/111 7.6.3网页游戏的设计要点/111 7.7应用软件/112 7.7.1什么是应用软件/112 7.7.2应用软件的设计要点/113 7.8WAP网站/113 7.8.1什么是WAP网站/113 7.8.2WAP网站与PC端网站的区别/113 7.8.3WAP网站的设计要点/115 7.9H5营销/115 7.9.1什么是H5/115 7.9.2H5页面的版式设计/115 7.10Banner/117 第8章交互设计与用户体验123 8.1关于交互设计/123 8.1.1什么是交互设计/123 8.1.2交互设计的流程/125 8.1.3交互设计的要点/131 8.2关于用户体验/134 8.2.1什么是用户体验/134 8.2.2用户体验五要素/134 8.2.3用户体验的分类/137 8.2.4用户体验的设计原则/138 8.3情感化设计/142 8.3.1情感化设计的层次/143 8.3.2情感化设计的要点/144 8.4网站的用户体验/145 8.4.1网站用户体验的内容/145 8.4.2网站用户体验的优化/148 第9章移动平台的UI设计152 9.1了解APP的UI设计/152 9.1.1APP的UI设计趋势/152 9.1.2WebUI与APPUI的区别/154 9.2iOS系统的界面设计/156 9.2.1iOS系统的界面尺寸/156 9.2.2iOS系统的界面元素/157 9.2.3iOS系统的字体/159 9.3Android系统的界面设计/160 9.3.1Android系统的界面尺寸/160 9.3.2Android系统的字体/161 9.4WindowsPhone系统的界面设计/162 9.**PP的设计要点/163 9.5.1金融类APP/163 9.5.2购物类APP/164 9.5.3社交类APP/166 9.5.4音乐类APP/167 第10章UI设计的升华之道168 10.1响应式设计/168 10.1.1响应式图片/168 10.1.2响应式导航/170 10.1.3响应式选择菜单/171 10.1.4响应式登录/171 10.1.5响应式内容栏目/172 10.1.6响应式重新布局/173 10.2栅格系统/173 10.2.1什么是栅格系统/173 10.2.2栅格系统的应用/176 10.3产品包装展示/179 10.3.1产品包装的表现形式/180 10.3.2产品包装的设计要点/181