首頁

2025 年 B 端界面設(shè)計的最新趨勢與展望

ui設(shè)計分享達(dá)人

個性化設(shè)計

  • 打造個體專屬形象1：隨著 “超級個體” 時代的來臨，B 端設(shè)計不再只關(guān)注企業(yè)整體，更注重為個體賦能。如釘釘?shù)绕脚_開始為用戶提供動態(tài)頭像等個性化功能，讓員工能在工作場景中展現(xiàn)獨特個性。
  • 滿足個體情緒需求：通過色彩、插畫等元素營造更具情感氛圍的界面，比如 Teams 和 ONES 等產(chǎn)品利用色彩和插畫設(shè)計，提升用戶對品牌的情感認(rèn)同，使工作不再枯燥。
  • 10_鍓湰.png

視覺設(shè)計創(chuàng)新

  • 漸變色的廣泛應(yīng)用2：漸變色重新定義了 B 端視覺美學(xué)，許多 B 端產(chǎn)品將背景和元素轉(zhuǎn)變?yōu)闈u變色，如 Baklib 官網(wǎng)的淡色背景漸變，既傳達(dá)現(xiàn)代感與科技感，又實現(xiàn)了不同內(nèi)容間的自然過渡。
  • 網(wǎng)格化布局流行2：網(wǎng)格化布局以其結(jié)構(gòu)性受到青睞，像 Magnolia 與 Intercom 等企業(yè)的官網(wǎng)采用此布局，使內(nèi)容分區(qū)明確，優(yōu)化了頁面可讀性與邏輯性。

智能化融入

  • 突出 AI 元素2：AI 已成為 B 端設(shè)計的核心元素，眾多 SaaS 平臺在官網(wǎng)上直接強調(diào)與 AI 相關(guān)的功能，甚至在 Slogan 中加入關(guān)鍵詞，展示企業(yè)的科技實力，讓用戶感受到前沿的科技形象。
  • 智能交互體驗：借助 AI 實現(xiàn)智能提醒、自動推薦等功能，例如一些 B 端辦公軟件可以根據(jù)用戶的使用習(xí)慣和工作流程，自動推送相關(guān)的任務(wù)和文件，提高工作效率。

交互設(shè)計升級

  • 微動效與微交互2：適度的動畫和交互效果能夠吸引用戶注意，增強網(wǎng)站互動性，如在時間軸上滑動的效果、功能版塊的滾動折疊等，讓界面更加生動有趣，提升用戶粘性。
  • 便捷的菜單導(dǎo)航2：折疊加展開的平鋪菜單導(dǎo)航成為主流，清晰直觀，方便用戶快速找到所需信息，提高了信息獲取的速度和便利性。
  • 22.png
展望未來，B 端界面設(shè)計還可能有以下發(fā)展方向：

沉浸式體驗增強

隨著技術(shù)的發(fā)展，B 端界面可能會更多地融入虛擬現(xiàn)實（VR）和增強現(xiàn)實（AR）技術(shù)，為用戶帶來沉浸式的操作體驗。比如在設(shè)計建筑規(guī)劃、機械維修等 B 端應(yīng)用時，用戶可以通過 VR 或 AR 技術(shù)更直觀地進行操作和協(xié)作。

數(shù)據(jù)可視化深化

面對日益增長的數(shù)據(jù)量，數(shù)據(jù)可視化將更加復(fù)雜和精細(xì)。除了常見的圖表和圖形，可能會出現(xiàn)更具創(chuàng)意和互動性的數(shù)據(jù)展示方式，幫助用戶更深入地理解數(shù)據(jù)背后的信息，為決策提供更有力的支持。

跨平臺融合優(yōu)化

企業(yè)使用的設(shè)備和平臺越來越多樣化，未來 B 端界面設(shè)計需要更好地實現(xiàn)跨平臺融合，確保在不同的設(shè)備和操作系統(tǒng)上都能提供一致、流暢的用戶體驗。
總之，2025 年的 B 端界面設(shè)計正朝著個性化、智能化、創(chuàng)新化的方向發(fā)展，未來也將持續(xù)以滿足用戶需求、提升用戶體驗為目標(biāo)，不斷探索和創(chuàng)新。B 端設(shè)計師需要緊跟這些趨勢，才能為企業(yè)創(chuàng)造出更具價值的產(chǎn)品和服務(wù)。
 
評論(0) 瀏覽(427)

解鎖B端按鈕設(shè)計10大密碼

ui設(shè)計分享達(dá)人

 
無法想象沒有按鈕的頁面是什么滋味，那定會像沒有方向盤的汽車，讓人不知所措吧？也無法想象按鈕設(shè)計不恰當(dāng)，會給用戶帶來怎樣的困擾？
 
面對十萬火急的任務(wù)需求，
如果需要調(diào)動全部理性腦，深呼吸三秒，
才能找到想要執(zhí)行操作的按鈕入口，我想這樣的產(chǎn)品設(shè)計是失敗的，是會被用戶所唾棄的。
 
本文將詳細(xì)剖析按鈕的神秘面紗，了解它、研究它，讓按鈕設(shè)計成為產(chǎn)品的得力助手，為我們的產(chǎn)品賦能，為我們的工作提效，下面就讓我們開啟這場神秘之旅吧!
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
目錄
一、按鈕的定義
二、按鈕設(shè)計的種類
三、按鈕設(shè)計的尺寸
四、按鈕的構(gòu)成
五、按鈕設(shè)計的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設(shè)計原則
九、按鈕設(shè)計的注意事項
十、按鈕弱化設(shè)計的六種方式
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
按鈕在我們生活中起著很大的作用，它就像我們的小助手一樣，幫我們一鍵開啟想要的任務(wù)，凡事都能一鍵觸達(dá)。
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
按鈕在UI界面中，是一種界面交互控件，通常以矩形、圓形或其他幾何形狀呈現(xiàn)，具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發(fā)特定的功能或操作，如提交表單、執(zhí)行命令、導(dǎo)航頁面、切換狀態(tài)等。
 
按鈕一般包含文字標(biāo)簽、圖標(biāo)或兩者的組合，以清晰傳達(dá)其功能。
同時，按鈕在不同狀態(tài)下會呈現(xiàn)出不同的視覺效果，如默認(rèn)狀態(tài)、按下狀態(tài)、懸浮狀態(tài)、禁用狀態(tài)等，為用戶提供操作反饋和引導(dǎo)。
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、Antdesign對按鈕的種類劃分：
 
?
 次按鈕
常規(guī)按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠(yuǎn)是最安全的選擇。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
? 
主按鈕
突出“完成”、“推薦”類操作；一個按鈕區(qū)最多使用一個主按鈕。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
? 
文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如下面的站酷活動頁就用了很多的文字按鈕，只有當(dāng)按鈕被選中時，按鈕才會高亮選中。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
? 
圖標(biāo)按鈕
圖標(biāo)提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面，讓頁面看起來更加的簡潔。
解鎖B端按鈕設(shè)計10大密碼
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
? 
在按鈕中添加圖標(biāo)
用于對按鈕含義補充解釋，提高按鈕識別效率。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
2、按鈕的樣式種類
按鈕的樣式可以從多個方面進行分類和設(shè)計，以下是一些常見的樣式分類：
 
? 
按顏色劃分:
單色按鈕
：
按鈕背景為單一顏色，如藍(lán)色、綠色、紅色等，常用于強調(diào)按鈕的主要功能或操作。
 
漸變色按鈕
：
按鈕背景為漸變色，可以是線性漸變或徑向漸變，通常用于增加視覺吸引力和現(xiàn)代感。
 
透明按鈕
：
按鈕背景透明或半透明，通常用于與背景融合或突出按鈕上的文本和圖標(biāo)。
 
彩色邊框按鈕
：
按鈕背景透明或淺色，但有彩色邊框，常用于需要突出按鈕邊界的場景。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
? 
按形狀分
矩形按鈕
：
這種是最常見的按鈕形狀，適用于大多數(shù)界面設(shè)計。
 
圓形按鈕
：
按鈕形狀為圓形，通常用于表示播放、暫停等操作，或用于具有特定功能的圖標(biāo)按鈕。
 
圓角按鈕
：
按鈕形狀通常為圓角矩形，常用于需要柔和視覺效果的場景。
 
自定義形狀按鈕
：
根據(jù)設(shè)計需求，按鈕可以是任意自定義形狀，如星形、心形等，常用于創(chuàng)意設(shè)計或特定主題的界面。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
? 
按邊框分
無邊框按鈕
：
按鈕沒有邊框，背景和文本直接顯示，常用于簡潔的界面設(shè)計。
 
細(xì)邊框按鈕
：
按鈕有細(xì)邊框，常用于區(qū)分按鈕與周圍元素，同時保持界面的簡潔性。
 
粗邊框按鈕
：
按鈕有粗邊框，常用于強調(diào)按鈕或與背景形成強烈對比。
 
虛線邊框按鈕
：
按鈕邊框為虛線，常用于表示輔助操作或非主要功能。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
? 
按圖標(biāo)分
圖標(biāo)按鈕
：
按鈕上只有圖標(biāo)，沒有文本，常用于表示通用操作或節(jié)省空間的場景。
 
圖標(biāo)+文本按鈕
：
按鈕上既有圖標(biāo)又有文本，圖標(biāo)通常位于文本左側(cè)或上方，常用于清晰表達(dá)按鈕功能的場景。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
? 
按陰影樣式分
無陰影按鈕
：
按鈕沒有陰影，常用于簡潔或平面風(fēng)格的界面設(shè)計。
 
輕微陰影按鈕
：
按鈕有輕微的陰影效果，常用于增加按鈕的立體感和層次感。
 
明顯陰影按鈕
：
按鈕有明顯的陰影效果，常用于突出按鈕或與背景形成強烈對比。
 
動態(tài)陰影按鈕
：
按鈕的陰影效果會隨著鼠標(biāo)懸?；螯c擊等交互動作而變化，常用于增加交互體驗的趣味性。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
? 
按動畫種類分
無動畫按鈕
：
按鈕沒有動畫效果，常用于簡潔或傳統(tǒng)的界面設(shè)計。
 
懸停動畫按鈕
：
當(dāng)鼠標(biāo)懸停在按鈕上時，按鈕會有動畫效果，如顏色漸變、邊框變化、圖標(biāo)旋轉(zhuǎn)等，常用于增加交互體驗的趣味性和吸引力。
 
點擊動畫按鈕
：
當(dāng)點擊按鈕時，按鈕會有動畫效果，如縮放、震動、波紋等，常用于增加交互體驗的反饋感。
馬蜂窩的功能主按鈕，在點擊的時候都會產(chǎn)生動畫，交互感十足。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
加載動畫按鈕
：
當(dāng)按鈕處于加載狀態(tài)時，按鈕會有加載動畫效果，如旋轉(zhuǎn)圖標(biāo)、進度條等，常用于告知用戶操作正在進行中。
 
 
 
3、按鈕的幾種狀態(tài)
解鎖B端按鈕設(shè)計10大密碼
 
 
 
3.1 默認(rèn)按鈕
：
按鈕的初始狀態(tài)，通常具有正常的顏色、形狀和文字顯示，等待用戶操作。
 
3.2 待激活狀態(tài)按鈕：
待激活狀態(tài)按鈕通常用于指示某個功能或服務(wù)尚未激活或啟用，用戶需要執(zhí)行某些操作來激活它。這種按鈕的設(shè)計和實現(xiàn)需要清晰地傳達(dá)當(dāng)前的狀態(tài)，并引導(dǎo)用戶進行下一步操作。
 
3.3 點擊狀態(tài)按鈕：
當(dāng)用戶點擊按鈕時，按鈕會呈現(xiàn)按下的狀態(tài)，通常通過改變顏色、形狀或添加陰影等方式來表示。
 
3.4 禁用按鈕：
在某些情況下，按鈕會處于禁用狀態(tài)，無法進行操作，通常會以灰色或半透明的方式顯示，提示用戶當(dāng)前操作不可用。
 
3.5加載狀態(tài)按鈕：
加載狀態(tài)按鈕通常用于指示某個過程正在進行中，例如數(shù)據(jù)加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理，而不是卡住或出現(xiàn)錯誤。
 
3.6危險提示狀態(tài)按鈕：
危險提示狀態(tài)按鈕通常用于提醒用戶即將執(zhí)行的操作可能帶來風(fēng)險或不可逆的結(jié)果，例如刪除重要文件、注銷賬戶等。這種按鈕的設(shè)計和實現(xiàn)需要讓用戶明確意識到操作的危險性，以避免誤操作。
 
下邊這兩組彈框就是運用了危險按鈕，來提示客戶未來即將面臨的風(fēng)險，警示作用非常的明顯。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、 Web端的按鈕尺寸建議
在Web端，按鈕尺寸沒有固定標(biāo)準(zhǔn)。不過，一般來講，按鈕的高度常在32px-48px之間，寬度可根據(jù)內(nèi)容靈活設(shè)置，但最好不要小于48px，這樣方便用戶用手指（觸屏設(shè)備）或鼠標(biāo)點擊。像一個簡單的“提交”按鈕，寬度可能是80px左右，高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適，易于交互。
 
 
2、 麻省理工觸摸實驗對按鈕尺寸的指導(dǎo)
麻省理工觸摸實驗室通過對人類指尖的研究，得出了關(guān)于界面按鈕大小設(shè)計的一些重要參考數(shù)據(jù)。
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
對于食指，平均寬度在16至20毫米，指腹觸摸區(qū)域尺寸為10至14毫米，指尖觸摸區(qū)域尺寸為8至10毫米；對于拇指，平均寬度為25毫米，指腹觸摸區(qū)域尺寸為12至16毫米，指尖觸摸區(qū)域尺寸為10至12毫米。由此建議，食指觸摸的按鈕應(yīng)保證在8毫米×8毫米以上，且控件間距應(yīng)保證至少在1毫米以上；拇指觸摸的按鈕應(yīng)保證在10毫米×10毫米以上，且控件間距應(yīng)保證至少在2毫米以上。
 
該研究還指出，大多數(shù)用戶可以舒適可靠地?fù)糁?nbsp;10 毫米×10 毫米的觸摸目標(biāo) 。
 
 
3、 iOS對按鈕尺寸大小的規(guī)范
解鎖B端按鈕設(shè)計10大密碼
 
 
 
從按鈕圖標(biāo)尺寸來看，根據(jù)蘋果官方設(shè)計指南，iOS中按鈕圖標(biāo)有不同標(biāo)準(zhǔn)。小圖標(biāo)尺寸為24×24pt，用于小型按鈕，如導(dǎo)航；標(biāo)準(zhǔn)圖標(biāo)為32×32pt，用于普通按鈕，適合次要操作按鈕；大圖標(biāo)是 40×40pt，用于寬大按鈕；特大圖標(biāo)則為48×48pt，用于特大按鈕。不同設(shè)備屏幕尺寸也有對應(yīng)的建議圖標(biāo)尺寸，如iPhoneSE建議24pt，iPhone14及iPhone14Pro建議32pt，iPad 建議40pt 。
 
在最小觸摸區(qū)域方面，iOS規(guī)定最小觸碰區(qū)域為44×44pt，這種尺寸一般適合主要操作按鈕。
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
UI按鈕的組成主要包括以下幾個關(guān)鍵元素：
 
