編輯導語：在PC端及移動端的頂部常有一些頂部導航欄，標識當前所在頁面及搜索過的內(nèi)容等，但是卻占用過多頁面空間，在上滑頁面時，影響用戶體驗。那么本文提出「吸頂設計」這一優(yōu)化概念，并介紹了五種如何使用吸頂優(yōu)化使用體驗的方式，值得閱讀學習。

大家好，我是Clippp，今天為大家分享的是「吸頂設計」。PC端及移動端的頂部常有一些頂部導航欄，標示當前所在的頁面名稱、返回按鈕位置，一些全局操作按鈕的放置、搜索等內(nèi)容，這些會占用頁面較高的空間。

有些頁面用戶在往上滑動的時候，想要做一些更符合使用場景的內(nèi)容調(diào)整，比如填寫很長的表單，或者查看較多的信息內(nèi)容。如果一直保留較高的導航欄，會壓縮頁面高度使用空間，用戶體驗并不好。

吸頂是具有全局價值的內(nèi)容，下面介紹五種如何使用吸頂優(yōu)化使用體驗的方式。

一、改變背景顏色及樣式

這種方式一般運用在首頁有Banner圖的情況下，那么上滑吸頂后，導航區(qū)域背景的顏色以及文字、控件的顏色也需要調(diào)整。

UI中國PC端頂部導航的背景色是使用的半透明，這樣滾動吸頂后也需要改變背景顏色。

在隨申辦APP中，由于頂部全局搜索是在背景上的，向上滑動吸頂后改變?yōu)槠渲魃{(diào)。

百度網(wǎng)盤APP的個人頁向上滑動吸頂后，背景顏色改變?yōu)榘咨?/p>

二、隱藏及縮減

一些偏內(nèi)容瀏覽的頁面中，比如首頁宣傳頁等，在用戶進行上滑進沉浸地瀏覽時，其實會很明確地知道自己當前所在的頁面位置，同時使用導航欄中功能控件的概率也很低。

這時可以將原標題欄、導航等整個隱藏，只將一些服務于瀏覽內(nèi)容的組件
吸頂。

在站酷PC的首頁，滾動后隱藏頂部導航及banner等，吸頂下面的卡片導航可以讓用戶更專注瀏覽內(nèi)容。

優(yōu)健康A(chǔ)PP首頁向上滾動后，隱藏頂部定位搜索banner區(qū)，吸頂業(yè)務的核心查報告和買體驗入口。

京東購物車向上滑動時，隱藏導航欄，能讓單屏承載更多的內(nèi)容，當往上滑動頁面時說明用戶想要瀏覽之前加入購物車的商品。

三、替換及更改布局

標題欄在沒有吸頂?shù)臓顟B(tài)下是有主標和副標兩行文字，但是在吸附情況下只保留了主標一行文字。

這些都是對吸頂內(nèi)容的權(quán)衡和調(diào)整，使多行信息變一行，壓縮凍結(jié)模塊的空間。

當用戶想需要專注填或看表單信息時，頭部內(nèi)容無需占據(jù)那么大的位置，壓縮凍結(jié)后可以讓用戶看到更多表內(nèi)容。為了方便用戶在瀏覽頁面信息時隨時的可操作性，全局操作按鈕需要放在頂部導航上展示。

在PC端知乎中，默認狀態(tài)下展示導航、問題以及問題詳情內(nèi)容、操作按鈕等，滑動后替換掉導航，更改問題布局，壓縮成一行問題及主要操作按鈕。

在微博APP我的個人頁會默認展示一些信息，向上滑動后隱藏替換成我的。

豆瓣APP默認狀態(tài)下導航欄只顯示電影這個類別。當上滑查看該電影詳情信息時，原標題就隱藏了，取而代之的是該電影的海報縮略圖、電影名以及用戶瀏覽豆瓣電影評價最關(guān)注的用戶評分。

四、階段性凍結(jié)-兩階段

這種方式前端使用的是固定高度的方式，一般只分兩階段凍結(jié)，第一階段凍結(jié)頂部關(guān)鍵內(nèi)容，第二階段繼續(xù)凍結(jié)需要專注瀏覽的信息內(nèi)容上的導航或關(guān)鍵操作。

在京東PC端，頂部內(nèi)容比較多，滾動后吸頂全局搜索，滾動到卡片區(qū)再吸頂卡片區(qū)的導航，這是在一個固定高度內(nèi)滾動，可以把第二階段出現(xiàn)的滾動條隱藏。

叮咚買菜APP的第一階段吸頂全局搜索，這里有個細節(jié)，因為導航下面是banner圖，搜索按鈕和banner圖是一個顏色，滑動后改變成叮咚的主色調(diào)，滑動到下面的卡片區(qū)后再繼續(xù)吸頂卡片區(qū)的導航。

五、階段性凍結(jié)-多階段

這種方式前端使用的是向下?lián)伍_內(nèi)容的方式，一般運用在頂部有需要凍結(jié)的導航等且下面內(nèi)容有多個表格的情況，滾動到當前的表格就凍結(jié)該區(qū)域的表頭。

在confluence中，滾動吸頂頭部導航出現(xiàn)表格后，表頭內(nèi)容會階段性凍結(jié)。這種方式是往下?lián)伍_高度把表頭固定，可以把表格中的滾動條隱藏。

作者：cassie

原文鏈接：www.zcool.com.cn/article/ZMTM0ODkzMg==.html

本文由 @cassie 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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