1.1 认识UI

无论是对于小白，还是有一定设计经验的UI设计来说，在设计前对UI的系统认识都是非常有必要的。在本节中，主要从UI这个大方向开始，让大家慢慢熟悉UI的发展历程和UI设计的意义。

1.1.1 UI操作系统的发展简介

1. 设备的发展

对于如今的互联网行业而言，UI设计越来越被重视。

20年前，也就是1997年，那个时候还没有腾讯，也没有阿里巴巴。许多老百姓还不知道什么叫作PC，只有家里条件还不错的人才有机会接触真正的计算机。那时候的计算机也叫作“微机”（micro computer），大多数人对它都是怀着好奇的心态去看待。当时的人们经常将386和486（指计算机处理器型号，数字越大，性能越强）挂在嘴边，但许多人并不知道其具体差别在哪里，就更别提现在人们每天都在津津乐道的“互联网”等各种周边名词了。早期的个人台式计算机如图1-1所示。

UI即User Interface（用户界面）的英文缩写，泛指用户软件的操作界面。UI设计主要指软件操作界面的样式，而UI的用户体验则指的是人们对软件的人机交互、操作逻辑以及界面美观的整体要求。

好的UI不仅让软件变得有个性、有品位，还要让软件的操作变得舒适、简单和方便，且充分体现软件的定位和特点。

作为一名UI初学者或者是UI设计师，了解一下UI的发展历程是很有必要的。这里我们以UI设计中最常见和最直观的操作系统和图形为例，介绍一下UI在近30年间从萌芽到逐渐演变的过程。

（1）个人计算机（PC）阶段

对于大多数用户来说，在使用移动设备之前，最早接触UI的媒介主要是个人计算机上的操作系统。表1-1展示了从1981年到2015年，Windows操作系统和苹果操作系统的发展过程。

（2）移动设备发展的各个阶段

针对本书需要讲解的内容方向，这里仅把操作系统上具有真正意义的手机纳入关键时间点，而不是真正的手机编年史，请大家注意。同时，在该历程中主要以覆盖率最为广泛的iOS/Android操作系统为主线来进行介绍，并不包含Android开源的手机品牌，见表1-2。

2. 风格的发展

从最早8bit像素风格的单色系统图标到后来的五颜六色的图标，再到后来的写实风格、扁平化、极简化图标，一路走来，图标的风格演变都有着比较鲜明的时代特征，并且随着时间的推移，各平台操作系统之间的UI设计风格也逐渐开始分化，用户的品牌感知也日渐明显。各阶段的UI主要涉及风格如图1-2所示。

1.1.2 UED团队的构成与介绍

UED，全称User Experience Design，中文含义为用户体验设计。在日常生活中，想必大家经常会听到一些关于用户体验设计团队的工作或者故事，同时也都知道如腾讯CDC、ISUX和TGidea这样的一些行业标杆团队。

下面针对目前比较完善的一些UED团队配置的岗位做一下简单介绍。就全球范围来说，对于UI设计领域细分普遍存在一种共性的人力配置，如图1-3所示。

视觉设计师（VD，Visual Designer）：视觉设计的主要输出方，视觉风格的把控和视觉规范的制定者。

交互设计师（ID，Interaction Designer）：交互方案的主要输出方，与产品经理协同较为频繁。

用户研究设计师（UR，User Reserch Designer）：用户市场调研组织、执行和用研报告输出方。

UI工程师（FD，Front End Developer）：有的公司也称之为重构设计师，页面还原重构的技术输出方。

当然，像TGidea这一类的互联网营销设计团队，除了以上的岗位分配之外，根据业务和创意的需要，甚至可能还配置有专业的多媒体动画师和优秀的文案策划人员这样的职位。针对UED团队来说，其对于岗位虽然有明确的划分，但我还是希望大家在实际工作中能有意识地去做一些横向拓展和学习，了解和熟悉除职责范围内的一些其他技能，将自己放在用户的角度去思考问题，并做好设计，如此才可能真正做出适合用户需求的产品。

总而言之，全方位的技能掌握，对于一个合格的用户体验设计师来说至关重要。

1.1.3 UI的应用领域分析

1. 支付领域

目前，我们正处于一个电子信息爆炸的时代，随处都可见人机交互的场景，而只要有人机交互的场景，就一定会有UI的身影。同时，针对UI以往有很多无法实现且我们甚至都不敢想象的场景在最近的五六年时间里都慢慢变成了现实。例如，如今的支付方式已经逐步被数字化，我们如果要外出购物甚至可以不用带任何现金，而只需要一部手机提供扫码功能即可完成支付，如图1-4所示，非常方便和快捷。

