UI进化论——移动设备人机交互界面设计

• 书名：UI进化论——移动设备人机交互界面设计
• 丛书名：无
• 作者：周陟   编著            
• ISBN：978-7-302-21686-5
• 定价：88元人民币
• 出版日期：2010-1-1
• 版次：2010-1-1第1次印刷

当当网购买

卓越网购买

中国互动出版网链接：http://www.china-pub.com/196308

作者简介：

周陟中国数字艺术奖全国巡展受邀 数字图形设计 参展上海“出街”国际艺术设计展；受邀平面招贴 参展新西兰GOUW设计师平台推荐WEB设计师；E-motional design, k10k, 美国Visualizer艺术平台作品收录推荐。曾担任中域网美术指导，有着丰富的互联网产品设计开发经验，曾参与策划设计国内大型手机电子商务平台中域网（www.zhongyu.com），同时作为中国设计联盟（www.cndu.cn）的资深合作伙伴，编写了《数字图形设计风云:双人构想》、《设想》等畅销书籍。《computer arts》亚洲区杂志推荐设计师。

内容简介：

本书内容涵盖交互设计与界面设计的基本概念、设计规范和工作流程。由于这是一本以实际工作案例和工作经验为主的书，一开始着力介绍目前最新发展的交互手段和使用场所，当然是以移动手持设备为主。作为设计师，一定要关心如何将这些创意产品化。接下来介绍如何正确地将一个设计想法变成产品。产品化的过程中，用户体验设计是相当重要的，由于UCD设计思想的广泛使用，本书重点研究并分析用户体验设计的可行性和方法。视觉设计是普通大众直接接触产品设计核心的介质，本书将使用初级→高级→复合型的综合设计案例介绍如何设计出让人喜爱的视觉作品。最后，还说明了一些产品的完整设计案例，展示一个移动手持设备交互和界面设计的全过程。

本书不但有大量的文字内容，也有配套的DVD光盘，其中包含了作者录制的设计视频教学和本书操作实例素材及最终文件。

本书适合移动UI设计师迅速进入职场角色，也可供平面设计人员、交互设计人员和对UI设计感兴趣的读者阅读和参考。

前 言

建议读者在阅读本书前可以先看看这个部分， 很多本书的重要说明与信息都将在此呈现。本书有配套的DVD 光盘， 其中包含了作者录制的设计视频教学以及本书实例的素材和最终文件。（ 它们来自于著名视频分享网站*** 和相关产品的终端厂商官方网页）。

在此感谢手持设备设计行业中从事交互界面设计的前辈与领袖， 他们的专业知识和经验让作者能更好地阐述本书中的设计思想。感谢所有在互联网上无私展示优秀作品的设计师， 他们的部分作品让本书的读者更贴切地了解到何谓优秀的交互界面设计。特别感谢CK Telecom UI 部全体工作同仁， 由于他们的优秀作品才使得本书的第四部分显得更为饱满。写作目的对于行业人机交互设计和界面设计从来没有今天这般兴盛， 行业内各个大型协会与小型组织的交流互动， 使得这个行业的上、中、下游组成部分更加了解这个学科和它能够带来的价值， 而他们积极投身其中的行动和广大爱好者的激情， 正是本书的创作初衷。

本书的作者同样是该行业的实践者， 然而行业体系庞大， 组成复杂， 因此， 作者只能挑选自己熟知，并在当下极具市场价值的某个环节进行阐述， 以便将自己的一些经验和收获与读者分享。

选择手持设备这个领域作为本书的重点， 并非偶然， 首先本书作者就是该领域的资深设计师； 其次，手持设备的日益发展与功能聚合， 使得它在信息化的今天， 成为极重要的工作、生活和娱乐设备。

本书中， 作者也展示了当今行业前沿的发展动态与技术的更新交替， 以行业的视角关注设计本身， 使得书中的案例与流程具有更实际的意义。

