作者：設(shè)計(jì)師豆?jié){
鏈接：https://www.zcool.com.cn/article/ZMTI4NTgyMA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

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

在數(shù)字產(chǎn)品設(shè)計(jì)日新月異的今天，打造卓越用戶體驗(yàn)已成為產(chǎn)品成功的關(guān)鍵。這篇文章精準(zhǔn)解析了UX設(shè)計(jì)的六大核心支柱，從用戶研究到無(wú)障礙設(shè)計(jì)，為讀者提供了全面且實(shí)用的設(shè)計(jì)框架。

開啟用戶體驗(yàn)設(shè)計(jì)探索之旅，首要任務(wù)是全面掌握其核心構(gòu)成要素——這些是構(gòu)筑絕佳用戶體驗(yàn)的基石需求。事實(shí)上，在蘋果、微軟和谷歌等設(shè)計(jì)推動(dòng)型科技巨頭中，這些因素的關(guān)鍵性是不言而喻的，甚至因此催生了專屬職業(yè)與角色的誕生。在這六大核心維度中，有一個(gè)更是脫穎而出，以至于一個(gè)全新的職能部門因此得以形成。接下來(lái)，讓我們深入剖析這些零部件如何共同定義卓然出色的用戶體驗(yàn)設(shè)計(jì)版圖及行業(yè)切入點(diǎn)。

在深入分析用戶體驗(yàn)設(shè)計(jì)的六大核心要素之前，我們需要先厘清其核心內(nèi)涵。從本質(zhì)上看，用戶體驗(yàn)設(shè)計(jì)是一門創(chuàng)造愉悅且功能強(qiáng)大的體驗(yàn)藝術(shù)，確保產(chǎn)品既具有效性又兼具高效性、易用性和用戶滿意度。它涵蓋了一個(gè)整體性的設(shè)計(jì)循環(huán)，通過(guò)不同維度的優(yōu)化來(lái)最終實(shí)現(xiàn)這些目標(biāo)?？梢园延脩趔w驗(yàn)設(shè)計(jì)比喻成一把“統(tǒng)籌性的大傘”，其下輻射的每個(gè)要素都是推動(dòng)卓越體驗(yàn)構(gòu)建的重要一環(huán)。本篇文章將沿著這把傘的思維體系，逐步探索這些不可或缺的構(gòu)建模塊及其影響力。

01 用戶研究

用戶研究（亦稱 UX 研究）之所以能在設(shè)計(jì)領(lǐng)域占據(jù)重要地位，其原因顯而易見——它是產(chǎn)品設(shè)計(jì)的一大核心要素。隨著其價(jià)值的日益凸顯，越來(lái)越多的企業(yè)開始設(shè)立專門的用戶研究團(tuán)隊(duì)。這一趨勢(shì)背后的驅(qū)動(dòng)力是什么？源于對(duì)用戶洞察的深入理解直接決定了能否創(chuàng)造出卓越的產(chǎn)品體驗(yàn)。在探索方案的過(guò)程中，用戶研究永遠(yuǎn)都是優(yōu)先級(jí)最高的起點(diǎn)。這個(gè)關(guān)鍵過(guò)程的核心在于定義所謂的“用戶”——通過(guò)全面梳理他們的使用體驗(yàn)，挖掘其需求、期望與操作行為，從而描繪出清晰的用戶畫像。這正是用戶研究的精髓之所在。更具體地說(shuō)，用戶研究是圍繞用戶的需求、目標(biāo)、行為模式以及心理動(dòng)機(jī)，所展開的系統(tǒng)化調(diào)研與分析。執(zhí)行用戶研究有多種專業(yè)化方法工具，包括深入訪談、結(jié)構(gòu)化調(diào)查、現(xiàn)場(chǎng)可視采樣以及定性和定量化的可用性評(píng)估測(cè)試，每一步都旨在深刻理解目標(biāo)人群，優(yōu)化體驗(yàn)閉環(huán)。

02 交互設(shè)計(jì)

交互設(shè)計(jì)是產(chǎn)品設(shè)計(jì)中的關(guān)鍵環(huán)節(jié)，此階段負(fù)責(zé)精細(xì)化用戶與系統(tǒng)之間的互動(dòng)路徑與體驗(yàn)設(shè)計(jì)。設(shè)計(jì)師需要梳理并規(guī)劃用戶操作觸發(fā)的系統(tǒng)響應(yīng)——例如按鈕點(diǎn)擊后的動(dòng)作反饋。從提示的生成到任務(wù)處理的閉環(huán)，每一個(gè)交互流程都經(jīng)過(guò)精致打磨。對(duì)交互表現(xiàn)的設(shè)計(jì)需通過(guò)深度用戶研究與高頻次的可用性測(cè)試進(jìn)行不斷優(yōu)化，以確保全流程交互體驗(yàn)既順暢又高效。

03 信息架構(gòu)

我的清單中提到的第三項(xiàng)是信息架構(gòu)，這是在設(shè)計(jì)過(guò)程中理解內(nèi)容與功能的關(guān)鍵環(huán)節(jié)。它的核心是對(duì)內(nèi)容和功能進(jìn)行科學(xué)的分類組織和標(biāo)記，以確保產(chǎn)品的功能與結(jié)構(gòu)清晰易懂，能夠有效地滿足不同用戶的認(rèn)知需求?？梢园研畔⒓軜?gòu)理解為產(chǎn)品的結(jié)構(gòu)藍(lán)圖，為用戶提供在界面元素間高效切換和操作的導(dǎo)引路徑。它的價(jià)值在于將內(nèi)容與功能資源以邏輯和體系化的方式呈現(xiàn)。那么如何精準(zhǔn)定義哪些要素歸屬于頂層導(dǎo)航、次級(jí)導(dǎo)航或細(xì)化導(dǎo)航？此時(shí)，一種名為“卡片分類法”（Card Sorting）的用戶體驗(yàn)研究方法便派上了用場(chǎng)，它幫助設(shè)計(jì)師優(yōu)化信息層級(jí)，制定更具洞察力和用戶思維的導(dǎo)航設(shè)計(jì)決策。

*卡片分類法：卡片分類法是一種用戶體驗(yàn)研究方法，用于幫助設(shè)計(jì)師理解用戶如何組織和分類信息。參與者通過(guò)將內(nèi)容項(xiàng)（如網(wǎng)站頁(yè)面或功能）進(jìn)行排序和分組，提供了關(guān)于信息架構(gòu)的見解。其主要步驟為：首先，每張卡片上寫一個(gè)內(nèi)容項(xiàng)；其次，招募目標(biāo)用戶；再次，用戶根據(jù)理解將卡片分組并命名；最后，識(shí)別共同的分類方式。此方法有助于優(yōu)化網(wǎng)站和應(yīng)用的導(dǎo)航結(jié)構(gòu)，提高用戶體驗(yàn)。

04 用戶界面設(shè)計(jì)

接下來(lái)重點(diǎn)分析用戶界面設(shè)計(jì)環(huán)節(jié)，也就是我們通常所提到的視覺設(shè)計(jì)，這是 UX 設(shè)計(jì)中至關(guān)重要的一環(huán)，主要關(guān)注產(chǎn)品的視覺展現(xiàn)層。UI 設(shè)計(jì)師的職責(zé)在于打造具有吸引力且直觀自然的視覺體驗(yàn)。他們通過(guò)對(duì)色彩體系、排版字體、圖形視覺以及插畫風(fēng)格的細(xì)膩打磨，為產(chǎn)品的整體視覺編碼賦予獨(dú)特且一致的品牌形象。

05 UX 寫作（微文案）

UX 寫作，亦稱微文案，是文案寫作領(lǐng)域下的一個(gè)細(xì)分學(xué)科，聚焦于數(shù)字產(chǎn)品中的文本設(shè)計(jì)。UX 寫作者的核心職責(zé)是優(yōu)化數(shù)字界面中的文案，不僅要貼合用戶需求，還要顯著增強(qiáng)整體用戶體驗(yàn)。他們善于運(yùn)用精準(zhǔn)而貼近用戶心智的表達(dá)方式，撰寫既通俗易懂又情感共鳴強(qiáng)的界面文案，從而最大化提升用戶的可讀性與互動(dòng)效率。

06 可訪問性

最后，我們需要聚焦于可訪問性——這是確保所有用戶（包括有特殊需求的群體）都能高效且無(wú)障礙地使用產(chǎn)品的核心要素。作為設(shè)計(jì)從業(yè)者，共情能力是我們?cè)O(shè)計(jì)哲學(xué)的重要基石。但這種共情不僅局限于通用用戶，還要涵蓋那些需要特殊支持的用戶群體。在每一次 UI 語(yǔ)義和交互設(shè)計(jì)中，我們必須以可訪問性優(yōu)先，確保無(wú)論用戶的能力如何，都能獲得最佳的可讀性和充分的視覺對(duì)比體驗(yàn)，真正實(shí)現(xiàn)一視同仁的包容性設(shè)計(jì)。

在B端產(chǎn)品設(shè)計(jì)的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗(yàn)和品牌識(shí)別的重要角色。本文深入探討了色彩空間理論在B端設(shè)計(jì)中的應(yīng)用，從基礎(chǔ)的色彩空間概念到如何在實(shí)際工作中運(yùn)用這些理論，為設(shè)計(jì)師提供了一套科學(xué)的顏色搭配和管理方法。

對(duì)于 B 端產(chǎn)品而言，我們經(jīng)常會(huì)和顏色進(jìn)行斗爭(zhēng)。

比如在工作當(dāng)中，開發(fā)沒有正確還原顏色、不知道如何進(jìn)行色彩配置、以及對(duì)于 B 端產(chǎn)品而言，究竟應(yīng)該如何協(xié)調(diào)科學(xué)的進(jìn)行顏色的搭配～

最近會(huì)講顏色的部分，整體會(huì)分為四篇文章：B 端設(shè)計(jì)如何理解色彩空間、B 端產(chǎn)品怎樣合理搭配顏色、B 端項(xiàng)目的視覺風(fēng)格、B 端項(xiàng)目顏色的實(shí)戰(zhàn)技巧。

本篇文章是第一篇，我們先來(lái)聊聊產(chǎn)品配色的基礎(chǔ) 色彩空間與顏色管理。

不知道各位同學(xué)是否遇到這種情況，當(dāng)你在調(diào)整顏色時(shí)，就是在漫無(wú)目的的在拾色器上來(lái)回游走，在被問到為什么要選擇這個(gè)顏色時(shí)，也茫然無(wú)措，這時(shí)候的你作何感想？

所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進(jìn)行顏色管理，才能夠讓設(shè)計(jì)順利落地。但顏色其實(shí)過(guò)于抽象，因此我們將整體內(nèi)容進(jìn)行簡(jiǎn)化，多和大家聊聊在理論背后究竟應(yīng)該如何與工作內(nèi)容進(jìn)行結(jié)合。

B端究竟需要什么樣的產(chǎn)品經(jīng)理？

B端產(chǎn)品經(jīng)理都是以提升供應(yīng)側(cè)的工作效率為目的，所以B端需求主要是以業(yè)務(wù)問題為導(dǎo)向。 這個(gè)是B端產(chǎn)品比較重要的一點(diǎn)，B端產(chǎn)品是服務(wù)于一個(gè)主體 ...

查看詳情 >

首先我們先說(shuō)說(shuō)色彩空間。

一、什么是色彩空間？

色彩空間又叫色彩模型，它是為了讓系統(tǒng)能夠準(zhǔn)確地描述顏色、使用顏色，進(jìn)而定義出來(lái)的一種顏色組織方式。

比如有一排隨機(jī)顏色，要按特定規(guī)則排列，你會(huì)怎么做？我相信，我們首先想到的便是按照不同的色相進(jìn)行歸類。

如果顏色變?yōu)?0000個(gè)，又該怎么排列呢？因此，為了讓企業(yè)更好地使用顏色、設(shè)計(jì)師更便利地選擇一致的顏色，行業(yè)中便提出了色彩空間的概念。

色彩空間其實(shí)很簡(jiǎn)單。因?yàn)槲覀冃枰褂妙伾?，且不同人群?duì)顏色的需求不同，所以顏色的排列方式會(huì)存在差異。

比如，行業(yè)中較為出名的潘通色彩體系，其實(shí)是基于印刷行業(yè)制定的一種特殊色彩空間；CMYK是為印刷從業(yè)者提供的、便于他們更好地進(jìn)行物料印刷的色彩空間；Lab是一種更強(qiáng)調(diào)色彩亮度的色彩空間。

因此，行業(yè)會(huì)根據(jù)顏色的不同規(guī)律和自身使用需求，總結(jié)整理出不同的色彩空間。

我們目前在工作當(dāng)中，主要都是聚焦于屏幕當(dāng)中，因此影響顏色呈現(xiàn)的也就變?yōu)椋?/p>

• 設(shè)計(jì)軟件當(dāng)中的色彩空間：以 RGB、HSB、HCT 為主，主要是計(jì)算機(jī)識(shí)別顏色顏色，調(diào)整顏色的重要方式，在電腦軟件當(dāng)中起到重要作用。
• 屏幕顯示當(dāng)中的色彩空間：以 Adobe RGB、Display P3、sRGB 為主，主要是能準(zhǔn)確展示屏幕當(dāng)中的各種顏色。

在我們細(xì)致講解色彩空間的部分時(shí)，我們先來(lái)了解三個(gè)重要的概念。

1. 亮度：是光作用于人眼所引起的明亮程度的感覺，它與被觀察物體的發(fā)光強(qiáng)度有關(guān)，主要表現(xiàn)光的強(qiáng)與弱。
2. 色相：是當(dāng)人眼看一種或多種波長(zhǎng)的光時(shí)所產(chǎn)生的色彩感覺，它反映顏色的種類，是決定顏色的基本特征。
3. 飽和度：是指顏色的純度，即該摻入白光的程度，表示顏色深淺的程度。例如：藍(lán)色 + 白色 = 天藍(lán)色，也就是飽和度下降

二、色彩空間的類型

1. RGB  色彩空間

RGB是顯示器當(dāng)中的顏色基礎(chǔ)。

比如在現(xiàn)實(shí)世界當(dāng)中，我們將手機(jī)屏幕進(jìn)行放大，你會(huì)發(fā)現(xiàn)屏幕都是由紅綠藍(lán)三個(gè)燈管所組成的。

而 RGB 的色彩模式就是模擬現(xiàn)實(shí)世界當(dāng)中的屏幕顯示原理，將燈光照射的邏輯在設(shè)計(jì)軟件當(dāng)中進(jìn)行復(fù)現(xiàn)，因此在 RGB 的調(diào)色盤中，就會(huì)分別包含三個(gè)輸入框，這便是 紅綠藍(lán)。

其中，數(shù)字 0 代表不發(fā)光、255 則是最亮的燈光。

那為什么最亮是 255，不是 250？或者是 280 呢？

原因在于RGB 所有的顏色，最后都需要通過(guò)計(jì)算機(jī)進(jìn)行運(yùn)算顯示，對(duì)于它說(shuō)并不認(rèn)識(shí) 紅色、藍(lán)色，在它的腦袋里（不對(duì)，CPU 里面）就只有 0 與 1，因此在計(jì)算機(jī)存儲(chǔ)的時(shí)候，一個(gè)字節(jié)也就是 8 個(gè)比特、也就是 2 的八次方、也就是 256，這樣 一個(gè)色彩信息等于一個(gè)字節(jié)，數(shù)據(jù)存儲(chǔ)就會(huì)更加高效。

所以我們所聊的顏色更多指的是代碼層面的顏色設(shè)定。

接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡(jiǎn)版。

因?yàn)樗訔壝總€(gè)輸入框都會(huì)出現(xiàn) 255（255,255,255 白色）實(shí)在太長(zhǎng)，不利于我們?cè)谌粘９ぷ鳟?dāng)中進(jìn)行記錄。

因此將每個(gè)顏色，三位數(shù)值縮減為兩位數(shù)值（十進(jìn)制變?yōu)槭M(jìn)制），就是增加英文字符的數(shù)據(jù)，就能較短的表達(dá)顏色，使得顏色表達(dá)更為高效。

因?yàn)?Hex 只是 RGB 的精簡(jiǎn)版本，所以 Hex 里面，每?jī)蓚€(gè)字符所對(duì)應(yīng)的就是 紅、綠、藍(lán)。

比如我們剛才提到的這個(gè)藍(lán)色，在 RGB 空間當(dāng)中為(0,86,255) ，Hex 則是#0056FF，也是一一對(duì)應(yīng)關(guān)系。

RGB 聽上去似乎很美好，但問題在于兩點(diǎn)：

1.顏色的調(diào)整不夠直觀：作為設(shè)計(jì)師，我們很難模擬燈光的照射思維對(duì)顏色進(jìn)行調(diào)整，具體應(yīng)該增加多少顏色，其實(shí)是不夠清楚的。我們更熟悉的其實(shí)是：亮度、色相、飽和度，因此在調(diào)色時(shí)會(huì)十分困難。

比如我目前是紅色，那我要調(diào)整到紫色，應(yīng)該輸入多少值呢？其實(shí)我們很難進(jìn)行一個(gè)準(zhǔn)確的判斷。

2.顏色信息與亮度信息的數(shù)據(jù)混合：導(dǎo)致我們很難對(duì)于有一個(gè)準(zhǔn)確的判斷，比如在 RGB 相同的數(shù)值當(dāng)中，明顯會(huì)感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調(diào)色時(shí)，顏色一致性偏差較大。

為了解決這些問題，就提出一種新的色彩模型：HSB

2. HSB 色彩空間

HSB （也叫 HSV）就是通過(guò)顏色的  色相、飽和度、亮度 來(lái)進(jìn)行表示。

在色相當(dāng)中，由于顏色的呈現(xiàn)是色環(huán)的方式，因此在數(shù)值上是以 0-360 度來(lái)進(jìn)行表示的，在設(shè)計(jì)軟件里面，我們也只能輸入所對(duì)應(yīng)的數(shù)值。

同時(shí)飽和度與亮度都是以百分比的形式進(jìn)行呈現(xiàn)，飽和度越低，相對(duì)應(yīng)就會(huì)給顏色增加白色，使其更灰；亮度越低，就會(huì)增加對(duì)應(yīng)的黑色，讓其更深。

由于 HSB 的色彩空間的分類模式非常有利于我們進(jìn)行顏色的調(diào)整，因此我們?cè)谌粘Ｕ{(diào)色時(shí)其實(shí)會(huì)經(jīng)常用到。

比如日常工作當(dāng)中，假設(shè)我們需要設(shè)計(jì)一組圖標(biāo)，根據(jù) HSB 顏色的基本原理，我們其實(shí)只需要調(diào)整不同的色相，就能夠得到不同的圖標(biāo)顏色。

但… 顏色上依舊會(huì)存在問題。

你會(huì)發(fā)現(xiàn)當(dāng)我們調(diào)整了色相過(guò)后，整體的顏色并沒有形成統(tǒng)一。原因在于我們?nèi)搜蹖?duì)于 黃綠色的感知 會(huì)和紅色、藍(lán)色有所不同，我們通常在看黃綠色時(shí)會(huì)更為刺眼，因此在設(shè)計(jì)層面上需要單獨(dú)調(diào)整。

