日期：2015-12-26（原创文章,禁止转载）
全面掌握页视觉导航设计
关于笔者
王愉，北京印刷学院数字媒体艺术专业副教授，江南大学博士（产品设计理论与技术专业），师从辛向阳导师。对于页视觉设计，我已经从事教学科研及设计实践工作达十年之久。页视觉设计越来越接近一门“艺术”，其设计和功能的趋势虽不能说瞬息万变，但也还是在技术的支撑下高速发展，所以我必须不断通过大量的研究与实践来保证我有足够的经验来教授学生，确保他们在大学可以学习到真正实用的技能以应对严峻的就业形势。
在多年的教学和实践中，我非常了解大家的需求，无论是我的学生或者是项目客户，以及实际岗位上的页设计师。
这也是我创作这样一本界面导航图书的信心来源。
创作背景
当下，界面设计已经成为了一个综合性的工作，必须考虑包括视觉设计、信息设计、交互设计、体验设计等等细节，在综合考虑所有因素之后，才能逐渐完善出一个产品。
导航作为站/APP 的核心功能之一，设计得成功与否，直接关系到用户体验是否良好。随着上设备的多元化及浏览器性能的高速发展，站设计需要兼容多种设备和屏幕。传统桌面站的导航设计相对比较成熟了，但随着比如HTML5 等新技术的不断升级，导航设计可以做到更多功能和实现更优质的视觉效果。而在目前移动站和移动应用并存的时期，移动界面导航设计也有了其自身的特点。
在我的教学和实践中，我经常发现，导航设计虽然如此重要，但经常成为第一个被忽视的细节。因为导航设计在商业设计中，比起绚丽的配色、灵活的动效设计，是一个相对“低调”的设计点，好多同学宁愿把精力放在配色、结构和自认为的“体验”等方面，而不愿意过多关注导航这个默默无闻但其实至关重要的设计。
于是，这成为了我创作这本书的源动力，集结之前发表的一系列与导航设计相关的论文以及目前最新的设计案例，成为了本书的雏形。之后，在栾大成的鼓励下，咬牙坚持了2 年多，期间大规模改版两次，修订了4 次，直到交稿半年依然不顾出版社的相关规定继续更新内容，在大成的开一面下变成了目前这个版本，虽然不甚完美，但确实能力至此了。
本书特色
新案例：随着交互设计理论的不断完善、企业对用户研究的深入，站或移动应用产品的导航形式也随之更新。站改版、设计趋势改变等诸多原因，促使本书在撰写过程中不断替换旧的实例或选择新旧两种形态进行对比，使读者能够更加深入地了解行业趋势和主流产品。
理论既是实践的基石也是实践的结晶：在互联和交互设计领域，理论并不是一成不变、永远正确的。本书在阐明理论时辅以大量案例参考，有助于提高读者的理解力。设计实践需要理论的指导，同时，也需要推动理论的发展。实践使理论生动，理论使实践扎实。
精彩试读
［单击图片可大图预览］
目录
第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.2Ajax技术的应用
5.3.3 Flash技术的保全方案
5.3.4链接文本的四种状态
5.3.5链接的响应区域
5.3.6Materal 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章移动AAP和移动Web的导航策略
7.1移动APP和Web的导航模式分类
71.1菜单栏模式
7.1.2标签模式
7.1.3抽屉模式
7.1.4树状模式
7.1.5平铺页面模式
7.1.6组合模式
7.1.7模态视图模式
71.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.8Gooqle Material Design
7.3移动APP／Web导航交互设计原则
7.3.1布局合理
7.3.2界面简洁
7.3.3细化场景
7.3.4减少输入
7.3.5积极反馈
7.4展望
参考文献
点击阅读原文查看图书购买信息