1、圓角
圓角的大小決定了按鈕的氣質(zhì)和視覺感受。小圓角常用于常規(guī)按鈕，如4px圓角；圓角越大，越有親和力，人眼往往不喜歡非常鋒利的物體，所以通常不建議使用0圓角的按鈕樣式，根據(jù)我大量的體驗，我發(fā)現(xiàn)市面上確實也是帶圓角的按鈕居多些。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
2、圖標(biāo)
圖標(biāo)用于直觀表達(dá)按鈕的功能或狀態(tài)，如加載中、編輯等。圖標(biāo)的設(shè)計應(yīng)與整體頁面風(fēng)格一致，并確保其含義明確易懂。
 
 
3、內(nèi)間距
內(nèi)邊距能夠擴大按鈕的可點擊范圍，幫助用戶更容易點擊按鈕。一個好的設(shè)計間距是把按鈕的水平內(nèi)邊距設(shè)計成垂直內(nèi)邊距的2倍。當(dāng)然，你也可以根據(jù)你設(shè)計的實際情況做適當(dāng)調(diào)整，規(guī)矩不是死的。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
4、容器
容器是包含所有視覺和交互元素的框架，包括顏色、紋理、文案和圖標(biāo)等。容器的設(shè)計應(yīng)支持按鈕的功能和美觀。
 
 
5、邊框
邊框定義了按鈕的邊界，常用于次級按鈕的描邊。邊框的粗細(xì)和樣式可以影響按鈕的視覺層次和交互效果。
 
 
6、文案
文案是按鈕上的文字描述，用于表達(dá)按鈕的含義和功能。文案應(yīng)簡潔明了，易于理解，同時具有一定的吸引力。
 
 
7、背景
背景用于表達(dá)按鈕的狀態(tài)和品牌氣質(zhì)。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
8、投影
投影用于凸顯層級關(guān)系，幫助用戶更好地區(qū)分不同的按鈕。投影通常與紋理、漸變色結(jié)合使用，以打造更好的視覺體驗。
 
佐糖首頁為了促進轉(zhuǎn)化，特意將“開通會員”的按鈕用投影凸顯處理，帶投影的按鈕明顯有向前走的感覺，比沒有投影的按鈕看起來更加顯眼，小小投影在頁面中不僅起到增加空間感的作用，還起到了業(yè)務(wù)強調(diào)的作用，已經(jīng)不僅僅是樣式的一個承載了。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
這些元素共同作用，不僅提升了按鈕的功能性，還增強了其美觀性和用戶體驗。在設(shè)計UI按鈕時，應(yīng)綜合考慮這些因素，以確保按鈕既美觀又實用。
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
Antdesign指出按鈕的作用是指導(dǎo)用戶采取你希望他們采取的行動，并幫助用戶防錯。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
1、觸發(fā)操作
1.1提交與確認(rèn)：
在表單填寫場景中，如用戶注冊、登錄、信息提交等，按鈕用于觸發(fā)提交或確認(rèn)操作，將用戶輸入的信息發(fā)送給系統(tǒng)進行處理。
 
1.2執(zhí)行功能：
在各類軟件中，按鈕是執(zhí)行具體功能的主要方式，如在圖像編輯軟件中，“裁剪”“旋轉(zhuǎn)”“調(diào)整顏色”等按鈕，可讓用戶快速實現(xiàn)相應(yīng)功能。
 
 
2、導(dǎo)航跳轉(zhuǎn)
2.1頁面切換：
在多頁面的應(yīng)用或網(wǎng)站中，按鈕可實現(xiàn)頁面之間的切換，如網(wǎng)站的首頁、產(chǎn)品頁、關(guān)于我們頁等，通過點擊按鈕，用戶能方便地瀏覽不同頁面內(nèi)容。
 
2.2菜單展開與收起：
用于控制導(dǎo)航菜單的展開與收起，節(jié)省頁面空間，提高界面的整潔度和易用性。
 
 
3、狀態(tài)控制
3.1顯示與隱藏：
可用于控制某些元素的顯示與隱藏，如在電商網(wǎng)站中，點擊“查看更多商品詳情”按鈕，可展開隱藏的詳細(xì)商品信息。
 
飛書中的這個小小按鈕，它承載著隱藏折疊的功能，讓頁面看起來更加的簡潔有序。
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
3.2啟用與禁用：
在某些功能需要滿足一定條件才能使用時，按鈕可用于表示該功能的啟用或禁用狀態(tài)，如在未填寫完必填項時，“提交”按鈕處于禁用狀態(tài)，無法點擊。
 
中國移動云盤的登錄頁就是這么設(shè)計的，當(dāng)前面信息沒有填完，后面的登錄按鈕始終是禁用的狀態(tài)，只有當(dāng)信息填完，且填寫正確，按鈕才會亮起。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
4、提供反饋
4.1 操作反饋：
當(dāng)用戶點擊按鈕后，按鈕會通過顏色、形狀、動畫等方式的改變，向用戶提供操作反饋，告知用戶系統(tǒng)已接收到操作指令。
 
4.2 引導(dǎo)提示：
在一些復(fù)雜操作或新功能引導(dǎo)時，按鈕可作為引導(dǎo)提示的一部分，告知用戶下一步操作，如在新手引導(dǎo)流程中，突出顯示“下一步”按鈕。
 
心島日志的新手指引中就是這樣設(shè)計的，按鈕在其中起了很重要的指引作用。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
5、數(shù)據(jù)交互
5.1 數(shù)據(jù)篩選：
在數(shù)據(jù)展示界面，如表格、列表等，按鈕可用于對數(shù)據(jù)進行篩選，方便用戶快速找到所需信息。
釘釘打卡這個界面中，多虧有了日、周、月的篩選按鈕，才讓數(shù)據(jù)篩選變得如此便捷。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
5.2 數(shù)據(jù)排序：
通過點擊“按時間排序”“按銷量排序”等按鈕，用戶可對數(shù)據(jù)進行重新排序，以滿足不同的查看需求。
 
 
6、品牌傳達(dá)
很多產(chǎn)品的按鈕顏色都是與它的品牌色高度一致的，它既是按鈕，又是品牌色的傳遞大使。
 
網(wǎng)易云音樂的按鈕色用的網(wǎng)易紅，釘釘打卡的按鈕用的騰訊藍(lán)，都是在傳遞自己的品牌色，同時也是在進行指令的傳達(dá)。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
在日常設(shè)計中，頁面無疑少不了按鈕位置的擺放，那么按鈕放置在什么樣的位置合適，這也是一個值得深思的問題，也許我們已經(jīng)司空見慣了按鈕的位置擺放，但是我們知道它為什么要放這里或者那里嗎？下面我們來看下這幾種設(shè)計模型，讓它告訴我們，為什么，在特定場景下，按鈕位置要這么放？
 
 
1、設(shè)計依據(jù) – Z型視覺模型
1.1 原理含義
Z型視覺模型是一種描述用戶在瀏覽網(wǎng)頁或界面時視覺軌跡的理論模型。
它的布局遵循字母Z的形狀，指用戶的瀏覽路線——從左到右，從上到下的的視覺運動軌跡。
 
首先，人們從左上角到右上角進行掃描，形成一條水平線；第二步，向頁面的左下側(cè)，創(chuàng)建一條對角線；最后，再次向右轉(zhuǎn)，形成第二條水平線，當(dāng)觀眾的視角以這種模式移動時，它形成一個虛構(gòu)的“Z”字形。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
1.2 視覺區(qū)域
區(qū)域1：位于頁面左上角，是用戶視線最先關(guān)注的區(qū)域，通常放置最重要的信息，如網(wǎng)站標(biāo)志、導(dǎo)航欄等，能第一時間吸引用戶的注意力并讓用戶對頁面內(nèi)容有初步的整體認(rèn)知。
 
區(qū)域2：在區(qū)域1的右側(cè)，用戶的視線在水平移動時會經(jīng)過該區(qū)域，可放置一些與區(qū)域1相關(guān)的輔助信息或次要的導(dǎo)航元素等。
 
區(qū)域3：位于頁面中部偏左，當(dāng)用戶視線繼續(xù)向下移動時會關(guān)注到該區(qū)域，通常用來展示頁面的核心內(nèi)容，如產(chǎn)品介紹、文章主體等。
 
區(qū)域4：在頁面的右下角，是用戶視線的終點區(qū)域之一，可放置一些重要的操作按鈕或補充信息等，以吸引用戶在瀏覽完主要內(nèi)容后進行進一步的操作或獲取更多信息。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
1.3 應(yīng)用案例
在電商網(wǎng)站中，商家會把熱門推薦或主打產(chǎn)品放在區(qū)域1和區(qū)域3，以吸引用戶的注意力。在產(chǎn)品詳情頁面，將“加入購物車”“立即購買”等按鈕放在區(qū)域4，方便用戶在瀏覽完產(chǎn)品信息后進行購買操作。
 
天貓商城就是這樣做的，把網(wǎng)站的LOGO圖放置在左上角（區(qū)域1），把產(chǎn)品圖放置在左下角（區(qū)域3），最后在用戶瀏覽了全部頁面之后，在右下角（區(qū)域4）放置購買按鈕，引導(dǎo)用戶下單。
 
在這個帶有銷售場景的頁面設(shè)計中，
購買按鈕放置在右下角符合用戶瀏覽習(xí)慣，也符合Z型視覺模型。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
在B端應(yīng)用軟件中，可能運用的功能比較多，按鈕也比較多，通過大量分析和觀察發(fā)現(xiàn)，它們
大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
 
騰訊云是這樣處理的，中國移動網(wǎng)盤是這么處理的，看似巧合，其實也有它合情合理的一面，因為每一個動作的開始和結(jié)束都會更加的引人注意。
 
這就跟人們每次入職一個新公司一樣，剛進去時會特別賣力、小心，后面時間長了，也就形成免疫，習(xí)慣了，但是當(dāng)最后要離開這家公司的時候，最后心情又會特別復(fù)雜，回想起自己在這里成長的歲月，就會心生很多的感慨，也會特別的記憶深刻。
 
也許這也是為啥很多頁面設(shè)計，喜歡
把重要的按鈕放置在每次視覺運動線的起點或者終點吧！
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
按鈕的顏色在界面中不僅起到視覺點綴的作用，同時也是按鈕狀態(tài)的一種呈現(xiàn)和反饋。
 
按鈕顏色不是千篇一律的品牌色，它也經(jīng)常需要根據(jù)業(yè)務(wù)場景的不同，更換顏色，比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍(lán)色-更多按鈕，不同的按鈕在顏色設(shè)計上都會有所區(qū)別。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
此外，在設(shè)計按鈕顏色時，有一些基本規(guī)范。
首先，從功能角度看，
主要按鈕通常會使用比較突出的顏色，
像鮮艷的藍(lán)色（如#007BFF），這是因為藍(lán)色醒目又不會過于刺眼，能引導(dǎo)用戶去點擊。次要按鈕（如取消、返回）的顏色會稍淡一些，比如淺灰色（#ccc），讓用戶知道這是相對次要的操作。
 
從顏色搭配來說，按鈕顏色要和背景色有足夠的對比度，方便用戶識別。比如背景是白色，深色按鈕就會很清晰；如果背景顏色較深，那按鈕可以用淺色或者高亮度顏色。
 
另外，顏色的選擇也要考慮產(chǎn)品的風(fēng)格和使用場景。例如，在一個游戲軟件里可能會使用更活潑的色彩，像紅色、橙色；而在辦公軟件里，通常會采用比較沉穩(wěn)的色調(diào)，如藍(lán)色、黑色。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、可識別性
1.1 視覺清晰：
按鈕應(yīng)采用用戶熟悉的設(shè)計樣式，如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
 
1.2 文字明確：
按鈕上的標(biāo)簽應(yīng)準(zhǔn)確、簡明直接地介紹其功能，避免使用過于通用或模糊的表述，讓用戶清楚點擊后會發(fā)生什么。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
2、易操作性
2.1位置合理：
將按鈕放在用戶期望看到的地方，如遵循F型或古騰堡原則，在頁面的視覺焦點區(qū)域放置重要按鈕。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
2.2尺寸適宜：
按鈕大小應(yīng)反映其在屏幕上的優(yōu)先級，更大的按鈕用于更重要的操作，同時要適配用戶的手指，避免誤觸。
 
 
 
3、一致性
3.1 順序得當(dāng)、邏輯一致：
按鈕的順序應(yīng)反映用戶與界面之間交互的邏輯，如“上一步”按鈕通常在左邊，“下一步”按鈕在右邊。
 
3.2 狀態(tài)樣式一致：
按鈕應(yīng)具有一致的狀態(tài)樣式，如默認(rèn)、按下、聚焦、禁用等，一個產(chǎn)品中，這些狀態(tài)樣式要高度的一致，不能在這個頁面按鈕樣式是這樣的，跑到另一個頁面，樣式又發(fā)生了改變。
 
著名的格式塔心理學(xué)也是這么認(rèn)為的，它強調(diào)人對事物的理解是基于整體的、有組織結(jié)構(gòu)的，如果按鈕設(shè)計做到一致性，對提高產(chǎn)品的整體性是有非常大的改進的。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
4、簡潔性
4.1 避免過多
避免在一個界面中使用過多的按鈕，以免讓用戶感到無所適從，應(yīng)優(yōu)先考慮最重要的操作。
 
4.2 功能單一
每個按鈕應(yīng)盡量只執(zhí)行一個主要功能，避免一個按鈕承載過多復(fù)雜的操作，降低用戶的認(rèn)知成本。
 
?？硕芍赋?，人的決策時間會隨著選擇的增加而增加。在按鈕設(shè)計中，
簡潔的設(shè)計能減少用戶的選擇和認(rèn)知負(fù)擔(dān)
，使用戶能更快地做出決策并執(zhí)行操作。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
5、美觀性
5.1 風(fēng)格統(tǒng)一
按鈕的設(shè)計風(fēng)格應(yīng)與整個UI界面的風(fēng)格保持一致，包括顏色、形狀、字體等方面，形成統(tǒng)一的視覺體系。
 
5.2 對比協(xié)調(diào)
在保持整體協(xié)調(diào)的基礎(chǔ)上，通過對比突出重要按鈕，如使用高對比度的顏色、較大的尺寸等，吸引用戶的注意力。
情感化設(shè)計理論強調(diào)設(shè)計應(yīng)該注重用戶的情感體驗。美觀的按鈕設(shè)計能夠傳遞積極的情感信息，增強用戶和產(chǎn)品的情感連接。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
6、要符合習(xí)慣
奧斯卡·王爾德說過：“習(xí)慣一旦養(yǎng)成，便很難改變。” 
所以我們在設(shè)計按鈕的時候，一定要符合人性的習(xí)慣，而不是試圖改變?nèi)藗兊牧?xí)慣。
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、按鈕設(shè)計要有分組意識
帶有分組的按鈕擺放，讓人看起來總是更加的有序，也更利于用戶進行操作，面對同類型的功能操作點無需跳躍著去尋找，能很快在相似功能操作區(qū)域找到。
 
360的分組意識很強烈，三個不同區(qū)域的圖標(biāo)按鈕樣式都做了明顯的區(qū)分，讓界面看起來更加有序，操作起來也更加的便捷。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
2、按鈕排列視覺上要有主次
切不可一行按鈕中出現(xiàn)多個高強調(diào)的按鈕，Antdesign對這個也做了詮釋，會對用戶的行為進行錯誤的引導(dǎo)，也不利于聚焦。
 
通義這個頁面雖然有多個選中的按鈕，但是沒有全部用高強調(diào)的按鈕，只有強推薦的操作“開始錄音”才用了強按鈕，其它通過相對淺的顏色做了弱按鈕選中處理，視覺上主次分明，信息主次表達(dá)上也清晰可見。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
3、不要在按鈕中放置兩個圖標(biāo)
當(dāng)一個按鈕同時兼顧兩個交互動作的時候，一定要區(qū)分設(shè)計，不能赤裸裸的展示在一個按鈕中，而不做任何區(qū)分。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
4、返回按鈕宜放置在左邊
具有返回意義的按鈕，應(yīng)該放在左側(cè)，暗示其方向是回到之前，例如上一步。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
5、按鈕文字不宜太長
簡短的文字更易被用戶閱讀和記住，在一個按鈕上最多不超過5個文字，重要的按鈕一般
使用2~4個字。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
? 用純灰色文字的弱化按鈕
 
? 用灰色邊框＋灰色文字的弱化按鈕
 
? 用顏色邊框+顏色文字的弱化按鈕
 
? 用灰底+灰色文字的弱化按鈕
 
? 用淺色底+顏色文字的弱化按鈕
 