所以在 HSB 當(dāng)中的顏色邏輯上，也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。

3. HCT 色彩空間

HCT 首先會(huì)將顏色當(dāng)中的 感知度、亮度 進(jìn)行結(jié)合，對(duì)之前的 HSB 重新調(diào)整。

在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調(diào)

色相與色度和之前基本類似，但色調(diào)上優(yōu)化了黃綠色凸顯問題，讓人眼的感知度也加入到了色彩空間當(dāng)中，使其顏色更為準(zhǔn)確。

同時(shí)色彩空間的呈現(xiàn)，優(yōu)化了顏色漸變的流暢性，我們會(huì)發(fā)現(xiàn)整體的漸變感覺會(huì)更為自然。

那為什么 Google 想要做 HCT？

其實(shí)因?yàn)?Material Design 當(dāng)中會(huì)強(qiáng)調(diào)設(shè)計(jì)的一致性和靈活性，在功能設(shè)計(jì)上，需要增加一個(gè)根據(jù)屏幕當(dāng)中的圖標(biāo)生成與其風(fēng)格一致的壁紙。

但在之前無(wú)論什么樣的色彩空間都不能準(zhǔn)確的還原顏色。現(xiàn)在就提供了一個(gè)可靠的色彩基礎(chǔ)，能夠讓我們?cè)诓煌脑O(shè)備、平臺(tái)和應(yīng)用場(chǎng)景下，都能夠生成具有一致性的色彩方案，同時(shí)也能更好地適應(yīng)各種主題和風(fēng)格的變化，如亮色模式和暗色模式的切換。

比如，還是以上面這個(gè)案例，我們使用 HSB 與 HCT 對(duì)顏色進(jìn)行的色相的調(diào)整，那得到的結(jié)果明顯會(huì)發(fā)現(xiàn) HCT 會(huì)更加準(zhǔn)確。

那 HCT 就真那么完美無(wú)瑕？

其實(shí)也不然，因?yàn)?HCT 色彩空間出現(xiàn)時(shí)間較晚，所以在使用上也會(huì)有很多問題。

• 設(shè)備兼容性差：很多設(shè)計(jì)軟件目前對(duì) HCT 基礎(chǔ)沒有適配，所以即使使用，很多老舊設(shè)備也并不能支持。
• 計(jì)算復(fù)雜度高：HCT 的色彩空間涉及到更為復(fù)雜的計(jì)算算法，因此它對(duì)于系統(tǒng)的資源要求更高。
• 認(rèn)知成本較大：對(duì)于新的事物，往往在行業(yè)中的普及會(huì)相對(duì)較慢，因此還需要長(zhǎng)時(shí)間的普及才行。

三、色彩空間如何應(yīng)用？

這么深?yuàn)W的色彩空間，到底要如何使用？

1. 以 HSB 的為主

因?yàn)?HSB 是設(shè)計(jì)師最容易理解的色彩空間，因此我們?cè)谡{(diào)色時(shí)需要根據(jù)數(shù)值來(lái)進(jìn)行顏色的調(diào)教。

比如說(shuō)你的顏色很臟，不夠干凈。其實(shí)就是在強(qiáng)調(diào) HSB 當(dāng)中使用了更多的黑色，我們便可以調(diào)整到這個(gè)色彩空間當(dāng)中，去增加 B 的值（也就是第三個(gè)輸入框）

比如說(shuō)你的字體很灰，不夠明確。

其實(shí)就是在說(shuō) 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個(gè)輸入框）

2. 色彩更具數(shù)據(jù)化

因?yàn)槊恳粋€(gè)屏幕所顯示的顏色其實(shí)都不太相同，因此色彩調(diào)整時(shí)要多看數(shù)據(jù)，觀察數(shù)據(jù)之間的對(duì)比變化。

比如以 B 端產(chǎn)品的中性色為例，現(xiàn)在系統(tǒng)當(dāng)中所使用的正文顏色為 #333333，看到過(guò)后就明確知道顏色深度不夠、顏色也不透氣。

我們就會(huì)按照，先確定顏色色相，為灰色偏藍(lán)色，因此在色相當(dāng)中需要拖動(dòng)色環(huán)找到合適的色相；

緊接著確定飽和度，因?yàn)橐{(lán)色，但不宜過(guò)多，因此整體的數(shù)值只會(huì)在 1-5 之前浮動(dòng)；

最后確定深度，之前顏色過(guò)于淺，需要加深，所以直接減少，變?yōu)?22 左右的數(shù)值。

3. HCT 輔助顏色判斷

其次在判斷顏色時(shí)，也會(huì)更具章法。

在多輔助色的情況下，我們可以使用 HCT 對(duì)顏色進(jìn)行判斷。

對(duì)于日常工作來(lái)說(shuō)，我們可以使用 Figma 當(dāng)中的 color Space 插件 進(jìn)行日常的色彩管理。在今后遇到類似同類型圖標(biāo)時(shí)，我們可以使用 HCT 的方式快速生成發(fā)散色板，幫助我們進(jìn)行色彩搭配。

4. 引入 HCT 完善工作流

最后在 B 端系統(tǒng)當(dāng)中，會(huì)存在較多顏色搭配的場(chǎng)景。

像是圖表設(shè)計(jì)、自定義系統(tǒng)主題，原來(lái)只能通過(guò)系統(tǒng)預(yù)設(shè)固定顏色的方式進(jìn)行解決，而現(xiàn)在 Google 也將這套計(jì)算公式開源，也就是說(shuō)程序員可以直接引用 HCT 的色彩空間，將顏色配置的權(quán)限給到用戶，通過(guò)顏色的調(diào)整，呈現(xiàn)用戶想要的顏色內(nèi)容。

四、屏幕顯示的色彩空間

對(duì)于屏幕顯示的色彩空間而言，有部分內(nèi)容我們也是要重點(diǎn)關(guān)注。比如在 B 端設(shè)計(jì)當(dāng)中，色彩還原老是出問題，那我們就可以通過(guò)屏幕的色彩空間進(jìn)行判斷。

1. sRGB 色彩空間

sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發(fā)的一種標(biāo)準(zhǔn)色彩空間，目的是提供一種通用的色彩標(biāo)準(zhǔn)，使得在不同的設(shè)備（如顯示器、打印機(jī)等）之間能夠?qū)崿F(xiàn)相對(duì)一致的色彩顯示。

對(duì)于 sRGB 來(lái)說(shuō)，它是我們作為設(shè)計(jì)師最為重要的屏幕顯示色彩空間，因?yàn)樗ㄓ眯詮?qiáng)，所以大多數(shù)普通的電腦顯示器、網(wǎng)頁(yè)瀏覽器等都默認(rèn)采用 sRGB 色彩空間，這樣在瀏覽網(wǎng)頁(yè)、查看普通的數(shù)碼照片時(shí)，可以獲得比較穩(wěn)定的色彩效果。

所以我們?cè)谧鲈O(shè)計(jì)時(shí)，通常都會(huì)將屏幕與軟件，都調(diào)整的 sRGB 的空間當(dāng)中，這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

Display P3 是基于 DCI – P3 色彩空間衍生而來(lái)的，主要用于消費(fèi)級(jí)顯示器設(shè)備。它在 DCI – P3 的基礎(chǔ)上進(jìn)行了一些調(diào)整，以適應(yīng)顯示器的特性。

整體而言 P3 色彩空間顯示出來(lái)的顏色會(huì)更加 生動(dòng)、艷麗，但是這會(huì)和你的設(shè)備密切相關(guān)。目前行業(yè)中只在蘋果設(shè)備以及部分高端顯示器才會(huì)使用，所以我們?cè)谠O(shè)計(jì)時(shí)需要考慮自己產(chǎn)品的受眾，這一設(shè)備是否普遍使用。

最后，我們總結(jié)一下：

1. 色彩空間就是我們使用顏色的一種方式
2. 在調(diào)色時(shí)，我們會(huì)優(yōu)先使用 HSB 的色彩空間
3. HCT 是 Google 推出，主要目的是 色彩視覺的統(tǒng)一，在我們生成輔助色的時(shí)候有用
4. 屏幕當(dāng)中我們的所有顯示配置盡量調(diào)整為 sRGB，這樣更符合大多數(shù)用戶的顯示情況

在做產(chǎn)品設(shè)計(jì)的時(shí)候，UI界面更多是由設(shè)計(jì)師完成，產(chǎn)品僅是提供界面元素和布置，其他的由設(shè)計(jì)師發(fā)揮。但如果產(chǎn)品能了解更多設(shè)計(jì)相關(guān)的知識(shí)，在和設(shè)計(jì)師探討、分析時(shí)會(huì)更有針對(duì)性，也會(huì)讓產(chǎn)品的工作顯得更為專業(yè)。

在當(dāng)今數(shù)字化時(shí)代，我們與各種移動(dòng)應(yīng)用、網(wǎng)頁(yè)和軟件界面打交道，圖標(biāo)就像是這些界面的明星。它們小巧玲瓏、獨(dú)具特色，扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標(biāo)的定義、作用以及在用戶界面中的重要性。

一、UI圖標(biāo)的定義和作用

A. UI圖標(biāo)的定義

UI圖標(biāo)是指用簡(jiǎn)潔明了的小型圖形符號(hào)來(lái)表示特定功能、操作或信息的設(shè)計(jì)元素。圖標(biāo)通過(guò)簡(jiǎn)單的形狀和圖像，向用戶傳遞信息和功能，并在界面中起到重要的導(dǎo)航和標(biāo)識(shí)作用。

B. UI圖標(biāo)的作用

• 提供快速識(shí)別：UI圖標(biāo)能夠以簡(jiǎn)單直觀的方式展示功能和操作，使用戶迅速識(shí)別界面元素，快速完成操作。
• 提升用戶體驗(yàn)：UI圖標(biāo)能夠使界面更加直觀、友好和易于使用，用戶無(wú)需過(guò)多猜測(cè)，更加自信地與界面互動(dòng)。
• 增加品牌識(shí)別度：UI圖標(biāo)承載著品牌形象，設(shè)計(jì)合理的圖標(biāo)能夠提升品牌的識(shí)別度和記憶性，促進(jìn)用戶與品牌的情感連接。

C. UI圖標(biāo)在用戶界面中的重要性

UI圖標(biāo)在用戶界面設(shè)計(jì)中扮演著不可或缺的角色，其重要性體現(xiàn)在以下幾個(gè)方面：

• 導(dǎo)航和標(biāo)識(shí)功能：UI圖標(biāo)通過(guò)視覺上的差異化，幫助用戶快速識(shí)別和定位所需的功能模塊，提供直觀導(dǎo)航，減少操作復(fù)雜度。
• 美觀和統(tǒng)一性：精心設(shè)計(jì)的UI圖標(biāo)能夠增加界面的美感，提升用戶體驗(yàn)。通過(guò)一致性的圖標(biāo)設(shè)計(jì)，整個(gè)界面呈現(xiàn)出協(xié)調(diào)統(tǒng)一的視覺效果。
• 信息傳遞效果：UI圖標(biāo)通過(guò)形狀、顏色和圖像等視覺元素，能夠傳達(dá)具體的信息和功能，使用戶更容易理解界面的意圖和操作方式。
• 增強(qiáng)品牌形象：UI圖標(biāo)能夠?qū)⑵放菩蜗笕谌氲浇缑嬷校纬瑟?dú)特的品牌風(fēng)格和個(gè)性，幫助品牌建立與用戶的情感聯(lián)系。

二、設(shè)計(jì)原則和要素

UI圖標(biāo)設(shè)計(jì)是用戶界面的重要組成部分，它們不僅可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站，還可以增強(qiáng)整體視覺效果。為了設(shè)計(jì)出高質(zhì)量的UI圖標(biāo)，設(shè)計(jì)師需要遵循一些基本原則和要素。

A. 獨(dú)特性和可識(shí)別性

設(shè)計(jì)具有獨(dú)特特征的圖標(biāo) UI圖標(biāo)應(yīng)該具有獨(dú)特的特征，使其能夠與其他圖標(biāo)區(qū)分開來(lái)。設(shè)計(jì)師可以通過(guò)使用不同的形狀、顏色和風(fēng)格來(lái)實(shí)現(xiàn)這一目標(biāo)。同時(shí)，圖標(biāo)的形狀和顏色也應(yīng)該與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致，以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

避免與其他圖標(biāo)混淆 為了避免UI圖標(biāo)與其他圖標(biāo)混淆，設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與其他圖標(biāo)有足夠的區(qū)別。如果圖標(biāo)的形狀和顏色與其他圖標(biāo)過(guò)于相似，用戶可能會(huì)難以區(qū)分它們的功能和意義，從而影響用戶的使用體驗(yàn)。

B. 簡(jiǎn)潔性和清晰性

追求簡(jiǎn)潔的圖標(biāo)設(shè)計(jì) 簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)可以幫助用戶更快地理解和使用圖標(biāo)。設(shè)計(jì)師應(yīng)該盡可能地簡(jiǎn)化圖標(biāo)的形狀和顏色，避免使用過(guò)多的細(xì)節(jié)和復(fù)雜的形狀。簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)還可以幫助應(yīng)用程序或網(wǎng)站的整體視覺效果更加統(tǒng)一和和諧。

避免過(guò)度復(fù)雜化的細(xì)節(jié) 過(guò)度復(fù)雜化的細(xì)節(jié)可能會(huì)使圖標(biāo)變得過(guò)于復(fù)雜和難以理解。設(shè)計(jì)師應(yīng)該避免使用過(guò)多的細(xì)節(jié)和復(fù)雜的形狀，以確保圖標(biāo)的簡(jiǎn)潔性和清晰性。同時(shí)，設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色足夠明確，以便用戶能夠輕松地識(shí)別和理解圖標(biāo)的功能和意義。

C. 一致性和統(tǒng)一性

維護(hù)整個(gè)UI界面的一致性風(fēng)格 UI圖標(biāo)應(yīng)該與整個(gè)UI界面的風(fēng)格保持一致。設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致。這樣可以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義，同時(shí)也可以增強(qiáng)應(yīng)用程序或網(wǎng)站的整體視覺效果。

使用相似的線條、顏色和風(fēng)格 為了實(shí)現(xiàn)一致性和統(tǒng)一性，設(shè)計(jì)師應(yīng)該使用相似的線條、顏色和風(fēng)格來(lái)設(shè)計(jì)圖標(biāo)。這樣可以使圖標(biāo)與整個(gè)UI界面的風(fēng)格保持一致，同時(shí)也可以使圖標(biāo)的形狀和顏色更加和諧統(tǒng)一。

D. 可視化傳達(dá)

明確圖標(biāo)所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標(biāo)，設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀和顏色能夠明確地傳達(dá)

使用適當(dāng)?shù)男螤?、符?hào)和顏色傳達(dá)信息 為了確保圖標(biāo)能夠明確地傳達(dá)信息，設(shè)計(jì)師應(yīng)該使用適當(dāng)?shù)男螤?、符?hào)和顏色。

例如，一個(gè)圖標(biāo)可能需要使用一個(gè)圓形作為基本形狀，同時(shí)使用一個(gè)代表性的符號(hào)來(lái)表示它的功能和意義。

同時(shí)，設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致，以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

E. 可縮放性和適應(yīng)性

使用矢量圖形實(shí)現(xiàn)圖標(biāo)的可縮放性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性，設(shè)計(jì)師應(yīng)該使用矢量圖形來(lái)實(shí)現(xiàn)圖標(biāo)的可縮放性。

矢量圖形是一種基于數(shù)學(xué)公式的圖形，它們可以在不失真的情況下進(jìn)行任意大小的縮放。

這意味著：即使圖標(biāo)被放大或縮小，它們的形狀和顏色也不會(huì)發(fā)生變化。

確保在不同屏幕和設(shè)備上的可用性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性，設(shè)計(jì)師應(yīng)該考慮圖標(biāo)在不同分辨率和屏幕尺寸下的表現(xiàn)。

例如，設(shè)計(jì)師應(yīng)該確保圖標(biāo)的大小和形狀適合不同屏幕和設(shè)備的顯示。

同時(shí)，設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的顏色在不同的屏幕和設(shè)備上都能夠保持一致，以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

三、設(shè)計(jì)流程和技巧

UI圖標(biāo)設(shè)計(jì)需要遵循一定的流程和技巧，以確保圖標(biāo)的高質(zhì)量和可用性。

以下是一些常用的設(shè)計(jì)流程和技巧：

A. 需求分析和功能定義

在開始設(shè)計(jì)之前，設(shè)計(jì)師需要了解UI圖標(biāo)的使用場(chǎng)景和目的。這可以幫助設(shè)計(jì)師確定圖標(biāo)所代表的含義和功能，以確保圖標(biāo)的準(zhǔn)確性和可用性。

B. 創(chuàng)意和草圖階段

在進(jìn)行創(chuàng)意和草圖階段，設(shè)計(jì)師應(yīng)該進(jìn)行創(chuàng)意思維和頭腦風(fēng)暴，以產(chǎn)生出多種不同的設(shè)計(jì)方案。同時(shí)，設(shè)計(jì)師也應(yīng)該從簡(jiǎn)單的草圖開始構(gòu)思圖標(biāo)設(shè)計(jì)，以確保圖標(biāo)的可行性和可實(shí)現(xiàn)性。

C. 細(xì)化和完善設(shè)計(jì)

在細(xì)化和完善設(shè)計(jì)階段，設(shè)計(jì)師應(yīng)該使用矢量工具進(jìn)行圖標(biāo)設(shè)計(jì)，并重點(diǎn)關(guān)注細(xì)節(jié)和清晰度的提升。這可以幫助設(shè)計(jì)師創(chuàng)建出具有獨(dú)特特征的圖標(biāo)，并確保圖標(biāo)的可縮放性和適應(yīng)性。

D. 反饋和優(yōu)化

在反饋和優(yōu)化階段，設(shè)計(jì)師應(yīng)該向用戶和團(tuán)隊(duì)收集反饋，并根據(jù)反饋進(jìn)行圖標(biāo)的優(yōu)化和調(diào)整。這可以幫助設(shè)計(jì)師確保圖標(biāo)的準(zhǔn)確性和可用性，并根據(jù)用戶的需求和期望進(jìn)行調(diào)整和優(yōu)化。

四、設(shè)計(jì)最佳實(shí)踐和案例研究

