第5章
UI设计



【本章简介】
本章主要介绍UI（用户界面）设计的相关概念及其分类，并总结了移动端界面和PC端界面的一些设计原则； 通过介绍常用的UI设计软件，引出了交互设计的相关操作与技巧； 作为实践，本章列举了基于Axure的高保真Web原型图设计案例和基于Kitten的交互设计案例。
【知识导图】




【学习目标】
 了解UI的相关概念及分类。
 掌握UI设计原则。
 了解常用的UI软件，熟练使用Photoshop等相关软件。
 掌握交互设计的概念与流程，熟练使用Axure软件。
 培养实践与创新能力，如利用Axure实现交互设计。


1983年，苹果公司制造出Lisa计算机。1984年，苹果公司的麦金塔个人计算机搭载的System Software系统(Mac系统的前身)，至7．5．1版本正式改名为mac OS。Lisa的问世可以作为“UI设计”的开端，因为设计人员已经有意识地在用户体验上进行针对性设计。1985年，微软公司推出Windows 1．0操作系统； 1985年6月，俄罗斯人阿列克谢·帕基特诺夫发明了俄罗斯方块游戏。这些都是早期的UI设计，那时的UI设计基本都是在系统默认页面上加以设计，更多的是在操作体验上进行更多的改革，如苹果公司创造的文件夹拖动、微软公司创造的“开始”按钮等。不过，当时苹果公司在UI上还是做了很多超前的设计。例如系统中嵌入了除默认字体以外的其他字体，一改单一颜色的屏幕而加入了色彩等，为后来UI的发展奠定了基础。而如今的UI设计是一个多元化、多学科且富有创意的领域。
5．1初识UI设计
5．1．1什么是UI设计

UI是用户界面(User Interface)的简称，在整个软件系统中是人与系统交互的“桥梁”。随着计算机技术的迅猛发展，用户对软件的要求日益增多，除了追求更强大的软件功能，还追求美观的界面、便捷的操作、舒适的体验以及便捷的帮助等。可以说，UI设计是软件工程设计中不可缺少的环节。
以软件开发模型中的瀑布模型为例，整个界面设计流程与软件开发流程的关系如图51所示，其中，界面需求分析和布局、交互设计是整个工作的核心。


图51软件开发流程







5．1．2UI设计的分类
UI设计包含软硬件与人的交互设计、操作逻辑设计、用户体验设计，以及界面排版的整体设计等。通常用户打开手机后，显示的界面如图52所示，这些是UI的一部分，属于界面设计； 在这些界面上按提示进行操作，如向右滑动解锁，就是交互设计； 解锁成功后，会以动画的形式，如放大或渐隐淡出切换到主界面，此时的动画就是交互动效设计。优秀的UI设计不仅让软件变得有个性、有品位，还能使软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。


图52手机界面


UI设计的分类有多种，根据不同的划分依据可以有不同的分类。
1． 依据工作内容
从工作内容上来区分，UI设计主要分为图形用户界面设计、交互设计和用户体验3类。
(1) 图形用户界面设计。图形用户界面设计(Graphical User Interface，GUI)主要解决软件产品风格的问题，包括对图标及元素进行尺寸及风格上的美化，在产品的功能辨识性及控件统一性、美观性上进行设计。
(2) 交互设计。交互设计又称为IxD(Interaction Design)，主要解决页面跳转逻辑、操作流程、信息架构、功能页面布局、事件反馈、控件状态等问题。
(3) 用户体验设计。用户体验设计又称为UXD(User Experience Design)，是贯穿于整个设计流程，以调研挖掘用户真实需求，认识用户真实期望和内在心理及行为逻辑的一套方法。
2． 依据用户使用场景
按用户使用场景来区分，UI设计又可分为移动端UI设计、PC端UI设计、游戏UI设计及其他UI设计。
(1) 移动端UI设计。
移动端UI设计是针对手机等移动端用户的界面设计，手机上的所有界面都是移动端UI设计，如微信聊天界面、QQ聊天界面、手机桌面，如图53所示。


图53移动端UI设计作品


(2) PC端UI设计。
PC端UI设计是针对计算机用户的界面设计，如PC端的QQ、微信、Photoshop等软件和网页的一些按钮图标等，如图54所示。


图54PC端UI设计作品


(3) 游戏UI设计。
游戏UI设计是针对游戏用户的界面设计，如《王者荣耀》《英雄联盟》游戏中的登录界面、个人装备属性界面等都属于游戏UI设计，如图55所示。


图55游戏UI设计作品


(4) 其他UI设计。
如VR（虚拟现实）界面、AR（增强现实）界面、智能设备的界面，如智能电视、车载系统等，如图56所示。