? 用純顏色的弱化按鈕
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
通過本篇文章的探討，我們深入了解了B端按鈕設(shè)計的九大核心要素。從按鈕的基本定義到Antdesign的分類，再到尺寸、構(gòu)成、作用、位置和顏色等細(xì)節(jié)，每一部分都是提升用戶體驗的關(guān)鍵。
 
按鈕設(shè)計不僅關(guān)乎美觀，更影響著用戶的操作效率和滿意度。
在UI界面中，遵循設(shè)計原則和注意事項，確保按鈕既實用又具有吸引力，是每位設(shè)計師的職責(zé)。
 
希望本文能為設(shè)計師們提供有價值的參考，激發(fā)更多創(chuàng)新靈感，共同推動B端產(chǎn)品的交互設(shè)計向更高水平發(fā)展。
 
 
解鎖B端按鈕設(shè)計10大密碼


作者：姝斐suphie
鏈接：https://www.zcool.com.cn/article/ZMTY0OTkwOA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(204)

B 端界面設(shè)計中色彩搭配的實用技巧

ui設(shè)計分享達(dá)人

在 B 端界面設(shè)計領(lǐng)域，色彩搭配是影響用戶體驗和產(chǎn)品形象的關(guān)鍵因素。合理的色彩運用能提升界面的可讀性、易用性，強化品牌認(rèn)知。下面分享一些 B 端界面設(shè)計中色彩搭配的實用技巧。

一、運用色彩心理學(xué)

不同色彩會引發(fā)用戶不同的情感反應(yīng)。藍(lán)色常被視為專業(yè)、可靠，如眾多云計算平臺的管理界面多采用藍(lán)色調(diào)，讓用戶感受到服務(wù)的專業(yè)與安全 ，從而增強信任。綠色代表生機、健康，在醫(yī)療保健類 B 端應(yīng)用中，用綠色顯示正常數(shù)據(jù)，可營造安心的氛圍。而紅色具有強烈視覺沖擊力，適合用于警示信息或關(guān)鍵操作提示，像刪除確認(rèn)按鈕常用紅色，以引起用戶注意，避免誤操作。

2.png

二、搭建色彩體系

構(gòu)建一套完善的色彩體系是基礎(chǔ)。主色調(diào)要與企業(yè)品牌緊密相連，像 Salesforce 就以經(jīng)典藍(lán)色貫穿界面，強化品牌印象。輔助色一般選 2 - 3 種，用于次要元素，如在藍(lán)色為主的項目管理系統(tǒng)中，淺灰色展示次要信息，橙色突出任務(wù)進度，讓界面層次分明。強調(diào)色則用高飽和度、對比強的顏色，在數(shù)據(jù)報表中用紅色標(biāo)注異常數(shù)據(jù)，助力用戶快速抓取關(guān)鍵信息。

三、確保色彩對比度

足夠的色彩對比度是保障界面可讀性和可操作性的關(guān)鍵。依據(jù) WCAG 標(biāo)準(zhǔn)，正常文本與背景對比度至少 4.5:1，大文本 3:1。像黑字白底就是高對比度的經(jīng)典搭配，易讀性強；而深灰字配淺灰背景則可能導(dǎo)致閱讀困難。此外，不同界面元素間的對比度也很重要，按鈕與周圍區(qū)域要區(qū)分明顯，不同狀態(tài)的按鈕也要通過色彩變化區(qū)分，方便用戶操作。

四、保障可讀性與識別性

B 端界面信息量大，應(yīng)避免花哨的色彩組合，防止分散用戶注意力和造成視覺疲勞。像數(shù)據(jù)分析類產(chǎn)品，多采用淡藍(lán)、淡綠等柔和色調(diào)搭配簡潔圖表和文字，讓用戶輕松理解數(shù)據(jù)。同時，要考慮色彩在不同環(huán)境和設(shè)備下的顯示效果，確保清晰可辨，避免出現(xiàn)色彩偏差。

14.png

五、遵循品牌色彩規(guī)范

