本书全面阐述网站及移动应用的导航设计理论、方法和案例分析的专业书籍。主要内容包括:认识导航,导航的设计理论及原则,导航系统分类,导航的基石,导航的核心,导航的焦点,导航评价,移动APP和Web导航策略。
关于笔者
王愉,北京印刷学院数字媒体艺术专业副教授,江南大学博士(产品设计理论与技术专业),师从辛向阳导师。对于网页视觉设计,我已经从事教学科研及设计实践工作达十年之久。网页视觉设计越来越接近一门“艺术”,其设计和功能的趋势虽不能说瞬息万变,但也还是在技术的支撑下高速发展,所以我必须不断通过大量的研究与实践来保证我有足够的经验来教授学生,确保他们在大学可以学习到真正实用的技能以应对严峻的就业形势。
在多年的教学和实践中,我非常了解大家的需求,无论是我的学生或者是项目客户,以及实际岗位上的网页设计师。
这也是我创作这样一本界面导航图书的信心来源。
创作背景
当下,界面设计已经成为了一个综合性的工作,必须考虑包括视觉设计、信息设计、交互设计、体验设计等等细节,在综合考虑所有因素之后,才能逐渐完善出一个产品。
导航作为网站/APP 的核心功能之一,设计得成功与否,直接关系到用户体验是否良好。随着上网设备的多元化及浏览器性能的高速发展,网站设计需要兼容多种设备和屏幕。传统桌面网站的导航设计相对比较成熟了,但随着比如HTML5 等新技术的不断升级,导航设计可以做到更多功能和实现更优质的视觉效果。而在目前移动网站和移动应用并存的时期,移动界面导航设计也有了其自身的特点。
在我的教学和实践中,我经常发现,导航设计虽然如此重要,但经常成为第一个被忽视的细节。因为导航设计在商业设计中,比起绚丽的配色、灵活的动效设计,是一个相对“低调”的设计点,好多同学宁愿把精力放在配色、结构和自认为的“体验”等方面,而不愿意过多关注导航这个默默无闻但其实至关重要的设计。
于是,这成为了我创作这本书的源动力,集结之前发表的一系列与导航设计相关的论文以及目前最新的设计案例,成为了本书的雏形。之后,在编辑栾大成的鼓励下,咬牙坚持了2 年多,期间大规模改版两次,修订了4 次,直到交稿半年依然不顾出版社的相关规定继续更新内容,在大成的网开一面下变成了目前这个版本,虽然不甚完美,但确实能力至此了。
本书内容
本书是一本全面阐述网站及移动应用的导航设计理论、方法和案例分析的专业书籍。分为七章。
第1 章 导航的设计理论及原则。介绍导航的需求和导航的定义,讲解以用户为中心、用户体验要素、情感化设计、最小努力、降低不确定感、重复性等设计理论。
第2 章 导航系统的分类。讲解结构性导航系统、关联性导航系统、实用性导航系统。
第3 章 Web导航的基石。讲解结构层,信息构架方法、交互设计。
第4 章 Web导航的核心。讲解框架层,导航要素设计、信息设计、界面设计、线框图及原型。
第5 章Web 导航的焦点。讲解表现层,视觉设计概述、风格设计、交互的视觉呈现、格式塔效应、视觉影响、导航布局。
第6 章 Web导航评价。讲解导航评价方法、导航测试、优秀导航案例。
第7 章移动APP/Web 的导航策略。移动导航模式分类、移动导航视觉元素设计、移动导航交互设计原则,以及对未来的展望等。
本书特色
新案例:随着交互设计理论的不断完善、企业对用户研究的深入,网站或移动应用产品的导航形式也随之更新。网站改版、设计趋势改变等诸多原因,促使本书在撰写过程中不断替换旧的实例或选择新旧两种形态进行对比,使读者能够更加深入地了解行业趋势和主流产品。
理论既是实践的基石也是实践的结晶:在互联网和交互设计领域,理论并不是一成不变、永远正确的。本书在阐明理论时辅以大量案例参考,有助于提高读者的理解力。设计实践需要理论的指导,同时,也需要推动理论的发展。实践使理论生动,理论使实践扎实。
关于本书
本书出版获得北京市教委人才强教创新团队项目(北京印刷学院田忠利,06040109001);国家社会科学基金艺术学一般项目“基于国际前沿视野的交互设计方法论研究”,(江南大学辛向阳,12BG055)资助。
本书主要由王愉撰写,参与本书撰写工作的有:北京印刷学院王愉、微软公司李文博、北京印刷学院杨乐、隋涌、付震蓬、罗慧、鲁艺、连环、赵一飞、王菲,研究生黄婷、徐晓彤、郁涯、张晓蒙、张晨蕾、张伶、初月、易娟、王熙瑶、周斌等。
本书由王愉、黄婷审校,田忠利、杨虹、史民峰、严晨监制。
关于读者
本书适用于网站设计师、移动媒体视觉设计师、新媒体交互设计师,大中专院校设计专业师生、平面设计爱好者、培训机构相关专业师生等。本书涉及诸多设计理论,建议读者溯本求源,深入或扩展阅读信息源。
关于案例
由于互联网行业设计产品更新较快,本书采用的案例读者未必还可以搜索到,建议读者以发展的心态来学习和研究这个领域的相关知识。另外,本书极个别案例来自互联网,并无法查明出处,如果本书用到了您的作品,烦请告知,将在下一版予以更正。在此也感谢这些卓越的设计师让我们的互联网生活多姿多彩。
感谢
这部分内容虽然是套路,但是相信每个认真创作的作者都会真真切切地感受到来自周边朋友的帮助,
很多时候,这些帮助都是潜移默化的。非常感谢江南大学博士导师辛向阳的耐心指导。在此由衷感谢清华大学出版社栾大成编辑给予的无限耐心和宝贵意见。感谢本书引用的理论、作品的原作者,你们的智慧和创意是本书绽放的基础。感谢老张的关爱、父母的敦促、姐姐的支持和小米的陪伴。衷心感谢每一位读者,如果您耐着性子看到这里,那就再次感谢一次。
王愉,北京印刷学院副教授、硕士研究生导师、江南大学博士生、高级摄影师。2007年、2012年北京市教委赴美访问学者,2010年清华大学访问学者。入选北京市中青年骨干教师;第九届“雅昌教育奖”获得者;校级精品课程负责人;精品教材主编。曾主持北京市教委科技创新平台项目、北京市教委社科计划项目、校重点教学改革项目、校级重点科研项目。出版《FIashActionScript3.0溢彩编程》、《DHTML动态网页设计》等书籍,发表多篇论文、多项设计、摄影作品。在多年的教学与视觉研究中,始终坚持:让每一个作品与市场对接,让每一个学生与社会对接。
第1章 界面导航的设计理论及原则
1.1 导航需求
1.2 导航定义
1.3 以用户为中心
1.3.1 需求层次理论
1.3.2 基于UCD的导航设计
1.4 用户体验要素
1.5 情感化设计
1.6 最小努力
1.7 降低不确定感
1.8 艺术性原则
1.9 隐喻
1.10 设计模式
第2 章 界面导航系统的分类
2.1 结构性导航系统
2.1.1 全局导航
2.1.2 局部导航
2.2 关联性导航系统
2.2.1 上下文导航
2.2.2 面包屑导航
2.2.3 步骤导航
2.2.4 辅助导航
2.2.5 页脚导航
2.2.6 页码导航
2.2.7 快速链接
2.2.8 友情链接
2.2.9 锚点链接
2.2.10 标签云
2.3 实用性导航
2.3.1 标识链接
2.3.2 语种或地域导航
2.3.3 搜索引擎
2.3.4 网站地图
第3 章 导航的基石——结构层
3.1 信息构架
3.1.1 信息结构图示
3.1.2 卡片分类法
3.1.3 信息构架案例
3.2 交互设计
第4章 导航的核心——框架层
4.1 导航要素设计
4.1.1 菜单
4.1.2 链接文本
4.1.3 按钮
4.1.4 面包屑
4.1.5 标签和卡片堆
4.1.6 颜色编码
4.1.7 图片与图标
4.2 信息设计
4.2.1 位置
4.2.2 字母表
4.2.3 时间
4.2.4 类别
4.2.5 层级
4.3 界面设计
4.4 线框图
4.5 原型
第5章 导航的焦点——表现层
5.1 视觉设计概述
5.2 风格设计
5.2.1 菜单、标签、按钮、图标
5.2.2 文字和数字
5.2.3 空间
5.2.4 最小化或无导航
5.2.5 图像导航
5.2.6 模拟纸制品
5.2.7 封面页
5.2.8 第一屏
5.3 交互的视觉呈现
5.3.1 导航菜单的交互视觉效果
5.3.2 Ajax技术的应用
5.3.3 Flash技术的保全方案
5.3.4 链接文本的四种状态
5.3.5 链接的响应区域
5.3.6 Material Design交互动效
5.4 格式塔效应
5.4.1 接近性
5.4.2 相似性
5.4.3 连续性
5.4.4 对称性
5.4.5 完整和闭合倾向
5.4.6 共同方向运动
5.4.7 主体背景法则
5.5 视觉影响
5.5.1 分组及对齐
5.5.2 视觉层次
5.5.3 视线流
5.6 导航布局
5.6.1 横向顶部
5.6.2 纵向左侧
5.6.3 横向底部
5.6.4 纵向居中
5.6.5 随意布局
5.6.6 浮动布局
第6章 导航评价
6.1 导航评价方法
6.1.1 符合用户目标
6.1.2 与网站类型相称
6.1.3 广度与深度的平衡
6.1.4 视觉清晰
6.1.5 统一性
6.1.6 良好的反馈
6.1.7 有效率、有效果
6.1.8 易学易用
6.2 导航测试
6.2.1 测试方法与内容
6.2.2 眼动追踪技术
6.2.3 导航测试分析
6.3 优秀导航案例
第7章 移动APP和移动Web的导航策略
7.1 移动APP和Web的导航模式分类
7.1.1 菜单栏模式
7.1.2 标签模式
7.1.3 抽屉模式
7.1.4 树状模式
7.1.5 平铺页面模式
7.1.6 组合模式
7.1.7 模态视图模式
7.1.8 沉浸模式
7.1.9 旋转木马模式
7.1.10 卡片瀑布流模式
7.1.11 导航模式案例
7.2 移动APP/Web的导航视觉元素设计
7.2.1 导航结构
7.2.2 导航布局
7.2.3 导航颜色
7.2.4 导航文字
7.2.5 导航图标
7.2.6 "使能"的设计
7.2.7 扁平化设计
7.2.8 Google Material Design
7.3 移动APP/Web导航交互设计原则
7.3.1 布局合理
7.3.2 界面简洁
7.3.3 细化场景
7.3.4 减少输入
7.3.5 积极反馈
7.4 展望
参考文献