图56VR、AR类视频应用



5．2界面设计及其常用软件介绍
5．2．1界面设计原则

在积淀了丰富的知识经验后，多项UI设计技术已趋于成熟，具备科学性与规范性。在此基础上，它的很多原则和规范是必须掌握的。下面将详细介绍移动端和PC端的UI设计原则。
1． 移动端UI设计原则
因为移动端在屏幕尺寸和操作方式等方面具有局限性，所以移动端UI设计的形式和内容较为简洁，设计师在制定方案时要遵守的规则也相对简单。即便如此，移动端UI设计中仍要遵循以下基本原则。
(1) 一致性原则。
一致性原则是移动端UI设计中最重要的一项原则，它是指UI交互元素的一致和交互行为的一致。这些单个元素是组成UI的基础，它们的设计首先需要有统一的风格，然后建立统一的标签来完成元素的设计，如图57所示。


图57统一元素


(2) 习惯性原则。
所有的设计都是为用户服务的，所以在进行移动端UI设计时，应该更多地为用户考虑，严格按照用户的操作和使用习惯等进行设计。以用户的语言习惯为例，在做移动端UI设计时，按钮和菜单上的文字内容设定就需要遵从用户的语言习惯，如图58所示。


图58操作按钮名称设为中文


除语言习惯外，用户的操作习惯也是影响移动UI设计的重要因素。例如，用户使用手机操作习惯分为单手持握、双手持握和抱握3种方式，如图59所示。


图59用户操作手机的3种习惯


(3) 清晰性原则。
清晰性原则是指保持UI设计的清晰性。清晰的UI不仅更美观，而且也更利于用户浏览信息。主题不明确且信息概念模糊的UI会影响用户的使用体验，从而大大降低App的使用率。清晰性原则设计效果示意图如图510所示。



图510清晰性原则设计效果示意图


(4) 易用性原则。
易用性原则是指移动UI设计需要清晰地表达出UI的功能，以减少用户的选择错误。如图511所示的UI设计即严格遵循易用性原则，将不同的功能利用选项卡进行了合理的分区，并搭配简单的文字说明其功能。


图511易用性原则UI设计效果示意图


(5) 人性化原则。
人性化原则是指移动UI设计要协调技术与用户的关系，既能满足用户的功能需求，又能满足用户的心理需求，给用户方便、舒适的体验。如图512所示，这款阅读App就允许用户根据自己的审美喜好定制UI的背景、文字的字体和字号等，以及根据自己的操作习惯定制UI的操作方式。


图512自定义设置


2． PC端UI设计原则
作为传播信息的一种载体，网页需要遵循相应的设计原则，但由于表现形式、运行方式和社会功能的复杂性，原则也呈现出多元化的形式。本书将以PC端UI设计为例介绍通用性的设计基本原则。
(1) 以用户为中心。
“以用户为中心”的原则实际上就是要求设计者要时刻站在浏览者的角度来考虑，主要体现在3个方面： 考虑使用者观念、考虑用户浏览器和考虑用户的网络连接。
(2) 视觉美观。
设计网页界面时，首先对页面进行整体的规划，根据网页信息内容的关联性，把页面分割成不同的视觉区域； 然后根据每个部分的重要程度采用不同的视觉表现手段，在设计中给每个信息一个相对正确的定位，使整个网页结构条理清晰； 最后综合应用各种视觉效果表现方法，为用户提供一个视觉美观、操作方便的网页界面，效果如图513所示。


图513视觉效果图


(3) 主题明确。
网页界面设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者，使主题在适当的环境中被人们及时地理解和接受，从而满足其需求。从图514中可以非常明确地看出这是一个电商平台的网站。


图514电商平台网站


(4) 内容与形式统一。
任何设计都有一定的内容和形式。设计的内容是指主题、形象、题材等要素的总和，形式是指其结构、风格、设计语言等表现方式。一个优秀的设计应该是形式对内容的完美表现，即实现形式与内容的统一是非常重要的，如图515所示。


图515百度首页


5．2．2界面设计技巧
设计技巧是在进行某项设计时所采用的设计手段与技能，是从已有的设计过程或在已有的设计经验的基础上整合总结出的系统的设计理论，用来指导设计师进行合理有效的设计过程，使得设计过程有章可循、有条有理。
1． 用颜色和字重来设计层级
当面对需要信息层级结构的内容时，仅用放大字号表示强调和重要性通常不能解决问题。 信息层级不仅是不同尺寸字体的组合，而是由字体尺寸、字重、字体颜色形成对比的正确组合。对比差异越大，层级关系表现越明显。如图516所示，合理搭配字重和颜色，可使信息层级更加清晰。