对于企业本书作者不仅拥有国内知名IT 公司与通信设备公司的设计工作经验， 也很多中、小型企业有过深入的设计合作， 其中的工作经验与技巧对本土企业中的工作同仁具有实际的参考价值。

中国企业本身对于交互设计与界面设计的特殊理解， 团队的阶梯式发展， 其中的人文因素和技术问题， 作者都亲身经历， 相信这些知识的分享会尽量保持客观。在书中， 作者展示了大量的实际工作操作经验， 有些甚至是教训（ 出于隐私考虑， 书中不会公布公司的名称和项目的详细情况）， 但我相信这些经验具有普遍性意义。

本书的分析、指导和教学， 都将以实际工作为主， 理论研究和晦涩难懂的专业用词尽量避免， 让本书成为读者工作中的一本参考书籍或实用手册。

对于个人交互设计和界面设计是针对人的设计（ 其实有哪种设计不是如此？）， 是研究用户和观众的设计， 是大量运用心理学、市场营销学、信息处理技术、社会工程学等综合知识的设计手段。

用户如此重要， 以至于我同样希望普通受众和非从事该领域工作的用户也能看懂这本书， 了解一个产品的核心设计过程，提高分辨优秀产品和庸俗产品的能力，请不要害怕本书中的软件和专业词汇，书中提供了一些利于理解的案例和实际在你身边发生的故事，你会发现“交互与界面无处不在”。

正因作者不是沉醉于理论研究的“知识狂人”，也不是迷恋产品更新版本的“技术先锋”，书中提出的建议和设计逻辑，将告诉你——应该使用什么样的产品？为什么生活如此枯燥和复杂？高科技和油盐酱醋有什么关系？等等。

本书约定

为了使本书更好地达到这些目标，在每章节的正文中，有以下的补充：

【技巧】

它将告诉你，完成这个设计过程能够使用到的更简易的技术，或者更快捷的方法，它也许是一个快捷键，也许是一个配置步骤，也许是一个沟通方式。

【要点】

如果在某一个讲解中，需要专家意见的指点，那么请注意这个提示，我将在这里告之行业专家对这个问题的意见和态度，他们会从更理性的角度分析你的疑惑。有时候它只是一句话，有时候它会有一个完整的补充教程（plus tutor）。

【故事】

因为作者本人是立足于中国本土的设计师，其设计过程当中将不参杂任何不具参考意义的理论。接下来的作者系列文章——《设计的小事》会对该部分的书籍内容（往往是某一个流程或者现象）做一个第三方分析或观点陈述。

内容概要

本书内容涵盖交互设计与界面设计的基本概念、设计规范和工作流程。由于这是一本以实际工作案例和工作经验为主的书，因此在理论和行业发展史方面会使用较小篇幅，更多的关于该行业的理论和术语解释，读者可以参考其他行业专家的知名著作。

一开始我会着力介绍目前最新发展的交互手段和使用场所，当然是以移动手持设备为主；作为设计师，一定要关心如何将这些创意产品化，接下来介绍如何正确地将一个设计想法变成产品。

产品化的过程中，用户体验设计是相当重要的，由于UCD设计思想的广泛使用，我会重点研究并分析用户体验设计的可行性和方法。

视觉设计是普通大众直接接触产品设计核心的介质，在这里我将使用初级→高级→复合型的综合设计案例介绍如何设计出让人喜爱的视觉作品。

最后，我还将说明一些产品的完整设计案例，展示一个移动手持设备交互设计和界面设计的全过程。

面向读者

一般读者

你将了解设计师这个特殊群体的工作生活方式，看到一个产品从无到有的艰辛过程，逐步了解你正在使用或即将使用的手持设备的特点与内涵。如果很幸运的，你发现了其中介绍的某位设计师是你的朋友， 请不必惊讶，因为他们正是这个行业的代表，并且你也能体会到设计真的离你不远。

SOHO设计师

