A级国产精品片在线观看,亚洲日韩欧美综合

首頁

172024-10

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

ui設(shè)計分享達(dá)人 B端ui設(shè)計文章及欣賞

一、可視化原則

數(shù)據(jù)可視化是把相對復(fù)雜、抽象的數(shù)據(jù)通過可視化手段，表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

Dreawer Design 團(tuán)隊總結(jié)了以下四個可視化原則，供設(shè)計者參考及使用：

1. 準(zhǔn)確

數(shù)據(jù)圖表需精準(zhǔn)、如實地反應(yīng)數(shù)據(jù)信息的變化特征。

2. 清晰

讓設(shè)計服務(wù)于數(shù)據(jù)內(nèi)容，給用戶以最為清晰、明確、迅捷的數(shù)據(jù)展示。用戶看到可視化圖表時，應(yīng)能在 5 秒內(nèi)了解到它的用途，而不是花幾分鐘都不能理解各個數(shù)據(jù)的含義。

3. 簡單

可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

下面為圖標(biāo)類型與認(rèn)知成本對比：

4. 美觀

優(yōu)秀的數(shù)據(jù)可視化界面，會有一套非常嚴(yán)謹(jǐn)一致的版面。這里的一致性需要考慮到布局、結(jié)構(gòu)和內(nèi)容。

二、圖表解構(gòu)

1. 構(gòu)成元素

我們從標(biāo)題、坐標(biāo)軸、圖例、標(biāo)簽、提示信息、數(shù)據(jù)圖形這 6 個大類，對數(shù)據(jù)圖表進(jìn)行進(jìn)一步元素拆解及闡述。設(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)成元素示例（為了便于觀察，某些字母做了大寫處理）：

除了以上的常規(guī)元素，還有常用于餅圖、環(huán)形圖中的“引導(dǎo)線”：

2. 標(biāo)題

標(biāo)題是概括圖表主題的說明文字，一個明確、精簡的標(biāo)題可以迅速讓讀者理解圖表要表達(dá)的內(nèi)容。

2.1 位置

一般位于數(shù)據(jù)圖表卡片的左上方。

2.2 使用建議

標(biāo)題需言簡意賅、符合圖表主題；盡量控制在 20 個字以內(nèi)，標(biāo)題寬度盡量不要超過卡片寬度。

2.3超長處理

當(dāng)標(biāo)題超過長出卡片寬度時，省略標(biāo)題中間的文字，保住首尾，如“我是...標(biāo)題”。

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á)圖等。

補(bǔ)充說明：

1. 坐標(biāo)軸由定義域軸（X 軸）和值域軸（Y 軸）組成。條形圖中，定義域軸為 Y 軸，值域軸為 X 軸。

2. X軸為水平方向的橫軸，Y 軸為垂直方向的豎軸。以下主要針對笛卡爾坐標(biāo)系的坐標(biāo)軸構(gòu)成進(jìn)行分析：

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ù)軸三大類。

3.4 X/Y 軸線

顏色層級：X/Y軸線要比網(wǎng)格線層級高、顏色深，這樣能讓圖表有主次區(qū)分。

使用建議：有網(wǎng)格線時，柱狀圖/折線圖會隱藏 Y 軸線，條形圖則是隱藏 X 軸線，以達(dá)到信息降噪、突出重點的目的。

3.5 刻度線

軸刻度線是軸線上的小線段，用于指示數(shù)值標(biāo)簽在坐標(biāo)軸上的具體位置。軸刻度線有 3 種放置方式：置內(nèi)、置中（即交叉方式）、置外。

位置建議：刻度線置中/置內(nèi)時，可能會和網(wǎng)格線、數(shù)據(jù)圖形重疊，所以建議將刻度線置于數(shù)值坐標(biāo)軸外側(cè)，以呈現(xiàn)最佳顯示效果。

顯示建議：

折線圖：刻度線、X/Y 軸標(biāo)簽、數(shù)據(jù)點需要保持在同一垂直線上；

柱狀圖/條形圖：由于單個柱子有很強(qiáng)的對應(yīng)關(guān)系，此時可以隱藏刻度線；

3.6 網(wǎng)格線

定義：網(wǎng)格線是用來輔助圖表優(yōu)化映射關(guān)系的，我們需要弱化網(wǎng)格線的視覺效果，來增加數(shù)據(jù)的可閱讀性。

作用：1. 延伸數(shù)值刻度至可視化對象中，以便觀察數(shù)據(jù)值的大??；2. 增加可視化對象之間的對比觀察度。

使用建議 1 ：使用網(wǎng)格線時，需遵從主次原則，以軸線為主、網(wǎng)格線為輔；樣式上可采用實線或虛線；避免顏色過重、使用純黑/純白色。

使用建議 2 ：網(wǎng)格線一般跟隨值域軸的位置單向顯示，柱狀圖、折線圖等采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。

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)了奧卡姆剃刀定律：如無必要，勿增實體。

3.8 X/Y 軸標(biāo)簽

軸標(biāo)簽是對當(dāng)前某一組數(shù)據(jù)的內(nèi)容標(biāo)注，用于提高數(shù)據(jù)的可讀性。

以下從 X 軸標(biāo)簽、Y軸標(biāo)簽兩方面進(jìn)行分析：

a. X 軸標(biāo)簽

X 軸標(biāo)簽的設(shè)計重點在顯示規(guī)則上。卡片寬度過窄、標(biāo)簽過多、名稱過長時，X 軸標(biāo)簽便會出現(xiàn)顯示問題（如標(biāo)簽重疊等）。

為了解決顯示問題，我們從連續(xù)/時間軸標(biāo)簽（數(shù)值類）、分類軸標(biāo)簽（文本類）兩方面進(jìn)行分析：

連續(xù)/時間軸標(biāo)簽

顯示規(guī)則：建議等分抽樣顯示、旋轉(zhuǎn)；不尾部省略。

建議等分抽樣：連續(xù)/時間軸，通常由一組等差數(shù)列組成，具有規(guī)律性，缺失的數(shù)據(jù)用戶會在腦海中自動補(bǔ)全。所以建議用等分抽樣來避免標(biāo)簽的重疊問題。

注意：等分抽樣盡量保留首尾數(shù)據(jù)標(biāo)簽；隨機(jī)抽樣沒有規(guī)律，會影響用戶的判斷及辨認(rèn)，不建議采取隨機(jī)抽樣顯示。

連續(xù)/時間軸標(biāo)簽是由“關(guān)鍵數(shù)值”組成的標(biāo)注點，一般都明確精簡，尾部省略會影響用戶對關(guān)鍵數(shù)值的辨認(rèn)。

為了保證標(biāo)簽的辨識度，我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 。極端情況下（圖表寬度極窄），可以同時進(jìn)行旋轉(zhuǎn)+抽樣。

分類軸標(biāo)簽

顯示規(guī)則：建議旋轉(zhuǎn)顯示；不建議抽樣顯示。

分類軸由幾個離散數(shù)據(jù)標(biāo)簽組成，標(biāo)簽之間獨立存在，無緊密邏輯關(guān)系，用戶無法自動補(bǔ)全缺失信息。因此，不能采取抽樣顯示，應(yīng)盡量展示全部標(biāo)簽的全部文本。

若標(biāo)簽橫向展示空間不夠（文字重疊），我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 來達(dá)到預(yù)期顯示效果。若通過旋轉(zhuǎn)無法滿足需求，可使用條形圖，將分類軸放在Y軸。

旋轉(zhuǎn)方向說明：通常情況下，用戶的閱讀視線為從左至右、從上到下。因此，標(biāo)簽順時針旋轉(zhuǎn) 45° 更符合用戶的瀏覽習(xí)慣。

b. Y 軸標(biāo)簽

Y 軸標(biāo)簽的設(shè)計重點在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長標(biāo)簽寬度進(jìn)行自適應(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á)及閱讀。

對齊方式：右對齊

軸標(biāo)簽的取值范圍

基準(zhǔn)線： Y 軸標(biāo)簽取值應(yīng)從 0 基線開始，以反映數(shù)據(jù)的真實性。如果展示被截斷的 Y 軸數(shù)據(jù)，會導(dǎo)致用戶做出錯誤的判斷。

軸標(biāo)簽的數(shù)據(jù)格式

使用建議 1：標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一。

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)簽。

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)簽。

分組柱狀圖

：數(shù)據(jù)標(biāo)簽可顯示在數(shù)據(jù)圖形內(nèi)部、外部。顯示在內(nèi)部的數(shù)據(jù)標(biāo)簽顯示寬度不夠時，解決方案同上。

堆疊柱狀圖

：數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)圖形內(nèi)部。

b. 條形圖

數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；圖形寬度 < 數(shù)據(jù)標(biāo)簽高度時，不顯示數(shù)據(jù)標(biāo)簽；條形圖高度需 >= 數(shù)據(jù)標(biāo)簽高度。

基礎(chǔ)、分組條形圖的數(shù)據(jù)標(biāo)簽也可以顯示在圖形外部：

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)簽。

d. 餅圖、環(huán)形圖

數(shù)據(jù)標(biāo)簽顯示在圖形內(nèi)部、外部均可。

由于扇形有角度，且形狀相對不規(guī)則，對數(shù)據(jù)標(biāo)簽的文本長度包容度較低，環(huán)形更是如此。所以，當(dāng)扇/環(huán)形分割過多、面積較小時，建議將數(shù)據(jù)標(biāo)簽顯示在圖形外部。

