| 第1章 |
UI设计基础







GUI(graphical user interface,图形用户界面)又称图形用户接口，是指采用图形方式显示的计算机操作用户界面。UI(user interface)设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。从进入机器生产时代，UI的概念就已经产生了，随着社会科技和生活的进步，以及用户对美好生活的向往，UI的概念逐渐健全与完善。
◎ 学习目标
(1) 理解PC端UI设计与移动端UI设计的区别。
(2) 理解响应式网页设计与自适应网页设计。
(3) 了解UI设计规范。
(4) 理解交互设计和用户体验。
(5) 了解UI设计风格。
(6) 了解经典设计法则在UI设计中的应用。
(7) 掌握色彩知识。
(8) 认识构建一套UI设计规范的重要性。

◎ 基本技能
(1) 版式设计。
(2) 色彩应用。






1．1认识UI
UI（user interface)即用户界面。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计主要包括三个部分： 交互设计、用户研究和界面设计。视觉上看到的设计包括图标、App界面、软件、网页、按钮、游戏界面。

1．1．1PC端设计与移动端UI设计的区别

科技飞速发展，互联网已成为我们生活中必不可少的一部分，手机、计算机等智能终端在我们的生活中如影随形，UI设计行业发展朝气蓬勃。因载体的不同， PC端UI 设计和移动端UI设计存在一些异同，具体见表11。移动端交互手势如图11所示。



表11PC端UI设计与移动端UI设计的区别



UI设计PC端
移动端
屏幕尺寸
屏幕尺寸相对较大(19~24英寸)
屏幕尺寸相对较小(5~5．5英寸)
系统支持
Windows、Mac OS
iOS、Android
交互方式
鼠标单击、双击、滑动等
手指点击、上下滑动、长按、左右滑动和单指操作(如图11)
精准度
鼠标指针很小，精准度非常高
手指的精准度低于鼠标指针
图标或按钮
PC端图标尺寸是移动端的1/3或1/4
以屏幕尺寸为1080×1920像素(小米3)为例，
启动图标尺寸为144×144像素
设计显示区域
网页中的UI设计首页内容较多，可减少层级
屏幕显示尺寸有限，每页放置内容有限，增加层级页面可将信息内容完整展示



图11移动端交互手势



1.1.2响应式网页设计与自适应网页设计
新型设备不断增加，旧型设备依然存在，这种快速发展及日趋加剧的互联网设备多样化，使得网页设计不再有标准的屏幕尺寸。基于一个固定尺寸对界面进行设计，已无法满足用户设备多样化的需求。
根据不同设备环境自动响应及调整、在不同大小的屏幕分辨率上可以呈现相同页面，这种全新的布局设计思维模式，不是为每个终端做特定的版本，而是为不同的终端用户提供更加舒适的界面和更好的用户体验，这种概念称之为“响应式网页设计”。
响应式网页设计可以使一个网站兼容多个不同终端。
通俗来说，自适应网页设计也是响应式网页设计，响应式网页设计也是自适应网页设计。但是真正细分起来，自适应只是响应式的一个子集，指网页中整体大图的自适应或者banner的自适应。
理论上来说，响应式网页设计在任何情况下都比自适应网页设计好一些，但在某些情况下自适应布局更加实用。
流体网格的网站适合响应式网页设计，响应式网页设计优势如下。
（1） 面对不同分辨率的设备灵活性较强。
（2） 能够快捷解决多设备显示适应问题。
固定断点的网站适合自适应网页设计，自适应网页设计优势如下。
（1） 代价更低，测试更容易，这往往让它们成为更切实际的解决方案。
（2）  自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了。
虽然响应式、自适应网页设计为兼容各种设备会带来工作量大、代码累赘、加载时间长的缺点，但它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。
响应式网站举例如图12所示。



图12响应式网站举例

1．1．3UI设计基础概念
从事UI设计需要理解物理像素、逻辑像素、倍率的含义。
（1） 屏幕由许多个像素点组成，每个点发出不同颜色的光，构成人们看到的画面。像平时人们熟悉的iPhone 6S屏幕就是由750行、1334列像素点组成的矩阵图。设计师作图所用的分辨率就是指物理像素，单位为px。
(2) 逻辑像素又叫逻辑点，是控制屏幕内容显示多少的单位，单位符号为pt。
程序员在开发环节必须将设计师提供的物理像素转换成逻辑像素，并通过逻辑像素控制页面显示哪些内容。不同设备逻辑像素与物理像素的比例是不同的。每个设备的物理像素都是固定不变的，我们调节显示器的分辨率其实调节的是逻辑像素。
物理像素在硬件层面构成了液晶屏幕，逻辑像素在软件层面构成了画面图像。
(3) 倍率。倍率=物理像素数/逻辑像素数。如果1个逻辑像素对应1个物理像素，则1pt=1px中，倍率为1x； 如果1个逻辑像素对应1．5个物理像素，则1pt=1．5px，倍率为1．5x； 如果1个逻辑像素对应2个物理像素，则1pt=2px，倍率为2x； 如果1个逻辑像素对应3个物理像素，则1pt=3px，倍率为3x，如图13所示。



