1.1　UI设计发展史

UI设计是指对网站的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅可以使软件具有鲜明的个性和独特的品位，还可以使软件的操作变得舒适、简单和灵活，充分展现网站的定位和特点。

网页设计可分为两个部分：编码设计与UI设计。编码设计就是用户熟知的代码编译程序，目的是完成网站的功能建设。UI设计则是网页界面的设计与制作，目的是建设风格和主题，如图1-1所示。

图1-1

目前在国内，UI已经被普遍大众所熟知。用户们经常可以看到一些招聘广告上写着“招聘界面美工、界面美术设计师”等，如图1-2所示。

图1-2

这同时表明大众对UI的理解还停留在美术设计方面，缺乏对交互设计重要性的理解，认为UI的工作只是描边画线；另一方面，软件开发过程存在重技术而轻应用的现象，如图1-3所示。

图1-3

提示：许多人认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员比例与待遇上可以表现出来。一般互联网公司产品人员、技术人员、UI人员的配备比例是1：2：1，大公司的话可能是1：4：1。

1.1.1　早期UI设计的风格

用户接触UI这个名词是最近几年的事情，但是实际上，UI设计在设计行业一直存在。从最初的电子产品、软件再到网站的建设，这些都是UI设计的范畴，计算机和手机显示屏中的各种图标也都是UI设计。可以说，自从有了设计这个行业，UI这个名词就出现了。

19　85年，美国的微软公司成功研发并投入使用计算机系统Windows 1.0，如图1-4所示。同年，一位名叫阿列克思·帕基特诺夫的俄罗斯人发明了一款叫作俄罗斯方块的游戏，如图1-5所示。广告灯箱、在屏幕上闪动的文字和图片也都是可追溯的早期UI设计。

图1-4

图1-5

提示：最早的操作系统画面为黑白或单色画，图标、窗口设计基本以线框为主。图标形状来源于用户日常生活中常见的机器、按钮的形象，受显示器分辨率的影响，图形外框呈现锯齿状马赛克效果。后来受系统技术开发影响，计算机的大部分操作界面有一个用户需要的信息界面窗口，还有一个DOS系统下的根目录运算过程窗口，因此抽象性语言命令字符占据操作界面的大部分面积，系统操作界面亲和力不足。

1.1.2　中期UI设计的兴起

20　00年UI传入我国，金山公司是我国最早从事UI设计的公司，公司成立之初只有两个人，但是之后却为UI设计行业培养了众多优秀的设计领袖，也是从那时起，国内开始出现各大UI设计公司。

提示：这时的UI设计风格偏向抽象化，抽象信息化阶段的计算机UI设计与移动UI设计风格共性在于图标造型抽象、粗糙、不美观，虽然能够传递基本信息功能，但传递过程易使人产生视觉枯燥感。2000年后，具象装饰风格拟物化设计席卷系统界面设计。苹果公司2000年发布Aqua系统，UI设计呈现多彩、小清新的图形界面，图标所有尖锐的直角都被打磨成圆弧，并且有半透明外壳和曲线美感的半透明菜单，窗口增加动效和声音。

20　03年，腾讯入股金山公司使腾讯QQ的界面得到革命性的升级，如图1-6所示。由于外观和交互方面给用户带来了比较人性化的改变，因此QQ用户激增，随后，国内各大IT公司开始重视UI设计。

图1-6

提示：微软于2001年发布了Windows XP系统，该系统以曲线装饰、大量立体效果运用为UI设计风格。

20　07年中期，苹果公司对官网进行了重新设计，而当年的主角毫无疑问是横空出世的iPhone。设计师们清楚这款产品的意义重大，其极具代表性的圆角矩形图标将拟物化设计推向整个世界。

内部代号为Purple的智能手机催生了Android操作系统的诞生，同时也为兴盛了长达30年左右的摩托罗拉、诺基亚和黑莓手机的没落埋下了伏笔，图1-7所示为早期较为流行的手机品牌。

图1-7

知识点睛：拟物化设计风格初现端倪时，计算机还并不普及，手机更是仅支持接打电话功能，因此，拟物化的出现并没有给设计行业和大众带来较大改变。直到以iPhone为代表的智能手机风靡全球，拟物化正式开始引领UI设计潮流。

20　09年苹果公司正式把iPhone引入中国，移动UI设计开始在国内兴起。时至今日，国内UI设计已经大步发展，如图1-8所示。

图1-8

提示：移动UI设计——以智能手机为例。20世纪90年代，伴随无线通信与网络技术的进步，智能手机逐渐进入市场。受当时科技的局限，早期手机UI设计简单粗糙，图标、文字受到屏幕分辨率的影响，呈现像素化。

1.1.3　后期UI设计的发展

iPhone的出现不仅开启了UI设计的新时代，也使智能手机、平板电脑成为UI设计的主流形式。如今触控效果与技术发展越来越成熟，Web UI用户体验也越来越专业，无论是设计师还是用户对体验都表现得很重视。其他UI形式也开始兴起，对于UI设计师而言这是一个美好的时代，如图1-9所示。

图1-9

提示：拟物化设计开始在全球流行，它模拟真实物体材质、质感、细节、光亮，视觉效果华丽，界面友好，模拟现实生活中的人机交互方式。这时计算机的操作系统设计也趋于具象化，图标、界面窗口装饰化效果初见端倪。例如，界面窗口从原来的抽象的线框转变成色条，抽象不友好的语言命令窗口转为后台操作。

