信息的展示不僅僅體現在設計形式上，更重要的是其背后的設計邏輯。我們要解決的不只是好看，更重要的是為用戶形成一套簡潔、有意義的心理認知。
周刊寫到第 100 期了 ！終于趕在新年之前達成了這個里程碑，感謝大家這兩年多的支持，先提前祝大家新年快樂！
上周和大家分享了 的劃分方式：Basic 、Combo 和 ，接下來我們將沿著這個思路開始對各 進行逐個的分解。
Basic 作為 系統中的“組件”相對比較容易理解，所以我們將著重在 Combo 和 這兩部分，今天的主題是如何通過 Basic 的組合使用來解決信息擴展的問題。
在早期的周刊中我們曾提到過向移動端設計轉型中遇到的問題，其中很重要的一塊是對如何正確的使用不同的組件。隨著移動端的發展，大家都已經熟悉各平臺組件的差異以及如何使用。
不過對于在一款產品中正確、系統化的選擇使用各種設計形式，還是能夠看到一些問題。這其中信息的擴展就是一個很明顯的例子，同一個產品中我們經常能看到同一類型信息在不同界面上使用了不同的展示形式。
其實僅僅從設計形式上我們是無法解決這個問題的，它背后其實是一個設計的邏輯問題。
這也是很多時候我們在評審階段受到其他角色質疑、導致用戶使用中疑惑的根本原因。我們今天就嘗試著從 （解決問題）的角度來分析一下如何處理信息的拓展。
推薦值:★★★★☆
這個 解決什么問題？
移動端設備由于屏幕尺寸的限制，在復雜信息的處理上相較于 Web 有天然的弱勢。于是我們會借助下級頁面、浮層、對話框等形式來輔助進行擴展信息的展示。
這里就會遇到一個非常值得思考的問題，如何合理的應用這些形式來輔助展示擴展信息才能讓用戶在使用我們產品的時候整體使用過程更加順暢、效率更高。
有哪些設計形式可以輔助我們的設計
想要搞清楚如何正確的選擇使用，首先我們還是需要進行一輪梳理，看看在這個 中有哪些設計形式是可以被使用到的。
上圖列舉了對于信息擴展我們最常見的 8 種設計形式，我們先來逐個的了解一下。
01.下級頁面
下級子頁面是我們展示擴展信息最常見的一種形式，在 List、 Page 中都會頻繁的使用到。從 iOS 早期到如今，這種信息擴展的設計形式一直被廣泛使用。
它的好處是能夠讓用戶保留頁面的路徑的印象，但對于層級較深的信息頁面會顯得非常的繁瑣。如果大家用過早期的 eBay 客戶端，一定會詬病其復雜的頁面深度的操作。
02. 全屏模態頁面
全屏模態頁面這兩年在 app 的設計中越來越多被使用到，相較于下級子頁面它能有效的降低頁面深度，讓用戶的操作感受更加簡潔。
全屏模態頁面和下級子頁面對信息的承載作用是相同的，在表現形式上頁面的轉場不同。很多同學會將它們歸為一類模態對話框是什么時候實例的對話框，但其實從使用邏輯上來看它倆還是有比較大的差異的。這也是造成很多 app 操作感覺混亂的根本原因，在后面我們會細節討論。
03. 模態浮動層（側邊）
側邊模態浮動層是我們在列表頁設計中經常用到的一個設計形式，例如 eBay、 都用它來承載篩選面板功能。之前的周刊「折疊設計法」中也是以此為案例給大家做過介紹。
搜索是大部分產品都不可或缺的一個功能，特別是對于電商類產品模態對話框是什么時候實例的對話框，搜索是整體轉化的一個重要漏斗。為了讓用戶精確的找到想要的商品，我們不得不增加很多的信息輔助用戶。
側邊模態浮動層就像 web 界面中被折疊的一部分，在用戶需要的時候“翻”出來，在使用體驗上降低用戶的復雜度。
04. 模態浮動層（底部）
底部模態浮動層大家應該都不會陌生，如今在大部分電商類產品的詳情頁上都會使用到。它可以用來補充商品 SKU 信息，簡化頁面上信息量。
相對于上面的側邊模態浮動層，它還有一個重要的作用是對用戶進行中斷，幫助用戶進入下一個流程之前補全信息。
雖然在展現形式上與上一個（側邊）會有一些相似，但在使用上其實它倆是有差異的，細節部分我們在后面的方案部分也會具體聊到。
05. 模態對話框（）
大家都不會陌生，除了對用戶進行中斷、請求授權之外，它也可以使用在頁面信息的擴展。
不過有一些差異的地方在于 它在信息擴展上還具備用戶確認的作用，查看信息并點擊確定同時也意味著相關信息已告知用戶。
作為信息擴展的使用不太常用，但對于平臺而言是具備一定的告知作用。
06. 模態對話框（Pop Layer）
Pop Layer 的對話框使用的場景相對于更偏向于營銷，比如領取優惠券、參與活動等方面。通過差異化（突出）的視覺表現力來營造更好的活動氛圍。
對于整個產品來說這種設計形式使用需要謹慎，過多的使用會讓其“新鮮感”打折扣，降低對用戶的刺激。
07. 氣泡框
氣泡框其實也屬于 Pop Layer，更多的使用在一些 tips 信息的展示上，當相對來說體感更輕量一些。通常我們只會使用它展示較少量的信息，并提供一個明確的指向性（箭頭）。
對于這個設計形式的使用，我更傾向于展示一些簡短的句子或解釋，不提供更多的下一級操作。
08.折疊信息
折疊信息其實在移動端的設計師不太常用，它的好處是能夠讓用戶在一個頁面中獲取所有信息，但由于展開后對頁面高度產生的影響會需要用戶來回滑動定位。
這種設計形式能夠有效的降低頁面層級，但弊端也比較明顯。除非每個模塊的信息量較少且可控，否則不太推薦。
我們需要關心哪些問題
以上我們先大致了解了在信息擴展設計中會常用到的一些設計形式，但是如何組合使用依舊還需要結合業務來進行考慮。這里我們先提出幾個最需要考慮的問題。
01.頁面深度
移動端由于屏幕的限制，注定是需要更多的層級來進行信息的架構。過于深的頁面層級會讓用戶感受到操作的繁瑣，所以從操作效率上來說我們首先需要考慮的是單條路徑的頁面深度。
02.下級子頁面與模態頁面的選擇
這可能是設計過程中最常見的一個問題，也是導致使用過程中感覺混亂的一個重要原因。
實際上這也是一個產品邏輯問題，需要我們對整個產品的結構、邏輯了有了一個清晰的認知和梳理后，就容易解決了。
03.模態浮動層的幾種形式應該如何選擇
模態浮動層也有好幾種不同的形式，在具體的設計過程中究竟該如何選擇？
以上是 系列的第 9 期的節選內容，在余下的全文內容中（付費部分）我們將繼續帶著這幾個問題，通過對一些競品的拆解來分析一下頁面的信息展示邏輯的具體思路，以及在設計過程中基礎設計原則。
是 周刊的一個新系列，基于「 」這本書結構框架的讀書筆記和經驗總結。希望將自己的感受和經驗分享給大家，輔助大家的閱讀。
加入 會員，獲取本期主題「 - 頁面的信息展示邏輯」的全文內容及本系列前 2 期周刊的贈送，年付會員將獲得 系列所有（01~08）文章的贈送。
系列已更新：