图13逻辑像素(软件)与物理像素(设备)的对应关系


那么iOS设计时应选择何种倍率？如图14所示。



图14设备像素缩放比

选择倍率要从开发换算、设计成本、效果查看、倍率转换、切图五个方面综合选择。
1． 开发换算
程序员拿到设计师提供的标注图以后，需要将标注中的物理像素转换成逻辑像素，即将px转换为pt,这里便涉及换算的问题。通常设计图中元素尺寸在三位数以内，对于一般人而言三位数以内除以1最容易，2其次，3最难。本轮排序1x>2x>3x。
2． 设计成本
在2x逻辑像素下，列表高60px，头像高51px，二者不可能刚好居中对齐，势必偏移1px，手机实际显示偏移2px； 在3x物理像素下，列表高150px，头像高100px，转换到1x逻辑像素，100不能被3整除，势必造成偏移。为保证落地效果，1x倍率下尺寸必须为偶数，2x倍率下尺寸必须为4的倍数，3x倍率下尺寸必须为6的倍数。本轮排序1x>2x>3x。
3． 效果查看
人们通常会将效果图导入对应设备中进行查看，目前主流设备都采用2x或3x倍率，1x的设计图在主流设备上成倍放大的同时，分隔线、描边线也会成倍地放大，如果不对这些细节进行二次调整，终端效果会很不理想。由于2x、3x之间等比缩放跨度不大，故而逻辑像素相同的两个2x、3x可以直接查看彼此的效果图，3x比2x效果好些。本轮排序3x>2x>1x。
4． 倍率转换
1x转换2x、3x极为方便； 2x转换为1x需要除以2，转换3x需要乘以1．5，较为便捷； 3x转换2x需要除以3乘以2，转换1x需要除以3，比较烦琐。本轮排序1x>2x>3x。
5． 切图
1x设计图必须另外导出2x、3x两套切图，2x设计图导出3x需放大1.5倍，3x设计图导出2x需要除以3再乘以2。本轮排序2x>3x>1x。
综合比较分析，只有2x倍率设计图方便向上向下适配转换。
那么在确立iOS设计尺寸以后，Android是否需要另出一套图呢?答案是看需求，可以一稿配双平台。在2x倍率下，iOS有640×1136、750×1334、750×1624三种主流分辨率，Android统一为720×1280，两个平台采用相同的App设计规范，逻辑像素换算方式一样，程序员会根据同一份标注图进行开发，实现页面中元素尺寸完全相同。在iOS三种尺寸中，750×1334最接近720p，宽度仅相差30px，相差比仅为0．04，适配无差别，故而可以一稿配双平台。如果对实现效果要求较高，就需要按720×1280再出图。如图15所示。



图15设备像素显示效果

1．1．4UI设计常用工具
1． Adobe Photoshop CC

Adobe Photoshop CC是一款优质的专业图形图像处理软件。它拥有非常强大的功能，包括新增的自动人脸识别、指导编辑、前景/背景抠图等，可以为用户提供高效便捷的图像处理手段，大大提高了工作效率和工作质量。如图16所示。



图16Adobe photoshop CC 启动界面

2． Adobe illustrator CC
Adobe illustrator CC，常被简称为Ai，是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件。如图17所示。



图17Adobe illustrator CC 启动界面


作为一款矢量图形处理软件，主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，也可为线稿提供较高的精度控制，从小型设计到大型复杂项目设计均适用。
注： Adobe公司产品会不定期进行版本更新，本书制作案例所使用版本为Adobe Photoshop CC、Adobe illustrator CC。由于软件内所使用工具较为常见，通常情况下，更新版本变化较少，不会影响读者后期学习制作案例。
1．2UI设计与用户体验概述
UI设计师不仅要能设计出精致的图标、美观的界面，还要最大限度地提升用户体验，通过色调影响用户的操作习惯，用颜色或图形明确产品功能、内容的主次和展示，降低用户的记忆负担，让软件操作变得舒适、简单、自由。
1．2．1交互设计是什么

为什么人机“交互”需要“设计”？交互设计(interaction design，IxD)被定义为“对于交互式数字产品、环境、系统和服务的设计”。交互设计定义人造物的行为方式，即人工制品在特定场景下的反应。
交互设计建立了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。
作为UI设计师，在视觉设计层要考虑布局和交互原则，以使用户界面更友好，所以，视觉设计师是交互设计中非常重要的角色。如图18和图19所示。