目前我们也正处于一个移动互联网盛行的时代，针对网上购物的各种App（全称Application，一般泛指手机上需要安装的第三方应用程序）服务应有尽有，无论你是想品尝美食、外出旅游、订酒店、订机票还是看电影等，利用App（见图1-5）和各种网络支付方式（见图1-6）进行操作基本上都可以搞定。

2. 教育领域

无论在任何时代，教育和科技都是分不开的，如果想要科技得以发展，就必然要重视教育。

对于如今的学生来说，他们每天可能已不需要像我们小时候那样整天背着一个十几斤的书包往返于学校和家，因为所有要学的内容都可以存储在一个轻薄的教学平板电脑中。同时除了打草稿之外，学生们几乎不需要笔就能完成作业，老师也能通过网站系统批改作业。此外，如今学校若要通知学生的父母去学校开家长会，基本也不需要让学生回家转达父母或者打电话，而只需要通过微信或者QQ群发消息统一告知一下即可。

而对于如今的成人教育来说，在线课堂和网络培训课程日益火爆，且针对各行各业的学习和培训应有尽有。这为急切需要提升技能又苦于找不到合适的平台培训的人们提供了一个非常好的学习机会。各类型的教育类App如图1-7所示。

3. 医疗领域

UI科技在医疗领域的利用，可以说让医疗技术和医疗服务的发展有了质的飞跃。如今我们看病，除了到医院挂号，还可以通过手机App预约挂号。同时，全计算机系统操作的医疗器械操作也会让医疗技术更加精准，同时也大大提高了手术成功的概率，减轻了患者的痛苦。此外，医疗领域中的大数据检测分析技术，也使得人类能战胜更多的疾病，让更多的患者得到更加客观和针对性的治疗。各类型的医疗类App如图1-8所示。

4. 娱乐领域

针对UI科技在娱乐领域的应用，首先想到的便是游戏行业了。没错，无论是从最早的8位游戏机到现在的VR/AR游戏，“人机互动”这个概念在游戏上的体现是最为淋漓尽致的。在其中，我们可以尽情地享受科技给我们带来的各种美好体验，并且从全球一些知名游戏公司每年在游戏上的投入和收益就可以看出，此领域对于科技的需求和目标有多大。因此，多媒体互动时代注定是科技与人类之间的一场娱乐盛宴！各大游戏娱乐类App如图1-9所示。

5. 共享领域

2010年前后，随着实物共享平台的出现，“共享”一词的概念开始从纯粹的无偿分享、信息分享逐渐转变为“获得一定报酬”为主要商业目的基于陌生人且存在物品使用权暂时转移的“共享经济”。这种颠覆式经济模式下催生出来的行业种类繁多，几乎涵盖到各行各业。就线下共享经济来说，手机终端成为联通共享双方或者多方的主要桥梁。人们简单地在手机上进行一系列的操作，就可以轻松地解决生活中各种衣食住行的问题。

例如，当我们用手机打开某个乘车App，就可以解决自身的用车问题；外出旅游时如果感觉酒店太贵或不够温馨，没有家的氛围，那么你可以打开某个民宿App，在世界范围内都可以预定到一个靠海看日出且温馨的临时住所来充当你在旅途中的“家”；需要近距离出行的时候，如今各大城市的街道角落里都摆放有各种品牌的共享单车，此时只要打开手机上的共享单车App（见图1-10），然后进行扫码，即可开始骑车出行。

6. 金融领域

当你想要投资或者办理银行业务的时候，你一定会看看手机上的金融类App中有没有可以直接在手机上就能办理的业务。对于金融行业而言，越来越多的银行和金融机构开始重视互联网服务，通过彼此之间的良性竞争，用户有了更多的了解和选择的空间，用户体验得到提升，如图1-11所示。

总体来说，目前UI科技渗透到的领域还有很多，这里不再一一列举。同时，越来越多的创业团队也正在用互联网的思维努力地改变着各行各业的传统模式，以求能发现新的“蓝海”行业。但是无论是哪个领域，只要是跟人打交道，那就必然会发生交互行为。有一天也许手机会消失，也许某个操作能简单到甚至不用手就能完成，但是对于人机交互而言，UI的存在，至少在未来20年，很难被打破，这也是越来越多的传统设计师转行到UI设计行业的原因吧。

1.1.4 UI设计师的自我修养

1. 技能的培养与提升

针对不同的设计，技能需求往往都有所不同，但是唯有一点是相通的，即无论是做什么样的设计，都要基于“符合用户审美和满足用户需求”这一点。

对于刚入行的UI设计师来说，首先需要做的，就是不断提升自己的专业技能。一个在开始阶段如果只会动嘴皮子而忽略了动手实干的设计师，那无异于自毁前程，所以也就不要怪机会和时运不佳了。