图516信息层级与字体样式搭配的示范


2． 运用数学原理理解颜色
理解颜色对设计师来说是必不可少的一项技能，一个简单的添加和减少色相、饱和度、亮度(HSB)就像魔术一样能达到很好的效果，即可以轻易地去掉单调的图标内部白色背景，如图517所示。
如何计算HSB中的加法和减法？实际上有两种方法。 
方法1： 可以看到在整个图形(圆形背景，文件夹，装饰条)中，色相（H）值保持123不变，而饱和度（S）和亮度（B）是变化的，效果如图518所示。



图517去掉白色图标内部背景的效果图




图518方法1效果图




图519方法2效果图

即可得到以下公式：
较暗的颜色值=饱和度增加，亮度减少
更亮的颜色值=饱和度减少，亮度增加
方法2： 方法1的公式依然适用，但是色相（H）值发生了变化，效果如图519所示。在各种设计材料中使用的颜色模式RGB和CMY在这方面也非常有意义。RGB分别代表红色、绿色和蓝色，而CMY代表青色、洋红色和黄色。
通过移动颜色选择器得到想要的颜色后，基于方法1中的公式，则可得到以下的颜色公式：
红色，绿色，蓝色(RGB)+方法1公式=颜色变深
青色，洋红色，黄色(CMY)+方法1公式=颜色变浅
3． 使用间距分隔
除了在两组之间添加一条线来表示分隔之外，也可在两组之间使用宽敞的空间达到更好的效果。如图520所示，其目的是通过在标题和作者之间使用24px的大间距来创建分离。


图520正确使用间距分隔效果图


4． 使用颜色来分隔行
对于用户来说，如果行与行之间没有很明显的区别，阅读起来会很困难，因此，除了使用线条之外，在列表中添加彩色背景对阅读中的用户来说也很有效，并且对设计师来说也会更有乐趣，效果如图521所示。


图521使用颜色分隔效果图


5． 控制行的长度
大多数设计师经常使内容的长度更长，以便符合页面，但这样设计会使用户造成视觉疲劳，因此，在设计内容长度时每行应控制在45~65个字符。同时，为使整个文本与页面垂直居中，还需要调整行的长度，这样就可以减小段落间的空白区域，效果如图522所示。


图522合适的行长度效果图


6． 组件化提升效率
如果之前已经制作了5种卡片接口、10个按钮、5个标题样式等，在开始为特定内容创建界面之前，可以查看之前创建的设计，或许会找到可以循环使用的样式。
例如，可以使用“Aa的兴趣打卡11Day”的样式，并将其替换为“Aa 的潜水日记”的内容，而不是重新“发明轮子”并为“Aa 的潜水日记”创建另一张界面卡片。这将为设计师节省时间，同时还能保持界面一致，其效果如图523所示。


图523组件化效果图


5．2．3UI界面设计常用软件介绍
常用的UI设计软件种类较多，功能也各有特色，主流的设计软件有Photoshop、Illustrator、Sketch和Adobe XD等，如图524所示。Photoshop是最流行的图像编辑器之一，是UI设计师入门的必备界面设计工具，具有强大的图片编辑和处理功能； Sketch是一款强大的矢量绘图界面设计工具，可以让界面设计变得更简单、更高效。而有些软件在交互上很有特色，如Axure、Xmind、After Effect、Keynote和墨刀等，如图525所示。Axure是一款专业的交互原型设计工具，可以体现产品的业务逻辑； 交互逻辑和视觉逻辑； After Effect是一款关于图形和视频处理的界面设计工具，可进行动态交互设计。


图524主流的UI设计软件





图525交互类设计软件



1． Photoshop相关介绍
Adobe Photoshop（简称PS）是由Adobe Systems开发和发行的图像处理软件。PS主要处理以像素构成的数字图像，使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS功能众多，在图像、图形、文字、视频等各方面都有涉及。从功能上看，该软件可进行图像编辑、图像合成、校色调色及色效制作等工作。
PS的界面由菜单栏、工具栏、选项栏、工作区、文档标签、面板这几个部分组成，界面如图526所示。


图526PS界面示意图


在UI界面设计中，该软件主要负责移动端或PC端界面原型图设计、Banner设计、图形与图标设计、图片处理等以静态视觉为核心的工作。
(1) PC端或移动端的界面原型图设计。
在设计PC端或移动端界面时，需要事先规划好界面中各个模块与功能的布局，确保应用的操作流程符合逻辑，如图527所示。


