FE.UX-移动端用户体验设计笔记

本文为《匠心体验 智能手机与平板电脑的用户体验设计》笔记

感官体验

视觉

在分散注意力的环境（交通，走路，会议，餐厅）适用格式塔学派的聚焦点原理：通过创造聚焦点（大小，形状，颜色，位置，动画）使元素从整体画面脱颖而出。滥用聚焦点会让这一机制失效。
突出显示
通过动画
标明内容主次（提防主次不清的扁平化设计）
预防用户分心（提示信息的保留时间）
清理屏幕，给内容让位
让文章的形式利于阅读

• 把阅读内容分成小段
• 控制背景和文字对比度
• 优化文字大小
• 行间距与页边距

触觉

费茨法则

• 把最重要的功能放在离用户手指最近的地方 how-do-users-really-hold-mobile-devices

75%的用户使用大拇指操作手机。

• 平板电脑使用的理论舒适区：

足够大的活动区域，在可触控区域之间拉开距离。

功能可供性

• 通过外形展现
• 添加说明文字
• 增加元素
• 自然功能
• 适应行为的状态
• 避免误导（貌似可操作，实际不行）
• 提供行为反馈

操作手势

优点

• 为屏幕腾出空间
• 不需要用户在屏幕上刻意瞄准目标
• 无需点击防止点击失误犯错
• 能够赋予意义，比如放大地图

缺点

• 可发现性低

约定俗成的操作手势

• 滑动手势上下拉列表
• 水平滑动图片轮播
• 水平滑动隐藏侧边栏/菜单
• 缩放地图
• 通常使用一根手指
• 通常使用简单的操作手势

建议

• 多种方式激活同一种功能
• 让用户猜到操作手势
• 解释操作手势
• 操作手势留给重要功能（不易被发现的手势去激活次要功能）
• 选择容易实现的操作手势
• 避免多余的手势

本体感受体验

通过传感器下达指令

例：

• 摇动手机

  • 确定在该环境是否具有语义上的价值
  • 做出必要解释
  • 让用户能自行关闭
  • 让用户能自行确认是否开启
  • 手机越打越重，摇动越困难
• 转动手机
• 震动
• ...

传感器下达指令原则

• 具有实际意义
• 用于反复出现、使用的功能
• 告知用户可以使用此类功能
• 如果功能很重要，应同时支持触屏和传感器
• 确定用户愿意通过传感器下达指令，最好提供选择关闭
• 让用户容易地关闭，关闭和激活的操作模式最好相同

声音体验

环境声音&短暂提示音

游戏领域建议：

• 短暂提示音应和具体事件相关联
• 提示音越短暂，越不引人注意，就越容易被用户接受
• 除非必要，否则尽量不要使用声音，尽可能避免在经常重复使用的功能或反复出现的事件中采用伴随音效
• 允许用户关闭声音，或者能在设置里调成静音。如果声音出现次数过多，最好让用户轻松点击一下就能将其关闭
• 声音反复出现或者持续存在会让用户感到厌烦，仅在特殊情况或事件中使用伴随声音，才能确保事件的独特性。

声控指令

难点：

• 如何理解用户指令
• 用户该如何记住有效指令

移动应用的内容与导航

简单原则：真正能满足用户在移动中的使用需求。适当隐藏某项功能。

菜单

直观菜单

使用场景

• 当菜单拥有建议能力的时候
• 当用户需要高效率的时候
• 当菜单选项不多的时候
• 当基本不存在屏幕空间不足问题的时候
• 当用户需要常常从一个页面跳转到另一个页面的时候

缺陷

• 菜单占屏比交大
• 无法容纳多数量的选项

弥补缺陷的方法

• 在用户不需要菜单的时候将其隐藏
• “其他”设为菜单导航的最后一个选项，包含后续内容和其他选项。

隐藏菜单

• 优点：占屏比极少
• 缺点：隐藏了菜单具体内容

使用场景

• 当菜单里没任何重要内容
• 当屏幕已经默认显示了大部分功能
• 当用户已经知道或猜到存在一些功能（登录，筛选）
• 当某一个选项属于一系列惯性操作中的一步时（身份验证）
• 当清单内容很长的时候
• 当不同项目之间的用途互不相关时
• 当设计者希望尽可能去除屏幕多余元素
• 当出现2个菜单，彼此形成竞争关系时

弥补缺陷的方法

• 使用约定俗成的醒目图标
• 配上说明文字
• 配上通告文字
• 配上动画

导航菜单

• 图形规格
• 提示用户当前所处位置
• 使用说明文字或图标

鼓励用户浏览

• 切断设计：故意截断内容，按时下文继续
• 提供指示（连续圆点做轮播提示）
• 短时提示
• 解释说明

滚动页面

• 切断设计提示用户使用滚动