在实际生活中，很多设计师经常会问我：“什么才是做好UI设计师的第一步？”我的答案很简单，那就是不断地学习临摹。虽然如今UI行业流行的是扁平化设计，但在实际临摹时，建议大家还是针对拟物化图标来多做一下练习。

在这里，我们来说一下拟物化图标临摹和学习的好处。

（1）强化对物体造型的构建能力和想象力

图1-12和图1-13所展示的为写实风格图标，这两张图大约是我10年前的作品。由于当时写实化风格占据着市场的主导，所以在那个时代，几乎全球范围内的UI设计师都在努力追求着ICON的细节和质感。不得不说的是，那段时间我对于写实图标的强化训练，不仅强化了我对于造型和质感表现的基本功，同时让我对整体画面感的理解有了比较大的提升。直到现在，就我个人来说，在图标制作中我依然钟情于质感表现这一块。

（2）强化对物体光影和细节的把控能力

下面介绍到的这个案例（见图1-14和图1-15）是关于一个Android操作系统的锁屏动画方案，这是我在大约2010年时设计的作品，目前已经开发完成。由于这是一个动态的锁屏动画效果，在设计中除了对于基本造型的考量之外，最为重要的还是对于一些细节的处理，如金属元件的划痕、机械轴承滚动式同步的旋转以及金属杠杆随着机械联动所产生的同步变化等效果。

对设计师来说，要把一个效果尽量地还原到真实状态，其实就是一个不断去记忆真实场世界中的一些物理条件和细节的过程，在这个过程中当你考量得越多，你所制作出的图标细节就会越丰富，那么图标中的物体还原度也就越高，效果也就越真实和自然。

（3）强化设计内容的拆解能力

当你在临摹或者分析别人的作品时，我们的大脑意识里会沉淀和提炼出若干的元素内容。如图1-16所示，图中的1号正方图形便是你所见的别人的优秀作品，经过拆解之后，会变成一些零碎的灵感来源即2号三角图形，随后这些灵感元素在你大脑中会经过一个重组、更新和完善的过程，在具体设计工作中，我们可以将这些灵感进行自我消化和重塑，并且这当中可能会产生出千万种新的设计想法和可能，之后根据具体的需求将想法付诸设计，也就得到了我们自己想要的作品。

总之，多学多练，是设计师技能提升的关键。而在前期的设计练习过程中，临摹是一个既快捷又方便的有效学习方法，它不仅能提升你的设计能力，同时也能让你在不断地观摩别人的优秀作品的过程中，接收到越来越多的灵感和想法，从而做出更好的设计作品。

2. 设计思维的训练

对于UI设计行业来说，设计的思维不单单是把界面设计得漂亮和美观就可以了，更多的是侧重于功能性，并且它是一种偏理性的思维方式，对于用户体验来说至关重要，同时也是除不断练习外如何让设计师快速地从初级到高级提升过程中的关键，希望引起大家重视（在本书第2章中，将会比较细致地和大家聊一聊关于设计的思维训练，这里只做一个简单介绍）。

3. 培养耐心观察的习惯

在设计圈子中，我们经常会听到的一个词就是“走心”，也就是指在一个设计上你是否用心的问题。

如今，越来越多的设计行业开始推崇“匠人”精神。我们都知道，好的设计作品是需要反复思考和不断地打磨才能完成的。而每一次的修改和调整甚至推翻重来，都是对设计师耐性的考验。如果一个设计师对待设计的态度有着“匠人”精神，那么他会是一个出色的设计师；如果一个设计团队对待设计有着“匠人”精神，那么这会是一个出色的团队。

在我看来，“匠人”精神最核心的一点，就是要求人要有追求完美的态度和超高的耐性。面对发展日益迅速、生活节奏越来越快的情况，试问，有多少人能够真正耐着性子专心去做好一件事呢？

同时，观察能力是设计师能否设计出优秀作品的关键。这就要求我们在设计过程中要学会将看到的内容进行拆解和提炼。对于互联网设计师来说，我们面对的是C端（指消费者），他们对于产品的反馈和体验无疑会传达得更加直观。同时对于如今人人都提到的“提升用户黏性”这个问题上，我们如果不细心和耐心去观察用户的一举一动，分析用户的使用场景，提炼和归纳用户的关注点，那么所谓的“用户黏性”就失去了其应有的意义。

尤其对于一些新设计师来说，对于此则更难以沉下心去面对，因此在工作上受阻之后往往也容易表现出一些负面情绪，这个值得大家注意。

以上3点，是我认为的一个设计师自我修养提升的关键。提升一个设计师的自我修养，不单单是指设计能力和功底的提升，还包括对于想法和创意的能力的提升。远离“照搬”模式，通过不断地技能训练、设计思维训练以及耐心观察的习惯养成，才有望成为一名合格并优秀的UI设计师。