當(dāng)然，我們也可以內(nèi)外部結(jié)合使用：

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)可讀性低的問題。

由于篇幅問題，剩余內(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.sillybuy.com )是一家專注而深入的界面設(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í)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

評論(0) 瀏覽(79)

172024-10

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

ui設(shè)計分享達(dá)人行業(yè)趨勢

前言

當(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)在能力、界面、操作體驗和適用場景都上存在顯著差異。

一、沉浸式形態(tài)

AI智能體(Agent)—功能強(qiáng)大的AI伙伴

一個富有主動性的獨立伙伴，輸出的結(jié)果不完全依賴用戶的輸入，啟動AI問詢后有2種主流的形態(tài)：

①「對話智能體」以對話流的形式展示信息，用戶通過在當(dāng)前語境下進(jìn)行追問獲取最終結(jié)果；

②「目標(biāo)智能體」用戶輸入指令后，一次性給予用戶“靠譜”的結(jié)果，配有側(cè)邊欄可進(jìn)行多種輔助操作。

1.對話智能體示例—Gemini

以谷歌Gemini產(chǎn)品為例，其作為對話流的智能體，為滿足搜索場景，具有以下特征：

1）冷啟頁P(yáng)rompt形象化

相較于2023年初Gemini冷啟時的樣式，最近改版中冷啟的Prompt卡片變得形象化，當(dāng)然我們也在其他Agent產(chǎn)品中觀察到了這一變化。

2）多模態(tài)內(nèi)容

理解用戶的文字意圖，依據(jù)要求自主生成多模態(tài)卡片是對話智能體的主要特征之一，該功能可以極大地豐富AI反饋的多樣性，并能提高信息傳達(dá)的效率。

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)展開不僅強(qiáng)化了內(nèi)容的可靠性，也更好地支持了用戶的深入需求。

2.目標(biāo)智能體示例—Perplexity

Perplexity作為最近廣受好評的AI搜索工具，相較于Gemini，它更注重給予用戶最精準(zhǔn)的答案。基于RAG技術(shù)的Perplexity為用戶提供了一種新的“確定性”，而鑒于這種特征，Perplexity擁有雙面板的形態(tài)，可以對當(dāng)前確定性的信息進(jìn)行深化處理。

1 ）輸入即結(jié)果

相較于Gemini等對話智能體產(chǎn)品，AI Agent用戶需要反復(fù)追問結(jié)果，而在體驗Perplexity時的無對話場景感，更傾向于一次性給予用戶“靠譜”的答案。

2）側(cè)分欄—信息補(bǔ)充

因為Perplexity一次就可以給予用戶最“準(zhǔn)確”的信息，用戶可能沒有追問的必要，但可能會有對于當(dāng)前問答進(jìn)行深度搜索的需求，這時會有右側(cè)GUI分欄的出現(xiàn)，以便用戶進(jìn)行輔助搜索。

3.思考：給予用戶最佳答案的AI形態(tài)

在使用體驗上，Gemini與Perplexity雖然走向兩個不同的流派，但目的都是為了給用戶呈現(xiàn)最佳的搜索結(jié)果。Gemini就像一位富有想象力的對話者，用戶在對話中通過不斷地追問來獲得最佳的結(jié)果，而Perplexity更像一個AI版的知乎，它堅持“用戶不會犯錯”原則，冷靜客觀地為用戶提供最精準(zhǔn)的答案。

二、伴隨式形態(tài)

AI副駕駛(Copilot)—被動性的AI助手

這種形態(tài)下的AI更多扮演“副駕駛”的角色，為用戶提供建議和幫助，依賴用戶精準(zhǔn)的指令對當(dāng)前內(nèi)容窗口進(jìn)行操作，一般以側(cè)邊欄形式展示，目前的Office文檔類產(chǎn)品多采用此類形態(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)作輔助等操作。

2）被動性AI助手

Copilot無法自動執(zhí)行操作去修改當(dāng)前頁面內(nèi)容，需要用戶確認(rèn)后才可執(zhí)行，用戶執(zhí)行操作后會在側(cè)邊欄內(nèi)顯示操作記錄與撤銷操作的入口。

3）輔助Prompt

由于AI副駕駛的特性，常常需要準(zhǔn)確的Prompt才能執(zhí)行符合預(yù)期的操作，這對大部分用戶來說門檻較高，因此在使用時需要及時給予用戶合理的聯(lián)想Prompt，輔助用戶決策。

2.思考：提高用戶工作效率的AI助手

作為被動性AI助手，用戶即使不使用也不會影響其在整體頁面中的操作，AI更多承擔(dān)的是提升用戶工作效率過程中的輔助角色。

三、嵌入式形態(tài)

AI場景化嵌入(Embedding)

嵌入式AI主要聚焦特定場景的AI輔助，如AI即時性地生成對當(dāng)前評論的回復(fù)，此類交互無固定形態(tài)，AI會在用戶進(jìn)行高頻重要操作時即時觸發(fā)。

在多元化場景中，嵌入式AI的設(shè)計相較于前兩類更加靈活和輕量，通常以LGUI(輕量化用戶界面)為核心，強(qiáng)調(diào)用戶與AI之間的無縫銜接與高效互動。

與對話式或結(jié)構(gòu)化阿拉丁模式相比，嵌入式AI的設(shè)計思路更加通暢，摒棄了復(fù)雜的交互流程，更注重場景中的引導(dǎo)性和即時反饋，幫助用戶在合適的時機(jī)獲取所需信息。

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)的文件一并移入到新建的文件夾中，以幫助用戶進(jìn)一步整理文件。AI能夠基于文件內(nèi)容的上下文，敏銳地判斷出哪些文件可能屬于同一類別，進(jìn)而為用戶提供便捷的一鍵整理服務(wù)。

場景二: 智能分享建議

當(dāng)用戶準(zhǔn)備在One Drive中分享文件時，AI助手會根據(jù)文件內(nèi)容和用戶的歷史分享記錄，預(yù)測出最可能需要分享的對象名單，為用戶精準(zhǔn)推薦受眾人員。智能分享建議可以極大地節(jié)省用戶挑選分享對象的時間。

基于上述2個例子，我們可以對嵌入式AI有進(jìn)一步的思考：

合理的嵌入式AI操作只在用戶進(jìn)行重要操作時被“激活”，能夠在當(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)。無論是主動性強(qiáng)的智能體、輔助型的副駕駛，還是輕量化的嵌入式方案，每一種設(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ù)將進(jìn)一步打破不同形態(tài)之間的界限，形成更加靈活、動態(tài)的交互模式。這種融合不僅依賴更智能的技術(shù)，還要求設(shè)計師在實際應(yīng)用中敏銳捕捉用戶需求，提供真正有價值的解決方案。

最后，設(shè)計的核心原則是以用戶為中心，強(qiáng)調(diào)合適性，而非追求炫技。無論是大型智能體的復(fù)雜場景處理，還是嵌入式AI的場景化介入，優(yōu)秀的設(shè)計應(yīng)始終聚焦用戶需求，在不同場景中找到最優(yōu)平衡點。隨著技術(shù)的進(jìn)化，設(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) 瀏覽(103)

172024-10

用戶體驗一致性思考

ui設(shè)計分享達(dá)人交互設(shè)計及用戶體驗

前言

在團(tuán)隊內(nèi)部，我們已確立了一套設(shè)計規(guī)范，在日常項目中使用設(shè)計規(guī)范輸出變的高效、統(tǒng)一。然而，在實際操作中，不可避免地會遇到一些特殊情況：某些客戶提出的個性化需求并不完全契合既定的設(shè)計規(guī)范,這些促使我們不得不在保持設(shè)計一致性的基礎(chǔ)上進(jìn)行靈活調(diào)整。因此，深入反思并優(yōu)化一致性原則的應(yīng)用策略顯得尤為重要。我們需要探索如何在堅守設(shè)計規(guī)范核心精神的同時，靈活應(yīng)對多變的需求，確保設(shè)計既保持統(tǒng)一和諧，又能滿足特定場景下的獨特需求，從而實現(xiàn)用戶體驗與品牌價值的雙重提升。

在UI/UX設(shè)計中，雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四。這一原則強(qiáng)調(diào)在界面和交互設(shè)計上需要遵循既定的規(guī)則，無論是在應(yīng)用內(nèi)部還是跨平臺之間。

背后的心理學(xué)原理——重復(fù)定律，強(qiáng)調(diào)了信息重復(fù)對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的，信息的有效保留離不開重復(fù)接觸。一致性的應(yīng)用正是這一原理的生動實踐，通過不斷重復(fù)統(tǒng)一的設(shè)計元素與模式，強(qiáng)化用戶對產(chǎn)品的認(rèn)知與記憶，從而提升整體的用戶滿意度與忠誠度。

艾賓浩斯遺忘曲線

用戶側(cè)

1、用戶學(xué)習(xí)曲線：

一致的UI/UX設(shè)計可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時，他們可以快速理解并準(zhǔn)確預(yù)測如何與界面進(jìn)行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。

2、提升可用性：

一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁面或功能之間找到相似的設(shè)計元素和交互模式時，他們可以輕松地將已有的知識和經(jīng)驗應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯誤和迷失，提供更好的導(dǎo)航和流暢的體驗。

3、品牌認(rèn)可度：