UI圖標(biāo)設(shè)計(jì)是一個(gè)重要的設(shè)計(jì)領(lǐng)域，它可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站。以下是一些成功的UI圖標(biāo)設(shè)計(jì)案例和分析。

A. 探索成功的UI圖標(biāo)設(shè)計(jì)案例

成功的UI圖標(biāo)設(shè)計(jì)案例可以幫助設(shè)計(jì)師了解和學(xué)習(xí)一些設(shè)計(jì)最佳實(shí)踐和技巧。成功的圖標(biāo)有很多以下只列舉兩個(gè)圖標(biāo)設(shè)計(jì)案例：

1. Airbnb圖標(biāo)：Airbnb是一個(gè)在線旅行房屋租賃平臺(tái)，它的圖標(biāo)設(shè)計(jì)非常簡(jiǎn)潔和具有代表性。Airbnb的圖標(biāo)設(shè)計(jì)使用了一個(gè)圓形的形狀，并使用了一個(gè)代表性的符號(hào)來(lái)表示它的功能和意義。同時(shí)，Airbnb的圖標(biāo)設(shè)計(jì)也非常簡(jiǎn)潔，它只使用了少量的顏色和形狀，這使得圖標(biāo)非常易于理解和使用。
2. Apple的App Store圖標(biāo)：Apple的App Store圖標(biāo)采用了一個(gè)簡(jiǎn)單明了的大字母”A”，代表了應(yīng)用程序。這個(gè)圖標(biāo)的設(shè)計(jì)借鑒了蘋果公司的品牌風(fēng)格，采用了簡(jiǎn)潔、現(xiàn)代的風(fēng)格，使其在界面中易于辨認(rèn)。

B. 分析圖標(biāo)設(shè)計(jì)背后的原理和決策

成功的UI圖標(biāo)設(shè)計(jì)案例背后都有一些共同的原理和決策。

以下是一些分析圖標(biāo)設(shè)計(jì)背后的原理和決策的方法：

• 了解用戶的需求和期望：設(shè)計(jì)師應(yīng)該了解用戶的需求和期望，并根據(jù)用戶的需求和期望進(jìn)行圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加符合用戶需求和期望的圖標(biāo)，從而提高圖標(biāo)的可用性和易用性。
• 遵循一致性和統(tǒng)一性原則：設(shè)計(jì)師應(yīng)該遵循一致性和統(tǒng)一性原則，使用相似的線條、顏色和風(fēng)格來(lái)設(shè)計(jì)圖標(biāo)。這可以幫助設(shè)計(jì)師創(chuàng)建出具有一致性和統(tǒng)一性的圖標(biāo)，從而提高圖標(biāo)的可視化傳達(dá)和可用性。
• 避免過(guò)度復(fù)雜化的細(xì)節(jié)：設(shè)計(jì)師應(yīng)該避免過(guò)度復(fù)雜化的細(xì)節(jié)，追求簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加簡(jiǎn)潔和易于理解的圖標(biāo)，從而提高圖標(biāo)的可用性和易用性。

五、最后

A. 總結(jié)UI圖標(biāo)設(shè)計(jì)的重要性和原則

UI圖標(biāo)在用戶界面中扮演著重要的角色，它們不僅能夠傳達(dá)信息和功能，還能夠增強(qiáng)用戶體驗(yàn)和界面的美感。以下是一些重要的UI圖標(biāo)設(shè)計(jì)原則：

• 簡(jiǎn)潔明了：使用必要的元素和形狀，避免過(guò)度復(fù)雜化的細(xì)節(jié)。
• 可識(shí)別性：使圖標(biāo)獨(dú)特、清晰、易于辨認(rèn)，以便用戶快速理解其含義。
• 一致性：與品牌風(fēng)格相匹配，確保整個(gè)界面的視覺統(tǒng)一性。
• 可擴(kuò)展性：使用矢量圖形制作圖標(biāo)，以便在不同尺寸和分辨率下保持清晰度。
• 用戶反饋和測(cè)試：收集用戶的意見和建議，進(jìn)行測(cè)試和調(diào)整，以提升圖標(biāo)的質(zhì)量和效果。

B. 鼓勵(lì)設(shè)計(jì)師繼續(xù)探索和發(fā)展圖標(biāo)設(shè)計(jì)技能

圖標(biāo)設(shè)計(jì)是一個(gè)不斷發(fā)展和演進(jìn)的領(lǐng)域。鼓勵(lì)設(shè)計(jì)師們繼續(xù)學(xué)習(xí)、實(shí)踐和探索，通過(guò)不斷嘗試新的技術(shù)和方法，提升自己的設(shè)計(jì)能力。以下是一些建議：

• 深入研究：學(xué)習(xí)不同的圖標(biāo)設(shè)計(jì)風(fēng)格和趨勢(shì)，深入了解各種設(shè)計(jì)工具和技術(shù)，保持對(duì)設(shè)計(jì)領(lǐng)域的持續(xù)學(xué)習(xí)。
• 觀察和啟發(fā)：注意身邊的圖標(biāo)設(shè)計(jì)，從成功的案例中汲取靈感，拓寬自己的設(shè)計(jì)思維。
• 反饋和合作：與團(tuán)隊(duì)和用戶溝通交流，接受他們的反饋和建議，與其他設(shè)計(jì)師合作分享經(jīng)驗(yàn)和知識(shí)。
• 認(rèn)識(shí)目標(biāo)用戶：了解目標(biāo)用戶的需求和偏好，將其融入到圖標(biāo)設(shè)計(jì)的決策中。

UI圖標(biāo)設(shè)計(jì)在用戶界面中起著重要的作用。通過(guò)掌握設(shè)計(jì)原則和實(shí)踐技巧，繼續(xù)學(xué)習(xí)和發(fā)展設(shè)計(jì)技能，我們將能夠創(chuàng)造出令人印象深刻的UI圖標(biāo)作品，提升用戶體驗(yàn)和界面美感。不斷探索和挑戰(zhàn)自己，成為一名卓越的圖標(biāo)設(shè)計(jì)師！

春節(jié)是一個(gè)很大的流量池，經(jīng)過(guò)一年時(shí)間的勞累，人們有了更多的閑暇時(shí)光，這是企業(yè)也是內(nèi)容創(chuàng)作者獲取流量的絕佳時(shí)機(jī)。

這個(gè)春節(jié)，我被各大產(chǎn)品的情感化設(shè)計(jì)萌化了，設(shè)計(jì)細(xì)節(jié)太貼心了，極大的增加了產(chǎn)品與用戶的粘性，各大廠都推出了既承載千年文化重量，又具備數(shù)字原生形態(tài)的新春物種，花樣可謂是百花齊放。

各大廠都紛紛從視覺、社交互動(dòng)、內(nèi)容創(chuàng)作展開想象，設(shè)計(jì)了豐富多彩的春節(jié)用戶體驗(yàn)，下面讓我們來(lái)開開眼福，一睹他們的風(fēng)采，同時(shí)也順便學(xué)習(xí)下，作為設(shè)計(jì)師的我們有哪些創(chuàng)意出發(fā)點(diǎn)？

一、各大廠春節(jié)設(shè)計(jì)的背景

春節(jié)，作為中國(guó)最重要的傳統(tǒng)節(jié)日，不僅承載著深厚的文化內(nèi)涵，更是一場(chǎng)全民參與的消費(fèi)盛宴和社交狂歡。在這個(gè)特殊的時(shí)期，人們的注意力高度集中，圍繞春節(jié)展開的各種活動(dòng)，無(wú)論是線上還是線下，都呈現(xiàn)出爆發(fā)式的增長(zhǎng)。

從電商數(shù)據(jù)來(lái)看，2025年全國(guó)網(wǎng)上年貨節(jié)期間，全國(guó)日均網(wǎng)上零售額同比增長(zhǎng)6.2%，累計(jì)網(wǎng)絡(luò)零售額更是突破7000億元人民幣，同比去年增長(zhǎng)9.8%，再創(chuàng)歷史新高。

抖音電商“春節(jié)不打烊，財(cái)神送福氣”活動(dòng)中，全域日均支付GMV同比增長(zhǎng)56.02%，直播日均支付GMV同比增長(zhǎng)46.57%。

快手本地生活“新春團(tuán)購(gòu)節(jié)”GMV同比大漲117%，新線城市日均支付用戶數(shù)環(huán)比增長(zhǎng)234%，這些驚人的數(shù)據(jù)，無(wú)一不彰顯著春節(jié)期間電商消費(fèi)的強(qiáng)勁活力。

社交平臺(tái)上同樣熱鬧非凡。除夕及春晚期間微博活動(dòng)用戶達(dá)2.97億，全站互動(dòng)超3.1億次，4656萬(wàn)用戶除夕贏得福運(yùn)紅包，全國(guó)年味相關(guān)話題閱讀量破102億。

如何定義B端產(chǎn)品及B端產(chǎn)品經(jīng)理方法論

相較于C端產(chǎn)品，B端產(chǎn)品最大的特點(diǎn)是：面向特定領(lǐng)域用戶，且數(shù)量少得多，但更注重對(duì)用戶專業(yè)領(lǐng)域操作流程的深度挖掘——也就是專業(yè)性更強(qiáng)，與業(yè)務(wù)的結(jié)合更緊密。

查看詳情 >

快手在2025年春節(jié)期間，平臺(tái)日活用戶規(guī)模創(chuàng)歷史新高，春節(jié)活動(dòng)相關(guān)視頻總播放量超2000億，直播總觀看量高達(dá)150多億，“搖發(fā)財(cái)樹”紅包活動(dòng)中，用戶一共搖了57億次紅包。

如此龐大的流量和用戶注意力，為品牌和商家提供了絕佳的展示舞臺(tái)。在這個(gè)信息爆炸的時(shí)代，誰(shuí)能在春節(jié)期間成功吸引用戶的注意力，誰(shuí)就能在市場(chǎng)競(jìng)爭(zhēng)中搶占先機(jī)。

一個(gè)精心設(shè)計(jì)的廣告、一場(chǎng)別出心裁的互動(dòng)活動(dòng)，都有可能在這個(gè)流量高峰中迅速傳播，收獲海量的關(guān)注和曝光，實(shí)現(xiàn)品牌知名度的提升和產(chǎn)品銷量的增長(zhǎng)。

下面就讓我們看看各大廠在春節(jié)期間都找到了哪些設(shè)計(jì)機(jī)會(huì)點(diǎn)？

二、視覺機(jī)會(huì)點(diǎn)

1、按鈕的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 百度地圖，在按鈕設(shè)計(jì)上動(dòng)了小心思，按鈕用動(dòng)車和燈籠相結(jié)合，顏色上也用的大紫大紅，盡顯春節(jié)的氣氛。
2. 花瓣，把幾個(gè)素材的功能入口做成了紅包形式，畫面效果耳目一新，原來(lái)按鈕入口還能如此的多姿好看，年味十足。
3. 農(nóng)業(yè)銀行，功能入口全部由之前玻璃質(zhì)感的扁平風(fēng)變成了現(xiàn)在的微質(zhì)感年味風(fēng)，圖標(biāo)的每一個(gè)細(xì)節(jié)都在緊靠春節(jié)展開創(chuàng)作，展現(xiàn)了產(chǎn)品的細(xì)心和用心。
4. 肯德基，功能入口圖標(biāo)全部用剪紙風(fēng)格形式表達(dá)，將過(guò)年家家戶戶貼窗花的場(chǎng)景搬到了線上，讓用戶盡享年味。
5. 騰訊視頻，將主要功能入口用了故宮的古典建筑和節(jié)日的鑼鼓，彰顯了節(jié)日的熱鬧，也是不錯(cuò)的設(shè)計(jì)著手點(diǎn)。

2、網(wǎng)頁(yè)皮膚的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 太平洋汽車，左邊燈籠，右邊靈蛇，甚是歡樂，蛇年氛圍十足。
2. 春秋航空，背景用了極具中國(guó)年味的水墨插畫進(jìn)行表達(dá)，畫面中有熙熙攘攘拜年玩耍場(chǎng)景，更有調(diào)皮可愛的小蛇帶著帽子在街上行走，飽足了觀眾的眼福。
3. 搜狐，左邊新年祝福語(yǔ)，右邊一個(gè)調(diào)皮的剪影小蛇嘴里叼著一個(gè)燈籠，雖簡(jiǎn)潔，也是很能感受到節(jié)日的氣息。
4. 萬(wàn)方數(shù)據(jù)，左右兩對(duì)精致的燈籠，通紅的背景，營(yíng)造出萬(wàn)家燈火的感覺，滿滿的吉祥寓意，象征著來(lái)年的好運(yùn)與吉祥。
5. 中華網(wǎng)，滿屏的煙花秀，讓人瞬間想起大年三十除夕夜的煙花，小小的元素也是有著大大的魔力，讓人浮想聯(lián)翩。

3、彈窗的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 花瓣的彈窗，用了紅包與燈籠的結(jié)合，玫紅色和金色金幣的運(yùn)用，畫面財(cái)源滾進(jìn)的寓意濃厚。
2. 有道翻譯的彈窗，邊框用了具有中式邊框的造型，左右兩串長(zhǎng)長(zhǎng)的燈籠，下面還配有祥云，很有意境，紅火的畫面，再將需要凸顯的信息放置在在紫色按鈕上，對(duì)比感強(qiáng)烈，信息傳達(dá)無(wú)比清晰。
3. 應(yīng)用寶的彈窗，用了漫畫的風(fēng)格進(jìn)行表達(dá)，按鈕和邊框都運(yùn)用了中式的裝飾紋樣，緊扣節(jié)日主題。
4. 中國(guó)電信的這個(gè)彈窗，比較討巧，其他的樣式都沿用了日常的樣式，只是在右上角添加了一個(gè)小小的煙花造型，氛圍感馬上呈現(xiàn)，對(duì)于設(shè)計(jì)師來(lái)說(shuō)真是省時(shí)省力的舉措。
5. 支付寶的彈窗，直接用了轉(zhuǎn)紅包的視覺創(chuàng)意，將過(guò)年的這種人情世故轉(zhuǎn)到了彈窗中，很親民。
6. 中信銀行的彈窗，運(yùn)用歡樂的吉祥物形象，外加幾何煙花造型來(lái)營(yíng)造春節(jié)氛圍，也是不錯(cuò)的視覺表達(dá)。

4、動(dòng)效在春節(jié)PC端的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 金投網(wǎng)的背景用了一些在空中搖曳的燈籠和福字，讓春節(jié)的氛圍額外的濃烈，果然動(dòng)效是氛圍打造的絕佳利器。
2. 地下城與勇士，它的氛圍打造就更濃郁了，有人有物，場(chǎng)景額外的熱鬧，仿佛看到了過(guò)年大家一起賞燈看煙花的場(chǎng)景。

5、動(dòng)效在春節(jié)登錄頁(yè)的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

登錄元夢(mèng)之星和洪恩識(shí)字，感覺就像打開了一場(chǎng)煙花秀的視覺盛典，特別是洪恩識(shí)字，效果特別的炸裂，數(shù)字煙花秀做的特別吸睛。

這樣的動(dòng)效視覺表現(xiàn)很好的與用戶產(chǎn)生了情感共鳴，拉近了彼此的距離，增加了節(jié)日的樂趣。

6、動(dòng)效在春節(jié)APP的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

支付寶在春節(jié)期間推出了一款很驚艷的皮膚，畫面中仙氣飄飄，一改之前單調(diào)的純色背景，將有中國(guó)韻味的敦煌壁畫文化搬上了熒屏，增添了很多喜慶的氛圍和中國(guó)味，養(yǎng)顏又養(yǎng)心。

設(shè)計(jì)思考：

騰訊QQ在過(guò)年期間，推出了一個(gè)領(lǐng)Q幣的活動(dòng)還挺有意思，小企鵝穿著厚厚的衣服，手中抱著一個(gè)福袋在奔跑，通過(guò)這樣的動(dòng)效引導(dǎo)用戶去領(lǐng)金幣，非常的有意思。

7、Banner在春節(jié)的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

Banner是很好進(jìn)行情感化設(shè)計(jì)的窗口，也是打造春節(jié)氣氛的絕佳寶地，那么這個(gè)春節(jié)它也一定不會(huì)缺席。

1. 優(yōu)設(shè)網(wǎng)在Banner中運(yùn)用古代門頭和靈蛇結(jié)合，再配合煙花，喜慶感倍增。
2. 釘釘在Banner中采用了他們的吉祥物進(jìn)行了設(shè)計(jì)，讓吉祥物身穿年服來(lái)傳遞節(jié)日的氣息，也是不錯(cuò)的設(shè)計(jì)出發(fā)點(diǎn)。
3. 七貓中華網(wǎng)，運(yùn)用城市煙花結(jié)合寫作的筆進(jìn)行創(chuàng)作，符合節(jié)日屬性同時(shí)又與平臺(tái)業(yè)務(wù)相契合，表達(dá)的很妙。
4. 創(chuàng)客貼，一改常規(guī)的大紅，用了淡雅的黃色，左右兩邊點(diǎn)綴一個(gè)燈籠和些許元宵，也傳遞了不一樣的節(jié)日氛圍。

三、功能創(chuàng)新機(jī)會(huì)點(diǎn)

1、微信紅包的微創(chuàng)新

設(shè)計(jì)思考：

今年的微信紅包，新增了一個(gè)隨機(jī)的拜年紅包功能，可以隨機(jī)的派送紅包金額，并且在紅包的封面上可以長(zhǎng)按，說(shuō)出你想跟對(duì)方說(shuō)的寄語(yǔ)，這個(gè)小小功能的精進(jìn)，讓發(fā)紅包這個(gè)事情也變得更加有溫度。

微信紅包，還有一個(gè)新的創(chuàng)新點(diǎn)，小小的紅包封面變成了產(chǎn)品的宣傳欄，比方說(shuō)廣汽埃安的這個(gè)紅包封面，它既是拜年的寄語(yǔ)欄，又是絕佳的產(chǎn)品宣傳欄，配合動(dòng)效，特別的酷。

2、百度地圖的微創(chuàng)新

設(shè)計(jì)思考：

百度地圖在這個(gè)春節(jié)心系百姓的民生問題，知道人們?cè)谶@個(gè)節(jié)日有旅游、探親、出行的需求。

百度地圖開發(fā)了人口遷徙監(jiān)測(cè)功能、交通擁堵實(shí)時(shí)監(jiān)控功能，讓人們?cè)诔鲂袝r(shí)避開高峰路段，以及人口扎堆的旅游景點(diǎn)。

更有后方快車通過(guò)的提醒功能，當(dāng)后方來(lái)了一輛很快的車時(shí)，百度地圖也會(huì)進(jìn)行語(yǔ)音播報(bào)，提醒車主這時(shí)不能隨便變道。