图527界面设计


(2) 图形与图标设计。
在图形与图标设计方面，PS中提供了强大的矢量工具与布尔运算功能，可根据创作需求绘制规则或自由形态的图标与图形，如图528所示。
(3) 图像处理。
在图像处理方面，PS也能胜任图像合成、图像精修、图像校色、图像格式转换等编辑工作。如图529所示为精修前后的模特图像，精修后的模特肌肤明显更干净、明亮。



图528图形与图标基本轮廓设计




图529人像精修对比效果图


2． Adobe XD相关介绍
Adobe XD（全称为Adobe Experience Design）是一款集原型设计、界面设计和交互设计于一体的软件，它能够设计任何用户体验界面、创建原型和共享文档。从PC端网站和手机端移动应用程序设计到语音交互等，Adobe XD软件都能全面覆盖和实现。
Windows上的Adobe XD的工作区可分为： A．设计模式，B．原型模式，C.手机预览模式，D．缩放级别，E．在线共享，F．属性检查器，G．粘贴板，H．画板，I．工具栏，J．弹出菜单，如图530所示。


图530Adobe XD工作区示意图


在UI设计中，Adobe XD专注于界面设计，它拥有简洁的操作界面，功能清晰，无弹窗，启动速度和运行速度快，且非常轻量化。
(1) 页面原型设计。
在页面设计视图模式下，用户可以在艺术板上任意绘制和设计图形，如图531所示。


图531利用XD设计界面


(2) 原型交互设计。
在原型交互设计视图模式下，用户可以拖出线条连接两个艺术板页面，或是连接艺术板页面中的某个功能，或是连接艺术板页面与某个功能，从而形成交互，如图532所示。


图532交互设计操作示意图



5．3交互设计及其常用软件介绍
5．3．1交互设计的概念

交互设计(Interaction Design，IxD)，也称为互动设计，是指设计人和产品或服务互动的一种机制。简单来说，就是人们在使用网站、软件、消费产品时产生的互动行为，如图533所示。
交互设计需要体现的要素可以归纳为以下7个方面。
(1) 商业： 要满足商业目标。
(2) 任务： 要充分考虑用户使用产品的目的，其次考虑视觉展现。
(3) 易用： 要对新用户来说是友好的，易于学习、易于掌握的。
(4) 一致： 设计中的控件、交互方式要一致。
(5) 清晰： 主模块和主功能清晰。
(6) 反馈： 有操作就有反馈，提示信息必须有效而且无干扰。
(7) 友好： 实时帮助信息、容错机制、柔和提示信息。



图533交互设计


从这些要素中，会发现它们都是围绕着用户的体验、目标和需求体现出来的。也就是说，交互设计的核心其实是用户，产品的外观、功能设计都是用来服务用户的，所以交互设计的本质应该是“以用户为中心”。那么什么是以用户为中心呢？简单来说，在进行产品设计时从用户的需求和用户的感受出发，围绕用户设计产品，而不是让用户去适应产品。
5．3．2交互设计的流程
按照交互设计各阶段不同的设计任务，可以分为前期准备阶段、中期设计阶段和后期跟进阶段。在前期准备阶段主要完成的是需求分析、用户建模； 中期设计阶段主要包括制作流程图、低保真原型和高保真原型； 在后期跟进阶段，视觉设计师要与工程师详细描述交互原型的结构、设计的细节，在开发过程中及时跟进，随时发现遗漏的问题，保证开发的完整性。
1． 需求分析 


图534需求坐标

需求分析是指对要解决的问题进行详细的分析，弄清楚问题的要求，以及最终要得到的效果。在交互设计中，需求分析就是指深度理解用户需求，挖掘用户的深层次需求。聆听用户需求，深度剖析用户底层需求要点，找准用户痛点，这就是需求分析的精髓。
2． 用户建模 
(1) 建立需求坐标。
需求坐标就是将用户的需求以二维坐标的形式呈现出来，如图534所示。这个坐标是以重要度和频率为坐标轴，将用户的需求按照重要度和频率在坐标中标示出位置。越靠近坐标原点位置的需求，其重要度及使用频率越低，也就表明需求率越低。反之，越靠近右上方的需求，其重要度及使用频率越高，即需求率越高。
通过用户需求坐标，能列出任务的优先层级，能够了解哪些功能是用户最需要、最关注的，这样的功能就要在产品的第一层级上显示。次要的、关注较少的信息在架构时可在产品的第二、第三层级上显示。这样有所依据的信息架构方法，能够使产品信息主次分明，同时避免冗余，让用户能够更方便、快捷地找到自己想要的信息。
(2) 用户建模卡片。
用户建模是指虚构出一个用户用来代表产品面向的核心用户群。这个虚构用户具备该用户群体所有的典型特征，可以包括性别、年龄、地域、需求、喜好等，要能够反映出用户群的痛点问题。一般一个产品通常会设计3~6个用户模型代表所有的用户群体。图535展示的是为某外卖产品建立的用户建模卡片。


