# About Face 4交互设计精髓（下）：交互细节
# 为桌面应用而设计
# 剖析桌面应用
主窗口和辅窗口
主窗口的结构
- 菜单和工具栏
- 内容窗格
- 索引窗格
- 工具板
- 侧栏
# 桌面系统中的窗口
层叠窗口
平铺窗口
虚拟的桌面空间
全屏应用
多窗格应用
窗口状态
窗口和文档：MDI vs SDI
窗口的运用
- 不必要的房间
- 必要的房间
# 菜单
把菜单作为教学工具
禁用的菜单项
复选标记菜单项
菜单上的图标
快捷键
助记符
级联菜单 vs 单层分组
# 工具栏、工具板、侧栏
工具栏和菜单
工具栏 vs 非模态对话框
工具栏按钮
工具提示
禁用工具栏控件
工具栏的新用法
可移动工具栏
可定制工具栏
情境(弹出)工具栏
ribbon控件
工具板
侧栏、任务窗格、抽屉
# 点操作、选择、直接操作
鼠标的人体工学
鼠标按键和控制
- 鼠标左键
- 鼠标右键
- 滚轮和滚球
- 元键
- 指向
- 单击
- 指向和单击的组合
- 单击拖放
- 双击
- 合击
- 鼠标释放和按下事件
触控板、轨迹球、手势传感器
光标
选择
- 命令次序与选择
- 离散选择和连续选择
- 互斥
- 添加选择
- 成组选择
- 选择的视觉提示
插入和替换
拖放
- 拖放的视觉反馈
- 指示拖动受范性
- 指示拖放候选对象
- 插入目标
- 完成时的视觉反馈
- 自动滚屏
- 避免拖放抖动
- 精确滚动
控件操作
- 模态工具和工具板
- 加载光标工具
2D对象操作
- 调整位置
- 调整大小和形状
- 连接
3D对象操作
- 显示问题和习惯用法
- 多重视点
- 基线网格、景深效果、阴影和标杆
- 准线和其他的丰富视觉暗示
- 线框和边框
- 输入问题和习惯用法
- 拖动阈值
- 选取问题
- 对象旋转、摄像机移动、旋转和缩放
TIP
⭐️ 对话框是一个房间，去之前要有个好理由
⭐️ 将功能置于需要它们的窗口中
⭐️ 用菜单来提供一条学习的途径
⭐️ 禁用掉不适用的菜单项
⭐️ 相同的命令要使用相同的视觉符号
⭐️ 工具栏为有经验的用户提供快速访问常用功能的途径
⭐️ 所有工具栏和图标控件都应该使用工具提示
⭐️ 浏览和选择任务要同时提供鼠标和键盘支持
⭐️ 用光标形状变化表明元键的用法
⭐️ 单击意味选择数据或对象，或改变控件状态
⭐️ 双击意味着单击再加上动作
⭐️ 在对象或者数据上按下鼠标意味着选择
⭐️ 在控件上鼠标按下意味着预备动作；鼠标释放意味着执行动作
⭐️ 要让选中这种状态，在视觉上明确而醒目
⭐️ 拖放候选对象必须在视觉上表明它们的接受能力
⭐️ 拖动光标必须在视觉上表明源对象
⭐️ 任何可滚动的拖放目标对象都必须支持自动滚屏
⭐️ 所有拖动都要去颤动
⭐️ 任何要求精确对齐的程序必须提供精确的滚动的游标工具
# 为移动设备和其他设备而设计
# 剖析移动应用
移动设备的外形大小
- 手持设备
- 平板
- 小平板
手持设备上的应用
- 堆叠
- 屏幕轮显
- 方位和布局
平板应用
- 堆叠和索引窗格
- 弹出控制窗格
- 基于方向的布局
- 移动布局 vs 类桌面布局
- 类硬件控件布局
小平板应用
# 关于移动导航、内容、控制的习惯用法
浏览控件
- 列表
- 网格
- 内容轮显
- 泳道
- 卡片
导航和工具栏
- 标签栏
- “更多...” 控件
- 标签轮显
- 导航栏和动作栏
- 工具栏和工具板
- 垂直的工具栏和工具板
- 工具轮显
- 菜单栏：移动设备上应避免使用的习惯用法
抽屉
- 次要动作抽屉
- 双抽屉
- 条目级抽屉
- 要避免的抽屉行为
- 关于抽屉的争议话题
轻拍显示及其他直接操作
- 轻拍显示控件
- 直接操作控件
搜索、排序、筛选
- 隐式排序 vs 显式搜索
- 构建搜索需求
- 排序和筛选
欢迎和帮助界面
- 导览
- 覆盖层
- 工具提示覆盖层
# 多点触摸手势
轻拍选择、激活或开关
轻拍保持
拖滚
拖移
拖动控制
向上/下滑动
向左滑动
向右滑动
双指张合
旋转
多指滑动
# 应用间集成
# 其他设备
一般性设计原则
- 不要把你正在设计的产品认为是计算机
- 把硬件和软件设计集成在一起
- 让使用情境来驱动设计
- 模态的运用要明智，如果有的话
- 限定范围
- 要根据显示器的分辨率来考虑导航
- 尽可能简化将输入
为专用手持设备而设计
- 要考虑人们会怎样持握和携带该设备
- 尽早决定设备是单手操作还是双手操作的
- 避免使用多个窗口或者弹出窗口
为信息台而设计
- 交易型 vs 探索型
- 在公共场合下的交互
- 管理输入
为十英尺界面设计
- 屏幕的布局和视觉设计要清楚
- 屏幕上的导航要简单
- 始终牢记控制集成
- 遥控要尽可能简单
- 在遥控器上加一个小显示屏
- 重点要放在用户的目标和活动
为汽车界面设计
- 手离开方向盘的时间要尽可能短
- 从一个屏幕到下一个屏幕的显示布局要一致
- 尽可能地运用直接控制对应关系
- 小心选择输入方式
- 硬件空间的物理外形区别要尽可能大
- 显示屏在视觉设计上的对比度很强烈，视觉层次要非常浅
- 模式和情境的转换要简单并且易于理解
- 提供声音反馈
为语音界面设计
- 按照用户心理模型来组织和命名功能
- 一定要明示出当前可选的功能
- 任何时候都可以返回到上一步和最高一级
- 任何时候都可以转到人工接听电话
- 给用户足够的时间来响应
TIP
⭐️ 大多数移动应用是暂态的
⭐️ 要限制动画式屏幕转换的次数和出现的方向
⭐️ 让导览引导首次使用的用户
⭐️ 用覆盖层展示手势的用法
# 网页的设计
# 基于页面的交互
导航和寻路
- 一级导航
- 二级导航和更深层级的导航
- 内容导航
- 搜索
滚动
- 页眉和页脚
- 分页 vs 无限滚动
# 移动网页
# 未来
TIP
⭐️ 采用永久固定的页眉来保持情境
⭐️ 带有横向链接的“面包渣”让导航更快捷
⭐️ 自动填充、自动推荐、分面搜索可以让用户更快地找到所需的东西
⭐️ 让滚动变得更投入
⭐️ 无限滚动与网站页脚是互斥的习惯用法
⭐️ 如果你的网站只有一个版本，一定要把它设计成自适应
# 设计细节：控件和对话框
# 控件
命令控件
- 按钮
- 图标按钮
- 超链接
选择控件
- 复选框
- 开关按钮
- 状态切换按钮：一种应该避免的选择习惯用法
- 单选按钮
- 开关
- 组合图标按钮
列表控件
- 做记号
- 从列表中拖放
- 列表排序
- 列表中的水平滚动
- 在列表中输入数据
- 下拉列表和弹出列表
- 组合框
- 树形控件
输入控件
- 有界输入控件和无界输入控件
- 微调器
- 刻度盘和滑块
- 拇指轮
- 其他有界输入控件
- 无界输入：文本编辑控件
验证输入控件
- 主动验证和被动验证
- 暗示
- 处理出界数据
- 单位和度量
- 不要使用文本编辑控件输出
显示控件
- 文本控件
- 滚动条
- 分割线
- 抽屉和拉动杆
# 对话框
合理运用对话框
对话框的基本交互
模态和非模态对话框
- 区分模态对话框和非模态对话框
- 模态对话框的问题
- 非模态对话框的问题
- 非模态对话框和撤销
- 非模态对话框和边栏
对话框的五个目的
- 属性对话框
- 功能对话框
- 进度对话框
- 通知对话框
- 公告对话框
管理属性对话框和功能对话框
- 选项卡对话框
- 扩展对话框
- 级联对话框
# 消除错误、警告和确认
错误对话框
- 错误对话框有什么问题
- 到底是谁的错
- 错误消息不管用
- 如何消除错误消息
- 让错误不可能发生
- 正面反馈
- 难道就没有特例吗？
- 改进错误消息：最后一招
警告和确认
- 警告：此地无银三百两
- 如何消除警告
- 确认：喊“狼来了”的对话框
- 如何消除确认对话框
# 魔鬼在细节里
TIP
⭐️ 链接用于导航，按钮用于动作
⭐️ 用图标来区分列表中重要的文本项
⭐️ 绝不要水平滚动文本
⭐️ 有界输入要使用有界控件
⭐️ 仅供输出的文本用非编辑控件(显示控件)显示
⭐️ 把主要的交互操作放在主窗口内
⭐️ 对话框适用于放那些主交流之外的功能
⭐️ 对话框非常适合用来整理关于单一主题或应用程序功能的信息
⭐️ 在功能对话框的标题中使用动词
⭐️ 在属性对话框的标题中使用对象的名字
⭐️ 区别对待模态对话框与非模态对话框
⭐️ 不要在非模态对话框中使用终止命令按钮
⭐️ 不要动态地改变终止命令按钮的标签
⭐️ 应用程序无响应状态，必须通知用户
⭐️ 绝不要用临时型对话框作为错误对话框或确认对话框
⭐️ 所有交互的习惯用法都有其适用范围
⭐️ 不要堆叠选项卡
⭐️ 错误对话框愚蠢地停止进度，应该避免
⭐️ 让错误不可能发生
⭐️ 当软件告诉用户他们失败时，用户会觉得很没面子
⭐️ 做，不要问
⭐️ 让所有的动作都可以撤销
⭐️ 给用户提供非模态反馈，避免用户犯错