當(dāng)自己體驗(yàn)到這個(gè)功能的時(shí)候，感覺到這不僅僅是簡(jiǎn)單的功能了，更是一份對(duì)用戶的愛，以及對(duì)生命的敬畏。

3、滿足拜年需求的產(chǎn)品功能創(chuàng)新

設(shè)計(jì)思考：

過(guò)年期間，是重溫感情的好機(jī)會(huì)，朋友間彼此的問候還是很有必要的，那么如何問候，是簡(jiǎn)單的文字，還是用更有創(chuàng)意的視頻畫面去表達(dá)呢？

發(fā)現(xiàn)我們考慮的，很多產(chǎn)品都已經(jīng)幫我們想好了，比方說(shuō)訊飛智作、剪映就推出了很多拜年視頻的模板供用戶自己去選擇加工使用。

很大程度提升了用戶制作視頻的效率，也很大程度提升了產(chǎn)品的粘性，為用戶多考慮一點(diǎn)，用戶對(duì)產(chǎn)品的依賴也會(huì)更多一點(diǎn)。

四、社交互動(dòng)機(jī)會(huì)點(diǎn)

1、支付寶的社交互動(dòng)

設(shè)計(jì)思考：

發(fā)現(xiàn)支付寶在與用戶社交互動(dòng)這塊做的非常的好，每逢大的節(jié)日都會(huì)有與大眾互動(dòng)的運(yùn)營(yíng)活動(dòng)。

比方說(shuō)元宵節(jié)的點(diǎn)?？ɑ顒?dòng)，萌萌的元宵，再配合微動(dòng)效，以及引導(dǎo)用戶去點(diǎn)擊的手勢(shì)動(dòng)效，無(wú)不是在號(hào)召用戶參與進(jìn)來(lái)。

支付寶的五?；顒?dòng)，很有意思，入口的左右兩邊放置一個(gè)帥哥和靚妹在接紅包，畫面很有互動(dòng)感，歡樂性十足，讓人也忍不住去參與集?？ǖ幕顒?dòng)。

五、營(yíng)銷機(jī)會(huì)點(diǎn)

春節(jié)是消費(fèi)高峰期，人們有購(gòu)置年貨、禮品等需求，此時(shí)也是各大品牌搞營(yíng)銷活動(dòng)的好機(jī)會(huì)。

1、體驗(yàn)的營(yíng)銷案列組一

設(shè)計(jì)思考：

1. 蘇寧易購(gòu)，在元宵節(jié)推出家電換新補(bǔ)貼20%的政策，滿足了很多人購(gòu)置新年物品的需求，一定程度上促進(jìn)產(chǎn)品的轉(zhuǎn)化。
2. 有道和WPS在春節(jié)推出聯(lián)合會(huì)員，且只有4折，極大的刺激了用戶的復(fù)購(gòu)，以及新用戶的購(gòu)買。
3. 字由也緊跟節(jié)日步伐，在這個(gè)特殊的節(jié)日展開了“阿里漢儀順利熱土體”的公益發(fā)售，促進(jìn)了字體的發(fā)售，就連我這個(gè)平時(shí)很少購(gòu)買字體的人來(lái)說(shuō)，也順利下單了，來(lái)支持這個(gè)公益字體的發(fā)售，可以商用，卻只要59.9就能終身商業(yè)使用，誰(shuí)人不心動(dòng)，字體又這么好看。
4. 農(nóng)業(yè)銀行在這個(gè)春節(jié)期間推出鄉(xiāng)村農(nóng)產(chǎn)品的售賣活動(dòng)，價(jià)格實(shí)惠，同時(shí)又帶著助農(nóng)的性質(zhì)，我相信一定會(huì)帶來(lái)一波不錯(cuò)的銷量。
5. 長(zhǎng)沙銀行也積極推出低利率的貸款活動(dòng)，吸引人們?nèi)ベJ款。

2、體驗(yàn)的營(yíng)銷案列組二

設(shè)計(jì)思考：

酷我音樂在過(guò)年期間，把皮膚設(shè)計(jì)當(dāng)成了一種增加會(huì)員的刺激手段，一旦成為會(huì)員就能享受跟普通用戶不一樣的頭像裝飾。

連音樂播放頁(yè)的皮膚也會(huì)有更多選擇，可以選擇年味十足的播放頁(yè)，這讓成為會(huì)員的人有一種偏愛的感覺，很不錯(cuò)的促銷手段。

產(chǎn)品既能賺到錢，又能滿足一些用戶的需求，多好的共贏方式，擁有著健康的成長(zhǎng)生態(tài)。

六、阿里春節(jié)設(shè)計(jì)趨勢(shì)報(bào)告

在阿里UCAN年度設(shè)計(jì)趨勢(shì)報(bào)告中，著重強(qiáng)調(diào)了設(shè)計(jì)在商業(yè)場(chǎng)景里對(duì)用戶行為的關(guān)鍵影響。在春節(jié)這一特殊時(shí)期，流量高峰帶來(lái)海量用戶，此時(shí)設(shè)計(jì)的價(jià)值尤為凸顯。

報(bào)告指出，隨著技術(shù)的發(fā)展，設(shè)計(jì)已從單純的視覺美化，轉(zhuǎn)變?yōu)樘嵘脩趔w驗(yàn)和驅(qū)動(dòng)商業(yè)增長(zhǎng)的核心力量。

以春節(jié)紅包設(shè)計(jì)為例，具備按鈕動(dòng)效的設(shè)計(jì)能極大吸引用戶注意力。從心理學(xué)角度來(lái)看，動(dòng)態(tài)元素更容易刺激用戶的視覺神經(jīng)，引發(fā)他們的好奇心和探索欲。

這與UCAN報(bào)告中提到的利用動(dòng)態(tài)設(shè)計(jì)增強(qiáng)用戶交互體驗(yàn)的理念高度契合。數(shù)據(jù)顯示，這種設(shè)計(jì)使紅包打開率提高了30%，直觀地體現(xiàn)了優(yōu)秀設(shè)計(jì)在春節(jié)流量高峰下，對(duì)提升用戶參與度的顯著效果。

在電商頁(yè)面設(shè)計(jì)方面，UCAN報(bào)告強(qiáng)調(diào)簡(jiǎn)潔直觀且富有創(chuàng)意的界面設(shè)計(jì)，能有效引導(dǎo)用戶行為。

春節(jié)期間，電商平臺(tái)流量劇增，那些依據(jù)這一理念設(shè)計(jì)的頁(yè)面，通過(guò)合理布局商品展示、運(yùn)用鮮明的春節(jié)色彩元素，以及提供便捷的購(gòu)物流程，成功吸引用戶點(diǎn)擊，提升了商品點(diǎn)擊率和購(gòu)買轉(zhuǎn)化率 。

這不僅印證了報(bào)告中關(guān)于設(shè)計(jì)要貼合用戶心理和行為習(xí)慣的要點(diǎn)，也再次證明了在流量高峰時(shí)，優(yōu)秀設(shè)計(jì)對(duì)商業(yè)轉(zhuǎn)化的巨大推動(dòng)作用。

七、騰訊春節(jié)趨勢(shì)報(bào)告

微信團(tuán)隊(duì)發(fā)布《微信里的賽博年味兒》報(bào)告顯示，自制紅包封面玩法流行，春節(jié)期間微信里誕生了1億+款用戶創(chuàng)作紅包封面，約3.9億人收到此類自制封面紅包。

微信“送禮物”功能中，書籍品類送禮訂單量環(huán)比增長(zhǎng)10000%+，收到禮物數(shù)目最多的省份前三甲是廣東省、山東省、浙江省。

看到這份趨勢(shì)報(bào)告，我驚呆了，挖掘一個(gè)符合用戶需求的產(chǎn)品功能，能帶動(dòng)海量用戶的黏性和活躍，不得不說(shuō)，微信自制紅包的這個(gè)功能開發(fā)的太好了。

總結(jié)

作為設(shè)計(jì)師，以前只在意產(chǎn)品的視覺和皮膚，沒有站在一個(gè)多維的角度去看待一件事情以及背后的邏輯，發(fā)現(xiàn)寫作讓我思維更開闊，視角更全面，想事情想的更清楚，看問題看的更明白，感謝這一年來(lái)自己筆耕不輟，一直在精進(jìn)的路上。

2024年，行業(yè)經(jīng)歷了飛書裁員、Salesforce視覺更新、釘釘商業(yè)化等重大事件，這些變化不僅影響了設(shè)計(jì)師的職業(yè)發(fā)展，也重塑了B端設(shè)計(jì)的市場(chǎng)格局。站在2025年的起點(diǎn)，本文將深入探討B(tài)端設(shè)計(jì)的未來(lái)趨勢(shì)，供大家參考。

每一年，我都有一個(gè)“任務(wù)”，為過(guò)去一整年的 B 端設(shè)計(jì)師進(jìn)行匯報(bào)。

一方面是給大家匯報(bào)過(guò)去一整年瞬息變化的市場(chǎng)，同時(shí)呢也想聊聊站在我的視角當(dāng)中，未來(lái)一整年的行業(yè)發(fā)展趨勢(shì)，以及我自己的判斷。

那今年也不例外，在今年整體行業(yè)的大背景下，我們究竟應(yīng)該何去何從？想坐下來(lái)靜靜的和大家聊聊～

今天我們主要聊三個(gè)方面：2024 B 端行業(yè)大事件、當(dāng)前整體環(huán)境、2025 年 B 端設(shè)計(jì)趨勢(shì)判斷，文章有些長(zhǎng)，內(nèi)容稍干，大家耐心觀看～

一、2024 B 端行業(yè)大事件

在回憶過(guò)去一整年時(shí)，我會(huì)覺得有幾件事情是非常重要，因此在這里提出給大家進(jìn)行分享。

1. 飛書裁員設(shè)計(jì)師

在 2024 年年初，飛書裁員，據(jù)說(shuō)設(shè)計(jì)師裁員高達(dá) 60%，用研100%… 這一件事帶來(lái)了一系列的連鎖反應(yīng)。

首先是市場(chǎng)會(huì)覺得設(shè)計(jì)并沒有價(jià)值，B 端設(shè)計(jì)沒有價(jià)值，設(shè)計(jì)師只是一個(gè)作圖的工具。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

因?yàn)轱w書在我看來(lái)之前是異常重視用戶體驗(yàn)，從我們梳理他們的設(shè)計(jì)改版開始，你會(huì)發(fā)現(xiàn)整個(gè)管理后臺(tái)產(chǎn)品都在往著好的方向發(fā)展。

但即使這樣，設(shè)計(jì)師也被裁員，會(huì)讓我們感到困惑，問題到底出在哪里？

同時(shí)，這樣大量且優(yōu)質(zhì)的設(shè)計(jì)師被裁過(guò)后，也會(huì)造成行業(yè)的踩踏效應(yīng)。對(duì)于普通的設(shè)計(jì)師而言，行業(yè)內(nèi)卷，求職會(huì)異常艱難，相信在那段時(shí)間求職的同學(xué)、特別是在北京的同學(xué)都會(huì)有感悟，真的是異常艱難。

2. Salesforce 產(chǎn)品更新

在五月份時(shí)，沉寂許久的 Salesforce 迎來(lái)了其新版本的視覺更新，這是 Salesforce 成立以來(lái)，做的最大維度的更新。

首先整體頁(yè)面樣式經(jīng)歷了調(diào)整，從之前帶有上世紀(jì) 90 年代風(fēng)格轉(zhuǎn)變?yōu)楦鼮槌墒?、商?wù)化的風(fēng)格，這使得整個(gè)界面的協(xié)調(diào)性得以增強(qiáng)，這也符合目前 B 端產(chǎn)品的視覺風(fēng)格發(fā)展趨勢(shì)。

其次頁(yè)面之中有效減少了信息干擾，讓頁(yè)面內(nèi)容能夠清晰地呈現(xiàn)于用戶眼前。

同時(shí)針對(duì)元素圓角，將其增大。不過(guò)就我個(gè)人而言，不太欣賞整體圓角加大的設(shè)計(jì)，因?yàn)楦杏X這與 Salesforce 的整體品牌形象不夠契合。

最后會(huì)發(fā)現(xiàn)，這次修改主要集中在界面樣式方面，對(duì)信息結(jié)構(gòu)以及界面布局并沒有作出大規(guī)模的變動(dòng)，我猜測(cè)他們是不敢做、也不能做。一個(gè)小的改動(dòng)對(duì)于 Salesforce 這個(gè)龐然巨獸來(lái)說(shuō)影響都會(huì)非常的大。

這里，想和大家一同聊聊 Salesforce 更新的原因竟是什么？

我認(rèn)為，一方面是產(chǎn)品自身迭代的內(nèi)在需求，確實(shí)需要進(jìn)行 Style 層面的更新維護(hù)；

另一方面則是為新推出的 AI 功能進(jìn)行鋪墊，想試圖借助嶄新的視覺形象，吸引更多用戶去使用 AI 功能。這也是很多產(chǎn)品更新常用的手段，比如早些年的微信也經(jīng)常這樣用游戲來(lái)吸引用戶進(jìn)行升級(jí)。

3. 釘釘商業(yè)化變現(xiàn)

在我們看來(lái)，一個(gè)良好的 B 端產(chǎn)品，一定是需要擁有更理想的商業(yè)模式，而釘釘?shù)纳虡I(yè)化就顯得更為順利。

釘釘自從在阿里被獨(dú)立出過(guò)后，幾次發(fā)布會(huì)都在強(qiáng)調(diào)自己的在商業(yè)模式上的進(jìn)展和變化。

• 在 PLG 方面，不斷提升基礎(chǔ)功能和復(fù)雜的流程管理，這讓更多的 ISV 企業(yè)入駐，打造完善的生態(tài)；
• 在 SLG 方面，會(huì)為企業(yè)提供更為完整的數(shù)字化解決方案，保證產(chǎn)品的高效運(yùn)轉(zhuǎn)。

從整體來(lái)看會(huì)發(fā)現(xiàn)釘釘對(duì)于用戶的態(tài)度也會(huì)有所轉(zhuǎn)變，從原來(lái) 以“老板為核心”變?yōu)楝F(xiàn)在以“要考慮員工感受”，也說(shuō)明整個(gè) B 端產(chǎn)品整體的發(fā)展路徑就應(yīng)該如此。

所以很多企業(yè)都是在產(chǎn)品初期，經(jīng)歷過(guò)混沌的時(shí)期過(guò)后才會(huì)需要 B 端設(shè)計(jì)師。

4. 設(shè)計(jì)行業(yè)整體氛圍較差

聊到公眾號(hào)文章，也順帶說(shuō)說(shuō)今年的設(shè)計(jì)氛圍和往年相比是更差的。

你會(huì)發(fā)現(xiàn)大家都不太愿意更新文章，無(wú)論是設(shè)計(jì)大會(huì)又或者是設(shè)計(jì)文章分享，最近能閱讀的東西真的很少，這會(huì)導(dǎo)致大家的交流異常的匱乏。

從我整理過(guò)去 B 端行業(yè)的資料來(lái)看，這兩年的資源更新是非常少的。

二、市場(chǎng)環(huán)境

我們簡(jiǎn)單聊聊市場(chǎng)環(huán)境，對(duì)于整個(gè)互聯(lián)網(wǎng)行業(yè)來(lái)說(shuō)，你會(huì)發(fā)現(xiàn)整體都是異常蕭條。

無(wú)論是 C 端產(chǎn)品的增長(zhǎng)乏力也好、又或者是 B 端產(chǎn)品的行業(yè)不景氣也罷，總之過(guò)去一年大家整體過(guò)得都比較艱難。對(duì)于設(shè)計(jì)行業(yè)的各位來(lái)說(shuō)，我們目前的狀態(tài)其實(shí)都是茍著～

因?yàn)樵O(shè)計(jì)師很難做到雪中送炭，也就是通過(guò)一個(gè)設(shè)計(jì)點(diǎn)，真正為企業(yè)、為產(chǎn)品創(chuàng)造更多的收入，所以這也就導(dǎo)致我們目前的處境十分尷尬。

你會(huì)發(fā)現(xiàn)大家在各個(gè)媒體上都在勸退 B 端設(shè)計(jì)師，說(shuō)這是一個(gè)夕陽(yáng)行業(yè)。

但這里想對(duì)剛?cè)胄械男氯硕嗾f(shuō)兩句。目前經(jīng)濟(jì)環(huán)境，任何行業(yè)都會(huì)有勸退的人，你要做的是去分析目前自己的選擇，也就是如果我不做 B 端設(shè)計(jì)師，我還有其他什么選擇？

比如你學(xué)習(xí)的是 環(huán)藝設(shè)計(jì)、城市規(guī)劃設(shè)計(jì) 等相關(guān)專業(yè)，又或者是你自己已經(jīng)在 B 端工作多年，那可能 B 端設(shè)計(jì)師或許還是一個(gè)相對(duì)求職容易的行業(yè)，尋找明確的方向，就能獲得行業(yè)當(dāng)中的一些回報(bào)。

本來(lái)想說(shuō)很多，但想想還是算了，今年的就業(yè)形勢(shì)確實(shí)有所回暖，我們可以期待一波～

三、2025 年 B 端產(chǎn)品的發(fā)展趨勢(shì)

對(duì)于 2025 年，我們會(huì)認(rèn)為有以下幾個(gè)發(fā)展趨勢(shì)：

1. B 端產(chǎn)品 AI 化

AI是目前行業(yè)當(dāng)中最迅猛的趨勢(shì)，B端產(chǎn)品也不例外。

對(duì)于很多B端產(chǎn)品而言，AI的出現(xiàn)優(yōu)化了用戶在日常工作當(dāng)中使用繁瑣的問題，在許多B端產(chǎn)品當(dāng)中，都會(huì)把AI當(dāng)做是最為重要的產(chǎn)品功能。

比如我們之前總結(jié)過(guò)的：Salesforce、金碟、飛書，又或者是在阿里、騰訊內(nèi)部的很多系統(tǒng)，都會(huì)通過(guò)AI的方式加以介入，來(lái)確保產(chǎn)品的高效使用。

在未來(lái)一年，我們要多去考慮 AI與語(yǔ)音交互、低代碼產(chǎn)品、配置類系統(tǒng)之間的碰撞，在未來(lái)肯定會(huì)有著更為不錯(cuò)的發(fā)展。

2. 無(wú)代碼/低代碼產(chǎn)品

行業(yè)當(dāng)中有著非常多的無(wú)代碼產(chǎn)品，原因在于國(guó)內(nèi)的大多數(shù)系統(tǒng)，我們會(huì)發(fā)現(xiàn)通常都需要通過(guò)定制化的方式來(lái)進(jìn)行處理。為此，行業(yè)當(dāng)中就出現(xiàn)了較多的無(wú)代碼產(chǎn)品，將產(chǎn)品的功能提供給用戶進(jìn)行配置和相應(yīng)使用。比如常見的有釘釘宜搭，又或者是騰訊的微搭等等。這類產(chǎn)品的類型非常多。

