背景
最近在優(yōu)化一些產(chǎn)品的頁面，某些頁面用戶在往上滑動(dòng)的時(shí)候，想要做一些更符合用戶使用場景的內(nèi)容調(diào)整，在做之前，大概分析了下一些主流產(chǎn)品的做法。
這就不得不讓我們先分析了解下 “頂部導(dǎo)航” 的作用及承載內(nèi)容：頂部導(dǎo)航欄用于標(biāo)示當(dāng)前所在的頁面名稱、返回上一頁面按鈕的放置，一些全局操作按鈕的放置、搜索等….
我們似乎已經(jīng)習(xí)慣了導(dǎo)航欄的存在，哪怕只是放一個(gè)頁面名稱的情況下；如果不考慮以上因素，那么是不是可以把頂部導(dǎo)航欄隱藏掉？能使得頁面展示更多的重要內(nèi)容，畢竟APP頁面的空間寸土寸金。這類一般比較適合一級頁面，不需要返回至上一個(gè)頁面。
在大量的分析一些產(chǎn)品后，發(fā)現(xiàn)滾動(dòng)頁面時(shí)凍結(jié)內(nèi)容的變化形式大概分為以下幾種：
1、改變背景和元素樣式
2、隱藏導(dǎo)航欄、沉浸式瀏覽內(nèi)容
3、更改布局、壓縮空間
4、精簡信息、替換內(nèi)容
5、展示特定重要操作
6、階段性凍結(jié)頁面中的篩選內(nèi)容
一、改變背景和元素樣式
這種一般就是頂部是有色背景，在往上滑動(dòng)頁面的時(shí)候，由于頂部內(nèi)容要凍結(jié)，為在頁面上凸顯出元素的層級感，所以凍結(jié)的內(nèi)容要做相應(yīng)的樣式調(diào)整。
如下面自如首頁banner為搜索元素的有色背景，當(dāng)頁面往上滑動(dòng)時(shí)，相應(yīng)的搜索元素也做了樣式調(diào)整，即城市和消息由白色變成了黑色，搜索框增加了陰影，以適應(yīng)白色頁面內(nèi)容區(qū)域的顯示。
再如當(dāng)當(dāng)?shù)氖醉?，?dāng)頁面往上滑動(dòng)的時(shí)候，搜索框變?yōu)榛疑珌磉m應(yīng)白色頁面上內(nèi)容區(qū)域的顯示。
二、隱藏導(dǎo)航欄、沉浸式瀏覽內(nèi)容
上面我們說了，移動(dòng)端的頁面上寸土寸金，想要某種場景下展示更多的重要內(nèi)容，那就必須在某些時(shí)候隱藏掉一些相對次要信息。
如京東購物車頁面往上滑動(dòng)時(shí)，隱藏導(dǎo)航欄，沉浸式的頁面瀏覽模式，能讓單屏承載更多的內(nèi)容，當(dāng)往上滑動(dòng)頁面時(shí)說明用戶想要瀏覽之前加入購物車的商品。
再如京東搜索商品后的結(jié)果頁面，往上滑動(dòng)頁面時(shí)，說明用戶想要瀏覽篩選出自己想要的商品，此時(shí)頂部導(dǎo)航欄區(qū)域（搜索框及輔助操作）隱藏，只凍結(jié)條件篩選項(xiàng)，方便用戶進(jìn)行精細(xì)篩選。
三、更改布局、壓縮空間
這種一般就是多行信息變一行，壓縮凍結(jié)模塊的空間。
如京東 “首頁”，當(dāng)頁面往上滑動(dòng)的時(shí)候，原本單占一行的搜索框縮小寬度、移動(dòng)至上面導(dǎo)航欄，占據(jù)原來運(yùn)營位的位置，與一些全局操作按鈕壓縮在一行的空間；也就是當(dāng)用戶想要無目的的在首頁瀏覽、瞎逛時(shí)，搜索框就無需占據(jù)那么大的位置，反而應(yīng)讓用戶能快速的在單屏內(nèi)看到更多的商品。
再如去哪兒上單個(gè)地方的詳情頁，當(dāng)用戶往上滑動(dòng)頁面時(shí)，城市名稱與城市篩選按鈕被壓縮、移動(dòng)至頂部導(dǎo)航欄，與搜索框和全局按鈕在一行的位置。默認(rèn)狀態(tài)下城市名稱單獨(dú)一個(gè)區(qū)域，顯示為較大的字體形式，頭圖背景為該城市的標(biāo)志性建筑，容易把用戶帶入到情景中去，展開對該城市的無限遐想或喚起一些情感記憶，算是情感化設(shè)計(jì)的一種。但當(dāng)用戶往上滑動(dòng)頁面時(shí)，說明想要具體查看該城市周邊的一些吃喝玩樂的相關(guān)，那么這時(shí)候頭圖及該城市的名稱就顯得不重要了。
四、精簡信息、替換內(nèi)容
這種一般是從默認(rèn)的一種形式變?yōu)榱硪环N形式的過程，當(dāng)頁面往上滑動(dòng)時(shí)，由于凍結(jié)的內(nèi)容較默認(rèn)的變化較大，所以可認(rèn)為是內(nèi)容的替換。這種形式在個(gè)人中心頁面運(yùn)用的比較多。
如京東的 “我的” 頁面，頭部默認(rèn)展示個(gè)人的一些信息，當(dāng)用戶往上互動(dòng)頁面時(shí)，漸隱出現(xiàn)頂部導(dǎo)航（小頭像、頁面名稱、全局操作按鈕），導(dǎo)航背景為主題色，把全局操作按鈕放在頂部導(dǎo)航上展示是為了方便用戶在瀏覽頁面信息時(shí)隨時(shí)的可操作性。
如高德地圖 “我的” 頁面，默認(rèn)展示用戶信息，當(dāng)往上滑動(dòng)頁面時(shí)，頂部出現(xiàn)導(dǎo)航欄，個(gè)人頭像被放小放在左側(cè)，右側(cè)為全局操作“設(shè)置”按鈕。
再如馬蜂窩 “我的” 頁面，由于不是一級頁面，故該頁面默認(rèn)有頂部導(dǎo)航欄，左上角為返回按鈕，右側(cè)為全局操作，頭圖為地球背景，上面的大數(shù)字為旅行的國家及城市數(shù)據(jù)，讓用戶更具有情景代入感。當(dāng)往上滑動(dòng)頁面時(shí)，頂部導(dǎo)航上的信息做了稍微調(diào)整，頭像被縮小放了上去，右側(cè)設(shè)置按鈕隱藏，背景替換為模糊背景。相較于前兩個(gè)應(yīng)用的個(gè)人中心頁變化較小。
五、展示特定重要操作
如當(dāng)當(dāng) “我的” 頁面，頂部模塊默認(rèn)展示個(gè)人信息，當(dāng)往上滑動(dòng)頁面時(shí)，頂部導(dǎo)航欄位置由原來的搜索按鈕被放大為搜索框凍結(jié)在頂部，引導(dǎo)用戶去搜索 “讀書吧”，此種操作為特定的運(yùn)營需求。
六、階段性凍結(jié)頁面中的篩選項(xiàng)
這種方式一般運(yùn)用在類似首頁這樣的頁面，第一屏一般為分類入口及運(yùn)營位，第二屏以后一般為某個(gè)主題的商品或服務(wù)類展示，往往為圖片加重要信息的展示形式。
如高德地圖的 “附近” 和馬蜂窩的 “首頁”，頁面上部分為一些分類入口及運(yùn)營位，當(dāng)頁面往上滑動(dòng)時(shí)，在篩選項(xiàng)滾動(dòng)至頁面頂部時(shí)凍結(jié)在頂部，便于用戶沉浸式瀏覽商品及對商品的篩選。在比較自然的過渡情況下，對用戶來說又像是一個(gè)全新的商品頁面，轉(zhuǎn)場比較自然，更容易讓用戶接受。
總結(jié)
不管是在何種情況下頂部凍結(jié)的內(nèi)容，都有一個(gè)相同的關(guān)鍵點(diǎn)，那就是過渡要自然，一般使用縮放、移動(dòng)、漸隱漸顯的方式，不會(huì)讓用戶感覺到明顯的突兀。
同時(shí)要盡量精簡需凍結(jié)的內(nèi)容信息，原則就是對下面頁面中的內(nèi)容一定是有必要而存在的，如果非必須則可以考慮隱掉。要盡量縮減被凍結(jié)的位置空間，留出更多的頁面空間以便于用戶瀏覽主要信息內(nèi)容。
當(dāng)開發(fā)同學(xué)嫌麻煩而跟你說默認(rèn)是啥樣，滾動(dòng)時(shí)也得啥樣時(shí)，你可以就本身的產(chǎn)品站在用戶使用場景及運(yùn)營需要的角度跟他解釋說明這么做的原因，而不是直接拿著某某產(chǎn)品應(yīng)用的頁面說，人家就是這么做的。站在自身產(chǎn)品和用戶的角度考慮問題顯然更有說服力一些，而不僅僅只是表面的展示和交互形式。
