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