图535用户建模卡片


3． 制作流程图
流程图主要用来表现产品的信息架构，通常会用逻辑思维导图的方式来表现。常用的逻辑思维导图软件有Mind Manager、Xmind、Illustrator等。这些软件可以简单、方便、美观地展现产品的功能架构，层级清晰，一目了然。
4． 低保真原型制作
原型是指整个产品面市之前的一个框架设计，可以分为低保真原型和高保真原型两种。其中，低保真原型是将页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态，更加具体、生动地进行表达。制作低保真原型的目的是帮助设计师聚焦于结构、组织、导航和交互功能等的设计，这些确定之后再投入时间关注界面的颜色、字体和图片的设计，也就是设计制作所谓的高保真原型。
常见的低保真原型形式有手绘和计算机制作两种，分别如图536和图537所示。计算机制作低保真原型可以使用Mockup、Photoshop、Illustrator、墨刀等软件。


图536手绘低保真原型





图537计算机绘制低保真原型


在制作了低保真原型后，可以按照流程图的方式，构建产品的交互布局图。当下较流行的制作交互布局图的软件有墨刀、Sketch、Axure等。如图538所示即为基于某产品的交互布局分解示意图。



图538交互布局分解示意图


5． 高保真原型制作
高保真原型是相对低保真原型而言的，如果说低保真原型关注的是结构和流程，那么高保真原型关注的就是细节，包括颜色、字号、间距等规范性问题，如图539所示。


图539高保真原型




视频讲解


5．3．3交互设计常用软件Axure RP介绍
Axure RP是一款专业的快速原型设计工具，可在官网下载，支持Windows和mac OS。它可以服务于团队中负责需求定义、产品功能设计的产品经理、需求工程师和交互设计师，让他们快速创建Web网站或移动App的低保真线框图、高保真可交互原型、业务流程图和需求规格说明书等，且支持多人协作和版本管理。
Axure RP软件界面大致可以分为8个区域，分别为菜单栏区域、工具栏区域、页面区域、元件库区域、母版区域、工作区域、检视区域、页面概要区域，如图540所示。


图540Axure RP界面示意图


Axure RP的页面管理采用类似操作系统的文件夹和页面文件的管理方式，不同点是，页面文件可以存在子页面。其页面导航面板如图541所示。


图541页面导航面板


Axure的元件库，类似于PPT的模板，或者是Office提供的各种形状、图标，可以通过拖曳的方式，帮助快速创建原型。元件库导航面板如图542所示。


图542元件库导航面板


工具栏提供了常用按钮的快捷入口，既可以通过鼠标单击激活，也可以通过快捷键激活，如图543所示。


图543工具栏


那么，如何设计元件的交互呢？
(1) 设置元件的类型、Tips、约束。
可通过检视面板中的属性面板，设置元件的类型(如Text、Email、Password)、占位符、Tips、长度、是否隐藏边框、表单提交按钮等信息，如图544所示。


图544交互属性面板设置示意图


(2) 对元件进行事件设置。
需选择元件后在检视的交互属性界面，选择“事件类型”选项，在弹出的对话框中，可设计页面跳转、界面元素显示与隐藏、渐入渐出效果等各类动作，如图545所示。



图545事件设置


(3) 设置下拉列表值。
通过元件库选择List Box元件，在检视的交互属性面板中单击“添加项菜单”选项，可以批量添加下拉值，如图546所示。
因5．4节实战案例1中所采用的软件是Axure，会详细地介绍到如何使用该软件，所以本节不再赘述其使用方法。



图546下拉列表值设定




视频讲解


5．4实战案例1——高保真Web原型图设计
本节将利用Axure来进行“百度”网站的高保真原型制作，该软件可在官网下载。首先进行需求分析，体验该网站具体的功能； 其次是制定思路，将页面进行合理划分并识别其各元件间的交互动作； 最后进行实操。其具体操作流程图如图547所示。


图547具体操作流程图


5．4．1案例分析
“百度”的全局导航，有别于其他新闻类、工具类或企业官网类网站的全局导航视觉展示——作为搜索引擎，它更加关注搜索方面的内容展示，弱化了全局导航的展示地位。
用户单击“网页”“新闻”“贴吧”等超链接，会跳转至相应的页面，而每个页面的全局导航均以相同的样式展示在页面顶部附近，如图548所示。