但在行業(yè)中，有人會(huì)覺得這類型的產(chǎn)品不適用于小團(tuán)隊(duì)的管理。因?yàn)槿绻旧硎切F(tuán)隊(duì)，需求整體沒有那么大。因此在行業(yè)里還會(huì)存在像多維表格這樣的系統(tǒng)來(lái)進(jìn)行相應(yīng)的呈現(xiàn)。

所以我們會(huì)發(fā)現(xiàn)，這類型的產(chǎn)品其實(shí)是市場(chǎng)大環(huán)境所需。在未來(lái)一年，個(gè)人認(rèn)為類似多維表格、Airtable 這類型的產(chǎn)品會(huì)更受大家歡迎。因?yàn)樗鼈兡軌蚝芰鲿车嘏c AI 進(jìn)行結(jié)合，同時(shí)整個(gè)產(chǎn)品的規(guī)模結(jié)構(gòu)也沒有那么大，更容易被用戶所接受。

3. 產(chǎn)品出海

產(chǎn)品出海是一個(gè)老生常談的話題，很早之前我們就有談到。由于國(guó)內(nèi)市場(chǎng)競(jìng)爭(zhēng)激烈，而且對(duì)于應(yīng)對(duì)市場(chǎng)需求已經(jīng)有了豐富的經(jīng)驗(yàn)，很多企業(yè)將自己方向轉(zhuǎn)向國(guó)外。比如最早飛書推出的國(guó)際版本Lark，ONES推出偏向研發(fā)管理相關(guān)的國(guó)際版本，以及小鵝通推出的付費(fèi)國(guó)際版（這還挺影響我們國(guó)外同學(xué)學(xué)習(xí)聽課…）

由于國(guó)內(nèi)產(chǎn)品研發(fā)效率快，人力成本相對(duì)較低，所以能以更低的價(jià)格吸引到國(guó)外的用戶。與此同時(shí)，國(guó)外對(duì)于整個(gè)產(chǎn)品付費(fèi)的意愿比較高，產(chǎn)品出海有著廣闊的發(fā)展空間。

除了以上提到的互聯(lián)網(wǎng)產(chǎn)品出海外，我發(fā)現(xiàn)很多國(guó)內(nèi)的越來(lái)越多的企業(yè)也開始跨國(guó)經(jīng)營(yíng)。面對(duì)出海發(fā)展的挑戰(zhàn)，數(shù)字化平臺(tái)的建設(shè)和應(yīng)用就成了這些企業(yè)的剛需，會(huì)去設(shè)計(jì)開發(fā)相應(yīng)的海外系統(tǒng)和軟件。

所以在目前的整個(gè)求職階段中，如果你在沿海城市，在工作中一定要考慮到英文的環(huán)境。在你的作品集里也可以適當(dāng)?shù)卣故疽恍в杏⑽牡捻?xiàng)目，并展示自己的國(guó)際化和本土化的設(shè)計(jì)能力

4. 跨境電商

除了常規(guī)的產(chǎn)品出海，還會(huì)有很多跨境電商相關(guān)的業(yè)務(wù)，這些業(yè)務(wù)也需要對(duì)應(yīng)的管理系統(tǒng)。

比如行業(yè)當(dāng)中常見的貨代，需要有與之對(duì)應(yīng)的海外倉(cāng)儲(chǔ)物流相關(guān)系統(tǒng)來(lái)配套。而且國(guó)內(nèi)的很多相關(guān)產(chǎn)品其實(shí)都需要海外版本進(jìn)行對(duì)應(yīng)的維護(hù)。在這些系統(tǒng)當(dāng)中，我見過(guò)最為奇特的便是國(guó)外網(wǎng)紅的 MCN 系統(tǒng)。

因?yàn)楹芏嚯娚填惖漠a(chǎn)品都需要考慮廣告投放相關(guān)事宜，因此會(huì)使用對(duì)應(yīng)的 MCN 系統(tǒng)來(lái)管理不同的網(wǎng)紅。這類系統(tǒng)其實(shí)在海外場(chǎng)景當(dāng)中是非常常見的。所以很多從事跨境電商相關(guān)業(yè)務(wù)的產(chǎn)品想要拓展海外市場(chǎng)，可以去考慮跨境電商相關(guān)業(yè)務(wù)拓展。

為了避免出現(xiàn)用戶所想看的信息被其他海量信息所淹沒的情況，設(shè)計(jì)師或者產(chǎn)研團(tuán)隊(duì)需要思考如何做好信息收納，讓擁有厚重信息和功能的產(chǎn)品變得簡(jiǎn)單清爽且易用。這篇文章里，作者就梳理了如何利用好容器類UI組件達(dá)成這一目標(biāo)的策略，一起來(lái)看。

用戶的矛盾

如果你問用戶他需要什么，他的回答大概率是“我全都要”。但是如果你把他想要的東西全都展示在頁(yè)面上，會(huì)發(fā)生什么？

用戶被自己想要的信息淹沒了。他會(huì)說(shuō)：“這根本沒法看，也沒法用，你們的設(shè)計(jì)太爛了。”

信息量大、操作復(fù)雜是B端產(chǎn)品的典型特征。我們?nèi)绾伟丫哂泻裰匦畔⒑凸δ艿漠a(chǎn)品，變得對(duì)用戶來(lái)說(shuō)清爽易用？

設(shè)計(jì)師就像魔術(shù)師

My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.

——Tess Gadd《UX cheat sheet: Preview and full display》

“界面設(shè)計(jì)就是把報(bào)紙塞進(jìn)火柴盒的藝術(shù)”，這個(gè)比喻真是太妙了?。ū就粱喊汛笙笱b進(jìn)冰箱的藝術(shù)）。怎么把報(bào)紙塞進(jìn)火柴盒？變魔術(shù)嗎？其實(shí)從某種角度上看，我們?cè)O(shè)計(jì)師就是魔術(shù)師——在適當(dāng)?shù)臅r(shí)機(jī)展示恰到好處的信息。

做到這三點(diǎn)挑戰(zhàn)，產(chǎn)品經(jīng)理只會(huì)不斷升值

好的產(chǎn)品經(jīng)理是很稀缺的，懂用戶、懂商業(yè)、懂?dāng)?shù)據(jù)的產(chǎn)品經(jīng)理走出互聯(lián)網(wǎng)，依然是搶手貨。相反，如果只做簡(jiǎn)單傳話、低效執(zhí)行、淺層思考的產(chǎn)品經(jīng)理，恐怕走不過(guò)未來(lái)3-5年的洪流。

查看詳情 >

而我們用到的道具，就是容器類UI組件。區(qū)別于其他類型的組件（比如輸入框下拉框），容器類組件就像收納盒，也就是用來(lái)收納信息和操作的。

咱們今天就來(lái)探索一下，如何利用好容器類UI組件，完成“空間膨脹術(shù)”，把報(bào)紙絲滑地塞進(jìn)火柴盒。

本文結(jié)構(gòu)

本文會(huì)分成兩部分。

• 第一部分：尋找到問題所在，探索出恰當(dāng)?shù)脑O(shè)計(jì)策略。
• 第二部分：針對(duì)設(shè)定好的設(shè)計(jì)策略，提煉出“容器類”組件使用決策樹。

這個(gè)決策樹不限于提供以下價(jià)值：

• 幫助設(shè)計(jì)師們?cè)谠O(shè)計(jì)過(guò)程中高效決策，提升設(shè)計(jì)效率；
• 幫助產(chǎn)研團(tuán)隊(duì)在討論中快速達(dá)成一致、減少內(nèi)耗；
• 提升匯報(bào)時(shí)的說(shuō)服力，獲得干系人支持。

下面我們正式開始吧~

PART 1：定位問題、設(shè)定策略

1. 問題所在

一個(gè)單點(diǎn)數(shù)據(jù)關(guān)聯(lián)的信息量能有多大？看一個(gè)網(wǎng)安行業(yè)的例子：

安全管理的目標(biāo)是要確保資產(chǎn)安全。用戶要做的，首先是要清點(diǎn)資產(chǎn)，資產(chǎn)分類分級(jí)和業(yè)務(wù)信息是資產(chǎn)自身屬性。另外，資產(chǎn)本身會(huì)存在一系列漏洞，漏洞也有分類分級(jí)以及修復(fù)過(guò)程數(shù)據(jù)。如果漏洞被利用，就會(huì)產(chǎn)生威脅告警，而告警也存在分類分級(jí)及處置過(guò)程數(shù)據(jù)。

可以看出，將數(shù)據(jù)建立層層關(guān)聯(lián)后，從一個(gè)單點(diǎn)可以衍生出來(lái)的信息是海量的、無(wú)邊的。

我們當(dāng)然不能把這全家桶一整個(gè)砸給用戶呀，用戶會(huì)被砸暈的。那我們?cè)撛趺醋觯?/p>

2. 設(shè)計(jì)策略

有兩個(gè)定律，跟“復(fù)雜”有關(guān)。

這兩個(gè)定律告訴我們一個(gè)道理：復(fù)雜，不會(huì)讓用戶覺得更好用，甚至增加了不必要的內(nèi)耗。

處理復(fù)雜，我們一般有哪些辦法呢。

第一步，先刪除多余的部分。就好比我們整理房間時(shí)，先挑出垃圾和閑置。

第二步，把物品歸類。被子和被子疊在一起，衣服和衣服掛在一起，書本放在書架上?？傊?，不能都堆到床上。

第三步，漸進(jìn)呈現(xiàn)。這就到了設(shè)計(jì)師要用“容器類”組件來(lái)完成“空間膨脹術(shù)”的環(huán)節(jié)了。

漸進(jìn)呈現(xiàn)的設(shè)計(jì)理論有點(diǎn)像C4模型。C4模型是一種軟件架構(gòu)可視化方法。它的獨(dú)特之處，就是從宏觀到微觀，設(shè)置了多個(gè)焦距，來(lái)層層遞進(jìn)。

3. 內(nèi)容分析

產(chǎn)品中的內(nèi)容也存在層層遞進(jìn)。內(nèi)容之間的關(guān)系，常見以下兩種。

一種是從屬關(guān)系，或父子關(guān)系。

一種是關(guān)聯(lián)關(guān)系，數(shù)據(jù)以某種維度建立了關(guān)聯(lián)。

PART 2：容器，以及如何使用容器

1. 關(guān)于容器

我們?nèi)绾斡萌萜黝怳I組件，去放置這些復(fù)雜且層層關(guān)聯(lián)的內(nèi)容？

以下是我們常見的容器類UI組件。

這些組件都可以用來(lái)收納，但是它們的特征差異也是巨大的，不能隨意混用。

我從“復(fù)雜度高低”和“關(guān)聯(lián)性強(qiáng)弱”這兩個(gè)坐標(biāo)維度來(lái)劃分出四個(gè)象限，展示這幾個(gè)容器的特征。

左下角這里基本是空的，為什么？因?yàn)檫@個(gè)是按照組件的最大潛力來(lái)擺放的，高維度可以兼容低維度。

值得注意的是，有一些組件在當(dāng)前頁(yè)面內(nèi)，而有些在浮層中。浮層在空間Z軸上有高度，視覺表現(xiàn)為有投影。

容器可以展示信息，也可以用來(lái)承載操作。我們把這兩個(gè)場(chǎng)景分開考慮。首先，我們從信息展示場(chǎng)景開始，分析如何選擇容器。

2. 信息展示容器的決策樹

這里有幾個(gè)關(guān)鍵問題，我們逐個(gè)分析：

關(guān)鍵問題一：能否分清主次。

這個(gè)問題很難。用戶可能說(shuō)“這個(gè)內(nèi)容我需要”，但“需要”這個(gè)詞存在極大的灰度空間，我們要判斷“需要”是多“重要”，需要從這幾個(gè)維度去分析。

關(guān)鍵問題二：是否需要對(duì)比參考。

如果需要對(duì)比參考，不能使用tabs（選項(xiàng)卡）。因?yàn)閠abs組件存在“排他性”——只有選中tab的子內(nèi)容是展示的，未選中的tabs下的內(nèi)容是被隱藏的。

以購(gòu)物為例，用戶在對(duì)幾款產(chǎn)品進(jìn)行對(duì)比挑選時(shí)，期望在一個(gè)界面同時(shí)看到幾款產(chǎn)品的參數(shù)和價(jià)格等。如果把產(chǎn)品數(shù)據(jù)放入各tab中，用戶就得在tab間反復(fù)橫跳，讓有限的短期記憶承受巨大壓力。

（↑案例：蘋果手機(jī)參數(shù)對(duì)比）

當(dāng)然，如果沒有對(duì)比參考的需求，我們可以考慮把內(nèi)容歸類到不同tabs下。在使用tabs組件時(shí)要確保內(nèi)容分類合理、標(biāo)簽文案簡(jiǎn)潔易懂。這樣用戶才能理解并愿意探索。

（↑tabs的應(yīng)用）

關(guān)鍵問題三：是否需要保持上下文。

有這樣一個(gè)場(chǎng)景：上級(jí)單位對(duì)多個(gè)下屬單位進(jìn)行考核，打分有一定主觀性，需要參考其他單位得分。如果跳轉(zhuǎn)新頁(yè)面進(jìn)行打分操作，就會(huì)斷開原有上下文的關(guān)系，影響用戶操作流暢性。

需要保持上下文的場(chǎng)景中，應(yīng)避免迫使用戶離開父級(jí)頁(yè)面，建議在原頁(yè)面或浮層中呈現(xiàn)更多信息。

關(guān)鍵問題四：是否頻繁往返。

這個(gè)一般由任務(wù)類型決定，即當(dāng)前操作是“主線任務(wù)”還是“支線任務(wù)”。

在主線任務(wù)場(chǎng)景中，用戶持續(xù)前進(jìn)。比如網(wǎng)購(gòu)商品，用戶在選購(gòu)商品-確認(rèn)地址-付費(fèi)-下單完成···等步驟中環(huán)環(huán)前行。這時(shí)建議使用原頁(yè)面跳轉(zhuǎn)的方式。

支線任務(wù)完成后，一般要回歸主任務(wù)，也就是存在“往返”，就像從小路回歸到大路上。比如清理郵箱：用戶閱讀處理完一封未讀郵件后返回未讀列表，繼續(xù)處理下一條。在這里，“閱讀并處理一條郵件”是支線任務(wù)，“”清理郵箱”是主線任務(wù)。建議給“支線任務(wù)”新開標(biāo)簽頁(yè)處理。

關(guān)鍵問題五：是不是必須看到的。

當(dāng)前信息對(duì)用戶來(lái)說(shuō)是否重要且關(guān)鍵？模態(tài)是較為“強(qiáng)勢(shì)”的交互模式。原則上，界面態(tài)度保持禮貌克制，以免打擾到用戶。

3. 功能操作決策樹

并不是所有容器都適合放置表單操作——部分容器因“排他性”的特征，會(huì)隱藏部分信息，可導(dǎo)致用戶遺漏重要操作。

我們一般將操作分成兩類：

• 一類是需要用戶提交信息的，例如填寫表單，一般由用戶喚起。
• 一類是接收和確認(rèn)系統(tǒng)信息，一般由系統(tǒng)發(fā)起。

我們可以按照表單的體量，或者信息的重要及關(guān)鍵程度，選擇相應(yīng)的UI組件。

4. 空間膨脹術(shù)

容器組件的的神奇之處是可以多次嵌套和疊加，創(chuàng)造出更多空間。

但注意保持信息體量和層級(jí)之間的平衡，避免過(guò)多嵌套和疊加，讓用戶在多個(gè)容器中迷失方向。

（↑案例：抽屜嵌套抽屜）

（↑案例：tabs嵌套tabs）

（↑案例：抽屜嵌套tabs）

今天的分享就到這里了

感謝讀到最后的讀者們，就用一句話來(lái)結(jié)束今天的分享吧~

設(shè)計(jì)一件東西時(shí)，總是要在更大的環(huán)境中考慮它——房間里的一把椅子、房子里的房間、環(huán)境中的房子、城市規(guī)劃中的環(huán)境。

——埃里爾·沙里寧 (1873–1950)，芬蘭建筑師

在視覺設(shè)計(jì)的世界里，色彩不僅僅是一種裝飾，它是傳達(dá)情感、影響情緒和吸引用戶的關(guān)鍵。本文深入探討了色彩在界面設(shè)計(jì)中的重要性，揭示了如何通過(guò)色彩的定義、屬性、模型以及在不同場(chǎng)景下的應(yīng)用來(lái)增強(qiáng)設(shè)計(jì)的吸引力。

色彩在我們?nèi)粘ＴO(shè)計(jì)中起著定生死的作用，它是設(shè)計(jì)的靈魂，舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿，感覺在自己的設(shè)計(jì)生涯中，大部分都是在與色彩的博弈中度過(guò)的，雖然客戶可能不懂色彩原理，可是客戶天生都是色彩的感受家，什么樣的色彩搭配美，通常他們瞄一眼就會(huì)有定論，不用你去辯解太多，不好的搭配，縱使有千萬(wàn)種理由，也說(shuō)服不了客戶，所以好好研究色彩以及每一種色彩傳遞的情感對(duì)我們做好設(shè)計(jì)至關(guān)重要。

目錄

一、 色彩的定義

二、 色彩的三屬性

三、 色彩的三種常見模型

四、 色彩的語(yǔ)意及它的應(yīng)用

五、 不同場(chǎng)景下的色彩應(yīng)用

六、 色彩在B端設(shè)計(jì)中的作用

七、 B端色彩設(shè)計(jì)使用的原則

一、色彩的定義？

1、物理學(xué)角度

色彩是光的屬性，當(dāng)光波通過(guò)物體時(shí)，物體會(huì)吸收某些波長(zhǎng)的光，而反射或透射其他波長(zhǎng)的光，這些被反射或透射的光波長(zhǎng)度決定了我們看到的顏色。

2、心理學(xué)角度

色彩是人腦對(duì)光波長(zhǎng)的視覺感知，不同的波長(zhǎng)刺激視網(wǎng)膜上不同類型的感光細(xì)胞，進(jìn)而產(chǎn)生不同的色彩感覺。

什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？

B端產(chǎn)品經(jīng)理中的B是Business，商業(yè)的意思，B端產(chǎn)品經(jīng)理首先就要理解這個(gè)職位的重要性，要設(shè)計(jì)出更適合這個(gè)項(xiàng)目需求的產(chǎn)品方案，B最終產(chǎn)品經(jīng)理在日常工作中...

查看詳情 >

3、 藝術(shù)學(xué)角度

色彩是藝術(shù)創(chuàng)作的重要元素，它不僅關(guān)乎視覺感受，還與情感、文化、象征意義相關(guān)聯(lián)。

4、 設(shè)計(jì)學(xué)角度

