編輯導(dǎo)語(yǔ)：移動(dòng)產(chǎn)品的功能、內(nèi)容都在不斷地膨脹，變得更加復(fù)雜。設(shè)計(jì)的架構(gòu)需要不斷地去適應(yīng)這種發(fā)展趨勢(shì)。雖然我們可以通過(guò)Tab或者各種設(shè)計(jì)組件來(lái)獲得更多的頁(yè)面空間，但是太多的嵌套會(huì)讓用戶(hù)的交互形式變得復(fù)雜。本文就來(lái)為大家聊一聊移動(dòng)產(chǎn)品中的空間設(shè)計(jì)。

淘寶首頁(yè)既有底部導(dǎo)航，又有“訂閱”和“推薦”的導(dǎo)航。左右滑動(dòng)切換到“訂閱”頁(yè)面后，頁(yè)面中又包含了內(nèi)容區(qū)的Tab。為了適配內(nèi)容切換，頁(yè)面對(duì)滑動(dòng)做了區(qū)域劃分。上方向左滑動(dòng)返回推薦。內(nèi)容區(qū)滑動(dòng)切換內(nèi)容標(biāo)簽。

所以復(fù)雜頁(yè)面如何打造一個(gè)專(zhuān)屬空間呢？?

二樓出現(xiàn)了，APP由此從平房走向了別墅，有二樓也有地下室。今天我們來(lái)聊聊二樓的設(shè)計(jì)。

一、二樓空間的價(jià)值

“二樓”的說(shuō)法來(lái)自于淘寶App，是一種比較形象的說(shuō)法。用戶(hù)打開(kāi)App直接進(jìn)入的頁(yè)面空間就是“一樓”。下拉后進(jìn)入的空間就是二樓，那么二樓有什么特點(diǎn)呢？

1. 交互便捷

用戶(hù)只要下拉就可以進(jìn)入二樓空間，交互方式更加自然、簡(jiǎn)單。而一樓則匯集了大量的信息。用戶(hù)需要識(shí)別、定位、點(diǎn)擊才能進(jìn)入目標(biāo)頁(yè)面，用戶(hù)的行為鏈路更長(zhǎng)。一旦頁(yè)面布局做出了調(diào)整，用戶(hù)需要重新學(xué)習(xí)和適應(yīng)。

所以二樓交互優(yōu)勢(shì)更加明顯。

2. 專(zhuān)屬空間

一樓首頁(yè)更像雜貨鋪，為各個(gè)頻道輸送流量。二樓則是專(zhuān)賣(mài)店，一般只有一個(gè)主題，內(nèi)容和功能更加聚焦，有利于固化用戶(hù)的認(rèn)知。而在一樓空間中，常見(jiàn)的Banner、懸浮icon入口、橫幅、彈窗等形式都是頁(yè)面跳轉(zhuǎn)邏輯，更多的是運(yùn)營(yíng)活動(dòng)入口，具有明顯的時(shí)效性，不能夠作為內(nèi)容空間長(zhǎng)期存在。

3. 稀缺性

二樓只有一層，信息承載量有限，而產(chǎn)品的內(nèi)容是海量的，所以空間非常稀缺，需要有明確的空間定位，才能產(chǎn)生更大的價(jià)值。

二、二樓空間的內(nèi)容方向

通過(guò)案例總結(jié)，二樓空間的定位主要包括3個(gè)方向：

1. 用戶(hù)空間

在iOS操作系統(tǒng)中，在不同的桌面下拉都可以快速進(jìn)入搜索功能。相比較固定的搜索欄，可以帶給用戶(hù)更暢快的操作體驗(yàn)。并且增加了用戶(hù)最近的操作記錄，提高了用戶(hù)的行為效率。

同樣在淘寶平臺(tái)中，由于頻道眾多，很多頻道得不到有效曝光。二樓便成為了頻道展示空間，包括用戶(hù)訂閱的頻道。依靠交互上的天然優(yōu)勢(shì)，縮短了用戶(hù)操作鏈路。

微信在聊天界面下拉，可以快速進(jìn)入小程序空間，包括了用戶(hù)最近使用的小程序和收藏的小程序。

網(wǎng)易云音樂(lè)“我的”頻道頁(yè)面下拉后，是用戶(hù)的展示空間，照片墻，年度報(bào)告等內(nèi)容，陳列著用戶(hù)的記憶和過(guò)往。

高德地圖“我的”頻道頁(yè)面下拉，可以查看用戶(hù)足跡，讓用戶(hù)了解自己歷史行程。淘寶商品詳情頁(yè)面中下拉可以查看“我的足跡”，方便用戶(hù)快速切回到曾經(jīng)瀏覽的商品。

