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