在設(shè)計(jì)領(lǐng)域，色彩是傳達(dá)信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。

5、 計(jì)算機(jī)科學(xué)角度

在數(shù)字圖像處理中，色彩通常通過(guò)顏色模型（如RGB、CMYK等）來(lái)定義，這些模型通過(guò)不同比例的原色或色料混合來(lái)表示各種顏色。

二、色彩的三屬性

1、色相

色相是指不同顏色之間的差別，即不同顏色的表象和名稱，每個(gè)顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍(lán)、紫等。不同的色別都可用光譜中的波長(zhǎng)來(lái)表示，人的眼睛可分辨出的色別有180種左右。

2、明度

明度是指色彩的明暗程度。一般在反光率相同的情況下，不同色別的明暗程度不同。如黃色光比紅色光更明亮，而紅色光則比青色光要明亮。

同時(shí)，同一色相在受光強(qiáng)弱或者物體對(duì)光的吸收、反射性能不同的情況下，會(huì)呈現(xiàn)不同的明暗變化和差異。

3、飽和度（純度）

飽和度（純度）是指同一色別的純凈度和鮮明度的變化。從色光的角度而言，光的波長(zhǎng)單一程度越高，飽和度就會(huì)越高；不同色別所達(dá)到的飽和度不同，一般情況下，紅色的純度可達(dá)到最高，綠色的則相對(duì)較低；同一色相深淺不同的顏色有不同的飽和度；黑白色光的滲入會(huì)導(dǎo)致飽和度和明度發(fā)生變化；通常，照明光線的性質(zhì)、物體表面結(jié)構(gòu)對(duì)光線吸收與反射的性能等因素影響飽和度。

三、色彩三種常見模型

1、HSB模型

HSB模型也叫HSV模型，其中H代表色相，即顏色的種類；S代表飽和度，即顏色的純度；B(V)代表亮度，即顏色的明亮程度。

這種色彩模型是我日常在的設(shè)計(jì)工作中用的最多的一種色彩模型，如果在同色系中如果只想讓他們有細(xì)微的變化，我通常會(huì)通過(guò)調(diào)節(jié)S和B的百分比數(shù)值來(lái)達(dá)到自己想要的目的。

以上就是我在設(shè)計(jì)項(xiàng)目中，運(yùn)用該色彩模型做的一個(gè)實(shí)戰(zhàn)，項(xiàng)目中用到了一個(gè)圖形，需要用同色系來(lái)表達(dá)，我保持了H色值的不變，讓S值和B值都發(fā)生著微妙的不同，于是就產(chǎn)生了四五種同色系的綠色，該色彩模型特別的好使，也鼓勵(lì)大家多在實(shí)戰(zhàn)中運(yùn)用這樣的色彩模型，簡(jiǎn)單實(shí)用。

• H色相: Hue，以角度(0°-360°)表示
• S飽和度: Saturation，以百分比值(0%-100%)表示
• B/V 亮度: Brightness 或 Value，以百分比值(0%-100%)表示

2、RGB模型

RGB是從顏色發(fā)光的原理來(lái)設(shè)計(jì)定的，通俗點(diǎn)說(shuō)它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈，當(dāng)它們的光相互疊合的時(shí)候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。

紅、綠、藍(lán)三個(gè)顏色通道每種色各分為256階亮度，在0時(shí)“燈”最弱——是關(guān)掉的，而在255時(shí)“燈”最亮。當(dāng)三色灰度數(shù)值相同時(shí)，產(chǎn)生不同灰度值的灰色調(diào)，即三色灰度都為0時(shí)，是最暗的黑色調(diào)；三色灰度都為255時(shí)，是最亮的白色調(diào)。

• R紅：Red，以數(shù)值(0-255)表示
• G綠：Green，以數(shù)值(0-255)表示
• B藍(lán)：Blue，以數(shù)值(0-255)表示

3、CMYK模型

雖然RGB模型色彩更加的豐富，但是很多顏色不能完全打印出來(lái)，于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑，通過(guò)顏料反射和吸收光線來(lái)顯色。

記得之前自己從事平面工作的時(shí)候，就經(jīng)常要用到CMYK模式，因?yàn)橛〕鰜?lái)的效果偏差是最小的，是最靠近設(shè)計(jì)效果圖的。

通過(guò)對(duì)比，我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實(shí)更加的絢麗豐富些，而CMYK的色彩模型顏色顯示上就黯淡了不少，但是要印刷的話，就必須轉(zhuǎn)化為成CMYK的色彩模式。

• R青：Cyan，以百分比值(0%-100%)表示
• M品紅：Magenta，以百分比值(0%-100%)表示
• Y黃：Yellow，以百分比值(0%-100%)表示
• B黑：Black，以百分比值(0%-100%)表示

四、色彩的語(yǔ)意及應(yīng)用

1、紅色的語(yǔ)意及應(yīng)用

紅色代表熱情、活力、強(qiáng)烈的情感和愛。它可以象征著激情、勇氣和行動(dòng)力，也常與興奮、熱烈的情緒相關(guān)。

著名的快餐品牌肯德基，在自己的網(wǎng)頁(yè)及店鋪裝修中都運(yùn)用了紅色，因?yàn)榧t色是所有顏色中最容易引起人們注意的顏色，也是很容易刺激人們食欲和購(gòu)買的顏色。

2、橙色的語(yǔ)意及應(yīng)用

橙色傳達(dá)溫暖、歡快和積極向上的情感；它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起，給人以活力充沛和充滿希望的感覺。

百度網(wǎng)盤的這個(gè)登錄界面就運(yùn)用了橙色，給人陽(yáng)光、向上、熱情的感覺，通過(guò)色彩的運(yùn)用一下讓界面有了溫度。

3、黃色的語(yǔ)意及應(yīng)用

黃色象征快樂、開朗和樂觀；它能帶來(lái)明亮、愉悅的情緒，代表著陽(yáng)光、溫暖和智慧。

叫叫閱讀是一款非常著名的兒童閱讀軟件，整個(gè)色調(diào)采用的是非常有活力的黃色，這與兒童處于好奇與活力的階段相符合，這種高亮的黃色，飽和度和明度都非常的高，特別容易抓住兒童的目光，同時(shí)它是一種快樂的顏色，也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色，特別符合兒童成長(zhǎng)的需求。

4、綠色的語(yǔ)意及應(yīng)用

綠色代表平靜、和諧與生機(jī)。綠色常與大自然相關(guān)，給人帶來(lái)安寧、放松的感覺，也象征著成長(zhǎng)、希望和新生。

青椒云的目標(biāo)用戶是吸引年輕用戶和創(chuàng)意工作者，綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注，同時(shí)綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。

5、青色的語(yǔ)意及應(yīng)用

青色寓意清新、寧?kù)o和沉穩(wěn)，它給人一種冷靜、理智的印象，同時(shí)也帶有一絲清新的活力。

青色是一種帶有藍(lán)色和綠色的顏色，因此青色既有藍(lán)色的專業(yè)感、信任感，也有綠色的生機(jī)感、希望感。

以下是日本某牙醫(yī)品牌的官網(wǎng)首頁(yè)，病人希望在這里帶來(lái)健康與復(fù)蘇，也希望獲得專業(yè)、可靠的治療，而青色就成了很好傳遞這種情感的品牌色。

6、藍(lán)色的語(yǔ)意及應(yīng)用

藍(lán)色代表冷靜、忠誠(chéng)和信任；它常與沉穩(wěn)、深邃的情感相關(guān)，能帶來(lái)寧?kù)o、平和的心境，也象征著智慧和理性。

123云盤使用了藍(lán)色，藍(lán)色符合社會(huì)的普遍審美認(rèn)知，接受度比較高；其次，藍(lán)色給人安全的感覺，也符合云盤的初衷，給用戶安全的存儲(chǔ)服務(wù)。

7、紫色的語(yǔ)意及應(yīng)用

紫色象征神秘、高貴和浪漫；它常給人一種優(yōu)雅、奢華的感覺，同時(shí)也帶有神秘莫測(cè)的氛圍，與夢(mèng)幻、創(chuàng)造力等情感相關(guān)。

美柚的主要用戶是女性，紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì)，這些特質(zhì)與女性的審美和情感需求相契合，能夠吸引女性的關(guān)注。

8、白色的語(yǔ)意及應(yīng)用

白色代表著純潔、神圣、信任、安靜、樸素和雅致，是一種充滿純潔的顏色，它可以跟任何顏色和諧的共生。

以下是熊掌ID的登錄界面，顏色用了大量的白與灰，簡(jiǎn)潔又不失大氣，傳遞出了一種質(zhì)樸、雅致的感覺。

五、不同場(chǎng)景下的色彩應(yīng)用

1、商場(chǎng)色彩多彩的原因？

? 吸引顧客注意力

在眾多商業(yè)場(chǎng)所中脫穎而出，色彩鮮艷的商場(chǎng)外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來(lái)，吸引過(guò)往行人的目光，激發(fā)他們的好奇心和探索欲。

確實(shí)多彩的顏色更加容易引起我的關(guān)注，這不看到商場(chǎng)的美圖，都忍不住拍照留念了，成功的吸引了我的目光。

? 增強(qiáng)可見性

即使在較遠(yuǎn)的距離或在繁忙的街道上，多彩熱烈的配色也能讓商場(chǎng)更容易被發(fā)現(xiàn)，提高商場(chǎng)的知名度和曝光度。

多彩的配色，讓我很遠(yuǎn)就被商場(chǎng)美輪美奐的插畫吸引，大大增加了商場(chǎng)的可見性。

? 營(yíng)造愉悅氛圍

色彩可以激發(fā)積極情緒，明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進(jìn)入一個(gè)色彩豐富的商場(chǎng)時(shí)，會(huì)感受到一種愉悅和輕松的氛圍，從而更愿意在商場(chǎng)中停留和購(gòu)物。

星沙永旺城的美陳設(shè)計(jì)很好，墻面采用極具誘惑力的顏色與美食，把小小實(shí)物十倍放大，增加了視覺看點(diǎn)，讓人忍不住過(guò)去拍照曬一下，大大增加了愉悅性。

? 緩解壓力

在現(xiàn)代生活中，人們常常面臨各種壓力。走進(jìn)一個(gè)多彩熱烈的商場(chǎng)，可以暫時(shí)擺脫日常的煩惱和壓力，享受購(gòu)物的樂趣。

特別可愛夸張的插圖設(shè)計(jì)，引發(fā)了絲絲童趣和歡樂，讓人短暫忘記壓力，遠(yuǎn)離煩惱。

? 引導(dǎo)消費(fèi)行為

商場(chǎng)通常會(huì)使用不同的顏色來(lái)區(qū)分不同的區(qū)域，如購(gòu)物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域，提高購(gòu)物效率。

突出重點(diǎn)商品，對(duì)于一些重點(diǎn)推薦的商品或促銷活動(dòng)，商場(chǎng)可以使用鮮艷的色彩來(lái)突出展示，吸引顧客的注意力，引導(dǎo)他們進(jìn)行購(gòu)買。

? 塑造品牌形象

6.1 傳達(dá)個(gè)性和風(fēng)格

不同的商場(chǎng)可能有不同的品牌定位和目標(biāo)客戶群體。通過(guò)選擇特定的色彩組合，商場(chǎng)可以傳達(dá)出自己的個(gè)性和風(fēng)格，吸引與之相符的顧客。

6.2 增強(qiáng)品牌記憶度

獨(dú)特而鮮明的色彩搭配可以讓商場(chǎng)在顧客的心中留下深刻的印象，提高品牌的記憶度和辨識(shí)度。

芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭，是一個(gè)區(qū)域型的購(gòu)物中心，集購(gòu)物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體，為消費(fèi)者提供一站式商業(yè)綜合體，它在餐飲區(qū)采用了大量的吃喝玩樂的插畫來(lái)引導(dǎo)用戶消費(fèi)。

2、為什么藍(lán)色在B端設(shè)計(jì)中廣泛應(yīng)用？

? 視覺特性方面

1.1 穩(wěn)定性

藍(lán)色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中，用戶往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進(jìn)行復(fù)雜的操作，藍(lán)色的穩(wěn)定性可以讓用戶感到安心，增強(qiáng)對(duì)產(chǎn)品的信任感。

1.2 專業(yè)性

藍(lán)色通常與科技、專業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶，需要傳達(dá)出專業(yè)、高效的形象，藍(lán)色正好符合這一需求。

? 心理影響方面

2.1 減少焦慮

相比鮮艷、刺激的顏色，藍(lán)色較為柔和，不容易引起用戶焦慮和緊張的情緒；在B端使用場(chǎng)景中，用戶可能需要長(zhǎng)時(shí)間使用產(chǎn)品，藍(lán)色的舒緩效果有助于提高用戶的使用體驗(yàn)。

2.2 提高專注度

藍(lán)色具有一定的沉靜作用，能夠幫助用戶集中注意力，專注于工作任務(wù)。對(duì)于B端用戶來(lái)說(shuō)，高效完成工作是首要目標(biāo)，藍(lán)色的這一特性有助于提高工作效率。

B端產(chǎn)品在心理上追求的是類似如下圖的這種寧?kù)o式的體驗(yàn)，跟教育有著異曲同工之處，就像這個(gè)易貝樂少兒英語(yǔ)一樣，用大面積的藍(lán)色，希望孩子在這里能很快的安靜下來(lái)學(xué)習(xí)、專注自己的事情。

? 行業(yè)習(xí)慣方面

3.1 科技行業(yè)引領(lǐng)

許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場(chǎng)中廣泛使用藍(lán)色，逐漸形成了一種行業(yè)習(xí)慣。其他企業(yè)在設(shè)計(jì)B端產(chǎn)品時(shí)，也會(huì)傾向于選擇藍(lán)色以符合用戶的認(rèn)知和期望。

3.2 傳統(tǒng)與延續(xù)

在過(guò)去的設(shè)計(jì)中，藍(lán)色在 B 端領(lǐng)域的成功應(yīng)用使得它成為了一種傳統(tǒng)選擇。設(shè)計(jì)師們?cè)谘永m(xù)這一傳統(tǒng)的同時(shí)，也不斷優(yōu)化和創(chuàng)新藍(lán)色的運(yùn)用方式，使其更符合現(xiàn)代設(shè)計(jì)趨勢(shì)和用戶需求。

嘉為科技是一個(gè)有著20多年技術(shù)沉淀的科技公司，它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍(lán)的風(fēng)格，應(yīng)該也是基于傳統(tǒng)的沉淀吧。

?藍(lán)色可以提高產(chǎn)品的復(fù)用率

很多用戶都能接受藍(lán)色的B端界面，當(dāng)面對(duì)有差不多需求客戶時(shí)，同一套UI，可以多次復(fù)用，可以減少開發(fā)成本和設(shè)計(jì)成本，這也是自己通過(guò)長(zhǎng)期實(shí)戰(zhàn)觀察發(fā)現(xiàn)的。

一個(gè)UI風(fēng)格，用在了兩個(gè)項(xiàng)目中，不同的用戶，趨向同樣的風(fēng)格，說(shuō)明藍(lán)色在大家心目中的接受度是非常的高，用藍(lán)色可以促進(jìn)設(shè)計(jì)的多次復(fù)用。

在日常的項(xiàng)目中，我看到的B端UI界面是千篇一律的穩(wěn)重，不追求過(guò)于刺激的顏色搭配，通常都比較的干凈簡(jiǎn)潔，不像商場(chǎng)里面的美陳背景設(shè)計(jì)，色彩對(duì)比非常的強(qiáng)烈，比較的吸引人眼球。

有一次我厭煩了常規(guī)的穩(wěn)重風(fēng)，探索一種大膽的色彩風(fēng)格時(shí)，雖然風(fēng)格比較新穎，可是發(fā)出去客戶的接受度不高，覺得太不穩(wěn)重了，然后重新按照以往習(xí)慣進(jìn)行設(shè)計(jì)時(shí)，就很好，客戶一致認(rèn)同。

可見每個(gè)領(lǐng)域都有自己的色彩運(yùn)用習(xí)慣，商場(chǎng)需要吸引人眼球、刺激消費(fèi)，越大膽越好，可是B端設(shè)計(jì)需要提供一個(gè)讓人平靜去處理工作事項(xiàng)的環(huán)境，它需要安靜，不需要過(guò)于刺激的顏色搭配。

六、色彩在B端設(shè)計(jì)中的作用？

1、通過(guò)色彩向用戶反饋操作結(jié)果及當(dāng)前狀況

比方在日常設(shè)計(jì)當(dāng)中，紅色代表流程失敗，綠色代表流程成功，橙色代表信息有告警，藍(lán)色代表著鏈接，同時(shí)不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài)，在反饋結(jié)果和狀況方面，色彩起著非常重要的作用。

下面這個(gè)IDC運(yùn)營(yíng)的監(jiān)測(cè)平臺(tái)，它就是通過(guò)顏色來(lái)區(qū)分不同的告警級(jí)別的，可見顏色在B端產(chǎn)品中的重要性。（備注：圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù)，僅做展示）

2、可以助力品牌傳達(dá)

B端設(shè)計(jì)中大面積使用品牌色，可以強(qiáng)化品牌形象，使用與品牌標(biāo)志風(fēng)格相近的色彩，可以幫助用戶快速識(shí)別和記住品牌，在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案，有助于建立品牌的連貫性和一致性，增強(qiáng)用戶對(duì)品牌的信任。

例如我給湖南高速設(shè)計(jì)的一套B端界面設(shè)計(jì)，用戶強(qiáng)烈要求改變傳統(tǒng)的藍(lán)色風(fēng)格，要求整套界面設(shè)計(jì)要用湖南高速品牌色-綠色，說(shuō)明在追求大流和品牌色之間，客戶更加傾向品牌的傳達(dá)。（備注：圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù)，僅做展示）

3、顏色可以很好的進(jìn)行信息區(qū)分

在B端界面設(shè)計(jì)中，顏色在幫助信息區(qū)分起著非常重要的作用，通?？梢酝ㄟ^(guò)不同的色彩來(lái)區(qū)分功能區(qū)域，可以讓用戶更清晰地了解界面的結(jié)構(gòu)和布局，例如，導(dǎo)航欄使用一種特定的顏色，而內(nèi)容區(qū)域則使用另一種顏色。

我設(shè)計(jì)的天翼寫作，就是這樣的設(shè)計(jì)思路，導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣，這里顏色起到了很好的區(qū)分作用。

4、舒適的色彩搭配可以提升用戶體驗(yàn)

選擇合適的色彩對(duì)比度可以增強(qiáng)文本的可讀性，減少用戶的視覺疲勞。例如，黑色文字在白色背景上通常比較容易閱讀。

選擇適當(dāng)?shù)纳士梢誀I(yíng)造出專業(yè)、高效、舒適的工作氛圍，從而影響用戶的情緒和感受，提高用戶的使用體驗(yàn)。

