用户界面设计

数字媒体艺术为艺术设计领域的新兴专业，该专业涵盖了设计、艺术、科技的前沿领域，适应时代趋势下与艺术领域结合的新媒体技术、数字信息传播与视觉转化、移动通讯终端研发、交互媒体设计与人机工程设计等方面所需要的人才的培养。本丛书的宗旨是在日趋繁荣的数字媒体艺术市场的背景下，培养适应社会主义现代化建设和科学技术发展需要，能满足市场经济需求，能从事数字媒体艺术与设计行业的相关人才。 本丛书主要从用户界面设计、动态图形设计、数字影像艺术设计、信息与服务设计等多媒体设计的领域着手，研究并发展出具有独立审美价值的、有时代特色的新艺术形式，指导读者创作用各种数字、信息技术制作的新形式的艺术与设计作品。本丛书还将配套数字资源，植入书中相关讲解的部分，将更好、更全面、更直观地展示数字媒体艺术的案例或者内容拓展。

随着人工智能时代的到来，用户界面（UI）设计作为不可或缺的一个重要环节，在整个交互过程中变得更加具有时代的重要意义和价值。无论是以触摸为主的实体用户界面, 还是以视知觉为主的虚拟用户界面，甚至是在以声音、光线、温度等更加宽泛的感知维度为主的交互开发中，作为人机交互的接触通道——用户界面，都会是不可或缺的重要组成部分。同时，这些多重的维度也突显了其跨专业、跨学科的整合趋势，以及全面、专业、高素质的跨学科优秀设计人才培养的社会需求。
在视觉传达设计教学中，用户界面设计作为一门设计课程已经有二十多年的历史，并且随着数字科技的进步和发展，其内容的迭代更新也不断加快。编者在结合多年的教学和实践经验之上，以全面的视角来分析用户界面设计。本书共七章：第一、二章通过概述交互设计的历史演变来分析用户界面设计与整体的交互程序之间的关系，进而总结出与用户界面设计相关的影响因素，这些显性和隐性的影响因素涉及心理学、生理学、社会学、计算机科学等多个领域，为用户界面设计带来诸多的衡量标准；第三、四章以交互设计的功能需求作为导向，运用系统的方法论来探讨信息传递的逻辑关系和整体框架的搭建，并通过导航栏在整个交互程序中的关键作用体现出来；第五章从用户界面设计的视觉表达出发，探讨在用户界面设计中各个视觉组成要素的设计方法；第六章从交互终端的属性出发来探讨其物理属性与用户界面设计之间的关系；第七章以用户的体验为着眼点来检验和把握用户界面设计，通过用户的反馈来修正和完善整个设计过程。通过本书可以使读者对用户界面设计形成清晰的、全面的认识。同时，本书的大部分插图来源于教学实践，借此来加强本书的实用性。
本书由杨兆明任主编，毛彤、王爽任副主编，参加编写的还有宗诚 、刘亚璇、 张融雪、白新蕾、刘骁、孙一男、刘丹、董平。在此特别感谢为本书提供宝贵意见及插图的参编教师和鲁迅美术学院视觉传达设计学院 2019 级的相关同学。最后，本书为拓展数字内容，还提供了大量的用户界面设计案例供读者参考。由于编者水平有限，疏漏与不足在所难免，敬请指正。

编者
2022年1月

杨兆明，讲师，任职于鲁迅美术学院大连校区视觉传达设计学院。作品曾入选第12届日本富山国际海报三年展、香港国际海报三年展、第24届捷克布尔诺国际平面设计双年展、第七届首尔—亚洲海报展、“GDC09平面设计在中国”等国际设计赛事；从事专业教学10余年，主要研究方向为标志与VI视觉系统（涵盖动态设计及UI用户界面设计），版式与书籍设计，图形与海报设计。

当今多种设备终端并用的环境对用户界面设计提出了更高的要求，用户界面设计不仅需要考虑不同大小的屏幕尺寸，同时还要呈现出统一的风格和完善、合理的功能需求。本书从信息构架的梳理与建构、界面设计的形式表达、屏幕的物理特性等角度对用户界面设计的方法进行了梳理。本书将视知觉的基本原理与设计思维、用户的使用体验相结合，意在探索更合理、好用的设计方法，使读者能更全面深入地理解用户界面设计。
本书适合高等院校艺术设计相关专业师生阅读和使用，也可作为设计爱好者的参考用书。

第一章 交互设计与用户界面 001
第一节 沟通技术和用户的操作界面 002
一、从功能面到社群面 003
二、优良的交互设计系统 003
第二节 交互设计的发展 005
一、鼠标与桌面系统开发 005
二、个人计算机时代 009
三、电脑多样化 011
四、周边产品开发 012
五、智能手机的整合 013
第三节 实体用户界面和虚拟用户界面 014
一、图形用户界面 015
二、物理感知用户界面 015
第四节 交互设计的程序 016
一、从设计师的角度出发：交互设计的标准模式 016
二、理解交互设计的角度 017
三、交互设计程序 018
第五节 交互设计的核心及领域 019
一、交互设计的核心 019
二、隐性知识 019
三、应用领域 020