图548百度导航栏


通过以上分析，本案例制作思路如下。
(1) 划分区域： 将页面划分为页头区域、分类区域、内容区域和右侧区域4个区域，如图549所示。


图549区域划分


(2) 分解元素： 构成元素包括但不限于图片、文本框、文本标签、icon、按钮等。
(3) 识别交互： 逐个识别每个构成元素是否存在交互行为。对于交互设置，在每个区域进行制作时再予以一一说明。
(4) 构建元素的来源： 构建元素的来源为元件库和iconfront。


视频讲解


5．4．2案例操作
本案例以制作页头区域(区域①)为例，将分为界面设计和交互设计两部分进行详细介绍。首先，进行页面设计，将所需的元素按要求进行添加、放置； 其次，在按照元素之间的交互行为进行相对应的设计。
1．  界面设计实战
在页面设计过程中，将分为五个步骤进行，具体说明如下所示。
步骤1： 设置原型尺寸并添加“百度”LOGO。
首先拖入“矩形1”，在“样式”面板中设置其坐标为(50，50)。为了方便操作，将案例原型的尺寸定为1280×720px。暂时保留边框，制作完毕后设置为无边框。先搜索“百度”LOGO并复制粘贴到编辑区域，将其坐标设置为(80，75)，尺寸设置为150×49px。效果如图550所示。


图550步骤1效果图


步骤2： 添加搜索框并设置其大小及形式。
拖入“矩形1”，设置其坐标为(260，80)、尺寸为385×40px，将其与LOGO保持中部对齐，边框色为浅灰色，将其命名为“外框”； 再拖入“文本框”，设置其尺寸(367×25px)，与“外框”保持垂直和水平居中，将其设置为无边框，将其命名为“内框”，如图551所示。


图551分别设置外框和内框


步骤3： 添加语音和相机图标。
拖入语音icon、“垂直线”、相机icon。注意： 将“垂直线”作为中心点，使语音icon和相机icon等距，如图552所示。


图552步骤3效果图


步骤4： 添加“百度一下”。
拖入“矩形2”，设置其坐标为(645，80)、尺寸为120×40px，通过取色笔获取“百度”网站中的按钮颜色，输入文字“百度一下”，设置字体大小为16、字体颜色为白色，如图553所示。


图553步骤4效果图


步骤5： 添加“文本标签”。
拖入“文本标签”，置于页面的右侧，分别输入相应的文字，其效果如图554所示。


图554设置文本标签


至此，完成了百度页面的页头区域界面设计。


视频讲解




视频讲解


2．  交互设计的实战
通过观察和使用，可以确定相关区域有如下4种交互动作。 
(1) “生成联想内容”： 当将鼠标指针移入文本框时，外边框颜色由浅灰色变为深灰色； 当将鼠标指针移出文本框时，外边框颜色由深灰色变为浅灰色。在文本框内输入任何字符，都会在文本框下部显示联想内容。
(2) “图标变色”： 当将鼠标指针移至语音icon、相机icon上时，语音icon、相机icon的边框颜色显示为深蓝色； 当将鼠标指针移走时，恢复默认色。
(3) “按钮变色”： 当将鼠标指针悬停在按钮“百度一下”上时，按钮的填充色显示为深蓝色； 当将鼠标指针移走时，恢复默认色。
(4) “生成列表内容”： 当将鼠标指针移入文本标签设置的范围内时，显示列表内容； 当将鼠标指针移走时，隐藏列表内容。
考虑到此区域有4种的交互行为，在交互设计实战中将对应分为4大步骤进行操作。
步骤1： “生成联想内容”实战。
矩形“外框”的线段颜色有3种变化，即浅灰色、深灰色和深蓝色。右击矩形“外框”，选择“转换为动态面板”命令，如图555所示。


图555选择“转换为动态面板”


将新生成的动态面板命名为“边框”，新增两个状态，将两个状态分别命名为“浅灰色”和“深灰色”。具体如图556所示。


图556设置边框的状态


双击“浅灰色”状态，将“外框”矩形复制、粘贴至“深灰色”状态中，并将粘贴后的矩形的线段颜色设置为深灰色，如图557所示。


图557设置外框线段颜色


回到“浅灰色”状态中，选中“外框”矩形，单击“交互”标签，在“动态交互面板”中，如图558所示进行设置。


图558设置“动态交互面板”


接着，选中“内框”文本框，改变其尺寸，使其覆盖“边框”动态面板的主要部分，但“边框”的线段不可被覆盖，如图559所示。