若企業(yè)有明確的品牌色彩規(guī)范，B 端界面應(yīng)嚴(yán)格遵循?？芍苯邮褂闷放浦魃{(diào)，如騰訊云大量運用騰訊藍(lán)，加深用戶對品牌的關(guān)聯(lián)認(rèn)知。也可基于品牌色拓展衍生，提取不同明度和飽和度的顏色用于輔助或強調(diào)，既保持品牌一致性，又讓界面更豐富生動。

六、重視用戶測試

完成色彩方案后，用戶測試必不可少。通過收集用戶對界面色彩的直觀感受、意見反饋，了解其舒適度、易讀性等情況，針對性優(yōu)化。同時觀察用戶行為，如尋找信息的速度、操作失誤等，深入了解用戶對色彩的實際需求，進一步完善設(shè)計。

總之，B 端界面設(shè)計的色彩搭配需綜合考量多方面因素。掌握這些實用技巧，有助于打造出既美觀又實用的 B 端界面，提升用戶體驗，塑造企業(yè)專業(yè)形象。

蘭亭妙微(m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan

評論(0) 瀏覽(130)

講講AI在B端設(shè)計上的應(yīng)用方法

ui設(shè)計分享達(dá)人

B 端設(shè)計領(lǐng)域的 AI 應(yīng)用
大多數(shù)同學(xué)目前對 AI 應(yīng)用的認(rèn)識只有文生圖、對話、駕駛等領(lǐng)域，但 AI 應(yīng)用的場景遠(yuǎn)遠(yuǎn)不止它們。
和頭部的明星 AI 產(chǎn)品、模型相比，細(xì)分市場的 AI 應(yīng)用就非常沒有存在感了。比如使用 AI 進行財務(wù)的審核、飲料配方的調(diào)節(jié)、工程安全的模擬等等，它可以幫助企業(yè)節(jié)約大量的人力完成工作。
概括起來，就是一些可以通過計算機完成的（也不止）重復(fù)性勞動或標(biāo)準(zhǔn)化流程，都可以引入 AI 的技術(shù)進行降本增效。
那在 UI 設(shè)計領(lǐng)域中，這些重復(fù)性和標(biāo)準(zhǔn)化的工作內(nèi)容有嘛？
有，但是并不會像外行或者新手想象的那么多。AI 難以覆蓋的場景我們過去的分享探討過，等等也會做進一步的說明，而這里我們先要探討的，就是能用 AI 實現(xiàn)的 B 端設(shè)計場景，具體有哪些。
我們都知道市面上現(xiàn)在有很多開源的 B 端前端框架，各個大廠前赴后繼地對它們進行更新和完善，里面包含了非常豐富的組件庫。
講講AI在B端設(shè)計上的應(yīng)用方法
 
 
這些組件庫不不止是 UI 的組件，也包含了前端的對應(yīng)代碼，前端工程師可以快速調(diào)用這些代碼組件而不用自己去重新寫一遍樣式和交互。
原則上，使用現(xiàn)成的組件開發(fā)就可以快速完成整套項目的前端內(nèi)容，這可以給前端工程師節(jié)省大量時間。所以即使項目中有完整的設(shè)計稿，前端在開發(fā)過程中也會偷懶直接略過，直接套用框架內(nèi)的組件實現(xiàn)。
這和設(shè)計師直接套用素材完成運營圖設(shè)計一樣，明明有現(xiàn)成的素材在那里，為什么要浪費一大堆時間自己重新畫一遍還是用 3D 建模渲染？同理，要是組件足夠豐富，滿足項目的需要，設(shè)計師也可以直接復(fù)用官方的組件素材，不用自己設(shè)計。
組件化思維的運用，就是項目工作標(biāo)準(zhǔn)化和重復(fù)性的根源，不僅應(yīng)用在設(shè)計領(lǐng)域，對于前、后端開發(fā)來說同理。
基于這種思路，催生出了一種新的 SaaS 模式 —— 低代碼 Low-Code 服務(wù)。
即通過少量的代碼，或者干脆不用代碼，僅通過可視的工具和組件實現(xiàn)軟件的開發(fā)，并完成相應(yīng)的配置和部署的工具。
這概念咋一看不就是建站工具？比如有贊、微店之類的，用戶可以在里面直接創(chuàng)建并配置店鋪，然后以網(wǎng)頁、H5 或小程序的形式發(fā)布。
但這只是最初級的應(yīng)用，傳統(tǒng)的建站工具屬于幫你預(yù)制好了主要的參數(shù)和功能，用戶只能在這個范圍內(nèi)做少量的自定義編輯和設(shè)置。但進階的 Low-Code，會賦予用戶更大的編輯范圍和自由度，讓用戶通過可視化的界面創(chuàng)建自己想要的產(chǎn)品和功能。
講講AI在B端設(shè)計上的應(yīng)用方法
 
 
這類產(chǎn)品已經(jīng)衍生出一個規(guī)模不小的市場，因為有大量的中小企業(yè)不想投入太多的精力和成本進數(shù)字化平臺的搭建上，
并希望能快速創(chuàng)建不同的管理工具來匹配企業(yè)日新月異的發(fā)展需要
。
這里要劃重點，對于一部分企業(yè)來說，經(jīng)營模式和業(yè)務(wù)流程是持續(xù)迭代的，如果使用傳統(tǒng)的開發(fā)模式那么很難跟上這種迭代。
以連鎖餐飲品牌舉例，前期只在一個城市經(jīng)營，和后期擴張到全省或全國，采購流程和供應(yīng)鏈管理必然會持續(xù)進行調(diào)整，提交一個采購工單所需填寫的字段就會發(fā)生變化，同理展示的表格、詳情頁也要跟著調(diào)整。
這類變化往往并沒有修改界面的視覺、交互、組件，僅僅是增加和減少字段數(shù)據(jù)，而用傳統(tǒng)的收集需求再輸出進行開發(fā)的模式效率非常低，所以它們就成為 Low-Code 的最佳應(yīng)用場景。業(yè)務(wù)方自己配置、修改直接上線，省掉產(chǎn)品經(jīng)理、設(shè)計師、程序員中間耗差時……
并且對于很多企業(yè)來說，只需要應(yīng)用一些非常基礎(chǔ)的功能服務(wù)和頁面類型。比如我經(jīng)常提到的 B 端管理系統(tǒng)的四個核心頁面類型：
講講AI在B端設(shè)計上的應(yīng)用方法
 
 
Low-Code 就是把常規(guī)需求標(biāo)準(zhǔn)化，并運用組件化的框架，讓用戶通過簡單的填寫和編輯就能生成出想要的頁面和功能。
既然需求不復(fù)雜，功能、組件、頁面、代碼都可以標(biāo)準(zhǔn)化，那不用 AI 降本增效還有王法嘛？
所以，使用 AI 生成 B 端頁面（不是設(shè)計稿）的工具已經(jīng)在大廠內(nèi)部開始應(yīng)用了，開發(fā)專屬大模型，再把做好的組件喂給模型，用戶只要在相應(yīng)的表單內(nèi)填入需求，就可以快速生成出落地的頁面。
并且各家大廠內(nèi)部的 B 端組件庫，可遠(yuǎn)遠(yuǎn)不止對外分享的這些開源框架里包含的數(shù)量，還有很多特殊的業(yè)務(wù)組件，可以讓模型得到更好的訓(xùn)練和產(chǎn)出，比普通 Low-Code 模式更簡單高效，大幅度提升企業(yè)內(nèi)部B端產(chǎn)品的落地和運用效率。
從已經(jīng)了解到的信息中，有一部分業(yè)務(wù)部門已經(jīng)開始進入實踐環(huán)節(jié)了。且隨著技術(shù)的迭代，這種工具必然會越來越強大，功能越來越豐富。
所以，了解完這個趨勢，設(shè)計師和前端工程師迎來大結(jié)局了？要被AI技術(shù)清洗了？現(xiàn)在該捧起《從0到1學(xué)習(xí)炒粉》學(xué)習(xí)了嘛？
這就是下面要討論的內(nèi)容。
B 端 AI 和設(shè)計的關(guān)聯(lián)
前面做了不少鋪墊，就是為了強調(diào)，適用于 Low-Code 和 AI 生成的 B 端產(chǎn)品，是有前提條件的，包含下面這些要素：
  •  
    完整成熟的前后端組件庫
  •  
    需求使用基礎(chǔ)做法就能實現(xiàn)
  •  
    需要經(jīng)常變動調(diào)整的業(yè)務(wù)需求
  •  
    對設(shè)計和交互本身要求不高
而這里面最關(guān)鍵的東西，就是標(biāo)準(zhǔn)化。必須要知道在今天的 AI 的應(yīng)用發(fā)展中，要生成出符合實際工作需要的結(jié)果，絕對不是靠輸入信息以后它自己 “蒙” 出來的。為了讓結(jié)果盡可能準(zhǔn)確，那么喂給模型的數(shù)據(jù)也就要越多且越有針對性。
理論上面向 B 端的 AI 工具，只要不斷提供給他新的組件、頁面，就能拓展它可以實現(xiàn)的范圍。但不管你怎么訓(xùn)練它，都要滿足標(biāo)準(zhǔn)化的前提。
而標(biāo)準(zhǔn)化，恰恰就是國內(nèi) B 端業(yè)務(wù)的命門……
我們都知道國內(nèi) SaaS 行業(yè)現(xiàn)在發(fā)展非常的混亂，雖然在不同的細(xì)分領(lǐng)域有自己的獨角獸，比如財務(wù)領(lǐng)域的金蝶，OA 領(lǐng)域的釘釘，ERP 領(lǐng)域的用友等等。
但是這些公司就發(fā)展?fàn)顩r良好利潤豐厚了？24年一季度的 SaaS 頭部公司業(yè)績非常蕭條，比如網(wǎng)上找到的統(tǒng)計，和國外 SaaS 頭部公司的估值和利潤形成鮮明的對比：
講講AI在B端設(shè)計上的應(yīng)用方法
 
 
為什么國內(nèi) SaaS 市場那么慘淡？說到底就是在國內(nèi) B 端領(lǐng)域很難實現(xiàn)真正的標(biāo)準(zhǔn)化，而不是國內(nèi) B 端市場規(guī)模太小。
比如釘釘、飛書這樣的 OA 軟件已經(jīng)很成熟了，但它們的實際普及程度一點都不高，而中大型企業(yè)又有各種考量，現(xiàn)成的不用就熱衷于開發(fā)一套自己的系統(tǒng)，簡稱定制化。這就倒逼 SaaS 工具為了滿足更多的企業(yè)需求，拼命疊加功能，使得這些 SaaS 工具一個比一個臃腫。
而我們前面提到的 AI 生成，想要普及同樣需要面對這種困境，因為模型不管怎么做，它都是基于特定標(biāo)準(zhǔn)化下的產(chǎn)物，它可以滿足其中一部分需求，但難以滿足其它需求。尤其是國內(nèi) B 端定制化需求中，混亂、抽象、聯(lián)系復(fù)雜的問題非常突出。
換句話說，國內(nèi) B 端市場的大多數(shù)系統(tǒng)，是非標(biāo)準(zhǔn)化的，需要產(chǎn)品團隊在面對這些非標(biāo)準(zhǔn)的需求下做出創(chuàng)新和適配，就必須要考慮很多抽象的因素，領(lǐng)導(dǎo)、背景、體驗、交互、周期、難度等等。這個過程不可能由業(yè)務(wù)方自己完成，且最終導(dǎo)出的設(shè)計結(jié)果，往往會和常規(guī)方案有很大的差異。
按常規(guī)邏輯考慮的話，那有多少組件我們整理多少組件，早晚有一天不得窮盡設(shè)計師思考范圍的邊界？
且不說獲得不同商業(yè)項目的業(yè)務(wù)組件有多困難，如果組件之間沒有更底層的思路去規(guī)范它們的設(shè)計和交互，那么硬湊到一起的項目是非常割裂的，而 AI 在短時間內(nèi)沒辦法做到真正理解交互的邏輯并根據(jù)使用場景做理性的推理。
所以基于一套團隊產(chǎn)出的組件必然是有限的，它們或許可以滿足自己項目，但不可能滿足市面上所有項目的使用需求。
還有一個很關(guān)鍵的疑問，就是很多人會想，一個項目中的特殊組件往往只是少數(shù)，我們用 AI 工具生成多數(shù)頁面，少數(shù)進行定制和獨立開發(fā)不就行了？
這思路在邏輯上很合理，但實踐起來的問題非常多。舉個例子比如設(shè)計稿直接生成網(wǎng)頁這種技術(shù)，從20年前我剛了解到網(wǎng)頁設(shè)計那天說到現(xiàn)在了，這個實現(xiàn)邏輯理應(yīng)不需要 AI 的參與都能做到，中間也問世了不少產(chǎn)品和工具，但沒有一個做成了，反而網(wǎng)頁前端工程師都成為一個獨立熱門職業(yè)了（以前是 UI 寫）。
原因就是作為商業(yè)項目來說，團隊需要 “可控性”，機器生成代碼雖然容易，但是如果要修改里面的東西怎么辦？實際情況就是前端對這些外部代碼深惡痛絕，因為改起來太麻煩，而越大的項目改起來難度也越高。而且這個版本的一部分你改了，下個版本工具再生成的代碼要不要兼容你前面寫的東西？
所以現(xiàn)在即使有設(shè)計稿直接生成代碼的工具前端也寧愿自己寫，但當(dāng)他們用到第三方框架的時候，能不動框架里面的東西就不動。想要理解這個感受，只要拿這些框架的組件素材用它們的組件、自動布局形式做完一個項目，你們就會產(chǎn)生 —— 還不如自己重做一遍的想法。
講講AI在B端設(shè)計上的應(yīng)用方法
 
 
所以生成工具，要不然能一次性完整滿足所有需求，要不然就會因為兩三成的缺口形成致命的瓶頸。當(dāng)然，還有遠(yuǎn)比這些復(fù)雜的進一步因素，我就不在這里展開。
標(biāo)準(zhǔn)化無法在定制化的面前獲得優(yōu)勢，這是國內(nèi) B 端行業(yè)面臨的直接困局，當(dāng)然這里有壞的影響也有好的影響。
壞的影響，就是頭部 SaaS 企業(yè)沒辦法得到快速的發(fā)展，推高整個 B 端軟件業(yè)的收入水平和吸引力，AI 生成頁面這些技術(shù)適用范圍小，沒辦法真惠及全體，行業(yè)處于反復(fù)造輪子但根本沒辦法停下來。
好的影響，則是頭部的 SaaS 企業(yè)發(fā)展不起來，市占率就低，它們就沒辦像 C 端市場一樣形成非常顯著的馬太效應(yīng)，形成事實的壟斷。大家重復(fù)造輪子，那么提供的就業(yè)崗位才多，才能讓我國的炒粉行業(yè)沒有那么卷，競爭沒有那么激烈（？？？）……
講講AI在B端設(shè)計上的應(yīng)用方法
 
 
如果你關(guān)注過 B 端市場足夠多年，你就會明白任何企圖用一種標(biāo)準(zhǔn)、方法論直接平鋪整個行業(yè)的做法，注定是徒勞的，而無序、野蠻、熵增才是不變的主旋律。
但 AI 的作用短時間內(nèi)完全發(fā)揮不了嗎？也不是。除了前面提到的一些簡單的項目之外，還有一個非常大的可能，就是中小模型的開發(fā)會變得越來越容易，而基于項目自研的界面 AI 生成工具很有可能會普及起來。雖然它們不能隨心所欲生成任何需求的樣式，但可以完全根據(jù)業(yè)務(wù)方的實際需要進行定制，去服務(wù)小范圍的群體。
這不代表項目里面就不需要設(shè)計師，符合這套項目的標(biāo)準(zhǔn)依舊需要設(shè)計師去制定，也需要設(shè)計師持續(xù)輸出特殊的頁面和組件。
所以，未來很長一段時間內(nèi) AI 和 B 端 UI 設(shè)計師之間會是互補的關(guān)系，而不是替代關(guān)系。這也會對崗位要求形成進一步的影響，所以下面是我對 B 端 UI 設(shè)計師所需技能的建議：
  1.  
    進一步提升交互能力，尤其是基于業(yè)務(wù)認(rèn)知輸出交互方案的抽象思維能力
  2.  
    進一步鞏固項目設(shè)計規(guī)范的創(chuàng)建能力，深入了解規(guī)范的應(yīng)用和落地流程
  3.  
    進一步提升全局性設(shè)計思維，能提煉核心價值觀并在項目中進行應(yīng)用
  4.  
    進一步了解編程開發(fā)邏輯，能更好的配合前后端完成項目的輸出提高效率
這些能力的掌握是 B 端 UI 設(shè)計師應(yīng)對未來市場變化的核心競爭力，也是 AI 在短時間內(nèi)絕對無法替代的東西。
不管是作為已經(jīng)入行的，還是準(zhǔn)備入行的 B 端設(shè)計新人，都不用對 AI 技術(shù)在 B 端的影響太過擔(dān)心，自怨自艾，因為
如果 B 端項目的設(shè)計都那么簡單的話，那么從前端框架普及的那一天起，B 端 UI 設(shè)計師就可以集體下崗，而不用等到 AI 應(yīng)用的那天
。
換個表述方式，祝大家不會菜到那么輕易就被 AI 給取代了……


作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTYzNzg4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 
評論(0) 瀏覽(325)

打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略

ui設(shè)計分享達(dá)人

目錄
一、  什么是用戶體驗地圖？
二、  為什么使用用戶體驗地圖？
三、  什么情況使用用戶體驗地圖？
四、  用戶體驗地圖的組成？
五、  用戶體驗地圖的制作流程
六、  用戶體驗地圖案例展示
七、  用戶體驗地圖總結(jié)
一、  什么是用戶體驗地圖？
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
用戶體驗地圖（User Experience Map）是一種用于可視化展示用戶在與產(chǎn)品或服務(wù)互動過程中所經(jīng)歷的各個接觸點和體驗的工具。它幫助團隊深入了解用戶的行為、情感和痛點，從而優(yōu)化用戶體驗。
用戶體驗地圖（User Experience Map）是產(chǎn)品設(shè)計前期——用戶研究中很重要的一部分，視角化和圖表的方式，從用戶的角度來表現(xiàn)其和產(chǎn)品/組織/服務(wù)交互的過程，是連續(xù)的視覺時間和完整故事的多個互動點。
簡單來說，在用戶定義角色，搭配行為研究、表格調(diào)查和競品分析等數(shù)據(jù)下，構(gòu)思出這個角色在某個角色故事下要完成特定目標(biāo)，以反應(yīng)用戶使用某個特定產(chǎn)品的真實特性，有助于我們評估現(xiàn)狀、找出用戶真正的痛點，與優(yōu)化整體的體驗流程（創(chuàng)造和諧的互動）。
二、  為什么使用用戶體驗地圖？
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
使用用戶體驗地圖（User Experience Map）在項目中有很多重要的原因，能夠給團隊帶來顯著的價值，例如：
1、全面理解用戶旅程
可視化用戶體驗：用戶體驗地圖通過圖形化的方式展示用戶在使用產(chǎn)品或服務(wù)過程中的所有步驟和接觸點，使團隊能夠直觀地看到用戶的整個旅程。
識別關(guān)鍵時刻：幫助團隊識別用戶旅程中的關(guān)鍵觸點和情感波動，理解用戶在不同階段的需求和行為。
2、發(fā)現(xiàn)用戶痛點和改進機會
識別痛點：用戶體驗地圖能夠揭示用戶在使用過程中的痛點和挑戰(zhàn)，使團隊可以針對這些問題制定解決方案。
挖掘改進機會：通過分析用戶行為和情感波動，團隊可以找到提升用戶體驗的機會，從而優(yōu)化產(chǎn)品或服務(wù)。
3. 增強團隊協(xié)作和溝通
統(tǒng)一理解：用戶體驗地圖作為一種直觀的溝通工具，使跨職能團隊（如產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)人員和市場團隊）能夠共享對用戶體驗的統(tǒng)一理解。
促進協(xié)作：通過共同創(chuàng)建和討論用戶體驗地圖，團隊成員可以更好地協(xié)作，提出建設(shè)性的意見和建議。
4. 驅(qū)動以用戶為中心的設(shè)計
以用戶為中心：用戶體驗地圖強調(diào)從用戶的角度出發(fā)，關(guān)注用戶的需求、情感和行為，推動以用戶為中心的設(shè)計和開發(fā)。
提升用戶滿意度：通過優(yōu)化用戶旅程中的各個觸點和體驗，團隊可以提升用戶滿意度和忠誠度。
5. 支持決策制定
數(shù)據(jù)驅(qū)動決策：用戶體驗地圖基于用戶研究和數(shù)據(jù)分析，為決策提供可靠的依據(jù)，減少主觀判斷和猜測。
優(yōu)先級管理：通過識別用戶體驗中的關(guān)鍵問題和機會，團隊可以更好地確定優(yōu)先級，集中資源解決最重要的問題。
6. 提高用戶體驗設(shè)計的效率和效果
明確目標(biāo)和方向：用戶體驗地圖幫助團隊明確設(shè)計目標(biāo)和方向，減少反復(fù)修改和溝通成本，提高設(shè)計效率。
驗證設(shè)計假設(shè)：通過用戶體驗地圖，團隊可以驗證設(shè)計假設(shè)和概念，確保設(shè)計方案符合用戶需求和期望。
三、什么情況使用用戶體驗地圖？
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
用戶體驗地圖（User Experience Map）在多種情況下都可以使用，能夠幫助團隊更好地理解和優(yōu)化用戶體驗。例如：
1.產(chǎn)品或服務(wù)的初期開發(fā)階段
定義產(chǎn)品概念：在開發(fā)新產(chǎn)品或服務(wù)時，用戶體驗地圖幫助團隊理解用戶需求和期望，確保產(chǎn)品設(shè)計符合用戶需求。
設(shè)計用戶旅程：通過用戶體驗地圖，團隊可以詳細(xì)規(guī)劃用戶與產(chǎn)品互動的每個步驟和觸點，確保用戶旅程流暢且無障礙。
示例：
一家創(chuàng)業(yè)公司在開發(fā)一款新的移動應(yīng)用時，通過用戶體驗地圖了解目標(biāo)用戶的需求和使用習(xí)慣，從而設(shè)計出更符合用戶期望的產(chǎn)品。
2.現(xiàn)有產(chǎn)品或服務(wù)的優(yōu)化
識別和解決問題：當(dāng)現(xiàn)有產(chǎn)品或服務(wù)存在用戶體驗問題時，用戶體驗地圖幫助團隊識別痛點并制定改進措施。
提升用戶滿意度：通過分析用戶在不同接觸點的情感和行為，團隊可以找到提升用戶滿意度和忠誠度的機會。
示例：
一家電商平臺通過用戶體驗地圖發(fā)現(xiàn)用戶在結(jié)賬環(huán)節(jié)遇到的困難，優(yōu)化了結(jié)賬流程，顯著提高了用戶滿意度和轉(zhuǎn)化率。
3.跨職能團隊的協(xié)作和溝通
建立共同理解：在涉及多個部門的項目中，用戶體驗地圖幫助不同團隊（如產(chǎn)品、設(shè)計、開發(fā)、市場）建立對用戶體驗的共同理解。
促進協(xié)作：通過可視化的用戶旅程，團隊成員可以更有效地討論和協(xié)作，提出有建設(shè)性的改進建議。
示例：
一家大型企業(yè)在推出一項新服務(wù)時，通過用戶體驗地圖讓產(chǎn)品經(jīng)理、設(shè)計師和市場團隊共同參與，確保各團隊對用戶體驗的理解一致，從而提高協(xié)作效率。
4.用戶研究和測試階段
記錄用戶反饋：在用戶研究和測試階段，用戶體驗地圖幫助記錄和分析用戶反饋，發(fā)現(xiàn)用戶在使用產(chǎn)品過程中的實際體驗。
驗證設(shè)計假設(shè)：通過用戶體驗地圖，團隊可以驗證設(shè)計假設(shè)，確保設(shè)計方案符合用戶需求和期望。
示例：
一家金融科技公司在測試新功能時，通過用戶體驗地圖記錄用戶的使用體驗和反饋，優(yōu)化了功能設(shè)計。
5.制定產(chǎn)品戰(zhàn)略和路線圖
戰(zhàn)略規(guī)劃：用戶體驗地圖幫助團隊從用戶角度出發(fā)，制定產(chǎn)品戰(zhàn)略和發(fā)展路線圖，確保產(chǎn)品的發(fā)展方向符合用戶需求。
優(yōu)先級管理：通過識別用戶體驗中的關(guān)鍵問題和機會，團隊可以更好地確定改進措施的優(yōu)先級。
示例：
一家健康科技公司在制定未來兩年的產(chǎn)品發(fā)展計劃時，通過用戶體驗地圖分析用戶需求和市場趨勢，確定了重點開發(fā)的功能和服務(wù)。
6.營銷和客戶支持
提升客戶支持效率：用戶體驗地圖幫助識別用戶在尋求支持時的痛點，優(yōu)化客戶支持流程，提高用戶滿意度。
優(yōu)化營銷策略：通過了解用戶在不同階段的情感和行為，團隊可以制定更有針對性的營銷策略，提升用戶轉(zhuǎn)化率。
示例：
一家SaaS公司通過用戶體驗地圖發(fā)現(xiàn)用戶在使用過程中遇到的常見問題，優(yōu)化了客戶支持流程，并根據(jù)用戶行為調(diào)整了營銷策略，提高了客戶留存率。
四、  用戶體驗地圖的組成？
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
組成用戶體驗地圖（User Experience Map）可以分為八個部分，分別是：用戶角色（Persona）、場景（Scenario）、階段（Stages）、觸點（Touchpoints）、用戶行為（Actions）、用戶情感（Emotions）、痛點（Pain Points）、機會（Opportunities）；組成部分整合到一張用戶體驗地圖上，團隊可以直觀地看到用戶旅程中的所有關(guān)鍵要素。幫助團隊全面理解用戶在整個體驗過程中的行為、情感和痛點，從而制定更有效的優(yōu)化策略，提升用戶滿意度。下面我們詳細(xì)說明這八個部分：
1. 用戶角色（Persona）
定義：用戶角色是目標(biāo)用戶的詳細(xì)描述，包括人口統(tǒng)計信息、行為模式、需求和痛點。
目的：幫助團隊聚焦特定用戶群體的需求和體驗，使設(shè)計和決策更有針對性。
示例：
年齡：25-35歲
職業(yè)：城市白領(lǐng)
興趣愛好：網(wǎng)上購物
需求和痛點：需要便捷快速的購物體驗，不喜歡復(fù)雜的結(jié)賬流程
2. 場景（Scenario）
定義：場景是用戶在某一特定情境下與產(chǎn)品或服務(wù)互動的全過程描述。
目的：幫助團隊了解用戶的具體使用情境和目標(biāo)，確保設(shè)計滿足實際使用需求。
示例：用戶在下班回家的路上，通過移動應(yīng)用購買晚餐所需的食材。
3. 階段（Stages）
定義：用戶旅程的不同階段，從開始到結(jié)束，包括用戶在每個階段的主要活動和目標(biāo)。
目的：展示用戶旅程的整體結(jié)構(gòu)，幫助團隊識別每個階段的關(guān)鍵活動和目標(biāo)。
示例：
發(fā)現(xiàn)（Discovery）、考慮（Consideration）、決策（Decision）、使用（Usage）、回訪（Return）
4. 觸點（Touchpoints）
定義：用戶在每個階段與產(chǎn)品或服務(wù)的具體接觸點，如網(wǎng)站、客服、實體店等。
目的：識別用戶與品牌互動的關(guān)鍵時刻，確保每個接觸點的體驗都得到優(yōu)化。
示例：網(wǎng)站首頁、產(chǎn)品頁面、購物車、結(jié)賬頁面、客服
5. 用戶行為（Actions）
定義：用戶在每個觸點上的具體行為，如瀏覽網(wǎng)頁、咨詢客服、購買產(chǎn)品等。
目的：展示用戶的具體操作過程，幫助團隊理解用戶的實際使用方式。
示例：瀏覽產(chǎn)品、加入購物車、填寫訂單信息、支付、聯(lián)系客服
6. 用戶情感（Emotions）
定義：用戶在每個觸點上的情感體驗，包括積極和消極的情感波動。
目的：幫助團隊理解用戶的滿意度和痛點，確保在關(guān)鍵時刻提供積極的體驗。
示例：
興奮（瀏覽產(chǎn)品時）、猶豫（選擇支付方式時）、沮喪（遇到支付問題時）、滿意（收到產(chǎn)品時）
7. 痛點（Pain Points）
定義：用戶在整個體驗過程中遇到的困難和挑戰(zhàn)。
目的：識別和解決用戶體驗中的問題，提升用戶滿意度。
示例：
結(jié)賬頁面加載慢、支付方式選擇不便、客服響應(yīng)慢
8. 機會（Opportunities）
定義：基于用戶行為、情感和痛點，識別出改善用戶體驗的潛在機會。
目的：為團隊提供改進用戶體驗的方向和具體措施，推動持續(xù)優(yōu)化。
示例：
優(yōu)化結(jié)賬頁面性能、增加支付方式、提升客服響應(yīng)速度
五、  用戶體驗地圖的制作流程
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
制作一份完整的用戶體驗地圖（User Experience Map）需要多個步驟，使用的方法也有很多，不用擔(dān)心，下面我們進行詳細(xì)步驟拆解：
1.定義目標(biāo)
目的：明確制作用戶體驗地圖的目標(biāo)和用途，比如改善特定功能的用戶體驗、優(yōu)化整體用戶旅程等。
示例：
一家電商平臺希望通過用戶體驗地圖識別用戶在結(jié)賬過程中的痛點，并制定改進措施。
2.收集用戶數(shù)據(jù)
方法：
用戶訪談：直接與用戶對話，了解他們的需求、行為和情感。
問卷調(diào)查：通過問卷收集大規(guī)模用戶數(shù)據(jù)。
用戶觀察：觀察用戶在實際使用產(chǎn)品或服務(wù)時的行為和反應(yīng)。
可用性測試：測試用戶在特定任務(wù)中的表現(xiàn)，發(fā)現(xiàn)使用障礙和痛點。
數(shù)據(jù)分析：分析網(wǎng)站或應(yīng)用的使用數(shù)據(jù)，了解用戶行為模式。
示例：
電商平臺通過用戶訪談和問卷調(diào)查收集用戶在結(jié)賬過程中的體驗和反饋。
3.定義用戶角色（Persona）
步驟：
基于收集的數(shù)據(jù)，定義主要的用戶角色，描述其特征、需求和痛點。
示例：
用戶角色A：25-35歲，城市白領(lǐng)，喜歡網(wǎng)上購物，重視便捷和快速的購物體驗。
4.描繪用戶旅程
步驟：
劃分用戶旅程的不同階段，從開始到結(jié)束，包括用戶在每個階段的主要活動和目標(biāo)。
示例：
發(fā)現(xiàn)階段：用戶在網(wǎng)上搜索和瀏覽商品。
考慮階段：用戶比較不同商品的特點和價格。
決策階段：用戶決定購買某件商品。
使用階段：用戶完成購買并等待商品送達(dá)。
回訪階段：用戶收到商品后可能會再次訪問網(wǎng)站。
5.識別觸點和用戶行為
步驟：列出用戶在每個階段的具體觸點和行為，展示用戶的操作過程。
示例：
觸點：網(wǎng)站首頁、產(chǎn)品頁面、購物車、結(jié)賬頁面、客服。
用戶行為：瀏覽產(chǎn)品、加入購物車、填寫訂單信息、支付、聯(lián)系客服。
6.記錄用戶情感
步驟：描述用戶在每個觸點上的情感體驗，包括積極和消極的情感波動。
示例：
用戶在瀏覽產(chǎn)品時感到興奮，但在結(jié)賬時因頁面加載慢而感到沮喪。
7.識別痛點和機會
步驟：基于用戶行為和情感，識別用戶在每個階段的痛點，并找出改善用戶體驗的機會。
示例：
痛點：結(jié)賬頁面加載慢、支付方式選擇不便、客服響應(yīng)慢。
機會：優(yōu)化結(jié)賬頁面性能、增加支付方式、提升客服響應(yīng)速度。
8.創(chuàng)建可視化地圖
步驟：將所有信息整合到一張可視化的用戶體驗地圖上，使團隊能夠直觀地了解用戶的完整體驗過程。
工具：
手繪草圖：用紙和筆繪制用戶體驗地圖。
數(shù)字工具：使用工具如Miro、Lucidchart、UXPressia等創(chuàng)建數(shù)字用戶體驗地圖。
9.討論和驗證
步驟：
與團隊成員共同討論用戶體驗地圖，驗證其準(zhǔn)確性和全面性。
基于討論結(jié)果進行必要的修改和調(diào)整。
示例：
團隊成員共同審查用戶體驗地圖，確認(rèn)所有觸點和用戶行為是否準(zhǔn)確，討論發(fā)現(xiàn)的痛點和改進機會。
10.制定改進措施
步驟：根據(jù)用戶體驗地圖識別的痛點和機會，制定具體的改進措施和實施計劃。
示例：
優(yōu)化結(jié)賬頁面加載速度，增加多種支付方式，提升客服響應(yīng)效率。
11.實施和跟蹤改進
步驟：實施制定的改進措施，并持續(xù)跟蹤用戶反饋和數(shù)據(jù)，評估改進效果。
示例：
電商平臺實施優(yōu)化結(jié)賬頁面的改進措施，并通過用戶反饋和數(shù)據(jù)分析評估效果，確保用戶體驗得到提升。
六、  用戶體驗地圖案例展示
通過上面的介紹，相信你已經(jīng)對用戶體驗地圖（User Experience Map）有了一定了解，是不是已經(jīng)想自己動手開始制作了，下面我們看幾個案例：
案例 1：電商平臺優(yōu)化
背景：一家電商平臺希望通過用戶體驗地圖識別用戶在結(jié)賬過程中的痛點，并制定改進措施，以提升用戶滿意度和轉(zhuǎn)化率。
 
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
用戶角色（Persona）
姓名：張女士
年齡：30歲
職業(yè)：城市白領(lǐng)
興趣：喜歡網(wǎng)上購物
需求：需要便捷快速的購物體驗
痛點：不喜歡復(fù)雜的結(jié)賬流程
觸點和用戶行為
 
