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