頁面滾動到某一位置吸頂 談談滑動頁面時的吸頂內容

2021-10-13 03:39:14 字數 2331 閱讀 3799

背景最近在優化一些產品的頁面,某些頁面使用者在往上滑動的時候,想要做一些更符合使用者使用場景的內容調整,在做之前,大概分析了下一些主流產品的做法。

在大量的分析一些產品後,發現滾動頁面時凍結內容的變化形式大概分為以下幾種:

1、改變背景和元素樣式

2、隱藏導航欄、沉浸式瀏覽內容

3、更改布局、壓縮空間

4、精簡資訊、替換內容

5、展示特定重要操作

6、階段性凍結頁面中的篩選內容

一、改變背景和元素樣式

這種一般就是頂部是有色背景,在往上滑動頁面的時候,由於頂部內容要凍結,為在頁面上凸顯出元素的層級感,所以凍結的內容要做相應的樣式調整。

如下面自如首頁banner為搜尋元素的有色背景,當頁面往上滑動時,相應的搜尋元素也做了樣式調整,即城市和訊息由白色變成了黑色,搜尋框增加了陰影,以適應白色頁面內容區域的顯示。

自如 「首頁」

再如噹噹的首頁,當頁面往上滑動的時候,搜尋框變為灰色來適應白色頁面上內容區域的顯示。

噹噹 「首頁」

二、隱藏導航欄、沉浸式瀏覽內容

上面我們說了,移動端的頁面上寸土寸金,想要某種場景下展示更多的重要內容,那就必須在某些時候隱藏掉一些相對次要資訊。

如京東購物車頁面往上滑動時,隱藏導航欄,沉浸式的頁面瀏覽模式,能讓單屏承載更多的內容,當往上滑動頁面時說明使用者想要瀏覽之前加入購物車的商品。

京東 「購物車」

再如京東搜尋商品後的結果頁面,往上滑動頁面時,說明使用者想要瀏覽篩選出自己想要的商品,此時頂部導航欄區域(搜尋框及輔助操作)隱藏,只凍結條件篩選項,方便使用者進行精細篩選。

京東搜尋結果頁

三、更改布局、壓縮空間

這種一般就是多行資訊變一行,壓縮凍結模組的空間。

京東 「首頁」

再如去哪兒上單個地方的詳情頁,當使用者往上滑動頁面時,城市名稱與城市篩選按鈕被壓縮、移動至頂部導航欄,與搜尋框和全域性按鈕在一行的位置。預設狀態下城市名稱單獨乙個區域,顯示為較大的字型形式,頭圖背景為該城市的標誌性建築,容易把使用者帶入到情景中去,展開對該城市的無限遐想或喚起一些情感記憶,算是情感化設計的一種。但當使用者往上滑動頁面時,說明想要具體檢視該城市周邊的一些吃喝玩樂的相關,那麼這時候頭圖及該城市的名稱就顯得不重要了。

去哪兒四、精簡資訊、替換內容

這種一般是從預設的一種形式變為另一種形式的過程,當頁面往上滑動時,由於凍結的內容較預設的變化較大,所以可認為是內容的替換。這種形式在個人中心頁面運用的比較多。

如京東的 「我的」 頁面,頭部預設展示個人的一些資訊,當使用者往上互動頁面時,漸隱出現頂部導航(小頭像、頁面名稱、全域性操作按鈕),導航背景為主題色,把全域性操作按鈕放在頂部導航上展示是為了方便使用者在瀏覽頁面資訊時隨時的可操作性。

京東 「我的」

如高德地圖 「我的」 頁面,預設展示使用者資訊,當往上滑動頁面時,頂部出現導航欄,個人頭像被放小放在左側,右側為全域性操作「設定」按鈕。

高德地圖 「我的」

再如馬蜂窩 「我的」 頁面,由於不是一級頁面,故該頁面預設有頂部導航欄,左上角為返回按鈕,右側為全域性操作,頭圖為地球背景,上面的大數字為旅行的國家及城市資料,讓使用者更具有情景代入感。當往上滑動頁面時,頂部導航上的資訊做了稍微調整,頭像被縮小放了上去,右側設定按鈕隱藏,背景替換為模糊背景。相較於前兩個應用的個人中心頁變化較小。

馬蜂窩 「我的」

五、展示特定重要操作

如當當 「我的」 頁面,頂部模組預設展示個人資訊,當往上滑動頁面時,頂部導航欄位置由原來的搜尋按鈕被放大為搜尋框凍結在頂部,引導使用者去搜尋 「讀書吧」,此種操作為特定的運營需求。

噹噹 「我的」

六、階段性凍結頁面中的篩選項

這種方式一般運用在類似首頁這樣的頁面,第一屏一般為分類入口及運營位,第二屏以後一般為某個主題的商品或服務類展示,往往為加重要資訊的展示形式。

如高德地圖的 「附近」 和馬蜂窩的 「首頁」,頁面上部分為一些分類入口及運營位,當頁面往上滑動時,在篩選項滾動至頁面頂部時凍結在頂部,便於使用者沉浸式瀏覽商品及對商品的篩選。在比較自然的過渡情況下,對使用者來說又像是乙個全新的商品頁面,轉場比較自然,更容易讓使用者接受。

高德地圖「附近」

馬蜂窩 「首頁」

總結不管是在何種情況下頂部凍結的內容,都有乙個相同的關鍵點,那就是過渡要自然,一般使用縮放、移動、漸隱漸顯的方式,不會讓使用者感覺到明顯的突兀。

同時要盡量精簡需凍結的內容資訊,原則就是對下面頁面中的內容一定是有必要而存在的,如果非必須則可以考慮隱掉。要盡量縮減被凍結的位置空間,留出更多的頁面空間以便於使用者瀏覽主要資訊內容。

當開發同學嫌麻煩而跟你說預設是啥樣,滾動時也得啥樣時,你可以就本身的產品站在使用者使用場景及運營需要的角度跟他解釋說明這麼做的原因,而不是直接拿著某某產品應用的頁面說,人家就是這麼做的。站在自身產品和使用者的角度考慮問題顯然更有說服力一些,而不僅僅只是表面的展示和互動形式。

jquery滾動條固定在某一位置

檢視歷史訊息的時候,需要將滾動條維持在正在檢視的訊息位置。本方法是通過新增屬性data msg獲取當前的位置,offset top獲取滾動距離,demo如下 html div class box div class messagebox p 原資料1 p p 原資料2 p p 原資料3 p p da...

使暫存器中某一位置1,保持其他位不變

1 使暫存器中某一位置1,保持其他位不變 把某一位清零的辦法就是先只有這一位是1,再取反,只有這一位是零,其他位都是1,再與上這個暫存器,那麼就是使其他位不變,只有這一位 0,變成0,然後再或1。例如 define tim ccmr1 oc2pe uint16 t 0x0008 define tim...

mysql在表的某一位置增加一列的命令

如果想在乙個已經建好的表中新增一列,可以用諸如 alter table t1 add column addr varchar 20 not null 這條語句會向已有的表t1中加入一列addr,這一列在表的最後一列位置。如果我們希望新增在指定的一列,可以用 alter table t1 add co...