1.  發(fā)現(xiàn)（Discovery）：通過搜索引擎和社交媒體廣告發(fā)現(xiàn)平臺
2.  考慮（Consideration）：瀏覽產(chǎn)品詳情，查看用戶評論
3.  決策（Decision）：將商品加入購物車
4.  購買（Purchase）：填寫訂單信息并支付
5.  回訪（Return）：查看訂單狀態(tài)，聯(lián)系客戶服務(wù)
用戶情感
發(fā)現(xiàn)：興奮和好奇
考慮：謹(jǐn)慎和比較
決策：確定和期待
購買：焦慮和滿足
回訪：滿意和信任
痛點和機會
痛點：結(jié)賬頁面加載慢，支付方式選擇不便，客服響應(yīng)慢
機會：優(yōu)化結(jié)賬頁面性能，增加支付方式，提升客服響應(yīng)速度
案例 2：健身App優(yōu)化
背景：一家健身App希望提高用戶的使用頻率和忠誠度。
 
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
用戶角色（Persona）
姓名：李先生
年齡：25歲
職業(yè)：程序員
興趣：健身
需求：需要個性化的健身計劃
痛點：課程選擇不夠個性化，計劃制定過程復(fù)雜
觸點和用戶行為
 
1.  發(fā)現(xiàn)（Discovery）：通過朋友推薦和廣告發(fā)現(xiàn)App下載并安裝App
2.  考慮（Consideration）：瀏覽課程詳情，查看評價
3.  決策（Decision）：選擇并購買課程
4.  使用（Usage）：開始使用課程進行鍛煉
5.  回訪（Return）：查看鍛煉記錄，調(diào)整計劃
用戶情感
發(fā)現(xiàn)：好奇和期待
考慮：審慎和比較
決策：確定和信心
使用：滿足和成就
回訪：滿意和忠誠
痛點和機會
痛點：課程選擇不夠個性化，計劃制定復(fù)雜
機會：增加個性化推薦功能，簡化計劃制定過程
案例 3：銀行在線服務(wù)優(yōu)化
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
背景：一家銀行希望優(yōu)化其在線服務(wù)平臺，以提高用戶的操作體驗和滿意度。
用戶角色（Persona）
姓名：王女士
年齡：45歲
職業(yè)：教師
興趣：理財
需求：需要簡單易用的在線銀行服務(wù)
痛點：在線服務(wù)平臺操作復(fù)雜，轉(zhuǎn)賬流程繁瑣
觸點和用戶行為
 
1.  發(fā)現(xiàn)（Discovery）：訪問銀行官網(wǎng)，注冊賬戶
2.  考慮（Consideration）：瀏覽平臺功能和用戶評價
3.  決策（Decision）：決定使用在線服務(wù)
4.  使用（Usage）：進行賬戶管理和轉(zhuǎn)賬操作
5.  回訪（Return）：查看交易記錄，繼續(xù)使用服務(wù)
用戶情感
發(fā)現(xiàn)：好奇和懷疑
考慮：審慎和信任
決策：確定和信心
使用：滿足和便捷
回訪：滿意和忠誠
痛點和機會
痛點：操作復(fù)雜，轉(zhuǎn)賬流程繁瑣
機會：簡化操作流程，優(yōu)化用戶界面設(shè)計
 
七、  用戶體驗地圖的總結(jié)
用戶體驗地圖（User Experience Map）作為一種強大的工具，在理解和優(yōu)化用戶體驗方面具有顯著優(yōu)勢。然而，制作和維護用戶體驗地圖也存在資源密集、復(fù)雜性和動態(tài)變化等挑戰(zhàn)。團隊在使用用戶體驗地圖時，需要平衡其優(yōu)劣勢，合理分配資源，確保地圖的準(zhǔn)確性和實用性，從而真正提升用戶體驗和產(chǎn)品成功率。
優(yōu)勢
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
 
1.  全景視角
優(yōu)點：用戶體驗地圖提供了用戶體驗的全景視角，涵蓋了用戶與產(chǎn)品或服務(wù)互動的各個階段。這種全景視角有助于團隊全面了解用戶旅程中的各個觸點和行為。
案例：電商平臺可以通過用戶體驗地圖了解用戶從瀏覽商品到完成購買的全過程，識別出所有關(guān)鍵的用戶觸點。
2.  用戶共情
優(yōu)點：通過記錄用戶在每個階段的情感體驗，團隊可以更好地理解用戶的需求和痛點，增強用戶共情。
案例：健身App可以通過用戶體驗地圖了解用戶在制定和執(zhí)行健身計劃時的情感變化，從而設(shè)計出更具吸引力的個性化健身計劃。
3.  識別痛點
優(yōu)點：用戶體驗地圖有助于識別用戶在使用產(chǎn)品或服務(wù)過程中的痛點和障礙，幫助團隊找到改進的機會。
案例：銀行在線服務(wù)平臺可以通過用戶體驗地圖識別出用戶在進行轉(zhuǎn)賬操作時遇到的困難，進而優(yōu)化轉(zhuǎn)賬流程。
4.  跨團隊協(xié)作
優(yōu)點：用戶體驗地圖作為一個可視化工具，可以促進跨團隊協(xié)作，使不同部門（如產(chǎn)品、設(shè)計、開發(fā)和市場）能夠共同參與討論和改進用戶體驗。
案例：電商平臺可以通過用戶體驗地圖匯集市場、設(shè)計和技術(shù)團隊的意見，共同制定優(yōu)化措施。
5.  數(shù)據(jù)驅(qū)動決策
優(yōu)點：用戶體驗地圖基于用戶研究和數(shù)據(jù)分析，使決策更加數(shù)據(jù)驅(qū)動，有助于制定科學(xué)合理的改進策略。
案例：健身App可以通過用戶體驗地圖中的用戶數(shù)據(jù)分析，調(diào)整課程推薦策略，提高用戶滿意度和使用頻率。
劣勢
打動用戶的關(guān)鍵：用戶體驗地圖實戰(zhàn)攻略
 
 
1.  資源密集
缺點：制作用戶體驗地圖需要大量的時間和資源，包括用戶研究、數(shù)據(jù)分析和團隊協(xié)作。
案例：中小型企業(yè)可能難以投入足夠的資源來全面制作和維護用戶體驗地圖。
2.  復(fù)雜性
缺點：用戶體驗地圖可能變得非常復(fù)雜，特別是當(dāng)用戶旅程涉及多個觸點和渠道時，可能難以全面和準(zhǔn)確地記錄所有細(xì)節(jié)。
案例：大型電商平臺的用戶旅程可能涉及網(wǎng)站、移動應(yīng)用、社交媒體等多個渠道，制作一個全面的用戶體驗地圖可能需要大量的精力。
3.  動態(tài)變化
缺點：用戶行為和市場環(huán)境是動態(tài)變化的，用戶體驗地圖需要不斷更新和維護，以保持其有效性和準(zhǔn)確性。
案例：健身App的用戶需求和市場趨勢可能隨時變化，需要定期更新用戶體驗地圖以保持相關(guān)性。
4.  主觀偏差
缺點：盡管用戶體驗地圖基于用戶數(shù)據(jù)和研究，但在數(shù)據(jù)解讀和情感記錄上可能存在主觀偏差，影響決策的準(zhǔn)確性。
案例：銀行在線服務(wù)平臺在記錄用戶情感時，可能會受到研究者的主觀影響，從而無法完全準(zhǔn)確地反映用戶真實感受。
5.  過于理想化
缺點：用戶體驗地圖有時可能過于理想化，忽略了現(xiàn)實中存在的限制和障礙，導(dǎo)致制定的改進措施難以實施。
案例：電商平臺在識別改進機會時，可能忽略了技術(shù)實現(xiàn)上的困難，導(dǎo)致優(yōu)化方案無法落地。
參考文獻：
https://medium.com/@michaeljiager/user-experience-maps-6184f4044e48
https://liviayang-ms.medium.com/%E4%B8%80%E5%88%86%E9%90%98%E8%AE%93%E4%BD%A0%E4%BA%86%E8%A7%A3%E7%94%A8%E6%88%B6%E9%AB%94%E9%A9%97%E6%AD%B7%E7%A8%8B%E5%9C%96-user-experience-map-e28a1b8817c0https://uxmastery.com/how-to-create-a-customer-journey-map/https://medium.com/art-marketing/incorporating-customer-and-user-experience-data-into-holistic-journey-maps-502ae12072ac
https://uxplanet.org/empathy-map-user-persona-and-user-flow-5299ada245c8https://medium.com/@myskill.id/persona-user-journey-map-ebd84c15ae2f?
U
 


作者：CANAAN8
鏈接：https://www.zcool.com.cn/article/ZMTYzMDA4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(546)

清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表

ui設(shè)計分享達(dá)人

合理使用數(shù)據(jù)圖表可以幫助用戶更好地理解復(fù)雜的數(shù)據(jù)，提高用戶體驗和數(shù)據(jù)的可讀性。選擇合適的圖表類型并遵循最佳設(shè)計實踐是確保圖表有效傳達(dá)信息的關(guān)鍵。
數(shù)據(jù)圖表是一種非常重要的可視化工具，它能夠
幫助用戶更直觀地理解和分析數(shù)據(jù)。
借助于圖形化的手段，清晰、快捷有效的傳達(dá)與溝通信息。從用戶的角度，數(shù)據(jù)可視化可以讓用戶快速抓住要點信息，讓關(guān)鍵的數(shù)據(jù)點從人類的眼睛快速通往心靈深處。數(shù)據(jù)可視化一般會具備以下幾個特點：準(zhǔn)確性、創(chuàng)新性、簡潔性。
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 

 


