《匠心体验》是一本不错的案例集，我试着提炼一些交互设计框架。

交互展示

从元素的形式、内容和呈现方式三个方面来看。

元素的形式

我把它分为界面元素和硬件交互元素。

界面元素

界面元素有按钮、输入框、图片等。元素的基本属性有点击态、可供性等。

可供性具体不解释了。要注意：

• 有些元素有自然可供性（如图片，一些产品图片等很容易被认为可点击）
• 要正确表达
• 无可供性时可制造

没有正确表达可供性：图片、导航傻傻分不清。

图1.jpg

界面元素可进行组合成为模块。我能想到的有导航。导航有直接导航、汉堡导航等。但有时，也要想着避免和简化导航。

平板 App：Monoprix Courses

图2.jpg

一个反例：达美乐披萨 App
首页只有导航，迫使用户必须从一个选项开始。

图2-2.jpg

硬件交互元素

分为手势和传感器。

手势

最适宜的用法：符合语义学含义（如滑动移除）

特点：

• 可发现性低
• 容易忘记

因此最好应用于最重要、高频功能，便于用户习得。

一个矛盾需要权衡：惯用手势的语义学含义和最重要功能矛盾

Instagram：

图3.jpg

传感器（运动、位置、环境等）

最适宜的用法：符合语义学含义

Boggle：

图4.jpg

Google Translate：

图4-1.jpg

摇一摇的坏处：

• 误操作
• 手机越来越重

最好应用于最重要、高频功能，便于用户习得。

总结一下，元素的两种分类方式：
界面／硬件交互
单一元素／组合

元素的内容

信息／数据

设计时注意考虑：

• 突出性
• 简洁性

元素的呈现方式

包括布局方式（空间上）、出现顺序（时间上）

主要找到的呈现方式有强化和暗示。

强化

• 声音
• 动画
• 文字说明
• 对比色

这里也有一个矛盾需要权衡。即强化 vs 入侵性。有强化作用的，往往入侵性更强，可能并不友好。

暗示

• 语义学暗示（动画）

杂志 Courrier International：

图5.jpg

• 露出一截的暗示（露出下一个产品／信息的部分）
• 显示在背景的暗示

Houzz：暗示从第二张照片开始消失。

图5-1.jpg

用户、场景

同样的功能，在设计时需要考虑不同的用户、用户在不同时间点的操作。不同的场景。

用户的操作

刚刚进行的操作 vs 用户的目标

我们在设计时要去满足用户的目标、需求，也要考虑用户在不同时间历程上的操作。例如刚刚进行的操作，需要设计反馈。

世界报：

图6.jpg

满足需求的操作 vs 鼓励用户进行的操作

有些考虑如何满足需求，而有些时候，考虑如何在没有需求时鼓励用户操作。

用户的分类

第一次，很多次
很少用，经常用
新手、中间、专家

这些都会影响交互的设计。

场景的分类

正向场景 vs 约束场景

约束场景有：等待、报错／异常、广告

重点聊一下等待。

实际等待时间 vs 感受等待时间

这个概念挺重要，我们可以通过设计降低用户感受的等待时间。

什么时候等待时间会格外漫长呢？

• 搜寻重大、敏感的信息时：阅读恋人的回信、打开重要文件等。
• 任务本身具有时间压力，活动具有时间限制：为持续时间短的场景拍摄照片、录制声音、记下掠过心头却又容易忘记的想法。
• 使用环境压力大：尤其在户外，或环境不够安全，或希望保持一定私密性，如在课堂上、餐桌上、开会时。

那么可以做些什么呢？

• 预加载
• 展示进程
• 适应 app 的: 游戏类加载时显示 tips ／ 新闻类加载时显示警句

Yummly：

图7.jpg

不要做：

• 启动画面（启动画面像挡在用户面前的一堵高墙）
• 启动画面+游戏
• 启动画面+广告

原则（认知）

这里介绍一些设计时的原则，或者在设计时需要平衡的部分，偏认知层面考量。

限制（用户感受到的）时间堆积

比如点击后如果去到不同页面会让用户觉得漫长、乏味。
可以做浮层，在背景中暗示用户可以随时回到原来界面。

我们甚至可以假设，用户可能敢冒更大风险去浏览自己可能不喜欢的内容，因为他知道返回原来页面或去往其他页面的操作十分便捷。

要说明、引导 vs 没人看说明，要一用就会

前者如有些 icon 不如文字+ icon。有些手势需要解释。
这里的原则是在保证用户理解度、无歧义的基础上尽可能减少认知负担。

简洁 vs 不完整、受限制、贫乏

追求简洁，但不可以后者。

效率 vs 价值

提高效率的方式：

• 快捷方式
• 简化数据输入
• 减少步骤
• 利用硬件交互元素（扫码识别卡号，代替输入）
• 扩大可触控区域
• 尊重习惯：惯用的图标、手势

扩大可触控区域：

图8.jpg

但也要考虑对效率的追求，是否伤害了用户价值。

Messages：

图9.jpg

保护用户 vs 打扰用户

例如有些删除操作，为了避免误操作，而设置的过于冗长。
再如，我们需要给予反馈，而不是强迫确认。

Allocine：

图10.jpg