我将为你揭示，客户的源源不断和门可罗雀的现象，你会发现SOHO并不等于放纵，你会得到很多从事过SOHO设计的设计师的宝贵意见，也会让你学习到如何清楚地分辨“天使客户”和“魔鬼客户”。

企业或企业中的设计师

你将从本书中了解到企业的工作秘密，产品的差异化对企业的巨大影响，也能了解到在知名的设计公司当中那些“天使设计师”背后的故事，当然，最重要的是，你会发现专业设计团队的沟通是个复杂而经典的问题。

委托设计的客户

你将知道如何分辨“好的设计”与“差的设计”，学会不为夸夸其谈的设计产品买单，找到真正能为你的产品负责的设计合作伙伴。

如果幸运的话，在评判设计的过程中，你会变得更客观，从而赢得设计师的尊重与依赖。

市场或产品策划人员

如果你公司中的设计人员正在对你进行抱怨，你可以从本书中找到解决的方案，产品和策划人员的天马行空需要悬崖勒马，但伟大的想象力也需要***驰骋，不必担心，我会提供给你一些通用的技术手段。

本书有一些实用的市场调查方法、产品策划的方案、头脑风暴会议的记录文档、产品设计流程中的原则性指导，如果它们对你有用，我将十分欣慰。

反馈方式

可以预见的是，这本书当中存在很多需要持续交流的部分，为此我们开放以下反馈

沟通方式：

1. 个人联系：
2. 周陟： MSN：lytous@hotmail.com mail: lytous@gmail.com
3. 网站与BLOG： 周陟作品集：lytous.com
4. 周陟个人博客：lytous.ucdchina.com
5. 本书优酷视频地址： http://www.youku.com/playlist_show/id_3414545.html

目录：

第1章 交互概念设计与图形

界面设计… …………………………… 3
1.1 交互概念设计……………………………………… 4
1.1.1 交互设计从概念出发………………………… 4
1.1.2 交互设计的发展… …………………………… 6
1.1.3 交互设计的应用展示………………………… 8
1.2 图形界面设计………………………………………12
1.2.1 图形界面的发展历程………………………… 12
1.2.2 用户使用系统就是使用界面……………… 15
1.2.3 用户界面不是绘画绣花……………………… 15
1.2.4 UCD的设计思想… …………………………… 16
1.2.5 使用图形软件之前的准备… ……………… 16
1.2.6 必备的软件分析… …………………………… 16
1.3 交互概念设计与图形界面的联系… …………18
1.3.1 理解用户的需求和分析需求… …………… 18
1.3.2 设计一些候选方案和概念… ……………… 19
1.3.3 进行原型设计…………………………………… 19
1.3.4 用户测试与评估… …………………………… 19
1.3.5 两者的关系和应用… ………………………… 19

第2章 交互概念与图形界面

设计新趋势…………………………… 21
2.1 手持移动设备的产品特点………………………22
2.1.1 不同的感知和感觉… ………………………… 22
2.1.2 不同的使用环境… …………………………… 24
2.2 手持移动设备的概念设计要素… ……………32
2.3 手持移动设备的界面设计风格… ……………33
2.4 手持移动设备的基础知识………………………35
2.4.1 承载平台的介绍和分析………………………35
2.4.2 显示介质的介绍和分析………………………37
2.4.3 作者的经验………………………………………39

第3章 手持移动设备设计的

产品化………………………………… 45
3.1 产品设计的目的……………………………………46
3.1.1 产品设计的目的是
为使用产品的用户 … …………………………46
3.1.2 交互设计和界面设计不是万能的…………47
3.1.3 我应该使用什么样的产品 … ………………48
3.2 设计是如何产品化的… …………………………51
3.2.1 如何决定将一个设计产品化的
市场调查和分析… ……………………………51
3.2.2 设计的产品化检验过程………………………57
3.3 产品化过程中的问题… …………………………60
3.3.1 天使客户还是魔鬼客户 … …………………60
3.3.2 为什么用户选择了他…………………………62
3.3.3 产品经理的太极拳… …………………………64
3.3.4 开发人员说：“我讨厌交互设计”…………67
3.3.5 交互设计师说：“我不需要图形”…………67
3.3.6 设计师的一厢情愿… …………………………68
 

