《Designing Interfaces》

 

00  前言

“容易使用的界面，要设计得让人有熟悉感”

熟悉并不一定意味着某个给定的应用要跟已经定义好的产品流派相同。只要应用的各个部分容易识别，而且部分与部分之间的关系清楚，人们就能将已有的知识应用到一个前所未有的界面上，并且能弄明白它是怎么用的。

 

01  用户做些什么

用户研究：

• 他们使用软件的目标
• 他们实现这些目标时需要完成的具体任务
• 他们平常使用的语言和词汇
• 他们呢使用同等软件的技巧
• 他们对你设计的目标对象的态度，以及不同设计对这些态度的影响

 

用户愿意花多大的努力来学习使用你的界面？ 新用户-即时需求 ；熟练用户 ；中间状态

 

用户心理模式：

安全探索：“让我进行探索，不会迷路，也不会陷入麻烦”

即时满足：“我现在就完成某件事，是现在，不是以后”

满意即可：“这样就够了，我不想花更多的时间来做得更好”

中途变卦：“我在中途改变注意了”

延后选择：“我现在不想回答这些，快点让我完成就行了”

递增构建：“让我改改。还是不对，让我再改一下，这下好多了”

习惯：“那个操作在别的地方搜可以，为什么在这里不行？”

空间记忆：“我敢发誓，这个按钮一分钟以前还在这里。它哪里去了？”

前瞻记忆：“我把它放在这里，提醒我以后来处理”

简化重复工作：“我得重复多少遍？”

支持键盘：“别让我用鼠标”

旁人建议：“其他人是怎么说的？”

 

02  组织内容：信息架构和应用结构

 

• 双面板选择器
• 画布加调色板工具条
• 单窗口深入
• 可选视图
• 向导
• 需要时显示
• 有趣的分支（超链接）
• 多级帮助

 

03  到处走走：导航，路标和找路

让距离保持简短 良好的标记，地图，环境线索

 

• 清楚的入口点：只在界面上显示几个入口点；让它们面向任务，并具有自描述性。
• 全局导航
• 中心和辐条（NOKIA 菜单 手机界面）：该模式特别适用于小屏幕，并常常和单窗口深入一起使用
• 金字塔：把后退、下一个及向上放在每个序列页面上
• 模态面板：只显示一个页面，在用户解决好当前的问题之前没有其他任何导航选择
• 序列地图
• 面包屑层级结构：A > B > C
• 注释滚动条
• 颜色编码栏目：使用颜色来标记一个应用或者网站中某个网页所属的栏目
• 动画转化
• 逃生舱：在每个限制了导航选择的页面上，放置一个按钮或者链接，让用户能明白无误地离开这个页面，回到熟悉的地方。取消按钮

 

 

04  组织页面：页面元素的布局

视觉层次，区分重要程度：

• 左上角优先
• 空白字体对比：字体越大、越粗，就表示这部分内容越重要
• 前景颜色和背景颜色的对比：例如把白色的文字放在黑色的背景上，会得到一份在白色的页面上特别强调的声明
• 位置、对齐、缩进：缩进的文字从属于任何它上面的内容
• 图形（例如线条、方框、颜色条）：在一个方框或分组中的东西属于一个整体

视觉流，接下来我该看到什么：

• 从上到下，从左到右是默认的视觉流方向
• 强烈的焦点会首先吸引眼球，然后才是那些次之的
• 对页面内容的理解会随着用户选择看哪一部分而改变

分组和对齐，谁跟谁一起

四种格式塔原则：相邻性、相似性、连续性、封闭性

 

• 视觉框架
• 中央舞台：中央舞台部分至少应该有它左右边距的两倍宽，上下边距两倍高
• 带标题的栏目
• 卡片堆：小于等于6个
• 可关闭的面板
• 可移动的面板
• 右对齐/左对齐：在设计一个两竖栏的表单或表格时，让左边竖栏的标签右对齐，而右边竖栏的元素左对齐
• 对角平衡：用一种不对称的方式布置页面，但是，通过把视觉重量放在左上角和右下角来使页面保持平衡
• 属性表
• 响应式展开
• 响应式允许
• 流式布局：当用户调整窗口大小的时候，相应地调整页面元素的大小和位置，让页面保持填满的状态

 

 

05  完成任务：动作和命令

• 按钮分组：如果超过3个或者4个动作
• 动作面板
• 突出的“完成”按钮
• 智能菜单项
• 预览
• 进度提示
• 可取消性：提供某种方式快速取消一个耗费时间的操作，而没有什么负面的影响
• 多级撤销
• 命令历史
• 宏

 

 

06   显示复杂数据：树、表格及其他信息图形

前摄的变量（谁和谁有关系）色调、位置和对齐、亮度、方向、颜色饱和度、大小、底纹、形状

 

• 总览加细节
• 数据显示
• 动态查询
• 数据刷：让用户在一个视图里选择数据，然后在另外一个视图里同时显示这些选中的数据
• 局部缩放
• 斑马行：浅蓝色和白色、米白色和白色、或者不用程度的灰色
• 可排序的表格
• 跳转到对象：输入名字时跳转到对象
• 新对象行
• 级联列表
• 树状表格
• 多Y值图标
• 大量小对象：平铺成连环画式的长条，要么平铺成二维矩阵
• 树状地图

 

07  从用户获得输入：表单和控件

• 容错模式
• 结构化的格式
• 填空
• 输入提示：提示在文本框旁边
• 输入提醒：提示在文本框里
• 自动完成
• 下拉选择器
• 图示选项
• 列表建造器
• 良好的默认值
• 错误显示在同一页

 

 

08  Builder和编辑器

• 就地编辑
• 智能选择
• 组合选择
• 一次性模态：当一个模态打开的时候，执行一次操作，然后自动切换回默认模态或前一个模态
  弹性加载模态：SHIFT
• 强制调整大小
• 磁性吸附：对象可以吸住靠近它们的其他对象
• 对齐指示线
• 粘贴变种

 

 

09  修饰外观：视觉风格和美感

颜色：

• 总是在深色背景上放置浅色的前景对象，或者反过来--要测试，把这个设计放到一个PHOTOSHOP那样的图像工具中，并让它饱和（让它变成灰度图片），看看效果怎样。
• 永远不要采用红色和绿色来区分重要的元素，因为很多色盲或者将看不到它们的区别。
• 永远不要在明亮的红色和橙色背景上显示蓝色的小字，或者反过来。人眼不容易阅读这种互补色之下的文字
• 需要表示尊重、保守的网站和界面常常主要使用冷色调，特别是蓝色
• 浅色背景指白色、米色和浅灰色。深色背景的感觉更深刻、更阴暗，或者更有活力
• 强烈的对比会让人觉得紧张、有力和大胆；而弱的对比会更平滑，更让人放松
• 高饱和度的颜色，或者说纯色-例如明亮的黄色、红色和绿色-让人觉得生动、明亮、有力、温暖。但是如果过度使用高饱和的色彩会让视觉疲劳。

 

• 深色背景：用图片或渐变颜色作为页面的背景，能可视化地拉开和前景元素的距离
• 少一点色彩，多一些价值
• 角落处理：使用斜纹、曲线或者镂空来装饰界面上的方框角落，让角落处理和整个界面保持一致
• 边界回应字体：在描画边界和其他线条的时候，使用设计中某种主要字体所使用的颜色、粗细和曲线
• 发丝：在边界、水瓶标尺和Texture上使用的一个像素宽的线条
• 粗细字体对比
• 皮肤