Design Pattern - 页面的信息展示逻辑信息的展示不仅仅体现在设计形式上

信息的展示不仅仅体现在设计形式上，更重要的是其背后的设计逻辑。我们要解决的不只是好看，更重要的是为用户形成一套简洁、有意义的心理认知。

PinDesign 周刊写到第 100 期了 ??????！终于赶在新年之前达成了这个里程碑，感谢大家这两年多的支持，先提前祝大家新年快乐！

上周和大家分享了 Pattern 的划分方式：Basic Pattern、Combo Pattern 和 Industry Pattern，接下来我们将沿着这个思路开始对各 Pattern 进行逐个的分解。

Basic Pattern 作为 Pattern 系统中的“组件”相对比较容易理解，所以我们将着重在 Combo 和 Industry 这两部分，今天的主题是如何通过 Basic Pattern 的组合使用来解决信息扩展的问题。

在早期的周刊中我们曾提到过向移动端设计转型中遇到的问题，其中很重要的一块是对如何正确的使用不同的组件。随着移动端的发展，大家都已经熟悉各平台组件的差异以及如何使用。

不过对于在一款产品中正确、系统化的选择使用各种设计形式，还是能够看到一些问题。这其中信息的扩展就是一个很明显的例子，同一个产品中我们经常能看到同一类型信息在不同界面上使用了不同的展示形式。

其实仅仅从设计形式上我们是无法解决这个问题的，它背后其实是一个设计的逻辑问题。

这也是很多时候我们在评审阶段受到其他角色质疑、导致用户使用中疑惑的根本原因。我们今天就尝试着从 Pattern（解决问题）的角度来分析一下如何处理信息的拓展。

Pattern 推荐值:★★★★☆

这个 Pattern 解决什么问题？

移动端设备由于屏幕尺寸的限制，在复杂信息的处理上相较于 Web 有天然的弱势。于是我们会借助下级页面、浮层、对话框等形式来辅助进行扩展信息的展示。

这里就会遇到一个非常值得思考的问题，如何合理的应用这些形式来辅助展示扩展信息才能让用户在使用我们产品的时候整体使用过程更加顺畅、效率更高。

有哪些设计形式可以辅助我们的设计

想要搞清楚如何正确的选择使用，首先我们还是需要进行一轮梳理，看看在这个 Pattern 中有哪些设计形式是可以被使用到的。

上图列举了对于信息扩展我们最常见的 8 种设计形式，我们先来逐个的了解一下。

01.下级页面

下级子页面是我们展示扩展信息最常见的一种形式，在 List、Detail Page 中都会频繁的使用到。从 iOS 早期到如今，这种信息扩展的设计形式一直被广泛使用。

它的好处是能够让用户保留页面的路径的印象，但对于层级较深的信息页面会显得非常的繁琐。如果大家用过早期的 eBay 客户端，一定会诟病其复杂的页面深度的操作。

02. 全屏模态页面

全屏模态页面这两年在 app 的设计中越来越多被使用到，相较于下级子页面它能有效的降低页面深度，让用户的操作感受更加简洁。

全屏模态页面和下级子页面对信息的承载作用是相同的，在表现形式上页面的转场不同。很多同学会将它们归为一类，但其实从使用逻辑上来看它俩还是有比较大的差异的。这也是造成很多 app 操作感觉混乱的根本原因，在后面我们会细节讨论。

03. 模态浮动层（侧边）

侧边模态浮动层是我们在列表页设计中经常用到的一个设计形式，例如 eBay、Google Express 都用它来承载筛选面板功能。之前的周刊「折叠设计法」中也是以此为案例给大家做过介绍。

搜索是大部分产品都不可或缺的一个功能，特别是对于电商类产品，搜索是整体转化的一个重要漏斗。为了让用户精确的找到想要的商品，我们不得不增加很多的信息辅助用户。

侧边模态浮动层就像 web 界面中被折叠的一部分，在用户需要的时候“翻”出来，在使用体验上降低用户的复杂度。

