互联网产品视觉设计-导航篇
2016-07-17 19:25:25 0 举报AI智能生成
本书介绍了导航在产品设计中的重要性，以及一些设计要素和方法
作者其他创作
大纲/内容
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.5 视觉影响
分组及对齐
视觉层次
视线流
5.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 优秀导航案例
1. 界面导航的设计理论和原则
1.1 导航需求
针对目标用户不同的使用场景进行设计，解决“我在哪”，“我可以去哪儿”，“如何去”的问题
1.2 导航定义
1.3 以用户为中心
1.3.1 需求层次理论
生理需求
安全需求
社交需求
尊重需求
自我实现需求
1.3.2 基于UCD的导航设计
可用性
易用性
操作有反馈
误操作恢复
视觉美观
1.4 用户体验要素
用户体验蜂巢图
可用性
易用性
满意度
可信度
可实现性
可识别性
用户体验要素
策略层--产品目标、用户需求
范围层--功能、内容
结构层--交互设计和信息架构
框架层--导航设计、信息设计、界面设计
表现层--视觉设计
1.5 情感化设计
三个水平
本能水平——外形、质地、手感
行为水平——功能、性能、可用性
反思水平——自我形象、个人满意、记忆
情感特性
情感是人类的特质
情感是快速的
情感是基于情景的
搜索信息过程
启动阶段
选择阶段
探索阶段
确切表达阶段
收集阶段
展示阶段
1.6 最小努力
页面层级少，控制4层内
符合阅读习惯
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 交互设计
反应人与产品、环境之间的关系
描述特定情景下的用户行为以及系统产生的反馈与配合
关注用户的思考方式和行为方式
用户执行任务的模式
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 导航视觉原色设计
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 交互设计原则
7.3.1 布局合理
7.3.2 界面简洁
7.3.3 细化场景
7.3.4 减少输入
7.3.5 积极反馈
7.4 展望
0 条评论
下一页