同时，越来越多的企业意识到设计的重要性和用户使用感受也就是用户体验对产品的影响。为了迎合大众的用户体验，主流设计风格由拟物化风格转变为扁平化风格，如图1-10所示。

图1-10

知识点讲解——iOS系统

iOS是由苹果公司开发的移动操作系统。苹果公司最早于2007年1月9日在苹果Macworld大会上公布这个系统，最初的设计计划是给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。

iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。原本这个系统的名称为iPhone OS，后因为iPad，iPhone，iPod touch产品均使用iPhone OS系统，所以苹果公司在苹果2010全球开发者（WWDC）大会上宣布改名为iOS。图1-11所示为苹果公司图标与最新的苹果手机产品。

图1-11

小链接：iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名时已获得Cisco公司授权。

知识点讲解——Android系统

Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑。Android由Google公司和开放手机联盟领导及开发，尚未有统一中文名称，中国大陆地区大都称其为“安卓”。

Android操作系统最初由Andy Rubin开发，主要支持手机系统使用，2005年8月由Google收购注资。2007年11月，Google与8家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。

Google以Apache开源许可证的授权方式发布了Android的源代码。第一部Android智能手机发布于2008年10月。随后Android逐渐扩展到平板计算机及其他领域，如电视、数码相机、游戏机等，如图1-12所示。

图1-12

提示：2011年第一季度，Android在全球的市场份额首次超过塞班系统，跃居全球第一。2013年第四季度，Android平台手机的全球市场份额已经达到78.1%。2013年9月24日谷歌开发的Android操作系统迎来了5岁生日，全世界采用这款系统的设备数量已经达到10亿台。

知识点讲解——Windows系统

Microsoft Windows，是美国微软公司研发的一套操作系统，它问世于1985年，起初仅仅是Microsoft DOS模拟环境，但微软不断更新升级且后续的系统版本更加易用，因此逐渐成为各大开发商最喜爱的操作系统。Windows采用了图形化模式GUI，比起从前的DOS需要键入指令使用的方式更为人性化。

随着计算机硬件和软件的不断升级，微软的Windows系统也在不断升级，从架构的16位、32位再到64位，系统版本从最初的Windows 1.0到大家熟知的Windows 95、Windows 98、Windows ME、Windows 2000、Windows 2003、Windows XP、Windows Vista、Windows 7、Windows 8、Windows 8.1、Windows 10和Windows Server服务器企业级操作系统，微软一直致力于Windows操作系统的开发和完善，如图1-13所示。

图1-13

知识点讲解——拟物化风格设计

拟物化设计（Skeuomorphism），指追求模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现。

◆特点：界面模拟真实物体的材质、质感、细节、光亮等；人机交互也拟物化，模拟现实中的交互方式。

◆代表作品：Android部分图标以及iOS 7.0以下的大部分App，如图1-14所示。

◆界面：模拟真实物体的材质、质感、细节、光亮等。

◆交互：人机交互也拟物化，模拟现实中的交互方式。

◆好处：拟物设计具有高度还原性，而且可以准确传达丰富的人性化的感情，所以家居类物品适合拟物化设计，如图1-15所示。

◆坏处：拟物化本身就是一个约束，会限制功能本身的设计。

图1-14

图1-15

提示：2012年苹果公司推出iOS 7操作系统，其UI设计开始摆脱拟物风格，图标采用更鲜艳的配色、更简单的背景及可爱的设计。同时，清晰的图标与模糊的背景之间的高反差凸显了层次。

知识点讲解——扁平化风格设计

扁平化设计（Flat），指去掉冗余的装饰效果，即去掉多余的透视、纹理、渐变等能做出3D效果的元素，让“信息”本身重新作为核心被凸显出来，并且在设计元素上强调抽象、极简、符号化。

◆代表作：iOS 7.0及以上，微软的Metro UI，Windows Phone 8，Windows 8，如图1-16所示。

◆界面：简单纯色的简单组合（iOS系）和单色极简的抽象矩形色块（微软系）运用大字体，光滑、现代感十足，有种蒙德里安的感觉。

◆交互：因为扁平化设计的核心是对功能本身的使用（对内容本身的消费），所以去掉了冗余的界面和交互，而是使用更直接的设计来完成任务，如图1-17所示。

◆好处：界面和交互简约，信息更直观，信息量更大。总结起来就是简单易懂，如图1-18所示。

◆坏处：需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷。

图1-16

图1-17和图1-18

知识点睛：纵观UI设计发展历史，其设计风格经历了早期豪放粗犷的抽象信息化阶段——抽象的语言信息、单调的文本传达、冰冷的外观体验、枯燥的用户感受，到后来的具象化装饰阶段——高度拟物化装饰下对用户体验真实感的追求，直至当今抽象简约图像化阶段——现代主义的理性简洁式扁平化、视觉传达功能优良、务实高效下“人性温度”的回归。这种风格的流变与工业设计所经历的从萌芽阶段到新艺术运动再到功能主义阶段交相辉映，共同书写着科技引领下产品形式与内容、风格、功能的发展图景。

提示：抽象简约图像化阶段——扁平化风格。近两年计算机操作系统、移动终端UI设计发展不再有时间间隔。人们关注的重点转为视觉信息繁杂的环境下，更方便、快捷、准确地进行信息传播，UI设计向着抽象简约图像化的方向迈进。