04. 模态浮动层（底部）

底部模态浮动层大家应该都不会陌生，如今在大部分电商类产品的详情页上都会使用到。它可以用来补充商品 SKU 信息，简化页面上信息量。

相对于上面的侧边模态浮动层，它还有一个重要的作用是对用户进行中断，帮助用户进入下一个流程之前补全信息。

虽然在展现形式上与上一个（侧边）会有一些相似，但在使用上其实它俩是有差异的，细节部分我们在后面的方案部分也会具体聊到。

05. 模态对话框（Dialog）

Dialog 大家都不会陌生，除了对用户进行中断、请求授权之外，它也可以使用在页面信息的扩展。

不过有一些差异的地方在于它在信息扩展上还具备用户确认的作用，查看信息并点击确定同时也意味着相关信息已告知用户。

Dialog 作为信息扩展的使用不太常用，但对于平台而言是具备一定的告知作用。

06. 模态对话框（Pop Layer）

Pop Layer 的对话框使用的场景相对于更偏向于营销，比如领取优惠券、参与活动等方面。通过差异化（突出）的视觉表现力来营造更好的活动氛围。

对于整个产品来说这种设计形式使用需要谨慎，过多的使用会让其“新鲜感”打折扣，降低对用户的刺激。

07. 气泡框

气泡框其实也属于 Pop Layer，更多的使用在一些 tips 信息的展示上，当相对来说体感更轻量一些。通常我们只会使用它展示较少量的信息，并提供一个明确的指向性（箭头）。

对于这个设计形式的使用，我更倾向于展示一些简短的句子或解释，不提供更多的下一级操作。

08.折叠信息

折叠信息其实在移动端的设计师不太常用，它的好处是能够让用户在一个页面中获取所有信息，但由于展开后对页面高度产生的影响会需要用户来回滑动定位。

这种设计形式能够有效的降低页面层级，但弊端也比较明显。除非每个模块的信息量较少且可控，否则不太推荐。

我们需要关心哪些问题

以上我们先大致了解了在信息扩展设计中会常用到的一些设计形式，但是如何组合使用依旧还需要结合业务来进行考虑。这里我们先提出几个最需要考虑的问题。

01.页面深度

移动端由于屏幕的限制，注定是需要更多的层级来进行信息的架构。过于深的页面层级会让用户感受到操作的繁琐，所以从操作效率上来说我们首先需要考虑的是单条路径的页面深度。

02.下级子页面与模态页面的选择

这可能是设计过程中最常见的一个问题，也是导致使用过程中感觉混乱的一个重要原因。

实际上这也是一个产品逻辑问题，需要我们对整个产品的结构、逻辑了有了一个清晰的认知和梳理后，就容易解决了。

03.模态浮动层的几种形式应该如何选择

模态浮动层也有好几种不同的形式，在具体的设计过程中究竟该如何选择？

以上是 Design System 系列的第 9 期的节选内容，在余下的全文内容中（付费部分）我们将继续带着这几个问题，通过对一些竞品的拆解来分析一下页面的信息展示逻辑的具体思路，以及在设计过程中基础设计原则。

Design System 是 PinDesign 周刊的一个新系列，基于「Design Systems」这本书结构框架的读书笔记和经验总结。希望将自己的感受和经验分享给大家，辅助大家的阅读。

加入 PinDesign 会员，获取本期主题「Design Pattern - 页面的信息展示逻辑」的全文内容及本系列前 2 期周刊的赠送，

年付会员将获得 Design System 系列所有（01~08）文章的赠送

。

Design System 系列已更新：

什么是 Design Principles

什么是 Design System

Components 与 Patterns 有什么区别

你该为产品设计怎样的气质

Design System 中的 Design Token

Design Pattern 实例 - 用户通知与中断

Design Pattern 组合实例 - 列表页设计思考

Design Pattern 划分方式是对设计的逻辑思考

本文谢绝一切形式转载

点击「

阅读原文

」了解会员计划