心流：最优体验心理学|页面设计中的信息组织策略探索——言之有序领域|傲科|芯片

编辑导语：不论是在现实还是在互联网，我们在日常生活工作中经常会遇到很多信息类的页面，比如最常见的逛超市时各种物品的排列，其中也需要参考到很多数据进行排列；本文作者分享了关于页面设计中的信息组织策略探索，我们一起来了解一下。

文章插图
一、人们是如何组织信息的？在 Ant Design 的界面设计中，会包含大量的信息组织和编排工作，我们常常会遇到这样的问题：

一个详情页面里应该包含哪些信息？
什么样的信息应该放在卡片里，什么样的信息应该平铺显示？
一个页面内的信息该怎么让用户快速找到重点？

信息组织是我们在日常生活中经常会遇到的问题，商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等，各式各样的信息是如何被组织编排到一起，又是以何种方式把信息呈现给用户呢？
在解答这些关于页面设计的问题之前，我想先给大家讲一个生活中的小案例：
二、动线设计逛过宜家的人，应该会注意到宜家类似迷宫的动线设计，这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时，就会被一条隐形“向导”默默地引导着向前走：一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域，直到一个不落地走完才抵达出口。
但在这个主线之外，为了确保一些消费者在购物中，能够快速离开或快速去往感兴趣的区域，每个主区域间都有一些较隐蔽的捷径作为辅动线。

文章插图
（宜家商场动线设计）
这种动线设计一方面能够把所有商品按照路径有效的串联起来，另一方面又能让消费者不知不觉的沿着这个路径去了解商品。
三、商品布局动线布局是宜家的隐形骨架，而真正让宜家卖场丰富起来的，还是琳琅满目的商品。
宜家的卖场和大部分零售卖场不一样，它不会把同类型产品进行大集合，而是根据人们的正常生活场景来分类，不同类型的产品在同一区域组合陈设，构成生活中的一个小场景；一方面能达到对各个商品功能的完美诠释，另一方面，一个产品尽量不会重复出现，尽可能减少商品展示的复杂性。

文章插图
（宜家样板间布局）
在整体商品布局上，有两个很有意思的地方：

在居家体验中心，样板间的陈列顺序完全是按照消费者回家后的场景而布置：客厅、餐厅、厨房、书房、卧室、卫生间……；
在家居用品中心，则会根据消费者在家的日常起居行为进行摆放：做饭、休息、读书、收纳……

现实生活中的这些例子，对我们的界面信息组织有什么启发呢？
四、关于动线和布局的思考在宜家的案例中，关于动线，映射到人的行为上，有一个比较专业的概念叫做“流”（flow）。
Mihaly Csikszentmihalyi 的著作《心流：最优体验心理学》中对“流”的定义：当人们全身心投入到某个活动中时，会对周边干扰视而不见，这种状态被称为“流”。宜家的动线设计很好的营造了这种状态，让消费者完全沉浸于商品浏览，并且尽量不去打断这种行为流。
经过研究发现，构成“流”的行为动作，其前后必然存在某种连续性或者关联性，例如回家的行为动线，日常起居的行为关联等。这个概念在界面设计中依然适用，很多界面设计都在有意无意的去创造“流”的状态，带给你用户沉浸式体验，例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容，让用户沉浸其中无法自拔。
关于商品布局，映射到信息组织上，《韦氏大词典》中提到一个词“编配”（orchestration），对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义，宜家的商品和谐的组织构成一个场景，它向消费者传递的不仅仅是商品本身的功用性，更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上，表单页的和谐组织能够帮助用户快速完成信息录入，详情页的和谐组织能够帮助用户快速理解一个描述对象……
各种各样的信息总能以某种关系组织到一起，而如何根据这种流为用户去组织和呈现信息呢？
“流”的本质其实是一系列具有关联性的行为动作串联，而“编配”的目的则是为了降低串联信息呈现的复杂程度。