第4章 产品策划定义… …………………… 73

4.1 竞争分析 … ………………………………………74
4.1.1 如何分析竞争对手和产品… ………………74
4.1.2 设计总监的角色… ……………………………75
4.2 相关负责人会议……………………………………77
4.2.1 会议的前期准备… ……………………………77
4.2.2 团队成员的确定… ……………………………81
4.2.3 出现的一些波动因素…………………………83

第5章 用户分析与研究…………………… 87

5.1 用户参与研究法……………………………………88
5.1.1 为何用户要参与研究…………………………88
5.1.2 一个典型案例… ………………………………88
5.1.3 创意从何而来……………………………………90
5.2 观察法…………………………………………………93
5.2.1 观察的方法………………………………………93
5.2.2 观察的目的和分析手段………………………93
5.3 用户访谈… …………………………………………95
5.3.1 用户访谈的原则… ……………………………95
5.3.2 用户访谈的记录方式…………………………95
5.4 焦点小组法… ………………………………………96
5.5 卡片分类法… ………………………………………98
5.6 头脑风暴法… ………………………………………99
5.6.1 头脑风暴法成功的要点………………………99
5.6.2 “正规”手持设备的GUI界面… ……………99
5.7 任务分析法… …………………………………… 102
5.8 情景设定法… …………………………………… 103
5.9 社会性研究法…………………………………… 103 

第6章 概念原型设计… ………………… 109

6.1 纸上原型… ……………………………………… 110
6.1.1 纸上原型的设计要点……………………… 110
6.1.2 一些案例… …………………………………… 110
6.2 设计原则… ……………………………………… 112
6.2.1 需要做些什么………………………………… 112
6.2.2 视觉与功能平衡… ………………………… 112
6.3 交互原型设计…………………………………… 115
6.3.1 低保真原型设计… ………………………… 115
6.3.2 高保真原型设计… ………………………… 116

第7章 设计验证测试… ………………… 119

7.1 可用性测试… …………………………………… 120
7.1.1 可用性测试对设计有什么帮助…………… 120
7.1.2 可用性测试的场地和费用… …………… 120
7.1.3 什么时候进行？多少人参与？
如何准备 … ………………………………… 121
7.2 启发式评估… …………………………………… 123
7.2.1 如何决定将一个设计产品化… ………… 123
7.2.2 设计的产品化检验过程…………………… 124
7.3 问卷表格… ……………………………………… 126
7.3.1 问卷调查法…………………………………… 126
7.3.2 如何设计一份标准的问卷表格… ……… 126

第8章 设计规范… ……………………… 131

8.1 设计规范… ……………………………………… 132
8.1.1 设计规范的必要性… ……………………… 132
8.1.2 关于设计规范的谈话……………………… 133
8.2 设计的执行… …………………………………… 136
8.2.1 设计执行说明书… ………………………… 136
8.2.2 编写要点… …………………………………… 138
8.3 输出标准化… …………………………………… 142
8.3.1 设计说明… …………………………………… 142
8.3.2 菜单树结构…………………………………… 142
8.3.3 文件打包… …………………………………… 144

第9章 一切从图标开始………………… 147

9.1 图标的故事… …………………………………… 148
9.1.1 图标设计的意义… ………………………… 148
9.1.2 好的图标设计有什么特点… …………… 152
9.2 手持设备的图标设计… ……………………… 159
9.2.1 手持设备的图标设计有何不同… ……… 159
9.2.2 设计一个手持设备的图标 ……………… 160

第10章 手持设备的图形界面………… 167