一致的UI/UX設(shè)計有助于樹立品牌形象和增強(qiáng)品牌認(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)域，色彩的選擇與運(yùn)用不僅是視覺藝術(shù)的展現(xiàn)，更是品牌身份與個性的直接體現(xiàn)。諸如餓了么標(biāo)志性的藍(lán)色、美團(tuán)鮮明的黃色、以及京東熱情的紅色等，這些品牌專屬色彩不僅構(gòu)成了品牌識別系統(tǒng)的重要組成部分，還通過其高度的一致性，在視覺層面上構(gòu)建起強(qiáng)烈的品牌認(rèn)知，營造出統(tǒng)一和諧的視覺體驗。

色彩的一致性策略在品牌塑造中發(fā)揮著不可估量的作用，它能夠有效增強(qiáng)品牌的記憶度與辨識度，深化品牌形象在消費(fèi)者心中的烙印，進(jìn)而提升產(chǎn)品的市場吸引力和用戶忠誠度。同時，這種策略還促進(jì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ī)、粗體等）更是能夠強(qiáng)調(diào)文本的重要性層級，增強(qiáng)信息的層次感與可讀性。此外，字重的調(diào)整也是塑造視覺焦點、引導(dǎo)視線流動的有效手段，對于提升設(shè)計的整體美觀度和信息傳達(dá)效率具有不可小覷的作用。

然而，在實際的開發(fā)與實現(xiàn)過程中，若不加節(jié)制地使用多種字體，不僅會顯著增加頁面的加載時間，影響用戶體驗的流暢性，還可能因風(fēng)格不統(tǒng)一而導(dǎo)致頁面顯得雜亂無章，破壞整體設(shè)計的和諧感。因此，制定一套統(tǒng)一、規(guī)范的字體使用策略顯得尤為重要。這不僅有助于提升開發(fā)效率，減少后期更新迭代的復(fù)雜度，還能有效避免資源浪費(fèi)，確保設(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)格等多個方面，能夠增強(qiáng)用戶的認(rèn)知連貫性，降低學(xué)習(xí)成本，提升使用效率。相反，如果圖標(biāo)風(fēng)格混雜，不僅會讓界面顯得雜亂無章，還會給用戶帶來困惑和不安，進(jìn)而影響其對產(chǎn)品專業(yè)性和安全性的信任。

按鈕

按鈕設(shè)計應(yīng)統(tǒng)一于項目風(fēng)格，無論是圓形、矩形、圓角矩形還是特定形狀，保持一致性是關(guān)鍵。統(tǒng)一的按鈕樣式不僅彰顯專業(yè)性，還能增強(qiáng)用戶信任，確保體驗連貫。過多變化的按鈕樣式會擾亂用戶界面，降低操作直觀性，甚至讓用戶誤以為自己已離開應(yīng)用環(huán)境。因此，精心設(shè)計的統(tǒng)一按鈕樣式對提升用戶體驗至關(guān)重要。

排版

設(shè)計中的排版一致性對于構(gòu)建高效、用戶友好的界面至關(guān)重要。一致的排版不僅能夠讓用戶快速適應(yīng)和理解界面的整體結(jié)構(gòu)，大幅降低學(xué)習(xí)成本，還能在用戶心中激發(fā)強(qiáng)烈的歸屬感和安全感。這種熟悉感使得內(nèi)容更加易讀，用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面，迅速定位并獲取所需信息，從而顯著提升信息獲取的效率。因此，在設(shè)計過程中，注重并維護(hù)排版的一致性，是提升用戶體驗和界面有效性的重要策略之一。

操作流程的一致性

標(biāo)準(zhǔn)化流程

：確保用戶在執(zhí)行相似任務(wù)時，如購買商品、搜索信息或提交表單等，能夠遵循相同的操作流程。這有助于用戶快速適應(yīng)并高效完成任務(wù)。

邏輯清晰

：操作流程的每一步都應(yīng)符合用戶的認(rèn)知習(xí)慣和行為邏輯，避免讓用戶感到困惑或不知所措。

交互元素的一致性

按鈕和控件

：確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個應(yīng)用或網(wǎng)站中保持一致。例如，所有按鈕都應(yīng)具有相同的視覺風(fēng)格和觸發(fā)機(jī)制。

導(dǎo)航和菜單

：導(dǎo)航欄和菜單的設(shè)計也應(yīng)保持一致，使用戶能夠輕松地在不同頁面或功能之間切換。

反饋機(jī)制的一致性

操作反饋

：當(dāng)用戶執(zhí)行某個操作時，應(yīng)用或網(wǎng)站應(yīng)提供一致且及時的反饋，如加載動畫、成功提示或錯誤消息等。這有助于用戶了解操作結(jié)果并采取相應(yīng)的行動。

狀態(tài)提示

：對于長時間運(yùn)行的操作或需要用戶等待的場景，應(yīng)提供明確的狀態(tài)提示（如進(jìn)度條），以減輕用戶的不確定感和焦慮感。

在任何維度上，一致性不應(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è)計團(tuán)隊（包括工程師、產(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ù)報表、通知公告、項目進(jìn)展等）。

視覺層次

：通過顏色、大小、陰影等設(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ī)則與原則一致時，促進(jìn)業(yè)務(wù)共識與用戶價值；沖突時，原則優(yōu)先。用戶體驗原則指導(dǎo)下的一致性，要超越表面控件統(tǒng)一，更在于產(chǎn)品決策與價值取向的一致。必要時，為更好的用戶體驗，可在規(guī)則上讓步以實現(xiàn)原則統(tǒng)一。打破規(guī)則需慎重權(quán)衡，確保用戶便利足以彌補(bǔ)理解成本，需長期全局考量。規(guī)則非僵化教條，而是引導(dǎo)我們謹(jǐn)慎創(chuàng)新的框架。

一致性的底線

無論從哪個角度，一致性存在的必要性都是毋庸置疑的。

對于關(guān)鍵的設(shè)計元素，如專有名詞和顏色體系，保持一致性至關(guān)重要。這不僅有助于維護(hù)品牌形象，還能減少用戶的困惑。

特定設(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ā)進(jìn)行創(chuàng)新設(shè)計。多樣性頁面的產(chǎn)出，不僅體現(xiàn)了設(shè)計師的創(chuàng)造力和靈活性，也是提升用戶體驗、增強(qiá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)固的基石，還顯著促進(jìn)了開發(fā)效率與產(chǎn)品體驗的全面升級。在設(shè)計實踐中，一致性確保了界面元素的統(tǒng)一性和連貫性，使得用戶能夠迅速熟悉并掌握產(chǎn)品的使用方式，降低了學(xué)習(xí)成本，增強(qiáng)了操作的直觀性和便捷性。

靈活變通使用

一致性原則并非一成不變的強(qiáng)制規(guī)定，而是需要根據(jù)產(chǎn)品的具體定位和市場環(huán)境進(jì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)載請注明出處。

評論(0) 瀏覽(89)

172024-10

打動人心的直覺設(shè)計

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

前言

之所以對“直覺設(shè)計”產(chǎn)生興趣還要源于我們每次的設(shè)計評審，在跟其他設(shè)計師還有我們的業(yè)務(wù)方溝通時，大家常常會問到的且令人印象深刻的問題是：

“用戶怎么知道點哪里？”、“這符合用戶直覺嗎？”

類似的靈魂拷問涉及到用戶使用工具產(chǎn)品行為流程的每一步操作。作為設(shè)計師大家有時也會心生質(zhì)疑，“這么明顯用戶注意不到嗎？這么簡單用戶不可能不會操作吧...”。

但是隨著我們的”新手體驗官活動“的逐步進(jìn)行，當(dāng)親自站在用戶面前觀察用戶是如何操作和理解工具時，我們漸漸意識到小白用戶

接觸-認(rèn)知-使用工具

的每一環(huán)都是至關(guān)重要的，即便是一個交互細(xì)節(jié)的設(shè)計都有可能帶來認(rèn)知和操作層面受阻，從而勸退用戶。

因此，我們想去了解什么樣的設(shè)計是符合用戶直覺的，是易用的，同時也想去了解主流3D建模軟件的核心建模邏輯（SU、Revit為代表）--于是開始了“直覺設(shè)計”的研究以及“建模課程”的學(xué)習(xí)。

1、什么是直覺設(shè)計？

首先來看什么是直覺設(shè)計，直覺設(shè)計是指用戶無需進(jìn)行有意識的思考就可以立即理解并知道如何去使用產(chǎn)品。國外有不少的用戶研究機(jī)構(gòu)也專門定義過直覺設(shè)計：

“在特定任務(wù)的背景下，技術(shù)系統(tǒng)可以直觀地使用，而特定用戶能夠有效地交互，而不是有意識地使用先前的知識。”– 用戶界面的直觀使用 (IUUI) 研究小組。一個由跨學(xué)科研究人員組成的團(tuán)隊，致力于探索如何定義直觀的使用和界面。

為了方便大家更好的理解直覺設(shè)計，我們先來看幾個例子：

案例1-玩具收納：小朋友在玩完玩具以后，把玩具擺的到處都是，如果發(fā)號施令告訴小朋友“去把玩具收拾起來”，小朋友通常不會去收拾。如果將收納設(shè)計成為一種小游戲，小朋友會自然而然的參與其中并且會覺得非常有趣。

案例2-公共環(huán)境衛(wèi)生：保持小便池的清潔，張貼告示語“注意保持清潔”大多是沒有用的。荷蘭的設(shè)計師在公共的男士小便池里設(shè)計了一個“蒼蠅”，利用人們的嫌惡心理會發(fā)現(xiàn)小便時會不由自主的對準(zhǔn)中心的位置，從而減少尿液四濺，維護(hù)公共環(huán)境衛(wèi)生。