以上案例都是以用戶(hù)為中心，搭建用戶(hù)專(zhuān)屬的個(gè)人空間，帶給用戶(hù)更便捷的操作體驗(yàn)。

2. 運(yùn)營(yíng)空間

正如上文所說(shuō)，二樓具有典型的獨(dú)立、專(zhuān)屬特征，并且可以培養(yǎng)用戶(hù)心智，固化品牌空間，這也為運(yùn)營(yíng)活動(dòng)創(chuàng)造了條件。

例如京東將首頁(yè)的二樓打造成為了“特物Z”專(zhuān)區(qū)，兼容會(huì)場(chǎng)模式和品牌活動(dòng)。讓用戶(hù)可以更快地觸達(dá)到“內(nèi)容”。效率更高。一旦形成了用戶(hù)固定心智，將成為重要的運(yùn)營(yíng)空間。

餓了么也采用了同樣的思路，在二樓設(shè)立了“超級(jí)品牌”專(zhuān)區(qū)。強(qiáng)化品牌活動(dòng)的曝光，通過(guò)“超級(jí)新品”和“超級(jí)品牌日”兩個(gè)維度，創(chuàng)造了新的營(yíng)銷(xiāo)空間。

3. 功能空間

微信讀書(shū)“閱讀”頻道采用信息流、大卡片的形式，根據(jù)社交關(guān)系和個(gè)人偏好向用戶(hù)推薦書(shū)籍。傳統(tǒng)App中的書(shū)城搜索模式反而成為了次要的書(shū)籍獲取模式。

因此在微信書(shū)架頻道中，優(yōu)先展示與用戶(hù)關(guān)聯(lián)性更強(qiáng)的“書(shū)架”和“書(shū)單”，而書(shū)城作為次要內(nèi)容隱藏在二樓。通過(guò)空間的隔離，讓用戶(hù)專(zhuān)注于已有書(shū)籍的閱讀，在內(nèi)容邏輯上也更加合理清晰。

三、二樓空間的設(shè)計(jì)細(xì)節(jié)

1. 適度引導(dǎo)

“下拉刷新”已經(jīng)形成了用戶(hù)普遍的認(rèn)知，而二樓的設(shè)計(jì)目前并不主流。因此在設(shè)計(jì)時(shí)，首先要考慮用戶(hù)的可感知，讓用戶(hù)知道二樓的存在。

淘寶采用的是頁(yè)面掛件的引導(dǎo)方式。

餓了么采用的是動(dòng)效引導(dǎo)的方式。當(dāng)用戶(hù)在首頁(yè)停留一定的時(shí)長(zhǎng)后，頁(yè)面上方會(huì)主動(dòng)展示引導(dǎo)信息。

2. 交互操作

當(dāng)下拉刷新與二樓并存時(shí)，需要做出較為明顯的交互區(qū)分。輕度下拉，實(shí)現(xiàn)刷新功能，重度下拉則進(jìn)入二樓空間。兩者之間需要通過(guò)中間態(tài)實(shí)現(xiàn)自然過(guò)渡，同時(shí)可以防止用戶(hù)習(xí)慣造成誤操作，避免增加用戶(hù)的交互成本。

當(dāng)然對(duì)于運(yùn)營(yíng)活動(dòng)，為了吸引用戶(hù)進(jìn)入二樓，還可以增加預(yù)覽信息，充實(shí)中間態(tài)的內(nèi)容設(shè)計(jì)。

3. 視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)需要根據(jù)內(nèi)容的屬性定位風(fēng)格，不過(guò)根據(jù)我的觀察，除了營(yíng)銷(xiāo)活動(dòng)中需要考慮品牌色，大部分二樓都是采用深色背景。希望能夠在視覺(jué)上建立空間的差異化，讓用戶(hù)更加清晰的感知到進(jìn)入了一個(gè)全新的內(nèi)容空間。

四、總結(jié)

二樓的出現(xiàn)拓展了頁(yè)面空間。這個(gè)空間也更加靈活，不僅可以承載圖文，還可以加入視頻、H5互動(dòng)展示、直播等內(nèi)容，成為了重要的運(yùn)營(yíng)空間。而支付寶則向下挖掘，創(chuàng)造了“地下室”空間。相信未來(lái)會(huì)有更多的產(chǎn)品去打造自己的二樓空間。

今天的分享就到這里了，歡迎評(píng)論區(qū)留言交流~

#專(zhuān)欄作家#

子牧先生。公眾號(hào)：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長(zhǎng)體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議