我參與的這個(gè)后臺(tái)界面，就是通過(guò)合理的色彩搭配來(lái)引導(dǎo)用戶使用的，當(dāng)用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示，沒有走完的流程就會(huì)是灰色的，寓意指示非常的鮮明，很好的解決了用戶不知道清晰進(jìn)程的卡點(diǎn)，提升了用戶體驗(yàn)。

5、色彩可以傳遞性格

人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的，其實(shí)色彩也是有性格的，不同的色彩也有不同的性格，當(dāng)我們對(duì)色彩的性格有足夠多的了解，在面對(duì)不同的客戶時(shí)，我們對(duì)色彩的拿捏以及設(shè)計(jì)需求的把握時(shí)，會(huì)更加的游刃有余。

我們平常確實(shí)是在做設(shè)計(jì)，但是我們更多的是在與人打交道，我們更好的聆聽，會(huì)幫助我們更快的抓取到客戶的喜好，快速做出滿足客戶需求的設(shè)計(jì)，少受加班之苦。

比方說(shuō)我之前給云門戶設(shè)計(jì)的一套UI，客戶的決策層是男性，且年齡偏大，他們就偏愛深沉的UI風(fēng)格；而我負(fù)責(zé)的天翼云電腦專家，客戶的決策層是女性，且年齡偏年輕，她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶，就會(huì)帶來(lái)不同的設(shè)計(jì)結(jié)果。

七、B端色彩設(shè)計(jì)使用的原則

1、B端設(shè)計(jì)中，色彩設(shè)計(jì)應(yīng)遵循6：3：1原則

在這個(gè)登錄頁(yè)面中，我就是運(yùn)用的6：3：1原則，60%的主色，30%的次要色，10%的點(diǎn)綴色；使用了大面積的藍(lán)色和藍(lán)灰色，最后使用一點(diǎn)點(diǎn)的橙色，這樣的配色會(huì)顯得高級(jí)。

2、文字、卡片背景色和邊框都使用無(wú)彩色

為了保證畫面風(fēng)格的統(tǒng)一、干凈整潔，文字顏色、邊框顏色、以及邊框背景色都需要用到無(wú)彩色，通常通過(guò)顏色的深淺來(lái)區(qū)分信息的層級(jí)關(guān)系。

比方說(shuō)我參與的星辰大模型AI文檔生成能力的應(yīng)用，里面無(wú)論文字顏色還是底色都是運(yùn)用的無(wú)彩色，只是通過(guò)了色彩深淺變化來(lái)做了層級(jí)區(qū)分，因?yàn)闊o(wú)彩色可以起到很好的降噪作用，既傳達(dá)了信息，又不會(huì)顯得界面凌亂復(fù)雜。

3、需要凸顯的內(nèi)容，用明度和純度比較高的色彩

比方說(shuō)，日常我們?cè)O(shè)計(jì)的卡片都是用的白色，而底色我們用的是灰色，因?yàn)榭ㄆ锩娴膬?nèi)容都是比較重要的信息，需要用一個(gè)亮度比較高的顏色，讓內(nèi)容往前走，而灰色的背景通常就往后走的感覺，這樣能跟卡片形成一個(gè)一前一后的對(duì)比，更好的幫助內(nèi)容進(jìn)行傳播。

比方說(shuō)我設(shè)計(jì)的這個(gè)IT運(yùn)維監(jiān)控平臺(tái)的首頁(yè)，物理主機(jī)、網(wǎng)絡(luò)及安全設(shè)備、工單、在途工單這幾個(gè)指標(biāo)是非常關(guān)鍵的，所以他們的圖片底色用了純度比較高的有彩色來(lái)標(biāo)識(shí)。

4、設(shè)計(jì)前一定要有定色調(diào)的意識(shí)

作為設(shè)計(jì)師，我們的設(shè)計(jì)工作其實(shí)就是在設(shè)計(jì)一種感覺，一種情緒，設(shè)計(jì)前定調(diào)的意識(shí)真的太重要了，感覺對(duì)了，什么都就對(duì)了。

比方說(shuō)我前段時(shí)間接到了一個(gè)B端的大屏可視化需求設(shè)計(jì)，客戶說(shuō)之前的大屏設(shè)計(jì)不喜歡，希望重新出一個(gè)新的設(shè)計(jì)，然后公司的需求對(duì)接人員在給我下達(dá)需求時(shí)，真的就只是給我下達(dá)了這幾個(gè)字，讓我重新出一個(gè)設(shè)計(jì)試試。

以我的職業(yè)直覺，感覺這個(gè)需求是不夠細(xì)化的，于是我就多問了幾句，我問客戶是想要常規(guī)的藍(lán)色調(diào)的還是別的？果然一問，客戶說(shuō)不希望再用常規(guī)的藍(lán)色的，希望新的設(shè)計(jì)要用他們的品牌色綠色，剛聽到這幾個(gè)字的時(shí)候，我以為這次我把握住需求了，在收集參考圖的時(shí)候，我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的，根據(jù)自己以往的作圖習(xí)慣，我覺得深色會(huì)更加的受歡迎一些，我自以為是的朝著深色的方向去出圖，出到了一半的時(shí)候，我內(nèi)心有些許的忐忑，我于是找了一深一淺的參考圖，讓同事跟客戶確認(rèn)一下，客戶是想要深色的感覺，還是要淺色的感覺，這次溝通又給了我深深的一擊，客戶不按常理出牌，說(shuō)希望按淺色的風(fēng)格來(lái)出圖。

在出稿之前，通過(guò)自己反復(fù)的溝通確認(rèn)，發(fā)現(xiàn)設(shè)計(jì)前的定調(diào)意識(shí)真的太重要了，要不是有出圖前一波三折的反復(fù)確認(rèn)以及需求的細(xì)化，就不會(huì)有后來(lái)的一遍過(guò)稿。

5.設(shè)計(jì)的灰色盡量使用帶有色彩偏向的灰

不管我們?cè)O(shè)計(jì)什么色系的界面，都避不開用到灰色，在設(shè)計(jì)中用跟主視覺相符的灰，會(huì)使得界面更加的高級(jí)、協(xié)調(diào)與美觀，注意好了這個(gè)小細(xì)節(jié)，會(huì)給我們的設(shè)計(jì)加分不少。

下面是我日常體驗(yàn)到的兩個(gè)界面，上面綜合管理平臺(tái)里面的灰色就沒有跟主色調(diào)藍(lán)色相呼應(yīng)，灰色沒有向藍(lán)色傾斜，界面看起來(lái)就沒那么美觀；下面通義千問的灰色設(shè)計(jì)就非常的注重細(xì)節(jié)，灰色偏紫，整個(gè)界面看起來(lái)渾然天成，毫無(wú)違和，美感、檔次瞬間提升好幾個(gè)等級(jí)。

一個(gè)微小細(xì)節(jié)的在意，在無(wú)形中拉高了設(shè)計(jì)的高度，十個(gè)細(xì)節(jié)乃至更多細(xì)節(jié)的在意，就會(huì)帶來(lái)更多意想不到的結(jié)果。

總結(jié)：

以上就是我最近對(duì)色彩的一些頓悟、感受和學(xué)習(xí)收獲，在不斷的復(fù)盤總結(jié)中，我們總會(huì)收獲一些新的認(rèn)知，通過(guò)這次色彩的復(fù)盤之旅，發(fā)現(xiàn)色彩對(duì)設(shè)計(jì)師真的太重要了，希望我的分享對(duì)大家有啟發(fā)，不足之處也歡迎大家留言交流。

隨著電動(dòng)車的發(fā)展，駕艙也越來(lái)越智能，對(duì)設(shè)計(jì)的要求也越來(lái)越高。從一開始的只是展示信息，到現(xiàn)在的情感陪伴、多感官交互，這篇文章，我們來(lái)看看都有哪些變化。

在科技飛速發(fā)展的今天，汽車已不再僅僅是一種交通工具，更是人們生活中的重要伙伴。隨著人機(jī)交互技術(shù)的不斷進(jìn)步，智能駕艙多感官交互正從滿足傳統(tǒng)的安全駕駛需求逐漸轉(zhuǎn)變?yōu)樘峁┯星楦械闹悄?AI 陪伴需求，為駕駛者帶來(lái)全新的出行體驗(yàn)。

一、傳統(tǒng)安全駕駛需求下的智能駕艙

在過(guò)去，智能駕艙的主要功能是確保駕駛的安全。通過(guò)先進(jìn)的傳感器、顯示屏和控制系統(tǒng)，為駕駛者提供車輛狀態(tài)信息、導(dǎo)航指引和安全警示等。例如，高清數(shù)字儀表盤能夠清晰地顯示車速、油耗等關(guān)鍵數(shù)據(jù)，幫助駕駛者隨時(shí)掌握車輛運(yùn)行情況；倒車影像和雷達(dá)系統(tǒng)可以在倒車時(shí)提供清晰的后方視野，降低碰撞風(fēng)險(xiǎn)。然而，這種以安全為核心的智能駕艙雖然滿足了基本的駕駛需求，但缺乏情感互動(dòng)和個(gè)性化體驗(yàn)。

二、向情感智能 AI 陪伴需求的轉(zhuǎn)變

1. 情感識(shí)別與回應(yīng)

如今的智能駕艙多感官交互技術(shù)能夠?qū)崿F(xiàn)對(duì)駕駛者情感狀態(tài)的識(shí)別。車內(nèi)的攝像頭和傳感器可以捕捉駕駛者的面部表情、語(yǔ)音語(yǔ)調(diào)、身體動(dòng)作等信息，分析其情緒變化。當(dāng)檢測(cè)到駕駛者疲勞時(shí)，智能 AI 會(huì)發(fā)出溫馨的提醒，建議休息或播放輕松的音樂來(lái)緩解疲勞；當(dāng)駕駛者感到焦慮或緊張時(shí)，智能 AI 可以通過(guò)調(diào)節(jié)燈光顏色、播放舒緩的音樂或者講述有趣的故事來(lái)幫助駕駛者放松心情。

智能 AI 還能根據(jù)駕駛者的情緒做出個(gè)性化的回應(yīng)。例如，如果駕駛者心情愉快，智能 AI 可能會(huì)播放歡快的音樂并與駕駛者進(jìn)行愉快的交流；如果駕駛者情緒低落，智能 AI 則會(huì)給予安慰和鼓勵(lì)，讓駕駛者感受到被理解和關(guān)心。

2. 個(gè)性化交互體驗(yàn)

基于對(duì)駕駛者的了解，智能駕艙可以提供高度個(gè)性化的交互體驗(yàn)。智能 AI 會(huì)記住駕駛者的喜好，如喜歡的音樂類型、溫度設(shè)置、座椅調(diào)節(jié)角度等，并在駕駛者上車時(shí)自動(dòng)調(diào)整到相應(yīng)的狀態(tài)。這種個(gè)性化的服務(wù)讓駕駛者感受到車輛是為自己量身定制的，增強(qiáng)了駕駛者與車輛之間的情感連接。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

智能 AI 還可以根據(jù)駕駛者的日常習(xí)慣和興趣愛好提供個(gè)性化的建議和服務(wù)。比如，如果駕駛者經(jīng)常在周末去郊外游玩，智能 AI 可能會(huì)在周末來(lái)臨前推薦適合的郊游地點(diǎn)和路線；如果駕駛者喜歡聽某一類型的廣播節(jié)目，智能 AI 會(huì)在合適的時(shí)間自動(dòng)播放該節(jié)目。

3. 增強(qiáng)社交互動(dòng)

智能駕艙不再是一個(gè)孤立的空間，而是可以與外界進(jìn)行社交互動(dòng)的平臺(tái)。通過(guò)車聯(lián)網(wǎng)技術(shù)，駕駛者可以與家人、朋友保持聯(lián)系，分享自己的行程和感受。例如，在行駛過(guò)程中，駕駛者可以通過(guò)語(yǔ)音指令發(fā)送消息給朋友，或者與家人進(jìn)行視頻通話。

智能 AI 還可以組織車內(nèi)的社交活動(dòng)，增強(qiáng)駕駛者與乘客之間的互動(dòng)。例如，在長(zhǎng)途旅行中，智能 AI 可以發(fā)起游戲或話題討論，讓大家在旅途中充滿樂趣。

4. 陪伴成長(zhǎng)與學(xué)習(xí)

對(duì)于長(zhǎng)期駕駛者來(lái)說(shuō)，智能駕艙可以成為一個(gè)陪伴成長(zhǎng)與學(xué)習(xí)的伙伴。智能 AI 可以記錄駕駛者的駕駛習(xí)慣和技能提升過(guò)程，提供針對(duì)性的駕駛建議和培訓(xùn)。例如，當(dāng)駕駛者在某個(gè)駕駛操作上存在不足時(shí)，智能 AI 會(huì)及時(shí)指出并提供改進(jìn)方法。

智能 AI 還可以提供各種知識(shí)和信息，滿足駕駛者的學(xué)習(xí)需求。比如，在等待紅綠燈的間隙，智能 AI 可以播放一段新聞、歷史故事或者科普知識(shí)，讓駕駛者在碎片化的時(shí)間里不斷學(xué)習(xí)和成長(zhǎng)。

三、多感官交互技術(shù)的支持

1. 視覺交互

高清顯示屏和數(shù)字儀表盤不僅可以提供車輛信息，還可以展示溫馨的畫面和個(gè)性化的主題，根據(jù)駕駛者的情緒和喜好進(jìn)行變化。例如，當(dāng)駕駛者心情愉悅時(shí)，顯示屏可以呈現(xiàn)出絢麗的色彩和歡快的動(dòng)畫；當(dāng)駕駛者需要放松時(shí)，顯示屏可以切換到寧?kù)o的自然風(fēng)景畫面。

氛圍燈的運(yùn)用也為情感交互增添了色彩。不同顏色的氛圍燈可以反映不同的情緒狀態(tài)，營(yíng)造出相應(yīng)的氛圍。比如，藍(lán)色的氛圍燈可以帶來(lái)寧?kù)o的感覺，紅色的氛圍燈可以增加活力和激情。

2. 聽覺交互

高品質(zhì)的音響系統(tǒng)可以播放各種類型的音樂和聲音，滿足駕駛者不同的情感需求。智能 AI 可以根據(jù)駕駛者的情緒選擇合適的音樂播放列表，或者根據(jù)場(chǎng)景自動(dòng)調(diào)整音樂的風(fēng)格和音量。

語(yǔ)音交互更加自然和親切。智能 AI 的語(yǔ)音不再是機(jī)械的合成音，而是具有情感色彩的聲音，能夠更好地與駕駛者進(jìn)行交流和互動(dòng)。

3. 觸覺交互

座椅的按摩功能和溫度調(diào)節(jié)可以根據(jù)駕駛者的身體狀況和情緒進(jìn)行調(diào)整，提供舒適的駕駛體驗(yàn)。例如，當(dāng)駕駛者感到疲勞時(shí)，座椅可以自動(dòng)啟動(dòng)按摩功能，幫助駕駛者放松身體。

方向盤和控制面板的觸摸反饋更加靈敏和個(gè)性化，讓駕駛者在操作過(guò)程中感受到與車輛的互動(dòng)。

4. 嗅覺交互

香氛系統(tǒng)可以釋放不同的氣味，調(diào)節(jié)車內(nèi)的氛圍。智能 AI 可以根據(jù)駕駛者的情緒和喜好選擇合適的香氛，如清新的花香可以帶來(lái)愉悅的感覺，舒緩的草本香可以幫助駕駛者放松心情。

四、未來(lái)展望

隨著技術(shù)的不斷進(jìn)步，智能駕艙多感官交互將在滿足情感智能 AI 陪伴需求方面發(fā)揮更大的作用。未來(lái)的智能駕艙將更加智能化、個(gè)性化和人性化，成為駕駛者真正的情感伙伴。汽車制造商和科技企業(yè)將不斷創(chuàng)新和完善多感官交互技術(shù)，為駕駛者帶來(lái)更加豐富、溫暖的出行體驗(yàn)。

五、結(jié)論

從滿足安全駕駛需求到提供有情感的智能AI陪伴需求，智能駕艙多感官交互的發(fā)展為汽車行業(yè)帶來(lái)了新的機(jī)遇和挑戰(zhàn)。通過(guò)情感識(shí)別、個(gè)性化交互、增強(qiáng)社交互動(dòng)和多感官技術(shù)的支持，智能駕艙將成為駕駛者生活中不可或缺的一部分，為人們的出行帶來(lái)更多的樂趣和溫暖。

對(duì)九類交互狀態(tài)的深入理解和不斷創(chuàng)新，將為產(chǎn)品設(shè)計(jì)帶來(lái)更大的提升空間，為用戶帶來(lái)更加卓越的體驗(yàn)，推動(dòng)產(chǎn)品在競(jìng)爭(zhēng)激烈的市場(chǎng)中不斷發(fā)展和進(jìn)步。

一、交互狀態(tài)的重要性

交互狀態(tài)在產(chǎn)品設(shè)計(jì)中起著至關(guān)重要的作用，它直接關(guān)系到用戶體驗(yàn)和產(chǎn)品的可用性。良好的交互狀態(tài)設(shè)計(jì)能夠讓用戶在使用產(chǎn)品的過(guò)程中感受到便捷、高效和愉悅，從而提高用戶對(duì)產(chǎn)品的滿意度和忠誠(chéng)度。

從用戶體驗(yàn)的角度來(lái)看，交互狀態(tài)可以增強(qiáng)用戶參與感和控制感。例如，在人機(jī)交互設(shè)計(jì)中，互動(dòng)性和反饋機(jī)制能夠讓用戶覺得他們對(duì)系統(tǒng)有一定的掌控能力。當(dāng)用戶進(jìn)行操作時(shí)，系統(tǒng)能夠及時(shí)給予反饋，如按鈕按下后出現(xiàn)的狀態(tài)變化、鼠標(biāo)懸停時(shí)的提示信息等，讓用戶清楚地知道他們的操作產(chǎn)生了什么效果。這種即時(shí)的反饋可以幫助用戶理解系統(tǒng)的運(yùn)作邏輯，減少用戶的操作失誤，提升用戶的效率和滿意度。

在產(chǎn)品的可用性方面，交互狀態(tài)的設(shè)計(jì)也至關(guān)重要。例如，在電子產(chǎn)品設(shè)計(jì)過(guò)程中，實(shí)現(xiàn)人機(jī)交互可以為消費(fèi)者提供良好的使用體驗(yàn)。設(shè)計(jì)師需要考慮不同人群的需求，如設(shè)計(jì)操作簡(jiǎn)單的老人機(jī)，以滿足老年人的使用需求。同時(shí)，將人機(jī)交互理念融入產(chǎn)品設(shè)計(jì)中，能夠提升消費(fèi)者對(duì)產(chǎn)品的喜好程度，使設(shè)計(jì)出來(lái)的產(chǎn)品能夠滿足人們對(duì)電子產(chǎn)品設(shè)計(jì)的要求。

