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