图18UI控制面板示例




图19UI指南针界面示例

1． 使用场景
使用场景是根据产品的功能和平台决定的。PC端的使用场景是正襟危坐、手持鼠标，而移动端则是随时随地使用，用户可能在地铁里、在吃饭时使用，甚至在辗转反侧睡不着时没有开灯地浏览等。
2． 操作手势
PC端目前主要依靠鼠标操作，鼠标控制的最小单位甚至可以是1像素； 移动端设备中用户使用手指操作界面。
1．2．2UX(用户体验)设计概述
1． UX(用户体验)的构成

从软件产品层面来讲，UX主要是指能够直接与用户交互的用户界面。用户界面是用户对产品的第一印象，因此，如果产品开发者将设计部分委托给设计师来制作，若不详细列出要求，产品功能的原意往往会被曲解，这种事情经常发生。所以，产品开发者在列出的要求中，应包含产品的所有要素(用户需求、商业目标以及技术需求等)。
有一个非常著名的模型能够清楚地解释UX的构成。用户只能看到表现层的用户界面，但只要剥离了用户界面，就能看到下面的框架层。支撑框架层的就是再下一层的结构层，结构层来自范围层，而范围层的基础就是战略层——这就是加瑞特倡导的“用户体验要素”。
通过图110 UX用户体验要素模型不难看出，用户界面这一表现层所能体现的内容是非常有限的，多数和UX相关的内容必须从框架层和结构层来了解。在某些情况下，甚至必须返回到最根本的战略层来考虑。



图110UX用户体验要素模型


UX由战略层、范围层、结构层、框架层、表现层五层组成
加瑞特(Jesse James Garrett).用户体验要素： 以用户为中心的产品设计(原书第2版).范晓燕，译.北京： 机械工业出版社，2011.。
UX不是在完成产品开发后再下功夫也能做好的。如果没有从最初的企划阶段开始一步步积累，就实现不了优秀的用户体验。
2． UX (用户体验)的实现方法
使用UCD(user centered design，以用户为中心的设计)思想设计UX，可以避免在考虑问题、设计产品时过于注重技术(即技术优先)，从而更好地从用户的角度出发设计产品。
因为UCD只是一种设计思想，并不代表实际的操作方法，所以开发流程会因开发对象的产品、开发团队以及开发环境的不同而不同。因此，有实际经验的工作人员和研究人员各自开动脑筋，开发出了许多UCD的变种。但这些变种的UCD都具有相同的框架层，如图111所示。
(1) 调查： 把握用户的使用状况。
(2) 分析： 从使用状况中探寻用户需求。
(3) 设计： 设计出满足用户需求的解决方案。
(4) 评测： 评测解决方案。

界面设计




第1章UI设计基础





-0-

-0-

(5) 改进： 对评测结果做出反馈，改进解决方案。
(6) 反复： 反复进行评测和改进。



图111UCD(以用户为中心的设计)流程



UCD从把握用户需求开始，反复进行评测和改进，以达到提高UX品质的目的。UCD的存在并不是为了应对用户提出的“我们需要这样的功能”“这部分希望能改成这样”等要求和不满。
首先，设计师需要通过观察用户以及进行用户访谈等手段，把握用户的实际使用情况，从而挖掘潜在的用户需求。
其次，设计师需要考虑实现用户需求的方法。此时需要的并不是立刻实现开发团队的创意，而是先制作一个简单的模型，然后请用户使用这个模型，评测该创意的可行性。
如果在评测时发现了未能满足用户需求的地方，就要改进模型。然后把改进后的模型交给用户，再次评测改进方案的可行性。通过这样循环往复地评测和改进，逐渐完善用户体验。
3． UCD的要点
1) 流程的质量
设计用户界面并没有什么秘籍，无论技术多么高超，读过多少本指导书，都是不够的。只有遵循优秀的流程，才能做出优秀的界面。
但是不能简单地理解为“只要遵循了流程就完全没问题了”。进行过怎样的用户访谈，做过怎样的分析，制作了怎样的产品模型，做过怎样的测试，如何改进——这些步骤都是制作出优秀的用户界面重要的环节。
2) 螺旋上升的设计流程
UCD虽然要经过反复的评测和改进(反复设计)，但并不意味着返工。在过去的直线型设计流程(以瀑布模型为代表)里，原则上绝不允许返回到上一个步骤，但是UCD从一开始就注定会是一个“螺旋上升式”的开发流程。
为了在最短的时间内，以最低开销进行反复设计，我们可以从手绘的用户界面开始，一边逐渐完善用户界面，一边反复进行评测和改进。