案例3-公共設(shè)施：設(shè)有傳感器和揚(yáng)聲器的臺階，人們只要踩上去就能聽到音樂聲，從而達(dá)到鼓勵人們爬樓梯的目標(biāo)。

案例4-工業(yè)產(chǎn)品設(shè)計：很多耳熟能詳?shù)墓I(yè)產(chǎn)品中也運(yùn)用了直覺設(shè)計，例如深澤直人的CD播放器，Apple的Vision OS系統(tǒng)等等。

案例5-游戲設(shè)計：游戲中非常多的運(yùn)用了直覺設(shè)計，比如超級馬里奧，塞爾達(dá)，想必大家都深有感受。

通過上述案例我們發(fā)現(xiàn)其實直覺設(shè)計傳達(dá)出來是信息包含兩方面：用戶看到就能夠理解是什么，且能夠不由自主地產(chǎn)生行動。

看到這里，大家可能會好奇為什么會產(chǎn)生這種”直覺設(shè)計“？接下來讓我們一起來看看直覺設(shè)計是如何產(chǎn)生的。

2、直覺設(shè)計如何產(chǎn)生？

人的直覺設(shè)計是怎么來的？是天生的嗎？帶著這樣的疑惑，我們閱讀了相關(guān)書籍和文章。

先天視覺和經(jīng)驗直覺

先天直覺，也可以說是”本我“，是最原始的”心理現(xiàn)實“，在個體從外部世界獲得經(jīng)驗之前就存在的內(nèi)部世界，不需要經(jīng)過學(xué)習(xí)或訓(xùn)練。比如嬰兒時期的特征，希望立刻得到滿足、躲避痛苦、強(qiáng)大的求生意愿等。

經(jīng)驗直覺，巴普洛夫的實驗想必大家都知道。有機(jī)體能夠把已有的經(jīng)驗遷移到新的學(xué)習(xí)環(huán)境中去，從而擴(kuò)大學(xué)習(xí)范圍。

先天直覺一般對應(yīng)于人類的第一信號系統(tǒng)，是建立在人的直接感覺上的，通過人的感覺（視覺、聽覺、觸覺等）而進(jìn)行的一種思維活動；經(jīng)驗直覺（邏輯性直覺直覺）思維雖然利用了人類的感性認(rèn)識（感覺、知覺、表象等）形式，但它絕不是僅僅停留在這一步上，而是超越了邏輯思維形式達(dá)到了更高一個層次上的思維。

從表面上看，邏輯性直覺的結(jié)果是以直觀的形式表現(xiàn)出來的，實際上它已經(jīng)在頭腦中進(jìn)行了邏輯程序的高度壓縮，迅速地越過了“理性認(rèn)識階段”，是簡縮了整個邏輯思維過程的一種思維形式。

所以，邏輯性直覺既源于感性認(rèn)識，又高于感性認(rèn)識，是一種常常能在極短的時間內(nèi)完成，并能夠?qū)栴}迅速作出回答的一種無意識的、躍進(jìn)式的直覺形式。

構(gòu)建直覺，現(xiàn)有研究指出，分析加工和直覺加工兩者可能處于不斷的相互轉(zhuǎn)換之中。一方面，分析加工可以通過熟練化形成經(jīng)驗圖式，從而減少認(rèn)知資源的消耗，并由此轉(zhuǎn)化為直覺加工；另一方面，當(dāng)直覺加工無法通過已有經(jīng)驗解決新的問題情境時，又需要調(diào)動更多的認(rèn)知資源并轉(zhuǎn)向分析加工，直到形成新的經(jīng)驗圖式。

先天直覺大家都容易理解，接下來我們重點看一下經(jīng)驗直覺是如何產(chǎn)生的？

經(jīng)驗直覺的產(chǎn)生與人生存的環(huán)境密切相關(guān)，所以這里包含兩個關(guān)鍵點：物理世界（環(huán)境）和生活環(huán)境。

來自物理環(huán)境的經(jīng)驗

物理環(huán)境主要包括我們生存的自然環(huán)境，以及我們與物理環(huán)境的互動所形成的感官運(yùn)動。人類在嬰兒時期就開始體驗和實驗物理環(huán)境。這種體驗建立在我們第一次拿著一個物體、第一次把它扔到地板上、第一次學(xué)會爬到我們最喜歡的玩具等時學(xué)到的基本感覺運(yùn)動技能上。我們對物理世界的體驗它已成為日常生活的一部分。經(jīng)過物理環(huán)境互動所形成的直覺是跨越國界、且不會被遺忘的。

來自文化環(huán)境的經(jīng)驗

通俗的講指社會文化環(huán)境。它包括人類通過其獲得的知識和技術(shù)開發(fā)的所有物質(zhì)文化元素。例如，房屋、村莊、城鎮(zhèn)、公路和鐵路網(wǎng)絡(luò)、交通方式、工業(yè)單位、田野、醫(yī)院、體育場館、娛樂設(shè)施、市場、港口以及日常和特殊用途的物品。除此之外還包括價值觀念、道德信仰、語言、符號、審美觀念、風(fēng)俗習(xí)慣等各種規(guī)范。

例如播放圖標(biāo)“?”是許多文化中的人們在年輕時學(xué)習(xí)符號的一個很好的例子。在任何可以使用媒體播放器的文化中，人們都知道 ? 圖標(biāo)的含義。它的直觀性幾乎與物理世界中的對象行為一致。

因此，在媒體播放器中，人們理所當(dāng)然的希望可以延續(xù)“?”符號的含義。來自文化環(huán)境的知識也可以變得很直觀，但是由于沒有來自物理世界的持續(xù)提醒之后，很容易被遺忘。

因此在提供直覺設(shè)計時，應(yīng)盡量符合用戶從物理世界中獲得的經(jīng)驗與技能。但如果我們的用戶群體是具有相同文化背景下的人群，符合文化環(huán)境的知識與經(jīng)驗也可以作為直觀設(shè)計的決策依據(jù)。

3、為什么要符合直覺設(shè)計？

給用戶留下良好的第一印象，助力產(chǎn)品贏得并且留下用戶。

當(dāng)我們開始使用某款產(chǎn)品時，用戶往往在幾秒內(nèi)就會產(chǎn)生第一印象并且往往會保持不變，少則幾分鐘多則十幾分鐘用戶就可感受到產(chǎn)品的價值。

渥太華卡雷頓大學(xué)的Gitte·Lindgaard和她的研究小組發(fā)現(xiàn)：人類對事物的初始印象在50毫秒內(nèi)就會形成。研究小組準(zhǔn)備了一批要么極易入眼要么混亂不堪的網(wǎng)頁，讓一批志愿者在快速變換中投票。雖然這些網(wǎng)頁以50毫秒每張的速度一閃而過，但是研究發(fā)現(xiàn)他們的評價與長時間觀察后的結(jié)果基本無異。

這就說明了用戶的第一印象非常明確且重要，幫助用戶判斷出這是否是一個設(shè)計合理的網(wǎng)站。如果用戶停留時間再長一點，那么用戶足以判斷出網(wǎng)站上的信息是否是滿足自己需要的信息，從而影響用戶是否繼續(xù)停留下來去使用該網(wǎng)站。

更容易讓用戶達(dá)到心流狀態(tài)、沉浸式的使用產(chǎn)品，并且持續(xù)吸引用戶使用產(chǎn)品。

符合用戶直覺的、熟悉的操作模式，作為用戶直觀使用的基礎(chǔ)，更容易產(chǎn)生積極的審美評價。相反，如果用戶的認(rèn)知流暢性受阻，則不太會產(chǎn)生正面積極的評價。簡潔有力的設(shè)計會促使用戶再次使用產(chǎn)品，是保持產(chǎn)品吸引力的最佳方式。

4、如何使設(shè)計符合用戶直覺？

因為工作中涉及到3D建模軟件的設(shè)計，所以這部分將結(jié)合3D建模軟件來探討。

如果您接觸過3D建模軟件，一定用過SU、Rhino吧，我們在使用后不久，就能清晰的感受到它們的核心邏輯，比如SU的推拉，Rhino的曲面建模等，進(jìn)而能夠舉一反三的學(xué)會相關(guān)功能，使軟件的學(xué)習(xí)變得更簡單更直覺。那么怎樣的功能設(shè)計才能打造出軟件的核心邏輯，讓其在使用時更加符合用戶的直覺？

為了得到以上問題的答案，我們進(jìn)行了SU和Revit這兩款建筑領(lǐng)域主流軟件的使用，感受兩款軟件在直覺設(shè)計方面的表現(xiàn)，進(jìn)而找到了一些設(shè)計原則指導(dǎo)我們在實際業(yè)務(wù)中應(yīng)用。

充分了解你的用戶

每個人在自己生活的世界里，都會形成自己的一些認(rèn)知，這個前面也已經(jīng)介紹過。所以要充分了解用戶的知識、技能、經(jīng)驗，盡可能減少用戶當(dāng)前具備知識與完成目標(biāo)所需具備的知識之間的Gap。當(dāng)用戶已具備的知識和完成目標(biāo)需要的知識之間的差距越小，越符合用戶的直覺，越容易實現(xiàn)目標(biāo)。

