交互设计模式分析- 信息流

1. 定义

此处讨论的信息流是指：频繁更新的，以期高效传达主题或者观点的包含不同类型或主题的图文消息的页面模块。

信息流（Newsfeed）一词最早来源于Facebook在2006年对App功能所进行的一次重大更新，将好友的最新动态以时间线的顺序显示在首页。这一做法最初受到许多用户的抵制和抨击，但渐渐的它却成为了Facebook的标志性功能，并开始广泛应用于其他移动产品中，成为确保用户留存的一大利器。

Josh Clark曾分析过移动应用用户的三种心态：1）我有个微任务要做；2）我想看看附近的情况；3）我有些无聊。不断更新内容的信息流无疑完美契合了场景2和3的需求，配合搜索与分类，也可以满足特定场景1的需求。

信息流界面示例

2. 模式构成

单个信息条目的典型构成

一类/组信息流的典型构成

设计要点：有效信息的高效展示

a. 有效信息：

这里的“有效信息”是指根据具体的业务和用户需求所提炼出的信息种类；

b. 高效展示：

信息呈现方式越是结构化和精炼，人们就能够更快地感知和理解

我们所选用的展现方式，能够影响用户对界面进行认知的效率，因此在进行信息条目设计时，我们需要：

1）了解用户的心智模型

2）确定优先级，并对信息进行归类和分组

3）适当使用视觉“线索”

信息条目构成示意（左：Etsy，右：Quora）

3. 布局

典型布局

垂直信息流

水平信息流

比较常见的情况是，这两种布局模式在一个信息流中相互穿插使用。

设计要点：效率与感染力之间的平衡

效率：

1）充分利用首屏的中上部 - 价值最高的展示区域

2）综合考虑运营量、首要信息的类型、可用空间大小选择整体布局方式

感染力：

《思考快与慢》中将人脑的活动分为两个系统，系统一（快思考 - 无意识的直觉思维）和系统二（慢思考 - 有意识的受控思维）。系统一是人类感知和行为的主要控制器，自主发生，无需费力，非常擅长于联想。

给予媒体更大的空间，充分利用系统一，加强与用户间的情感联系：

1）图像比文字更能调动情绪

2）直视用户的人脸最具感染力

效率与感染力的权衡 示意-Instagram

4. 交互

在浏览信息流的过程中，主要的交互事件有：1）上拉加载 2）下拉刷新 3）点击展开 4）切换视图 5）通过按钮进行相关操作。在常规交互模式之外，我们可以适当考虑以下几个方面：

趣味性

让浏览过程不仅是机械性地滑动视图；在用户可能感觉无聊的时候（加载时；刷新完所有内容时），适时地采用一些动画。

便捷VS沉浸

在滑动过程中，“栏“们是固定还是隐藏？

当信息层级扁平时，可以考虑在滑动过程中对导航进行隐藏，以将更多的页面空间留给信息流。

手势的运用

为基于界面的导航和操作提供补充性质的快捷手势：如右滑返回。

尊重用户的浏览习惯

页面布局改版/或设计与常规浏览方式不同时，提供视图切换的选项，让用户能够回到自己的“舒适区”。

巧妙地吸引注意力

空间紧张的情况下，使用微动效使入口更加引人注目。

最后，好的内容需要精心的设计为之提供舞台，好的设计也需要精彩内容的填充。设计信息流，不仅仅需要为内容搭好框架，也需要根据内容的来源确定真实内容的规格参数，避免用户所见与构想的偏差。

封面图基于CC0协议