遇到的問題場(chǎng)景：產(chǎn)品經(jīng)理需要在頁(yè)面上增加功能，設(shè)計(jì)覺得加不了。
本質(zhì)：信息的無(wú)限性和手機(jī)屏幕的有限性之間的矛盾，如何把信息合理的展現(xiàn)給用戶，作為設(shè)計(jì)師需要重新對(duì)信息進(jìn)行組織分類，使信息能更高效有序地被用戶認(rèn)知。信息設(shè)計(jì)也需要“扁平化設(shè)計(jì)”：精簡(jiǎn)交互步驟，用戶用最少的步驟就完成任務(wù)。層級(jí)多了用戶會(huì)有一定幾率看不懂，并且層級(jí)多了迷失導(dǎo)航的概率也會(huì)增加（*目前主流減少用戶在單個(gè)頁(yè)面操作的量，系統(tǒng)智能化進(jìn)行頁(yè)面跳轉(zhuǎn)。前提是每個(gè)頁(yè)面的信息已經(jīng)被設(shè)計(jì)，頁(yè)面間的邏輯跳轉(zhuǎn)清楚直接，用戶不迷失，可以起到方便用戶的作用）
如何減少跳轉(zhuǎn)
一、列表型、宮格型入口架構(gòu)改為Tab形式，跳轉(zhuǎn)頁(yè)面改為滑動(dòng)頁(yè)面
如果頁(yè)面承載信息少，并且不展示模塊二級(jí)內(nèi)容的時(shí)候，這時(shí)可以采取列表型、宮格型的導(dǎo)航設(shè)計(jì)，幫助用戶快速定位到相應(yīng)的頁(yè)面。但是每次都需要點(diǎn)擊跳轉(zhuǎn)到另一個(gè)頁(yè)面。所以列表型都會(huì)漏出部分重要信息（內(nèi)容顯性化），不宜太多，過多會(huì)導(dǎo)致頁(yè)面高度過長(zhǎng)，用戶需要滑動(dòng)好幾屏才能瀏覽完信息，這樣信息獲取的效率大打折扣。設(shè)計(jì)可以考慮采用Tab的導(dǎo)航方式，把不同類型的內(nèi)容通過tab的形式展示出來，這樣做的好處：
1.用戶能快速掌握全局內(nèi)容類型；
2.能快速切換定位目標(biāo)內(nèi)容進(jìn)行信息獲取
二、針對(duì)用戶核心路徑優(yōu)化，頁(yè)面中露出內(nèi)容、便捷入口
比如騰訊動(dòng)漫APP，舊版本用戶追更，繼續(xù)閱讀是通過點(diǎn)擊書架，在此點(diǎn)擊作品進(jìn)行閱讀。在觀察用戶行為數(shù)據(jù)（流程點(diǎn)的耗時(shí)）時(shí)，我們發(fā)現(xiàn)用戶持續(xù)閱讀的行為時(shí)長(zhǎng)遠(yuǎn)大于瀏覽尋找新作品的行為時(shí)長(zhǎng)。所以為了方便用戶，我們?cè)谑醉?yè)放出了最近看的作品，同時(shí)采用橫封的形式，以保證該欄目不會(huì)過高。
*注意：
1.優(yōu)化用戶核心路徑需要觀察用戶的行為數(shù)據(jù)，分析用戶行為路徑，同時(shí)也要與產(chǎn)品溝通確定好優(yōu)先級(jí)和產(chǎn)品戰(zhàn)略。
3.內(nèi)容顯性化，列表內(nèi)容外露顯示
工具內(nèi)容顯性化設(shè)計(jì)，能讓用戶所見即所得，快速明確的理解到工具所提供的核心功能和服務(wù)；也能有效地減少用戶與核心服務(wù)之間的交互步驟和流程，讓用戶在當(dāng)前工具的內(nèi)容區(qū)完成工具的核心交互。比如淘寶app的我的淘寶頁(yè)面就采用了大量?jī)?nèi)容顯性化的設(shè)計(jì)，用戶在當(dāng)前頁(yè)面就能快速掌握到核心信息。
4.先露出一部分，滑動(dòng)露出更多
在Y軸上，通過頁(yè)面覆蓋的形式，我們可以在當(dāng)前頁(yè)面露出一部分信息，當(dāng)用戶有興趣時(shí)，可以通過滑動(dòng)瀏覽更多信息。
*注意：這類會(huì)員卡默認(rèn)露出【立即續(xù)費(fèi)】這樣的轉(zhuǎn)化口。滑動(dòng)顯示解決的并不只是方便用戶瀏覽會(huì)員權(quán)益，更多是刺激推動(dòng)用戶的沖動(dòng)購(gòu)買轉(zhuǎn)化。
5.頁(yè)面半覆蓋
當(dāng)需要承載更多內(nèi)容信息時(shí)，通常的處理方案是【更多按鈕】跳轉(zhuǎn)到詳細(xì)頁(yè)面，對(duì)于【更多】，如何不跳轉(zhuǎn)？可以使用頁(yè)面彈窗半覆蓋的形式，當(dāng)點(diǎn)擊下拉時(shí)，新的內(nèi)容頁(yè)面展開覆蓋當(dāng)前頁(yè)面。比如蝦米音樂的看點(diǎn)頁(yè)面，點(diǎn)擊【更多分類按鈕】，下拉頁(yè)面扳平覆蓋，展示更多的篩選條件。比如優(yōu)酷視頻，視頻詳情頁(yè)，點(diǎn)擊簡(jiǎn)介或選集時(shí)，新內(nèi)容從下方滑出半頁(yè)面覆
蓋。
6.鍵盤聯(lián)動(dòng)
表單輸入時(shí)，可以整合表單的信息字段，將同類型的字段進(jìn)行合并，同時(shí)結(jié)合輸入控件，設(shè)計(jì)聯(lián)動(dòng)式組件，讓用戶在表單輸入時(shí)更加高效，避免用戶頻繁的跳入跳出相同類型的輸入項(xiàng)。
例如趕集網(wǎng)，58創(chuàng)建簡(jiǎn)歷
7.采用浮層，將全跳改為半跳轉(zhuǎn)（大趨勢(shì)？？）
目前越來越多的采用了從下往上浮層的形式，實(shí)現(xiàn)與原場(chǎng)景的銜接。例如騰訊動(dòng)漫APP的閱讀券支付頁(yè)，淘寶詳情頁(yè)查看參數(shù)、添加購(gòu)物車都用了浮層半跳轉(zhuǎn)的形式。
8.Z軸分層覆蓋，同時(shí)展現(xiàn)
假如同時(shí)展現(xiàn)多種內(nèi)容，但對(duì)某個(gè)內(nèi)容有曝光需求，或者是想讓用戶觸達(dá)到該位置，不希望因?yàn)轫?yè)面內(nèi)容過長(zhǎng)導(dǎo)致被忽略或難以找到，可以考慮采用頁(yè)面Z軸層級(jí)覆蓋的形式，給該內(nèi)容一個(gè)曝光的入口。采用Z軸層級(jí)覆蓋的架構(gòu)形式，用戶的主要操作變?yōu)樯侠⑾吕瓉黹喿x信息，減少了點(diǎn)擊跳轉(zhuǎn)這一類的操作。
9.利用長(zhǎng)按（3D Touch）功能，在當(dāng)前頁(yè)面進(jìn)行更多信息的預(yù)覽
3D Touch抑郁iphone11取消
10.使用公共元素進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)效
我們?cè)诮⒉煌瑺顟B(tài)之間的動(dòng)效時(shí)，可以查看它們之間是否有任何公共元素，并將他們聯(lián)系起來，通過公共元素的動(dòng)畫來建立兩個(gè)狀態(tài)之間的聯(lián)系。這樣可以使得層級(jí)之間的關(guān)聯(lián)性更大，減少層級(jí)的跳躍感。
總結(jié)