SU和Revit都是充分了解自己的用戶，基于用戶群體的知識、技能、經(jīng)驗等特點，去打造自己軟件的核心邏輯，符合目標(biāo)用戶群體的使用直覺。

▽

SU的Slogan 是“3D for Everyone“，人人可用。他的用戶群體非常廣泛，所以它是一個業(yè)務(wù)屬性較弱的工具，界面設(shè)計和操作使用上更簡單，普適性和靈活性更強(qiáng)。使用面作為基本單元建模，推拉面成體，推推拉拉就可以快速完成建模。對于小白來說很容易上手。

Revit

▽

Revit的用戶主要是專業(yè)的建筑師，場景聚焦在建筑相關(guān)領(lǐng)域，所以它是一個業(yè)務(wù)屬性較強(qiáng)的工具，將更多的業(yè)務(wù)場景包含在里面。比如標(biāo)高、工作平面以及模塊化的構(gòu)件等，這樣的設(shè)定對于建筑背景的用戶來說，可以更符合他們的已有認(rèn)知。

將從物理世界和文化環(huán)

前面反復(fù)提到過過，用戶總是利用她在物理和文化環(huán)境中的經(jīng)驗來了解她通過界面可以采取哪些行動。因此我們需要熟知用戶已有的這些經(jīng)驗，并考慮到設(shè)計中。

通過聯(lián)想或類比，將物理世界的經(jīng)驗運(yùn)用到數(shù)字產(chǎn)品設(shè)計中，使得全新的事物變得熟悉。

▽

SU的圖標(biāo)非常直觀好懂，比如畫筆、橡皮擦、油漆桶、量尺、放大鏡、材質(zhì)刷、垃圾桶等等，圖標(biāo)的語意和其在物理世界的功能是相符的，哪怕是第一次接觸建模軟件的人，只看圖標(biāo)也能大概猜出對應(yīng)的功能。

Revit

▽

Revit將物理世界中房子映射到設(shè)計中。比如像墻、門、窗、柱、屋頂?shù)?，這是作為一個房子基本組成結(jié)構(gòu)，對于建筑師來言，非常熟悉。所以在軟件設(shè)計中，功能也是基于這種具象的構(gòu)件分類的，在用戶使用之前，內(nèi)心已經(jīng)有了房子的認(rèn)知，從而也能在產(chǎn)品中找到對應(yīng)的功能，理解成本很低。

結(jié)合用戶在已有的文化環(huán)境中獲得的認(rèn)知與經(jīng)驗：比如在類似產(chǎn)品中或你的產(chǎn)品所教給他的一些知識、經(jīng)驗，并保持這些經(jīng)驗的一致性。

▽

很好的匹配用戶已經(jīng)存在的認(rèn)知。提及SU就會想到它的推拉交互，推拉面成體。一方面它底層的點線面邏輯是我們學(xué)習(xí)數(shù)學(xué)或繪畫最基礎(chǔ)的知識，幾乎人人都知道；另一方面推拉的操作也是和我們已有的推敲形體的過程體驗是一致的，我們在繪制草圖時，會在紙上勾勾畫畫，涂涂抹抹，這跟在SU上推推拉拉有異曲同工之妙，我們使在用它時能夠享受手繪一般的樂趣，很難忘記這個操作。

Revit

▽

同為Autodesk公司產(chǎn)品，Revit的用戶與Autocad有著大量的重疊，因此在交互上也延用了不少CAD的固有邏輯，將用戶在CAD獲得的認(rèn)知與經(jīng)驗沿用在這里。與AutoCAD一樣，Revit快捷鍵

也

是該命令英文單詞的第1個或前面2個字母，這使得用戶無需再學(xué)習(xí)。

以及為了讓用戶切換軟件成本最小，Revit中還支持一個指令可以設(shè)置多個快捷鍵，這樣可以兼容喜歡自定義快捷鍵的高階用戶的習(xí)慣。例如在AutoCAD里習(xí)慣用Ctrl+1 呼出屬性面板，而如果按 Revit 快捷鍵的邏輯則應(yīng)該是"屬性"英文取用 PP，對于已熟悉AutoCAD操作的用戶來說，這么高頻的指令改變會造成極大的不適應(yīng)，默認(rèn)兼容多個快捷鍵就是非常優(yōu)雅的解法。

用戶認(rèn)知和行為要足夠簡單

關(guān)于1+1=？，大家看到后會自然而然的想到答案；28×4=？，稍加思索也能給出答案；那么3927÷23=？，看到這個問題，可能幾乎沒有人想要解開了。有些問題無意識的解開了，有些問題看到就想放棄解答。由此可見改變?nèi)藗冃袨榉绞降耐ǔＪ悄芊褡銐蚝唵魏腿菀?，?dāng)眼前的問題復(fù)雜時，人們不會試圖解決它。

▽

吸附非常的自然。當(dāng)我想移動到某個位置的時候，很自然將鼠標(biāo)靠近目標(biāo)對象，就會幫我精準(zhǔn)的吸附到對應(yīng)的位置

補(bǔ)面非常簡單。當(dāng)形體發(fā)生破面的時候，自然的想要繪制線去補(bǔ)全，當(dāng)我沿著要補(bǔ)全的路徑繪制兩個點的時候，整個面被補(bǔ)好了。

5、實戰(zhàn)：應(yīng)用最佳設(shè)計原則

將我們在建模軟件中學(xué)習(xí)到的有助于直覺設(shè)計的內(nèi)容進(jìn)行總結(jié)，得出幾條原則，并將這些設(shè)計原則應(yīng)用到實踐當(dāng)中，指導(dǎo)我們進(jìn)行設(shè)計。

心理學(xué)中也提到，人的大腦處理不同的信息時所消耗的腦力資源是不同的，他們的排序是認(rèn)知>視覺>行動。用戶花費(fèi)的腦力資源要多于點擊按鈕或移動鼠標(biāo)時（動作負(fù)荷）。所以我們在設(shè)計的時候，首先要從認(rèn)知上降低用戶的認(rèn)知負(fù)擔(dān)，其次在行為上確保操作絲滑順暢。

認(rèn)知上，降低認(rèn)知負(fù)擔(dān)

提升信息的識別性。

比如位置、信息分組的邏輯、顏色、比例等的使用等。作為別墅設(shè)計軟件，在進(jìn)行功能分類時，要以用戶使用的流程、場景，識別的效率等為依據(jù)進(jìn)行合理分組。

提高和用戶已有認(rèn)知的匹配。

作為別墅設(shè)計軟件，設(shè)計要與用戶已有的對別墅對房子的認(rèn)知相匹配。比如檐口線、浮雕、墻裙等構(gòu)件，人們在現(xiàn)實中的房子中都會見到，只是不熟知這些叫法。因此我們采用建造一個真實小房子的做法，當(dāng)用戶點擊某個構(gòu)件，對應(yīng)的構(gòu)件就會在房子上高亮，用戶瞬間就會明白，哦原來是它，跟已有的認(rèn)知匹配上了，會有一種恍然大悟的感覺。同時也讓用戶大概知道這個構(gòu)件位于房子的哪個位置，對后續(xù)的操作有預(yù)期，知道要擺在哪個位置。

保持醫(yī)學(xué)認(rèn)知的一致性。

任何產(chǎn)品都很難做到匹配用戶已有的所有認(rèn)知，總會有一些內(nèi)容是需要重新學(xué)習(xí)獲得的，那么就要保證我們教給他的這些認(rèn)知邏輯始終一致，讓用戶能做到舉一反三。作為別墅設(shè)計軟件，用戶要完成一個完整房子的建造，需要用到20+的構(gòu)件模塊，我們希望用戶學(xué)會使用一個構(gòu)件之后，就不需要再學(xué)習(xí)，能觸類旁通的使用同類構(gòu)件。因此歸納出通用操作流程，找到相對統(tǒng)一的方式，串聯(lián)起我們用戶的心智。

行為上，讓操作絲滑順暢

提供場景化的行為設(shè)計，并將操作聚焦在手邊。

在我們的別墅設(shè)計軟件中，當(dāng)用戶要修改老虎窗和飄窗的時候，如果看到這個窗戶的樣式不是自己想要的，可能會想去繪制。按照我們現(xiàn)有的流程，用戶要先去左側(cè)面板找到自由繪窗入口，然后再選擇要在哪個面上繪制，操作流程是有點繞的。后面我們就想，用戶要修改這個窗子的時候，直覺上會去點擊它，那么在選中這個對象的時候，在手邊提供自由繪窗的入口，讓他能夠快速的綁定這個對象去繪制窗戶，操作上順暢了很多。

一次只聚焦做一件事情，減少其他干擾。

我們現(xiàn)在的大部分操作，都是是激活命令后，左側(cè)面板還在。觀察到很多新用戶在激活了功能后，不知道下一步需要干什么。因為界面上需要他關(guān)注的事情太多了。所以，我們嘗試用戶在激活功能后，將當(dāng)前步驟中不需要他關(guān)注的面板隱藏，聚焦到他當(dāng)前需要做的事情上面去。

操作要足夠簡單，簡單到不需要有太多思考，是一個自然而然的行為。

以下介紹的是我們的照片還原功能，對于外墻漆、門窗等用戶，他們可以現(xiàn)場拍好房子照片，導(dǎo)入后基于照片還原出別墅方案，再進(jìn)行后續(xù)的外立面和門窗設(shè)計。最初，我們需要用戶手動擺放兩組消逝線去確定透視角度、然后調(diào)整比例尺、在尺子上選取點劃分樓層、拖拽點調(diào)整邊界、通過輸入開間數(shù)量確定開間。整個過程比較復(fù)雜，也涉及很多專業(yè)的概念，用戶不知道該如何操作。

