做了8年產品經理后，我是這么看產品經理的
在現代移動應用設計中，「浮標」按鈕（Floating Action Button）已成為一種常見的交互元素，它不僅提供便捷的功能入口，還能增強用戶體驗。然而，設計一個有效的浮標按鈕并非易事，需要綜合考慮功能定位、視覺效果、交互設計以及技術實現等多個方面。
今天分享的是「浮標設計」。結合設計原則與“智能伴學助手”項目應用浮標實踐展開。
文章目錄如下：
在教育類移動端中接入了大模型AI智能應用，為保證這個應用入口可長期保持并隨時可見，提高使用率，為用戶提供便利。筆者通過“智能伴學助手”浮標實踐應用，對后續制作浮標在界面設計中思考與探索。 浮標的本質與價值
作為界面中的「第三層空間」，浮標通過視覺懸浮感打破平面限制 (如iOS的3D視差效果)；在信息過載時代，提供「隨時在場」的核心功能入口 (如美團外賣的懸浮購物車，左右動效：進縮)。
▲「第三層空間」并「隨時在場」，也是很好的廣告位和優惠營銷，一些浮標的“小巧思”。
利用格式塔原則中的「閉合性」設計半透明遮罩，暗示可交互區域；通過菲茨定律優化點擊熱區，圓形浮標直徑建議≥48dp (Android規范)。
就項目中“智能伴學助手”為例，一個教育類的應用入口，結合功能定位、用戶體驗與技術實現浮標在界面中的作用。
通常浮標是一個懸浮的按鈕或圖標，用于快速訪問某些功能，從多個維度探索其在移動端界面中的合理呈現方式：
浮標的設計規范：比如尺寸、顏色、位置。通用的設計規范，教學工具類App的界面設計，可能涉及圖標和布局。
1）尺寸與網格系統
? 圖標尺寸需適配不同屏幕分辨率，常見規范包括128x128px、96x96px、64x64px等，需根據界面層級選擇合適尺寸。
? 尺寸一般用1:1比較好或者成倍數，先做大再導出所需要的不同大小比例。
? 使用網格系統 (如微軟Fluent的24px基礎網格) 確保視覺一致性，留出安全邊距（如2px內邊距）避免元素溢出。
2）造型與風格
? 遵循簡約易懂原則，優先采用象形圖或表意符號增強識別性。
? 保持系列圖標風格統一，包括線條粗細 (建議1.5px)、圓角弧度 (微軟Fluent定義大/中/小三級圓角) 及視覺平衡。
3）適配性
? 導出格式需與開發協作，推薦PNG序列或SVGA文件以兼顧清晰度與性能。
? 自適應考慮不同平臺的顯示情況。
核心功能聚合：語言學習工具類界面將高頻功能 (如首頁入口、作業評論、學習提問) 通過浮標動態整合，支持長按展開二級菜單或滑動切換功能模式，吸附于屏幕邊緣。
根據學習階段智能變化：
(外語語言口語學習一般模式：盲聽，然后根據自己的話復述，理解語言并有效使用語言)
▲ 首頁入口、作業評論、學習提問通過浮標智能解答點評，通過二級頁面展開細則
以”智能伴學助手“為例，浮標主色是藍色，企業主題色也是藍色，而”智能伴學助手“浮標使用背景一般也以藍色為主，App主題色也是藍色，多場景使用適配藍色背景的靜態浮標，又要使浮標可以在背景中脫穎而出，在其過程中嘗試藍+藍搭配的存在局限性，本身藍色系較統一。
在同為藍色后，產生不同「空間」，通過將界面元素分層（如前景圖標與背景圖像），營造深度感。在浮標進行描邊隔層，現在很多表情包就是這種模式操作。
微信小程序的移動學習平臺設計，強調了用戶需求分析、界面簡潔和交互設計，這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。
在不同背景下的浮標呈現視覺形式，只要點擊即可進入應用。
思考與探索：
▲ 白色背景或者透明背景下的浮標呈現，在不同頁面呈現一“系列”
▲ 藍色背景下或者在統一色系下浮標視覺”糊“，可用白邊的形式將背景和浮標的”空間“區分開
思考與探索：配色方案
1）主色選擇
明亮色系：如紅色、橙色、黃色等，能快速吸引用戶注意，適用于促銷活動入口。
品牌色融合：在特殊場景中融入品牌LOGO或主色，代表企業形象和IP，增強品牌認知。
2）色彩心理學應用
藍色：傳遞信任感，適合金融或工具類應用。
黑金/黑黃組合：營造神秘或高端感，常見于娛樂或奢侈品領域。
紫色+粉紅：適用于美容、女性向產品，傳遞溫柔與創意。
控制色彩平衡，用戶色彩感官可適應。
3）對比與背景
使用中性色（如米色、白色）作為背景，提升信息可讀性。
避免沖突色搭配（如藍色用于食品類浮標易抑制食欲）。
思考與探索：個性化推薦和交互設計，可以結合AI預測用戶行為，動態調整浮標的出現時機，比如在需要提醒作業時顯示。主色選用品牌色（如教育藍/科技紫）強化識別性。
▲ 如何設計浮標會更好？
創新交互模式思考探索：
1）壓力感知交互
? 安卓壓感屏實現「輕按預覽/重按觸發」分層交互(如華為懸浮球壓感菜單)；配合觸覺反饋(Haptic Engine)增強操作確認感。
2）動態語義變形
生物擬態動畫：
? 呼吸感懸浮：模擬水母游動節奏（振幅0.5-1.2px，頻率0.8Hz） ；
? 點擊時觸發粒子擴散動畫（模擬知識傳遞意象）；
? 拖拽時產生彈性形變（阻尼系數0.6-0.8），邊緣碰撞后回彈。
根據場景智能改變形態：
? 閱讀類App中展開為「書簽浮標+進度條」復合控件 ；
? 音樂播放器浮標可拉伸成波形可視化界面。
通過多模態反饋，聽覺，視覺，觸覺多種情感交互。
3） 空間布局策略
? 默認位置：置于屏幕右下側（符合右手持機習慣），預留10%邊距防止誤觸；
? 智能避讓：通過內容識別算法，在視頻播放或文本輸入時自動偏移避開核心內容區域；
? AR場景中的空間投影浮標（如IKEA Place家具預覽浮窗）。
▲ 位置多為屏幕右下側
1）跨端一致性
? 使用React等框架封裝可復用浮標組件，通過響應式設計適配不同設備尺寸（如折疊屏展開態需重新計算定位錨點）；
? 采用SVGA格式實現高性能動效，控制幀率在30fps以內以降低功耗。
2）AI驅動個性化
? 基于LSTM模型預測用戶行為： 檢測到長時間未操作時，浮標縮小并展示激勵標語； 識別到錯題高峰時段，主動彈出知識點講解入口；
? 支持語音指令交互（如“浮標移到左上角”）。
1）包容性設計
? 為色弱用戶提供高對比度模式 (浮標輪廓增加動態描邊，對比度≥4.5:1)；
? 支持頭部追蹤控制浮標移動 (iOS Switch Control技術適配)。
2）防沉迷機制 (適合未成年類App)
? 連續使用1小時后，浮標漸變灰色并觸發休息提醒；
? 家長端可遠程設置浮標功能禁用時段。(未成年學習類工具考慮優化)
1）多模態融合
? AR場景中浮標投射為3D虛擬助手，支持手勢交互與空間定位；
? 結合眼動追蹤技術，實現注視區域自動呼出上下文菜單。
2）情感化表達
? 根據學習成就解鎖浮標皮膚 (如連續打卡7天變為獎杯形態)；
? 錯誤率過高時，浮標呈現“鼓勵模式” (配色變暖+微震動反饋)。
學習類智能伴學助手的浮標既能作為高效的功能樞紐，又可成為情感化學習伴侶。實際落地時建議結合A/B測試持續優化，例如對比分析「固定浮標」與「場景自適應浮標」的點擊轉化率差異。
浮標不應僅是功能載體，更應成為：
? 空間敘事者：通過動態變化講述產品故事；
? 情感連接器：建立用戶與數字世界的溫度觸點；
? 場景預言家：預判需求并提供恰到好處的服務。
設計師需在「顯性價值」與「隱形干擾」間找到精妙平衡，讓浮標成為提升體驗的優雅解決方案而非視覺負擔。未來可探索腦機接口的意念控制浮標、量子動畫渲染等突破性方向。
技術實現上，探究代碼示例展示了如何控制浮標的移動，確保不超出屏幕，這可以作為技術參考應用實際案例中。同時性能優化方面，使用SVGA格式或減少幀數，可能對動效設計有幫助。
浮標設計需要結合功能定位、用戶行為、視覺設計、交互體驗和技術實現，可多進行參考不同案例，搜索現有項目，對比借鑒然后對新型B端界面有所創新，確保既實用又不干擾用戶。
還可以利用Ai創新思維，設計師可以更快速、高效地生成多種設計方案，結合項目開發滿足消費者對個性化、時尚化的需求。
本文由人人都是產品經理作者【Clippp】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
蘭亭妙微(www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
本篇是關于圓角的UI設計知識分享，主要分為兩個部分，第一部分介紹圓角在UI設計中的作用，第二部分是關于在界面中容易被忽略的圓角設計細節。
視網膜中有塊區域叫做中央凹，是視覺最敏銳的區域。中央凹在處理圓形時速度最快，而在處理棱角邊緣時則需要調用大腦中更多的“神經影像工具”。所以，圓角越大、越趨近于圓形，人眼在處理時速度越快。
多數情況，用戶使用App時在每個頁面的停留時間都比較有限，我們需要確保用戶在盡量短的時間內高效獲取有效信息并完成相關操作，尤其對于工具類App來說更是如此。
另外，巴羅神經學研究所對“角”的科學研究發現，角的突顯性感知與角的度數呈線性變化關系，銳角比圓角產生更強的虛幻突顯性（The perceived salience of the corner varied linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles）。簡單的說就是，角越銳利，看起來就越突顯。而角出現的越凸顯，就越多地影響視覺的識別過程，導致識別變慢。
圓角具有其特殊的內在指向性，在界面的容器（如卡片、頭像等）上使用圓角，會引導人們的目光聚焦在圓角矩形或圓形內部的內容上面。
而尖角的外擴性會導致視覺發散，不能使用戶的注意力在第一時間集中到容器中的內容本身。因此，作為內容載體，帶有圓角的容器具備較強的內容引導性，能夠讓用戶更加快速的獲取內容信息。
在我們長久以來形成的心智認知中，認為尖銳的物品具有危險性，而圓潤的物品更加安全。帶有弧度，造型相對圓潤的物品更有助于制造正面情緒，工業設計中常用圓潤平滑的造型來增加產品傳遞給用戶的安全和舒適性。
對于互聯網產品，我們也存在相同的認知，所以在界面設計中使用圓角圖形，也同樣可以帶給用戶正面情緒。
考慮到握持舒適度、安全性和生產工藝等原因，目前市面上多數的手機外觀和屏幕都是采用較大圓角的設計。隨著全面屏手機的興起，我們愈發能注意到從手機外型到內部屏幕，圓角都是以一種嵌套的關系層層對應的。
同樣的，為了遵循這種規律，同時延續從硬件到界面的設計語言，屏幕內部界面中的圓角也是呈現出同樣的嵌套和對應關系。
接下來，說說在UI設計中容易被忽略的兩點問題。
首先，我們來看一個對比示例，你能發現左側彈窗的設計細節問題嗎？左右兩個彈窗的不同之處僅在于按鈕的圓角半徑上，左側彈窗的設計問題就是出現在這里。
前文中我們提到過界面中容器與其內部元素的圓角是存在的對應關系的，但這個細節有時在設計過程中會被我們忽略，導致的結果就是界面的細節經不起推敲，影響視覺的美觀舒適。
我們需要考慮如何去解決這個問題，如果僅僅是做一些個人練習或者單一獨立頁面，那么我們只須要在設計中注意這一點，通過觀察讓圓角在視覺上看起來對應和諧即可。
但是如果你要去制定一套設計規范或在一個已經成熟的產品中去進行設計，我們就須要在保證視覺效果的前提下讓界面中的圓角參數更加嚴謹一些，以便于規范的使用人員了解參數為什么是這個，如何得到的？以及，后續遵從何種規則去進行設計，來保證不同設計師產出標準的一致。
我們在網上可以看到好多教程告訴你：外部容器圓角半徑 = 內部元素的圓角半徑 + 二者間距
△圖片來源于網絡
但我認為這種計算方式是有問題的，首先，多數情況下我們是根據外部容器來推導計算內部元素圓角，而不是從內向外，比如：iOS從手機屏幕→Dock欄→Dock欄中的圖標都是存在圓角的對應關系，我相信應該不是先確定內部圖標的圓角再向外推導容器和屏幕圓角的。然后，如果我們向內推導，這個計算公式就僅在一定條件下成立，因為在二者間距大于外部容器圓角半徑的時候，內部元素的圓角半徑就成了負數。
那么如何計算是相對嚴謹的呢？
我們從外向內推導，在外部容器圓角固定的情況下，內部元素的圓角半徑與它到外部容器的距離相關，在理想情況下：
內部元素的圓角半徑 = 外部容器圓角半徑 - 二者間距
但是，和前面提到過的問題一樣，以上的計算公式有一定的局限，比如在外部圓角很小的情況下，就無法去根據間距計算內部的圓角參數。
對此，我推導出了一套當存在圓角嵌套情況下，用于輔助定義圓角參數的規則：內外卡片 (元素) 圓角差值必須要小于或等于卡片 (元素) 間距。并且，內外卡片 (元素) 圓角差值越大，內外卡片 (元素) 之間的間距取值范圍越靈活。
具體的推導過程如下：
1. 當內外卡片圓角差值等于卡片間距時，內外圓角“完美”對應。當內外卡片圓角差值大于卡片間距時，圓角部分出現明顯視覺問題；
2. 內外圓角“完美”對應卡片的圓角部分的間距看起來比直線位置要顯得略小，所以當卡片間距不變，內部圓角在一定范圍內變大時，在視覺上內外圓角仍然是可對應的，但是當內部圓角過大時，則會出現問題。結合這兩步可得出結論a：內外卡片圓角差值必須小于或等于卡片間距；
3. 根據步驟2，內部卡片圓角略大于“完美”對應圓角時，內外卡片圓角也是能夠形成呼應的；
4. 此時，在步驟3的基礎上，當內外卡片間距變大時 (18px→34px)，左側示例圖的內外圓角依然可以對應，但是右側示例圖的內部圓角看起來會過大，由此可得出結論b：在滿足規則a的條件下，內外卡片圓角差值越大，內外卡片之間的間距取值范圍越靈活；
下面來說第二個容易被忽略的問題，文字內容到圓角容器的內邊距。如果將容器內的文字粗略看做一個矩形，那么結合前文中提到的內外圓角對應關系，文字到容器的內邊距應隨著容器圓角半徑的增加而增加；
另外一點，在我們增加容器的圓角半徑后，導致容器內部空間被壓縮，圓角半徑越大越明顯，我們也需要去調整內邊距，以保證視覺上的透氣和呼吸感 。
最后，補充一點，在前面一張示例圖中我們可以看到，雖然我們通過調整間距的方式，讓界面的視覺看起來更加的舒適美觀，但是同時，也因間距的增加造成了屏幕橫縱空間利用率的下降，所以在工作中需要根據實際情況綜合考量，去定義圓角及內容間距。
作者：菜心輕量文
鏈接：https://www.zcool.com.cn/article/ZMTYyNjI2NA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
蘭亭妙微(www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
今天給大家探討關于產品設計中的布局樣式分析，希望通過本文的梳理和大家一起做一次探索，解析優秀案例的經驗。
Banner 對于設計師來說并不陌生，更多的還是在于視覺表現的環節，作為視覺設計師來說是重點培養的能力之一。今天給大家探討的關于 UI 場景中的 Banner 布局樣式，并非是視覺層面的探索，而是關于產品設計中的布局樣式分析。
在產品中出現 Banner 圖是比較常見的基礎功能，除了在其視覺創意層面不斷探索精進以外，UI 層面的樣式布局也在不斷嘗試更多不同的表現，希望通過本文的梳理和大家一起做一次探索，解析優秀案例的經驗。
分享目錄
一、Banner 視覺層表現類別
二、Banner 布局樣式分析
三、移動端線上案例分析
四、總結
一、Banner 視覺層表現類別
Banner 在 UI 場景中通常伴隨著輪播的形式展示，所以也經常稱之為輪播圖，這也是導航的一種形式之一，也有輪播導航的功能。在產品中出現可以帶給用戶平臺需要重點傳播的內容，比如活動信息和官宣咨詢等。
為了能引起用戶更高的關注度，Banner 在視覺層的表現上面也在不斷的創新。除了 Banner 設計創意、構圖、配色等視覺層面發揮以外，在表現類別上面我分為靜態、動態、視頻、分層視差等。
1.1 靜態 Banner 展示
靜態的輪播圖是最常見的，無論是設計效率還是技術落地都是最為便利的。Banner 畫面為靜態的圖片格式，在產品中分為單圖和多圖，單圖是靜態的展示形式，多圖可以自動輪播和手動滑動切換。
1.2 動態 Banner 展示
動態表現的 Banner 相較于靜態而言更能引起用戶的關注度，強化信息重點，在一些重點元素和行動按鈕等地方實行動態表現。
如果采用動態的形式表現，通常為單圖的居多。動態表現可以引起高關注度，但是如果過多也會形成互相干擾，反而削弱了關注度。
在這個信息爆炸的互聯網環境中，產品設計師都在不斷的嘗試如何更快、更準地獲得用戶的關注度。微動效無疑是一個不錯的選擇，無論是在功能交互還是視覺表現層面，都隨處可見。
1.3 視頻嵌入展示
視頻廣告由來已久，隨著短視頻的走熱，視頻嵌入到輪播廣告中逐漸增多。較多的表現形式為默認出現在首個 Banner 中，伴隨著倒計時出現，也可以關閉播放。此類廣告為了降低用戶在未知場景中的使用干擾，通常為靜音模式，帶給用戶更加友好的體驗。
也有一些產品欄目采用多個視頻輪播的形式，這個應用場景相對較少，一些影視產品偶爾運用。
1.4 分層視差效果展示
為了帶給用戶不一樣的視覺呈現和互動體驗，也逐漸出現一些打破常規表現形式的輪播廣告。分層視差效果是其中變化較大的一種，有輪播疊加的視差、3D翻轉、元素和背景分離視差等。
元素或者背景之間的運動差異必將引起用戶高度的關注，帶來提高關注度的目的。產品設計師也在不斷嘗試更多分層視差的效果，帶給用戶不一樣的廣告體驗。
小結
Banner 在視覺表現層的創新有助于提高用戶對內容的關注度，作為產品設計師我們都在不斷的嘗試更多可能性，除了在創意布局和色彩構成等方面發揮以外，表現形式的差異也是至關重要。
二、Banner 布局樣式分析
鎖定了 Banner 的視覺表現形式以后，我們來分析一下 Banner 在界面布局中的樣式。造成布局差異的因素較多，比如 Banner 比例、大小、通欄、分欄、孤立還是背景對比等。
首先我們來看看通欄和分欄的差別，這個因素會影響 Banner 所能呈現的大小。常規理解都覺得 Banner 越大越好，如果考慮到產品內容布局和信息層級區分方面，也會注意到整個界面布局的舒適度。所以，界面整體的風格和布局樣式也會影響 Banner 布局樣式，需要融合而非格格不入。
如果遇到一些界面布局頭部采用深色，在布局 Banner 的時候為了讓空間感更強，也會讓 Banner 布局于頭部背景上層。通常背景色為固定色值和變動色值，變動色值會根據輪播圖的色彩來定義背景色值，這樣的設計解決方案不僅融合度高且空間感強。
關于 Banner 的比例是很多產品設計師不斷探索的方向，比例影響高度值的控制。界面布局內容量的不同影響高度值的不同，根據內容自定義也是可行的方法之一。也有設計師會根據斐波那契數列計算，推薦出寬高比例有 8:5、8:3、8:2、8:1 等，在計算的過程中我們通常取能被 4 整除的數值。
我們將 Banner 的寬度值定義為：W，高度值定義為：H，比值關系用：Y（ Y 為 5/8、3/8、2/8、1/8 等）。得出計算公式：H=W*Y，得出來的值取能被 4 整數的數值即可。這只是其中一種計算形式，設計師也可以根據具體布局情況進行自定義，設計不是一層不變的方法論，而是做適合具體情況的解決方案。
關于布局樣式的分析遠不止此，拋磚引玉，經驗總結只是一個起步，探索與創新才能突破更多可能性。
三、移動端線上案例分析
經驗總結很大程度上都會根據已有的優秀案例進行分析，立足于成功案例之上才能更切實際。通過大量的產品體驗日記，梳理出同屬性的不同解決方案，下面便為大家推薦一些上線案例分析。
3.1 常規形式運用最為普及
Banner 圖的運用組合元素為圖片層和輪播點，通過不同的滑動交互形式來形成不一樣的變化。常見的都是單純的 Banner 圖、輪播點、滑動切換組合，圖片本身以直角或者圓角、通欄或者分欄來呈現，這個需要結合整體的風格來定；輪播點的形式比較多樣，也有不顯示輪播點的形式，以顯示待輪播圖片來替代。
比如騰訊視頻、愛奇藝、優酷、芒果TV等常用的影視類 App 中，就各自以不同的形式顯示輪播 Banner。騰訊視頻分欄顯示待輪播圖和直角風格，愛奇藝通欄顯示和輪播點配合，優酷圓角風格配合輪播點，芒果TV通欄呈現融合背景且營造前后空間感。
3.2 自然而流暢的縮放切換
除了在圖片層和輪播點進行設計發揮以外，Banner 圖的切換交互也是一種探索的方向，自然而流暢的交互形式能帶給用戶舒適的體驗。比如 MOO 音樂采用縮放過度的形式來進行 Banner 輪播，這種自然而流暢的形式，給人一種非常舒適的操作體驗。
3.3 背景色隨著 Banner 輪播而變化
界面頭部視覺表現為了提高用戶關注度，利用深色表現更能體現空間感和襯托 Banner 效果。通常為品牌色進行襯托，也有很多產品會利用 Banner 進行取色，作為背景色的選擇范圍，這樣更具融合性和視覺表現差異。背景色隨著 Banner 輪播而變化，是比較普遍的一種設計方案，視覺體驗感很好。
3.4 以進度條的形式表達輪播控制
Banner 圖的輪播控制常規的做法是以點的形式呈現或者左右兩側露出待輪播 Banner，最近在淘票票 App 中發現了一種新的表達，以進度條的形式呈現，非常直觀的讓用戶可以判斷出還有多少 Banner 處于待輪播狀態。這樣的表現形式也和觀影時視頻的進度一致，不僅匹配了產品屬性，也能更加直觀的呈現輪播效果，帶給用戶全新的體驗。
3.5 模擬舞臺背景呈現輪播 Banner
在界面布局中空間感的營造可以讓信息對比更加明顯，考拉海購就將 Banner 作為背景來搭建一個具有空間感的舞臺，使得整個界面延伸出更強的深度空間感。Banner 輪播默認以淡入淡出的形式，也可以手動滑動輪播，區別電商產品同質化表現，帶給用戶不一樣的視覺感官體驗。
3.6 異形廣告，打破常規視覺呈現
有時候方方正正的布局讓人感覺受到了一定的束縛，也有一些產品在 Banner 呈現的形式上面不斷打破邊界的束縛，異形廣告的運用逐漸變得頻繁。最簡單的異形廣告是在畫面本身突破束縛，整體的結構布局還是在固定的造型里面，比如騰訊動漫 App 推薦板塊的輪播 Banner。
除了在 Banner 設計本身進行突破束縛以外，也有在造型上面進行變化的，比如膠囊形狀，也稱之為膠囊廣告；在邊界分割上面除了直線以外，也有采用弧形分割或者特殊形狀分割等。
3.7 微動效增強用戶關注度
動效在產品設計中已經運用非常頻繁，在 Banner 圖的設計中也會有所涉及，相較于靜態的呈現方式來說更能引起用戶的關注度。為了不帶給用戶過多的信息干擾，通常都是單圖呈現，這樣也能將焦點強化。
通常都是個別元素進行微動效，來體現動感效果，在主 Banner 中相對少見，次級和異形廣告中運用廣泛。
3.8 視頻廣告嵌入，不破壞只融合
視頻廣告的運用是比較常見的，在保持原有 Banner 布局不變的情況下嵌入到結構中，引起用戶的關注度。通常為自動播放的形式，為了降低用戶在未知場景中的使用干擾，默認靜音模式。有倒計時的伴隨著關閉操作，也有一些提供重播的操作，播放結束自動翻頁。
除了單個視頻嵌入以外，也有 Banner 全部采用短視頻的方式，不過相對較少。
3.9 卡片疊加滑動提升輪播空間感
在探索手勢操作上面，便捷度、流暢度、體驗感都是至關重要的。滑動 Banner 過程中的體驗感能帶給用戶對于當前內容的關注程度，便于操作的同時能引起用戶的好奇心更是重中之重。
蝦米音樂的樂庫便是結合了眾多設計思考，卡片疊加帶來視覺呈現的空間感，手勢滑動流暢自然，主題文案隨著滑動而變化顯示或者隱藏，帶給用戶更加友好的選擇體驗。
3.10 主題元素分層視差帶來輪播新玩法
為了提高用戶對輪播廣告的關注度，突破已有的表現形式是設計師不斷思考的方向。
自如 App 端的做法引起了我的關注，將主題元素和背景層進行分離，主題元素進行輪播的同時背景層漸隱呈現。不一樣的視覺表現和輪播形式，帶來了 Banner 輪播形式的新玩法。
四、總結
Banner 在很多產品中是較為常見的元素存在，UI 場景中的 Banner 布局樣式探索是為了在進行結構布局的時候，我們可以嘗試出更多不一樣的解決方案。一個好的體驗也許只是一個細節的探索，如果能在每一個功能設計的時候都能把控每一個細節，必能帶給用戶更好的使用體驗。
本文雖然不是講解如何設計 Banner 圖本身，但是關于 Banner 的布局形式、造型特征、內容表達形式等在產品設計中的運用，也是起到非常關鍵的因素。希望通過這種形式的梳理，可以帶給你更多的幫助。
文中案例來源于日常的產品體驗日記整理，將具備同屬性的內容進行歸類梳理，形成可指導的設計建議是一種探索思考的過程。希望這個思路可以拋磚引玉，和大家一起探索產品設計中更多用戶體驗和感官體驗的設計解決方案。
作為 UI 設計師來說，掌握產品設計中的每個組成要素是非常必要的，所謂精細化的設計就是把控好每一個細節的深入。隨著大屏手機的普及，在人機交互的探索上面設計師追求著更多提高用戶體驗的設計方式，不過萬變不離其宗，用戶體驗沉淀下來的行為習慣依然影響著我們的設計。
就拿導航設計來深入探索，隨著產品設計的不斷推進，很多新穎的設計呈現帶給用戶更多的操作體驗。本文就以移動端底部標簽欄導航為案例分析，和大家一起探索一下底部標簽欄導航設計的千奇百態。
分享目錄
一、關于底部標簽導航
二、UI 設計注意事項
三、UI 表現層類別分析
四、移動端線上案例分析
五、總結
一、關于底部標簽導航
移動端導航欄設計相當于自身的骨架，是支撐產品中功能交互和內容傳播的血肉。導航系統指引著用戶的操作軌跡，引導用戶抵達目的地和進行相關的操作，將零散的內容和功能進行組織形成結構化的可視軌跡。導航的存在因此顯得格外重要，也是梳理功能結構需要重點確定的內容，以此來形成整個產品的脈絡。
移動端導航欄比較常見的有：底部標簽欄導航、舵式導航、頂部標簽(Tab)導航、宮格式導航、輪播（平鋪）式導航、懸浮 icon 導航、列表式導航欄、抽屜式導航、下拉導航/菜單導航等等。我們比較常見的產品中采用底部標簽欄導航的居多，便于用戶進行頻繁的操作，這也是本文接下來重點和大家探索的話題方向。
在移動端產品中底部標簽欄導航是最常用的導航模式，常作為一級目錄的導航，位于產品界面底部。根據用戶對于界面的操作熱區來看，底部是用戶可以輕松點擊的區域，無論用戶單手還是雙手操作都十分便利。
在底部標簽欄導航的基礎上進行拓展欄設計也是比較常見的形式，也就是舵式導航。突出中間的功能強化用戶的關注度，引導用戶使用更多延展功能。底部標簽欄導航和底部（舵式）拓展欄都屬于底部導航的范圍，本文將會重點以此類型為主進行梳理。
二、UI 設計注意事項
底部標簽欄導航非常直觀的告訴用戶當前的位置，也便于用戶進行同一層級間的不同模塊切換。由于具有很強的包容性，不會與其他功能模塊形成干擾，也能與多種導航模式進行組合使用。
底部標簽欄導航在模塊的選擇上面通常是 3-5 個，比較常見的為 5 個，3 個模塊相對比較松散，運用案例不是很多，除非業務功能較少。在設計表現形式上面有：icon + 文字、純 icon、純文字形式，比較主流的還是 icon + 文字的形式，可以降低用戶的理解成本和記憶負擔，提高用戶的操作體驗。
底部（舵式）拓展欄是為了突出中間功能設計，吸引用戶關注度，提高更多隱藏功能的使用概率。這種導航模式較為常見，比如轉轉、抖音、馬蜂窩旅游、閑魚等等均有使用。可以提高導航欄設計的趣味性和特征性，引導用戶操作更多功能和貢獻更多內容。不過這樣的設計由于關注度被吸引，進而影響其它一級模塊的關注度，由于隱藏的功能增加了用戶的記憶負擔和操作負擔，利弊權衡需要產品設計師進行評估。
在進行設計的過程中，功能模塊的確定需要起到牽引的重要作用，鏈接起整個產品的功能脈絡；設計表現上面需要區分默認和點擊狀態，可以跳出規范的束縛，但是需要在不影響其它業務模塊的前提下進行。
三、UI 表現層類別分析
底部標簽欄導航在 UI 表現層方面也是千奇百態，除了常規的置底形式，設計師也發散了更多新穎的表現。突破現有規范的束縛，不被固有化思維所限制，才能不斷的進行設計創新。
3.1 最穩定的常規設計形式
底部標簽欄導航最常見的設計形式依然是置于底部的常規形式，通常是 3-5 個功能模塊為主，其中 5 個功能模塊是較為常見的。形成差異化的是在圖標設計上面進行發揮，難度較大的設計是結合品牌基因或者特征性元素表達，也有一些是純文字的設計形式。
除了圖標上面進行發揮以外，也有一些會在背景上面進行裝飾，體現產品差異化。不過最常見的依然還是單色為主，或者根據模塊的需求在切換的過程中選擇使用不同的背景體現。雖然是最常規的導航模式，但是設計師依然可以在布局形式、圖標風格、配色關系、背景裝飾等方面進行發揮。
3.2 動靜結合的微動效表現
微動效在產品設計中的運用逐漸變得頻繁，相較于靜態的表現更能引起用戶的關注度，也能帶來趣味性和互動性。在底部標簽欄導航中的圖標設計上面，默認的采用靜態展示，而點擊狀態以動效的形式進行演變過度也是非常常見的設計處理。
在進行動效設計的時候，可以采用整個圖標位移形成動效，這是最簡單的動效表現，通常是上下彈跳位移。比較復雜的是圖標本身的結構動效，這也是圖標動效轉換比較連貫的形式。
3.3 突出規范框架的束縛表現
雖然大部分產品設計都會優先采用官方的設計規范，但是為了突出設計的差異化，也會進行一些突出規范框架的設計。在保持原有不變的導航設計中，我們可以針對局部功能模塊進行突出表現（比如舵式導航），也可以將點擊狀態進行突出表現。
3.4 懸浮層增強空間感
一些產品為了增強界面結構的空間感，針對底部標簽欄導航設計采用懸浮層的設計來進行表現，使得界面的通透性和呼吸感更強。這種設計形式依然保留了原本的結構，只是預留了左右和底部的間距，也有一些產品結合交互動效的形式表達，滑動過程中采用隱藏部分功能，增加瀏覽過程的內容輸出面積。
3.5 底部拓展/隱藏式設計
隨著一些工具型產品的使用，功能模塊變得復雜而繁多，也有將更多功能隱藏在底部標簽欄里面，上拉交互時顯示。這種設計形式將底部標簽欄進行了深度的開發利用，但是功能隱藏比較深，曝光度受到了一定的影響，不適合較為重要的功能模塊設計。
3.6 小結
底部標簽欄導航在 UI 表現層方面還有更多可以給予設計師發揮的空間，設計沒有固定不變的形式，在于不斷的發現、總結和創新。期待大家發現更多設計解決方案和進行更多設計創新，下面將會為大家梳理線上的優秀案例，讓我們可以站在巨人的肩膀上不斷超越。
四、移動端線上案例分析
移動端底部標簽欄導航設計在眾多產品中浮現出很多優秀的案例，對于線上案例的分析將有助于我們進行落地性的思考，新穎的設計不再是飛機稿，而是可以實現的創意。創新是建立在不斷的發現、總結、分析和改變，希望這些案例可以帶給你點滴靈感。
4.1 背景結合特定節日增強氛圍
在大部分情況下底部標簽欄導航的背景為單色的居多，不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節日結合氛圍營造對背景進行簡單的裝飾，可以在節假日或者特殊時期引起用戶的共勉，增強產品的情感化設計。
比如寶寶巴士兒歌 APP 的底部標簽欄導航設計，在之前的一些版本迭代過程中，結合特定氛圍營造進行背景設計，也是一種非常不錯的設計表達形式。由于屬于兒童類產品，點擊功能模塊切換的過程中還伴隨著音樂，視聽體驗的結合使得操作體驗備受關注。
4.2 強化消息提示的關注度
系統通知或者消息提示往往都會被用戶所忽略，盡管很多產品都會將消息作為單獨的功能模塊來設計，但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結合在個人中心的設計中，以氣泡彈出的形式展示在圖標紅點提示上方。以此來吸引用戶的關注度，增加消息閱讀率。
4.3 特異設計引導功能模塊關注度
在底部標簽欄導航的多個功能模塊中，為了突出或者引導使用某個功能時，會采用特異構成的設計做法，在原本的設計規范上面突出表現個例，以此來引起用戶的關注度。比如騰訊動漫在第一次進入 APP 時，圈子的圖標設計會特意突出，點擊之后恢復原樣，以此吸引用戶對該欄目的關注，增強功能模塊的使用率。
4.4 圖標設計的年輕化趨勢
隨著 95 后成為互聯網原住民，產品設計逐漸趨向于“年輕化”的探索和挖掘。優酷 V9.0 升級后設計風格更年輕化，底部標簽欄圖標設計采用低純度、高明度的多色漸變，結合微動效使得風格更加青春活潑，符合年輕一代的審美需求。年輕化的設計不僅提高感官體驗，也拉近了產品與用戶之間的親和力。
4.5 趣味性的情感化設計融入
情感化的設計能夠拉近產品與用戶之間的親和力，這也是設計師在不斷探索并延展的設計方向。QQ 作為社交工具而言，如何更加符合年輕化的設計需求，在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。
4.6 首頁圖標強化品牌曝光
為了強化產品品牌的曝光度，在進行底部標簽欄圖標設計的時候，會將首頁圖標的點擊狀態切換為品牌 LOGO 的形式，以此來增加品牌的曝光度。設計上面的選擇有 LOGO 圖形、吉祥物、應用圖標、品牌局部圖形等，會根據品牌 LOGO 的造型靈活選擇。
4.7 舵式導航轉一轉增強關注度
底部（舵式）拓展欄導航是突出中間功能模塊設計來強化關注度，除了靜態的表達以外，結合微動效更能起到強化突出的作用。轉轉結合吉祥物和微動效運用在舵式導航的設計中，不僅提高用戶的關注度，情感化的設計還能增強產品的親和力。
4.8 結合營銷內容多層共用
產品中的營銷結合是最為常見的，產品設計師也在不斷地思考更多可結合的功能模塊，舵式導航的區域被充分利用是最為便利的。芒果 TV 將營銷內容與會員模塊圖標進行結合，在保持原有功能操作的基礎上強化營銷活動的曝光度，鼓勵更多用戶參與活動。
4.9 微動效結合多層功能運用
微動效運用到底部標簽欄導航圖標動效中較為常見，可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設計的產品，也會在用戶上滑瀏覽內容到一定量的時候將首頁變化為“置頂”的操作，方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標的設計中，結合微動效的變化帶給用戶趣味性和強化品牌記憶，在首頁圖標和置頂圖標切換的過程中也采用了微動效的形式，過度更加自然流暢，也能更加醒目的提示用戶。
4.10 微動效結合突出框架的束縛
一些尋求突破的產品，在設計的時候也嘗試了突出規范框架的束縛表現，點擊狀態會突出局部來強化。結合動效的變化形成自然過度，突出的設計更能引起用戶的關注度，明確自己當前所處的位置。這樣的表現形式不僅可以形成設計差異化，也能讓用戶操作路徑更加明顯，比如愛奇藝早期版本、美團外賣等產品。
4.11 懸浮層設計突破底部標簽欄常規表現
設計師都在不斷的探索設計的差異化，敢于創新才能尋求新的可能性。脈脈在最近的迭代中將底部標簽欄的設計采用懸浮層的形式表現，使得界面內容呈現的呼吸感更強，也增加了界面結構的空間感。在保持基本設計規范的前提下進行小小的變化，就能帶來設計的差異表現，也能帶給用戶較為新穎的感官體驗。
4.12 懸浮層設計結合交互動效的雙向運用
交互動效是 UI 設計師在靜態設計稿中要逐步突破的一種技能，交互動效可以讓我們的設計表達更加直觀，提高產品的互動性和趣味性。馬蜂窩旅游在進行底部標簽欄突破的過程中，除了采用新穎的懸浮層設計以外，在上滑瀏覽內容時采用隱藏局部功能的處理方式，讓內容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航，探知用戶行為習慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。
4.13 底部拓展設計承載更多功能模塊
對于一些功能模塊較多的產品，產品設計師會盡可能的開發每一個常規的功能，拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進行快捷操作。充分的對底部標簽欄進行了深度挖掘，利用手勢的變化實現更多功能模塊的切換，提高了用戶的操作體驗。
關于移動端底部標簽欄導航設計還有很多非常不錯的線上案例，這里就不一一列舉啦！優秀的案例總結能夠帶給我們更多的靈感參考，基于優秀之上我們才能設計出更新穎的作品，希望以此拋磚引玉，期待大家發現更多好玩的設計。
五、總結
對于 UI 設計師來說，產品體驗是一種習慣的養成，結合體驗的日記化摘錄形成設計思路的總結。總結是為了形成最終可供靈感借鑒的經驗，基于優秀的案例分析才能形成更多的設計解決方案。
本文以移動端底部標簽欄導航設計的經驗分析為大家進行梳理，任何的設計表達都不是不變的規律，掌握的是這種設計分析和總結的思路，以此反推出更多的設計總結。希望本文的思路作為拋磚引玉，帶給你更多的思路。
本文將從對當下常見banner的設計規則等進行剖析，并融入自己的思考和總結，著重從用戶的角度去思考一張banner廣告的設計規律。
藍藍設計的小編 http://www.gyxygd.cn
<abbr id="uwssu"></abbr>