10.1 图形界面设计的创意……………………… 168
10.1.1 优秀图形界面赏析… …………………… 168
10.1.2 开始设计手持设备的图形界面… …… 176
10.2 【案例】手机MP3播放器的
界面设计………………………………………… 183
10.2.1 产品定义… ………………………………… 184
10.2.2 交互设计… ………………………………… 184
10.2.3 界面原型… ………………………………… 185
10.2.4 视觉设计… ………………………………… 185
10.3 【案例】移动设备主题界面设计… ……… 186

第11章 图形界面的创意升级………… 193

11.1 图形界面不只是画图… …………………… 194
11.1.1 让手持设备变得人性化………………… 194
11.1.2 情感化因素不可忽视… ………………… 194
11.1.3 交互特效的引入…………………………… 195
11.1.4 产品=体验=品牌… ……………………… 196
11.1.5 临场的体验决定购买意愿……………… 197
11.2 用户体验………………………………………… 197

第12章 手机交互界面设计始末… … 205

12.1 制定设计流程… ……………………………… 206
12.1.1 一个优秀的图形界面设计
还需要什么………………………………… 206
12.1.2 面向整个产品过程的设计流程… …… 212
12.2 第一次项目会议……………………………… 214
12.3 图标设计………………………………………… 220
12.3.1 图标设计的思考方式… ………………… 220
12.3.2 【教程】图标设计………………………… 224
12.4 评审筛选会议… ……………………………… 231
12.5 设计方向………………………………………… 233
12.6 交互设计效果… ……………………………… 237
12.7 界面设计………………………………………… 239
12.7.1 【教程】main menu（主菜单）
设计…………………………………………… 242
12.7.2 【教程】world time（世界时间）
设计…………………………………………… 245
12.8 界面设计提案… ……………………………… 249
12.9 制作Flash演示………………………………… 253
12.9.1 制作平面演示框架… …………………… 253
12.9.2 制作Flash演示… ………………………… 254
12.10 提案会议……………………………………… 257
PART 4 项目实践
12.10.1 准备演示的资料………………………… 257
12.10.2 确定必要的参会人员…………………… 259

第十三章 样板工程设计——

UI决策产品… ……………… 263
13.1 产品策划………………………………………… 264
13.1.1 PPT演示文档的作用… ………………… 264
13.1.2 《用户体验浅析》培训课程试卷… … 269
13.1.3 《用户体验浅析》部门培训试卷
反馈分析… ………………………………… 271
13.2 项目会议………………………………………… 274
13.3 概念设计………………………………………… 281
13.3.1 “影视手机”概念机型定义……………… 281
13.3.2 测试LCD… ………………………………… 284
13.3.3 界面概念设计……………………………… 285
13.4 界面设计………………………………………… 286
13.5 交互实现………………………………………… 293
13.6 音效整合………………………………………… 300
13.6.1 音源芯片测试……………………………… 300
13.6.2 铃音制作示例……………………………… 301
13.7 制作开关机动画……………………………… 304

媒体评论

在各种变化的环境中单手使用一个小屏幕设备，是件极其痛苦的事情。要降低这种痛苦，只有做出更完美的交互界面。这本书在给我们介绍一种降低人们痛苦的方法，值得所有致力于降低用户痛苦的设计师们认真品读。 　　　　

——白鸦 支付宝首席产品体验师 　　

在我的印象中，Lytous是一个十分优秀的视觉设计师。最近几年的接触，发现他原来还是一个高产作家。这还是其次，最重要的是他写的每一本书都很畅销。让我们感谢他对中国设计界做出的贡献！让我们为中国设计！ 　　　

——JunChen 途牛网产品总监 　　

纵观国内目前出版的一些Web可用性书籍，东拼西凑类、偷梁换柱类和滥竽充数类比比皆是，针对移动设备交互和界面设计类的图书更是为数不多，周陟同学的这本书从移动设备的交互到项目实施，再到一些实操过程中的一些问题的解决方法，都做了系统和流程化的阐述。我对这本书的评价：全面，系统，实用。是您手头不可或缺的一本移动交互界面设计案例教材书。 　　　　

——坏人