做了8年產(chǎn)品經(jīng)理后，我是這么看產(chǎn)品經(jīng)理的
在現(xiàn)代移動(dòng)應(yīng)用設(shè)計(jì)中，「浮標(biāo)」按鈕（Floating Action Button）已成為一種常見的交互元素，它不僅提供便捷的功能入口，還能增強(qiáng)用戶體驗(yàn)。然而，設(shè)計(jì)一個(gè)有效的浮標(biāo)按鈕并非易事，需要綜合考慮功能定位、視覺效果、交互設(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í)可見，提高使用率，為用戶提供便利。筆者通過“智能伴學(xué)助手”浮標(biāo)實(shí)踐應(yīng)用，對(duì)后續(xù)制作浮標(biāo)在界面設(shè)計(jì)中思考與探索。 浮標(biāo)的本質(zhì)與價(jià)值
作為界面中的「第三層空間」，浮標(biāo)通過視覺懸浮感打破平面限制 (如iOS的3D視差效果)；在信息過載時(shí)代，提供「隨時(shí)在場(chǎng)」的核心功能入口 (如美團(tuán)外賣的懸浮購(gòu)物車，左右動(dòng)效：進(jìn)縮)。
▲「第三層空間」并「隨時(shí)在場(chǎng)」，也是很好的廣告位和優(yōu)惠營(yíng)銷，一些浮標(biāo)的“小巧思”。
利用格式塔原則中的「閉合性」設(shè)計(jì)半透明遮罩，暗示可交互區(qū)域；通過菲茨定律優(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)，用于快速訪問某些功能，從多個(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)格) 確保視覺一致性，留出安全邊距（如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í)圓角) 及視覺平衡。
3）適配性
? 導(dǎo)出格式需與開發(fā)協(xié)作，推薦PNG序列或SVGA文件以兼顧清晰度與性能。
? 自適應(yīng)考慮不同平臺(tái)的顯示情況。
核心功能聚合：語(yǔ)言學(xué)習(xí)工具類界面將高頻功能 (如首頁(yè)入口、作業(yè)評(píng)論、學(xué)習(xí)提問) 通過浮標(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í)提問通過浮標(biāo)智能解答點(diǎn)評(píng)，通過二級(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)可以在背景中脫穎而出，在其過程中嘗試藍(lán)+藍(lán)搭配的存在局限性，本身藍(lán)色系較統(tǒng)一。
在同為藍(lán)色后，產(chǎn)生不同「空間」，通過將界面元素分層（如前景圖標(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é)助手來浮標(biāo)快速訪問。
在不同背景下的浮標(biāo)呈現(xiàn)視覺形式，只要點(diǎn)擊即可進(jìn)入應(yīng)用。
思考與探索：
▲ 白色背景或者透明背景下的浮標(biāo)呈現(xiàn)，在不同頁(yè)面呈現(xiàn)一“系列”
▲ 藍(lán)色背景下或者在統(tǒng)一色系下浮標(biāo)視覺”糊“，可用白邊的形式將背景和浮標(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ǐ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ā)」分層交互(如華為懸浮球壓感菜單)；配合觸覺反饋(Haptic Engine)增強(qiáng)操作確認(rèn)感。
2）動(dòng)態(tài)語(yǔ)義變形
生物擬態(tài)動(dòng)畫：
? 呼吸感懸浮：模擬水母游動(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ù)合控件 ；
? 音樂播放器浮標(biāo)可拉伸成波形可視化界面。
通過多模態(tài)反饋，聽覺，視覺，觸覺多種情感交互。
3） 空間布局策略
? 默認(rèn)位置：置于屏幕右下側(cè)（符合右手持機(jī)習(xí)慣），預(yù)留10%邊距防止誤觸；
? 智能避讓：通過內(nèi)容識(shí)別算法，在視頻播放或文本輸入時(shí)自動(dòng)偏移避開核心內(nèi)容區(qū)域；
? AR場(chǎng)景中的空間投影浮標(biāo)（如IKEA Place家具預(yù)覽浮窗）。
▲ 位置多為屏幕右下側(cè)
1）跨端一致性
? 使用React等框架封裝可復(fù)用浮標(biāo)組件，通過響應(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ò)誤率過高時(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)成為：
? 空間敘事者：通過動(dòng)態(tài)變化講述產(chǎn)品故事；
? 情感連接器：建立用戶與數(shù)字世界的溫度觸點(diǎn)；
? 場(chǎng)景預(yù)言家：預(yù)判需求并提供恰到好處的服務(wù)。
設(shè)計(jì)師需在「顯性價(jià)值」與「隱形干擾」間找到精妙平衡，讓浮標(biāo)成為提升體驗(yàn)的優(yōu)雅解決方案而非視覺負(fù)擔(dān)。未來可探索腦機(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é)合功能定位、用戶行為、視覺設(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)載。
蘭亭妙微(m.gyxygd.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
在數(shù)字化時(shí)代，B端產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)正變得愈發(fā)重要。動(dòng)效設(shè)計(jì)作為提升交互體驗(yàn)和效率的關(guān)鍵手段，正在成為B端設(shè)計(jì)中不可或缺的一部分。本文將深入探討2025年B端設(shè)計(jì)中動(dòng)效的趨勢(shì)，從動(dòng)效的歷史演變、物理世界中的靈感汲取，到釘釘設(shè)計(jì)系統(tǒng)中的實(shí)踐應(yīng)用，幫助我們理解動(dòng)效如何從簡(jiǎn)單的視覺裝飾轉(zhuǎn)變?yōu)樘嵘a(chǎn)品效率和用戶體驗(yàn)的核心工具。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號(hào)上網(wǎng)，到5G移動(dòng)互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。
未來的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對(duì)于高效、簡(jiǎn)便、用戶友好的界面需求與日俱增。
在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢(shì)，緊密圍繞客戶的業(yè)務(wù)價(jià)值展開設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來B端設(shè)計(jì)趨勢(shì)將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、品牌物料、圖標(biāo)、動(dòng)態(tài)交互等多維度設(shè)計(jì)展開深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來些許有益的啟迪。對(duì)交互等多維度設(shè)計(jì)展開深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來些許有益的啟迪。
今天要和大家聊聊 B 端產(chǎn)品的動(dòng)效設(shè)計(jì)趨勢(shì)。我們將回顧動(dòng)效的發(fā)展軌跡，從歷史演變到設(shè)計(jì)哲學(xué)，探索如何從物理世界汲取靈感，并分享釘釘在動(dòng)效設(shè)計(jì)中的思考與實(shí)踐。
動(dòng)效設(shè)計(jì)在互聯(lián)網(wǎng)的發(fā)展歷程中經(jīng)歷了多次變革。從最初簡(jiǎn)單的過渡動(dòng)畫，到如今復(fù)雜而精細(xì)的交互體驗(yàn)，動(dòng)效的演進(jìn)不僅是技術(shù)發(fā)展的產(chǎn)物，也映射了用戶體驗(yàn)設(shè)計(jì)理念的不斷深化。
在互聯(lián)網(wǎng)的早期，受限于帶寬和硬件性能，動(dòng)效的應(yīng)用較為基礎(chǔ)，主要用于加載進(jìn)度條和頁(yè)面過渡，核心目的是向用戶提供反饋，減少操作過程中的不確定性。典型案例是 Windows 98 時(shí)代的加載進(jìn)度條和網(wǎng)頁(yè)上的緩沖動(dòng)畫。這些動(dòng)效雖然簡(jiǎn)單，卻在當(dāng)時(shí)發(fā)揮了重要作用——幫助用戶理解系統(tǒng)狀態(tài)，降低等待焦慮。
進(jìn)入 2000 年代中期，F(xiàn)lash 技術(shù)的普及讓網(wǎng)頁(yè)動(dòng)畫迎來了黃金時(shí)代。Flash 賦予了設(shè)計(jì)師更大的自由度，使得網(wǎng)頁(yè)可以呈現(xiàn)更豐富的動(dòng)態(tài)效果，動(dòng)效不再局限于狀態(tài)反饋，而開始深度參與交互體驗(yàn)。這一時(shí)期，動(dòng)效的作用從提示系統(tǒng)狀態(tài)進(jìn)化為增強(qiáng)用戶沉浸感，例如按鈕懸停時(shí)的動(dòng)態(tài)反饋，炫酷的頁(yè)面切換過渡，以及交互式動(dòng)畫（如鼠標(biāo)跟隨效果、小游戲動(dòng)畫等）。
不過，F(xiàn)lash 的動(dòng)效過度依賴插件，影響性能，并且在移動(dòng)端難以兼容。2010 年代，隨著 HTML5 和 CSS3 的發(fā)展，F(xiàn)lash 逐漸被取代，動(dòng)效設(shè)計(jì)進(jìn)入新階段。
隨著移動(dòng)互聯(lián)網(wǎng)興起，尤其是 Material Design，iOS，以及 Fluent Design 等動(dòng)效規(guī)范的推出，動(dòng)效設(shè)計(jì)進(jìn)入了全新的階段。這個(gè)階段的核心理念是基于物理規(guī)律的自然動(dòng)效，強(qiáng)調(diào)動(dòng)效不僅僅是裝飾，而是信息層級(jí)傳遞、引導(dǎo)用戶操作的重要工具。
Material Design：強(qiáng)調(diào)物理隱喻與流暢性
Fluent Design：深度融合光影與層次感
由此可見，動(dòng)效不再只是視覺上的炫技，而是成為提升可用性、降低認(rèn)知負(fù)荷的重要工具。合理的動(dòng)效可以提升用戶的操作流暢度，讓界面變得更自然、更具生命力。
在自然界里，每一次風(fēng)吹樹葉的擺動(dòng)、每一滴水滴入湖面的擴(kuò)散，都遵循著物理規(guī)律，展現(xiàn)出流暢且和諧的運(yùn)動(dòng)軌跡。這些自然現(xiàn)象不僅帶來視覺上的愉悅，也蘊(yùn)含著深層次的運(yùn)動(dòng)邏輯，為數(shù)字動(dòng)效設(shè)計(jì)提供了源源不斷的靈感。動(dòng)效的流暢性、節(jié)奏感、反饋感，本質(zhì)上都是對(duì)物理世界美學(xué)的映射。
例如，波紋擴(kuò)散是我們常見的自然現(xiàn)象。當(dāng)一顆石子落入湖面，波紋自中心向外擴(kuò)散，起初迅速，隨后逐漸放緩，最終消失。這個(gè)過程中的漸進(jìn)減速特性為數(shù)字動(dòng)效設(shè)計(jì)提供了極佳的靈感。在數(shù)字界面中，我們可以通過緩慢擴(kuò)散的動(dòng)畫來模擬水面波紋的效果，形成一種溫和的反饋感。
再比如，現(xiàn)實(shí)世界中的物體在運(yùn)動(dòng)時(shí)通常會(huì)表現(xiàn)出加速與減速的特性。以地球上的自由落體為例，物體從高空下落時(shí)，初始速度較慢，但隨著重力作用，它不斷加速。這種非勻速運(yùn)動(dòng)，在動(dòng)效設(shè)計(jì)中被轉(zhuǎn)化為緩動(dòng)曲線（Easing Curves），使得用戶在界面交互時(shí)感受到更加自然的動(dòng)態(tài)變化。
而彈跳和反彈又是另一個(gè)物理世界中常見的運(yùn)動(dòng)方式。想象一顆籃球從地面反彈起來，起初速度快，隨后逐漸放緩，最終停止。這種逐漸衰減的回彈，正是彈性動(dòng)效的靈感來源。在界面交互中，彈性動(dòng)效可以模擬物體的重量和材質(zhì)，提升操作的真實(shí)感。
當(dāng)牛頓凝視落下的蘋果，他發(fā)現(xiàn)了萬(wàn)有引力的奧秘；而當(dāng)釘釘?shù)脑O(shè)計(jì)團(tuán)隊(duì)觀察一張任務(wù)卡片的拖拽軌跡時(shí)，我們探尋的是數(shù)字世界的運(yùn)動(dòng)法則。在物理規(guī)律與交互邏輯的交匯處，釘釘?shù)膭?dòng)效設(shè)計(jì)體系逐漸凝練出一套方法論——讓每個(gè)像素的運(yùn)動(dòng)既符合自然規(guī)律，又服務(wù)于生產(chǎn)效率。
在 B 端產(chǎn)品中，動(dòng)效遠(yuǎn)不止是視覺與交互的簡(jiǎn)單結(jié)合，更是提升可用性和降低認(rèn)知成本的關(guān)鍵手段。它不僅承擔(dān)著引導(dǎo)用戶操作、傳遞信息層級(jí)、降低認(rèn)知負(fù)荷的功能，還通過增強(qiáng)操作確定性，幫助用戶更高效地完成任務(wù)。換句話說，我們正以理性與直覺，重塑效率美學(xué)。
釘釘?shù)脑O(shè)計(jì)框架始終圍繞視覺感官和用戶體驗(yàn)兩個(gè)核心維度展開，追崇理性與感性的精密協(xié)作：
1. 視覺感官：流暢
2. 用戶體驗(yàn)：高效
企業(yè)級(jí)應(yīng)用中，物體的運(yùn)動(dòng)時(shí)間需要把控得恰到好處。研究表明，人類對(duì) 100ms 以下的變化幾乎無(wú)感，而超過 1s 的等待則會(huì)讓用戶產(chǎn)生不耐煩的情緒。因此，釘釘?shù)膭?dòng)效體系嚴(yán)格遵循以下節(jié)奏，通過順應(yīng)人類大腦的認(rèn)知規(guī)律，確保每一次動(dòng)效都恰到好處，帶來舒適的體驗(yàn)：
現(xiàn)實(shí)世界中的物體運(yùn)動(dòng)受到重力、摩擦力等因素影響，呈現(xiàn)加速與減速的動(dòng)態(tài)變化。釘釘?shù)膭?dòng)效體系也采用緩動(dòng)曲線（Easing），以模擬真實(shí)世界的運(yùn)動(dòng)節(jié)奏。當(dāng)數(shù)字界面掙脫線性勻速的機(jī)械感，便擁有了令人愉悅的「生命感」。
在二維屏幕上構(gòu)建三維認(rèn)知，需要更精密的「空間修辭學(xué)」。釘釘?shù)膭?dòng)效體系確保每一次位移都符合用戶的直覺，并運(yùn)用空間層次感，讓信息更易理解。
1. 同級(jí)物體
2. 從屬物體
3. 三維空間
在動(dòng)效設(shè)計(jì)中，無(wú)障礙性不僅關(guān)乎技術(shù)標(biāo)準(zhǔn)，更關(guān)乎用戶的體驗(yàn)公平性。一個(gè)包容的設(shè)計(jì)體系，應(yīng)該讓所有用戶——無(wú)論其身體或認(rèn)知能力如何——都能平等地理解和使用產(chǎn)品。無(wú)障礙動(dòng)效的核心，在于減少干擾、提供替代方案，并賦予用戶選擇權(quán)，確保每一次交互都是安全、友好的。
避免誘發(fā)健康問題：高頻閃爍或快速變化的動(dòng)畫可能誘發(fā)光敏性癲癇等健康問題。因此，在設(shè)計(jì)時(shí)，我們應(yīng)避免超過3次/秒的快速閃爍，并盡可能減少過度刺激性的動(dòng)效
提供替代方案：對(duì)于依賴屏幕閱讀器的用戶，純視覺動(dòng)效可能難以感知。我們可以為動(dòng)效添加文本描述或提供靜態(tài)替代方案，確保所有用戶都能理解動(dòng)效傳達(dá)的信息。例如，在釘釘 AI 助理中的加載場(chǎng)景，我們提供「正在為你生成…」的文本標(biāo)簽，方便屏幕閱讀器用戶理解當(dāng)前狀態(tài)
動(dòng)效設(shè)計(jì)已成為現(xiàn)代數(shù)字產(chǎn)品中不可或缺的組成部分。從簡(jiǎn)單的過渡動(dòng)畫到如今富有交互感和情感觸動(dòng)的設(shè)計(jì)，動(dòng)效已經(jīng)不再是單純的視覺裝飾，而是推動(dòng)產(chǎn)品發(fā)展、提升用戶體驗(yàn)的關(guān)鍵力量。
真正的好動(dòng)效，是那種用戶幾乎察覺不到的流暢交互，它能夠讓信息傳遞變得高效、讓操作更加順暢，同時(shí)也讓數(shù)字產(chǎn)品展現(xiàn)出溫暖的人文氣息。動(dòng)效，作為產(chǎn)品與用戶之間的一座橋梁，它不僅是界面的點(diǎn)綴，更是效率與體驗(yàn)的催化劑。
未來，釘釘將繼續(xù)探索動(dòng)效設(shè)計(jì)的創(chuàng)新與實(shí)踐，通過優(yōu)化交互體驗(yàn)、提升產(chǎn)品效率，不斷賦能用戶、創(chuàng)造更美好的數(shù)字世界。
蘭亭妙微(m.gyxygd.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)鍵字：電商 詳情頁(yè)設(shè)計(jì) 視覺營(yíng)銷
網(wǎng)絡(luò)時(shí)代，電商平臺(tái)作為主流消費(fèi)渠道，在消費(fèi)者心中已占有大部分比例，越來越多的消費(fèi)者更愿意選擇在線上購(gòu)物消費(fèi)，如何讓消費(fèi)者能夠更快速了解商品，產(chǎn)生購(gòu)買欲？電商詳情頁(yè)起到關(guān)鍵性作用，電商詳情頁(yè)作為產(chǎn)品說明書，不僅是成交轉(zhuǎn)化入口，更是品牌傳播的重要途徑。如何設(shè)計(jì)一款適合產(chǎn)品的詳情頁(yè)？主要從兩個(gè)方面入手：
蘭亭妙微(m.gyxygd.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
今天來優(yōu)化一張作品
今天我們來看一下學(xué)員作品并且優(yōu)化一下！
在優(yōu)化之前，你們能不能看出作品還存在什么問題呢？
是不是感覺已經(jīng)是一張完成度很高的作品了，那它能不能更好呢？
當(dāng)然可以！我們來看看如何優(yōu)化。
原圖的構(gòu)圖雖然感覺挺有意思，但是并沒有做到位，對(duì)于新手來說，這種構(gòu)圖也是相對(duì)比較難的，前期我建議大家可以選擇一些相對(duì)不易出錯(cuò)的構(gòu)圖方式，比如元素圍繞主體，營(yíng)造畫面沖擊力的居中構(gòu)圖。
1.可以把元素聚集到中心周圍，讓畫面緊湊，飽滿，做出向外沖出的效果。
2.可以添加兩根前后貫穿空間的光帶，增強(qiáng)沖擊力，讓構(gòu)圖更有張力！
這樣的構(gòu)圖簡(jiǎn)單并且容易出效果！
1.飽和度：
原版畫面中這一層次看起來是不是特別重，導(dǎo)致畫面的節(jié)奏一下有點(diǎn)亂掉了。而且整體飽和度相對(duì)比較高，有點(diǎn)油膩！
我們要適當(dāng)降低畫面中部分層次的飽和度，這樣才會(huì)使整體更加高級(jí)，可以看下優(yōu)化之后的效果：
是不是舒服多了。
2.統(tǒng)一色調(diào)：
我們做圖的時(shí)候主體和環(huán)境要有一些呼應(yīng)，這個(gè)飛碟飛碟正面有點(diǎn)太綠了，缺少一些呼應(yīng)環(huán)境的顏色，這樣就會(huì)感覺和畫面有些割裂感，可以增加一些環(huán)境色，使其統(tǒng)一呼應(yīng)到一起。
我們看下前后優(yōu)化的對(duì)比效果：
這樣就和諧多了！
首先我們來看原圖，是不是會(huì)覺得畫面中心有一點(diǎn)空，元素都在外部，導(dǎo)致整體不夠飽滿：
所以我們?cè)趦?yōu)化的時(shí)候，把元素平均的分布在畫面的每一個(gè)地方，使空間看起來更加的均衡：
現(xiàn)在元素雖然均衡了，但是并沒有產(chǎn)生前后關(guān)系，所以我們讓后面的元素更弱一些，分幾個(gè)層次。
如下圖：
當(dāng)我們把這樣的元素層次放在畫面里之后，看起來就會(huì)更加的精致飽滿，空間感十足：
其實(shí)增加趣味性的方法有很多，比如我們?cè)谶@個(gè)畫面融入了很多表情，可以讓畫面更加生動(dòng)。
除了這樣的方法，其實(shí)一些小小的改動(dòng)有時(shí)候也可以讓畫面變得更加趣味一些。
比如：
原版的飛碟太正了，顯得呆呆的，這個(gè)時(shí)候我們可以把主體歪一下，一下子它就活潑了。
再比如：
有時(shí)候元素直接漏出來顯得比較生硬，如果我們利用一層一層的波紋，藏住元素，或許也可以巧妙地增加畫面趣味性：
效果還不錯(cuò)吧！
最后我們加上文字，看看整體優(yōu)化前后的效果！這是不是要比之前的穩(wěn)很多呢：
最后，我們?cè)賮砜偨Y(jié)一些知識(shí)點(diǎn)吧：
1.構(gòu)圖：構(gòu)圖的時(shí)候就要要注意整體的飽滿度，畫面穩(wěn)定，元素分得太分散就會(huì)不聚焦了。
2.顏色的飽和度：主體>元素>背景。
3.空間：畫面不能太空，要有節(jié)奏的把畫面每一個(gè)角落都照顧到，其次我們要在視覺上有前有后，增強(qiáng)縱向空間上的層次感。
4.趣味性：增加畫面趣味性除了利用表情以外，還可以用一些微小的變化去實(shí)現(xiàn)，比如歪著的可能比正的活潑一點(diǎn)，再比如元素的穿插互動(dòng)也可以讓畫面增趣不少，大家可以多多嘗試！
以上就是今天和大家分享的內(nèi)容，希望對(duì)大家有所幫助！
我們?cè)谠O(shè)定界面風(fēng)格的時(shí)候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個(gè)最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會(huì)導(dǎo)致非常的刺眼，比如像瑞文同學(xué)的這個(gè)顏色設(shè)定：
就是過于明亮了，其實(shí)當(dāng)我們的顏色過于明亮?xí)r，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標(biāo)的做法一樣，減少亮部顏色，直接增加黑色：
這樣就不會(huì)那么刺眼了，當(dāng)我們明白了底層原理之后，再去優(yōu)化配色，我們看前后的變化：
這樣就會(huì)比之前舒服很多，當(dāng)然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續(xù)加大，但不管哪一種，都會(huì)比之前全是亮色要好很多！
小A同學(xué)是一個(gè)非常有潛力的同學(xué)，但是最開始交上來的吉祥物作業(yè)，也不是很理想，效果如下：
話不多說，我們就改動(dòng)一個(gè)點(diǎn)，五官緊湊，看看前后效果對(duì)比：
可愛的程度完全不在一個(gè)檔次，我們?cè)倏纯葱同學(xué)后面的延展效果：
比之前強(qiáng)了很多很多倍，就是因?yàn)橐粋€(gè)五官緊湊。
我們?cè)谧鼍毩?xí)的時(shí)候，很重要的一個(gè)鍛煉點(diǎn)就是視覺敏銳度，能夠敏銳的發(fā)現(xiàn)哪里不舒服，這個(gè)真的很重要。
而視覺敏銳度里面就有一個(gè)維度是顏色，比如我們?cè)诳聪旅嬉欢堤峭瑢W(xué)做的質(zhì)感圖標(biāo)作業(yè)：
我們應(yīng)該快速的看出，第一個(gè)圖標(biāo)顏色不是很和諧，沒有后面兩個(gè)那么舒服，主要是那個(gè)藍(lán)色有點(diǎn)臟，我們看優(yōu)化后的三個(gè)圖標(biāo)：
就比之前要統(tǒng)一舒服很多。
當(dāng)我們的練習(xí)達(dá)到一定量時(shí)，敏銳度自然就會(huì)提高很多，所以一定要多去練習(xí)，把敏銳度這一塊提高上來。
這是潘子同學(xué)的疑惑點(diǎn)：
他感覺綠色好難啊，第一次交上來的作業(yè)如下：
先不說造型問題，就光說顏色，就有點(diǎn)單薄，也有點(diǎn)太亮了，還有就是顏色比較正。
其實(shí)我們?cè)谂渚G色的時(shí)候，只要把綠色加一點(diǎn)藍(lán)色，或者加一點(diǎn)黃色就會(huì)讓顏色好看很多。
后來潘子同學(xué)把顏色進(jìn)行了優(yōu)化：
這樣就比之前還要多了。
還有包括檸檬同學(xué)用的綠色:
也是比較好看的。
這回再用綠色的時(shí)候，大家清楚怎么好看了吧！
以上就是今天和大家分享的一些知識(shí)點(diǎn)啦，大部分是關(guān)于顏色的，顏色敏銳度、綠色怎么配，明暗的對(duì)比等等，顏色是一個(gè)非常重要的視覺維度，希望大家都能重視，并且多多練習(xí)。提高自己的色感！
我們需要了解一下設(shè)計(jì)模式，例如它是什么、什么時(shí)候用、怎么使用，可以讓我們?cè)跊]有參考的情況下，也能設(shè)計(jì)出合理、好用的界面。
把不同的內(nèi)容模塊，放到一組順序排列的面板中，這些面板每一個(gè)都可以折疊、可以展開，互不干擾。
你需要在頁(yè)面上顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件等，而你又沒法把它們都顯示在頁(yè)面上。
1、用戶可能一次只需要查看一個(gè)模塊的內(nèi)容。有些模塊比別的模塊更長(zhǎng)或更短，不過它們的寬度一樣。
2、這些模塊組成了一個(gè)工具箱，或者兩級(jí)菜單，或者包括一些交互式元素的某種結(jié)構(gòu)，這些模塊的內(nèi)容要么彼此相關(guān)，要么彼此類似。
3、要注意的是，當(dāng)一個(gè)大模塊打開或者打開了很多個(gè)模塊的時(shí)候，模塊底部的標(biāo)簽可能會(huì)滾動(dòng)到屏幕或窗口的外面。如果這一點(diǎn)對(duì)用戶來說有問題，那就要考慮一下其他的解決方案。
豎向排列這些模塊，并使用對(duì)于用戶來說有意義的排列順序。
例如：QUICK BI 右側(cè)折疊面板，順序是從大到小，從外到內(nèi)。
為每個(gè)模塊選擇一個(gè)簡(jiǎn)短而富描述性的標(biāo)題，并把這個(gè)標(biāo)題放到一個(gè)橫條上，讓用戶可以單擊它來打開或關(guān)閉這個(gè)模塊。
也可以用一個(gè)可以變換方向的三角形圖標(biāo)來提示打開/關(guān)閉的操作：關(guān)閉的時(shí)候向右或向下，打開的時(shí)候向上。
一次允許打開多個(gè)模塊。
人們?cè)谶@個(gè)問題上有一些不同的看法，有的人喜歡一次只能打開一個(gè)模塊。不過根據(jù)經(jīng)驗(yàn)，特別是在各種應(yīng)用里，一次允許打開多個(gè)模塊更合適。這樣可以避免一個(gè)之前打開的模塊突然消失，這樣會(huì)讓用戶覺得很粗魯，也很意外:“喂, 那個(gè)菜單哪里去了?之前就在這里的!
當(dāng)用戶在登錄狀態(tài)時(shí)，折疊面板應(yīng)該在多個(gè)操作期間，保持它們各自模塊的打開和關(guān)閉狀態(tài)，這點(diǎn)很重要。
如果模塊內(nèi)容需要進(jìn)一步拆分，折疊面板還可以級(jí)聯(lián)使用，不過這樣看起來會(huì)有點(diǎn)混亂。 因此只用一個(gè)一級(jí)折疊面板模塊更合適，如果有必要可以采用其他結(jié)構(gòu)代替，比如tab頁(yè)。
把頁(yè)面上的內(nèi)容組合到幾個(gè)不同的區(qū)塊里，每一個(gè)都可以獨(dú)立打開或關(guān)閉。可以隨意在界面上放置這些區(qū)塊，用戶還可以移動(dòng)它們，形成自己定義的布局。
你正在設(shè)計(jì)一個(gè)桌面應(yīng)用（例如：釘釘、飛書）或者一個(gè)網(wǎng)頁(yè)應(yīng)用（例如：紛享銷客、ONES），應(yīng)用中會(huì)涉及看板、工作臺(tái)、儀表盤、數(shù)據(jù)分析等頁(yè)面，你希望用戶對(duì)這些頁(yè)面有一定的控制權(quán)。 這些頁(yè)面應(yīng)該是應(yīng)用中的主頁(yè)面、是用戶會(huì)經(jīng)常查看的頁(yè)面。
在這個(gè)頁(yè)面上，需要顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件、圖表等，而你又沒法把它們都顯示在一個(gè)模塊上。
1、用戶想同時(shí)查看好幾個(gè)模塊。
2、不同的模塊對(duì)每個(gè)用戶來說，有著不一樣的價(jià)值。例如，有些人想看到A、B、C這三個(gè)模塊，而另外一些人可能想看到的是D、E、F。 3、在空間大小方面，各個(gè)模塊差異可能比較大。例如，用戶希望把信息少的模塊縮小。
4、模塊在界面上的位置對(duì)用戶來說很重要。例如，重要的內(nèi)容用戶希望放在前面。
5、有時(shí)候模塊數(shù)量比較多，用戶不希望全部展示出來。例如：用戶匯報(bào)工作時(shí)不需要這個(gè)模塊，可以把它先移除，匯報(bào)完后，再添加回來。
6、控制這些模塊的功能可能是一個(gè)工具條，或其他交互式結(jié)構(gòu)的組成部分。
因?yàn)椴煌挠脩絷P(guān)注點(diǎn)也不同，他們希望能自己選擇想看的內(nèi)容。 可以把需要的內(nèi)容放到顯眼的位置，把不需要的東西隱藏起來。同時(shí)，他們還可以利用“空間記憶”來記住不同的內(nèi)容在什么位置。
空間記憶：當(dāng)人們需要使用某個(gè)東西時(shí)，經(jīng)常是通過回憶它們的位置來尋找它們，而不是它們的名字。 例如：你因?yàn)橛惺峦獬觯枰麓蜷_你的電腦幫你發(fā)一份文件，通常你也說一句文件好像再桌面的右邊，這也是利用了空間記憶幫助快速尋找。很多軟件把對(duì)話框的按鈕（確定、取消）放在右下方，有一部分原因也是考慮到用戶的空間記憶依賴性。
總結(jié)：使用可移動(dòng)的面板可以讓用戶的工作效率更高，工作更舒服。
為每個(gè)模塊提供名稱、標(biāo)題欄和默認(rèn)尺寸，并為它們提供合理的默認(rèn)設(shè)置。 讓用戶按自己的喜好在頁(yè)面上移動(dòng)這些模塊，如果可能的話，可以提供拖曳功能。
讓每個(gè)模塊可以通過簡(jiǎn)單的操作進(jìn)行編輯和隱藏，也可以考慮讓用戶可以徹底移走這些模塊，在標(biāo)題欄上放一個(gè)關(guān)閉按鈕就可以。
可移動(dòng)面板要清晰的體現(xiàn)編輯與預(yù)覽狀態(tài)，如果用戶誤操作打亂模塊順序，需要提供一個(gè)“恢復(fù)默認(rèn)設(shè)置”的按鈕。
把次要內(nèi)容和可選內(nèi)容放到用戶能自己打開、收起的面板里。
你需要在頁(yè)面上顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件等，而你又沒法把它們都顯示在頁(yè)面上。 同時(shí)，還可能有一些適用中央舞臺(tái)模式的內(nèi)容需要在視覺上優(yōu)先處理，需要把面板收起。
1、這些模塊為界面上的主要內(nèi)容提供注釋、修改、說明或支持。（例如：WPS右邊的快捷鍵、樣式、幫助、資源）
2、這些模塊可能不是很重要，不需要默認(rèn)展開。
3、對(duì)不同的用戶來說，它們的價(jià)值并不一樣。（例如：圖中新手入門指導(dǎo)，老用戶可能并不需要）
4、甚至對(duì)同一個(gè)用戶來說，這些模塊可能有時(shí)候非常有用，換個(gè)時(shí)間就不一定了。當(dāng) 它們收起的時(shí)候，這些空間最好留給界面上的主要內(nèi)容。
5、這些模塊之間可能彼此沒有多大關(guān)系。當(dāng)用到Tab和折疊面板時(shí)，這兩個(gè)模式會(huì)把各個(gè)模塊組合到一起，表示它們之間有一些關(guān)聯(lián)，而可收起面板不會(huì)對(duì)內(nèi)容進(jìn)行分組。
把無(wú)關(guān)緊要的內(nèi)容隱藏起來可以讓界面變得簡(jiǎn)潔。
當(dāng)用戶選擇隱藏某個(gè)模塊時(shí)，只要簡(jiǎn)單地收起這個(gè)模塊就可以了。 它所占用的空間也會(huì)還給主要內(nèi)容。
這也是漸進(jìn)式展開原則的一個(gè)例子—只在用戶需要的時(shí)候，需要的地方立即顯示那些隱藏的內(nèi)容。
總的來說，想讓界面保持整潔，通過對(duì)內(nèi)容進(jìn)行分組和隱藏是非常有效方式。而可收起面板、Tab、折疊面板、可移動(dòng)面板，這4種模式正是有效方式的工具。 如何使用
把內(nèi)容放到一個(gè)單獨(dú)的面板里，讓用戶可以用一次單擊來打開或關(guān)閉這些面板。 可以利用引導(dǎo)性的文字來表示這里可以展開（例如：更多），也可以利用三角形的圖標(biāo)來表示這里可以展開。
當(dāng)用戶關(guān)閉這個(gè)面板時(shí)，把它所占用的空間收起來，用來顯示主要內(nèi)容。
也可以在打開和關(guān)閉這些面板的時(shí)候加上動(dòng)畫效果，這樣會(huì)讓打開和關(guān)閉時(shí)的過渡更加平滑。
如果有多個(gè)模塊要用這種方式來隱藏，可以把這些模塊放在一起，或者用Tab、折疊面板來組織，還可以把它們分開放在主界面上。
如果發(fā)現(xiàn)大部分用戶都打開了一個(gè)默認(rèn)為關(guān)閉狀態(tài)的可收起面板，那么應(yīng)該讓它默認(rèn)打開。
謝謝大家觀看！
前排提示：本文多Gif需耐心加載，且需要有一定Ae基礎(chǔ)才能便于理解內(nèi)容。
你有沒有注意過，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過渡），來完成狀態(tài)切換。
當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對(duì)這3部分。
03 Tab Bar動(dòng)態(tài)類型
動(dòng)態(tài)效果由弱到強(qiáng)，視覺層級(jí)由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來排序，但效果不同會(huì)有所差異）
▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡(jiǎn)單的分為：線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長(zhǎng)。
但只是單色修剪，看起來很單調(diào)。我們可以在這個(gè)動(dòng)畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過多吸引用戶注意力。但對(duì)于帶有娛樂類屬性的產(chǎn)品來說，可能會(huì)顯得有些普通。
我們可以考慮使用遮罩來制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來營(yíng)造氛圍。
對(duì)于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場(chǎng)動(dòng)畫。
（物理狀態(tài)：該物體在現(xiàn)實(shí)場(chǎng)景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場(chǎng)方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場(chǎng)方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來完成移動(dòng)和變形，這樣便能營(yíng)造出3d旋轉(zhuǎn)的錯(cuò)覺。
對(duì)于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動(dòng)態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對(duì)裝飾元素下手。（當(dāng)然這類方案很少見，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來替代文字，讓整體更簡(jiǎn)潔。
國(guó)外設(shè)計(jì)師Tubik，通過讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過蒙版來控制整體動(dòng)畫顯示范圍，這個(gè)方案看起來適合科技或游戲類產(chǎn)品。
通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動(dòng)軌跡，便能通過修剪這條軌跡來完成筆畫的移動(dòng)。
▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見的原因在于其動(dòng)態(tài)效果面積大，視覺層級(jí)高，容易過度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。
我們有更簡(jiǎn)單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡(jiǎn)單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大小）
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團(tuán)外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。
這個(gè)效果靈感來源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。
看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說兩句：
每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對(duì)的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見的動(dòng)態(tài)屬性組合方式，所以請(qǐng)不要局限你的想法。
在任何時(shí)候，海報(bào)的圖片處理都是設(shè)計(jì)師不可避免的一個(gè)步驟，運(yùn)用對(duì)色調(diào)的處理，構(gòu)圖的改變，甚至于風(fēng)格化處理來調(diào)整圖片，使之能夠更加的適合版面，我們今天分享的就是通過對(duì)圖片的處理來塑造不同風(fēng)格海報(bào)的設(shè)計(jì)。
01-
酸性液體金屬效果處理
酸性風(fēng)格它的體現(xiàn)形式通常是鐳射紋理，金屬玻璃材質(zhì)，3D物體材質(zhì)等，其中很多人都好奇金屬玻璃材質(zhì)的做法，也就是如何將普通的圖片轉(zhuǎn)換成酸性圖片，接下來我們將講解酸性圖片效果的處理方法，二話不說，先上效果圖：
步驟一/step 01
導(dǎo)入已經(jīng)摳好的素材，快捷鍵ctrl+shift+u作去色處理
步驟二/step 02
ctrl+j復(fù)制一層，ctrl+i反向一下，并設(shè)置模式為【差值】，ctrl+e合并這兩個(gè)圖層，這一步驟要重復(fù)2-3次左右，會(huì)形成這樣的效果，做好后的效果有點(diǎn)丑，但是沒關(guān)系，我們接著往下做。
步驟三/step 03
將圖形轉(zhuǎn)化為智能對(duì)象，執(zhí)行命令：濾鏡-模糊-表面迷糊（數(shù)值自定，具體數(shù)值可以自行修改，主要將黑白部分過度更加柔和一些）
步驟四/step 04
執(zhí)行命令：濾鏡-風(fēng)格化-油畫（數(shù)值自定，這一步驟可以將黑白之間的過渡更加柔和，形成液體金屬的最終效果）
步驟五/step 05
執(zhí)行命令：濾鏡-濾鏡庫(kù)-塑料包裝（數(shù)值自定，這一步驟還是處理黑白之間的過渡，使之更加柔和），最后可以調(diào)整一下亮度和對(duì)比度，使之與金屬更加相似。
步驟六/step 06
最后排版上文字，海報(bào)就完成啦。
02-
復(fù)古潮流風(fēng)藝術(shù)海報(bào)
半調(diào)網(wǎng)屏模式作為印刷中的重要方法，有著其特殊的處理藝術(shù)效果。在ps中，通過色彩模式可以將圖片的效果處理成半調(diào)網(wǎng)屏的像素狀效果。它有著復(fù)古潮流的藝術(shù)效果，下面我將講解如何在ps中給圖片添加半調(diào)網(wǎng)屏藝術(shù)效果，同上，先上效果圖：
步驟一/step 01
在PS中導(dǎo)入圖片，在這種潮流海報(bào)中，我們追求特殊風(fēng)格海報(bào)設(shè)計(jì)，可以在摳圖時(shí)故意粗糙的摳圖出來，并執(zhí)行命令：圖像-調(diào)整-黑白
步驟二/step 02
執(zhí)行命令：圖像-模式-灰度，再次執(zhí)行命令：圖像-模式-位圖，調(diào)整參數(shù)像素設(shè)為300，方法使用半調(diào)網(wǎng)屏，點(diǎn)擊確定；
步驟三/step 03
在上一步點(diǎn)擊確定后出現(xiàn)以下界面，頻率越小，效果越強(qiáng)烈，越大效果越輕，角度設(shè)置像素格的旋轉(zhuǎn)角度，形狀可以自行嘗試選擇，我這里選擇的是菱形；
步驟四/step 04
我們需要把位圖模式轉(zhuǎn)換成RGB,需要執(zhí)行兩次命令，第一次執(zhí)行：圖像-模式-灰度，第二次執(zhí)行：圖像-模式-RGB
接著是將弄好的圖片去掉白色底背景，在通道面板，按住ctrl鍵，鼠標(biāo)左鍵點(diǎn)擊其中一個(gè)通道，得到白色選區(qū)，快捷鍵：ctrl+shife+i反選選區(qū)，快捷鍵：ctrl+j復(fù)制圖層，隱藏下面的圖層，得到了一個(gè)半調(diào)網(wǎng)屏的圖片。
步驟五/step 05
最后排版上文字，就可以得到一張復(fù)古潮流藝術(shù)風(fēng)海報(bào)。
03-
炸裂風(fēng)格圖片處理
接下來休息下，我們來做一個(gè)非常簡(jiǎn)單，但又非常好看且具有形式感的圖片處理方法，炸裂風(fēng)格圖片海報(bào)，調(diào)整比較細(xì)的方塊可以有刺繡效果，非常具有視覺沖擊力，同時(shí)也能使版面產(chǎn)生非常強(qiáng)烈的層次感與形式感。先看最終效果：
步驟一/step 01
只需將圖片導(dǎo)入PS，執(zhí)行濾鏡-風(fēng)格化-凸出，這里可以自行調(diào)整參數(shù)
步驟二/step 02
在版面上排版圖片和文案，這樣一張炸裂風(fēng)格的海報(bào)就做好了。
04-
長(zhǎng)虹玻璃風(fēng)格海報(bào)
長(zhǎng)虹玻璃效果顧名思義，就是像玻璃樣式的效果，他能給人一種朦朧的美感，與“模糊”有點(diǎn)類似，它比較適合潮流時(shí)尚的一些產(chǎn)品海報(bào)設(shè)計(jì)時(shí)使用，尤其在電商海報(bào)中特別常見，接下來我們來詳細(xì)講解這種效果的做法吧，先上效果圖：
步驟一/step 01
在ps中新建一個(gè)畫布，填充一個(gè)50%的中性灰，用矩形工具繪制一個(gè)細(xì)長(zhǎng)的矩形，填充顏色為黑白的線形漸變；
步驟二/step 02
復(fù)制漸變的矩形框，填滿整個(gè)畫布，全選復(fù)制出來的矩形框，郵件轉(zhuǎn)換為智能對(duì)象，快捷鍵ctrl+shift+s存儲(chǔ)為psd文件，注這是后期用來置換的文件
步驟三/step 03
在畫布中倒入我們準(zhǔn)備好的圖片文件，復(fù)制一層，執(zhí)行命令：濾鏡-模糊-高斯模糊；
步驟四/step 04
執(zhí)行命令：濾鏡-扭曲-置換，在跳出的頁(yè)面設(shè)置水平和s垂直比例都為50，置換圖：拼貼，未定義區(qū)域：折回，點(diǎn)擊確定后選擇剛存儲(chǔ)的用來置換的文件；
步驟五/step 05
將剛才線形漸變的矩形置于最上層，混合模式改為柔光，并且調(diào)節(jié)下透明度，這樣長(zhǎng)虹玻璃效果就完成啦。
步驟六/step 06
選取工具選擇需要的部分執(zhí)行蒙版，就可以得到一半有玻璃，一半沒有玻璃的效果，然后排版上文字，海報(bào)完成！
05-
3D炫彩海報(bào)
3d炫彩海報(bào)適用于科技，創(chuàng)意等風(fēng)格呈現(xiàn)時(shí)使用，它的本質(zhì)是將一張圖進(jìn)行一種3d化處理，制作起來也是相當(dāng)?shù)暮?jiǎn)單，且特別能提升版面的形式感與立體感，制作非常簡(jiǎn)單，我們一起來做下唄，老規(guī)矩，先上圖：
步驟一/step 01
首先我們需要找一張顏色特別豐富的圖片，最好是像這種發(fā)光的海報(bào)，執(zhí)行命令：濾鏡-扭曲-旋轉(zhuǎn)扭曲，設(shè)置相應(yīng)的數(shù)值
步驟二/step 02
執(zhí)行命令：3d-從圖層新建網(wǎng)格-深度映射到-平面，把3d面板里面的預(yù)設(shè)改為【未照亮的紋理】
步驟三/step 03
在3d里面調(diào)整合適的角度后，在圖層面板選擇圖層，點(diǎn)擊鼠標(biāo)右鍵-柵格化3d，快捷鍵ctrl+t將圖層調(diào)整適合大小；
步驟四/step 04
最后排版上文字，海報(bào)就完成啦！
06-
塑料薄膜風(fēng)格海報(bào)
最后一種是塑料薄膜風(fēng)格海報(bào)，這種效果相對(duì)來說比較復(fù)雜，所以放在最后一個(gè)說，雖然不涉及圖片處理，但是對(duì)于海報(bào)設(shè)計(jì)來說可以說是錦上添花的一種存在，他能讓海報(bào)具有一種光澤的質(zhì)感，使其更顯層次感和形式感，這種海報(bào)在店招海報(bào)或者產(chǎn)品海報(bào)中比較實(shí)用，廢話不多說，來一起來做下吧，還是老規(guī)矩，上效果圖
步驟一/step 01
我們需要新建一個(gè)空白圖層，填充黑色，執(zhí)行命令：濾鏡-渲染-云彩
步驟二/step 02
執(zhí)行命令：濾鏡-液化，這里你可以隨意一點(diǎn)畫，這是將塑料膜的紋路畫出來，這是我畫的樣子；
步驟三/step 03
執(zhí)行命令：濾鏡-濾鏡庫(kù)-藝術(shù)效果-繪畫涂抹，畫筆類型選擇火花，這一步是將黑白顏色區(qū)分開來；
步驟四/step 04
再次執(zhí)行命令：濾鏡-濾鏡庫(kù)-素描-鉻黃漸變，這一步同樣是為了是將黑白顏色區(qū)分開來，只不過這次的效果更加明顯；
步驟五/step 05
點(diǎn)開通道面板，按住ctrl鍵，隨意單機(jī)一個(gè)通道，得到選取，回到圖層面板，快捷鍵ctrl+j復(fù)制一層，圖層模式改為濾色，調(diào)整適合的透明度，最后在下面加上圖片，排版上文字，海報(bào)就完成啦！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gyxygd.cn