图559改变内框的尺寸


单击“新建交互”按钮，将“事件”设置为“鼠标移入时”，将“元件动作”设置为“设置面板状态”。将“目标”设置为“边框”动态面板，设置“状态”为“深灰色”。其操作步骤分别如图560（a）和图560（b）所示。



图560设置面板状态及颜色(1)


单击“新建交互”按钮，选择“鼠标移出时”，设置“边框”动态面板的“状态”为“浅灰色”，继续单击“新建交互”按钮，将“事件”设置为“获取焦点时”，将“元件动作”设置为“设置面板状态”。将“目标”设置为“边框”动态面板，将“状态”设置为“浅灰色”。单击“确定”按钮后，单击“+”按钮，将“元件动作”设置为“设置选中”。其操作流程分别如图561和图562所示。


图561设置面板状态及颜色(2)


接下来制作在文本框内输入任何字符时，在文本框下部显示联想内容。以输入“南京”为例。当输入“南京”时，显示的是有关“南京”的联想内容，当删除文字“京”时，显示的是有关“南”的联想内容。因为存在变化，即考虑使用“动态面板”。拖入“动态面板”，设置其坐标为(260，120)、尺寸为385×200px，将其命名为“联想内容”，如图563所示。

继续拖入“矩形1”，设置其坐标为(0，0)、尺寸为385×40px，无边框。输入文字“南京天气”，将文字“天气”加粗，文字左对齐。具体操作如图564所示。

单击“新建交互”按钮，选择“鼠标悬停”交互样式，勾选“填充颜色”复选框，设置为淡灰色，选中“联想内容”动态面板，单击“隐藏”按钮，如图565所示。




图562设置面板状态及颜色(3)




图563设置联想内容




图564添加“南京天气”




图565具体操作


选中“内框”，单击“新建交互”按钮，将“事件”设置为“文本改变时”。单击“启用情形”按钮，若当前元件的文字是“南京”时，单击“+”按钮。将“元件动作”设置为“设置面板状态”，将“目标”设置为“联想内容”动态面板，如图566所示。


图566交互相关设置


步骤2： “图标变色”实战。
选中“语音icon”，将其转换为动态面板。将新生成的“动态面板”命名为“语音icon”，增加两个状态，将其分别命名为“默认色”和“深蓝色”。将“深蓝色”状态中的“语音icon”的填充色设置为深蓝色。回到编辑区域，选中“语音icon”动态面板，单击“新建交互”按钮，将“事件”设置为“鼠标移入时”。接着，完成“鼠标移出时”的设置。按照同样的方法，完成“相机icon”的交互，如图567所示。


图567设置图标交互状态流程


步骤3： “按钮变色”实战。
选中“百度一下”矩形，单击“新建交互”按钮，将“事件”设置为“鼠标悬停”，勾选“填充颜色”复选框，选择深蓝色，如图568所示。


图568设置“百度一下”变色


步骤4： “生成列表内容”实战。
拖入“动态面板”，与文本标签居中对齐，设置其坐标为(1180，110)、尺寸为90×100px，然后将其命名为“设置内容”。双击“设置内容”动态面板，拖入“矩形1”，通过改变形状、设置角度以及调整形状锚点，获得目标图形，如图569所示。


图569“设置”下拉框


设置该形状的外阴影，“X”“Y”“模糊”均为1。同时拖入“矩形1”，设置其尺寸，并设置为无边框，在“鼠标悬停”交互下，勾选“填充颜色”复选框，并设置为与文字标签“百度一下”相同的默认蓝色，勾选“字色”复选框，并设置为白色。最后，同时选中3个矩形，进行唯一性的编组，如图570和图571所示。


图570设置交互操作(1)




图571设置交互操作(2)


通过以上这些步骤即可实现区域①的内容，读者可自行对区域②、③、④进行设计。
5．5实战案例2——利用Kitten设计交互案例
本节将讲述如何利用Kitten来设计一个交互案例。首先介绍Kitten的工作界面，可分为效果展示区、素材添加区、操作选项区及相关选项操作展示区等，如图572所示。


图572Kitten工作界面


其实际操作分为三个步骤，流程图如图573所示。下面将详细介绍其操作步骤。


图573实际操作流程图


步骤1： 添加背景及人物。
在素材添加区选择背景及人物(雷电猴)，并在造型中添加人物的其他造型，其效果如图574所示。


图574背景及人物


步骤2： 选择所需对应的模块。
在操作选择区选择所需要的“事件”“控制”“外观”等具体选项，并进行自定义设置，如图575所示。


图575对应具体选择模块


