设计行为和形式-aboutface 摘抄2

这里是about face 的第二部分的书摘,也是最后一部分

良好产品行为的基础

设计价值

设计方案应该有的特点

  • 合乎伦理:不造成人际关系,身心,经济环境等伤害,改善人类处境(增进理解,提高效率,促进平等和多样性)
  • 目标明确:帮助用户完成目标和期望,符合场景和用户能力水平
  • 实用:帮助机构实现目标,满足商业和技术需求
  • 优雅: 代表最简单而完整的方案,拥有内在一致性,恰当顺应,调动认知和情感

交互设计原则

作用于不同层面细节,可分为

  • 概念原则:界定产品定义,产品如何融入广泛的使用场景
  • 行为原则:产品在情景中应有的行为
  • 界面原则: 描述行为和信息有效的视觉传达策略

设计原则的主要目的之一是优化用户体验,对于生产工具就是降低工作符合

交互设计模式

设计模式是捕捉有效设计方案并应用于类似问题的方法

交互设计模式的类型

  • 定位模式: 应用于概念,帮助界定产品对于用户的整体定位
  • 结构模式:解答如何在屏幕上安排信息和功能元素之类的问题
  • 行为模式:解决功能或数据元素的具体交互问题

数字产品的礼仪

设计体贴的软件

  • 关心用户喜好:收集数据
  • 恭顺: 听从命令
  • 乐于助人: 主动提供帮助
  • 具有常识
  • 有判断力
  • 遇见需求
  • 尽责
  • 不因自身原因加重用户负担
  • 及时通知
  • 敏锐
  • 自信
  • 不过问过多问题
  • 失败也不失风度: 缓存崩溃前的输入
  • 知道什么时候调整规则
  • 承担责任
  • 帮助用户避免低级错误: 不寄出空白邮件

设计聪明的产品

  • 利用计算机的空闲周期
  • 有记忆,预测用户行为
  • 记住细节
  • 缩小决策数量

设计社交产品

  • 了解设计规范和市场规范的区别
  • 帮助用户展示最好的一面
  • 允许简单协作
  • 知道进退
  • 增长网络健康
  • 尊重社交圈的复杂性
  • 尊重隐私
  • 恰当处理反社交行为

平台和姿态

产品平台

平台是描述产品几个重要特性的简写,包括:物理形态,显示面积,分辨率,输入输出方式,网络连接,操作系统和数据库能力。

常见的平台:桌面软件,网站,电话,平板电脑,电话亭,车载系统,游戏机

产品姿态

不同平台适合不同的行为姿态,姿态是行为的基础,决定了许多设计内容的重要原则

  • 独占姿态:长期占据使用者的注意力
    • 锁定终极用户
    • 慷慨使用屏幕空间
    • 使用保守设计风格
    • 丰富视觉反馈和输入方式
    • 文档为中心
  • 暂时姿态:短暂时间就关闭,按需调用,需要细致显眼的展示信息
    • 明亮清晰
    • 保持简一: 需要的信息和功能在同一个窗口
    • 记住用户选择
  • 后台姿态:不与用户互动

为中级用户优化设计

大部分人停留在中级阶段,他们愿意学习但是没有时间

扭转界面

要把大部分时间放在满足中级用户上,把常用导航最少话,常用工具和部件放在最显眼的位置

  • 付出和回报相称
  • 渐进式展开:隐藏高级部件
  • 三个调整部件的原则:使用频率,转换程度,风险承担程度

为三层用户设计

目标包括三层,迅速让新手成长为中级用户,不阻碍用户成长为高级用户,保证中级用户探索愉快

  • 新手:减少挫败,快速而有针对的学习,提款机,博物馆等优先考虑新手
  • 专家: 专家的选择对市场有重大影响,新手选择产品参考专家意见。专业产品要对专家设计
  • 中级用户: 快速进入常用工具,在线帮助,知道高级功能在哪

编配与流

