本章重点： 界面设计基本概念。
教学目标： 通过本章的学习，了解界面设计基本原则、界
面设计研究范畴和界面设计平台及设计风格。
课前准备： 课前预习本章所讲内容。
教学硬件： 多媒体教室、计算机教室。
学时安排： 本章建议安排4 个课时，任课教师也可根据实
际需要安排。
第1 章 界面设计概述
2 界面设计
本书以移动通信设备界面作为界面设计的教学切入点，所有理论设计和实际操作主要针对移动应用界面
设计。
1.1 绪论
本节内容旨在帮助大家理清界面设计的概念、客户端界面设计内容、界面设计分类和界面设计目标等。
1. 界面设计的概念
UI 设计指对软件的人机交互、操作逻辑、界面美观的整体
设计。UI 是英文user interface 的缩写，直译为用户界面，亦可
称为人机界面。通常指计算机应用程序或操作系统中用户与计
算机或软件进行交互的视觉部分，是在软件或计算机化设备中
以外观或样式为重点的接口制作过程。通过界面确定如何向计
算机或程序发出命令以及如何在屏幕上显示信息，界面是系统
和用户之间进行交互的媒介，用于实现信息的内部形式与人类
可以接受形式之间的转换。
从广义上来说，有针对家用电器的界面、工业设备界面、
计算机操作界面、网站应用界面、移动通信应用界面、软件操
作界面等（见图1-1），而狭义的界面设计特指针对移动应用设
备应用进行的设计。本书重点讲述移动通信应用界面的理论设
计和实际操作方法。
UI 和GUI：一般概念中，UI 包括所有用户（user）与机器（machine）打交道用的界面接口（interface）；
GUI 是指在计算机（computer）出现后，在屏幕上使用图形界面来帮助用户与机器打交道用的界面接口，泛指
在计算机上所作的界面设计。在IT 互联网行业中，两者没有根本差别。
UID：用户界面设计（user interface design）指的是在用户体验和交互的指导下对计算机、电器、机器、移
动通信设备、软件或应用以及网站进行的设计，设计内容包含对软件的人机交互、操作逻辑、界面美观的整体
设计。
界面设计师（user interface designer）：指从事软件的人机交互、操作逻辑、界面美观整体设计工作的人。
不管是汽车中的仪表板计算机、移动应用程序、视频游戏、网站还是虚拟现实界面，界面设计师就是使这些交
互成为可能的人。随着移动应用的爆炸、硬件的商品化、对移动UI 设计兴趣的增加以及对创新桌面应用的持
续需求，人们对UI 设计者的需求越来越多。
图1-1 界面设计适用领域关系图
第1 章 界面设计概述3
App/ 客户端：在智能手机领域中，App 指的是应用程序。客户端是
App 的另一种叫法，也可以连在一起，称作App 客户端。图1-2 中每一
个图标代表着一个App。这些App 都是为了达到一个特定的用途而创造
出来的，如休闲消除游戏宾果消消乐，随时随地发现新鲜事的新浪微博，
大型视频网站爱奇艺，推荐有价值的、个性化的信息的今日头条，即时
通信软件QQ、微信等。
2. 客户端界面设计内容
界面设计包括界面结构设计、界面原型设计、界面图标设计、界面动态效果（界面动效）设计和界面美化设计。
（1）界面结构设计：包括App 中各界面的信息层级关系以及界面内需明确传达的各元素间的关系，这种
关系包含界面中元素的组合、层级、分割等。通过结构设计确保产品逻辑和合理的导航结构。
（2）界面原型设计：通过原型设计演示App 的功能，展示一个简单的可视化操作界面。
（3）界面图标设计：图标是界面间相互链接，完成信息传递的关键内容。界面图标分为标志与按钮，用户
通过形状和色彩了解操作界面中图标的分类。通常界面中工具栏的图标需要与文字信息相结合使用。图标除了
具备功能价值，还会起到传递品牌属性的宣传作用。
（4）界面动效设计：指通过清晰、准确、简洁的表达实现人机交互，形象地描述当前情境，帮助用户理解
上下文、知道当前所在位置。
（5）界面美化设计：直接影响到用户体验度，会给用户留下最直观的第一印象。
一个完整的App 界面通常由多个页面组成。在有些设计软件，比如Axure PR 中，会直接以“某某页面”称呼。
本书中界面泛指所有界面设计内容，具体到某个实际界面，有时称为“某某页面”，比如第5 章中的“探索”页面等。
3. 界面设计分类
界面设计分类标准各不相同，这里我们分为以下三种：
（1）以功能实现为基础的界面设计。交互设计界面最基本的性能是具有功能性与使用性，通过界面设计，
让用户明白功能操作，并将作品本身的信息更加顺畅地传递给用户。
（2）以情感表达为重点的界面设计。通过界面给用户一种情感传递，使用户在接触作品时产生感情共鸣，
强调用户在接触作品时的情感体验。
（3）以环境因素为前提的界面设计。通过历史、文化、科技等元素，营造界面的环境氛围，对信息传递产
生特殊的影响。
4. 界面设计目标
用户界面设计是一项涉及构建用户体验的重要内容。界面设计的目标是创造用户易于使用和愉悦的设计，
界面设计不仅要让软件变得有个性、有品味，还要让软件的操作充分体现软件的定位和特点，使用户在完成自
图1-2 客户端App 图标
4 界面设计
己的任务时与被设计对象之间的交流尽可能地简单和高效。
在界面设计中，彻底了解用户完成任务所处的环境十分必要，界面需要帮助用户直接、毫不费力地实现目
标，使用户尽量忽略必须使用控件与设备进行交互；又或者增加界面设计中的“可爱性”，使用户在使用中感
觉舒适、简单、自由，能够充分沉浸在完成任务的过程中，而不是把精力花费在对系统的操作的理解上。
1.2 界面设计基本原则
1. 提高用户界面设计质量原则
移动应用界面刚刚出现在大众面前的时候，引导用户对新产品、新界面的认识和理解是最重要的，因此界
面的可用性研究比较成熟。针对以可用性为中心的界面设计理论，Constantine 和Lockwood [1] 描述了一系列提
高用户界面设计质量的原则，归纳起来有以下几点。
（1）结构原则。通过应用的目的、意义和可用性判断，建立逻辑清晰、结构一致、易于识别的结构模型。
模型中将关联性强的内容放在一起，并在形式上相似，与不相关的内容进行区分。结构原理与整个用户界面的
体系结构有关。
（2）简单性原则。设计能够使简单、通用的任务简单易行，使用用户熟悉的语言进行交流，提供良好的快
捷方式。
（3）可见性原则。设计应该使完成给定任务的所有需要的选项和材料可见，避免额外冗余信息干扰用户注
意力。
（4）反馈原则。通过用户熟悉的、清晰、简洁和明确的语言向用户传递信息。让用户了解当前的状态、条
件的变化、错误或异常，帮助用户作出判断和决定。
（5）容错原则。界面设计应该是灵活和容错的，通过允许撤销和重做来减少错误和误用的成本，界面容错
性设计通过解释所有合理的操作来尽可能地防止错误，使交流更加流畅。
（6）重复使用原则。界面中的设计元素、行为顺序要重复使用，保证完成任务的一致性，减轻用户思考和
记忆的负担。
移动应用程序界面设计包括许多移动UI 设计指南和设计原则，它们中的一些是通用的，可以应用于所有
应用程序，而另一些则针对特定的业务领域。除此之外，每个平台都有自己的原则，比如在移动应用程序系统
中，应该考虑到Android 的设计原则可能与iOS 不同。
2. 以用户为中心的界面设计原则
随着移动应用迅速普及，用户需求越来越受到重视，以用户为中心（user-centered design）的界面设计方
第1 章 界面设计概述5
法广泛地运用到了界面设计中。“以用户为中心的设计”一词起源于唐纳德·A. 诺曼在加利福尼亚大学圣地亚
哥分校的研究实验室，它与其他产品设计理念的主要区别在于，以用户为中心的设计试图围绕用户能够、想要
或需要如何使用产品来优化产品，而不是强迫用户去适应[2]。诺曼认为，一个好的产品设计应该做到：
（1）简化任务的结构，使得可能的动作在任何时刻都是直观的；
（2）使事物可见，包括系统的概念模型、动作、动作的结果和反馈；
（3）在预期的结果和所需的动作之间获得映射；
（4）能够足够支持和利用系统的约束。
确保设计以用户为中心的原则是 [3]：
（1）该设计基于对用户、任务和环境的明确理解；
（2）用户参与整个设计和开发过程；
（3）设计以用户为中心的评价驱动和细化；
（4）这个过程是迭代的；
（5）该设计解决了整个用户体验。
1.3 界面设计研究范畴
1.3.1 网页UI 设计
网页UI 设计根据网站需要传递的信息（包括产品、服务、理念、文化），确定布局、颜色、文本样式、结
构、图形、图像以及向用户提供界面的交互式功能的使用。网页设计一般分为三大类：功能型网页UI 设计（服
务网站或软件用户端）、形象型网页UI 设计（品牌形象网站）、信息型网页UI 设计（门户网站）。
图1-3 所示的网页登录界面和图1-4 所示的部分主界面，包括安装引导界面等都属于功能型网页。
图1-3 网页登录界面
（a）百度登录界面（b）个人数字图书馆登录界面
6 界面设计
图1-5 所示为形象型网页界面，其中图1-5（a）所示为纽约大都会艺术博物馆（MET）首页，提供各类珍
贵文物和艺术品的赏析；图1-5（b）所示为MARVEL 官网，展示漫威人物视频等。这类网站界面倾向于形象
型网页，重点以介绍相关内容和突出展示自身形象特点为目的。
图1-6 所示为信息型综合门户网站，这类网站首页提供综合性互联网信息资源，分类较多，信息量大，包
含内容全面，并提供有关信息服务的应用系统。
图1-4 网页主界面
（a）福昕PDF 阅读器主界面（b）百度网盘主界面
（b）MARVEL 官网
图1-5 形象型网页界面
（a）纽约大都会艺术博物馆首页
第1 章 界面设计概述7
1.3.2 移动端UI 设计
移动端UI 设计指专门针对智能手机和平板电脑的应用界面的设计。
图1-7 展示了两款移动端App 界面，常见的移动应用有：最简单的预安装应用程序，包括日历、笔记、录
音机等；具备GPS 定位功能的程序，包括地图、导航、天气等；社交应用程序，包括QQ、微信、豆瓣等；多
媒体工具应用程序，用于捕获、编辑和查看图像，播放音频和视频文件，存储这些文件并在社交网络中共享，
包括美颜相机、爱剪辑、快剪辑等；游戏类应用程序，包括棋盘游戏、纸牌游戏、拼图和教育游戏、动作和运
动、策略和RPG 等；休闲和生活方式应用程序，致力于自然、历史、时尚、健康和园艺等方面。
图1-6 信息型综合门户网站
图1-7 移动端App 界面
（a）QQ 音乐（b）问画
8 界面设计
1.3.3 智能设备UI 设计
智能设备包括具有内部计算能力的机器、仪器或任何其他设备。目前智能设备的种类很多，包括个人和手
持计算机、汽车、家用电器、地质设备、医疗仪器和设备、飞机、武器、照相机、可穿戴设备等。图1-8 所示
为人工智能产品界面，图1-9 所示为医疗健康智能设备界面，图1-10 所示为智能冰箱，图1-11 所示为智能魔方。
1.3.4 游戏及其他领域UI 设计
游戏界面指游戏和玩家之间的界面。在电子游戏中，通常认为界面是用户阅读的屏幕上的视觉组件（动画、
文字、声音、文本等）和用户交互的视觉区域（移动的角色、按下的按钮等）。图1-12 所示为智能游戏界面。
图1-8 人工智能产品界面图1-9 医疗健康智能设备界面
图1-10 智能冰箱图1-11 智能魔方图1-12 智能游戏界面
第1 章 界面设计概述9
1.4 界面设计平台及设计风格
1.4.1 智能手机及其平台发展历程
移动界面的发展和智能手机及其使用平台的发展历程密切相关。
智能手机的发展大致可分为20 世纪90 年代智能手机刚刚问世的“黎明期”、2000—2006 年商务智能手机
繁荣发展的“商用机扩大期”，以及2007 年以后逐步走进普通消费者视野的“大众普及期”。本书所讲的移动
界面设计是指2007 年以后的智能手机界面设计。
2007 年1 月，苹果公司首席执行官史蒂夫·乔布斯（Steve Jobs）发
布了iPhone 手机，搭载苹果公司研发的iOS 操作系统，见图1-13。这款
手机配有几乎所有操作都以触摸屏完成的用户界面，基本与个人电脑相
同的Web 浏览器和电子邮件服务，以及与iTunes 联动的音乐播放软件等，
从而将智能手机提高到任何人都可以使用的水平。虽然第一代iPhone 缺
少对3G 的支持，只能通过Web 发布应用程序，但是其以简洁美丽的外
观、流畅的操作系统受到广大用户的极度欢迎，iPhone 引领智能手机进
入了市场的爆发期。
2007 年11 月，谷歌宣布免费提供Android 手机操作系统，任何人都
可以使用并改变它。默认情况下它可以进行搜索、电子邮件和视频服务。
Android 的主管安迪·鲁宾（Andy Rubin）认为将会有成千上万的谷歌手
机（指搭载Android 系统的手机）。
2008 年10 月，苹果公司宣布，它在夏季销售了470 万部iPhone，
占智能手机市场的近13%。
2008 年11 月，第一部Android 手机G1 面世（见图1-14），它有一
个滑出式键盘，具有有限的触摸屏功能。
2008 年12 月，微软开发出一款全新的移动操作系统Windows Phone。
2010 年2 月，出现了与iPhone 一样的全触摸屏互动Android 手机。
2010 年，苹果推出iPhone 4，成为世界上最热卖的智能手机。同时，Android 阵营不断扩大，成为全球第
一大智能手机操作系统。
2011 年1 月，加特纳（Gartner，IT 咨询公司）和IDC（互联网数据中心）宣布，在2010 年的最后三个月里，
智能手机在全球的销量超过个人电脑——分别是1 亿台对9300 万台。
2016 年第四季度，iPhone 智能手机销量达到7830 万部。然而，Android 的开放架构允许它被整合到众多
开发者的手机中，它拥有更广泛的为操作系统生产手机的制造商。
图1-13 第一款iPhone
图1-14 第一部Android 手机
10 界面设计
1.4.2 移动应用界面设计风格发展历程
许多应用在开始时是作为一个网页应用提供服务的，在Web 2.0（2003—2010 年）期间，界面上会设计超
大尺寸的图形训练用户“单击这里”和“学习更多”，以指引用户正确使用。
（1）拟物设计（2010—2012 年）：即界面设计提取设计对象的功能特征，是一种把物体的视觉特性融入数
字设计的设计风格。并以装饰的方式重新创造它们，目的是唤起与应用程序、小部件、工具等熟悉的感觉。并
以纹理、光和颜色相结合，创造一种深度感和现实感。
（2）扁平化设计（2012—2014 年）：其特点是消除了用户界面中没有显著价值或用途的图形元素，简洁是
关键，避免使用渐变、纹理、浮雕等装饰元素。这种风格利用开放空间、明亮的颜色、锐利的边缘和二维插图，
重点强调可用性。省略复杂的图形意味着用户较少分心，并且可以专注于内容。这种样式适合所有类型的应用
程序，无论是在桌面上还是在移动屏幕上查看，平面设计都清晰易懂、适应性强。
（3）Material Design（2014— ）：这是Google 2014 年发布的全新的设计语言，这种设计语言旨在为
Android 手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”的全平台设计语言规范。
其设计特点包括：材质隐喻、大胆夸张、动效表意、灵活、跨平台。
App Store 刚推出时，呈现玻璃质感的闪亮图标方兴未艾，随着iOS 应用程序的成熟和UI 审美趋势的发展，
光泽图标统治的时代已经一去不返。随着设计者和开发人员不断更新指导方针和进行更多的设计实践，丰富的
细节和更为克制的色彩选择已经慢慢成为新的趋势。
1.4.3 界面设计流行趋势变化
在遵循基本界面设计原则的基础上，每年都会有关于界面设计风格、布局、图标、字体、色彩搭配等元素
的应用预测或总结，由于硬件的升级、平台的扩展、用户需求的提升等原因，界面应用种类丰富，设计风格变
化多样，设计流行趋势会受到媒介、技术、时尚业和最近可用性的影响。下面列举2016、2017、2018 三年的
界面设计流行趋势。
1. 2016 年界面设计特征
1）Material Design
Material Design 是2016 年最热门的移动应用界面设计趋势之一。它的开发目的是提高跨平台的用户体验，
使其更加统一、简单和直观。
Material Design 的根源在于扁平化设计的概念，扁平化设计是近几年来不断发展的趋势，已经成为界面设
计的标准。在过去几年中，扁平化设计概念经历了一些变化，包括采用其他设计风格的概念，但总体外观或多
或少是一样的。