2025-3-12 資深UI設計者
?我們在進行設計的時候，往往遇到以下的場景：
這就是信息的無限性和手機屏幕的有限性之間的矛盾，如何把信息合理的展示給用戶，需要我們重新對信息進行組織分類，使信息能更高效有序地被用戶認知。在進行信息設計的時候，我們會經常遇到“扁平化設計”這個詞，在我的理解看來，扁平化設計可以理解為：“精簡交互步驟，用戶用最少的步驟就完成任務”。層級太多了用戶就會看不懂；即使看得懂，層級多了用起來也麻煩，因此：手機上能不跳轉就不跳轉。那我們就來看看有沒有辦法減少跳轉…
1）列表型、宮格型入口架構改為tab的形式，把跳轉頁面改為滑動頁面
當我們的頁面承載信息少，并且不展示每個模塊二級內容的時候，我們可以采取列表型、宮格型的導航設計，這樣可以幫助用戶快速的定位到相應的頁面，但是每次信息獲取時，需要點擊跳轉到另外一個頁面。當每個模塊都需要展示一部分內容的時候，假如采用列表的導航設計時，往往就會導致頁面高度過長，用戶需要滑動好幾屏幕才能瀏覽完信息，這樣導致信息獲取的效率大打折扣。此時我們考慮采用tab的導航方式，把不同類型的內容形式通過tab的形式展示出來，這樣做可以有兩個好處：1.用戶能快速掌握全局內容類型 2.能快速切換定位目標內容進行信息獲取
2）針對用戶核心路徑的優化，頁面中露出內容、便捷入口
比如騰訊動漫APP，舊版本用戶在追更、繼續閱讀時，通過點擊書架，然后再次點擊作品進行閱讀。在觀察用戶行為時，我們發現用戶持續閱讀的行為時長遠大于瀏覽尋找新作品的行為時長，為了讓用戶最方便地進行追更與持續閱讀，我們在首頁放出了最近在看的作品，讓用戶能快速進行閱讀，同時采用橫封的形式，以保證該欄目不會過高。
TIPS:
A.采用這個方法通常要觀察用戶的行為數據，分析用戶的行為路徑，同時也要與產品溝通確定好優先級與產品策略。
B.采用這種方式時，通常都是結合左右滑的手勢露出更多的作品。
3）內容顯性化，列表內容外露顯示
工具內容顯性化設計，能讓用戶所見即所得，快速明確的理解到工具所提供的核心功能和服務；也能有效地減少用戶與工具所提供的核心服務之間的交互步驟和流程，讓用戶在當前工具的內容區完成與工具的核心交互。
比如淘寶APP中，“我的淘寶”頁面就采用了大量內容顯性化的設計，用戶在當前頁面就能快速掌握到核心信息。
4）先露出一部分，滑動露出更多
在Y軸上，通過頁面覆蓋的形式，我們可以當前頁面露出一部分信息，當用戶有興趣時，可以通過滑動瀏覽更多信息。
比如蝦音樂播放頁，默認評論只露出標題讓用戶可以發現有該欄目，當用戶上滑時，采用動效的形式將評論頁面在當前展開。
比如每日優鮮“我的頁面”，用戶想了解當會員有什么權益時，可以滑動頁面展示更多會員信息，無需跳轉進入會員權益頁。
每日優鮮
5）頁面半覆蓋
當需要需要承載內容信息時，我們往往使用“更多”的形式跳轉到一個新的頁面。那么對于“更多”，有沒有一個不用跳轉的解決辦法呢？我們可以使用頁面半覆蓋的形式，當點擊下拉時，新的內容頁面展開覆蓋當前頁面。比如蝦米音樂的看點頁面，點擊“更多分類”時，下拉頁面半屏覆蓋，展示更多的篩選條件。比如優酷視頻，視頻詳情頁，點擊簡介或選集時，新內容從下方滑出半頁面覆蓋。
蝦米音樂點擊更多分類
優酷播放頁點擊簡介
6）鍵盤聯動，如趕集房屋發布，58創建簡歷
我們可以整合表單的信息字段，將同類型的字段進行合并，同時結合輸入控件，設計聯動式組件，讓用戶在表單輸入時更加高效，避免用戶頻繁的跳入跳出相同類型的輸入項。
趕集網優化前控件反復調入跳出
優化后聯動式鍵盤
7）采用浮層，將全跳轉改為半跳轉（大趨勢如此）
面對需要展示更多信息或下一步操作需要進行跳轉時，目前越來越多采用了從下往上浮層的形式，實現與原場景的銜接。
比如，騰訊動漫APP的閱讀券支付頁，NOW APP直播間送禮，淘寶的詳情頁查看參數、添加購物車等都用了浮層半跳轉的形式
8）Z軸分層覆蓋，同時展現。
在同時展示多種內容時，假如對于某個內容有曝光需求，或者是想讓用戶觸達到該內容，不想在頁面內容過長導致被忽略或難以找到時，可以考慮采用頁面Z軸層級覆蓋的形式，給該內容一個曝光的入口。采用了Z軸層級覆蓋的架構形式，用戶主要的操作變為上拉、下拉來閱讀信息，減少了點擊跳轉這一類的操作。
如豆瓣fm，豆瓣詳情頁
豆瓣詳情頁
9）利用3D TOUCH的處理，在當前頁面進行更多信息的預覽（iOS）
壓敏屏幕所帶來的3D Touch 讓iPhone 的交互多了一個全新的維度，交互從不再局限于2D平面手勢，按壓操作使得手機交互進入了3D的維度，我們可以不打開 app 或者進入詳情頁，也能直接瀏覽內容或調用常用功能。
10）使用公共元素進行轉場動效
我們在建立不同狀態之間的動效時，可以查看它們之間是否有任何公共元素并將它們聯系起來，通過公共元素的動畫來建立兩個狀態之間的聯系。這樣可以使層級之間的銜接關聯性更大，減少層級跳轉感。
比如APP Store中的Today
圖片素材來源于網上
APP Store Today
總結
我們把當前的頁面可以想象成一個無限拓展的三維世界，分為X軸，Y軸，與Z軸，在這三個維度上，可以進行無限的拓展。減少層級上的跳轉，總結起來，就是使用手段在x軸、y軸、z軸上做是適時的收納與展現。
具備x軸、y軸、z軸的三維空間