后面優(yōu)化后，我們結(jié)合算法識別出照片中的房子，默認(rèn)給一個box,用戶通過拖動box上的角點和邊線去調(diào)整整個形體。因為用戶對box的概念是熟悉的，拖拽box去擬合背后的照片就變得容易的多。樓層和開間的劃分也采用這種切豆腐塊的方式，用戶一下一下去切就好。不用再去輸入數(shù)字，想象會是什么樣子。而比例尺只需要用戶輸入他想要的1樓的高度即可確定。優(yōu)化后，生成方案的轉(zhuǎn)化率提升了將近20%。

6、小結(jié)

直覺設(shè)計需要用戶看到產(chǎn)品時產(chǎn)生一種熟悉感，但是這種熟悉感判斷起來并不簡單，其中一部分人熟悉并不代表所有人都熟悉。所以設(shè)計師需要充分了解他們的用戶，了解產(chǎn)品的市場，并充分獲取用戶熟悉內(nèi)容的信息才有助于作出符合直覺設(shè)計的決策。

做出符合直覺的設(shè)計是困難的，需要充分考慮用戶在物理世界和文化環(huán)境中獲得的知識和經(jīng)驗，并將其應(yīng)用到具體的設(shè)計實踐中，也就是用戶的心智模型和產(chǎn)品概念模型達(dá)到基本吻合甚至去塑造與產(chǎn)品概念模型一致的用戶心智模型。

蘋果公司創(chuàng)始人兼前首席執(zhí)行官史蒂夫·喬布斯解釋說：“我們設(shè)計中最重要的是，必須讓事情直觀明顯。

建議每一位設(shè)計師同學(xué)也多去感受和認(rèn)識自己的知道，尤其是首次打開某個網(wǎng)站時，要更加關(guān)注自己的視覺動線和心理感受、無意識產(chǎn)生的操作行為等。同時也不要讓競品變成你的直覺，始終去思索有沒有體驗更加友好、創(chuàng)新的交互方式。

當(dāng)然，連續(xù)的直覺操作也可能會讓用戶覺得疲倦，可以適時考慮引入驚喜設(shè)計，為用戶打造Amazing的感受。

去認(rèn)識和感受自己的直覺
不要讓競品的設(shè)計變成你的直覺
連續(xù)的直覺設(shè)計也可能也可能會給用戶帶來疲勞和厭倦，需要考慮在適當(dāng)?shù)臅r候給用戶進(jìn)喜設(shè)計。

本文在以下書籍和文章中予以引用，同時也推薦大家閱讀，想必大家對直覺設(shè)計會有更加深刻的認(rèn)知和理解。

注意：文中數(shù)據(jù)皆為演示數(shù)據(jù)，非業(yè)務(wù)真實數(shù)據(jù)

參考書籍：

《創(chuàng)意選擇》
《福格行為模型》
《一目了然-Web軟件顯性設(shè)計之路》
《峰值體驗-影響用戶決策的關(guān)鍵時刻》
《任天堂的體驗設(shè)計-創(chuàng)造不知不覺打動人心的體驗》
《玄機(jī)設(shè)計學(xué)：改變?nèi)藗冃袨榈膭?chuàng)意構(gòu)思法》

參考文章：

Intuitive UX design an approach beyond usability
https://uxdesign.cc/the-power-of-intuition-designing-beyond-usability-2899cb37f98a
https://www.interaction-design.org/literature/topics/intuitive-design
Intuitive Web Design: How to Make Your Website Intuitive to Use

作者：藍(lán)胖、瑤一

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

評論(0) 瀏覽(90)

172024-10

善用設(shè)計洞見，提升設(shè)計效用

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

引言

好的設(shè)計師不僅僅要有專業(yè)能力，更重要的是與產(chǎn)品達(dá)到同頻，最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。

目前設(shè)計行業(yè)的現(xiàn)狀，大部分設(shè)計師還停留在設(shè)計思維的角度，存在一些和業(yè)務(wù)格格不入的情況，只關(guān)注好不好看，做一個交互原型的美化者...

自己做了很多，但是與實際脫節(jié)。出了很多個方案，產(chǎn)品（或運(yùn)營/商務(wù)伙伴）覺得沒什么變化；打磨了很多細(xì)節(jié)和創(chuàng)新點，產(chǎn)品卻只想快速上線……

設(shè)計師自己的工作被各種“非專業(yè)”的指導(dǎo)意見干擾；而其他職崗伙伴眼里，我們的付出，卻變成了一種“設(shè)計師的自High”。

究其原因，還是把以用戶思維去進(jìn)行設(shè)計。

想要改變這樣的狀態(tài)，最核心的是思維轉(zhuǎn)變，從技能導(dǎo)向的思考方式變?yōu)閮r值導(dǎo)向的思考方式。

本文主要從講述，如何通過方法，在項目進(jìn)入期獲得有效設(shè)計洞見，提高設(shè)計效用，帶來客戶價值（用戶價值）。

什么是設(shè)計洞見？

先舉一個例子：如何做一個新款剃須刀產(chǎn)品？

飛利浦這些大公司，給出的答案是更好的刀頭，更貼合面部，更安全和更容易清洗，一個黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實誕生了。

但是有一個很有意思的公司，給出了另一份答案：極簡造型、合金材質(zhì)、超 mini 尺寸和豐富配色，最重要的是：

于是 2019 年，這個疫情開始的時間，這家剃須刀橫空出世。

這款產(chǎn)品獲得成功的原因，本質(zhì)上就是產(chǎn)品的設(shè)計者帶著更高、更廣的視角，洞見了“剃須刀不僅是一個工具，它更可以成為一種禮物”這個更深層次的客戶需求，打破現(xiàn)有市場概念，獲得成功。

——如果說，設(shè)計洞察是發(fā)現(xiàn)和理解問題的能力，是設(shè)計師在研究和解決問題時所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計洞見可以幫助設(shè)計師更好地識別問題、提出創(chuàng)新解決方案，并為設(shè)計師提供思考問題和做出決策的指導(dǎo)。

Brown.Tim在《設(shè)計思考改造世界》中說："未來的設(shè)計師將扮演科技的詮釋者（洞見能力）,人性的引領(lǐng)者（觀察能力）,感性的創(chuàng)造者與品位的營造者（同理心）的角色"。

通過設(shè)計洞見，可以讓我們看更高、想更全，與業(yè)務(wù)貼合更緊密，讓設(shè)計得到認(rèn)可，產(chǎn)生業(yè)務(wù)共鳴，賦予用戶/客戶價值，才能讓設(shè)計變的更有價值。

如何獲得設(shè)計洞見？

接下來我們將通過一一探索獲得洞見的三個階段。

第一階段：設(shè)計洞察

洞察階段的核心，是獲得現(xiàn)象背后的動因。是一個獲得信息與問題的階段

產(chǎn)品的設(shè)計產(chǎn)出是一個抽象到具象化的過程，在設(shè)計和迭代的過程中，會經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計洞見有效過去在更前置的節(jié)點，才能產(chǎn)生更有效的價值。

所以我們首先做的是：“提升設(shè)計的主動性”，在項目的進(jìn)入期最大化實現(xiàn)設(shè)計洞見的價值。

項目進(jìn)入期通常會有一個通病，即問題泛化，無法具象。在一個比較“泛”的問題下，挖掘目的/目標(biāo)，找到問題最簡單的辦法就是“調(diào)查分析”：了解行業(yè)生態(tài)與業(yè)務(wù)背景，確定或推測自身產(chǎn)品的發(fā)展方向，分析定位與關(guān)注指向-Pointer（即當(dāng)下會產(chǎn)生哪些具有指向性的任務(wù)方向）。

這個階段，我們的主要目的是通過最初始的源頭數(shù)據(jù)，正確的了解業(yè)務(wù)或者項目的背景，避免因信息傳遞所產(chǎn)生的認(rèn)知誤差，以免發(fā)生“指向”偏差。而要做到這一點，洞察就不能僅僅停留在表面的觀察，詢問，記錄和數(shù)據(jù)分析，而要隨時通過聯(lián)想和反思來回歸本質(zhì)——客戶（用戶）和場景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。

1. 知識準(zhǔn)備

了解各種市場調(diào)研的方法與過程，對調(diào)研方法進(jìn)行分類。

如下圖所示，（戴力農(nóng)《設(shè)計調(diào)研》）橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的（人們的行為）還是主觀的（人們的目標(biāo)和觀點），縱軸區(qū)分了該方法的類型是定性的還是定量的。

2. 選擇正確的調(diào)研辦法

不同的產(chǎn)品生命周期，對應(yīng)不同的調(diào)研方法，根據(jù)產(chǎn)品的不同時期選擇合適屬性的調(diào)研辦法。

互聯(lián)網(wǎng)設(shè)計師的常規(guī)調(diào)研手法，受困于資源，多是在桌面進(jìn)行。我們通過二手資料研究、競品和線上走查獲得問題，進(jìn)行虛擬對象的研究，極易發(fā)生偏差。

拓新場景和成長初期，通常資源緊張且缺乏具象客戶，很難進(jìn)行大樣本調(diào)研數(shù)據(jù)挖掘。對于設(shè)計師來說，在了解業(yè)務(wù)信息，對稱業(yè)務(wù)方向時可以依賴其他職崗提供的資料進(jìn)行研究；但是對于設(shè)計息息相關(guān)的關(guān)鍵點，建議還是通過自己實地考察、焦點實驗去獲取真實的體驗信息。