流是人们全身心投入,对周边视而不见的状态,为了创造流,与软件的交互要透明。

编配是和谐的组织

和谐交互

  • 遵循用户心里模型
  • 少就是多
  • 让用户发命令而不是讨论
  • 提供选择而不是问题
  • 让必要的工具近在咫尺
  • 无模态反馈:不中断用户工作
  • 预测到可能性:不必问用户是否要保存
  • 在背景中考虑信息
  • 反应对象和程序的状态
  • 避免不必要的报告
  • 避免白纸
  • 区分命令和配置:允许直接执行打印,配置的部分独立出来
  • 不要用对话框报告常态内容
  • 隐藏危险操作按钮
  • 优化响应,允许延迟
    • 0.1秒,即刻响应
    • 1秒:有响应,注意到延迟
    • 10秒内:用户清楚注意到系统变慢,需要进度条
    • 10秒后,用户可能离开,应允许后台运行,提供剩余时间,取消机制

动作、时间与过度

动画和切换有助于

  • 集中注意力
  • 展示对象与动作的关系
  • 在视图和对象状态的切换中保持背景不变
  • 让人能看到进度和动作
  • 创造虚拟空间,帮助用户实现状态转变或功能转变
  • 激发融入和进一步操作

交互品质

  • 短暂、愉快和响应:不超过一秒
  • 简单有意义和恰当
  • 自然和顺滑:与真实交互一样,模拟弹性,重力,尺寸等属性

减少工作、消除负担

用户交互时执行四类工作

  • 认知工作:理解产品的行为,文本和组织结构
  • 记忆工作:回忆产品的行为,命令,密码,关系
  • 视觉工作: 找到对象,解码布局,区别界面元素
  • 肢体工作:按键,手势,导航

负担的类型

开车去办公室,开车能实现目标,开车门是额外工作,是负担任务

  • 导航负担
    • 多个屏幕,视图,页面之间的导航:打断工作流,强迫进入新的情景
    • 窗格之间导航:窗格过多会造成视觉杂乱和困惑
    • 工具和菜单之间导航:花费更多力气
    • 信息的导航:滚动,缩放,链接
  • 拟物化负担:限制交互,让屏幕空间变拥挤
  • 模态负担
    • 错误,通知和确认信息
    • 请求许可
  • 样式负担:视觉样式不应牺牲实用性和可用性

消灭负担

  • 减少要去的地方的数量:减少页面和视图,限制控件,窗格数量,减少滚动
  • 提供导航标志
  • 提供概览:帮助用户定位,面包屑
  • 控件映射到功能
  • 避免层级关系
  • 不要重复机械时代的模型

负担陷阱

  • 强迫用户到别的窗口完成本窗口相关功能
  • 强迫用户记住事物在层级系统的位置
  • 强迫用户调整窗口大小位置
  • 强迫用户重新设置
  • 强迫用户填充字段时有完整度
  • 让用户确认行为
  • 让用户行为产生错误

隐喻、习惯用法及能供性

界面范式

  • 实现中心范式: 软件的命令流程反应内部的结构,如按部门划分而不是用户需要划分的企业官网
  • 隐喻范式: 按照用户在真实生活的经验来建立视觉和功能的联系
  • 习惯用法范式: 需要学习,如鼠标,手势

创建习惯用法

交互词汇包括三个层次

  • 原语:单一动作和反馈机制,如单机,拖拽,按键,光标,文本
  • 组合:通常的输入输出:双击,选择,高亮
  • 习惯用法:删除,创建,输出,拖动,下拉,排序

手动能供性

决定用户可能如何使用的基本属性,如门旁边的按钮,能供性就是门铃

用手操作事物的本能是手动能供性,如按钮让人想点击,把手让人想抓住。

渲染按钮,就建立了契约,约定用户按下的时候,视觉上向下凹

直接操作与顺从

直接操作策略的组成

  • 应用设计数据对象的视觉呈现
  • 在对象上执行的视觉和手势机制
  • 动作的即刻可视结果