步骤3： 按指定顺序拼接模块。
按照一定的顺序将所选择的模块进行拼接，这样当单击“开始”按钮时，任务就会开始往前走，当用鼠标单击“人物”图标时，人物则会发出爱心的图案，如图576所示。


图576模块顺序及交互效果图


按照以上操作，就可以很好地实现这一效果。读者也可以发挥想象力，让雷电猴变得更加活泼起来。



本章首先介绍了UI设计的相关概念，并将其按照工作内容分为界面设计、交互设计和用户体验三部分； 若按用户使用场景则分为移动端UI设计、PC端UI设计、游戏UI设计和其他UI设计四种。其次概括性地讲述了移动端、PC端的界面设计原则和技巧，移动端界面设计五原则包括一致性、习惯性、清晰性、易用性和人性化，PC端界面设计四原则包括以用户为中心、视觉美观、主题明确、内容与形式相统一。随后还介绍了界面设计常用的软件，并举例说明了PS和XD在UI界面设计中所承担的工作等； 也介绍了交互设计的概念、流程及常用软件Axure RP。最后详细讲解了如何利用Axure设计一个高保真Web原型图，以及如何利用Kitten设计一个简单的交互案例。



学习UI设计，离不开“手勤、眼宽”。手勤就是多练，眼宽就是多去看设计网站，拓展自己的眼界。网络上的设计网站非常多，本章知识拓展介绍一些非常值得经常浏览的设计网站。请扫描本章末的第5章网址二维码，即可查找其官网地址。
(1) 站酷网。
(2) UI中国。
(3) 优设网。
(4) Behance。
(5) Iconfinder。
(6) 花瓣网。
(7) Cupcake。



苹果LOGO设计的坊间传说： 苹果手机或计算机背后的标识是为了纪念奠定现代计算机技术基础的人工智能技术先驱艾伦·麦席森·图灵。1954年6月7日，在诺曼底登陆借助图灵的密码技术取得成功10年零1天后，因被注射激素治疗同性恋而在精神和肉体上饱受折磨的图灵吃了一口沾有氰化物的苹果后死亡。
当斯坦福的两位企业家(史蒂夫·沃兹尼亚克和史蒂夫·乔布斯)为自己新的计算机公司寻找标识时，想起了图灵和他对这一领域的贡献。结果他们选中了被咬过一口的苹果作为公司的标志。
而另一版传说是： 在西方语义里面，苹果不是一种单纯的水果，不是一般意义上的水果，而是一种智慧之果。圣经上就有这么一段，蛇告诉夏娃说： “如果你们吃了智慧树上的果子就会发现善恶有别，就会跟上帝一样，上帝就是因为这个理由而不让你们吃这果子的。”亚当和夏娃就是吃了苹果才变得有思想，现在引申为科技的未知领域。苹果公司的标志是咬了一口的苹果，表明了他们勇于向科学进军、探索未知领域的理想。
那么被咬的这一口，为什么是右边而不是左边呢？它与UI设计的原则有关吗？


谁刻的老鼠最像
某国有两个非常杰出的木匠，技艺难分高下，国王突发奇想，要他们三天内雕刻出一只老鼠，谁的更逼真，就重奖谁，并宣布他是技术最好的木匠。
三天后，两个木匠都交活儿了，国王请大臣们帮助一起评判。
第一位木匠刻的老鼠栩栩如生，连老鼠的胡须都会动，第二位木匠刻的老鼠只有老鼠的神态，粗糙得很，远没有第一位木匠雕刻得精细。大家一致认为是第一位木匠的作品获胜。
但第二位木匠表示异议，他说： 猫对老鼠最有感觉，要决定我们雕刻的是否像老鼠，应该由猫来决定。国王想想也有道理，就叫人带几只猫上来。没想到的是： 猫见了雕刻的老鼠，不约而同地向那只看起来并不像老鼠的老鼠扑过去，又是啃，又是咬，对旁边的那只栩栩如生的老鼠却视而不见。
事实胜于雄辩，国王只好宣布第二位木匠获胜。但国王很纳闷，就问第二位木匠： 你是如何让猫以为你刻的是真老鼠的呢?
其实很简单，我只不过是用混有鱼骨头的材料雕刻老鼠罢了，猫在乎的不是像与不像老鼠，而是有没有腥味。
优秀的UI作品往往在设计过程中需要不断的思维碰撞与纷呈的灵感火花，通过上述材料故事请思考： 
 在UI设计中如何做到“突破陈规、大胆探索、开拓进取、敢于创造”？
 如何平衡在UI设计中作品的新颖美观与业务契合度的关系？
【第5章网址】