成長后期與成熟期，關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量，縮短與頭部產(chǎn)品之間的差距，實現(xiàn)產(chǎn)品的高增長。大樣本的用戶與競品調(diào)研可以幫助我們更可觀的看到真實的客戶需求。再輸入到我們的日常桌面研究中去。

3. 掌握信息收集、數(shù)據(jù)統(tǒng)計分析方面的知識

4. 了解調(diào)研的流程

確定調(diào)研目標(biāo) → 制定調(diào)研計劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請調(diào)研對象&執(zhí)行調(diào)研過程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。

調(diào)研的實際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了，也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。

得到大量信息，進(jìn)行吸收、理解和處理后，我們將收獲大量的問題。接下來就是如何解決問題。

第二階段：定位價值

定位價值是洞見的關(guān)鍵階段，是能給業(yè)務(wù)帶來價值的核心，是可以改變客戶（用戶）習(xí)慣和行為的關(guān)鍵博弈。

那么如何定位價值呢？

1. 問題整合，提煉與確認(rèn)指向

將調(diào)研獲得的問題進(jìn)行歸納與整理，如簡單的 Card Sorting ，確認(rèn)所有問題的核心指向（Pointer）。

接下來就需要不停的切換指向，并深入每個關(guān)鍵 key 下進(jìn)一步拆解，確定你收獲的是否是一個真正且重要的 Pointer。

EG 海底撈 ▽

餐廳高峰期經(jīng)常人滿為患，排隊體驗差。常規(guī)餐廳的做法：約束更快的出餐、收臺，拆分更多的餐位，引導(dǎo)拼桌服務(wù)等等等等..短期可能會帶來改變，但是達(dá)到一個極限點以后，就很難再提升了。

類似的場景還有曾經(jīng)的外賣小哥：30 分鐘以內(nèi)還能更快嗎？答案是：很難。

那怎么讓客人愿意多等待一點，或者不覺得“等待完全是無價值無意義的”？

海底撈選擇在你排隊等待的時候，提供免費(fèi)美甲、護(hù)手、零食等等各種周到服務(wù)，讓客人等待的過程中不至于無事可做。獲得了認(rèn)可，贏得了口碑。

如果你留心觀察，你會發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個打招呼的氣泡Hi，來強(qiáng)調(diào)服務(wù)為先的品牌定位，解決的是情感需求中的「過程體驗」。

2. PDS（問題-檢測-研究）調(diào)查分析

PSD 調(diào)查分析的核心思想，是調(diào)查客戶（用戶）與預(yù)期（行為/認(rèn)知）的偏差，或不滿與問題來發(fā)現(xiàn)洞見。

EG BBDO反煙推廣 ▽

BBDO 的英國公司層接到過這樣一個推廣任務(wù)：是讓年輕人，特別是十幾歲的小女孩兒戒煙。

其實這個問題特別棘手。一方面，吸煙是一個生理上癮的事情，要戒掉很困難；另一方面，吸煙最大的問題是有害健康，但是對于年輕人來說在這個角度的感觸不深，很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案，但是借助洞見以后就不一樣了。

通過了解更多事實，看目標(biāo)群體關(guān)注什么，哪些問題對我們要實現(xiàn)的目標(biāo)有影響。在這個案例里，BBDO的做法是派了一個年輕的女助理在購物區(qū)找了一家咖啡館，連著5天坐在那里聽那里的女孩兒在聊些什么。

結(jié)果這5天內(nèi)她就發(fā)現(xiàn)，這些十幾歲的女生大部分聊的是買衣服、做頭發(fā)、選什么樣的指甲油和減肥藥，怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時候，洞見就自己呼之欲出了：原來對于這些無所事事，十幾歲的年輕女孩而言，沒有什么比她們看起來漂亮更重要了。

因此，你不需要告訴她吸煙可能縮短壽命，你只要告訴她一件事情：“吸煙會讓你變得難看”，就足夠讓她戒煙了。

所以，想要獲得洞見，就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過調(diào)研發(fā)現(xiàn)真正的問題時，洞見往往就會產(chǎn)生。

3. 規(guī)避技能導(dǎo)向

設(shè)計的職崗角色是單薄的。我們一定要帶著指針與方案，多職崗評估價值與可執(zhí)行度，這是一個設(shè)計前期任務(wù)的過程。它的輸出可能為設(shè)計Demo、簡單的筆記、方案的列表，或者是一個說明效果的故事版……不一定具備完整的落地性，但是可以讓伙伴更好的理解你的觀點。

第三階段：系統(tǒng)輸出

設(shè)計的解決方案要從起心動念、貫穿至產(chǎn)、研、運(yùn)營甚至上市宣傳的全路徑方案。

在分析階段我們通過“3步走”的視角思維，明確了任務(wù)重點同時幫助我們明確不同指針的優(yōu)先級。

設(shè)計師要考慮的維度不僅僅在用戶體驗層面，更應(yīng)在執(zhí)行時候要考慮業(yè)務(wù)的實際需求，考慮上下游不同職能的工作內(nèi)容，始終保持全局與系統(tǒng)的思維，要從客戶價值出發(fā)，回落到企業(yè)成本中去。

通過設(shè)計洞見，從更本質(zhì)的層面去洞悉問題，重新定義和設(shè)計任務(wù)。

與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計。

讓你的設(shè)計方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù)，提升設(shè)計的效用。讓“提升體驗”這件事真正落地。

改變我們看世界的方式，亦改變世界看待我們的方式。

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

評論(0) 瀏覽(49)

162024-10

UI設(shè)計適應(yīng)多設(shè)備的界面優(yōu)化策略

藍(lán)藍(lán)設(shè)計的小編 seo優(yōu)化

在如今這個科技飛速發(fā)展的時代，用戶使用的設(shè)備種類繁多，從智能手機(jī)、平板電腦到臺式電腦，甚至智能手表和車載系統(tǒng)。這就給 UI 設(shè)計師帶來了巨大的挑戰(zhàn)——如何讓設(shè)計適應(yīng)不同尺寸和性能的設(shè)備，提供一致且優(yōu)質(zhì)的用戶體驗？下面，讓我們深入探討UI設(shè)計適應(yīng)多設(shè)備的界面優(yōu)化策略。

評論(0) 瀏覽(113)

162024-10

UI設(shè)計流程詳細(xì)介紹

藍(lán)藍(lán)設(shè)計的小編 seo優(yōu)化

在當(dāng)今數(shù)字化的時代，UI設(shè)計的重要性日益凸顯。一個優(yōu)秀的用戶界面不僅能提升用戶體驗，還能為產(chǎn)品帶來更高的競爭力。那么，UI 設(shè)計究竟是如何一步步實現(xiàn)的呢？接下來，就為您詳細(xì)介紹 UI 設(shè)計的流程。

第一步，需求分析。這是整個設(shè)計流程的基石。設(shè)計師需要與產(chǎn)品經(jīng)理、開發(fā)團(tuán)隊以及相關(guān)利益者進(jìn)行深入的溝通，了解產(chǎn)品的目標(biāo)、用戶群體、功能需求等。例如，如果是設(shè)計一款在線教育 APP，就需要明確是針對哪個年齡段的學(xué)生，主要提供哪些課程，以及希望達(dá)到怎樣的教學(xué)效果。

第二步，用戶研究。這一步旨在深入了解目標(biāo)用戶的行為、習(xí)慣、偏好和痛點。通過用戶訪談、問卷調(diào)查、觀察等方法，收集大量的數(shù)據(jù)和信息。比如，研究發(fā)現(xiàn)年輕用戶更喜歡簡潔、時尚的界面，而老年用戶可能更注重字體的大小和清晰度。

第三步，信息架構(gòu)設(shè)計。根據(jù)需求和用戶研究的結(jié)果，規(guī)劃產(chǎn)品的信息架構(gòu)。確定頁面的層級關(guān)系、菜單結(jié)構(gòu)、導(dǎo)航欄等，讓用戶能夠輕松地找到他們需要的信息。就像搭建房屋的框架一樣，這一步為后續(xù)的設(shè)計奠定了基礎(chǔ)。

第四步，原型設(shè)計。使用工具創(chuàng)建初步的界面原型，展示頁面的布局、元素的位置和交互方式。這是一個快速迭代的過程，可以及時發(fā)現(xiàn)和解決問題。原型可以是簡單的線框圖，也可以是具有一定交互效果的高保真原型。

第五步，視覺設(shè)計。這是 UI設(shè)計中最具創(chuàng)意和表現(xiàn)力的環(huán)節(jié)。設(shè)計師根據(jù)品牌風(fēng)格和用戶喜好，選擇合適的色彩、字體、圖標(biāo)、圖片等元素，營造出獨特而吸引人的視覺效果。比如，一款運(yùn)動類 APP 可能會采用充滿活力的色彩和動感的圖標(biāo)。

第六步，交互設(shè)計。關(guān)注用戶與界面之間的互動過程，確保操作流程順暢、自然。例如，按鈕的點擊反饋、頁面的跳轉(zhuǎn)效果等，都要讓用戶感到舒適和便捷。

第七步，測試與評估。邀請真實用戶進(jìn)行測試，收集他們的反饋和意見。通過數(shù)據(jù)分析和用戶評價，評估設(shè)計的效果，發(fā)現(xiàn)存在的問題并進(jìn)行優(yōu)化。

