做到這三點挑戰(zhàn)，產(chǎn)品經(jīng)理只會不斷升值
在數(shù)字化時代，大屏設(shè)備無處不在，從企業(yè)數(shù)據(jù)監(jiān)控中心到城市運營指揮大廳，從商場的廣告展示屏到智能家居中的大型顯示終端。大屏 UI 設(shè)計憑借其獨特的視覺與交互特性，正引領(lǐng)著信息展示與用戶體驗的變革。
紅色系：點燃激情的視覺沖擊
紅色系可視化數(shù)據(jù)大屏 UI 設(shè)計，鮮艷奪目，充滿活力。紅色在色彩心理學(xué)中象征著激情、活力與警示，在大屏上運用紅色，能瞬間吸引用戶的目光，激發(fā)他們內(nèi)心的熱情。例如在一些電商促銷活動的大屏展示中，紅色的價格標簽、倒計時數(shù)字以及閃爍的促銷按鈕，能極大地刺激消費者的購買欲望。在股票交易大廳的大屏上，紅色用于顯示股價上漲的股票數(shù)據(jù)，讓交易員一眼便能捕捉到關(guān)鍵信息，這種色彩運用不僅美觀，更能有效傳遞信息，影響用戶決策。
科幻酷炫風(fēng)：開啟未來之旅
科幻酷炫風(fēng)格的大屏 UI 設(shè)計，將人們對未來科技的想象融入其中。借助光影效果、動態(tài)圖形和具有科技感的圖標，營造出充滿未來感的界面氛圍。這種風(fēng)格常見于科技企業(yè)的展廳、智能設(shè)備的操作界面以及科幻主題的娛樂場所。如某科技公司展示其最新研發(fā)成果的大屏，通過 3D 建模呈現(xiàn)出的虛擬場景，搭配流動的光線和半透明的面板，展示各種產(chǎn)品數(shù)據(jù)與技術(shù)原理，讓參觀者仿佛置身于未來世界，深刻感受到科技的魅力與企業(yè)的創(chuàng)新實力。
大屏 UI 設(shè)計特點深度剖析
綜合信息呈現(xiàn)：一屏覽盡全局
大屏 UI 設(shè)計的一大關(guān)鍵優(yōu)勢在于能夠提供綜合概覽界面。以數(shù)字智慧能源光伏儲能電站電網(wǎng)駕駛艙數(shù)據(jù)可視化大屏為例，它整合了微網(wǎng)系統(tǒng)中的水電站、光伏系統(tǒng)、儲能系統(tǒng)、風(fēng)力發(fā)電系統(tǒng)和負荷系統(tǒng)等多個能源系統(tǒng)的數(shù)據(jù)。同時，實時展示發(fā)電量、用電量、充放電量等關(guān)鍵數(shù)據(jù)，以及設(shè)備狀態(tài)和環(huán)境參數(shù)。通過這種全面的信息呈現(xiàn)，管理者可以在一個界面上獲取系統(tǒng)的整體運行狀態(tài)，快速做出決策，提高管理效率。這種綜合信息呈現(xiàn)方式，避免了用戶在多個界面之間切換查找信息的繁瑣過程，大大提升了信息獲取的便捷性與決策的及時性。
視覺創(chuàng)新運用：在大屏上做藝術(shù)
大屏廣闊的空間為設(shè)計師提供了豐富的創(chuàng)作空間。在色彩選擇上，設(shè)計師可以運用對比強烈的色彩組合來突出關(guān)鍵信息，如在藍色調(diào)為主的工業(yè)生產(chǎn)監(jiān)控大屏上，用橙色突出顯示設(shè)備故障點，使操作人員能夠迅速發(fā)現(xiàn)問題。形狀的運用也十分關(guān)鍵，通過不同形狀的圖表、卡片來區(qū)分不同類型的信息，如圓形圖表用于展示比例數(shù)據(jù)，柱狀圖用于對比數(shù)據(jù)大小，合理的形狀布局能引導(dǎo)用戶的視線，使信息傳遞更加直觀高效。此外，紋理和動畫的巧妙搭配，能為界面增添層次感和動態(tài)感。比如在地圖類大屏中，通過添加帶有紋理的底圖和動態(tài)的交通流量動畫，讓用戶更清晰地了解交通狀況，提升視覺體驗。
細膩觸感反饋：操作有回應(yīng)
觸感反饋在大屏 UI 設(shè)計中不可或缺。通過振動、聲音和觸覺圖標等方式，為用戶提供操作反饋。當用戶點擊大屏上的按鈕時，輕微的振動反饋能讓用戶確認操作已被系統(tǒng)接收，增強操作的真實感。聲音反饋同樣重要，例如在數(shù)據(jù)提交成功時播放輕快的提示音，而在出現(xiàn)錯誤時播放警示音，這種多感官的反饋方式，讓用戶在操作過程中更加自信和流暢，提升了交互的自然性與愉悅感，減少了用戶因操作無反饋而產(chǎn)生的困惑與焦慮。
多樣交互方式：打破傳統(tǒng)束縛
大屏 UI 設(shè)計鼓勵多樣化的交互方式。除了常見的觸摸操作，手勢控制、語音命令、視線追蹤等新型交互方式逐漸普及。在一些會議展示大屏中，演講者可以通過簡單的手勢，如揮手翻頁、握拳放大圖片，更加自然地與大屏進行交互，擺脫傳統(tǒng)遙控器或鼠標的束縛，增強展示效果與互動性。語音命令則為用戶提供了更加便捷的操作方式，在智能車載大屏中，用戶通過語音指令即可完成導(dǎo)航設(shè)置、音樂播放等操作，雙手無需離開方向盤，提高了駕駛安全性。視線追蹤技術(shù)通過捕捉用戶的視線焦點，自動調(diào)整界面內(nèi)容，如在醫(yī)療影像診斷大屏中，醫(yī)生的視線聚焦在某一區(qū)域時，系統(tǒng)自動放大該區(qū)域影像并顯示詳細信息，提升信息獲取效率。
定制化趨勢：滿足個性需求
隨著用戶需求的日益?zhèn)€性化，大屏 UI 設(shè)計呈現(xiàn)出定制化趨勢。設(shè)計師為用戶提供一系列工具和選項，允許他們根據(jù)自身喜好和需求定制界面與功能。在企業(yè)數(shù)據(jù)監(jiān)控大屏中，不同部門的員工可以根據(jù)自己關(guān)注的數(shù)據(jù)指標，自定義圖表類型、數(shù)據(jù)顯示方式以及界面布局。例如銷售部門更關(guān)注銷售業(yè)績數(shù)據(jù)，可將銷售圖表設(shè)置為醒目的柱狀圖，并置于界面中心位置；而技術(shù)部門則可將設(shè)備運行狀態(tài)數(shù)據(jù)以動態(tài)列表形式展示在界面一側(cè)。這種個性化定制不僅滿足了用戶的獨特需求，還提高了用戶對系統(tǒng)的使用效率與滿意度，使大屏 UI 設(shè)計更加貼合用戶實際工作與生活場景。
藝術(shù)技術(shù)融合：創(chuàng)造無限可能
大屏 UI 設(shè)計是藝術(shù)與技術(shù)的完美融合。設(shè)計師需要掌握先進的設(shè)計工具與技術(shù)，如三維建模軟件、數(shù)據(jù)可視化庫、交互編程框架等，同時具備深厚的藝術(shù)修養(yǎng)與創(chuàng)新思維。藝術(shù)靈感激發(fā)技術(shù)創(chuàng)新，例如通過藝術(shù)化的設(shè)計理念，促使開發(fā)者研發(fā)出更加逼真的 3D 渲染技術(shù)，用于打造具有立體感和真實感的界面元素。而技術(shù)的應(yīng)用又為藝術(shù)表達提供了無限可能，借助 WebGL 等技術(shù)，設(shè)計師能夠在網(wǎng)頁端實現(xiàn)復(fù)雜的動畫效果和交互體驗，為用戶帶來沉浸式的視覺享受。在城市規(guī)劃展示大屏中，通過三維建模技術(shù)創(chuàng)建逼真的城市模型，結(jié)合動畫與交互技術(shù)，用戶可以自由穿梭于虛擬城市中，查看不同區(qū)域的規(guī)劃細節(jié)，這種藝術(shù)與技術(shù)的融合，使大屏 UI 設(shè)計更加精彩豐富，為用戶帶來前所未有的體驗。
常用設(shè)計工具大盤點
泛普軟件：功能強大的協(xié)作利器
泛普軟件在大數(shù)據(jù)可視化大屏 UI 設(shè)計領(lǐng)域表現(xiàn)卓越。其功能全面，無論是復(fù)雜的數(shù)據(jù)圖表設(shè)計，如多層嵌套的樹形圖、帶有時間序列的動態(tài)折線圖，還是個性化的界面布局，如不規(guī)則的卡片式布局、具有視差效果的頁面設(shè)計，都能輕松實現(xiàn)。在操作效率方面，它能快速處理海量數(shù)據(jù)，即使面對數(shù)十萬條數(shù)據(jù)的實時監(jiān)控大屏需求，也能保持流暢運行，高效分析數(shù)據(jù)并展示結(jié)果。在團隊協(xié)作方面，泛普軟件支持數(shù)據(jù)共享與權(quán)限控制，團隊成員可以在一個平臺上協(xié)同工作，根據(jù)各自權(quán)限查看、編輯數(shù)據(jù)與設(shè)計內(nèi)容，極大地提高了項目推進效率，保障項目順利開展，適用于大型企業(yè)項目、政府智慧城市建設(shè)等對功能與協(xié)作要求較高的場景。
Echarts：百度旗下的可視化專家
依托百度的技術(shù)實力，Echarts 成為廣受歡迎的大數(shù)據(jù)可視化大屏 UI 設(shè)計系統(tǒng)。它擁有豐富多樣的可視化類型，涵蓋柱狀圖、折線圖、餅圖、散點圖、地圖、雷達圖等超過 40 種圖表類型，滿足各種數(shù)據(jù)展示場景需求。例如在電商銷售數(shù)據(jù)大屏中，使用柱狀圖對比不同商品的銷量，用折線圖展示銷售額隨時間的變化趨勢；在物流運輸監(jiān)控大屏中，通過地圖展示貨物運輸軌跡。Echarts 還支持高度自定義數(shù)據(jù)圖表，設(shè)計師可以靈活調(diào)整圖表的顏色、樣式、動畫效果等，使其與項目整體風(fēng)格完美契合。同時，它能夠與多業(yè)務(wù)系統(tǒng)數(shù)據(jù)無縫對接，方便企業(yè)整合不同來源的數(shù)據(jù)，進行綜合分析與展示，廣泛應(yīng)用于互聯(lián)網(wǎng)企業(yè)的數(shù)據(jù)統(tǒng)計分析、金融機構(gòu)的交易數(shù)據(jù)展示等場景。
HighCharts：成熟易用的圖表庫
HighCharts 以低門檻、高兼容性和龐大的用戶基礎(chǔ)聞名。其使用門檻低，對于沒有深厚編程基礎(chǔ)的設(shè)計師來說，通過簡單學(xué)習(xí)就能快速上手創(chuàng)建基本的數(shù)據(jù)圖表。它的兼容性極佳，能在多種瀏覽器和設(shè)備上穩(wěn)定運行，無論是 PC 端的 Chrome、Firefox，還是移動端的 Safari、微信內(nèi)置瀏覽器，都能完美適配。HighCharts 擁有廣泛的用戶社區(qū)，用戶在使用過程中遇到問題，可以在社區(qū)中搜索解決方案，參考其他用戶的案例，獲取靈感。然而，它也存在一些局限性，樣式相對傳統(tǒng)，在追求新穎獨特視覺效果的項目中可能稍顯不足，圖表擴展性有限，對于一些復(fù)雜的數(shù)據(jù)可視化需求實現(xiàn)起來較為困難。并且商業(yè)使用需要購買版權(quán)，這在一定程度上增加了企業(yè)成本，比較適合小型企業(yè)、個人項目或?qū)D表樣式要求不高的快速原型開發(fā)場景。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
在數(shù)字化轉(zhuǎn)型的時代浪潮中，B 端產(chǎn)品廣泛應(yīng)用于企業(yè)資源規(guī)劃（ERP）、客戶關(guān)系管理（CRM）、辦公自動化（OA）等諸多領(lǐng)域，已然成為企業(yè)高效運作的關(guān)鍵支撐。而 B 端界面設(shè)計作為用戶與產(chǎn)品交互的橋梁，其重要性不言而喻。它不僅承擔著提升用戶體驗的重任，更是助力企業(yè)實現(xiàn)業(yè)務(wù)目標、提高工作效率的核心要素。
用戶群體的復(fù)雜性
B 端產(chǎn)品的用戶并非單一類型，而是涵蓋了企業(yè)內(nèi)部從高層管理者到基層員工的多個角色，不同角色在企業(yè)組織架構(gòu)中所處位置不同，其使用產(chǎn)品的目的、需求和操作習(xí)慣也存在顯著差異。例如，企業(yè)的決策層通常更關(guān)注宏觀的數(shù)據(jù)統(tǒng)計與分析，以便做出戰(zhàn)略決策，他們希望在界面上能夠快速獲取關(guān)鍵業(yè)務(wù)指標（KPI）的匯總信息，如銷售額、利潤、市場占有率等；而一線員工則側(cè)重于完成具體的業(yè)務(wù)操作，如訂單處理、客戶信息錄入等，他們需要界面操作流程簡潔、高效，能夠快速完成任務(wù)。以一款企業(yè)級項目管理軟件為例，項目經(jīng)理需要通過界面把控項目進度、分配資源、跟蹤任務(wù)執(zhí)行情況；項目成員則主要在界面上接收任務(wù)、更新任務(wù)狀態(tài)、提交工作成果。這種用戶群體的復(fù)雜性，要求 B 端界面設(shè)計必須具備高度的靈活性和適應(yīng)性，能夠滿足不同角色的多樣化需求。
業(yè)務(wù)邏輯的深度與廣度
B 端產(chǎn)品緊密圍繞企業(yè)復(fù)雜的業(yè)務(wù)流程構(gòu)建，其背后蘊含的業(yè)務(wù)邏輯深度和廣度遠超 C 端產(chǎn)品。從企業(yè)的供應(yīng)鏈管理，包括采購、庫存、物流等環(huán)節(jié)，到生產(chǎn)制造過程中的計劃排程、質(zhì)量控制，再到銷售與營銷領(lǐng)域的客戶獲取、銷售漏斗管理等，每一個業(yè)務(wù)模塊都涉及眾多的流程和規(guī)則。例如，在一家制造型企業(yè)的 ERP 系統(tǒng)中，生產(chǎn)訂單的創(chuàng)建需要關(guān)聯(lián)原材料庫存、生產(chǎn)設(shè)備的可用性、工人排班等多個因素，任何一個環(huán)節(jié)出現(xiàn)問題都可能影響訂單的執(zhí)行。B 端界面設(shè)計需要將這些復(fù)雜的業(yè)務(wù)邏輯以直觀、易懂的方式呈現(xiàn)給用戶，幫助用戶理解和操作。這就要求設(shè)計師深入了解企業(yè)業(yè)務(wù)，將業(yè)務(wù)流程轉(zhuǎn)化為合理的界面布局和交互流程，確保用戶在使用產(chǎn)品時能夠準確、高效地完成工作任務(wù)，提升企業(yè)整體運營效率。
對高效性與準確性的極致追求
在企業(yè)的工作場景中，時間就是成本，B 端產(chǎn)品的用戶期望通過界面操作快速、準確地完成工作，避免因界面設(shè)計不合理導(dǎo)致的操作失誤和時間浪費。例如，在財務(wù)報銷系統(tǒng)中，財務(wù)人員需要快速錄入大量的報銷數(shù)據(jù)，并確保數(shù)據(jù)的準確性，否則可能引發(fā)財務(wù)風(fēng)險。因此，B 端界面設(shè)計在信息架構(gòu)上應(yīng)清晰明了，讓用戶能夠迅速找到所需功能入口；操作流程應(yīng)簡潔流暢，減少不必要的操作步驟；同時，提供有效的錯誤提示和數(shù)據(jù)校驗機制，幫助用戶及時發(fā)現(xiàn)和糾正錯誤。例如，采用自動填充、下拉選擇等方式減少用戶手動輸入，降低出錯概率；對于必填項和關(guān)鍵數(shù)據(jù)，在用戶提交時進行實時校驗，并以醒目的方式提示錯誤信息。通過這些設(shè)計手段，最大限度地提高用戶操作的效率和準確性，滿足企業(yè)對高效運營的需求。
B 端界面設(shè)計的關(guān)鍵策略
以業(yè)務(wù)為導(dǎo)向的信息架構(gòu)設(shè)計
信息架構(gòu)是 B 端界面設(shè)計的基礎(chǔ)，合理的信息架構(gòu)能夠使復(fù)雜的業(yè)務(wù)信息有序呈現(xiàn)，方便用戶快速定位和使用功能。在設(shè)計信息架構(gòu)時，首先要深入調(diào)研企業(yè)的業(yè)務(wù)流程和用戶需求，將業(yè)務(wù)功能進行合理分類和組織。例如，對于一款電商企業(yè)的后臺管理系統(tǒng)，可以將功能模塊劃分為商品管理、訂單管理、客戶管理、營銷管理等核心板塊，每個板塊再進一步細分下級功能。在界面布局上，采用清晰的導(dǎo)航欄和側(cè)邊欄，明確展示各功能模塊的層級關(guān)系，使用戶能夠一目了然地了解系統(tǒng)的功能結(jié)構(gòu)。同時，運用搜索功能和快捷入口，方便用戶快速找到常用功能和特定信息。例如，在訂單管理模塊中，用戶可以通過訂單編號、客戶名稱、下單時間等關(guān)鍵詞進行搜索，快速定位到所需訂單；對于高頻操作的功能，如訂單審核、發(fā)貨等，設(shè)置快捷按鈕，提高操作效率。
簡潔直觀的交互設(shè)計
簡潔直觀的交互設(shè)計是提升 B 端用戶體驗的關(guān)鍵。在交互設(shè)計過程中，應(yīng)遵循用戶的操作習(xí)慣，盡量減少操作步驟和流程的復(fù)雜性。例如，在數(shù)據(jù)錄入界面，采用表格形式展示數(shù)據(jù)，方便用戶批量錄入和編輯；對于復(fù)雜的業(yè)務(wù)操作，提供分步引導(dǎo)和操作提示，幫助用戶順利完成任務(wù)。同時，注重交互的一致性，包括按鈕樣式、操作手勢、反饋機制等方面。例如，在整個系統(tǒng)中，統(tǒng)一使用藍色作為主要操作按鈕的顏色，點擊按鈕時都采用短暫的動畫效果作為反饋，讓用戶在使用過程中形成穩(wěn)定的操作預(yù)期，降低學(xué)習(xí)成本。此外，充分利用快捷鍵和批量操作功能，滿足高級用戶對高效操作的需求。例如，在文件管理界面，用戶可以通過快捷鍵 Ctrl+A 全選文件，Ctrl+C 復(fù)制文件，Ctrl+V 粘貼文件；對于多個文件的相同操作，如批量刪除、批量重命名等，提供便捷的批量操作選項，提高工作效率。
數(shù)據(jù)可視化設(shè)計提升決策效率
在 B 端產(chǎn)品中，數(shù)據(jù)是企業(yè)決策的重要依據(jù)，數(shù)據(jù)可視化設(shè)計能夠?qū)⒑Ａ?、?fù)雜的數(shù)據(jù)以直觀、易懂的圖表形式呈現(xiàn)給用戶，幫助用戶快速理解數(shù)據(jù)背后的信息，提升決策效率。根據(jù)數(shù)據(jù)的特點和分析目的，選擇合適的圖表類型，如柱狀圖用于對比數(shù)據(jù)大小，折線圖用于展示數(shù)據(jù)趨勢，餅圖用于顯示數(shù)據(jù)占比等。例如，在企業(yè)銷售數(shù)據(jù)分析界面，使用柱狀圖對比不同地區(qū)、不同產(chǎn)品線的銷售額，讓銷售經(jīng)理能夠直觀地看出銷售業(yè)績的差異；用折線圖展示銷售額隨時間的變化趨勢，幫助管理層預(yù)測未來銷售走勢。同時，注重圖表的簡潔性和可讀性，避免過多的數(shù)據(jù)標簽和裝飾元素干擾用戶視線。在圖表中添加必要的注釋和說明，幫助用戶理解數(shù)據(jù)含義。此外，提供數(shù)據(jù)下鉆功能，讓用戶能夠從宏觀數(shù)據(jù)深入到具體的明細數(shù)據(jù)進行分析。例如，在銷售數(shù)據(jù)分析界面，用戶點擊某個地區(qū)的柱狀圖，可以進一步查看該地區(qū)各銷售門店的銷售數(shù)據(jù)，為決策提供更詳細的依據(jù)。
B 端界面設(shè)計的未來趨勢
智能化交互融入工作流程
隨著人工智能技術(shù)的不斷發(fā)展，智能化交互將逐漸融入 B 端界面設(shè)計，為用戶帶來更加智能、便捷的使用體驗。智能語音助手將成為 B 端產(chǎn)品的重要交互方式之一，用戶通過語音指令即可完成復(fù)雜的操作，如查詢數(shù)據(jù)、創(chuàng)建任務(wù)、生成報告等。例如，在企業(yè)客服系統(tǒng)中，客服人員可以通過語音與智能助手交互，快速查詢客戶信息、解答客戶問題，提高服務(wù)效率。智能推薦系統(tǒng)也將在 B 端產(chǎn)品中得到廣泛應(yīng)用，根據(jù)用戶的歷史操作記錄、業(yè)務(wù)數(shù)據(jù)和行為模式，為用戶提供個性化的功能推薦和操作建議。例如，在項目管理軟件中，系統(tǒng)根據(jù)項目經(jīng)理的項目類型和過往經(jīng)驗，推薦合適的項目模板、團隊成員和工具資源，幫助項目經(jīng)理更好地規(guī)劃和執(zhí)行項目。此外，自動化流程將進一步簡化用戶操作，系統(tǒng)能夠根據(jù)預(yù)設(shè)的規(guī)則自動完成一些重復(fù)性、規(guī)律性的任務(wù)，如數(shù)據(jù)備份、報表生成、任務(wù)提醒等，讓用戶將更多精力投入到創(chuàng)造性的工作中。
跨平臺與多設(shè)備兼容性優(yōu)化
在移動辦公日益普及的今天，企業(yè)員工需要在不同的設(shè)備和平臺上隨時隨地訪問和使用 B 端產(chǎn)品，因此跨平臺與多設(shè)備兼容性優(yōu)化成為 B 端界面設(shè)計的重要趨勢。未來的 B 端界面設(shè)計需要確保在 PC 端、移動端（包括手機和平板）、智能大屏等多種設(shè)備上都能呈現(xiàn)出良好的視覺效果和交互體驗。采用響應(yīng)式設(shè)計技術(shù)，使界面能夠根據(jù)設(shè)備屏幕尺寸自動調(diào)整布局和元素大小，確保內(nèi)容的可讀性和操作的便捷性。
例如，在手機端，界面采用簡潔的單欄布局，突出核心功能和信息，方便用戶單手操作；在平板端，采用分欄布局，展示更多的信息和功能模塊，提高操作效率。同時，優(yōu)化不同平臺上的交互方式，使其符合該平臺的用戶習(xí)慣。
例如，在移動端，充分利用觸摸手勢操作，如滑動、縮放、長按等，提供更加自然、流暢的交互體驗；在智能大屏上，支持手勢控制、語音控制等多種交互方式，滿足多人協(xié)作和遠程操作的需求。此外，確保 B 端產(chǎn)品在不同操作系統(tǒng)（如 Windows、MacOS、iOS、Android 等）上的兼容性，為用戶提供一致的使用體驗。
強化安全與隱私保護設(shè)計
隨著數(shù)據(jù)安全和隱私保護問題日益受到關(guān)注，B 端界面設(shè)計在未來將更加注重強化安全與隱私保護措施。在界面設(shè)計中，明確展示數(shù)據(jù)的使用和存儲方式，讓用戶清楚了解自己的數(shù)據(jù)流向和被如何使用。
例如，在系統(tǒng)設(shè)置中，提供詳細的數(shù)據(jù)隱私政策說明，告知用戶數(shù)據(jù)的收集范圍、用途、共享對象等信息；在數(shù)據(jù)傳輸過程中，采用加密技術(shù)，確保數(shù)據(jù)的安全性。同時，加強用戶身份認證和權(quán)限管理功能，通過多種認證方式（如密碼、指紋識別、面部識別、動態(tài)驗證碼等）提高用戶賬號的安全性，防止賬號被盜用。根據(jù)用戶角色和工作需求，精確設(shè)置不同的操作權(quán)限，確保用戶只能訪問和操作其權(quán)限范圍內(nèi)的數(shù)據(jù)和功能。例如，在企業(yè)財務(wù)系統(tǒng)中，財務(wù)經(jīng)理擁有查看和審批所有財務(wù)數(shù)據(jù)的權(quán)限，而普通財務(wù)人員只能查看和編輯自己負責的部分數(shù)據(jù)。此外，在界面上設(shè)置安全提醒和預(yù)警功能，及時告知用戶可能存在的安全風(fēng)險，如賬號異地登錄提醒、數(shù)據(jù)泄露風(fēng)險預(yù)警等，幫助用戶保護個人信息和企業(yè)數(shù)據(jù)安全。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
2025年，UI/UX設(shè)計領(lǐng)域正迎來一系列令人興奮的創(chuàng)新趨勢。從更具沉浸感的3D元素到人性化的分區(qū)設(shè)計，從動態(tài)排版到模糊與顆粒效果的巧妙運用，再到生物識別技術(shù)的普及和可穿戴設(shè)備的深度適配，這些趨勢不僅讓界面更加美觀，更提升了用戶體驗和情感共鳴。本文將深入探討這些前沿設(shè)計趨勢，為設(shè)計師和產(chǎn)品團隊提供靈感和方向，幫助他們打造出更具吸引力和實用性的數(shù)字產(chǎn)品。
2025 年，數(shù)字設(shè)計領(lǐng)域會有很多新機會，這都得靠創(chuàng)新來推動。設(shè)計師們現(xiàn)在越來越大膽，敢打破傳統(tǒng)套路，設(shè)計出的東西不僅要實用，還得有吸引力，能真正打動人。
比如，會有更多 3D 元素加入設(shè)計里，讓用戶感覺更真實、更沉浸；還有很多設(shè)計會把 “方便用戶” 和 “拉近人際距離” 放在首位，不再只追求技術(shù)炫酷，而是更關(guān)注用戶的實際需求和情感感受。
那么我們來看一下有哪些趨勢~
你有沒有過這樣的體驗？打開一個 APP，信息像 “亂燉” 一樣堆在一起，找半天找不到重點。
2025 年的設(shè)計師學(xué)會了 “斷舍離”
就像日式便當盒把飯菜分成不同格子，現(xiàn)在設(shè)計師也把網(wǎng)頁或 APP 界面分成多個 “小格子”，每個格子放不同功能或內(nèi)容（比如數(shù)據(jù)、圖片、文字）。
好處：信息更清晰，用戶一眼就能看出重點，而且設(shè)計師可以靈活排列，讓頁面既整齊又好看。
比如有的網(wǎng)站用這種格子展示不同模塊，重要內(nèi)容更突出，干擾少。
分區(qū)設(shè)計技巧：格子的大小、間距、邊框都有講究！重要內(nèi)容的格子更大、邊框更粗，次要信息的格子更 “低調(diào)”，就像媽媽給你裝便當，愛吃的菜永遠擺在最顯眼的位置。
圖片網(wǎng)站鏈接：https://selestial.co/
以前網(wǎng)頁里的 3D 圖像是 “擺件”，現(xiàn)在它們會 “互動” 了！
3D 效果不是新鮮事，但現(xiàn)在更厲害：能互動、能沉浸！
比如網(wǎng)頁里的物體可以 360 度旋轉(zhuǎn)，虛擬試穿衣服、查看產(chǎn)品細節(jié)，甚至結(jié)合 AR/VR 讓你感覺身臨其境。
現(xiàn)在手機和瀏覽器性能更強了，3D 元素加載更快，甚至能在低配設(shè)備上流暢運行，設(shè)計師可以大膽用毛茸茸的 3D 圖標、會 “呼吸” 的動態(tài)按鈕（比如按鈕按下時像真的被按下去一樣凹陷）。
好處：畫面更立體、有趣，用戶體驗像在真實世界互動，不再是死板的圖片和文字。
圖片網(wǎng)站鏈接：https://kevinhilgendorf.com/
圖片網(wǎng)站鏈接：https://labs.chaingpt.org/
字體不再老老實實不動，而是會 “跳舞”：大小變化、顏色漸變、跟著用戶操作移動，甚至根據(jù)內(nèi)容情緒調(diào)整動畫（比如錯誤提示字體變紅閃爍，成功提示變綠飄動）。
好處：吸引注意力，傳遞品牌個性，比如讓標題動起來，用戶一眼就被抓住。
文字不再是 “死板的符號”，而是會 “表演” 的演員，我們可以做一些交互創(chuàng)意方面的案例假設(shè)
案例1：一個新聞網(wǎng)站的標題 “今日熱點”，當你滾動頁面時，“熱點” 兩個字會像火苗一樣跳動，吸引你點擊；電商網(wǎng)站的 “限時折扣” 按鈕，文字會從左到右 “跑馬燈” 式滾動，仿佛在喊 “快看我！”。
案例2：社交媒體 APP 的評論區(qū)，當有人給你發(fā) “生日快樂”，“生日快樂” 這幾個字會飄出彩色 confetti（紙屑），還會放大縮小；如果收到一條提醒 “網(wǎng)絡(luò)連接失敗”，文字會變成紅色，輕微抖動，像在著急地告訴你 “出問題啦”。
案例3：未來的動態(tài)字體甚至能根據(jù)你的輸入語氣自動調(diào)整！比如你在聊天框里輸入 “氣死我了！”，發(fā)送后文字會變成紅色，扭曲變形，模擬 “憤怒” 的情緒；輸入 “哈哈哈哈哈”，文字會笑著上下彈跳，自帶喜感。
圖片網(wǎng)站鏈接：https://wodniack.dev/
圖片網(wǎng)站鏈接：https://romaingranai.xyz/
背景不再是純色或簡單漸變，而是加了 “濾鏡”：有的模糊像柔光，有的帶顆粒感像老照片，讓界面更有層次和溫度。
好處：不搶主內(nèi)容的風(fēng)頭，卻能增加細膩的質(zhì)感，讓用戶覺得界面更精致、有 “呼吸感”。
想象一下：你的屏幕不再是冰冷的玻璃，而是像磨砂質(zhì)感的燈罩，透著柔和的光 ——
例如：一個閱讀 APP 的背景，不是純灰色，而是帶點模糊的淺灰，像隔著一層薄霧，文字浮在上面更突出，眼睛看久了也不累；
短視頻 APP 的點贊按鈕背后，有淡淡的顆粒感，像老電影膠片，點擊時還會有輕微的 “沙沙” 聲，復(fù)古又治愈。
例如：有些網(wǎng)站的光標變成了半透明的小圓圈，移動時會在背景留下淡淡的拖影，像在雪地上踩出腳??；
購物車圖標點擊時，周圍會升起細小的顆粒，像撒了一把金粉，讓操作更有 “儀式感”。
現(xiàn)代人看膩了 “完美到反光” 的數(shù)字界面，這種帶點 “不完美” 的質(zhì)感，反而讓人感覺親切，像摸到了真實的紙張或布料。
圖片網(wǎng)站鏈接：https://breadzine.com/
以前的暗色模式是 “純黑配白字”，刺眼又冰冷，現(xiàn)在設(shè)計師給它加了 “柔光濾鏡”：
不是純黑背景配白字那種刺眼的暗模式，而是柔和的 “低對比度暗調(diào)”：比如深灰配淺灰，帶點淡淡光影，像傍晚的光線一樣舒服。
好處：保護眼睛，減少視覺疲勞，還營造出高級、安靜的氛圍，比傳統(tǒng)暗模式更溫馨。
顏色更溫柔：比如微信的暗色模式，背景不是純黑，而是深海軍藍，文字是淺灰色，圖標帶一點淡金色光澤，晚上刷手機像在暖黃色的臺燈下看書，不刺眼還很高級。
場景化設(shè)計：一個助眠 APP 的低光模式，界面會模擬 “月光效果”，背景有淡淡的云層陰影，按鈕像夜空中的星星一樣微微閃爍，配合白噪音，讓你還沒開始冥想就先放松下來。
保護眼睛更貼心：低對比度設(shè)計減少視覺疲勞，尤其適合長時間用手機的上班族、學(xué)生黨，再也不用擔心晚上刷手機 “亮瞎眼”。
圖片網(wǎng)站鏈接：https://www.chromatique.studio/
圖片網(wǎng)站鏈接：https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page
圖片網(wǎng)站鏈接：https://silverdrive.nl/
你有沒有被 APP或網(wǎng)站 的 “謎之提示” 搞懵過？比如 “操作異常，請重試”—— 到底哪里異常？現(xiàn)在設(shè)計師開始 “說人話” 了
按鈕上的字、提示信息、錯誤提醒…… 這些細節(jié)文字越來越重要。比如 “提交” 改成 “確認發(fā)布”，錯誤提示寫 “網(wǎng)絡(luò)好像斷了，點擊重試” 而不是冷冰冰的 “錯誤 404”。
好處：讓用戶知道該做什么，減少操作困惑，就像有個小助手在旁邊輕聲指導(dǎo)。
按鈕文案更具體：以前 “提交” 按鈕，現(xiàn)在改成 “確認并發(fā)布動態(tài)”，你一下就知道點了之后會發(fā)生什么；購物車的 “結(jié)算” 按鈕變成 “去支付（含 3 件商品）”，清楚告訴你當前購物車數(shù)量。
錯誤提示會 “安慰人”：當你登錄密碼輸錯，不再是 “密碼錯誤”，而是 “密碼好像不對哦，是不是字母大小寫搞錯了？試試找回密碼吧～”，帶點 emoji 和親切感，讓你不煩躁。
空狀態(tài)會 “引導(dǎo)”：比如一個筆記 APP 的空白頁，不再是冷冰冰的 “暫無筆記”，而是畫著一個小臺燈，配文 “點擊新建筆記，開始記錄今天的小確幸吧～”，鼓勵你行動起來。
圖片網(wǎng)站鏈接：https://clickup.com/
圖片網(wǎng)站鏈接：https://www.headspace.com/
不用記復(fù)雜密碼了！指紋、人臉、語音識別越來越普及，甚至未來可能用眼動或神經(jīng)信號驗證。比如手機刷臉解鎖、支付時掃指紋，又快又安全。
好處：再也不怕忘記密碼，登錄像 “本能反應(yīng)” 一樣自然。
你還記得自己設(shè)過多少個密碼嗎？郵箱、銀行、社交軟件……2025 年，你只需要 “露個臉”
“掃個指紋”：
生活場景：早上上班，刷臉打開公司門禁；午休用指紋支付買咖啡；晚上回家，虹膜識別解鎖手機，全程不用輸密碼。甚至連銀行 APP 轉(zhuǎn)賬，看一眼攝像頭就能確認身份，安全又快捷。
默默驗證更省心：有些 APP 會 “偷偷” 驗證你 —— 比如你常用手機的手勢是右手拇指解鎖，系統(tǒng)會記錄你的握持姿勢，當檢測到左手拿手機且指紋不符時，自動觸發(fā)安全提醒，不用你手動操作，安全藏在細節(jié)里。
特殊場景：比如戴著手套不方便指紋解鎖？未來的可穿戴設(shè)備可能支持 “靜脈識別”，通過血管紋路確認身份，下雨天、運動時也能輕松解鎖。
圖片網(wǎng)站鏈接：https://dribbble.com/shots/23201694-Face-id
智能手表不再是 “縮小版手機”，而是更懂你的 “貼身伙伴”：
智能手表、VR 眼鏡、健康手環(huán)等設(shè)備的設(shè)計越來越難：屏幕小，怎么讓用戶操作方便？
比如用手勢滑動、語音命令，甚至靠眨眼控制；還要考慮戴著舒服（輕、貼合手腕）、續(xù)航久、適應(yīng)各種場景（運動時防水，強光下看得清）。
小屏幕大講究：比如一個運動手表，跑步時屏幕自動切換成 “極簡模式”，只顯示配速、心率、里程，字體超大，你 glancing（掃一眼）就能看清；當你停下來休息，屏幕會慢慢顯示更詳細的數(shù)據(jù)，像個貼心教練。
交互方式創(chuàng)新：VR 眼鏡不再靠手柄操作，你眨眨眼就能切換菜單，點點頭就能確認；智能手環(huán)檢測到你睡眠不好，早上會震動提醒 “昨晚睡眠質(zhì)量一般，今天記得多喝水哦”，還會同步調(diào)整手機的屏幕亮度，幫你緩解疲勞。
場景化適配：比如滑雪專用智能眼鏡，強光下自動調(diào)暗鏡片，檢測到你加速滑行時，界面只顯示速度和路線，避免分心；潛水手表接觸到水時，自動鎖定屏幕防止誤觸，浮出水面后又恢復(fù)正常。
圖片網(wǎng)站鏈接：https://inspect-ar.com/en/
圖片網(wǎng)站鏈接：https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI
界面不再只追求好看，還要讓用戶用得爽、有情感共鳴：分區(qū)清晰、3D 互動、動態(tài)字體吸引眼球，模糊背景和低光模式讓眼睛舒服；UX 寫作和生物識別減少操作麻煩，可穿戴設(shè)備更懂用戶的使用場景。
本文由人人都是產(chǎn)品經(jīng)理作者【南設(shè)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
編輯導(dǎo)語：在做UI設(shè)計時，定義并統(tǒng)一顏色規(guī)范對產(chǎn)品設(shè)計和團隊整體推進具有重要作用，本篇文章通過一個國外大廠真實的顏色組件升級案例為我們分享了統(tǒng)一顏色規(guī)范的好方法，一起來看。
Hi，我是彩云。咱們平時在做UI組件庫的時候，會遇到一個問題，定義了很多顏色但在團隊合作的時候，卻依然還是會根據(jù)每個設(shè)計師自己的喜好來配色，很難將顏色規(guī)范很好的統(tǒng)一起來。這其中有一個很嚴重的問題就是對于顏色的命名和管理不夠清晰，那么今天這篇文章通過一個國外大廠真實的顏色組件升級案例，希望能幫你解決這個難題。
我們花了幾個月的時間改進了設(shè)計系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素：它們構(gòu)成視覺語言，幫助定義品牌，并被開發(fā)和設(shè)計師每天用在產(chǎn)品設(shè)計中。
但如果我們在使用顏色上沒有明確的指導(dǎo)原則，如顏色被團隊中的設(shè)計師按喜好使用時，將會導(dǎo)致產(chǎn)品看起來非常混亂。
我們APP中的不一致例子
接下來我會告訴你，我們是如何做好顏色規(guī)范以及在整個項目中面臨的挑戰(zhàn)，正如你將看到的，這個項目并不像看上去那么簡單：
如何通過 Getaround 在設(shè)計和技術(shù)方面管理顏色概述這個系統(tǒng)的局限性，并說明我們?nèi)绾胃倪M它什么是語義顏色我們是如何實現(xiàn)它的，以及它帶來的優(yōu)勢！
和許多設(shè)計團隊一樣，我們使用 Figma 作為我們的主要設(shè)計工具。我們的顏色被放在“基礎(chǔ)”庫中，可以在其中找到我們在產(chǎn)品中使用的所有常見樣式，例如字體樣式、顏色、圖標等。這個庫提供了我們每天使用的專用系統(tǒng)庫（iOS、Android、Web、電子郵件）。顏色名稱過去是基于它們的外觀。例如：紫色顏色是我們的主要顏色，而石墨色是基本文本的常規(guī)顏色。
在我們的APP中，曾經(jīng)會用相同的系統(tǒng)來管理顏色。此外，還有一些語義顏色，但僅限于 iOS，開發(fā)用的也不多。
在使用這個系統(tǒng)時，團隊反復(fù)面臨同樣的問題：如何確保從一位設(shè)計師到另一位設(shè)計師以相同的方式使用顏色？如果沒有適當?shù)闹笇?dǎo)原則，我們?nèi)绾未_保開發(fā)很好的還原？如果明天我們必須用全新的配色方案來改造我們的品牌，要怎么快速統(tǒng)一？讓我們試著找出我們是如何陷入這種境地的？
所有設(shè)計師都使用相同的色板，但自 2019 年 Getaround 品牌重塑以來，除了引入不一致之外，沒有明確關(guān)于如何使用它們的規(guī)范，所以設(shè)計師在選擇顏色時迷失了方向。然后他們將開始建立自己的參考資料，每個設(shè)計師都有不同的配色想法。
例如：設(shè)計師應(yīng)該在所有這些灰色陰影中為次級文本選擇哪種灰色？顏色命名在這里不是很有幫助
以前品牌的一些舊顏色仍在使用（按鈕上的藍色陰影，標題……）。到現(xiàn)在也沒有真正的行動計劃來迭代它們。
舊驅(qū)動器品牌
在 2021 年初，我們有機會為我們的 iOS 和 Android APP來制定長期的 UI 規(guī)劃。我們問自己“5年后我們的APP會是什么樣的？”。我們會回顧， Getaround 品牌是如何成為我們視覺方法中心的。
以上是我們品牌和設(shè)計團隊在 2020 年完成的全面工作的一小部分致力于設(shè)計系統(tǒng)的 Cobalt 團隊借此機會重新考慮了顏色系統(tǒng)。然而，為了使這一目標成為現(xiàn)實，我們面臨著一些挑戰(zhàn)：
我們?nèi)绾未_保每個設(shè)計師都可以依賴易于理解和使用色彩系統(tǒng)？擁有一個簡單系統(tǒng)將加快使用速度。
我們?nèi)绾未_保從一開始就設(shè)計出易于使用的顏色？
我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護并符合現(xiàn)在和未來的行業(yè)標準（例如：暗模式）
在我們的探索階段，在 Figma 的共享環(huán)境中工作促使我們保存和記錄我們所做的設(shè)計決策。就像我們應(yīng)該如何命名我們的強調(diào)色：（主要？強調(diào)？）我們還測試了APP界面在黑暗模式下的外觀，以及如何正確支持這一點。我們應(yīng)該創(chuàng)建一個單獨的調(diào)色板還是為每個組件都創(chuàng)建一個深色版本？
我們開始與開發(fā)討論這個問題，以了解他們有什么解決方案來處理這些問題。語義顏色的概念很快就被開發(fā)人員提出來，因為他們知道并且很好地使用了這個概念。但對于設(shè)計師來說，又要如何準確理解呢？
語義指的是根據(jù)顏色的使用方式而不是色調(diào)來命名顏色的方法。
例如，你可以將顏色命名為“成功”或“積極”，因為它指的是含義，而不是“綠色”或“翡翠綠”。甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來命名顏色，例如背景顏色、按鈕背景顏色、文本顏色、圖標顏色等……
語義顏色并不新鮮，越來越多的產(chǎn)品開始采用這種方式來定義顏色。我們可以從下面一些大廠的顏色規(guī)范來學(xué)習(xí)google
顯然，這種顏色系統(tǒng)有很多優(yōu)點。因此，現(xiàn)在讓我解釋一下我們?nèi)绾卧趯嵺`中將這個概念應(yīng)用到我們的產(chǎn)品中。
我們的新顏色系統(tǒng)由兩部分組成：
基礎(chǔ)調(diào)
我們與品牌團隊密切合作，他們定義了一個全新的品牌，我們在工作時會圍繞這個品牌考慮。該品牌的每種顏色都采用多種色調(diào)進行調(diào)整，以創(chuàng)造更大的靈活性，一次構(gòu)建成為基礎(chǔ)調(diào)色板。它代表可以在產(chǎn)品中顯示的所有可能顏色。團隊可能不會全部使用它們，但他們會選擇在產(chǎn)品中效果最好的那些。
基礎(chǔ)調(diào)色板
語義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的，命名不再是指顏色的“外觀”（洋紅色、棕色、綠色……），而是指UI 元素它們被應(yīng)用于（文本、圖標、按鈕、背景……）以及該元素的狀態(tài)（活動、非活動、成功……）。請參閱此處的命名法和一些示例：
語義顏色結(jié)構(gòu)和示例這意味著來自基礎(chǔ)調(diào)色板的顏色可以用于多種語義顏色：
這就是我們根據(jù)這個新原則重新調(diào)整顏色命名的方式：
我們通過設(shè)計師和開發(fā)進行了內(nèi)部用戶測試，以確定命名語義顏色的最佳方式。我們嘗試了很多不同的命名方法，發(fā)現(xiàn)過于詳細的命名系統(tǒng)對于我們的團隊和產(chǎn)品的規(guī)模來說維護和使用太復(fù)雜了。我們決定做一些簡單的維護，同時在命名方面有足夠的延展性。
語義顏色側(cè)重于顏色的用途。它消除了設(shè)計師和開發(fā)對使用什么顏色的盲目猜測，因為視覺語言直接傳達了設(shè)計決策。
例如：在這里，顏色命名使設(shè)計師更容易做出正確的選擇。在我們的原則中， *Accent* state 用于交互元素。
語義顏色可以適應(yīng)不同的主題。語義顏色的名稱始終相同，但它的外觀可能會根據(jù)所選模式而改變。例如，語義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶選擇的模式，將自動顯示正確的顏色。這對我們的設(shè)計系統(tǒng)來說是一個真正的游戲規(guī)則改變者，因為它將使它更加面向未來。
明暗模式下的語義顏色 Primary.Background
如果我們將來要更新顏色，使用語義顏色也會變得更容易。假設(shè)我們想要將我們的主色更改為藍色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍色”。與該顏色相關(guān)的所有語義顏色也將神奇地更新。另一種情況可能是更新特定 UI 元素的顏色，例如按鈕，而無需觸摸使用紫色顏色的其他元素。
在這種情況下，我們只需要更新 ButtonBackground.Primary 顏色，非常簡單。如果沒有該系統(tǒng)，更新顏色將需要經(jīng)過大量 QA 以確保將更改應(yīng)用到任何地方。
這個系統(tǒng)似乎很容易使用，但設(shè)計師仍然有一些問題：
為了幫助設(shè)計師選擇顏色，我們創(chuàng)建了一個交互式指南，列出了所有可能的顏色組合。我們在 figma 原型中創(chuàng)建了這個指導(dǎo)原則，每次更改設(shè)計系統(tǒng)顏色時都會更新該規(guī)范。它突出了允許的語義顏色組合，以最大限度地保持一致性。
點擊可以查看大圖Figma 中內(nèi)置的語義色彩交互指南
采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化：
1）我們從“Foundation”庫中提取顏色，并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開關(guān)功能輕松地將設(shè)計文件從? Light 切換到 ? Dark 模式。這也使庫更輕且更易于維護。
2）語義顏色已在我們的 iOS 和 Android 應(yīng)用程序上成功實現(xiàn)，我們現(xiàn)在正在努力在我們網(wǎng)絡(luò)平臺上使用相同的系統(tǒng)。我們很快就會有一個集中的配色方案來處理所有系統(tǒng)上的顏色。
總結(jié)下今天學(xué)到的內(nèi)容：
（授權(quán)截圖）
作者：Fabien Gavinet，譯者：彩云Sky
原文鏈接：https://medium.com/getaround-eu/colors-that-make-sense-505d0f3509c1
本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
2024年，行業(yè)經(jīng)歷了飛書裁員、Salesforce視覺更新、釘釘商業(yè)化等重大事件，這些變化不僅影響了設(shè)計師的職業(yè)發(fā)展，也重塑了B端設(shè)計的市場格局。站在2025年的起點，本文將深入探討B(tài)端設(shè)計的未來趨勢，供大家參考。
每一年，我都有一個“任務(wù)”，為過去一整年的 B 端設(shè)計師進行匯報。
一方面是給大家匯報過去一整年瞬息變化的市場，同時呢也想聊聊站在我的視角當中，未來一整年的行業(yè)發(fā)展趨勢，以及我自己的判斷。
那今年也不例外，在今年整體行業(yè)的大背景下，我們究竟應(yīng)該何去何從？想坐下來靜靜的和大家聊聊～
今天我們主要聊三個方面：2024 B 端行業(yè)大事件、當前整體環(huán)境、2025 年 B 端設(shè)計趨勢判斷，文章有些長，內(nèi)容稍干，大家耐心觀看～
在回憶過去一整年時，我會覺得有幾件事情是非常重要，因此在這里提出給大家進行分享。
在 2024 年年初，飛書裁員，據(jù)說設(shè)計師裁員高達 60%，用研100%… 這一件事帶來了一系列的連鎖反應(yīng)。
首先是市場會覺得設(shè)計并沒有價值，B 端設(shè)計沒有價值，設(shè)計師只是一個作圖的工具。
因為飛書在我看來之前是異常重視用戶體驗，從我們梳理他們的設(shè)計改版開始，你會發(fā)現(xiàn)整個管理后臺產(chǎn)品都在往著好的方向發(fā)展。
但即使這樣，設(shè)計師也被裁員，會讓我們感到困惑，問題到底出在哪里？
同時，這樣大量且優(yōu)質(zhì)的設(shè)計師被裁過后，也會造成行業(yè)的踩踏效應(yīng)。對于普通的設(shè)計師而言，行業(yè)內(nèi)卷，求職會異常艱難，相信在那段時間求職的同學(xué)、特別是在北京的同學(xué)都會有感悟，真的是異常艱難。
在五月份時，沉寂許久的 Salesforce 迎來了其新版本的視覺更新，這是 Salesforce 成立以來，做的最大維度的更新。
首先整體頁面樣式經(jīng)歷了調(diào)整，從之前帶有上世紀 90 年代風(fēng)格轉(zhuǎn)變?yōu)楦鼮槌墒臁⑸虅?wù)化的風(fēng)格，這使得整個界面的協(xié)調(diào)性得以增強，這也符合目前 B 端產(chǎn)品的視覺風(fēng)格發(fā)展趨勢。
其次頁面之中有效減少了信息干擾，讓頁面內(nèi)容能夠清晰地呈現(xiàn)于用戶眼前。
同時針對元素圓角，將其增大。不過就我個人而言，不太欣賞整體圓角加大的設(shè)計，因為感覺這與 Salesforce 的整體品牌形象不夠契合。
最后會發(fā)現(xiàn)，這次修改主要集中在界面樣式方面，對信息結(jié)構(gòu)以及界面布局并沒有作出大規(guī)模的變動，我猜測他們是不敢做、也不能做。一個小的改動對于 Salesforce 這個龐然巨獸來說影響都會非常的大。
這里，想和大家一同聊聊 Salesforce 更新的原因竟是什么？
我認為，一方面是產(chǎn)品自身迭代的內(nèi)在需求，確實需要進行 Style 層面的更新維護；
另一方面則是為新推出的 AI 功能進行鋪墊，想試圖借助嶄新的視覺形象，吸引更多用戶去使用 AI 功能。這也是很多產(chǎn)品更新常用的手段，比如早些年的微信也經(jīng)常這樣用游戲來吸引用戶進行升級。
在我們看來，一個良好的 B 端產(chǎn)品，一定是需要擁有更理想的商業(yè)模式，而釘釘?shù)纳虡I(yè)化就顯得更為順利。
釘釘自從在阿里被獨立出過后，幾次發(fā)布會都在強調(diào)自己的在商業(yè)模式上的進展和變化。
從整體來看會發(fā)現(xiàn)釘釘對于用戶的態(tài)度也會有所轉(zhuǎn)變，從原來 以“老板為核心”變?yōu)楝F(xiàn)在以“要考慮員工感受”，也說明整個 B 端產(chǎn)品整體的發(fā)展路徑就應(yīng)該如此。
所以很多企業(yè)都是在產(chǎn)品初期，經(jīng)歷過混沌的時期過后才會需要 B 端設(shè)計師。
聊到公眾號文章，也順帶說說今年的設(shè)計氛圍和往年相比是更差的。
你會發(fā)現(xiàn)大家都不太愿意更新文章，無論是設(shè)計大會又或者是設(shè)計文章分享，最近能閱讀的東西真的很少，這會導(dǎo)致大家的交流異常的匱乏。
從我整理過去 B 端行業(yè)的資料來看，這兩年的資源更新是非常少的。
我們簡單聊聊市場環(huán)境，對于整個互聯(lián)網(wǎng)行業(yè)來說，你會發(fā)現(xiàn)整體都是異常蕭條。
無論是 C 端產(chǎn)品的增長乏力也好、又或者是 B 端產(chǎn)品的行業(yè)不景氣也罷，總之過去一年大家整體過得都比較艱難。對于設(shè)計行業(yè)的各位來說，我們目前的狀態(tài)其實都是茍著～
因為設(shè)計師很難做到雪中送炭，也就是通過一個設(shè)計點，真正為企業(yè)、為產(chǎn)品創(chuàng)造更多的收入，所以這也就導(dǎo)致我們目前的處境十分尷尬。
你會發(fā)現(xiàn)大家在各個媒體上都在勸退 B 端設(shè)計師，說這是一個夕陽行業(yè)。
但這里想對剛?cè)胄械男氯硕嗾f兩句。目前經(jīng)濟環(huán)境，任何行業(yè)都會有勸退的人，你要做的是去分析目前自己的選擇，也就是如果我不做 B 端設(shè)計師，我還有其他什么選擇？
比如你學(xué)習(xí)的是 環(huán)藝設(shè)計、城市規(guī)劃設(shè)計 等相關(guān)專業(yè)，又或者是你自己已經(jīng)在 B 端工作多年，那可能 B 端設(shè)計師或許還是一個相對求職容易的行業(yè)，尋找明確的方向，就能獲得行業(yè)當中的一些回報。
本來想說很多，但想想還是算了，今年的就業(yè)形勢確實有所回暖，我們可以期待一波～
對于 2025 年，我們會認為有以下幾個發(fā)展趨勢：
AI是目前行業(yè)當中最迅猛的趨勢，B端產(chǎn)品也不例外。
對于很多B端產(chǎn)品而言，AI的出現(xiàn)優(yōu)化了用戶在日常工作當中使用繁瑣的問題，在許多B端產(chǎn)品當中，都會把AI當做是最為重要的產(chǎn)品功能。
比如我們之前總結(jié)過的：Salesforce、金碟、飛書，又或者是在阿里、騰訊內(nèi)部的很多系統(tǒng)，都會通過AI的方式加以介入，來確保產(chǎn)品的高效使用。
在未來一年，我們要多去考慮 AI與語音交互、低代碼產(chǎn)品、配置類系統(tǒng)之間的碰撞，在未來肯定會有著更為不錯的發(fā)展。
行業(yè)當中有著非常多的無代碼產(chǎn)品，原因在于國內(nèi)的大多數(shù)系統(tǒng)，我們會發(fā)現(xiàn)通常都需要通過定制化的方式來進行處理。為此，行業(yè)當中就出現(xiàn)了較多的無代碼產(chǎn)品，將產(chǎn)品的功能提供給用戶進行配置和相應(yīng)使用。比如常見的有釘釘宜搭，又或者是騰訊的微搭等等。這類產(chǎn)品的類型非常多。
但在行業(yè)中，有人會覺得這類型的產(chǎn)品不適用于小團隊的管理。因為如果本身是小團隊，需求整體沒有那么大。因此在行業(yè)里還會存在像多維表格這樣的系統(tǒng)來進行相應(yīng)的呈現(xiàn)。
所以我們會發(fā)現(xiàn)，這類型的產(chǎn)品其實是市場大環(huán)境所需。在未來一年，個人認為類似多維表格、Airtable 這類型的產(chǎn)品會更受大家歡迎。因為它們能夠很流暢地與 AI 進行結(jié)合，同時整個產(chǎn)品的規(guī)模結(jié)構(gòu)也沒有那么大，更容易被用戶所接受。
產(chǎn)品出海是一個老生常談的話題，很早之前我們就有談到。由于國內(nèi)市場競爭激烈，而且對于應(yīng)對市場需求已經(jīng)有了豐富的經(jīng)驗，很多企業(yè)將自己方向轉(zhuǎn)向國外。比如最早飛書推出的國際版本Lark，ONES推出偏向研發(fā)管理相關(guān)的國際版本，以及小鵝通推出的付費國際版（這還挺影響我們國外同學(xué)學(xué)習(xí)聽課…）
由于國內(nèi)產(chǎn)品研發(fā)效率快，人力成本相對較低，所以能以更低的價格吸引到國外的用戶。與此同時，國外對于整個產(chǎn)品付費的意愿比較高，產(chǎn)品出海有著廣闊的發(fā)展空間。
除了以上提到的互聯(lián)網(wǎng)產(chǎn)品出海外，我發(fā)現(xiàn)很多國內(nèi)的越來越多的企業(yè)也開始跨國經(jīng)營。面對出海發(fā)展的挑戰(zhàn)，數(shù)字化平臺的建設(shè)和應(yīng)用就成了這些企業(yè)的剛需，會去設(shè)計開發(fā)相應(yīng)的海外系統(tǒng)和軟件。
所以在目前的整個求職階段中，如果你在沿海城市，在工作中一定要考慮到英文的環(huán)境。在你的作品集里也可以適當?shù)卣故疽恍в杏⑽牡捻椖浚⒄故咀约旱膰H化和本土化的設(shè)計能力
除了常規(guī)的產(chǎn)品出海，還會有很多跨境電商相關(guān)的業(yè)務(wù)，這些業(yè)務(wù)也需要對應(yīng)的管理系統(tǒng)。
比如行業(yè)當中常見的貨代，需要有與之對應(yīng)的海外倉儲物流相關(guān)系統(tǒng)來配套。而且國內(nèi)的很多相關(guān)產(chǎn)品其實都需要海外版本進行對應(yīng)的維護。在這些系統(tǒng)當中，我見過最為奇特的便是國外網(wǎng)紅的 MCN 系統(tǒng)。
因為很多電商類的產(chǎn)品都需要考慮廣告投放相關(guān)事宜，因此會使用對應(yīng)的 MCN 系統(tǒng)來管理不同的網(wǎng)紅。這類系統(tǒng)其實在海外場景當中是非常常見的。所以很多從事跨境電商相關(guān)業(yè)務(wù)的產(chǎn)品想要拓展海外市場，可以去考慮跨境電商相關(guān)業(yè)務(wù)拓展。
本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】，微信公眾號：【CE青年Youthce】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
隨著電動車的發(fā)展，駕艙也越來越智能，對設(shè)計的要求也越來越高。從一開始的只是展示信息，到現(xiàn)在的情感陪伴、多感官交互，這篇文章，我們來看看都有哪些變化。
在科技飛速發(fā)展的今天，汽車已不再僅僅是一種交通工具，更是人們生活中的重要伙伴。隨著人機交互技術(shù)的不斷進步，智能駕艙多感官交互正從滿足傳統(tǒng)的安全駕駛需求逐漸轉(zhuǎn)變?yōu)樘峁┯星楦械闹悄?AI 陪伴需求，為駕駛者帶來全新的出行體驗。
在過去，智能駕艙的主要功能是確保駕駛的安全。通過先進的傳感器、顯示屏和控制系統(tǒng)，為駕駛者提供車輛狀態(tài)信息、導(dǎo)航指引和安全警示等。例如，高清數(shù)字儀表盤能夠清晰地顯示車速、油耗等關(guān)鍵數(shù)據(jù)，幫助駕駛者隨時掌握車輛運行情況；倒車影像和雷達系統(tǒng)可以在倒車時提供清晰的后方視野，降低碰撞風(fēng)險。然而，這種以安全為核心的智能駕艙雖然滿足了基本的駕駛需求，但缺乏情感互動和個性化體驗。
如今的智能駕艙多感官交互技術(shù)能夠?qū)崿F(xiàn)對駕駛者情感狀態(tài)的識別。車內(nèi)的攝像頭和傳感器可以捕捉駕駛者的面部表情、語音語調(diào)、身體動作等信息，分析其情緒變化。當檢測到駕駛者疲勞時，智能 AI 會發(fā)出溫馨的提醒，建議休息或播放輕松的音樂來緩解疲勞；當駕駛者感到焦慮或緊張時，智能 AI 可以通過調(diào)節(jié)燈光顏色、播放舒緩的音樂或者講述有趣的故事來幫助駕駛者放松心情。
智能 AI 還能根據(jù)駕駛者的情緒做出個性化的回應(yīng)。例如，如果駕駛者心情愉快，智能 AI 可能會播放歡快的音樂并與駕駛者進行愉快的交流；如果駕駛者情緒低落，智能 AI 則會給予安慰和鼓勵，讓駕駛者感受到被理解和關(guān)心。
基于對駕駛者的了解，智能駕艙可以提供高度個性化的交互體驗。智能 AI 會記住駕駛者的喜好，如喜歡的音樂類型、溫度設(shè)置、座椅調(diào)節(jié)角度等，并在駕駛者上車時自動調(diào)整到相應(yīng)的狀態(tài)。這種個性化的服務(wù)讓駕駛者感受到車輛是為自己量身定制的，增強了駕駛者與車輛之間的情感連接。
智能 AI 還可以根據(jù)駕駛者的日常習(xí)慣和興趣愛好提供個性化的建議和服務(wù)。比如，如果駕駛者經(jīng)常在周末去郊外游玩，智能 AI 可能會在周末來臨前推薦適合的郊游地點和路線；如果駕駛者喜歡聽某一類型的廣播節(jié)目，智能 AI 會在合適的時間自動播放該節(jié)目。
智能駕艙不再是一個孤立的空間，而是可以與外界進行社交互動的平臺。通過車聯(lián)網(wǎng)技術(shù)，駕駛者可以與家人、朋友保持聯(lián)系，分享自己的行程和感受。例如，在行駛過程中，駕駛者可以通過語音指令發(fā)送消息給朋友，或者與家人進行視頻通話。
智能 AI 還可以組織車內(nèi)的社交活動，增強駕駛者與乘客之間的互動。例如，在長途旅行中，智能 AI 可以發(fā)起游戲或話題討論，讓大家在旅途中充滿樂趣。
對于長期駕駛者來說，智能駕艙可以成為一個陪伴成長與學(xué)習(xí)的伙伴。智能 AI 可以記錄駕駛者的駕駛習(xí)慣和技能提升過程，提供針對性的駕駛建議和培訓(xùn)。例如，當駕駛者在某個駕駛操作上存在不足時，智能 AI 會及時指出并提供改進方法。
智能 AI 還可以提供各種知識和信息，滿足駕駛者的學(xué)習(xí)需求。比如，在等待紅綠燈的間隙，智能 AI 可以播放一段新聞、歷史故事或者科普知識，讓駕駛者在碎片化的時間里不斷學(xué)習(xí)和成長。
高清顯示屏和數(shù)字儀表盤不僅可以提供車輛信息，還可以展示溫馨的畫面和個性化的主題，根據(jù)駕駛者的情緒和喜好進行變化。例如，當駕駛者心情愉悅時，顯示屏可以呈現(xiàn)出絢麗的色彩和歡快的動畫；當駕駛者需要放松時，顯示屏可以切換到寧靜的自然風(fēng)景畫面。
氛圍燈的運用也為情感交互增添了色彩。不同顏色的氛圍燈可以反映不同的情緒狀態(tài)，營造出相應(yīng)的氛圍。比如，藍色的氛圍燈可以帶來寧靜的感覺，紅色的氛圍燈可以增加活力和激情。
高品質(zhì)的音響系統(tǒng)可以播放各種類型的音樂和聲音，滿足駕駛者不同的情感需求。智能 AI 可以根據(jù)駕駛者的情緒選擇合適的音樂播放列表，或者根據(jù)場景自動調(diào)整音樂的風(fēng)格和音量。
語音交互更加自然和親切。智能 AI 的語音不再是機械的合成音，而是具有情感色彩的聲音，能夠更好地與駕駛者進行交流和互動。
座椅的按摩功能和溫度調(diào)節(jié)可以根據(jù)駕駛者的身體狀況和情緒進行調(diào)整，提供舒適的駕駛體驗。例如，當駕駛者感到疲勞時，座椅可以自動啟動按摩功能，幫助駕駛者放松身體。
方向盤和控制面板的觸摸反饋更加靈敏和個性化，讓駕駛者在操作過程中感受到與車輛的互動。
香氛系統(tǒng)可以釋放不同的氣味，調(diào)節(jié)車內(nèi)的氛圍。智能 AI 可以根據(jù)駕駛者的情緒和喜好選擇合適的香氛，如清新的花香可以帶來愉悅的感覺，舒緩的草本香可以幫助駕駛者放松心情。
隨著技術(shù)的不斷進步，智能駕艙多感官交互將在滿足情感智能 AI 陪伴需求方面發(fā)揮更大的作用。未來的智能駕艙將更加智能化、個性化和人性化，成為駕駛者真正的情感伙伴。汽車制造商和科技企業(yè)將不斷創(chuàng)新和完善多感官交互技術(shù)，為駕駛者帶來更加豐富、溫暖的出行體驗。
從滿足安全駕駛需求到提供有情感的智能AI陪伴需求，智能駕艙多感官交互的發(fā)展為汽車行業(yè)帶來了新的機遇和挑戰(zhàn)。通過情感識別、個性化交互、增強社交互動和多感官技術(shù)的支持，智能駕艙將成為駕駛者生活中不可或缺的一部分，為人們的出行帶來更多的樂趣和溫暖。
本文由 @INFP怡伶設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
在設(shè)計領(lǐng)域，有些原則雖然我們經(jīng)常使用，卻可能并不熟悉其背后的理論。馮·雷斯托夫效應(yīng)（Von Restorff Effect）就是這樣一種現(xiàn)象，它解釋了為何在一系列相似元素中，獨特的那個更容易被記住。
在我們的日常生活中，心理學(xué)的影響無處不在。它像一把神奇的鑰匙，能打開人們內(nèi)心深處的秘密。作為設(shè)計師，我們更應(yīng)該掌握并運用心理學(xué)，將其融入我們的設(shè)計中，從而創(chuàng)造出更具有吸引力和影響力的作品。
設(shè)計并不僅僅是形狀、顏色和布局的組合，更是對人類心理的探索和解讀。我們的每一個設(shè)計決策，都與用戶的心理狀態(tài)和認知過程息息相關(guān)。如何抓住用戶的眼球、引發(fā)他們的興趣、引導(dǎo)他們的行為，這些都是我們需要深入研究的課題。
在眾多的心理學(xué)原理中，馮·雷斯托夫效應(yīng)（Von Restorff Effect）是一個值得設(shè)計師們關(guān)注的設(shè)計法則。這個效應(yīng)揭示了一個有趣的現(xiàn)象：特殊的東西往往比普通的東西更容易被人記住。這就意味著，在設(shè)計中，我們要制造一些“特殊”的元素，使它們能夠從眾多的信息中脫穎而出，成為用戶關(guān)注的焦點。今天筆者就帶大家了解一下設(shè)計中常用的心理學(xué)之一馮·雷斯托夫效應(yīng)。
在1933年的德國，一個名叫海德維希·馮·雷斯托夫的醫(yī)生開啟了一項改變我們對人類記憶理解的實驗。她深入探索了當人們面對一系列物品時，他們的記憶是如何運作的。通過精心設(shè)計的對比實驗，她發(fā)現(xiàn)了一個令人驚奇的現(xiàn)象：在一組物品中，那個最特別的物品總是更容易被人們記住。
這一發(fā)現(xiàn)為我們揭示了一個核心事實：特別的事物更能吸引我們的注意力，并在我們的記憶中留下深刻的印記。想象一下，在一組物品中，如果有一個被聚光燈照亮，那么相比其他未被照亮的物品，它無疑會成為人們關(guān)注的焦點，從而在記憶中留下更深的痕跡。
這個人類行為和記憶的規(guī)律后來被命名為“馮·雷斯托夫效應(yīng)”。這一效應(yīng)不僅僅是一個簡單的觀察，它實際上是人類行為學(xué)和心理學(xué)領(lǐng)域的一項重要研究成果。隨著時間的推移，這一效應(yīng)逐漸被應(yīng)用于美學(xué)和設(shè)計領(lǐng)域，為設(shè)計師們提供了全新的視角和工具，以創(chuàng)造出更具吸引力和影響力的作品。
自馮·雷斯托夫效應(yīng)被正式確立命名以來，眾多科研學(xué)者在此基礎(chǔ)上進行了更深入的研究，他們不僅剖析了這一效應(yīng)的內(nèi)在機制和影響因素，還探討了其在不同情境下的應(yīng)用。隨著研究的深入，對于這一效應(yīng)的理解也在不斷加深，并衍生出了許多其他的理論和學(xué)術(shù)觀點。
馮·雷斯托夫效應(yīng)為我們提供了一個獨特的視角，幫助我們更好地理解人類記憶的運作方式。通過運用這一原理，我們可以在設(shè)計中有意識地創(chuàng)造出令人難忘的元素，從而與觀眾建立更深刻的聯(lián)系。無論是在廣告、品牌推廣還是產(chǎn)品設(shè)計中，突出特別的元素都是一種有效的策略，可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮·雷斯托夫效應(yīng)，又被稱為隔離效應(yīng)或新奇效應(yīng)，揭示了人們在記憶中的偏好。當情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時，這種效應(yīng)尤為明顯。
在當今信息爆炸的時代，用戶往往沒有耐心去仔細查找信息，而是快速掃視。因此，設(shè)計師需要巧妙地運用萊斯托夫效應(yīng)，使關(guān)鍵內(nèi)容從繁雜的信息中脫穎而出，吸引用戶的目光。
統(tǒng)一性是設(shè)計的基礎(chǔ)，但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運用顏色、形狀、布局等元素，我們可以創(chuàng)造出與眾不同的視覺效果，引導(dǎo)用戶的視線。通過巧妙地突出關(guān)鍵內(nèi)容，我們能夠更好地與用戶溝通，引領(lǐng)他們的注意力，為業(yè)務(wù)創(chuàng)造更大的價值。
在界面設(shè)計中，我們常常會遇到這樣的情況：在同類型的元素中，某一元素與其他元素存在顯著差異，這種現(xiàn)象我們稱之為“背景不同”。為了使某個模塊或元素在用戶心中留下深刻印象，我們可以利用環(huán)境差異來提高其識別度和記憶度。這種手法在UI設(shè)計中被廣泛應(yīng)用，它利用了馮·雷斯托夫效應(yīng)，能有效吸引用戶點擊。
例如淘寶底部標簽欄中的四個ICON，唯獨首頁的第一個ICON（品牌logo）風(fēng)格與眾不同。即使離開了該頁面，這個特殊的ICON依然讓人印象深刻，餓了么第二的圖標也是如此。因此，我們在設(shè)計界面時，若想吸引用戶的注意或提高點擊量，可以打破常規(guī)，讓特定元素在同背景下脫穎而出。
再比如下圖的個人中心界面，功能入口模塊均采用ICON展示，而游樂場模塊卻采用了特殊的布局和設(shè)計。因此，當用戶進入個人中心時，最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們在進行廣告和活動投放時，需要特別設(shè)計的原因。
當遇到與過去經(jīng)驗顯著不同的情況時，我們的大腦會產(chǎn)生一種特殊的效應(yīng)，這種效應(yīng)被稱為“經(jīng)驗不同”的效應(yīng)。例如，在騎自行車的過程中，我們通常習(xí)慣于左手控制左把手，右手控制右把手。但是，如果我們嘗試用雙手交叉的方式來騎車，結(jié)果很可能會摔倒。從此以后，每當我們聽到或描述有關(guān)騎車摔倒的事情時，我們都會立刻想起那次“經(jīng)驗不同”的嘗試。
同樣地，淘寶和京東在618、雙十一等大型促銷活動時，會選擇重新設(shè)計他們的首頁。與往常的設(shè)計相比，這些新的首頁設(shè)計通常會增加更多的促銷入口，甚至改變ICON的風(fēng)格。從馮·雷斯托夫效應(yīng)的角度來看，這種與以往不同的設(shè)計能夠更好地吸引用戶的注意力，加深用戶的記憶，并擴大活動對用戶的影響力。
在視覺層面難以實現(xiàn)強烈差異化時，我們可以通過功能來實現(xiàn)有效的隔離。以微信為例，其置頂功能允許用戶將好友或群聊消息置于頂部，從而與其他信息區(qū)分開來。這種設(shè)計確保了關(guān)鍵信息的優(yōu)先級，使用戶能夠更快速地找到和關(guān)注所需內(nèi)容。通過巧妙地運用功能，我們可以輕松地解決視覺上的一致性與差異化之間的矛盾，為用戶提供更加流暢和個性化的體驗。
靜態(tài)頁面容易讓人視覺疲勞，動效能夠更加生動有趣地展示內(nèi)容，引導(dǎo)用戶更加關(guān)注頁面。相較于被動接受信息，動效能夠更加有效地吸引用戶注意。
隨著Banner自動輪播的普及，用戶對其的吸引力逐漸降低。面對不斷變化的廣告，用戶不再耐心地逐個瀏覽。當無法獲取所需信息時，他們的視線會迅速轉(zhuǎn)向其他區(qū)域。
為了應(yīng)對這一挑戰(zhàn)，騰訊視頻首頁的Banner采用了背景聯(lián)動的形式。這意味著頭部背景色會根據(jù)Banner圖片的色調(diào)進行變化，從而擴大了內(nèi)容的變化空間。這種設(shè)計不僅使廣告更加引人注目，還使用戶更容易被吸引并保持關(guān)注。
頻道頁的入口方式多種多樣，金剛區(qū)icon無疑是最優(yōu)選擇。若要突出展示某些業(yè)務(wù)功能，單一的icon配合動效可有效吸引用戶關(guān)注。此策略簡單高效，有助于用戶快速找到所需內(nèi)容。
在設(shè)計界面時，我們追求的是在有限的空間內(nèi)展示更多的有效信息，避免信息的無效重復(fù)。但在電商平臺中，尤其是涉及到利益點時，我們需要確保信息具有足夠的價值感和吸引力。
以智行APP開通會員為例，領(lǐng)神卡作為核心賣點被突出展示，采用了平鋪展開的方式，從而突顯其價值。相對其他權(quán)益則相應(yīng)地進行了弱化處理，以保持整體信息的清晰度和重點。這樣的設(shè)計既充分利用了屏幕空間，又確保了用戶能夠快速了解到核心的利益點。
頁面信息層次分明，信息層級越高，用戶感知越強烈，越能吸引注意。例如，模態(tài)彈窗處于最上層，與內(nèi)容層完全隔離，用戶無法忽視。其次是非模態(tài)懸浮層，與內(nèi)容層隔離，但不影響用戶操作。還有側(cè)邊懸浮按鈕、頂部或底部懸浮橫條等。
受“危險按鈕”的影響，過去設(shè)計師常常給予負向情緒操作很高的視覺層級，例如退出登錄。這樣的設(shè)計意圖是警示用戶操作危險，但視覺上卻過于強調(diào)，甚至有些“喧賓奪主”。近年來，移動端設(shè)計中這種矛盾逐漸減少，但仍然存在。與其強調(diào)操作的難度和危險性，不如考慮如何讓用戶自然地忽視這些操作，減少不必要的干擾。從馮·雷斯托夫效應(yīng)來看，這種設(shè)計方式有本末倒置之嫌，應(yīng)盡量避免。
新手設(shè)計師常常會遇到想要突出所有元素，但最終無法突出任何一項的問題。頁面中的特異點應(yīng)該屬于少數(shù)，如果所有元素都想做得不一樣，都會讓頁面整體視覺效果崩潰。因此，在設(shè)計中要學(xué)會取舍，選擇最重要的元素進行突出，才能達到最佳的視覺效果。
總的來說，將馮·雷斯托夫效應(yīng)運用到設(shè)計中，能幫助我們創(chuàng)造出更具吸引力、更容易被記住的設(shè)計。但請記住，任何設(shè)計決策都應(yīng)以用戶為中心，了解他們的需求和心理是關(guān)鍵。只有這樣，我們才能真正創(chuàng)造出打動人心的設(shè)計。
專欄作家
大漠飛鷹；人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
Bento UI其實流行已經(jīng)有一段時間了，但是近一兩年來才展現(xiàn)出發(fā)展的勢頭，Bento UI的體驗和用戶友好性在設(shè)計中的價值不斷被認識與驗證。本文就Bento UI設(shè)計風(fēng)格進行分析總結(jié)，希望能給你一些啟發(fā)。
Bento UI的流行已經(jīng)有一段時間，但直到最近一兩年，它才真正展現(xiàn)出強勁的發(fā)展勢頭。這是因為設(shè)計師們逐漸認識到，Bento UI的體驗和用戶友好性在設(shè)計中的價值。
關(guān)于Bento UI的起源存在一些爭議，就像許多設(shè)計趨勢一樣。有人認為Bento UI的成功應(yīng)歸功于蘋果公司，因為蘋果在其UI元素中采用了類似的風(fēng)格。另一些人則指出，微軟的Metro UI實際上就是Bento UI的一種體現(xiàn)。不管它的來源如何，毋庸置疑，Bento UI正變得越來越受歡迎。隨著其使用量的增加，它作為一種UI風(fēng)格的可靠性也在不斷得到驗證。
Bento UI 的靈感來自便當盒（一種精心布置且視覺上吸引人的日本料理）概念，提供了令人耳目一新的設(shè)計。它不僅僅是一個設(shè)計框架，而是一種兼顧用戶需求和視覺吸引力的整體理念。這篇文章讓我?guī)闵钊胙芯恳幌?Bento UI 如何實現(xiàn)實用性與美觀的相互融合。
Bento UI設(shè)計的優(yōu)點多種多樣，它將實用性和美學(xué)完美融合，為用戶帶來出色的體驗。
1. 強調(diào)模塊化和可重用性： Bento UI將界面元素拆分為模塊化的組件，使得設(shè)計師可以輕松地組合、調(diào)整和重用這些組件，從而提高了設(shè)計效率和一致性。
2. 簡潔而美觀的外觀： Bento UI注重簡約、現(xiàn)代和美學(xué)的結(jié)合，帶來干凈、清晰且視覺吸引人的界面。這有助于提升用戶的第一印象，增加用戶停留時間和參與度。
3. 良好的用戶體驗： Bento UI注重用戶導(dǎo)向，通過清晰的布局、直觀的導(dǎo)航和有趣的交互元素，為用戶創(chuàng)造出愉悅和流暢的瀏覽體驗。
4. 強化品牌形象： Bento UI可以根據(jù)品牌的風(fēng)格和價值觀進行定制，從而增強品牌在用戶心中的形象和認知。一致的設(shè)計元素有助于塑造品牌的獨特性。
5. 強調(diào)交互和動畫： Bento UI強調(diào)微交互和動畫效果，為用戶創(chuàng)造出更加生動和有趣的互動體驗。這不僅吸引用戶的注意，還增強了用戶的參與感。
6. 提升移動設(shè)備體驗： Bento UI通常是響應(yīng)式的，可以自適應(yīng)不同的屏幕尺寸和設(shè)備類型。這為移動用戶提供了更好的體驗，無論是在手機、平板還是桌面電腦上。
要設(shè)計出成功的Bento UI，首先需要理解其核心原則。簡約、模塊化和活力交互是Bento UI的靈魂。簡約的設(shè)計風(fēng)格能夠使界面更加清晰明了，而模塊化的組件則讓設(shè)計師能夠靈活構(gòu)建頁面，快速滿足不同需求?；盍换?，包括動畫效果和微交互，能夠增強用戶與界面的互動感，提升用戶體驗。
在Bento UI中，清晰的布局是至關(guān)重要的。界面元素應(yīng)該有明確的排列，避免過于擁擠和混亂。通過合理的分區(qū)和對齊，可以將信息有序地呈現(xiàn)給用戶，使其能夠快速獲取所需信息。此外，清晰的布局還能夠增強用戶的舒適感，使其更樂意與界面互動。
Bento UI倡導(dǎo)使用鮮明的顏色和獨特的圖標設(shè)計。色彩可以傳達情感和品牌特點，因此選擇適合項目風(fēng)格的顏色是至關(guān)重要的。同時，圖標作為界面的視覺元素，能夠直觀地傳達信息，提高用戶的使用效率。確保顏色和圖標的使用既美觀又有意義，能夠為用戶帶來更好的視覺體驗。
Bento UI的動畫效果和微交互是設(shè)計中的亮點之一。動畫可以增強用戶與界面的互動感，使用戶感受到界面的活力。微交互則能夠提供反饋，引導(dǎo)用戶完成操作。設(shè)計師可以巧妙地運用過渡效果、淡入淡出和其他動畫元素，使界面變得更加生動有趣。
在整個設(shè)計過程中，保持一致性和用戶友好性至關(guān)重要。界面的風(fēng)格、字體和元素應(yīng)該保持統(tǒng)一，以確保用戶在瀏覽不同頁面時能夠感受到一致的視覺效果。另外，界面的導(dǎo)航和操作也應(yīng)該簡單明了，讓用戶能夠輕松找到所需內(nèi)容。
一些案例：
iPhone 14 Pro介紹頁面中，您將看到以這種方式呈現(xiàn)的高級功能介紹，并通??過多種視覺處理來保持有趣。雖然有不同的視覺處理，但由于使用大小和漸變文本有效地引導(dǎo)用戶的眼睛，內(nèi)容不會相互沖突。
Bolt對每個圖塊使用了更加一致的視覺方法，以使內(nèi)容更易于瀏覽。這對于傳達功能并引導(dǎo)他們在最后查看更多內(nèi)容非常有用！
Linear的設(shè)計師也采用了Bento UI的設(shè)計風(fēng)格，我個人很喜歡他們這樣的設(shè)計。
Iconwerk使用Bento UI風(fēng)格來展示他們最好的圖標設(shè)計。每個內(nèi)容框都保持得非常小，這樣當它們?nèi)糠旁谝黄饡r，就不會感到擁擠。
Traf使用Bento UI以時尚的深色主題設(shè)計來布局他的作品集作品。
是否選擇應(yīng)用Bento UI取決于您的項目需求和目標。如果您追求引人入勝的界面、活力的交互和用戶友好性，Bento UI可能是一個理想的選擇。特別是對于品牌展示、產(chǎn)品推廣和互動性強的網(wǎng)頁，Bento UI能夠為您的項目增添獨特的魅力和吸引力。然而，設(shè)計師應(yīng)該根據(jù)項目特點，靈活運用Bento UI的元素，以確保最終的設(shè)計能夠滿足用戶需求并達到預(yù)期效果。
但是Bento UI并非適用于所有項目。它最適合于擁有簡潔層次結(jié)構(gòu)的項目，因此，如果您的項目層次結(jié)構(gòu)較為復(fù)雜，Bento UI可能并不適合。不過，如果您的項目存在復(fù)雜層次結(jié)構(gòu)，或許是時候改變這一現(xiàn)狀了。
Bento UI的設(shè)計和感覺極具現(xiàn)代氛圍，我預(yù)測它將在未來一段時間內(nèi)持續(xù)受歡迎。隨著蘋果等專業(yè)設(shè)計團隊的使用還有諸如Vision Pro等新技術(shù)的出現(xiàn)，它甚至可能發(fā)展成我們目前尚未能夠預(yù)見的新形態(tài)。
Bento UI是一種引人注目的設(shè)計風(fēng)格，簡約美學(xué)、動感交互和模塊化創(chuàng)造力為設(shè)計帶來了新的可能性。作為一種新興的設(shè)計趨勢，Bento UI正在成為越來越多設(shè)計師和品牌的選擇。
通過將Bento UI的理念融入設(shè)計中，我們能夠為用戶創(chuàng)造出令人難忘的體驗，將品牌價值傳達得更加生動而深刻，從而實現(xiàn)更好的用戶參與和品牌傳播效果。
本文由 @收手的阿祖 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
蘭亭妙微(www.lmkl.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設(shè)計的小編 http://www.lmkl.com.cn
