编辑推荐
日本移动设备UI设计专著
国内UI设计先驱的领先感悟
+精密阐述UI设计思维
+移动设备UI设计全案展示
+GUI设计技能火速提高
+从需求到产品全案揭祕
DVD光盘
+UI设计大师的操作视频
+《UI进化论:移动设备人机交互界面设计》实例素材和最终文件
+更多UI设计师必备资源
内容简介
《UI进化论:移动设备人机交互界面设计》内容涵盖交互设计与界面设计的基本概念、设计规范和工作流程。由于这是一本以实际工作案例和工作经验为主的书,一开始着力介绍目前最新发展的交互手段和使用场所,当然是以移动手持设备为主。作为设计师,一定要关心如何将这些创意产品化。接下来介绍如何正确地将一个设计想法变成产品。产品化的过程中,用户体验设计是相当重要的,由于UCD设计思想的广泛使用,《UI进化论:移动设备人机交互界面设计》重点研究并分析用户体验设计的可行性和方法。视觉设计是普通大众直接接触产品设计核心的介质,《UI进化论:移动设备人机交互界面设计》将使用初级→高级→复合型的综合设计案例介绍如何设计出让人喜爱的视觉作品。最后,还说明了一些产品的完整设计案例,展示一个移动手持设备交互和界面设计的全过程。
《UI进化论:移动设备人机交互界面设计》不但有大量的文字内容,也有配套的DVD光盘,其中包含了作者录制的设计视频教学和《UI进化论:移动设备人机交互界面设计》操作实例素材及最终文件。
《UI进化论:移动设备人机交互界面设计》适合移动UI设计师迅速进入职场角色,也可供平面设计人员、交互设计人员和对UI设计感兴趣的读者阅读和参考。
作者简介
周陟,中国数字艺术奖全国巡展受邀,数字图形设计参展上海“出街”国际艺术设计展;受邀平面招贴 参展新西兰GOUW设计师平台推荐WEB设计师;E-motional design, k10k, 美国Visualizer艺术平台作品收录推荐。曾担任中域网美术指导,有着丰富的互联网产品设计开发经验,曾参与策划设计国内大型手机电子商务平台中域网,同时作为中国设计联盟的资深合作伙伴,编写了《数字图形设计风云:双人构想》、《设想》等畅销书籍。
内页插图
精彩书评
在各种变化的环境中单手使用一个小屏幕设备,是件极其痛苦的事情。要降低这种痛苦,只有做出更完美的交互界面。这本书在给我们介绍一种降低人们痛苦的方法,值得所有致力于降低用户痛苦的设计师们认真品读。
——白鸦 支付宝首席产品体验师
在我的印象中,Lytous是一个十分优秀的视觉设计师。最近几年的接触,发现他原来还是一个高产作家。这还是其次,最重要的是他写的每一本书都很畅销。让我们感谢他对中国设计界做出的贡献!让我们为中国设计!
——JunChen 途牛网产品总监
纵观国内目前出版的一些Web可用性书籍,东拼西凑类、偷梁换柱类和滥竽充数类比比皆是,针对移动设备交互和界面设计类的图书更是为数不多,周陟同学的这本书从移动设备的交互到项目实施,再到一些实操过程中的一些问题的解决方法,都做了系统和流程化的阐述。我对这本书的评价:全面,系统,实用。是您手头不可或缺的一本移动交互界面设计案例教材书。
——坏人
目录
PART 1 设计产品化
第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
PART 2 产品化交互设计过程
第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
PART 3 GUI视觉设计
第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
PART 4 项目实践
第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
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
精彩书摘
这是Shneiderman首先提出的概念,用户最终关心的是他想操作的对象,他只用关心任务语义,而不用过多地为计算机语义和句法分心。
比如Wind0Ws的桌面系统,模拟了物理环境中的桌面方式,文件夹的分类让用户了解只要操作文件夹便可找到需要的资料,而不用关心文件夹与系统直接的信息处理过程。多媒体用户界面
多媒体技术引入了动画、音频、视频等交互媒体手段,特别是引入了音/视频媒体,极大地丰富了计算机表现信息的形式,提高了用户接受信息的效率。
在你的手机上,你能够在发送短消息的同时,听到发送成功的提示音,这样你能够在不观察屏幕的情况下,了解系统目前的任务完成情况,这使得你能从单次操作中解放出更多时间。
多通道用户界面
多通道用户界面的引入是为了消除当前WOMP/GUI以及多媒体用户界面通信带宽不平衡的瓶颈,综合采用视线、语音、手势等新的交互通道、设备和交互技术,使用户利用多个通道以自然、并行、协作的方式进行人机对话,通过整合来自多个通道的精确的和不精确的输入来捕捉用户的交互意图,提高人机交互的自然性和高效性。
国外行业中的研究涉及键盘、鼠标器之外的输入通道主要是语音和自然语言、手势、书写和眼动方面,并以具体系统研究为主。上面我们提到的marro系统正是这种交互手段的应用。
虚拟现实技术
在虚拟现实中,人是主动参与者,复杂系统中可能有许多参与者共同在以计算机网络系统为基础的虚拟环境中协同工作,虚拟现实系统的应用十分广泛,几乎可用于支持任何人类活动和任何应用领域。
虚拟现实技术比以前任何人机交互形式都有希望彻底实现和谐的、“以人为中心”的人机界面。
前言/序言
建议读者在阅读本书前可以先看看这个部分,很多本书的重要说明与信息都将在此呈现。本书有配套的DVD光盘,其中包含了作者录制的设计视频教学以及本书实例的素材和最终文件。(它们来自于著名视频分享网站youtube和相关产品的终端厂商官方网页)
在此感谢手持设备设计行业中从事交互界面设计的前辈与领袖,他们的专业知识和经验让作者能更好地阐述本书中的设计思想。
感谢所有在互联网上无私展示优秀作品的设计师,他们的部分作品让本书的读者更贴切地了解到何谓优秀的交互界面设计。
特别感谢CKTelecomUI部全体工作同仁,由于他们的优秀作品才使得本书的第四部分显得更为饱满。
写作目的
对于行业
人机交互设计和界面设计从来没有今天这般兴盛,行业内各个大型协会与小型组织的交流互动,使得这个行业的上、中、下游组成部分更加了解这个学科和它能够带来的价值,而他们积极投身其中的行动和广大爱好者的激情,正是本书的创作初衷。
本书的作者同样是该行业的实践者,然而行业体系庞大,组成复杂,因此,作者只能挑选自己熟知,并在当下极具市场价值的某个环节进行阐述,以便将自己的一些经验和收获与读者分享。
选择手持设备这个领域作为本书的重点,并非偶然,首先本书作者就是该领域的资深设计师;其次,手持设备的日益发展与功能聚合,使得它在信息化的今天,成为极重要的工作、生活和娱乐设备。
本书中,作者也展示了当今行业前沿的发展动态与技术的更新交替,以行业的视角关注设计本身,使得书中的案例与流程具有更实际的意义。
对于企业
本书作者不仅拥有国内知名IT公司与通信设备公司的设计工作经验,也与很多中、小型企业有过深入的设计合作,其中的工作经验与技巧对本土企业中的工作同仁具有实际的参考价值。
中国企业本身对于交互设计与界面设计的特殊理解,团队的阶梯式发展,其中的人文因素和技术问题,作者都亲身经历,相信这些知识的分享会尽量保持客观。
在书中,作者展示了大量的实际工作操作经验,有些甚至是教训(出于隐私考虑,书中不会公布公司的名称和项目的详细情况),但我相信这些经验具有普遍性意义。
本书的分析、指导和教学,都将以实际工作为主,理论研究和晦涩难懂的专业用词尽量避免,让本书成为读者工作中的一本参考书籍或实用手册。
对于个人
交互设计和界面设计是针对人的设计(其实有哪种设计不是如此?),是研究用户和观众的设计,是大量运用心理学、市场营销学、信息处理技术、社会工程学等综合知识的设计手段。
用户如此重要,以至于我同样希望普通受众和非从事该领域工作的用户也能看懂这本书,了解一个产品的核心设计过程,提高分辨优秀产品和庸俗产品的能力,请不要害怕本书中的软件和专业词汇,书中提供了一些利于理解的案例和实际在你身边发生的故事,你会发现“交互与界面无处不在”。
正因作者不是沉醉于理论研究的“知识狂人”,也不是迷恋产品更新版本的“技术先锋”,书中提出的建议和设计逻辑,将告诉你——应该使用什么样的产品?为什么生活如此枯燥和复杂?高科技和油盐酱醋有什么关系?等等。
《UI进化论:移动设备人机交互界面设计》是一本深入探讨移动设备人机交互界面(UI)演变历程、核心设计原则及其未来发展趋势的著作。本书并非简单罗列设计技巧,而是以一种历史的视角,追溯移动设备UI从最初的功能性指令集,到如今丰富、直观、个性化的交互体验的完整蜕变过程。 内容概述: 本书主体内容可分为三个主要部分:历史回顾与演进分析、核心设计理念与实践,以及未来趋势与前沿探索。 第一部分:历史回顾与演进分析 这一部分将带领读者穿越移动设备UI发展的历史长河。我们将从早期功能机时代简陋的按键式交互讲起,那时UI设计的主要目标是尽可能高效地完成有限的功能。随后,我们将聚焦于智能手机的崛起,探讨触屏技术的出现如何颠覆了传统的交互模式,以及由此带来的UI设计范式的根本性转变。 早期移动设备UI的特点: 功能导向: 设计围绕核心功能展开,简洁直接。 指令式交互: 用户通过预设的按键组合或菜单层级进行操作。 有限的视觉表现: 黑白或低分辨率彩屏,字体、图标等视觉元素较为朴素。 典型案例分析: 如功能机的菜单结构、短信界面、简单游戏UI等。 智能手机时代的UI革命: 触屏交互的兴起: 从电阻屏到电容屏,多点触控技术的出现如何改变了交互的可能性。 图形用户界面(GUI)的普及: 图标、窗口、菜单等可视化元素的引入,使得操作更加直观。 操作系统的影响: iOS和Android两大操作系统的出现,各自形成了独特的UI设计语言和交互范式。 “拟物化”设计(Skeuomorphism)的盛行与衰落: 探讨拟物化设计如何模拟现实世界的物体,提供熟悉感,以及其局限性。 “扁平化”设计(Flat Design)的崛起: 分析扁平化设计的兴起原因,如提升加载速度、适应不同屏幕尺寸等,及其带来的视觉风格变化。 设计原则的演变: 从注重功能到兼顾美学,再到用户体验的全面提升。 跨越平台的UI协同: 响应式设计(Responsive Design): 探讨如何在不同屏幕尺寸和设备上提供一致且优化的用户体验。 跨设备一致性: 分析不同设备(手机、平板、智能手表等)之间UI设计语言的协同与差异。 第二部分:核心设计理念与实践 在深入了解UI的演变历程后,本书将聚焦于构成现代移动设备UI设计的核心理念和实践方法。这一部分旨在为读者提供一套系统化的设计思维框架,帮助他们理解“好”的UI设计究竟包含哪些要素,以及如何将其付诸实践。 用户体验(UX)为中心的设计: 理解用户: 用户研究方法(用户画像、用户旅程图、场景分析等)如何指导UI设计。 可用性原则: 经典可用性原则(如尼尔森十大可用性原则)在移动UI设计中的应用。 用户流程设计: 如何设计清晰、高效的用户流程,减少用户认知负荷。 情感化设计(Emotional Design): 如何通过UI设计引发用户的情感共鸣,提升用户满意度。 视觉设计原则与实践: 色彩理论与应用: 如何运用色彩来传达信息、引导用户注意、建立品牌形象。 排版设计: 字体选择、字号、行距、对齐等如何影响可读性和视觉层次。 图标设计: 图标的识别性、一致性、含义传达以及在不同尺寸下的表现。 布局与网格系统: 如何构建稳定、清晰、易于扫描的界面布局。 动效设计(Motion Design): 动画在UI中的作用,如提供反馈、引导过渡、增强沉浸感。 留白(Whitespace)的艺术: 留白如何提升界面的呼吸感、聚焦内容、引导视线。 交互设计模式与技巧: 导航模式: 抽屉导航、底部标签导航、顶部标签导航等常见导航模式的优缺点及适用场景。 控件设计: 按钮、输入框、开关、滑块等交互控件的设计规范与最佳实践。 信息架构: 如何组织和呈现内容,使其易于用户查找和理解。 反馈机制: 如何及时、清晰地向用户提供操作反馈,让他们了解系统状态。 手势交互: 滑动、捏合、长按等手势在移动UI中的广泛应用及其设计考量。 无障碍设计(Accessibility): 如何设计能够被所有用户(包括残障人士)使用的UI。 设计流程与工具: 设计思维流程: 从概念提出、原型设计到用户测试的迭代过程。 线框图(Wireframing)与原型制作: 使用专业工具(如Sketch, Figma, Adobe XD等)进行低保真和高保真原型设计。 用户测试与迭代: 如何通过用户测试发现设计问题并进行改进。 第三部分:未来趋势与前沿探索 在对现有UI设计原理和实践进行深入剖析后,本书将目光投向移动设备UI设计的未来。我们将探讨新兴技术、设计理念的演变,以及这些变化将如何塑造我们未来与移动设备交互的方式。 人工智能(AI)在UI设计中的角色: 个性化推荐与自适应UI: AI如何根据用户行为和偏好动态调整界面。 智能语音助手与自然语言交互: 语音界面(VUI)的发展及其与图形界面的融合。 AI驱动的设计工具: AI在设计流程自动化、内容生成等方面的应用。 增强现实(AR)与虚拟现实(VR)的UI挑战: 三维空间交互: 如何在三维环境中设计直观、易用的UI。 沉浸式体验的设计: AR/VR UI如何与现实世界或虚拟世界融合。 新的交互范式: 空间锚点、手部追踪等新兴交互方式的设计考量。 微交互(Microinteractions)的精进: 微交互的定义与价值: 如何通过细微的交互设计提升用户体验的愉悦度和效率。 数据驱动的设计迭代: 如何利用用户数据来优化微交互。 可穿戴设备与物联网(IoT)的UI设计: 小屏幕与多设备协同: 为智能手表、智能家居等设备设计简洁高效的UI。 场景化交互: 如何根据用户所处情境提供定制化的交互体验。 新兴设计趋势与哲学: “暗黑模式”(Dark Mode)的普及与考量: 节能、护眼、视觉美学等方面的优势。 “超现实设计”(Neumorphism)等视觉风格的探索。 可持续设计(Sustainable Design)在UI领域的体现。 设计师的未来: 技能的演进: 从纯粹的视觉设计师到具备更多技术理解和跨领域协作能力的设计师。 伦理与责任: 在设计中考虑隐私、信息茧房、技术滥用等问题。 附录:DVD-ROM光盘内容(暗示性描述,不直接列出光盘内容) 随书附赠的DVD-ROM光盘,收录了本书理论的实践案例,可能包含: 精选项目案例分析: 深入剖析一些成功或具有代表性的移动App UI设计,展示设计思路、过程和最终效果。 设计模式库: 提供常用UI组件和交互模式的参考示例。 实用资源链接: 推荐设计师常用的设计工具、素材网站、学习资源等。 动态演示: 可能包含一些UI动效的演示视频,直观展示动效设计在实际中的应用。 总结: 《UI进化论:移动设备人机交互界面设计》旨在为设计师、产品经理、开发者以及所有对移动设备交互设计感兴趣的读者提供一个全面、深入的知识体系。本书强调设计的历史脉络、理论基础,并积极展望未来的发展方向,帮助读者构建扎实的设计功底,培养前瞻性的设计思维,以应对日益复杂和充满挑战的移动设备UI设计领域。通过对本书的学习,读者将能够更好地理解用户需求,设计出既美观又实用的移动设备交互界面,从而为用户创造更加卓越的数字体验。