微观角度：原型图的交互说明该怎么写

上一篇文章从宽泛的宏观角度说明了输出原型图交互说明需要注意的事项，本篇结合图例尝试从微观角度通过分类，阐述输出移动端原型图交互说明应该注意的细节。

页面元素交互说明的具体内容与之前提到的交互自查表的内容有关联。我们可以从以下几大类展开分析：模式与场景、页面状态、操作与反馈、数值限制条件和文案。

接下来逐一举例阐述：

一、模式与场景 1. 硬件设备

1.1 横竖屏

对于支持横屏和竖屏两种显示模式的应用，要考虑到两者排版布局的区别，以及模式如何切换。如下图是最常见的视频类应用，竖屏切换为横屏播放模式的交互说明。

1.2 分辨率

不同分辨率会牵扯到适配问题，我们在设计界面时往往要根据应用的受众群体，兼顾不同屏幕尺寸呈现。交互设计师需要在排版布局时就考虑到这个因素。

如下图需要在文章列表页单篇文章的字段中显示“行业与发布日期”，此时若想将两个字段放置在一行，需要避免在低分辨率、小屏幕上字段的重叠。

1.3 硬件交互

某些应用在进行某项操作时需要调起手机的麦克风、摄像头或蓝牙等，这时需要询问用户，让用户自己选择是否开启相应权限。

下图以最近朋友圈刷屏的应用ZEPETO举例：

2. 模式

是指应用内不同场景下使用的模式，经常用到的包括：编辑模式、夜间模式、无图或省流量模式，低电量模式等。

下图以知乎的无图模式举例。

大家设想一下，如果知乎只在这里放置了灰色的占位图，并在占位图附上文案“当前为无图模式，不显示图片”。那用户在这里的使用体验会大打折扣，而知乎的做法是不仅支持用户单篇文章可单独点击查看图片内容，也贴心的告诉读者原因是开启了无图模式，需要到哪里去设置解决。

强调这一点是为了说明：交互设计师在工作项目中拿到产品需求，作为需求在设计层面的第一道关口，在完成需求任务的同时，需要进一步思考产品需求的合理性，如果不合理有怎样的解决方案，是否有更好的呈现方式等。

3. 异常状态

原型的交互说明一定要考虑在各种异常场景下可能出现的问题及相应的解决办法。页面的异常状态通常从三个方面分析：

异常操作：连续多次相同的操作给予的反馈，比如相同时间段内多次点击发送短信验证码，应用会提示隔几分钟之后再来尝试发送。

数据相关：服务器无法获取数据，数据加载时间较长等。

页面提示：尤其是对To c的产品，经常会有运营活动，有关某活动即将上线、活动失效、服务下线、系统繁忙等提示就必不可少了。

下图是异常状态中数据相关的交互说明。

4. 账号权限

账号是否注册登录，直接决定了是否能使用该应用，或者是否能在应用内进行某些操作。另外也包括部分应用需要指纹、手势或密码验证身份。

比如淘宝允许用户在未注册登录的情况下浏览页面，但当用户进行某些个人行为操作时，如购买，收藏和关注等，此时会引导用户去注册登录账号。

下图是农业银行APP转账操作的交互说明。

因为牵扯到资金的流动，所以安全性是第一位的，当用户使用银行类移动应用进行有关资金转移支付的操作时，系统会要求通过某种方式，如密码、指纹、刷脸等验证用户身份，以确保是使用者本人操作。

在项目设计中如果涉及到某流程安全性重要性层级高，大家需要考虑是否增加验证。

二、页面状态 1. 默认状态

默认状态是指没有对页面进行操作的初始状态。通常需要注意默认显示的文案、默认筛选项、默认调起的键盘类型，以及常见的列表默认排序规则等。

下图是手淘搜索结果页筛选项默认状态的交互说明。

2. 正常状态

用户正常使用时遇到的页面状态。比如常见的登录/未登录、认证/未认证/审核中/认证失败。

下图是新闻类应用ZAKER未登录账户进行操作收藏的交互说明。

3. 特殊状态

指一些特殊场景才会出现的页面状态。比如页面无数据、网络加载失败、无网断网等情况。这些特殊场景事先必须通盘考虑清楚。