萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

網頁浮動層設計指南:三大典型場景與濫用警示

什麼是浮動層?

浮動層始終固定在螢幕特定位置,不隨滾動而移動,以強調內容或銜接上下文說明。經歷一段沉寂後,現重獲重視(不含浮動廣告)。

浮動層概念示意

三大核心應用場景

1. 導航類浮動層

解決長頁面「返回頂部」導航痛點。新浪微博頂部一級導航浮動,符合微博用戶跳躍式瀏覽心理;淘寶商品詳情頁切換導航採用浮動層並整合「返回頂部」,適應頁面日益冗長的現狀。

新浪微博與淘寶浮動導航

2. 對比類浮動層

多產品多參數對比時,頁面極長,用戶滑至底部易忘記欄位對應哪款產品。將產品名稱行固定浮動,隨時提示對應關係。QQ 汽車對比頁、規劃中的 365 商業地產單鋪對比頁(最多 4 款同時對比)均適用此模式。

QQ 汽車對比浮動表頭

3. 提示類浮動層

應用最廣:線上客服、返回頁頂、版本更新提示等。

提示類浮動層範例

優勢不代表可濫用

需針對具體業務分析用戶瀏覽方式,合理使用。同時控制浮動層數量,並非越多越好。

作者:文擊每耳|文章來源:365ucd.com

copyright © 萬盛學電腦網 all rights reserved