用户界面设计

杨兆明，讲师，任职于鲁迅美术学院大连校区视觉传达设计学院。作品曾入选第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

第一节 易于理解的、愉快的交