如拖动物体移动位置

向用户表达对象顺从的方法

  • 静态视觉能供性做为对象的一部分
  • 动态改变视觉能供性来适应焦点或其他系统时间的变化
  • 交互时改变视觉能供性

如鼠标经过按钮时,按钮变成高亮

数据输入,存储和检索

数据输入

  • 数据完整vs数据免疫:比起屏蔽不良数据,更好的是系统有数据免疫力,不受信息不连贯和中断的影响。如输入错误时,提供视觉反馈
  • 处理丢失数据: 程序应该更灵活,帮助用户校验,允许信息缺失
  • 规避机制: 记录用户动作,以供检查
  • 审核和编辑; 用户犯错时,提供警告,而不是盲目拒绝

存储

合理的文件模型

数据检索

物理世界

  • 按位置检索
  • 按索引检索: 图书馆

数字世界

  • 位置检索
  • 标示检索: 文件名
  • 关联检索或属性检索: 创建文档的用户,修改时间,文档大小,编辑次数

防止错误 通知决定

反馈

  • 富视觉非模态反馈: 利用屏幕动态的像素及时显示信息,用户不需要操作就能及时看到和理解反馈。例如苹果安装软件时的进度指示器
  • 听觉反馈:避免负面声音反馈,提供正面声音反馈

撤销

撤销应该符合心理模型,让人勇于尝试,探索,可以让用户安心。

确保能支持常用工具,避免暗示用户操作失败,撤销不是扭转错误,而是帮助探索

撤销的类型

  • 渐增和过程动作:包含数据操作的是渐增动作,改变格式等是过程动作
  • 隐秘撤销和解释性撤销:是否有提醒
  • 单次撤销和多次: 单次撤销的第二次撤销会恢复被撤销的操作。多次撤销是撤销多个操作
  • 恢复:取消已被撤销的操作

对比和预览

某些软件可以同时预览照片应用多个滤镜的效果

为不同的需求而设计

  • 帮助和辅助界面

    • 引导教程:要有跳过的按钮,还有最后可以重新显示。
    • 库和模板: PPT
    • 输入和内容区域提醒: palaceholder
    • 向导: 配置应用,回答问题
    • tooltip
  • 可定制化

    • 个性化:可预览可撤销
    • 配置
    • 支持用户的习惯用法
  • 本地化和全球化
    • 文案的空间
    • 单词排序
    • 时间格式,日历
    • 货币
  • 无障碍:让用户理解指示,信息和反馈,操控空间并输入,能轻易导航。
    • 利用操作系统的无障碍工具和指南
    • 不覆盖用户的配置:字体大小,颜色等1
    • 启用标准的键盘访问方式
    • 提供显示选项: 高对比度,色盲
    • 提供纯视觉和纯听觉输出
    • 不用闪动等视觉元素:可能引起癫痫
    • 简明精炼的语言
    • 允许设置较长的响应时间
    • 一致的布局和任务流程
    • 给视觉元素加入文本释义

整合视觉设计

视觉节目设计元素

情景、形状、大小、颜色、方向、纹理、位置、文字和版面、信息层级、动作

视觉界面设计原则

  • 传达风格,传播品牌
  • 让用户认清视觉层次
  • 对齐网格,创建逻辑路径,界面元素平衡
  • 响应命令
  • 吸引注意力到重要事件
  • 有凝聚力,保证体验一致
  • 最小化视觉工作量
  • 保持简单

视觉信息设计的原则

  • 加强视觉对比
  • 显示因果关系
  • 显示多个变量
  • 一个界面内整合文本,图形和数据
  • 确保内容的质量,相关性和完整性
  • 在相邻空间显示事物
  • 可量化的数据就要量化
支持作者

如果我的文章对你有帮助,欢迎 关注和 star 本博客 或是关注我的 github,获取更新通知。欢迎发送邮件到hpoenixf@foxmail.com与作者交流