作者：Miao_C
鏈接：https://www.zcool.com.cn/article/ZMTYzMjk4NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(329)

Web端設(shè)計語言庫——數(shù)據(jù)可視化

ui設(shè)計分享達(dá)人

一、可視化原則
數(shù)據(jù)可視化是把相對復(fù)雜、抽象的數(shù)據(jù)通過可視化手段，表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進數(shù)據(jù)信息的傳播和應(yīng)用。
Dreawer Design 團隊總結(jié)了以下四個可視化原則，供設(shè)計者參考及使用：
1. 準(zhǔn)確
數(shù)據(jù)圖表需精準(zhǔn)、如實地反應(yīng)數(shù)據(jù)信息的變化特征。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
2. 清晰
讓設(shè)計服務(wù)于數(shù)據(jù)內(nèi)容，給用戶以最為清晰、明確、迅捷的數(shù)據(jù)展示。用戶看到可視化圖表時，應(yīng)能在 5 秒內(nèi)了解到它的用途，而不是花幾分鐘都不能理解各個數(shù)據(jù)的含義。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
3. 簡單
可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
下面為圖標(biāo)類型與認(rèn)知成本對比：
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
4. 美觀
優(yōu)秀的數(shù)據(jù)可視化界面，會有一套非常嚴(yán)謹(jǐn)一致的版面。這里的一致性需要考慮到布局、結(jié)構(gòu)和內(nèi)容。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
二、圖表解構(gòu)
1. 構(gòu)成元素
我們從標(biāo)題、坐標(biāo)軸、圖例、標(biāo)簽、提示信息、數(shù)據(jù)圖形這 6 個大類，對數(shù)據(jù)圖表進行進一步元素拆解及闡述。設(shè)計過程中，需遵循可視化原則來精簡數(shù)據(jù)圖表，讓用戶快速獲取圖表中的關(guān)鍵信息，完成任務(wù)。
 
圖表構(gòu)成 6 大類，元素細(xì)分：
1. 標(biāo)題：圖表標(biāo)題；
2. 坐標(biāo)軸：X/Y軸線、刻度線、網(wǎng)格線、X/Y軸標(biāo)題、X/Y軸標(biāo)簽；
3. 標(biāo)簽：數(shù)據(jù)點、引導(dǎo)線、（文本）數(shù)據(jù)值；
4. 提示信息；
5. 圖例；
6. 數(shù)據(jù)圖形：線、矩形、扇形、環(huán)形等。
下面為數(shù)據(jù)圖表的基本構(gòu)成元素示例（為了便于觀察，某些字母做了大寫處理）：
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
除了以上的常規(guī)元素，還有常用于餅圖、環(huán)形圖中的“引導(dǎo)線”：
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
2. 標(biāo)題
標(biāo)題是概括圖表主題的說明文字，一個明確、精簡的標(biāo)題可以迅速讓讀者理解圖表要表達(dá)的內(nèi)容。
2.1 位置
一般位于數(shù)據(jù)圖表卡片的左上方。
2.2 使用建議
標(biāo)題需言簡意賅、符合圖表主題；盡量控制在 20 個字以內(nèi)，標(biāo)題寬度盡量不要超過卡片寬度。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
2.3超長處理
當(dāng)標(biāo)題超過長出卡片寬度時，省略標(biāo)題中間的文字，保住首尾，如“我是...標(biāo)題”。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
 
3. 坐標(biāo)軸
3.1 坐標(biāo)系
坐標(biāo)軸包含在坐標(biāo)系的概念里，因此，我們需要先了解坐標(biāo)系。坐標(biāo)系是能夠使每個數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。
 
數(shù)據(jù)可視化中，最常用的二維坐標(biāo)系有兩種：
笛卡爾坐標(biāo)系：即直角坐標(biāo)系，是由相互垂直的兩條軸線構(gòu)成。常用于柱狀圖、條形圖、折線圖、面積圖等。
極坐標(biāo)系：由極點、極軸組成，坐標(biāo)系內(nèi)任何一個點都可以用極徑 r 和夾角 θ（逆時針為正）表示。常用于餅圖、圓環(huán)圖、雷達(dá)圖等。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
補充說明：
1. 坐標(biāo)軸由定義域軸（X 軸）和值域軸（Y 軸）組成。條形圖中，定義域軸為 Y 軸，值域軸為 X 軸。
2. X軸為水平方向的橫軸，Y 軸為垂直方向的豎軸。以下主要針對笛卡爾坐標(biāo)系的坐標(biāo)軸構(gòu)成進行分析：
3.2 坐標(biāo)軸
定義：坐標(biāo)軸指二維空間中統(tǒng)計圖表中的軸，是坐標(biāo)系的構(gòu)成部分，它用來定義坐標(biāo)系中數(shù)據(jù)在方向和值之間的映射關(guān)系。
構(gòu)成元素細(xì)分：X/Y 軸線、刻度線、網(wǎng)格線、X/Y 軸標(biāo)題、X/Y 軸標(biāo)簽。
3.3 軸類型
根據(jù)對應(yīng)變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，可以把坐標(biāo)軸分為：分類軸、時間軸、連續(xù)軸三大類。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
3.4 X/Y 軸線
顏色層級：X/Y軸線要比網(wǎng)格線層級高、顏色深，這樣能讓圖表有主次區(qū)分。
使用建議：有網(wǎng)格線時，柱狀圖/折線圖會隱藏 Y 軸線，條形圖則是隱藏 X 軸線，以達(dá)到信息降噪、突出重點的目的。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
3.5 刻度線
軸刻度線是軸線上的小線段， 用于指示數(shù)值標(biāo)簽在坐標(biāo)軸上的具體位置。軸刻度線有 3 種放置方式：置內(nèi)、置中（即交叉方式）、置外。
位置建議：刻度線置中/置內(nèi)時，可能會和網(wǎng)格線、數(shù)據(jù)圖形重疊，所以建議將刻度線置于數(shù)值坐標(biāo)軸外側(cè)，以呈現(xiàn)最佳顯示效果。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
顯示建議：
折線圖：刻度線、X/Y 軸標(biāo)簽、數(shù)據(jù)點需要保持在同一垂直線上；
柱狀圖/條形圖：由于單個柱子有很強的對應(yīng)關(guān)系，此時可以隱藏刻度線；
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
 
3.6 網(wǎng)格線
定義：網(wǎng)格線是用來輔助圖表優(yōu)化映射關(guān)系的，我們需要弱化網(wǎng)格線的視覺效果，來增加數(shù)據(jù)的可閱讀性。
作用：1. 延伸數(shù)值刻度至可視化對象中，以便觀察數(shù)據(jù)值的大??；2. 增加可視化對象之間的對比觀察度。
使用建議 1 ：使用網(wǎng)格線時，需遵從主次原則，以軸線為主、網(wǎng)格線為輔；樣式上可采用實線或虛線；避免顏色過重、使用純黑/純白色。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
使用建議 2 ：網(wǎng)格線一般跟隨值域軸的位置單向顯示，柱狀圖、折線圖等采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
3.7 X/Y 軸標(biāo)題
軸標(biāo)題主要用于說明坐標(biāo)軸數(shù)據(jù)組的含義，也可理解為“軸單位”。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽等已能充分表達(dá)數(shù)據(jù)含義時，可隱藏軸標(biāo)題。
這樣處理體現(xiàn)了奧卡姆剃刀定律：如無必要，勿增實體。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
3.8 X/Y 軸標(biāo)簽
軸標(biāo)簽是對當(dāng)前某一組數(shù)據(jù)的內(nèi)容標(biāo)注，用于提高數(shù)據(jù)的可讀性。
以下從 X 軸標(biāo)簽、Y軸標(biāo)簽兩方面進行分析：
a.  X 軸標(biāo)簽
X 軸標(biāo)簽的設(shè)計重點在顯示規(guī)則上?？ㄆ瑢挾冗^窄、標(biāo)簽過多、名稱過長時，X 軸標(biāo)簽便會出現(xiàn)顯示問題（如標(biāo)簽重疊等）。
為了解決顯示問題，我們從連續(xù)/時間軸標(biāo)簽（數(shù)值類）、分類軸標(biāo)簽（文本類）兩方面進行分析：
 
  •  
    連續(xù)/時間軸標(biāo)簽
顯示規(guī)則：建議等分抽樣顯示、旋轉(zhuǎn)；不尾部省略。
建議等分抽樣：連續(xù)/時間軸，通常由一組等差數(shù)列組成，具有規(guī)律性，缺失的數(shù)據(jù)用戶會在腦海中自動補全。所以建議用等分抽樣來避免標(biāo)簽的重疊問題。
注意：等分抽樣盡量保留首尾數(shù)據(jù)標(biāo)簽；隨機抽樣沒有規(guī)律，會影響用戶的判斷及辨認(rèn)，不建議采取隨機抽樣顯示。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
連續(xù)/時間軸標(biāo)簽是由“關(guān)鍵數(shù)值”組成的標(biāo)注點，一般都明確精簡，尾部省略會影響用戶對關(guān)鍵數(shù)值的辨認(rèn)。
為了保證標(biāo)簽的辨識度，我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 。極端情況下（圖表寬度極窄），可以同時進行旋轉(zhuǎn)+抽樣。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
  •  
    分類軸標(biāo)簽
顯示規(guī)則：建議旋轉(zhuǎn)顯示；不建議抽樣顯示。
分類軸由幾個離散數(shù)據(jù)標(biāo)簽組成，標(biāo)簽之間獨立存在，無緊密邏輯關(guān)系，用戶無法自動補全缺失信息。因此，不能采取抽樣顯示，應(yīng)盡量展示全部標(biāo)簽的全部文本。
若標(biāo)簽橫向展示空間不夠（文字重疊），我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 來達(dá)到預(yù)期顯示效果。若通過旋轉(zhuǎn)無法滿足需求，可使用條形圖，將分類軸放在Y軸。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
旋轉(zhuǎn)方向說明：通常情況下，用戶的閱讀視線為從左至右、從上到下。因此，標(biāo)簽順時針旋轉(zhuǎn) 45° 更符合用戶的瀏覽習(xí)慣。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
b. Y 軸標(biāo)簽
Y 軸標(biāo)簽的設(shè)計重點在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長標(biāo)簽寬度進行自適應(yīng)縮放。
  •  
    軸標(biāo)簽的數(shù)量
使用建議：根據(jù)米勒定律（7±2 法則），Y 軸標(biāo)簽數(shù)量應(yīng)控制在 5-9 個的范圍內(nèi)；Web頁面中，Y 軸常用標(biāo)簽數(shù)為：6 或 7（含標(biāo)簽0）。
軸標(biāo)簽的數(shù)量越多，橫向網(wǎng)格線就會越多。過多的軸標(biāo)簽及網(wǎng)格線會造成元素冗余，違背了清晰、準(zhǔn)確的可視化原則，也不利于圖表信息的表達(dá)及閱讀。
對齊方式：右對齊
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
  •  
    軸標(biāo)簽的取值范圍
基準(zhǔn)線： Y 軸標(biāo)簽取值應(yīng)從 0 基線開始，以反映數(shù)據(jù)的真實性。如果展示被截斷的 Y 軸數(shù)據(jù)，會導(dǎo)致用戶做出錯誤的判斷。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
  •  
    軸標(biāo)簽的數(shù)據(jù)格式
使用建議 1： 標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
4. 數(shù)據(jù)標(biāo)簽
數(shù)據(jù)標(biāo)簽是對數(shù)據(jù)點對應(yīng)數(shù)值的標(biāo)注，用于直接觀察每個數(shù)據(jù)點的具體數(shù)值。
若圖表主要是用來看趨勢變化、占比大小等，則不需要顯示數(shù)據(jù)標(biāo)簽。若想精確了解每組數(shù)據(jù)的具體數(shù)值，則可以顯示數(shù)據(jù)標(biāo)簽。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
4.1 位置
數(shù)據(jù)標(biāo)簽位于數(shù)據(jù)點的上方。
4.2 顯示規(guī)則
在不同類型的圖表中，數(shù)據(jù)標(biāo)簽的顯示規(guī)則不同。我們可以根據(jù)數(shù)據(jù)圖形、數(shù)據(jù)值的特性，選擇合適的顯示方式，提高圖表的準(zhǔn)確性。
a. 柱狀圖
  •  
    基礎(chǔ)柱狀圖
    ：數(shù)據(jù)標(biāo)簽可顯示在數(shù)據(jù)圖形內(nèi)部、外部。
數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；數(shù)據(jù)標(biāo)簽超長時，旋轉(zhuǎn) 90°；圖形高度 < 數(shù)據(jù)標(biāo)簽高度時，不顯示數(shù)據(jù)標(biāo)簽。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
  •  
    分組柱狀圖
    ：數(shù)據(jù)標(biāo)簽可顯示在數(shù)據(jù)圖形內(nèi)部、外部。顯示在內(nèi)部的數(shù)據(jù)標(biāo)簽顯示寬度不夠時，解決方案同上。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
  •  
    堆疊柱狀圖
    ：數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)圖形內(nèi)部。
數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；數(shù)據(jù)標(biāo)簽超長時，旋轉(zhuǎn) 90°；圖形高度 < 數(shù)據(jù)標(biāo)簽高度時，不顯示數(shù)據(jù)標(biāo)簽。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
b. 條形圖
數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；圖形寬度 < 數(shù)據(jù)標(biāo)簽高度時，不顯示數(shù)據(jù)標(biāo)簽；條形圖高度需 >= 數(shù)據(jù)標(biāo)簽高度。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
基礎(chǔ)、分組條形圖的數(shù)據(jù)標(biāo)簽也可以顯示在圖形外部：
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
c. 折線圖
數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)點的上方。
圖表寬度過窄，數(shù)據(jù)點多且密時，相鄰的數(shù)據(jù)標(biāo)簽會出現(xiàn)重疊的問題。此時，我們會采用抽樣的方式顯示數(shù)據(jù)標(biāo)簽。鼠標(biāo)懸停數(shù)據(jù)點，顯示隱藏的數(shù)據(jù)標(biāo)簽。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
d. 餅圖、環(huán)形圖
數(shù)據(jù)標(biāo)簽顯示在圖形內(nèi)部、外部均可。
由于扇形有角度，且形狀相對不規(guī)則，對數(shù)據(jù)標(biāo)簽的文本長度包容度較低，環(huán)形更是如此。所以，當(dāng)扇/環(huán)形分割過多、面積較小時，建議將數(shù)據(jù)標(biāo)簽顯示在圖形外部。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
當(dāng)然，我們也可以內(nèi)外部結(jié)合使用：
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
e. 數(shù)據(jù)標(biāo)簽顏色
數(shù)據(jù)標(biāo)簽顯示在圖形內(nèi)部時，圖形為背景，數(shù)據(jù)標(biāo)簽為前景。此時，數(shù)據(jù)圖形作為背景色，會影響到數(shù)據(jù)標(biāo)簽的顯色度及易讀性。
為了確保良好的可讀性，我們通過對圖形顏色 HS 值的判斷，來決定文字的顏色。這樣對比度就在可控范圍內(nèi)，不會出現(xiàn)可讀性低的問題。
Web端設(shè)計語言庫——數(shù)據(jù)可視化
 
 
由于篇幅問題，剩余內(nèi)容接下一篇文章展示
 


作者：布魯星人
鏈接：https://www.zcool.com.cn/article/ZMTYzNzI0NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(298)

從對話到嵌入：多元場景AI形態(tài)淺析

ui設(shè)計分享達(dá)人

前言
 
當(dāng)我們一次次被AI技術(shù)帶來的變革所驚艷，當(dāng)ChatGPT一次次宣布其能力已經(jīng)突破了人類的想象，你是否注意到現(xiàn)有產(chǎn)品與AI融合的新趨勢？值得注意的是，新技術(shù)的出現(xiàn)也一定帶來了新的交互體驗。本文將以多種產(chǎn)品場景為例，梳理PC端多種主流的AI融合形態(tài)，希望能給大家?guī)韱l(fā)。
 
 
多元場景下的主流AI形態(tài)
 