此外，交互狀態(tài)的設(shè)計(jì)還能夠影響產(chǎn)品的整體品質(zhì)。例如，在 B 端產(chǎn)品的 UI 設(shè)計(jì)中，深入了解用戶需求與場(chǎng)景，進(jìn)行簡(jiǎn)潔直觀的界面設(shè)計(jì)，可以提升產(chǎn)品的可用性。通過(guò)用戶研究方法，了解用戶的工作環(huán)境、使用習(xí)慣和設(shè)備網(wǎng)絡(luò)條件等，將用戶需求轉(zhuǎn)化為具體的設(shè)計(jì)元素和功能，為用戶提供更加貼合實(shí)際的使用體驗(yàn)。

什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？

B端產(chǎn)品經(jīng)理中的B是Business，商業(yè)的意思，B端產(chǎn)品經(jīng)理首先就要理解這個(gè)職位的重要性，要設(shè)計(jì)出更適合這個(gè)項(xiàng)目需求的產(chǎn)品方案，B最終產(chǎn)品經(jīng)理在日常工作中...

查看詳情 >

綜上所述，交互狀態(tài)在產(chǎn)品設(shè)計(jì)中具有重要的地位，它對(duì)用戶體驗(yàn)和產(chǎn)品可用性有著重大的影響。產(chǎn)品開發(fā)者和設(shè)計(jì)師應(yīng)該充分重視交互狀態(tài)的設(shè)計(jì)，以提高產(chǎn)品的競(jìng)爭(zhēng)力，在市場(chǎng)中脫穎而出。

二、九類交互狀態(tài)詳解

1. 加載相關(guān)

加載類型：除了電商 APP 和計(jì)算器應(yīng)用的不同加載方式外，一些社交平臺(tái)在加載用戶動(dòng)態(tài)時(shí)也會(huì)采用類似的漸進(jìn)式加載。當(dāng)用戶打開社交平臺(tái)，首先會(huì)看到最近的幾條動(dòng)態(tài)，隨著用戶不斷下拉刷新，更多的動(dòng)態(tài)內(nèi)容逐步加載出來(lái)。這樣既保證了用戶能夠快速看到部分內(nèi)容，又不會(huì)因?yàn)橐淮涡约虞d過(guò)多數(shù)據(jù)而導(dǎo)致等待時(shí)間過(guò)長(zhǎng)。

加載狀態(tài)：在加載狀態(tài)中，不同的產(chǎn)品會(huì)有不同的表現(xiàn)形式。例如，一些在線學(xué)習(xí)平臺(tái)在加載課程視頻時(shí)，除了會(huì)有旋轉(zhuǎn)的加載動(dòng)畫外，還會(huì)顯示加載進(jìn)度條，讓用戶清楚地知道視頻加載的進(jìn)度。如果加載成功，會(huì)有一個(gè)短暫的提示音，增強(qiáng)用戶的感知。而如果加載失敗，除了提示用戶檢查網(wǎng)絡(luò)連接外，還會(huì)提供一些常見問題的解決方案，如清理緩存、更換網(wǎng)絡(luò)環(huán)境等。

中斷：中斷情況在實(shí)際應(yīng)用中較為復(fù)雜。以在線辦公軟件為例，如果在編輯文檔過(guò)程中出現(xiàn)網(wǎng)絡(luò)中斷，軟件會(huì)自動(dòng)保存當(dāng)前文檔的進(jìn)度，以防止數(shù)據(jù)丟失。同時(shí)，會(huì)提示用戶網(wǎng)絡(luò)中斷，并嘗試重新連接。如果長(zhǎng)時(shí)間無(wú)法連接，用戶可以選擇將文檔保存到本地，待網(wǎng)絡(luò)恢復(fù)后再進(jìn)行上傳。

2. 特殊模式

深度 / 夜間模式：除了閱讀類應(yīng)用，一些視頻播放平臺(tái)也提供夜間模式。在夜晚觀看視頻時(shí)，開啟夜間模式可以降低屏幕亮度，減少對(duì)眼睛的刺激。同時(shí)，夜間模式下的界面顏色通常會(huì)更加柔和，營(yíng)造出舒適的觀看氛圍。

存在沉浸模式插件：在一些在線教育平臺(tái)中，也會(huì)有類似沉浸模式的功能。當(dāng)學(xué)生進(jìn)入課程學(xué)習(xí)時(shí)，平臺(tái)會(huì)自動(dòng)隱藏?zé)o關(guān)的通知和廣告，讓學(xué)生專注于學(xué)習(xí)內(nèi)容。同時(shí)，學(xué)生可以通過(guò)特定的快捷鍵退出沉浸模式，方便隨時(shí)查看其他信息。

3. 操作相關(guān)

輸入：除了即時(shí)通訊軟件，一些辦公軟件在輸入方面也有很多優(yōu)化。例如，在文檔編輯軟件中，當(dāng)用戶輸入一些特定的關(guān)鍵詞時(shí)，軟件會(huì)自動(dòng)彈出相關(guān)的文檔模板或格式設(shè)置選項(xiàng)，提高用戶的輸入效率。

點(diǎn)擊：在電商平臺(tái)的商品詳情頁(yè)面，點(diǎn)擊商品圖片通常會(huì)放大顯示，讓用戶更清楚地看到商品的細(xì)節(jié)。同時(shí)，點(diǎn)擊購(gòu)買按鈕后，會(huì)有一個(gè)短暫的確認(rèn)彈窗，讓用戶再次確認(rèn)購(gòu)買信息，避免誤操作。

重復(fù)點(diǎn)擊 / 惡意操作：在一些金融類應(yīng)用中，對(duì)于重復(fù)點(diǎn)擊或惡意操作的防范更加嚴(yán)格。例如，在股票交易軟件中，如果用戶連續(xù)多次提交相同的交易指令，系統(tǒng)會(huì)自動(dòng)鎖定該用戶的交易功能，并提示用戶聯(lián)系客服解決問題。

4. 限制相關(guān)

極值：在旅游預(yù)訂平臺(tái)上，用戶在選擇酒店價(jià)格區(qū)間時(shí)，系統(tǒng)也會(huì)進(jìn)行極值限制。價(jià)格下限通常為平臺(tái)上的最低價(jià)格，價(jià)格上限則會(huì)根據(jù)當(dāng)?shù)鼐频甑氖袌?chǎng)價(jià)格和用戶的搜索歷史進(jìn)行動(dòng)態(tài)調(diào)整，確保用戶能夠得到合理的搜索結(jié)果。

邊界：在一些圖形設(shè)計(jì)軟件中，除了畫筆工具的邊界限制，其他工具也有類似的限制。例如，當(dāng)用戶使用裁剪工具時(shí)，裁剪區(qū)域不能超出畫布的范圍，否則無(wú)法進(jìn)行裁剪操作。

時(shí)間：在在線考試系統(tǒng)中，時(shí)間限制尤為重要。考試開始前，考生只能看到考試的相關(guān)信息和注意事項(xiàng)，無(wú)法進(jìn)入答題頁(yè)面?？荚囬_始后，系統(tǒng)會(huì)精確計(jì)時(shí)，一旦考試時(shí)間結(jié)束，答題頁(yè)面會(huì)自動(dòng)提交，無(wú)法再進(jìn)行答題。

5. 網(wǎng)絡(luò)相關(guān)

網(wǎng)絡(luò)中斷：在在線游戲中，網(wǎng)絡(luò)中斷會(huì)對(duì)玩家的游戲體驗(yàn)產(chǎn)生很大影響。當(dāng)網(wǎng)絡(luò)中斷時(shí)，游戲會(huì)自動(dòng)暫停，并提示玩家網(wǎng)絡(luò)中斷。如果玩家在網(wǎng)絡(luò)中斷前已經(jīng)保存了游戲進(jìn)度，那么在網(wǎng)絡(luò)恢復(fù)后可以繼續(xù)游戲；如果沒有保存進(jìn)度，可能會(huì)丟失部分游戲數(shù)據(jù)。

信號(hào)不佳 / 不穩(wěn)定：在視頻會(huì)議軟件中，當(dāng)網(wǎng)絡(luò)信號(hào)不佳時(shí)，軟件會(huì)自動(dòng)降低視頻的分辨率和幀率，同時(shí)關(guān)閉音頻中的一些高級(jí)功能，如降噪和回聲消除，以保證會(huì)議的基本溝通需求。

流量形式切換：在一些音樂播放軟件中，用戶可以根據(jù)自己的網(wǎng)絡(luò)環(huán)境手動(dòng)切換流量形式。例如，在 Wi-Fi 環(huán)境下，用戶可以選擇自動(dòng)播放高清音樂視頻；而在移動(dòng)數(shù)據(jù)環(huán)境下，用戶可以選擇只播放音頻，以節(jié)省流量。

6. 內(nèi)容相關(guān)

沒有內(nèi)容：在在線文檔協(xié)作平臺(tái)中，如果一個(gè)文檔沒有內(nèi)容，系統(tǒng)會(huì)提示用戶 “此文檔為空，請(qǐng)?zhí)砑觾?nèi)容”，并提供一些常用的文檔模板供用戶選擇，方便用戶快速創(chuàng)建內(nèi)容。

敏感 / 違規(guī)內(nèi)容：在電商平臺(tái)上，對(duì)于商品描述中的敏感或違規(guī)內(nèi)容，系統(tǒng)會(huì)進(jìn)行嚴(yán)格的審核。如果發(fā)現(xiàn)違規(guī)內(nèi)容，商品會(huì)被下架，并通知賣家進(jìn)行整改。同時(shí)，平臺(tái)會(huì)對(duì)賣家進(jìn)行警告，嚴(yán)重的可能會(huì)關(guān)閉賣家的店鋪。

7. 站外內(nèi)容相關(guān)

站外內(nèi)容：在一些知識(shí)分享平臺(tái)中，當(dāng)用戶點(diǎn)擊站外鏈接時(shí)，平臺(tái)會(huì)提示用戶 “該鏈接為站外內(nèi)容，請(qǐng)注意安全”，并提供一個(gè)返回平臺(tái)的快捷按鈕，方便用戶隨時(shí)返回。同時(shí)，平臺(tái)會(huì)對(duì)站外鏈接進(jìn)行安全檢測(cè)，確保鏈接的合法性和安全性。

8. 設(shè)備相關(guān)

橫豎屏：在一些圖片編輯軟件中，橫豎屏切換會(huì)影響用戶的操作體驗(yàn)。當(dāng)用戶將手機(jī)從豎屏切換到橫屏?xí)r，軟件會(huì)自動(dòng)調(diào)整界面布局，將工具菜單和編輯區(qū)域分別放置在屏幕的兩側(cè)，方便用戶進(jìn)行操作。而當(dāng)用戶將手機(jī)從橫屏切換回豎屏?xí)r，軟件會(huì)恢復(fù)到原來(lái)的布局。

分辨率：在一些游戲開發(fā)中，開發(fā)者會(huì)根據(jù)不同設(shè)備的分辨率進(jìn)行優(yōu)化。例如，在高分辨率的設(shè)備上，游戲畫面會(huì)更加細(xì)膩，特效也會(huì)更加豐富；而在低分辨率的設(shè)備上，游戲會(huì)自動(dòng)降低畫質(zhì)，以保證游戲的流暢運(yùn)行。

清晰度：在一些在線視頻教育平臺(tái)中，清晰度的選擇會(huì)影響用戶的學(xué)習(xí)體驗(yàn)。在網(wǎng)絡(luò)條件好的情況下，用戶可以選擇高清或超清的視頻清晰度，以便更清楚地看到教學(xué)內(nèi)容；而在網(wǎng)絡(luò)條件差的情況下，用戶可以選擇標(biāo)清或流暢的清晰度，以保證視頻的播放流暢度。

不同版本：在一些軟件的不同版本中，功能和界面會(huì)有所不同。例如，在一款繪圖軟件的專業(yè)版中，會(huì)提供更多的高級(jí)功能和工具，而在免費(fèi)版中，功能會(huì)相對(duì)較少。同時(shí)，軟件會(huì)在界面上明確標(biāo)識(shí)出不同版本的特點(diǎn)和優(yōu)勢(shì)，方便用戶根據(jù)自己的需求進(jìn)行選擇。

硬件調(diào)用：在一些智能家居控制軟件中，當(dāng)用戶需要調(diào)用攝像頭進(jìn)行監(jiān)控時(shí)，軟件會(huì)彈出請(qǐng)求授權(quán)的提示框。在獲得用戶授權(quán)后，軟件會(huì)提供實(shí)時(shí)監(jiān)控畫面，并支持遠(yuǎn)程控制攝像頭的角度和焦距。

硬件聯(lián)動(dòng)：在一些智能辦公場(chǎng)景中，硬件聯(lián)動(dòng)可以提高工作效率。例如，當(dāng)用戶在會(huì)議室中使用智能投影儀時(shí)，投影儀可以與會(huì)議室的燈光和音響系統(tǒng)聯(lián)動(dòng)，根據(jù)投影內(nèi)容自動(dòng)調(diào)整燈光亮度和音響音量。

9. 角色相關(guān)

未登錄 / 已登錄：在一些在線教育平臺(tái)上，未登錄用戶只能瀏覽部分公開的課程內(nèi)容，無(wú)法進(jìn)行課程報(bào)名和學(xué)習(xí)進(jìn)度跟蹤。而已登錄用戶可以享受更多的服務(wù)，如個(gè)性化課程推薦、學(xué)習(xí)記錄保存等。

新用戶 / 老用戶：對(duì)于新用戶，一些在線購(gòu)物平臺(tái)會(huì)提供新人專享優(yōu)惠券和折扣，幫助新用戶快速熟悉平臺(tái)的購(gòu)物流程。對(duì)于老用戶，平臺(tái)會(huì)根據(jù)他們的購(gòu)買歷史和瀏覽記錄，為他們推薦個(gè)性化的商品和促銷活動(dòng)。

游客賬號(hào)：在一些在線音樂平臺(tái)中，游客賬號(hào)可以讓用戶試聽部分歌曲，但無(wú)法下載和收藏歌曲。當(dāng)游客想要享受更多功能時(shí)，可以通過(guò)注冊(cè)賬號(hào)成為正式用戶。

普通 / 會(huì)員賬號(hào)：以在線閱讀平臺(tái)為例，會(huì)員用戶可以享受無(wú)廣告閱讀、優(yōu)先閱讀新書等特權(quán)。同時(shí)，平臺(tái)會(huì)在會(huì)員專屬內(nèi)容上進(jìn)行明顯標(biāo)識(shí)，吸引普通用戶升級(jí)為會(huì)員。

內(nèi)網(wǎng) / 外網(wǎng)賬號(hào)：在一些企業(yè)內(nèi)部的項(xiàng)目管理軟件中，內(nèi)網(wǎng)賬號(hào)可以訪問企業(yè)內(nèi)部的項(xiàng)目信息和文件，外網(wǎng)賬號(hào)則只能查看一些公開的項(xiàng)目進(jìn)度和報(bào)告。在設(shè)計(jì)這種賬號(hào)體系時(shí)，軟件會(huì)明確區(qū)分內(nèi)網(wǎng)和外網(wǎng)賬號(hào)的權(quán)限，確保企業(yè)信息的安全。

管理員賬號(hào)：在一些社區(qū)論壇中，管理員賬號(hào)可以對(duì)用戶的發(fā)言進(jìn)行審核和管理，維護(hù)社區(qū)的秩序。同時(shí)，管理員賬號(hào)還可以進(jìn)行系統(tǒng)設(shè)置和插件管理，提升論壇的功能和性能。

三、總結(jié)與展望

通過(guò)對(duì)九類交互狀態(tài)的深入分析，我們可以清楚地看到交互狀態(tài)在產(chǎn)品設(shè)計(jì)中的重要性。無(wú)論是加載相關(guān)、特殊模式，還是操作相關(guān)、限制相關(guān)等各個(gè)方面，交互狀態(tài)都直接影響著用戶對(duì)產(chǎn)品的使用體驗(yàn)和滿意度。

例如，在加載相關(guān)方面，合理的加載類型和狀態(tài)顯示能夠減少用戶的等待焦慮，中斷處理機(jī)制則能在意外情況下最大程度地保護(hù)用戶數(shù)據(jù)和操作進(jìn)度。在特殊模式中，深度 / 夜間模式和沉浸模式插件為用戶提供了更加舒適和專注的使用環(huán)境。操作相關(guān)的輸入、點(diǎn)擊和防范重復(fù)點(diǎn)擊 / 惡意操作等設(shè)計(jì)，確保了用戶操作的準(zhǔn)確性和安全性。限制相關(guān)的極值、邊界和時(shí)間限制，使得產(chǎn)品的使用更加規(guī)范和合理。網(wǎng)絡(luò)相關(guān)的處理能夠在不同網(wǎng)絡(luò)狀況下為用戶提供盡可能好的體驗(yàn)。內(nèi)容相關(guān)的處理確保了用戶在面對(duì)不同內(nèi)容情況時(shí)都能得到恰當(dāng)?shù)囊龑?dǎo)和提示。站外內(nèi)容相關(guān)的設(shè)計(jì)保障了用戶在訪問外部鏈接時(shí)的安全。設(shè)備相關(guān)的橫豎屏、分辨率、清晰度、不同版本、硬件調(diào)用和聯(lián)動(dòng)等設(shè)計(jì)，適應(yīng)了不同設(shè)備和用戶需求。角色相關(guān)的不同狀態(tài)設(shè)計(jì)，為不同類型的用戶提供了個(gè)性化的服務(wù)和體驗(yàn)。

展望未來(lái)，隨著科技的不斷進(jìn)步，交互狀態(tài)的設(shè)計(jì)也將不斷發(fā)展和創(chuàng)新。一方面，人工智能、大數(shù)據(jù)等技術(shù)的應(yīng)用將使交互狀態(tài)更加智能化和個(gè)性化。例如，通過(guò)分析用戶的使用習(xí)慣和偏好，自動(dòng)調(diào)整加載策略、推薦適合的操作模式等。另一方面，虛擬現(xiàn)實(shí)、增強(qiáng)現(xiàn)實(shí)等新興技術(shù)的發(fā)展將為交互狀態(tài)帶來(lái)全新的體驗(yàn)。例如，在虛擬現(xiàn)實(shí)環(huán)境中的交互狀態(tài)設(shè)計(jì)將更加注重沉浸感和自然交互。同時(shí)，隨著物聯(lián)網(wǎng)的發(fā)展，硬件之間的聯(lián)動(dòng)將更加緊密和智能，為用戶提供更加便捷和高效的服務(wù)。