騰訊設(shè)計(jì)師：減少頁(yè)面跳轉(zhuǎn)的10個(gè)方法總結(jié)

我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，往往遇到以下的場(chǎng)景：

這就是信息的無(wú)限性和手機(jī)屏幕的有限性之間的矛盾，如何把信息合理的展示給用戶，需要我們重新對(duì)信息進(jìn)行組織分類，使信息能更高效有序地被用戶認(rèn)知。在進(jìn)行信息設(shè)計(jì)的時(shí)候，我們會(huì)經(jīng)常遇到「扁平化設(shè)計(jì)」這個(gè)詞，在我的理解看來(lái)，扁平化設(shè)計(jì)可以理解為：「精簡(jiǎn)交互步驟，用戶用最少的步驟就完成任務(wù)」。層級(jí)太多了用戶就會(huì)看不懂；即使看得懂，層級(jí)多了用起來(lái)也麻煩。因此手機(jī)上能不跳轉(zhuǎn)就不跳轉(zhuǎn)。那我們就來(lái)看看有沒有辦法減少跳轉(zhuǎn)。

列表型、宮格型入口架構(gòu)改為tab形式，跳轉(zhuǎn)頁(yè)面改為滑動(dòng)頁(yè)面

當(dāng)我們的頁(yè)面承載信息少，并且不展示每個(gè)模塊二級(jí)內(nèi)容的時(shí)候，我們可以采取列表型、宮格型的導(dǎo)航設(shè)計(jì)，這樣可以幫助用戶快速的定位到相應(yīng)的頁(yè)面，但是每次信息獲取時(shí)，需要點(diǎn)擊跳轉(zhuǎn)到另外一個(gè)頁(yè)面。當(dāng)每個(gè)模塊都需要展示一部分內(nèi)容的時(shí)候，假如采用列表的導(dǎo)航設(shè)計(jì)時(shí)，往往就會(huì)導(dǎo)致頁(yè)面高度過長(zhǎng)，用戶需要滑動(dòng)好幾屏才能瀏覽完信息，這樣導(dǎo)致信息獲取的效率大打折扣。此時(shí)我們考慮采用 tab 的導(dǎo)航方式，把不同類型的內(nèi)容形式通過 tab 的形式展示出來(lái)，這樣做有兩個(gè)好處：

• 用戶能快速掌握全局內(nèi)容類型；
• 能快速切換定位目標(biāo)內(nèi)容進(jìn)行信息獲取。

關(guān)于全民K歌的改版思路 → 《如何做好大型視覺改版？來(lái)看全民K歌5.0 的改版經(jīng)驗(yàn)總結(jié)！》

針對(duì)用戶核心路徑優(yōu)化，頁(yè)面中露出內(nèi)容、便捷入口

比如騰訊動(dòng)漫APP，舊版本用戶在追更、繼續(xù)閱讀時(shí)，通過點(diǎn)擊書架，然后再次點(diǎn)擊作品進(jìn)行閱讀。在觀察用戶行為時(shí)，我們發(fā)現(xiàn)用戶持續(xù)閱讀的行為時(shí)長(zhǎng)遠(yuǎn)大于瀏覽尋找新作品的行為時(shí)長(zhǎng)，為了讓用戶最方便地進(jìn)行追更與持續(xù)閱讀，我們?cè)谑醉?yè)放出了最近在看的作品，讓用戶能快速進(jìn)行閱讀，同時(shí)采用橫封的形式，以保證該欄目不會(huì)過高。

TIPS:

• 采用這個(gè)方法通常要觀察用戶的行為數(shù)據(jù)，分析用戶的行為路徑，同時(shí)也要與產(chǎn)品溝通確定好優(yōu)先級(jí)與產(chǎn)品策略。
• 采用這種方式時(shí)，通常是結(jié)合左右滑動(dòng)的手勢(shì)露出更多的作品。

內(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è)面就能快速掌握到核心信息。

先露出一部分，滑動(dòng)露出更多

在Y軸上，通過頁(yè)面覆蓋的形式，我們可以在當(dāng)前頁(yè)面露出一部分信息，當(dāng)用戶有興趣時(shí)，可以通過滑動(dòng)瀏覽更多信息。

比如蝦米音樂播放頁(yè)，默認(rèn)評(píng)論只露出標(biāo)題讓用戶可以發(fā)現(xiàn)有該欄目，當(dāng)用戶上滑時(shí)，采用動(dòng)效的形式將評(píng)論頁(yè)面在當(dāng)前展開。

比如每日優(yōu)鮮「我的頁(yè)面」，用戶想了解會(huì)員有什么權(quán)益時(shí)，可以滑動(dòng)頁(yè)面查看更多會(huì)員信息，無(wú)需跳轉(zhuǎn)進(jìn)入會(huì)員權(quán)益頁(yè)。

△ 每日優(yōu)鮮

頁(yè)面半覆蓋

