上一篇文章中在设计阶段写到处理信息层级，模块之间逻辑的一些简单方法和建议。如果不熟悉产品定位的可以看看上篇文章。写的有些匆忙，漏掉了一些东西，算是一个小方法吧。趁今晚想起来又不大有睡意，就跟大家简单的聊聊。之前有人说文章太长读的累，今天就抛弃戏谑的文风，简明扼要的给大家吐吐口水，依然尽量的通俗易懂。

这个小方法算是偷师也算是自己在不长的工作时间中总结出来的。方法算是实验性质的，不想长篇大论的立论，只是提供一个尝试的入口，各位自己决定是否有用。不一定正确，但也经过了一些工作中的验证，可能会对大家有一些参考意义，不管是对交互设计师还是视觉设计师。抱着开放的态度欢迎大家交流更正。

切回正题，对于复杂产品，设计师需要处理的骨架是模块之间逻辑的串联，对于众多信息的取舍。框架搭建起来，信息取舍后，更进一步就需要处理一些细节问题了，需要细化到具体的页面的信息的排布，局部小流程不同页面之间连接的流程。前者是搭骨架，后者是在填充蛋白质，注入血液复活产品。局部小流程与大模块构建的骨架不同，它更像大模块内的毛细血管。好的产品必然单个页面上让用户觉得舒服有序好用，页面之间小流程顺畅合乎用户的正常逻辑。这就是今天要和大家聊的内容：如何处理单个页面的信息流与局部小流程的信息层级。

没有高大上的专业性，但还是要简单介绍一下这两个词。不去做严格的词义界定，可能词义没法完全解释清楚。只有放到我介绍的产品语境中去理解-复杂的企业级软件，复杂包括逻辑也包括复杂的界面信息。视觉流：查看产品单个页面时的视觉流程。信息层级：在此特指局部小模块流程之间的信息结构，即是用户的操作流程。

简单衡量的单个页面视觉流程好坏的方式：单个页面的视觉流程是否是你希望用户在查看页面时的视觉轨迹，这是产品业务定位在单个页面上的体现。简单衡量信息层级好坏的方式：页面之间的跳转是否符合用户习惯的操作流程。

眼动仪法的迁移

如何能够发现视觉流程并判断页面视觉流程的好坏呢？有人会说问你的眼睛啊，是该问眼睛。可有时候眼睛还真不听我们的，外界的环境很复杂以至于我们的眼睛总不跟自己的心走，无法准确判断它在有意识的看什么，又在无意识的看什么。举个简单的例子：高中课堂上老师在讲特别难懂的电磁学的课，好学生的你特别想好好听课。可你的高中女生就坐在你前面，头上的蝴蝶结特别漂亮衬托的更加甜美可爱。此时此刻，我真的不确定你是看黑板多还是看她的背影多。其实心理学家早发现了人们这点鬼心思，眼睛不一定跟心走，不要相信嘴告诉你的眼睛看到了哪。所以有人鼓捣出了眼动仪这玩意，眼动仪可以记录你眼睛轨迹的热区，通过热量图直观的展示你的眼睛在具体区域停留时间的长短，进而可以推导出不同区域视觉层级的高低。关于眼动仪不多介绍，感兴趣的可以问度娘。

下图是一张眼动仪实验的图，其实是我自己画的模型，只为说明问题不要太较真。特别是比较复杂的界面，通过热度图可以直观看出界面不同区域对你的吸引力。此图一出，即使你巧舌如簧，也无可辩驳。在有限的时间内，对页面不同区域的关注度和你关注先后是相对应的。在有限时间内最先吸引你的，你一定看的最久。记住一定是有限时间内。因为一旦时间长了，你可能发现有一个特别不起眼的图标但你特喜欢，那完了你肯定只看它了。单个页面的眼动仪实验一般不会超过2分钟，除去你带设备摘设备的心理波动估计真正在看的时间不超过一分钟。遵循有限时间内关注度和与关注顺序对应的规律，便能推导出你在页面上大致的视觉流程了，拿起你的笔按热量大小为先后顺序连起来吧，这就是你有意识或者无意识的视觉流。

眼动仪很科学，很严谨。但我们不可能每个页面都去动用眼动仪，没有钱买眼动仪也没那个时间，成本太高。所以需要用方法去替代，在工作中偷师了一个迁移眼动仪的方式，运用人类最伟大的化妆品photoshop打开你页面图片，进行高斯模糊，模糊的程度逐渐增大，然后取一组图片按照模糊程度从低到高的进行排布。下面是我自己做的两组，有些神奇吧，慢慢的你就可以动笔连起这个页面的大致的视觉流。其实与眼动仪的原理相似，在有限时间内通过高斯模糊程度的增加逐步的对干扰元素进行降噪，凸显出你的视觉焦点，进而推导出视觉流。按顺序串联起不同程度高斯模糊的图片，视觉焦点的变化能够通过对比的方式逐渐凸显不同区域的视觉焦点进一步的去印证你推导出的视觉流。

对比上边的两个例子，可以发现下图似乎更符合期望的页面视觉流。似乎也说明了一个问题：经久积累的秩序美更容易引导用户，而过于突破的页面视觉流程就不太好处理了。就好比浓妆艳抹自然能瞬间惊艳，但时间久了就会觉得脂粉气太重。这里没有不鼓励创新的意思，只是就事论事。

通过上边的例子可以看出今天聊的方法更多的是迁移眼动仪的原理去检验你的页面的视觉流程是否符合你的预期，进而可以进行修改。你预期的页面的视觉流程自然与用户在页面的操作流程相契合。

所以对于交互设计师来说，按照用户的使用流程去排布单页面的信息之后，如果不确定页面排布方式是否是你想要的，是否会符合预期的视觉流，不妨试试这个方法。我是比较传统的交互设计从业者，不想在交互稿上看到任何色彩。术业有专攻，不去影响视觉设计师。但最美的黑白灰足够了，当你发现视觉流程不符合你的预期，就通过灰白色块的大小，形状，距离，灰白的深浅等这些元素凸显该凸显的，弱化该弱化的吧。具体方法，不再赘述。

这个方法可能对视觉设计师更有效，因为填充上色彩的产品更丰富，视觉流更不容易判断，更需要借以工具。当然对于视觉设计师来说，去修改界面契合视觉流程的方法也更多了，包括交互设计师用的那些方法，包括你们锻造美的色彩等，不再赘述。

视觉流到信息层级迁移

处理完单页面的视觉流，需要处理页面间的信息层级。视觉流本质上是单个页面的信息流的体现，而信息层级是包括跨页面的信息流，本质相似相通，所以原理是可以迁移的。同样采取点点连线建信息流的方式。信息层级的信息流是任务起点与任务终点的连线。两点之间的连线有很多种，最近的不一定是最好，最远的也不一定是最差的。需要去分析流程中任务节点的排布，节点是用户在操作流程中一切需要停顿关注的点，在节点上传达产品承上启下的信息。相当于眼动仪中视觉流的停顿点，所以连接起节点就等于具象化了信息层级。如果不确定走哪一条路，不妨在图上画出你觉得合理信息层级的信息流，排查每个节点，看以哪一种方式更合理，让用户觉得最舒服。优美的路线，自然会一路游山玩水到终点，便是你的选择了。方法就聊到这，怎么走就看你自己了。

不好意思又啰嗦这么多，又到了深夜。明天还要上班，就此打住。希望这个小方法对各位能有帮助，欢迎吐槽。

给大家推荐一首特别轻松的英文歌 Thursdays(Lovestoned)，因为今天周四。

晚安，如果有人在看。