页面设计中的信息组织策略探索——言之有序
编辑指南：无论是现实还是网络，我们在日常生活的工作中经常会遇到很多信息类的网页。 例如，访问最常见的超市时的各种物品的排列，其中也需要参考很多数据进行排列。 本文作者分享了页面设计中信息组织策略的探索。 一起看看吧。
一、人们是如何组织信息的？ Ant Design界面的设计包括许多信息的组织和组织工作。 我们经常遇到这样的问题。
详细页面应该包含什么样的信息？ 应该把什么样的信息放在卡里，并列显示什么样的信息？ 一个页面中的信息如何帮助用户快速找到重点？ 信息组织是我们在日常生活中经常遇到的问题，商场的楼层导航、机场站牌指南、餐桌菜单、手机通讯录等各种信息如何组织起来，如何呈现给用户呢？
在回答这些关于页面设计的问题之前，我想先给大家看一下生活中的小案例：
二、去过宜家的人，应该会注意到迷宫般的动线设计，消费者可以不自觉地看到购物中心的每一个角落。
一进入宜家的入口，就会被看不见的“向导”引导着默默地往前走。 曲折的主线被客厅家具、客厅、卧室、书房等各个主区域一条接一条地引导，在没有落地、走完之前不会到达出口。
不过，除了这条主线之外，为了让部分消费者在购物时能快速离开或快速前往感兴趣的区域，各主线之间有一条隐藏的捷径作为辅助线。
(宜家商场动线设计)
这样的动线设计可以沿着路径有效地连接所有的商品，同时消费者可以无意识地沿着该路径了解商品。
三、商品布局动线布局虽然是宜家的隐形骨架，但真正丰富宜家卖场的，还是琳琅满目的商品。
宜家卖场与大部分零售卖场不同，不是大集合同类型的产品，而是根据人们的普通生活场景进行分类。 不同类型的产品在同一个区域组合室内装饰，构成生活中的小场景。 一方面要达到对各商品功能的完美诠释，另一方面尽量避免一个产品的重复，尽量减少商品展示的复杂性。
(宜家样板间布局)
整个商品的布局有两个有趣的地方。
在居家体验中心，样板间的陈列顺序按照消费者回家后的场景排列。 客厅、餐厅、厨房、书房、卧室、厕所……； 家居用品中心将根据消费者在家中的日常起居行为进行配置。 做饭、休息、读书、收纳……现实生活的这些例子，对我们的界面信息组织有什么启示呢？
四、关于动线与布局的思考在宜家案例中，关于动线，有映射于人的行为的“流”这一比较专业的概念。
Mihaly Csikszentmihalyi的著作《心流：最优体验心理学》中的“流程”的定义。 人们埋头于某项活动时，对周边的干扰视而不见的状态称为“流动”。
宜家的动线设计很好地营造了这种状态，让消费者完全沉浸在商品的观望之中，而且尽量避免中断这种行为的流程。
研究结果表明，构成“流”的行为动作必然前后存在某种连续性或相关性。 例如，回家的行为动线、日常生活的行为关联等。
这一概念仍然适用于界面设计，许多界面设计刻意营造“流动”状态，给用户带来沉浸感。 例如，各种短视频APP可基于用户的观影习惯推荐相关联的视频内容，而不是让用户沉浸其中。
关于商品配置，映射到信息组织，在《韦氏大词典》中出现了“编辑”( orchestration )这个词，与此相对应地被解释为“和谐的组织”。
这个词可以很好地表达信息组织的含义，宜家商品和谐的组织构成一个场景，它向消费者传达的不仅是商品本身的功能性，也是组合的建议和生活方式。
这种商品组织方式可以非常有效地降低消费者对信息筛选的复杂度。
在界面设计中，表单页面的协调组织可以帮助用户快速完成信息输入，详细页面的协调组织可以帮助用户快速理解一个描述对象……
各种信息总是以某种关系汇总在一起，如何根据这个流程为用户组织和呈现信息呢？
“流”的本质其实是一系列相关行为动作的连接，“编辑”的目的是降低连接信息表达的复杂度。
有了这两个基本概念，我们就可以建立一个初步假设，所有信息能否通过相关性和复杂性来组织
对于这两个维度，我们进行了更深层次的研究和验证，得出了基本的定义：
信息复杂性：信息量的大小。 包括种类、数量等。
信息相关性：信息之间的潜在相关性或相互影响。
考虑一下能否将这两个维度应用于接口设计的信息组织。
五、页面信息组织方式1 .信息相关性接口信息之间潜在的关联或相互影响通常出现在“逻辑关联”和“视觉关联”两个层面。
逻辑关联：
顾名思义，就是指一个事件中所有信息之间的关系，在界面设计中，任何信息总是以某种方式分类组织； 例如，您可以按字母顺序从a到z排列手机通讯录中的人名，按类别对电子商务网站中的商品导航进行分组，或按时间对待办事项进行排序。
页面信息的逻辑相关性
如何找到信息之间的逻辑关联？
被称为信息体系结构之父的Richard saul wurman在《信息焦虑》书中用“五个帽子框架”概括了如何组织信息。
“位置”( Location )“字母”( Alphabet )“时间”( Time )“类别”( Category )级别)“Hierarchy”简称为LATCH。
这五种方式基本可以覆盖所有的信息组织战略，信息无限，但信息组织方式有限。
视觉关联：
当其中一个界面呈现给用户时，用户会有意识地判断界面上的哪些信息最重要，然后关注这些信息之间的关联。 因此，不仅要从逻辑上组织信息，更应该合理表达信息的视觉层次关系。
视觉等级关系有几种常用的区分方法。
强调：用基本的视觉要素(颜色、形状、大小等)区分等级。
亲密性：位置相近的因素通常相关，位置越近关系越强。
图胜于语言。 视觉符号与对象的关联，例如齿轮或扳手=设置，垃圾桶=删除。
陂览顺序：根据陂览顺序，信息重要性从左到右(部分地区)或从上到下依次递减。
页面信息的视觉相关性
如何验证界面元素的视觉相关性？
眯缝测试：
《About Face 4：交互设计精髓》进行了有趣的测试。 平面设计师为了使界面的视觉信息有效地打开层次关系，在“眯眼测试”( squint test ) ——中闭上一只眼睛，眯着另一只眼睛看画面，模糊了哪些要素突出，哪些要素是模糊的
从各种角度进行观察，可以注意到以前没有注意到的布局和构成问题。
2 .信息复杂度一般是用信息量的大小或样式的多寡来衡量的，这两个维度实际上确定信息的浏览时间，例如，一个详细页面内是纯文本信息，但信息量较大( 3个画面以上)的情况下，该页面的复杂度较高
信息的复杂性和关联性不是完全独立的两个维度，根据关联性组织信息本身就是为了降低信息所表现出的复杂性。
复杂性的研究有助于选择向用户呈现信息的合适方法。
六、页面信息组织实践详细的页面设计具体到界面设计层面，信息量大、复杂度高常常是中后台界面设计的难题之一； 以详细页面为例，详细页面中的信息应该如何合理组织和有效地传达给用户呢？
根据关联性和复杂性的概念，抽象出了用于判断信息的复杂性和关联性对页面结构的影响的简单的“复杂性模型”。
横轴表示页面信息之间的关联性，纵轴表示信息的复杂度，由两者交叉构成的色块表示不同的信息等级。
最接近原点的浅色块表示复杂度低且相关的内容。 例如，远离纯文本产品描述信息原点的最深颜色块表示高度复杂且相互独立的信息。 例如，一个发布过程中的集成测试、预环境测试、灰度测试、在线等各个阶段的信息展示等。
与此相对应，我们对信息呈现方式也进行了维度划分，用于解决复杂的企业级产品界面设计中，何时卡片区分，何时分页等布局问题。
根据主机信息的复杂性，容器组件也进行了复杂的分类，解决了不同类型信息在不同页面布局中如何表示的问题。
此模型有助于设计师在确定布局组件时有章可循。
最终，当用户来到页面时，让用户感受到页面的信息量、信息的检索方法可以有统一的期待。
试图将复杂性和相关性模型落地到接口布局中：
(详细页面模板设计)
对于上述模型在实际设计中应该如何操作，这里提供了可供参考的推荐步骤。
“复杂度判断”明确要设计的信息量大小，“相关性判断”判断各信息之间的相关性，合理分组“组件选择”，选择合适的容器组件，提示信息，“模板选择”显示合适的页面数字这不仅适用于详细页面的模板设计，也同样适用于表格页面设计。
七、结语要大到一个系统，小到一个按钮，背后的每一个规则既要从人的角度考虑设计的易用性，又要从信息本身推敲组织的合理性。
作为设计规范的制定者，不能凭感觉就这么简单，而需要用户快速找到和理解信息，在提高用户效果的同时，找到一种能提高用户观影体验的共同模式，这是我们一直在探索的课题。
虚拟界面的信息组织和现实世界一样，必须符合人们对事物的认知，必须遵循人们的行为习惯。 这些认知和行为习惯构成了自然互动的基础，这也是我们一直在探索方向。
当然，信息组织除了以上这些思路外，还有更多的思路和方向有待挖掘。 期待大家的反馈和建议，帮助我们一起改进。
参考：
sap fiori 2.0:the object page ——第1部分： its history
对象页面流计划
超市商品陈列原则
宜家动线设计
[美]Alan Cooper等. 《About Face 4：交互设计精髓》
[美] Richard saul wurman. 《信息焦虑》
[美] Csikszentmihalyi . 《心流：最优体验心理学》
本文由@Ant Design原创，每个人都是产品经理，未经许可禁止转载。
标题来自Unsplash，基于CC0协议