當(dāng)需要承載內(nèi)容信息時(shí)，我們往往使用「更多」的形式跳轉(zhuǎn)到一個(gè)新的頁(yè)面。那么對(duì)于「更多」，有沒有一個(gè)不用跳轉(zhuǎn)的解決辦法呢？我們可以使用頁(yè)面半覆蓋的形式，當(dāng)點(diǎn)擊下拉時(shí)，新的內(nèi)容頁(yè)面展開覆蓋當(dāng)前頁(yè)面。比如蝦米音樂的看點(diǎn)頁(yè)面，點(diǎn)擊「更多分類」時(shí)，下拉頁(yè)面半屏覆蓋，展示更多的篩選條件。比如優(yōu)酷視頻，視頻詳情頁(yè)，點(diǎn)擊簡(jiǎn)介或選集時(shí)，新內(nèi)容從下方滑出半頁(yè)面覆蓋。

△ 蝦米音樂點(diǎn)擊更多分類

△ 優(yōu)酷播放頁(yè)點(diǎn)擊簡(jiǎn)介

鍵盤聯(lián)動(dòng)

鍵盤聯(lián)動(dòng)，如趕集房屋發(fā)布，58創(chuàng)建簡(jiǎn)歷。

我們可以整合表單的信息字段，將同類型的字段進(jìn)行合并，同時(shí)結(jié)合輸入控件，設(shè)計(jì)聯(lián)動(dòng)式組件，讓用戶在表單輸入時(shí)更加高效，避免用戶頻繁的跳入跳出相同類型的輸入項(xiàng)。

△ 趕集網(wǎng)優(yōu)化前控件反復(fù)調(diào)入跳出

△ 優(yōu)化后聯(lián)動(dòng)式鍵盤

采用浮層，將全跳轉(zhuǎn)改為半跳轉(zhuǎn)（大趨勢(shì)如此）

面對(duì)需要展示更多信息或下一步操作需要進(jìn)行跳轉(zhuǎn)時(shí)，目前越來(lái)越多采用了從下往上浮層的形式，實(shí)現(xiàn)與原場(chǎng)景的銜接。

比如，騰訊動(dòng)漫APP的閱讀券支付頁(yè)，NOW APP直播間送禮，淘寶的詳情頁(yè)查看參數(shù)、添加購(gòu)物車等都用了浮層半跳轉(zhuǎn)的形式。

Z軸分層覆蓋，同時(shí)展現(xiàn)

假如同時(shí)展示多種內(nèi)容，但對(duì)某個(gè)內(nèi)容有曝光需求，或者是想讓用戶觸達(dá)到該內(nèi)容，不希望因?yàn)轫?yè)面內(nèi)容過長(zhǎng)導(dǎo)致被忽略或難以找到，可以考慮采用頁(yè)面Z軸層級(jí)覆蓋的形式，給該內(nèi)容一個(gè)曝光的入口。采用了Z軸層級(jí)覆蓋的架構(gòu)形式，用戶的主要操作變?yōu)樯侠⑾吕瓉?lái)閱讀信息，減少了點(diǎn)擊跳轉(zhuǎn)這一類的操作。

如豆瓣fm，豆瓣詳情頁(yè)。

△ 豆瓣詳情頁(yè)

利用3D TOUCH的處理，在當(dāng)前頁(yè)面進(jìn)行更多信息的預(yù)覽（iOS）

壓敏屏幕所帶來(lái)的3D Touch 讓iPhone 的交互多了一個(gè)全新的維度，交互從此不再局限于2D平面手勢(shì)，按壓操作使得手機(jī)交互進(jìn)入了3D的維度，我們可以不打開 app 或者進(jìn)入詳情頁(yè)，也能直接瀏覽內(nèi)容或調(diào)用常用功能。

使用公共元素進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)效

我們?cè)诮⒉煌瑺顟B(tài)之間的動(dòng)效時(shí)，可以查看它們之間是否有任何公共元素，并將它們聯(lián)系起來(lái)，通過公共元素的動(dòng)畫來(lái)建立兩個(gè)狀態(tài)之間的聯(lián)系。這樣可以使層級(jí)之間的銜接關(guān)聯(lián)性更大，減少層級(jí)跳轉(zhuǎn)感。

比如APP Store中的Today。

△ 圖片素材來(lái)源于網(wǎng)上

△ APP Store Today

總結(jié)

我們把當(dāng)前的頁(yè)面可以想象成一個(gè)無(wú)限拓展的三維世界，分為X軸，Y軸，與Z軸，在這三個(gè)維度上，可以進(jìn)行無(wú)限的拓展。減少層級(jí)上的跳轉(zhuǎn)，總結(jié)起來(lái)，就是在x軸、y軸、z軸上使用手段做適時(shí)的收納與展現(xiàn)。

△ 作者：way

歡迎關(guān)注「TCD設(shè)計(jì)中心」公眾號(hào)：