第二章 提升用户界面设计质量的方法 023
第一节 格式塔原理在用户界面设计中的运用 024
一、格式塔原理 024
二、格式塔原理的综合运用 026
第二节 优化视觉结构和层次 030
一、通过结构关系的建立来优化信息的识别 030
二、数据专用控件有利于信息的高效识别 030
三、视觉层次的建立有助于信息的高效阅读 030
第三节 影响阅读质量的因素分析 032
一、阅读模式 032
二、影响阅读质量的因素 032
第四节 认识视觉的原理 034
一、认识我们的色觉 034
二、大脑的减法处理 034
三、区别颜色的局限性 034
四、色彩使用准则 035
第五节 关注阅读的黄金区域：中央与边界视野比较分析 036
一、中央凹的分辨率与边界视野的分辨率比较 036
二、边界视觉的作用 037
三、电脑用户界面举例 037
四、信息清晰可见的处理方法 039
五、加重强调的功能 041
第六节 记忆力和注意力对用户界面设计的影响 042
一、记忆力 042
二、注意力 045
第七节 响应度 049
一、响应度的定义 049
二、大脑的时间常量 049
三、响应度对交互设计的意义 050
四、高响应度的表达方式 051

第三章 信息的架构空间与阅读 053
第一节 链接带来的逻辑关系 054
一、静态网站和动态网站 054
二、网络编程语言 054
第二节 信息的横向空间、纵向空间以及相互关系 056
一、结构与内容体系 056
二、超链接 056
第三节 视觉画面背后的信息技术 058
一、层叠样式表 058
二、超文本预处理器 058
三、JavaScript 编程语言 058
四、矢量动画软件 058
第四节 网页的建构模块与视觉元素之间的关系 060
一、网页建构模块 060
二、图片的应用 060
三、网络中的色彩关系构建 060
四、网络安全字体 061
第五节 树状架构 062

第四章 承载架构的导航栏 065
第一节 导航栏的位置及类型 066
一、导航栏的角色 066
二、导航栏的类型 066
第二节 面包屑导航栏 067
一、概述 067
二、面包屑导航栏的分类 067
第三节 全局性导航栏和区域性导航栏 068
一、全局性导航栏 068
二、区域性导航栏 068
第四节 相关性导航栏 069
第五节 导航栏与层次关系：水平与垂直 070
一、分析比较两种类型 070
二、在导航栏中表达层次 070
第六节 固定导航栏与灵活导航栏 072
一、固定不变的位置 072
二、固定起点 072

第五章 交互的信息结构与视觉表现 075
第一节 横向、纵向的空间架构 076
一、虚拟的空间关系 076
二、掌握和理解空间位置关系 076
三、视觉元素有助于体现页面的前后关系 077
四、利用交互带给用户的潜意识来定位框架关系 077
五、框架结构的深度与广度 077
第二节 版式设计在用户界面设计中的应用 080
一、 栅格 080
二、用户界面中的视觉元素 080
三、分栏及页面编排 084
四、信息层次体系 086
五、观众阅读时的视线变化 086
第三节 响应式网页设计 088
第四节 交互设计的一致性与灵活性 090
一、交互设计的一致性 090
二、交互设计的灵活性 090
三、一致性与灵活性的整合 091
第五节 图示与图标 092
一、矢量图形 092
二、图形的概括与简化 092
三、图标的形象性 093
四、从单个元素图标到复合元素图标 096
五、两个元素图形在固定单元背景中的位置关系 098
六、发生重叠关系的轮廓线特征 099
七、图标表现语言 101
八、图标中图形构成方式 106
九、图标表现风格借鉴 108
十、多元图标 114

第六章 用户界面设计中的影响因素 121
第一节 设备终端的物理性限制 122
一、屏幕尺寸 122
二、输入方式 123
第二节 视觉元素的限制 123
一、文字资料的特性 123
二、图片的特性 124
三、图片的矢量化趋势 124
第三节 滚动的方向性与翻页 128
一、滚动的方向性 128
二、页面滚动与翻页 129
第四节 与设备互动的方式及反馈 130
一、鼠标的操作与反馈 130
二、触摸屏与反馈 130
三、遥控器与反馈 131
第五节 无缝界面 131
第六节 界面衔接的表达技巧 132
一、滑动式界面设计 132
二、覆盖式界面设计 133
三、嵌入式界面设计 134
四、滚动式界面设计 136

第七章 交互设计体验 139
第一节 易于理解的、愉快的交互设计体验 140
一、二维平面结构与多维交互结构 140
二、运用原型进行用户体验 141
三、 真机测试 141
第二节 用户界面设计的评价标准 144
一、没有烦琐和冗余 144
二、用户界面自然流畅 144
三、应用共识性的交互准则 144
四、视觉设计的一致性 144
五、色彩的运用 147
六、标题字体及图形字体设计 149
第三节 多元的网络交互平台 150
一、商品类网页 150
二、信息类网页 151
三、时尚类网页 151
四、趣味性网页 152
五、个性网页 152
第四节 电子读物 154
第五节 经典案例分析 155
一、Frog 团队案例分析 155
二、分享未来“视界” 158

参考文献 160