• 固定重要元素

  • 行为召唤类
  • 导航类
  • 指示当前情况的元素和标题

导航

简化导航

• 精心设计首页
• 标记区分已访问过的链接

避免导航

• 默认选择
• 优化横向导航
• 减少页面割裂感，让用户减少来回穿梭的感觉
• 信息升级

效率

不浪费任何一次点击

• 尽可能减少步骤
• 保护用户避免犯错，避免过度保护
• 预测用户需求

• 快捷方式

  • 仔细选择哪些功能可以创建快捷方式
  • 选择操作手势还是快捷键
  • 若是操作手势需要考虑如何让用户学会
  • 可视快捷方式当尽量不扰乱屏幕上的其他元素
  • 用快捷方式时，提供其他途径达到相同功能
• 给与反馈，而不是强迫确认

• 简化数据输入

  • 输入框默认数据
  • 建议输入内容
  • 实时确认输入数据
  • 合适的表单元素
  • 输入工具与预期的输入内容相适应

• 鼓励行为召唤

  • 基本行为纪要显著又要具备功能可供性
  • 扩大可触控区域等于优化效率
  • 多种可能激活相同功能等于优化效率
  • 注意语言的表达方式

个性化用户体验

• 设置认知和时间成本必须物有所值

• 鼓励用户进行设置

  • 展示设置功能
  • 解释它的附加价值
  • 在用户真正了解应用前不要强迫
  • 如果流程简单且用户理解，一开始使用时可进行设置
  • 使用说明文字和常用图标

• 充分利用

  • 必须让用户立即体验到设置之后的益处，如果益处不明显，就要向用户解释。
  • 被记录下来的用户偏好必须对用户有益处--提高效率，并要让用户切实感受到这种变化

• 记录偏好

  • 注册账户成本
  • 个人设置在注册账户之前
• 简化用户偏好的设置管理
• 隐性个性化设置

协调一致

• 设置一致性

  • 结构性元素保持不变
  • 尊重习惯

等待体验

管理进入程序前的等待时间

• 限制使用启动动画

  • 不适合启动动画的情况：

    • 频率高，希望快速 如音乐、收音机、天气预报
    • 重复使用时间段：房地产信息、听演讲、关注体育赛事
    • 使用环境有潜在危险：走路或交通工具上
    • 活动本身紧迫或压力：移动过程中、邮件回复

• 插播广告让感觉等待时间延长

  • 避免同时使用插播广告和嵌入广告
  • 停留时间长或间断性使用，不要使用嵌入广告

  • 插播广告注意点

    • 每天一则
    • 限制时长
    • 不改变关闭按键位置
    • 是否先展示应用程序再显示广告

  • 嵌入式广告注意点

    • 放在屏幕边缘
    • fixed使得阅读文章不便

• 模仿进入应用程序

  • 模仿页面结构
  • 骨架
  • 逐渐显示加载内容

• 充实等待时间

  • 至少要动画或者文字提示
  • 避免把注意集中在加载过程上
  • 提供详细信息
  • 丰富多样的等待提示

• 舒适地等待

  • 情感设计
  • 模仿瞬间加载

用户教学与用户参与

向用户展示什么

• 教学不是广告（不要陈述列举程序功能）
• 不要解释显而易见的元素
• 精心选择推荐内容（轮播教学页数控制）

选择恰当的教学时机

• 慎用“使用前教学”
• 初次使用教学信息量控制
• 根据使用次数、使用进度展开教学
• 利用空白页展开教学
• 潜移默化的教学（低调动画）

如何解释说明

位置

• 专属页面：清晰明确，但侵入性强
• 将内容限制在屏幕一角/开辟专属区域
• 帮助专栏：最好作为补充

形式

• 空间有限时文字更有效，长度越短越易理解
• 专属页面用图示配简介文字
• 说明的东西越多，表现手法就应该越多样
• 介绍手势：手的图示、箭头指示、抽象化其他元素
• 与界面结合

• 动态教学

  • 小幅度移动吸引注意
  • 动画展示实际操作
  • 视频教学
  • 引导实践
• 明确区分教学内容与操作界面

委婉建议

• 适可而止
• 允许调换内容或跳过步骤
• 行为召唤的表现形式影响用户体验

行为召唤：指代表移动应用中某一功能的按钮、链接或图标。成功的行为召唤可以让用户迅速发现，并鼓励用户采取行动。

情感体验

• 定制功能，节省交互时间
• 美学一致性交互
• 个性元素
• 画龙点睛的细节
• 人性化
• 修饰表格，出错信息和空白状态
• 象征性图标传递情感
• 充分利用所处环境
• 凭借动画赋予情感
• 游戏化：向本身不带游戏性质的领域汇总引入游戏机制
• 专为高级用户提供一些元素