目前主流AI產(chǎn)品有如下3種主要形態(tài)，分別為沉浸式的AI智能體(Agent)、伴隨式的AI副駕駛(Co-pilot)、嵌入式的AI場景化嵌入(Embedding)。這3種形態(tài)在能力、界面、操作體驗和適用場景都上存在顯著差異。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
 
一、沉浸式形態(tài)
 
AI智能體(Agent)—功能強大的AI伙伴
 
一個富有主動性的獨立伙伴，輸出的結(jié)果不完全依賴用戶的輸入，啟動AI問詢后有2種主流的形態(tài)：
 
①「對話智能體」 以對話流的形式展示信息，用戶通過在當(dāng)前語境下進行追問獲取最終結(jié)果；
 
②「目標(biāo)智能體」用戶輸入指令后，一次性給予用戶“靠譜”的結(jié)果，配有側(cè)邊欄可進行多種輔助操作。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
1.對話智能體示例—Gemini
 
以谷歌Gemini產(chǎn)品為例，其作為對話流的智能體，為滿足搜索場景，具有以下特征：
 
1）冷啟頁Prompt形象化
 
相較于2023年初Gemini冷啟時的樣式，最近改版中冷啟的Prompt卡片變得形象化，當(dāng)然我們也在其他Agent產(chǎn)品中觀察到了這一變化。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
2）多模態(tài)內(nèi)容
 
理解用戶的文字意圖，依據(jù)要求自主生成多模態(tài)卡片是對話智能體的主要特征之一，該功能可以極大地豐富AI反饋的多樣性，并能提高信息傳達(dá)的效率。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
3）信息索引的顯示
 
信息索引的展示是提升AI回答權(quán)威性和透明度的關(guān)鍵因素。然而，直接在閱讀內(nèi)容中嵌入索引標(biāo)簽，可能在某些情況下影響用戶的閱讀連貫性。以Gemini為例，當(dāng)前的設(shè)計允許用戶在卡片下方手動啟用索引信息，這種靈活性平衡了信息的可信度和閱讀體驗，適合多數(shù)日常場景。
 
當(dāng)然，從設(shè)計角度考慮，某些情況下默認(rèn)收起索引并非最佳選擇。在用戶高度依賴信息準(zhǔn)確性的場景中，如金融或醫(yī)學(xué)領(lǐng)域，索引的可見性將會直接影響信任感。對于深入研究或延展閱讀需求較高的用戶，即時查看索引能更高效地獲取信息來源。
 
與之類似，在涉及多方信息傳播的業(yè)務(wù)分發(fā)場景，清晰可見的索引有助于減少誤解，提高效率。在這些情況下，索引的默認(rèn)展開不僅強化了內(nèi)容的可靠性，也更好地支持了用戶的深入需求。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
2.目標(biāo)智能體示例—Perplexity
 
Perplexity作為最近廣受好評的AI搜索工具，相較于Gemini，它更注重給予用戶最精準(zhǔn)的答案。基于RAG技術(shù)的Perplexity為用戶提供了一種新的“確定性”，而鑒于這種特征，Perplexity擁有雙面板的形態(tài)，可以對當(dāng)前確定性的信息進行深化處理。
 
1 ）輸入即結(jié)果
 
相較于Gemini等對話智能體產(chǎn)品，AI Agent用戶需要反復(fù)追問結(jié)果，而在體驗Perplexity時的無對話場景感，更傾向于一次性給予用戶“靠譜”的答案。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
2）側(cè)分欄—信息補充
 
因為Perplexity一次就可以給予用戶最“準(zhǔn)確”的信息，用戶可能沒有追問的必要，但可能會有對于當(dāng)前問答進行深度搜索的需求，這時會有右側(cè)GUI分欄的出現(xiàn)，以便用戶進行輔助搜索。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
3.思考：給予用戶最佳答案的AI形態(tài)
 
在使用體驗上，Gemini與Perplexity雖然走向兩個不同的流派，但目的都是為了給用戶呈現(xiàn)最佳的搜索結(jié)果。Gemini就像一位富有想象力的對話者，用戶在對話中通過不斷地追問來獲得最佳的結(jié)果，而Perplexity更像一個AI版的知乎，它堅持“用戶不會犯錯”原則，冷靜客觀地為用戶提供最精準(zhǔn)的答案。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
 
二、伴隨式形態(tài)
 
AI副駕駛(Copilot)—被動性的AI助手
 
這種形態(tài)下的AI更多扮演“副駕駛”的角色，為用戶提供建議和幫助，依賴用戶精準(zhǔn)的指令對當(dāng)前內(nèi)容窗口進行操作，一般以側(cè)邊欄形式展示，目前的Office文檔類產(chǎn)品多采用此類形態(tài)。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
1.AI副駕駛產(chǎn)品示例-Office
 
在近年的開發(fā)者大會中，微軟提到最多的詞就是“Copilot”，力推將AI技術(shù)快速融入到旗下應(yīng)用中。其中，Office軟件就融入了AI副駕駛的理念，該形態(tài)下的AI主要為用戶提供產(chǎn)品的創(chuàng)作輔助、信息的查詢總結(jié)等功能。
 
1）當(dāng)前場景下的AI助手
 
AI的能力默認(rèn)被限定在當(dāng)前場景下，滿足用戶問詢、信息檢索、創(chuàng)作輔助等操作。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
2）被動性AI助手
 
Copilot無法自動執(zhí)行操作去修改當(dāng)前頁面內(nèi)容，需要用戶確認(rèn)后才可執(zhí)行，用戶執(zhí)行操作后會在側(cè)邊欄內(nèi)顯示操作記錄與撤銷操作的入口。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
3）輔助Prompt
 
由于AI副駕駛的特性，常常需要準(zhǔn)確的Prompt才能執(zhí)行符合預(yù)期的操作，這對大部分用戶來說門檻較高，因此在使用時需要及時給予用戶合理的聯(lián)想Prompt，輔助用戶決策。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
2.思考：提高用戶工作效率的AI助手
 
作為被動性AI助手，用戶即使不使用也不會影響其在整體頁面中的操作，AI更多承擔(dān)的是提升用戶工作效率過程中的輔助角色。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
 
三、嵌入式形態(tài)
 
AI場景化嵌入(Embedding)
 
嵌入式AI主要聚焦特定場景的AI輔助，如AI即時性地生成對當(dāng)前評論的回復(fù)，此類交互無固定形態(tài)，AI會在用戶進行高頻重要操作時即時觸發(fā)。
 
在多元化場景中，嵌入式AI的設(shè)計相較于前兩類更加靈活和輕量，通常以LGUI(輕量化用戶界面)為核心，強調(diào)用戶與AI之間的無縫銜接與高效互動。
 
與對話式或結(jié)構(gòu)化阿拉丁模式相比，嵌入式AI的設(shè)計思路更加通暢，摒棄了復(fù)雜的交互流程，更注重場景中的引導(dǎo)性和即時反饋，幫助用戶在合適的時機獲取所需信息。
 
從對話到嵌入：多元場景AI形態(tài)淺析
 
 
 
1.嵌入式AI示例—One Drive
 
以微軟One Drive為例，嵌入式AI不僅會在用戶整理文件時提供智能建議，還能在用戶分享文件時根據(jù)歷史記錄和內(nèi)容精準(zhǔn)推薦分享對象。這種場景化的嵌入，展現(xiàn)了如何通過LGUI設(shè)計最大化提高效率，而非依賴傳統(tǒng)對話或復(fù)雜交互。
 
場景一: 文件整理AI建議
 
在AI為相關(guān)文件創(chuàng)建新文件夾的情境中，執(zhí)行完成后，它會主動詢問用戶是否需要將其他可能相關(guān)的文件一并移入到新建的文件夾中，以幫助用戶進一步整理文件。AI能夠基于文件內(nèi)容的上下文，敏銳地判斷出哪些文件可能屬于同一類別，進而為用戶提供便捷的一鍵整理服務(wù)。
 
場景二: 智能分享建議
 
當(dāng)用戶準(zhǔn)備在One Drive中分享文件時，AI助手會根據(jù)文件內(nèi)容和用戶的歷史分享記錄，預(yù)測出最可能需要分享的對象名單，為用戶精準(zhǔn)推薦受眾人員。智能分享建議可以極大地節(jié)省用戶挑選分享對象的時間。
 
基于上述2個例子，我們可以對嵌入式AI有進一步的思考：
 
合理的嵌入式AI操作只在用戶進行重要操作時被“激活”，能夠在當(dāng)前場景下即時給予用戶建議；
 
嵌入式AI一般情況下點擊大于錄入，方便用戶快速做出決定；
 
設(shè)計此類交互時，需要深度理解用戶使用場景，AI的喚起不應(yīng)干擾用戶對于主流程的操作體驗。
 
2.思考：效率導(dǎo)向的AI嵌入設(shè)計
 
對于普通設(shè)計師來說，容易在純對話交互和結(jié)構(gòu)化設(shè)計兩端搖擺，可能忽視了效率也是設(shè)計的重要原則。嵌入式AI的設(shè)計啟示在于“什么合適用什么”，既不過度依賴復(fù)雜的對話式設(shè)計，也不拘泥于結(jié)構(gòu)化方案。關(guān)鍵在于聚焦場景需求，以最簡便和有效的方式幫助用戶完成任務(wù)。因此，在嵌入式AI的設(shè)計中，保持界面的簡潔與流暢，同時結(jié)合輕量化的LGUI原則，才是提升用戶體驗的關(guān)鍵。最終目標(biāo)始終是“效率”，無論采用何種形式，選擇最適合當(dāng)前場景的交互模式才是設(shè)計的核心。
 
 
未來的AI設(shè)計
 
多樣化形態(tài)下的平衡與共生
 
隨著AI技術(shù)的迅速發(fā)展，各種AI形態(tài)在不同場景中不斷涌現(xiàn)，如上述討論的沉浸式、伴隨式、嵌入式等設(shè)計形態(tài)。無論是主動性強的智能體、輔助型的副駕駛，還是輕量化的嵌入式方案，每一種設(shè)計都展現(xiàn)出其獨特的價值。
 
然而，在這些多樣化的形態(tài)背后，我們?nèi)孕杌貧w一個核心問題：什么樣的AI設(shè)計才是理想的？
 
  •  
    首先，沒有一種AI形態(tài)能夠完美適用所有場景，真正成功的AI設(shè)計應(yīng)始終圍繞需求展開。在效率為先的原則下，設(shè)計師需要深刻理解用戶在不同情境下的核心需求，并選擇最適合的交互形態(tài)。復(fù)雜的對話式和高度結(jié)構(gòu)化的設(shè)計并非萬能，嵌入式AI的靈活性和輕量化設(shè)計則為平衡提供了啟發(fā)—服務(wù)于效率與體驗，簡化不必要的交互，專注于解決用戶的實際問題。
 
  •  
    其次，AI設(shè)計的多樣性并不意味著割裂，而是指向共生與融合。未來，AI技術(shù)將進一步打破不同形態(tài)之間的界限，形成更加靈活、動態(tài)的交互模式。這種融合不僅依賴更智能的技術(shù)，還要求設(shè)計師在實際應(yīng)用中敏銳捕捉用戶需求，提供真正有價值的解決方案。
 
  •  
    最后，設(shè)計的核心原則是以用戶為中心，強調(diào)合適性，而非追求炫技。無論是大型智能體的復(fù)雜場景處理，還是嵌入式AI的場景化介入，優(yōu)秀的設(shè)計應(yīng)始終聚焦用戶需求，在不同場景中找到最優(yōu)平衡點。隨著技術(shù)的進化，設(shè)計師需要更加專注于如何將AI技術(shù)自然、無縫地融入用戶的工作與生活，使每一次交互都變得更加高效和愉快。
 
在未來，AI的形態(tài)將會更加多元，但不變的仍是設(shè)計師對效率、用戶價值和場景適配的持續(xù)探索。希望設(shè)計師在面對AI設(shè)計時，始終尋求既符合用戶需求又能提升效率的最佳方案。


作者：百度MEUX
鏈接：https://www.zcool.com.cn/article/ZMTYzMzkxNg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(459)

用戶體驗一致性思考

ui設(shè)計分享達(dá)人

前言
在團隊內(nèi)部，我們已確立了一套設(shè)計規(guī)范，在日常項目中使用設(shè)計規(guī)范輸出變的高效、統(tǒng)一。然而，在實際操作中，不可避免地會遇到一些特殊情況：某些客戶提出的個性化需求并不完全契合既定的設(shè)計規(guī)范,這些促使我們不得不在保持設(shè)計一致性的基礎(chǔ)上進行靈活調(diào)整。因此，深入反思并優(yōu)化一致性原則的應(yīng)用策略顯得尤為重要。我們需要探索如何在堅守設(shè)計規(guī)范核心精神的同時，靈活應(yīng)對多變的需求，確保設(shè)計既保持統(tǒng)一和諧，又能滿足特定場景下的獨特需求，從而實現(xiàn)用戶體驗與品牌價值的雙重提升。
 
用戶體驗一致性思考
 
 
用戶體驗一致性思考
 
 
在UI/UX設(shè)計中，雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四。這一原則強調(diào)在界面和交互設(shè)計上需要遵循既定的規(guī)則，無論是在應(yīng)用內(nèi)部還是跨平臺之間。
背后的心理學(xué)原理——重復(fù)定律，強調(diào)了信息重復(fù)對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的，信息的有效保留離不開重復(fù)接觸。一致性的應(yīng)用正是這一原理的生動實踐，通過不斷重復(fù)統(tǒng)一的設(shè)計元素與模式，強化用戶對產(chǎn)品的認(rèn)知與記憶，從而提升整體的用戶滿意度與忠誠度。
艾賓浩斯遺忘曲線
艾賓浩斯遺忘曲線
 
用戶體驗一致性思考
 
 
用戶側(cè)
1、用戶學(xué)習(xí)曲線：
一致的UI/UX設(shè)計可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時，他們可以快速理解并準(zhǔn)確預(yù)測如何與界面進行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。
2、提升可用性：
一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁面或功能之間找到相似的設(shè)計元素和交互模式時，他們可以輕松地將已有的知識和經(jīng)驗應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯誤和迷失，提供更好的導(dǎo)航和流暢的體驗。
3、品牌認(rèn)可度：
一致的UI/UX設(shè)計有助于樹立品牌形象和增強品牌認(rèn)可度。通過在不同的渠道和平臺上保持一致的設(shè)計元素、標(biāo)識和視覺風(fēng)格，品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性，從而增加品牌的信任和忠誠度。
4、用戶滿意度：
一致性直接影響用戶的滿意度。當(dāng)用戶在使用應(yīng)用程序或網(wǎng)站時感受到一致的設(shè)計和交互方式時，他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號，讓用戶感到被關(guān)注和重視。這種積極的用戶體驗有助于提升用戶滿意度，并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
 
用戶體驗一致性思考
 
 
產(chǎn)研側(cè)
1. 降低設(shè)計成本，提高開發(fā)效率
無論是設(shè)計還是開發(fā)，復(fù)用已有的組件資源，保持界面的一致性可以有效地減少設(shè)計的投入，避免不必要的設(shè)計分歧點。
而在開發(fā)階段，可以避免重復(fù)造輪子，提高開發(fā)的效率，保證落地效果，也可以減少上線前設(shè)計走查、測試的工作量。
2. 形成一致的設(shè)計風(fēng)格
根據(jù)原子設(shè)計理論，通過原子組件的一致性，可以構(gòu)建出統(tǒng)一的界面框架、布局，形成統(tǒng)一風(fēng)格和用戶交互認(rèn)知，從而更好地保證用戶體驗質(zhì)量。
 