第八步，交付與跟進(jìn)。將設(shè)計成果交付給開發(fā)團(tuán)隊，并在開發(fā)過程中保持溝通，確保設(shè)計的實現(xiàn)效果與預(yù)期相符。

在整個 UI設(shè)計流程中，團(tuán)隊協(xié)作至關(guān)重要。設(shè)計師需要與開發(fā)人員、產(chǎn)品經(jīng)理、測試人員等密切配合，不斷優(yōu)化和完善設(shè)計。

總之，UI設(shè)計是一個復(fù)雜而有序的過程，每個環(huán)節(jié)都相互關(guān)聯(lián)、相互影響。只有通過嚴(yán)謹(jǐn)?shù)牧鞒毯途牡脑O(shè)計，才能打造出令人滿意的用戶界面，提升產(chǎn)品的價值和用戶的滿意度。

評論(0) 瀏覽(89)

162024-10

揭秘數(shù)據(jù)大屏：如何構(gòu)建高效的數(shù)據(jù)可視化系統(tǒng)

藍(lán)藍(lán)設(shè)計的小編 seo優(yōu)化

在當(dāng)今數(shù)字化的商業(yè)世界中，數(shù)據(jù)大屏已經(jīng)成為了企業(yè)洞察業(yè)務(wù)狀況、做出明智決策的重要工具。然而，構(gòu)建一個高效的數(shù)據(jù)可視化系統(tǒng)并非易事，它需要綜合考慮諸多因素，從數(shù)據(jù)的采集與整理，到可視化設(shè)計的精妙構(gòu)思，每一個環(huán)節(jié)都至關(guān)重要。

首先，數(shù)據(jù)的準(zhǔn)確性和完整性是構(gòu)建高效數(shù)據(jù)可視化系統(tǒng)的基石。這意味著我們需要從各種數(shù)據(jù)源中精確地采集數(shù)據(jù)，并進(jìn)行嚴(yán)格的清洗和驗證，以確保數(shù)據(jù)的質(zhì)量。只有基于準(zhǔn)確無誤的數(shù)據(jù)，后續(xù)的分析和可視化才有意義。

在數(shù)據(jù)處理方面，強(qiáng)大的數(shù)據(jù)分析工具和算法是必不可少的。它們能夠幫助我們從海量的數(shù)據(jù)中挖掘出有價值的信息，識別出潛在的模式和趨勢。例如，通過聚類分析可以將相似的數(shù)據(jù)分組，而關(guān)聯(lián)規(guī)則挖掘則可以發(fā)現(xiàn)不同數(shù)據(jù)之間的內(nèi)在聯(lián)系。

接下來，就是可視化設(shè)計的關(guān)鍵環(huán)節(jié)。一個好的可視化設(shè)計應(yīng)該簡潔明了，避免過多的復(fù)雜元素和混亂的布局。顏色的選擇也尤為重要，應(yīng)該根據(jù)數(shù)據(jù)的性質(zhì)和重要程度進(jìn)行合理搭配，以突出重點并引導(dǎo)用戶的注意力。

交互性是現(xiàn)代數(shù)據(jù)可視化系統(tǒng)的一個重要特征。用戶應(yīng)該能夠通過簡單的操作，如點擊、縮放、篩選等，來深入探索數(shù)據(jù)。例如，當(dāng)用戶點擊某個圖表中的特定數(shù)據(jù)點時，能夠彈出詳細(xì)的相關(guān)信息，或者能夠動態(tài)切換不同的數(shù)據(jù)維度進(jìn)行比較。

此外，為了確保數(shù)據(jù)可視化系統(tǒng)的高效運(yùn)行，性能優(yōu)化也是不容忽視的。對于大規(guī)模的數(shù)據(jù)，采用合適的數(shù)據(jù)壓縮技術(shù)和緩存策略，可以顯著提高數(shù)據(jù)的加載速度和響應(yīng)時間。

在實際構(gòu)建過程中，團(tuán)隊協(xié)作也起著關(guān)鍵作用。數(shù)據(jù)分析師、設(shè)計師、開發(fā)人員等需要緊密合作，充分交流各自的專業(yè)見解和需求。同時，還需要不斷收集用戶的反饋，根據(jù)實際使用情況對系統(tǒng)進(jìn)行持續(xù)的優(yōu)化和改進(jìn)。

以一家金融公司為例，他們構(gòu)建了一個實時監(jiān)控投資組合的數(shù)據(jù)大屏。通過清晰直觀的可視化展示，投資經(jīng)理能夠迅速把握市場動態(tài)，及時調(diào)整投資策略，從而取得了顯著的業(yè)績提升。

總之，構(gòu)建高效的數(shù)據(jù)可視化系統(tǒng)是一個復(fù)雜但充滿價值的任務(wù)。它需要我們在數(shù)據(jù)處理、可視化設(shè)計、性能優(yōu)化和團(tuán)隊協(xié)作等方面下足功夫，以打造出一個能夠真正為企業(yè)決策提供有力支持的強(qiáng)大工具，揭開數(shù)據(jù)背后的神秘面紗，引領(lǐng)企業(yè)走向成功的未來。

評論(0) 瀏覽(94)

162024-10

色彩心理學(xué)在 UI設(shè)計中的應(yīng)用

藍(lán)藍(lán)設(shè)計的小編 seo優(yōu)化

在當(dāng)今數(shù)字化的世界中，UI 設(shè)計扮演著至關(guān)重要的角色，而色彩心理學(xué)則是其中隱藏的魔法鑰匙。它悄然影響著用戶的情感、行為和決策，為 UI 設(shè)計注入了靈魂與魅力。

評論(0) 瀏覽(93)

162024-10

UI 設(shè)計入門指南

藍(lán)藍(lán)設(shè)計的小編 seo優(yōu)化

在這個數(shù)字化的時代，UI設(shè)計無疑成為了一門備受矚目的熱門技藝。無論是追求創(chuàng)意表達(dá)的愛好者，還是渴望在職業(yè)道路上開拓新領(lǐng)域的進(jìn)取者，UI 設(shè)計都為大家敞開了一扇充滿機(jī)遇與挑戰(zhàn)的大門。今天，就讓我們一同踏上 UI 設(shè)計的入門之旅，探索其中的奧秘與精彩。

首先，咱們得搞清楚 UI 設(shè)計到底是啥。簡單來說，UI 設(shè)計就是用戶界面設(shè)計，它關(guān)乎著用戶與產(chǎn)品之間的交互體驗。想象一下，你打開一個 APP，那些精美的圖標(biāo)、舒適的布局、和諧的色彩搭配，這一切都是 UI 設(shè)計師的精心杰作。

那么，要入門 UI 設(shè)計，第一步得掌握一些基本的設(shè)計工具。比如說，Photoshop 和 Sketch 這兩款軟件，那可是設(shè)計師們的左膀右臂。就拿 Photoshop 來說，它功能強(qiáng)大，能讓你隨心所欲地繪制、編輯圖像。而 Sketch 則在矢量圖形處理方面表現(xiàn)出色，特別適合移動端 UI 設(shè)計。

接下來，了解設(shè)計原則至關(guān)重要。比如，一致性原則，這意味著整個界面的風(fēng)格、顏色、字體等要保持統(tǒng)一，不能今天是這個樣，明天又變成那個樣，不然用戶會感到迷茫。還有可用性原則，一切設(shè)計都要以用戶能夠方便、快捷地使用為出發(fā)點。

色彩搭配也是 UI 設(shè)計中的一門大學(xué)問。據(jù)相關(guān)研究表明，恰當(dāng)?shù)纳蚀钆淠軌蛱岣哂脩舻臐M意度 30%以上。比如，藍(lán)色通常給人一種專業(yè)、信任的感覺，所以很多金融類 APP 會采用藍(lán)色為主色調(diào)。而紅色則能激發(fā)人的熱情和活力，常用于購物類 APP 來吸引用戶的注意力。

再說說字體選擇。字體的大小、粗細(xì)、風(fēng)格都會影響到整個界面的視覺效果和可讀性。一般來說，正文部分會選擇比較簡潔清晰的字體，而標(biāo)題則可以適當(dāng)夸張一些，突出重點。

要想真正入門 UI 設(shè)計，光有理論可不行，還得多多實踐?？梢詮哪７乱恍﹥?yōu)秀的作品開始，分析它們的設(shè)計思路和技巧，然后逐漸加入自己的創(chuàng)意。

總之，UI 設(shè)計的入門之路或許充滿挑戰(zhàn)，但只要你保持熱情，不斷學(xué)習(xí)和實踐，相信你一定能在這個領(lǐng)域綻放出屬于自己的光彩。讓我們一起勇敢地邁出第一步，去創(chuàng)造那些令人驚艷的用戶界面吧！

評論(0) 瀏覽(64)

首頁

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

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

用戶體驗一致性思考

打動人心的直覺設(shè)計

善用設(shè)計洞見，提升設(shè)計效用

UI設(shè)計適應(yīng)多設(shè)備的界面優(yōu)化策略

UI設(shè)計流程詳細(xì)介紹

揭秘數(shù)據(jù)大屏：如何構(gòu)建高效的數(shù)據(jù)可視化系統(tǒng)

色彩心理學(xué)在 UI設(shè)計中的應(yīng)用

UI 設(shè)計入門指南

分類

日歷

鏈接

個人資料

存檔