用戶體驗一致性思考
 
 
色彩
色彩作為一種兼具物理屬性與感官享受的復(fù)雜現(xiàn)象，其本質(zhì)在于光波在人體視網(wǎng)膜上的特定波長被反射或吸收后，所引發(fā)的視覺感知結(jié)果。在設(shè)計領(lǐng)域，色彩的選擇與運用不僅是視覺藝術(shù)的展現(xiàn)，更是品牌身份與個性的直接體現(xiàn)。諸如餓了么標(biāo)志性的藍(lán)色、美團鮮明的黃色、以及京東熱情的紅色等，這些品牌專屬色彩不僅構(gòu)成了品牌識別系統(tǒng)的重要組成部分，還通過其高度的一致性，在視覺層面上構(gòu)建起強烈的品牌認(rèn)知，營造出統(tǒng)一和諧的視覺體驗。
色彩的一致性策略在品牌塑造中發(fā)揮著不可估量的作用，它能夠有效增強品牌的記憶度與辨識度，深化品牌形象在消費者心中的烙印，進而提升產(chǎn)品的市場吸引力和用戶忠誠度。同時，這種策略還促進了設(shè)計元素間的和諧共存，包括按鈕、圖標(biāo)、字體、標(biāo)簽、背景、以及關(guān)鍵視覺元素如Banner等，均能在統(tǒng)一的色彩體系下實現(xiàn)視覺上的連貫與流暢，極大地提升了產(chǎn)品的可用性、無障礙性，以及用戶在使用過程中的整體滿意度與交互體驗。
 
用戶體驗一致性思考
 
 
字體
字體作為設(shè)計中不可或缺的核心要素，其獨特性在于能夠精準(zhǔn)地塑造文字的視覺形象，涵蓋形狀、尺寸、粗細(xì)、字間距等多維度特征。這些特征共同構(gòu)建了一種獨特的文字風(fēng)格，不僅承載著信息的傳遞功能，更在無形中引導(dǎo)著用戶的視覺流程，影響著信息的接收與理解深度。因此，在設(shè)計過程中，合理選擇與應(yīng)用字體顯得尤為關(guān)鍵。
 
字體類型的多樣性，如有襯線字體與無襯線字體的對比，不僅體現(xiàn)了風(fēng)格上的差異，還隱含了不同的閱讀體驗與情感表達(dá)。字體的粗細(xì)變化（如細(xì)體、常規(guī)、粗體等）更是能夠強調(diào)文本的重要性層級，增強信息的層次感與可讀性。此外，字重的調(diào)整也是塑造視覺焦點、引導(dǎo)視線流動的有效手段，對于提升設(shè)計的整體美觀度和信息傳達(dá)效率具有不可小覷的作用。
 
然而，在實際的開發(fā)與實現(xiàn)過程中，若不加節(jié)制地使用多種字體，不僅會顯著增加頁面的加載時間，影響用戶體驗的流暢性，還可能因風(fēng)格不統(tǒng)一而導(dǎo)致頁面顯得雜亂無章，破壞整體設(shè)計的和諧感。因此，制定一套統(tǒng)一、規(guī)范的字體使用策略顯得尤為重要。這不僅有助于提升開發(fā)效率，減少后期更新迭代的復(fù)雜度，還能有效避免資源浪費，確保設(shè)計作品在視覺上的一致性與專業(yè)性。
 
用戶體驗一致性思考
 
 
圖標(biāo)
 
圖標(biāo)作為用戶界面設(shè)計中至關(guān)重要的元素，風(fēng)格直接影響到用戶的使用體驗與對產(chǎn)品的整體印象。圖標(biāo)以其簡潔、直觀且富有表現(xiàn)力的特點，在快速傳達(dá)信息、引導(dǎo)用戶操作方面發(fā)揮著不可替代的作用。在設(shè)計中，圖標(biāo)的設(shè)計與應(yīng)用更是需要精心考量，以確保其既能夠準(zhǔn)確傳達(dá)信息，又能夠與整體設(shè)計風(fēng)格保持一致，從而營造出專業(yè)、和諧且易于使用的界面環(huán)境。
 
設(shè)計中視覺上保持統(tǒng)一包括圖標(biāo)的大小、形狀、色彩以及設(shè)計風(fēng)格等多個方面，能夠增強用戶的認(rèn)知連貫性，降低學(xué)習(xí)成本，提升使用效率。相反，如果圖標(biāo)風(fēng)格混雜，不僅會讓界面顯得雜亂無章，還會給用戶帶來困惑和不安，進而影響其對產(chǎn)品專業(yè)性和安全性的信任。
用戶體驗一致性思考
 
 
按鈕
按鈕設(shè)計應(yīng)統(tǒng)一于項目風(fēng)格，無論是圓形、矩形、圓角矩形還是特定形狀，保持一致性是關(guān)鍵。統(tǒng)一的按鈕樣式不僅彰顯專業(yè)性，還能增強用戶信任，確保體驗連貫。過多變化的按鈕樣式會擾亂用戶界面，降低操作直觀性，甚至讓用戶誤以為自己已離開應(yīng)用環(huán)境。因此，精心設(shè)計的統(tǒng)一按鈕樣式對提升用戶體驗至關(guān)重要。
 
排版
設(shè)計中的排版一致性對于構(gòu)建高效、用戶友好的界面至關(guān)重要。一致的排版不僅能夠讓用戶快速適應(yīng)和理解界面的整體結(jié)構(gòu)，大幅降低學(xué)習(xí)成本，還能在用戶心中激發(fā)強烈的歸屬感和安全感。這種熟悉感使得內(nèi)容更加易讀，用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面，迅速定位并獲取所需信息，從而顯著提升信息獲取的效率。因此，在設(shè)計過程中，注重并維護排版的一致性，是提升用戶體驗和界面有效性的重要策略之一。
 
 
用戶體驗一致性思考
 
 
 
操作流程的一致性
標(biāo)準(zhǔn)化流程
：確保用戶在執(zhí)行相似任務(wù)時，如購買商品、搜索信息或提交表單等，能夠遵循相同的操作流程。這有助于用戶快速適應(yīng)并高效完成任務(wù)。
邏輯清晰
：操作流程的每一步都應(yīng)符合用戶的認(rèn)知習(xí)慣和行為邏輯，避免讓用戶感到困惑或不知所措。
用戶體驗一致性思考
 
 
交互元素的一致性
按鈕和控件
：確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個應(yīng)用或網(wǎng)站中保持一致。例如，所有按鈕都應(yīng)具有相同的視覺風(fēng)格和觸發(fā)機制。
導(dǎo)航和菜單
：導(dǎo)航欄和菜單的設(shè)計也應(yīng)保持一致，使用戶能夠輕松地在不同頁面或功能之間切換。
 
用戶體驗一致性思考
 
 
反饋機制的一致性
操作反饋
：當(dāng)用戶執(zhí)行某個操作時，應(yīng)用或網(wǎng)站應(yīng)提供一致且及時的反饋，如加載動畫、成功提示或錯誤消息等。這有助于用戶了解操作結(jié)果并采取相應(yīng)的行動。
狀態(tài)提示
：對于長時間運行的操作或需要用戶等待的場景，應(yīng)提供明確的狀態(tài)提示（如進度條），以減輕用戶的不確定感和焦慮感。
 
 
 
 
 
 
在任何維度上，一致性不應(yīng)成為設(shè)計的唯一導(dǎo)向。設(shè)計，這一融合了藝術(shù)與科學(xué)的復(fù)雜領(lǐng)域，要求我們在用戶體驗的細(xì)膩雕琢、功能需求的精準(zhǔn)滿足、美學(xué)價值的深刻體現(xiàn)及技術(shù)可行性的嚴(yán)格考量間游走。
 
“一致性”作為設(shè)計策略，其核心使命在于優(yōu)化用戶路徑，降低認(rèn)知門檻，確保用戶在多元界面中穿梭時仍能感受到連貫與和諧。當(dāng)我們在與設(shè)計團隊（包括工程師、產(chǎn)品經(jīng)理等）溝通時，僅僅提及“一致性”可能并不足以說明其必要性和價值。我們需要更深入地闡述為什么需要保持一致性，以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
 
同時，我們應(yīng)清醒認(rèn)識到，“一致性”并不是萬能的。在某些情況下，為了追求極致的用戶體驗或解決特定的設(shè)計問題，可能需要打破傳統(tǒng)的一致性規(guī)則。因此，設(shè)計師需要在保持一致性和創(chuàng)新之間找到平衡點，根據(jù)具體情況靈活調(diào)整設(shè)計方案。
 
實際落地執(zhí)行時，要根據(jù)產(chǎn)品定位、用戶場景，結(jié)合業(yè)務(wù)功能來確定設(shè)計方案，不能為了一致而一致。
當(dāng)我們遇到一致性問題時，還是需要從以下3個方面深入思考，做出準(zhǔn)確合理的設(shè)計決策。
用戶體驗一致性思考
 
 
真實項目
真實項目
 
在SaaS產(chǎn)品設(shè)計中，特別是面向B/G端（企業(yè)用戶）時，滿足不同用戶角色（如普通用戶與高權(quán)限領(lǐng)導(dǎo)）的需求是至關(guān)重要的。
管理端布局設(shè)計
普通簡潔明了
：為普通用戶設(shè)計的管理界面應(yīng)簡潔直觀，聚焦于日常操作，如數(shù)據(jù)查看、統(tǒng)計和下載。
功能分區(qū)
：通過清晰的導(dǎo)航欄或側(cè)邊欄將功能區(qū)域劃分開，如“數(shù)據(jù)概覽”、“報表下載”、“任務(wù)管理”等，便于用戶快速定位所需功能。
操作便捷
：確保常用操作（如搜索、篩選、排序）易于觸達(dá)，減少用戶點擊次數(shù)和頁面跳轉(zhuǎn)。
 
首頁版心定寬設(shè)計
固定寬度
：為首頁設(shè)定一個合適的固定寬度（如1200px、1440px等），以保證內(nèi)容在大多數(shù)屏幕上都能保持一致的閱讀體驗。
信息模塊化
：將首頁內(nèi)容劃分為多個卡片，每個卡片承載一個獨立的信息單元（如數(shù)據(jù)報表、通知公告、項目進展等）。
視覺層次
：通過顏色、大小、陰影等設(shè)計元素區(qū)分卡片的重要性，引導(dǎo)用戶視線，提高信息獲取效率。
交互性
：為卡片添加交互元素，如點擊展開、滑動查看更多等，增加用戶參與度和頁面活躍度。
 
用戶體驗一致性思考
 
 
位置差異性分析
根據(jù)「認(rèn)知負(fù)荷>視覺負(fù)荷>動作負(fù)荷」理論，在頁面中我們首先要讓用戶能夠找到按鈕，然后完成操作。
相對于彈窗，頁面的空間更大，邊界感偏弱，用戶的視覺重心更容易停留在左側(cè)表單內(nèi)容區(qū)域。所以按鈕應(yīng)該緊隨搜索條件，便于用戶快速發(fā)現(xiàn)按鈕。
區(qū)域用戶已經(jīng)形成下意識操作習(xí)慣,雖然區(qū)別于規(guī)范,只能打破,遵循客戶需求
用戶體驗一致性思考
 
 
一致性是規(guī)則
“一致性”作為規(guī)則或手段，服務(wù)于提升用戶體驗的原則。規(guī)則與原則一致時，促進業(yè)務(wù)共識與用戶價值；沖突時，原則優(yōu)先。用戶體驗原則指導(dǎo)下的一致性，要超越表面控件統(tǒng)一，更在于產(chǎn)品決策與價值取向的一致。必要時，為更好的用戶體驗，可在規(guī)則上讓步以實現(xiàn)原則統(tǒng)一。打破規(guī)則需慎重權(quán)衡，確保用戶便利足以彌補理解成本，需長期全局考量。規(guī)則非僵化教條，而是引導(dǎo)我們謹(jǐn)慎創(chuàng)新的框架。
 
一致性的底線
無論從哪個角度，一致性存在的必要性都是毋庸置疑的。
對于關(guān)鍵的設(shè)計元素，如專有名詞和顏色體系，保持一致性至關(guān)重要。這不僅有助于維護品牌形象，還能減少用戶的困惑。
特定設(shè)計語言在特定場景下的變體應(yīng)用，雖然可能帶來一定的視覺新鮮感或針對性優(yōu)化，但往往需要謹(jǐn)慎評估其潛在風(fēng)險。一旦變體打破了整體設(shè)計的一致性，可能會破壞用戶對品牌的熟悉感和信任感，甚至引發(fā)誤解。因此，在追求設(shè)計創(chuàng)新的同時，必須確保這種創(chuàng)新是基于一致性的原則之上，以維持品牌的整體性和用戶的良好體驗。
 
擁抱復(fù)雜性
一致性確實不應(yīng)成為設(shè)計師的避風(fēng)港或限制創(chuàng)新的枷鎖，而應(yīng)是基于對業(yè)務(wù)深刻理解和多樣化設(shè)計能力之上的價值選擇。設(shè)計師的核心任務(wù)始終是滿足用戶的多樣化需求和偏好，這需要他們細(xì)致入微地觀察、理解并解決每個用戶的獨特問題。
 
在追求一致性的同時，設(shè)計師應(yīng)保持“第一性思考”的能力，即回歸問題的本質(zhì)，從用戶需求出發(fā)進行創(chuàng)新設(shè)計。多樣性頁面的產(chǎn)出，不僅體現(xiàn)了設(shè)計師的創(chuàng)造力和靈活性，也是提升用戶體驗、增強產(chǎn)品吸引力的關(guān)鍵。
 
一致性與創(chuàng)新設(shè)計并非相互排斥，而是相輔相成的關(guān)系。真正的一致性不應(yīng)導(dǎo)致單調(diào)或拒絕創(chuàng)新，而應(yīng)是在遵循品牌或產(chǎn)品核心價值的前提下，鼓勵設(shè)計師在細(xì)節(jié)和體驗上不斷探索和突破。當(dāng)設(shè)計師感到被既定規(guī)則束縛時，應(yīng)勇于質(zhì)疑并重新評估當(dāng)前的規(guī)范，確保所謂的“一致性”不是刻板的偽命題，而是真正符合用戶需求和品牌發(fā)展的價值導(dǎo)向。
 
因此，設(shè)計師應(yīng)時刻保持開放的心態(tài)和敏銳的洞察力，不斷探索和嘗試新的設(shè)計方法和理念，以更加靈活和創(chuàng)新的方式實現(xiàn)一致性與用戶需求的完美融合。
 
用戶體驗一致性思考
 
 
重要的設(shè)計原則
「一致性」作為設(shè)計領(lǐng)域中的一項基礎(chǔ)性原則，其重要性不言而喻。它不僅為設(shè)計過程提供了穩(wěn)固的基石，還顯著促進了開發(fā)效率與產(chǎn)品體驗的全面升級。在設(shè)計實踐中，一致性確保了界面元素的統(tǒng)一性和連貫性，使得用戶能夠迅速熟悉并掌握產(chǎn)品的使用方式，降低了學(xué)習(xí)成本，增強了操作的直觀性和便捷性。
靈活變通使用
一致性原則并非一成不變的強制規(guī)定，而是需要根據(jù)產(chǎn)品的具體定位和市場環(huán)境進行靈活變通的應(yīng)用。不同的產(chǎn)品可能面向不同的用戶群體，擁有獨特的品牌調(diào)性和功能需求，因此在追求一致性的同時，也需充分考慮這些因素，確保設(shè)計既符合品牌特色，又能滿足用戶的實際需求。
 
提升用戶體驗是價值所在
一致性的真正價值在于其能夠顯著提升用戶體驗。通過遵循用戶的認(rèn)知和習(xí)慣，設(shè)計師能夠創(chuàng)造出更加自然、流暢的操作流程，使用戶在享受產(chǎn)品功能的同時，也能感受到品牌所傳遞的舒適與和諧。因此，在追求設(shè)計一致性的過程中，我們始終應(yīng)以人為本，將用戶的體驗和感受放在首位。建設(shè)有兼容性和長期價值的的一致性框架，在一致性中做到有用戶價值的設(shè)計，是設(shè)計師應(yīng)該不斷探索的命題。
 
 


作者：cheny米魚
鏈接：https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 
評論(0) 瀏覽(322)

日歷

鏈接

個人資料

存檔