六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

首頁(yè)

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

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

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


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

藍(lán)藍(lán)設(shè)計(jì)(www.wnxcall.com )是一家專注而深入的界面設(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)的軟件開(kāi)發(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。

WechatIMG27.jpg

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

從對(duì)話到嵌入:多元場(chǎng)景AI形態(tài)淺析

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

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


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTYzMzkxNg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

用戶體驗(yàn)一致性思考

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

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


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

藍(lán)藍(lán)設(shè)計(jì)(www.wnxcall.com )是一家專注而深入的界面設(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)的軟件開(kāi)發(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。

WechatIMG27.jpg

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

 

打動(dòng)人心的直覺(jué)設(shè)計(jì)

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

前言
之所以對(duì)“直覺(jué)設(shè)計(jì)”產(chǎn)生興趣還要源于我們每次的設(shè)計(jì)評(píng)審,在跟其他設(shè)計(jì)師還有我們的業(yè)務(wù)方溝通時(shí),大家常常會(huì)問(wèn)到的且令人印象深刻的問(wèn)題是:
 
“用戶怎么知道點(diǎn)哪里?”、“這符合用戶直覺(jué)嗎?”
 
類似的靈魂拷問(wèn)涉及到用戶使用工具產(chǎn)品行為流程的每一步操作。作為設(shè)計(jì)師大家有時(shí)也會(huì)心生質(zhì)疑,“這么明顯用戶注意不到嗎?這么簡(jiǎn)單用戶不可能不會(huì)操作吧...”。
 
但是隨著我們的”新手體驗(yàn)官活動(dòng)“的逐步進(jìn)行,當(dāng)親自站在用戶面前觀察用戶是如何操作和理解工具時(shí),我們漸漸意識(shí)到小白用戶
 接觸-認(rèn)知-使用工具
的每一環(huán)都是至關(guān)重要的,即便是一個(gè)交互細(xì)節(jié)的設(shè)計(jì)都有可能帶來(lái)認(rèn)知和操作層面受阻,從而勸退用戶。
 
因此,我們想去了解什么樣的設(shè)計(jì)是符合用戶直覺(jué)的,是易用的,同時(shí)也想去了解主流3D建模軟件的核心建模邏輯(SU、Revit為代表)--于是開(kāi)始了“直覺(jué)設(shè)計(jì)”的研究以及“建模課程”的學(xué)習(xí)。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
 
1、什么是直覺(jué)設(shè)計(jì)?
首先來(lái)看什么是直覺(jué)設(shè)計(jì),直覺(jué)設(shè)計(jì)是指用戶無(wú)需進(jìn)行有意識(shí)的思考就可以立即理解并知道如何去使用產(chǎn)品。國(guó)外有不少的用戶研究機(jī)構(gòu)也專門(mén)定義過(guò)直覺(jué)設(shè)計(jì):
 
“在特定任務(wù)的背景下,技術(shù)系統(tǒng)可以直觀地使用,而特定用戶能夠有效地交互,而不是有意識(shí)地使用先前的知識(shí)。”– 用戶界面的直觀使用 (IUUI) 研究小組。一個(gè)由跨學(xué)科研究人員組成的團(tuán)隊(duì),致力于探索如何定義直觀的使用和界面。
 
為了方便大家更好的理解直覺(jué)設(shè)計(jì),我們先來(lái)看幾個(gè)例子:
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
 
案例1-玩具收納:小朋友在玩完玩具以后,把玩具擺的到處都是,如果發(fā)號(hào)施令告訴小朋友“去把玩具收拾起來(lái)”,小朋友通常不會(huì)去收拾。如果將收納設(shè)計(jì)成為一種小游戲,小朋友會(huì)自然而然的參與其中并且會(huì)覺(jué)得非常有趣。
案例2-公共環(huán)境衛(wèi)生:保持小便池的清潔,張貼告示語(yǔ)“注意保持清潔”大多是沒(méi)有用的。荷蘭的設(shè)計(jì)師在公共的男士小便池里設(shè)計(jì)了一個(gè)“蒼蠅”,利用人們的嫌惡心理會(huì)發(fā)現(xiàn)小便時(shí)會(huì)不由自主的對(duì)準(zhǔn)中心的位置,從而減少尿液四濺,維護(hù)公共環(huán)境衛(wèi)生。
案例3-公共設(shè)施:設(shè)有傳感器和揚(yáng)聲器的臺(tái)階,人們只要踩上去就能聽(tīng)到音樂(lè)聲,從而達(dá)到鼓勵(lì)人們爬樓梯的目標(biāo)。
案例4-工業(yè)產(chǎn)品設(shè)計(jì):很多耳熟能詳?shù)墓I(yè)產(chǎn)品中也運(yùn)用了直覺(jué)設(shè)計(jì),例如深澤直人的CD播放器,Apple的Vision OS系統(tǒng)等等。
案例5-游戲設(shè)計(jì):游戲中非常多的運(yùn)用了直覺(jué)設(shè)計(jì),比如超級(jí)馬里奧,塞爾達(dá),想必大家都深有感受。
 
通過(guò)上述案例我們發(fā)現(xiàn)其實(shí)直覺(jué)設(shè)計(jì)傳達(dá)出來(lái)是信息包含兩方面:用戶看到就能夠理解是什么,且能夠不由自主地產(chǎn)生行動(dòng)。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
 
看到這里,大家可能會(huì)好奇為什么會(huì)產(chǎn)生這種”直覺(jué)設(shè)計(jì)“?接下來(lái)讓我們一起來(lái)看看直覺(jué)設(shè)計(jì)是如何產(chǎn)生的。
 
2、直覺(jué)設(shè)計(jì)如何產(chǎn)生?
人的直覺(jué)設(shè)計(jì)是怎么來(lái)的?是天生的嗎?帶著這樣的疑惑,我們閱讀了相關(guān)書(shū)籍和文章。
 
先天視覺(jué)和經(jīng)驗(yàn)直覺(jué)
先天直覺(jué),也可以說(shuō)是”本我“,是最原始的”心理現(xiàn)實(shí)“,在個(gè)體從外部世界獲得經(jīng)驗(yàn)之前就存在的內(nèi)部世界,不需要經(jīng)過(guò)學(xué)習(xí)或訓(xùn)練。比如嬰兒時(shí)期的特征,希望立刻得到滿足、躲避痛苦、強(qiáng)大的求生意愿等。
 
經(jīng)驗(yàn)直覺(jué),巴普洛夫的實(shí)驗(yàn)想必大家都知道。有機(jī)體能夠把已有的經(jīng)驗(yàn)遷移到新的學(xué)習(xí)環(huán)境中去,從而擴(kuò)大學(xué)習(xí)范圍。
 
先天直覺(jué)一般對(duì)應(yīng)于人類的第一信號(hào)系統(tǒng),是建立在人的直接感覺(jué)上的,通過(guò)人的感覺(jué)(視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)等)而進(jìn)行的一種思維活動(dòng);經(jīng)驗(yàn)直覺(jué)(邏輯性直覺(jué)直覺(jué))思維雖然利用了人類的感性認(rèn)識(shí)(感覺(jué)、知覺(jué)、表象等)形式,但它絕不是僅僅停留在這一步上,而是超越了邏輯思維形式達(dá)到了更高一個(gè)層次上的思維。
 
從表面上看,邏輯性直覺(jué)的結(jié)果是以直觀的形式表現(xiàn)出來(lái)的,實(shí)際上它已經(jīng)在頭腦中進(jìn)行了邏輯程序的高度壓縮,迅速地越過(guò)了“理性認(rèn)識(shí)階段”,是簡(jiǎn)縮了整個(gè)邏輯思維過(guò)程的一種思維形式。
所以,邏輯性直覺(jué)既源于感性認(rèn)識(shí),又高于感性認(rèn)識(shí),是一種常常能在極短的時(shí)間內(nèi)完成,并能夠?qū)?wèn)題迅速作出回答的一種無(wú)意識(shí)的、躍進(jìn)式的直覺(jué)形式。
 
構(gòu)建直覺(jué),現(xiàn)有研究指出,分析加工和直覺(jué)加工兩者可能處于不斷的相互轉(zhuǎn)換之中。一方面,分析加工可以通過(guò)熟練化形成經(jīng)驗(yàn)圖式,從而減少認(rèn)知資源的消耗,并由此轉(zhuǎn)化為直覺(jué)加工;另一方面,當(dāng)直覺(jué)加工無(wú)法通過(guò)已有經(jīng)驗(yàn)解決新的問(wèn)題情境時(shí),又需要調(diào)動(dòng)更多的認(rèn)知資源并轉(zhuǎn)向分析加工,直到形成新的經(jīng)驗(yàn)圖式。
 
先天直覺(jué)大家都容易理解,接下來(lái)我們重點(diǎn)看一下經(jīng)驗(yàn)直覺(jué)是如何產(chǎn)生的?
 
經(jīng)驗(yàn)直覺(jué)的產(chǎn)生與人生存的環(huán)境密切相關(guān),所以這里包含兩個(gè)關(guān)鍵點(diǎn):物理世界(環(huán)境)和生活環(huán)境。
 
來(lái)自物理環(huán)境的經(jīng)驗(yàn)
物理環(huán)境主要包括我們生存的自然環(huán)境,以及我們與物理環(huán)境的互動(dòng)所形成的感官運(yùn)動(dòng)。人類在嬰兒時(shí)期就開(kāi)始體驗(yàn)和實(shí)驗(yàn)物理環(huán)境。這種體驗(yàn)建立在我們第一次拿著一個(gè)物體、第一次把它扔到地板上、第一次學(xué)會(huì)爬到我們最喜歡的玩具等時(shí)學(xué)到的基本感覺(jué)運(yùn)動(dòng)技能上。我們對(duì)物理世界的體驗(yàn)它已成為日常生活的一部分。經(jīng)過(guò)物理環(huán)境互動(dòng)所形成的直覺(jué)是跨越國(guó)界、且不會(huì)被遺忘的。
來(lái)自文化環(huán)境的經(jīng)驗(yàn)
通俗的講指社會(huì)文化環(huán)境。它包括人類通過(guò)其獲得的知識(shí)和技術(shù)開(kāi)發(fā)的所有物質(zhì)文化元素。例如,房屋、村莊、城鎮(zhèn)、公路和鐵路網(wǎng)絡(luò)、交通方式、工業(yè)單位、田野、醫(yī)院、體育場(chǎng)館、娛樂(lè)設(shè)施、市場(chǎng)、港口以及日常和特殊用途的物品。除此之外還包括價(jià)值觀念、道德信仰、語(yǔ)言、符號(hào)、審美觀念、風(fēng)俗習(xí)慣等各種規(guī)范。
 
例如播放圖標(biāo)“?”是許多文化中的人們?cè)谀贻p時(shí)學(xué)習(xí)符號(hào)的一個(gè)很好的例子。在任何可以使用媒體播放器的文化中,人們都知道 ? 圖標(biāo)的含義。它的直觀性幾乎與物理世界中的對(duì)象行為一致。
 
因此,在媒體播放器中,人們理所當(dāng)然的希望可以延續(xù)“?”符號(hào)的含義。來(lái)自文化環(huán)境的知識(shí)也可以變得很直觀,但是由于沒(méi)有來(lái)自物理世界的持續(xù)提醒之后,很容易被遺忘。
 
因此在提供直覺(jué)設(shè)計(jì)時(shí),應(yīng)盡量符合用戶從物理世界中獲得的經(jīng)驗(yàn)與技能。但如果我們的用戶群體是具有相同文化背景下的人群,符合文化環(huán)境的知識(shí)與經(jīng)驗(yàn)也可以作為直觀設(shè)計(jì)的決策依據(jù)。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
 
3、為什么要符合直覺(jué)設(shè)計(jì)?
給用戶留下良好的第一印象,助力產(chǎn)品贏得并且留下用戶。
當(dāng)我們開(kāi)始使用某款產(chǎn)品時(shí),用戶往往在幾秒內(nèi)就會(huì)產(chǎn)生第一印象并且往往會(huì)保持不變,少則幾分鐘多則十幾分鐘用戶就可感受到產(chǎn)品的價(jià)值。
 
渥太華卡雷頓大學(xué)的Gitte·Lindgaard和她的研究小組發(fā)現(xiàn):人類對(duì)事物的初始印象在50毫秒內(nèi)就會(huì)形成。研究小組準(zhǔn)備了一批要么極易入眼要么混亂不堪的網(wǎng)頁(yè),讓一批志愿者在快速變換中投票。雖然這些網(wǎng)頁(yè)以50毫秒每張的速度一閃而過(guò),但是研究發(fā)現(xiàn)他們的評(píng)價(jià)與長(zhǎng)時(shí)間觀察后的結(jié)果基本無(wú)異。
 
這就說(shuō)明了用戶的第一印象非常明確且重要,幫助用戶判斷出這是否是一個(gè)設(shè)計(jì)合理的網(wǎng)站。如果用戶停留時(shí)間再長(zhǎng)一點(diǎn),那么用戶足以判斷出網(wǎng)站上的信息是否是滿足自己需要的信息,從而影響用戶是否繼續(xù)停留下來(lái)去使用該網(wǎng)站。
 
更容易讓用戶達(dá)到心流狀態(tài)、沉浸式的使用產(chǎn)品,并且持續(xù)吸引用戶使用產(chǎn)品。
符合用戶直覺(jué)的、熟悉的操作模式,作為用戶直觀使用的基礎(chǔ),更容易產(chǎn)生積極的審美評(píng)價(jià)。相反,如果用戶的認(rèn)知流暢性受阻,則不太會(huì)產(chǎn)生正面積極的評(píng)價(jià)。簡(jiǎn)潔有力的設(shè)計(jì)會(huì)促使用戶再次使用產(chǎn)品,是保持產(chǎn)品吸引力的最佳方式。
 
4、如何使設(shè)計(jì)符合用戶直覺(jué)?
因?yàn)楣ぷ髦猩婕暗?D建模軟件的設(shè)計(jì),所以這部分將結(jié)合3D建模軟件來(lái)探討。
 
如果您接觸過(guò)3D建模軟件,一定用過(guò)SU、Rhino吧,我們?cè)谑褂煤蟛痪?,就能清晰的感受到它們的核心邏輯,比如SU的推拉,Rhino的曲面建模等,進(jìn)而能夠舉一反三的學(xué)會(huì)相關(guān)功能,使軟件的學(xué)習(xí)變得更簡(jiǎn)單更直覺(jué)。那么怎樣的功能設(shè)計(jì)才能打造出軟件的核心邏輯,讓其在使用時(shí)更加符合用戶的直覺(jué)?
 
為了得到以上問(wèn)題的答案,我們進(jìn)行了SU和Revit這兩款建筑領(lǐng)域主流軟件的使用,感受兩款軟件在直覺(jué)設(shè)計(jì)方面的表現(xiàn),進(jìn)而找到了一些設(shè)計(jì)原則指導(dǎo)我們?cè)趯?shí)際業(yè)務(wù)中應(yīng)用。
 
充分了解你的用戶
每個(gè)人在自己生活的世界里,都會(huì)形成自己的一些認(rèn)知,這個(gè)前面也已經(jīng)介紹過(guò)。所以要充分了解用戶的知識(shí)、技能、經(jīng)驗(yàn),盡可能減少用戶當(dāng)前具備知識(shí)與完成目標(biāo)所需具備的知識(shí)之間的Gap。當(dāng)用戶已具備的知識(shí)和完成目標(biāo)需要的知識(shí)之間的差距越小,越符合用戶的直覺(jué),越容易實(shí)現(xiàn)目標(biāo)。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
SU和Revit都是充分了解自己的用戶,基于用戶群體的知識(shí)、技能、經(jīng)驗(yàn)等特點(diǎn),去打造自己軟件的核心邏輯,符合目標(biāo)用戶群體的使用直覺(jué)。
SU 
 ▽
SU的Slogan 是“3D for Everyone“,人人可用。他的用戶群體非常廣泛,所以它是一個(gè)業(yè)務(wù)屬性較弱的工具,界面設(shè)計(jì)和操作使用上更簡(jiǎn)單,普適性和靈活性更強(qiáng)。使用面作為基本單元建模,推拉面成體,推推拉拉就可以快速完成建模。對(duì)于小白來(lái)說(shuō)很容易上手。
 
Revit  
Revit的用戶主要是專業(yè)的建筑師,場(chǎng)景聚焦在建筑相關(guān)領(lǐng)域,所以它是一個(gè)業(yè)務(wù)屬性較強(qiáng)的工具,將更多的業(yè)務(wù)場(chǎng)景包含在里面。比如標(biāo)高、工作平面以及模塊化的構(gòu)件等,這樣的設(shè)定對(duì)于建筑背景的用戶來(lái)說(shuō),可以更符合他們的已有認(rèn)知。
 
將從物理世界和文化環(huán)
前面反復(fù)提到過(guò)過(guò),用戶總是利用她在物理和文化環(huán)境中的經(jīng)驗(yàn)來(lái)了解她通過(guò)界面可以采取哪些行動(dòng)。因此我們需要熟知用戶已有的這些經(jīng)驗(yàn),并考慮到設(shè)計(jì)中。
 
通過(guò)聯(lián)想或類比,將物理世界的經(jīng)驗(yàn)運(yùn)用到數(shù)字產(chǎn)品設(shè)計(jì)中,使得全新的事物變得熟悉。
 
SU 
 ▽
SU的圖標(biāo)非常直觀好懂,比如畫(huà)筆、橡皮擦、油漆桶、量尺、放大鏡、材質(zhì)刷、垃圾桶等等,圖標(biāo)的語(yǔ)意和其在物理世界的功能是相符的,哪怕是第一次接觸建模軟件的人,只看圖標(biāo)也能大概猜出對(duì)應(yīng)的功能。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
 
Revit  
Revit將物理世界中房子映射到設(shè)計(jì)中。比如像墻、門(mén)、窗、柱、屋頂?shù)?,這是作為一個(gè)房子基本組成結(jié)構(gòu),對(duì)于建筑師來(lái)言,非常熟悉。所以在軟件設(shè)計(jì)中,功能也是基于這種具象的構(gòu)件分類的,在用戶使用之前,內(nèi)心已經(jīng)有了房子的認(rèn)知,從而也能在產(chǎn)品中找到對(duì)應(yīng)的功能,理解成本很低。
 
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
結(jié)合用戶在已有的文化環(huán)境中獲得的認(rèn)知與經(jīng)驗(yàn):比如在類似產(chǎn)品中或你的產(chǎn)品所教給他的一些知識(shí)、經(jīng)驗(yàn),并保持這些經(jīng)驗(yàn)的一致性。
 
SU 
 ▽
很好的匹配用戶已經(jīng)存在的認(rèn)知。提及SU就會(huì)想到它的推拉交互,推拉面成體。一方面它底層的點(diǎn)線面邏輯是我們學(xué)習(xí)數(shù)學(xué)或繪畫(huà)最基礎(chǔ)的知識(shí),幾乎人人都知道;另一方面推拉的操作也是和我們已有的推敲形體的過(guò)程體驗(yàn)是一致的,我們?cè)诶L制草圖時(shí),會(huì)在紙上勾勾畫(huà)畫(huà),涂涂抹抹,這跟在SU上推推拉拉有異曲同工之妙,我們使在用它時(shí)能夠享受手繪一般的樂(lè)趣,很難忘記這個(gè)操作。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
Revit  
同為Autodesk公司產(chǎn)品,Revit的用戶與Autocad有著大量的重疊,因此在交互上也延用了不少CAD的固有邏輯,將用戶在CAD獲得的認(rèn)知與經(jīng)驗(yàn)沿用在這里。與AutoCAD一樣 ,Revit快捷鍵
是該命令英文單詞的第1個(gè)或前面2個(gè)字母,這使得用戶無(wú)需再學(xué)習(xí)。
 
以及為了讓用戶切換軟件成本最小,Revit中還支持一個(gè)指令可以設(shè)置多個(gè)快捷鍵,這樣可以兼容喜歡自定義快捷鍵的高階用戶的習(xí)慣。例如在AutoCAD里習(xí)慣用Ctrl+1 呼出屬性面板,而如果按 Revit 快捷鍵的邏輯則應(yīng)該是"屬性"英文取用 PP,對(duì)于已熟悉AutoCAD操作的用戶來(lái)說(shuō),這么高頻的指令改變會(huì)造成極大的不適應(yīng),默認(rèn)兼容多個(gè)快捷鍵就是非常優(yōu)雅的解法。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
用戶認(rèn)知和行為要足夠簡(jiǎn)單
關(guān)于1+1=?,大家看到后會(huì)自然而然的想到答案;28×4=?,稍加思索也能給出答案;那么3927÷23=?,看到這個(gè)問(wèn)題,可能幾乎沒(méi)有人想要解開(kāi)了。有些問(wèn)題無(wú)意識(shí)的解開(kāi)了,有些問(wèn)題看到就想放棄解答。由此可見(jiàn)改變?nèi)藗冃袨榉绞降耐ǔJ悄芊褡銐蚝?jiǎn)單和容易,當(dāng)眼前的問(wèn)題復(fù)雜時(shí),人們不會(huì)試圖解決它。
 
SU 
 ▽
吸附非常的自然。當(dāng)我想移動(dòng)到某個(gè)位置的時(shí)候,很自然將鼠標(biāo)靠近目標(biāo)對(duì)象,就會(huì)幫我精準(zhǔn)的吸附到對(duì)應(yīng)的位置
 
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
補(bǔ)面非常簡(jiǎn)單。當(dāng)形體發(fā)生破面的時(shí)候,自然的想要繪制線去補(bǔ)全,當(dāng)我沿著要補(bǔ)全的路徑繪制兩個(gè)點(diǎn)的時(shí)候,整個(gè)面被補(bǔ)好了。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
 
5、實(shí)戰(zhàn):應(yīng)用最佳設(shè)計(jì)原則
將我們?cè)诮\浖袑W(xué)習(xí)到的有助于直覺(jué)設(shè)計(jì)的內(nèi)容進(jìn)行總結(jié),得出幾條原則,并將這些設(shè)計(jì)原則應(yīng)用到實(shí)踐當(dāng)中,指導(dǎo)我們進(jìn)行設(shè)計(jì)。
 
心理學(xué)中也提到,人的大腦處理不同的信息時(shí)所消耗的腦力資源是不同的,他們的排序是認(rèn)知>視覺(jué)>行動(dòng)。用戶花費(fèi)的腦力資源要多于點(diǎn)擊按鈕或移動(dòng)鼠標(biāo)時(shí)(動(dòng)作負(fù)荷)。所以我們?cè)谠O(shè)計(jì)的時(shí)候,首先要從認(rèn)知上降低用戶的認(rèn)知負(fù)擔(dān),其次在行為上確保操作絲滑順暢。
 
認(rèn)知上,降低認(rèn)知負(fù)擔(dān)
提升信息的識(shí)別性。
比如位置、信息分組的邏輯、顏色、比例等的使用等。作為別墅設(shè)計(jì)軟件,在進(jìn)行功能分類時(shí),要以用戶使用的流程、場(chǎng)景,識(shí)別的效率等為依據(jù)進(jìn)行合理分組。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
提高和用戶已有認(rèn)知的匹配。
作為別墅設(shè)計(jì)軟件,設(shè)計(jì)要與用戶已有的對(duì)別墅對(duì)房子的認(rèn)知相匹配。比如檐口線、浮雕、墻裙等構(gòu)件,人們?cè)诂F(xiàn)實(shí)中的房子中都會(huì)見(jiàn)到,只是不熟知這些叫法。因此我們采用建造一個(gè)真實(shí)小房子的做法,當(dāng)用戶點(diǎn)擊某個(gè)構(gòu)件,對(duì)應(yīng)的構(gòu)件就會(huì)在房子上高亮,用戶瞬間就會(huì)明白,哦原來(lái)是它,跟已有的認(rèn)知匹配上了,會(huì)有一種恍然大悟的感覺(jué)。同時(shí)也讓用戶大概知道這個(gè)構(gòu)件位于房子的哪個(gè)位置,對(duì)后續(xù)的操作有預(yù)期,知道要擺在哪個(gè)位置。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
 
保持醫(yī)學(xué)認(rèn)知的一致性。
任何產(chǎn)品都很難做到匹配用戶已有的所有認(rèn)知,總會(huì)有一些內(nèi)容是需要重新學(xué)習(xí)獲得的,那么就要保證我們教給他的這些認(rèn)知邏輯始終一致,讓用戶能做到舉一反三。作為別墅設(shè)計(jì)軟件,用戶要完成一個(gè)完整房子的建造,需要用到20+的構(gòu)件模塊,我們希望用戶學(xué)會(huì)使用一個(gè)構(gòu)件之后,就不需要再學(xué)習(xí),能觸類旁通的使用同類構(gòu)件。因此歸納出通用操作流程,找到相對(duì)統(tǒng)一的方式,串聯(lián)起我們用戶的心智。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
行為上,讓操作絲滑順暢
提供場(chǎng)景化的行為設(shè)計(jì),并將操作聚焦在手邊。
在我們的別墅設(shè)計(jì)軟件中,當(dāng)用戶要修改老虎窗和飄窗的時(shí)候,如果看到這個(gè)窗戶的樣式不是自己想要的,可能會(huì)想去繪制。按照我們現(xiàn)有的流程,用戶要先去左側(cè)面板找到自由繪窗入口,然后再選擇要在哪個(gè)面上繪制,操作流程是有點(diǎn)繞的。后面我們就想,用戶要修改這個(gè)窗子的時(shí)候,直覺(jué)上會(huì)去點(diǎn)擊它,那么在選中這個(gè)對(duì)象的時(shí)候,在手邊提供自由繪窗的入口,讓他能夠快速的綁定這個(gè)對(duì)象去繪制窗戶,操作上順暢了很多。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
一次只聚焦做一件事情,減少其他干擾。
我們現(xiàn)在的大部分操作,都是是激活命令后,左側(cè)面板還在。觀察到很多新用戶在激活了功能后,不知道下一步需要干什么。因?yàn)榻缑嫔闲枰P(guān)注的事情太多了。所以,我們嘗試用戶在激活功能后,將當(dāng)前步驟中不需要他關(guān)注的面板隱藏,聚焦到他當(dāng)前需要做的事情上面去。
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
操作要足夠簡(jiǎn)單,簡(jiǎn)單到不需要有太多思考,是一個(gè)自然而然的行為。
 
以下介紹的是我們的照片還原功能,對(duì)于外墻漆、門(mén)窗等用戶,他們可以現(xiàn)場(chǎng)拍好房子照片,導(dǎo)入后基于照片還原出別墅方案,再進(jìn)行后續(xù)的外立面和門(mén)窗設(shè)計(jì)。最初,我們需要用戶手動(dòng)擺放兩組消逝線去確定透視角度、然后調(diào)整比例尺、在尺子上選取點(diǎn)劃分樓層、拖拽點(diǎn)調(diào)整邊界、通過(guò)輸入開(kāi)間數(shù)量確定開(kāi)間。整個(gè)過(guò)程比較復(fù)雜,也涉及很多專業(yè)的概念,用戶不知道該如何操作。
 
后面優(yōu)化后,我們結(jié)合算法識(shí)別出照片中的房子,默認(rèn)給一個(gè)box,用戶通過(guò)拖動(dòng)box上的角點(diǎn)和邊線去調(diào)整整個(gè)形體。因?yàn)橛脩魧?duì)box的概念是熟悉的,拖拽box去擬合背后的照片就變得容易的多。樓層和開(kāi)間的劃分也采用這種切豆腐塊的方式,用戶一下一下去切就好。不用再去輸入數(shù)字,想象會(huì)是什么樣子。而比例尺只需要用戶輸入他想要的1樓的高度即可確定。優(yōu)化后,生成方案的轉(zhuǎn)化率提升了將近20%。
 
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
6、小結(jié)
直覺(jué)設(shè)計(jì)需要用戶看到產(chǎn)品時(shí)產(chǎn)生一種熟悉感,但是這種熟悉感判斷起來(lái)并不簡(jiǎn)單,其中一部分人熟悉并不代表所有人都熟悉。所以設(shè)計(jì)師需要充分了解他們的用戶,了解產(chǎn)品的市場(chǎng),并充分獲取用戶熟悉內(nèi)容的信息才有助于作出符合直覺(jué)設(shè)計(jì)的決策。
 
做出符合直覺(jué)的設(shè)計(jì)是困難的,需要充分考慮用戶在物理世界和文化環(huán)境中獲得的知識(shí)和經(jīng)驗(yàn),并將其應(yīng)用到具體的設(shè)計(jì)實(shí)踐中,也就是用戶的心智模型和產(chǎn)品概念模型達(dá)到基本吻合甚至去塑造與產(chǎn)品概念模型一致的用戶心智模型。
 
蘋(píng)果公司創(chuàng)始人兼前首席執(zhí)行官史蒂夫·喬布斯解釋說(shuō):“我們?cè)O(shè)計(jì)中最重要的是,必須讓事情直觀明顯。
 
打動(dòng)人心的直覺(jué)設(shè)計(jì)
 
 
建議每一位設(shè)計(jì)師同學(xué)也多去感受和認(rèn)識(shí)自己的知道,尤其是首次打開(kāi)某個(gè)網(wǎng)站時(shí),要更加關(guān)注自己的視覺(jué)動(dòng)線和心理感受、無(wú)意識(shí)產(chǎn)生的操作行為等。同時(shí)也不要讓競(jìng)品變成你的直覺(jué),始終去思索有沒(méi)有體驗(yàn)更加友好、創(chuàng)新的交互方式。
 
當(dāng)然,連續(xù)的直覺(jué)操作也可能會(huì)讓用戶覺(jué)得疲倦,可以適時(shí)考慮引入驚喜設(shè)計(jì),為用戶打造Amazing的感受。
  •  
    去認(rèn)識(shí)和感受自己的直覺(jué)
  •  
    不要讓競(jìng)品的設(shè)計(jì)變成你的直覺(jué)
  •  
    連續(xù)的直覺(jué)設(shè)計(jì)也可能也可能會(huì)給用戶帶來(lái)疲勞和厭倦,需要考慮在適當(dāng)?shù)臅r(shí)候給用戶進(jìn)喜設(shè)計(jì)。
 
本文在以下書(shū)籍和文章中予以引用,同時(shí)也推薦大家閱讀,想必大家對(duì)直覺(jué)設(shè)計(jì)會(huì)有更加深刻的認(rèn)知和理解。
 
注意:文中數(shù)據(jù)皆為演示數(shù)據(jù),非業(yè)務(wù)真實(shí)數(shù)據(jù)
參考書(shū)籍:
  •  
    《創(chuàng)意選擇》
  •  
    《福格行為模型》
  •  
    《一目了然-Web軟件顯性設(shè)計(jì)之路》
  •  
    《峰值體驗(yàn)-影響用戶決策的關(guān)鍵時(shí)刻》
  •  
    《任天堂的體驗(yàn)設(shè)計(jì)-創(chuàng)造不知不覺(jué)打動(dòng)人心的體驗(yàn)》
  •  
    《玄機(jī)設(shè)計(jì)學(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
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

藍(lán)藍(lán)設(shè)計(jì)(www.wnxcall.com )是一家專注而深入的界面設(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)的軟件開(kāi)發(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。

WechatIMG27.jpg

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

 

善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用

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

引言
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
好的設(shè)計(jì)師不僅僅要有專業(yè)能力,更重要的是與產(chǎn)品達(dá)到同頻,最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。
目前設(shè)計(jì)行業(yè)的現(xiàn)狀,大部分設(shè)計(jì)師還停留在設(shè)計(jì)思維的角度,存在一些和業(yè)務(wù)格格不入的情況,只關(guān)注好不好看,做一個(gè)交互原型的美化者...
自己做了很多,但是與實(shí)際脫節(jié)。出了很多個(gè)方案,產(chǎn)品(或運(yùn)營(yíng)/商務(wù)伙伴)覺(jué)得沒(méi)什么變化;打磨了很多細(xì)節(jié)和創(chuàng)新點(diǎn),產(chǎn)品卻只想快速上線……
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
設(shè)計(jì)師自己的工作被各種“非專業(yè)”的指導(dǎo)意見(jiàn)干擾;而其他職崗伙伴眼里,我們的付出,卻變成了一種“設(shè)計(jì)師的自High”。
究其原因,還是把以用戶思維去進(jìn)行設(shè)計(jì)。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
想要改變這樣的狀態(tài),最核心的是思維轉(zhuǎn)變,從技能導(dǎo)向的思考方式變?yōu)閮r(jià)值導(dǎo)向的思考方式。
本文主要從講述,如何通過(guò)方法,在項(xiàng)目進(jìn)入期獲得有效設(shè)計(jì)洞見(jiàn),提高設(shè)計(jì)效用,帶來(lái)客戶價(jià)值(用戶價(jià)值)。
 
什么是設(shè)計(jì)洞見(jiàn)?
先舉一個(gè)例子:如何做一個(gè)新款剃須刀產(chǎn)品?
飛利浦這些大公司,給出的答案是 更好的刀頭,更貼合面部,更安全和更容易清洗,一個(gè)黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實(shí)誕生了。
但是有一個(gè)很有意思的公司,給出了另一份答案:極簡(jiǎn)造型、合金材質(zhì)、超 mini 尺寸和豐富配色,最重要的是:
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
于是 2019 年,這個(gè)疫情開(kāi)始的時(shí)間,這家剃須刀橫空出世。
這款產(chǎn)品獲得成功的原因,本質(zhì)上就是產(chǎn)品的設(shè)計(jì)者帶著更高、更廣的視角,洞見(jiàn)了“剃須刀不僅是一個(gè)工具,它更可以成為一種禮物”這個(gè)更深層次的客戶需求,打破現(xiàn)有市場(chǎng)概念,獲得成功。
——如果說(shuō),設(shè)計(jì)洞察是發(fā)現(xiàn)和理解問(wèn)題的能力,是設(shè)計(jì)師在研究和解決問(wèn)題時(shí)所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計(jì)洞見(jiàn)可以幫助設(shè)計(jì)師更好地識(shí)別問(wèn)題、提出創(chuàng)新解決方案,并為設(shè)計(jì)師提供思考問(wèn)題和做出決策的指導(dǎo)。
Brown.Tim在《設(shè)計(jì)思考改造世界》中說(shuō):"未來(lái)的設(shè)計(jì)師將扮演科技的詮釋者(洞見(jiàn)能力),人性的引領(lǐng)者(觀察能力),感性的創(chuàng)造者與品位的營(yíng)造者(同理心)的角色"。
通過(guò)設(shè)計(jì)洞見(jiàn),可以讓我們看更高、想更全, 與業(yè)務(wù)貼合更緊密,讓設(shè)計(jì)得到認(rèn)可,產(chǎn)生業(yè)務(wù)共鳴,賦予用戶/客戶價(jià)值,才能讓設(shè)計(jì)變的更有價(jià)值。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
如何獲得設(shè)計(jì)洞見(jiàn)?
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
接下來(lái)我們將通過(guò)一一探索獲得洞見(jiàn)的三個(gè)階段。
 
第一階段:設(shè)計(jì)洞察
洞察階段的核心,是獲得現(xiàn)象背后的動(dòng)因。是一個(gè)獲得信息與問(wèn)題的階段
產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過(guò)程,在設(shè)計(jì)和迭代的過(guò)程中,會(huì)經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計(jì)洞見(jiàn)有效過(guò)去在更前置的節(jié)點(diǎn),才能產(chǎn)生更有效的價(jià)值。
所以我們首先做的是:“提升設(shè)計(jì)的主動(dòng)性”,在項(xiàng)目的進(jìn)入期最大化實(shí)現(xiàn)設(shè)計(jì)洞見(jiàn)的價(jià)值。
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
 
項(xiàng)目進(jìn)入期通常會(huì)有一個(gè)通病,即問(wèn)題泛化,無(wú)法具象。在一個(gè)比較“泛”的問(wèn)題下,挖掘目的/目標(biāo),找到問(wèn)題最簡(jiǎn)單的辦法就是“調(diào)查分析”:了解行業(yè)生態(tài)與業(yè)務(wù)背景,確定或推測(cè)自身產(chǎn)品的發(fā)展方向,分析定位與關(guān)注指向-Pointer(即當(dāng)下會(huì)產(chǎn)生哪些具有指向性的任務(wù)方向)。
這個(gè)階段,我們的主要目的是通過(guò)最初始的源頭數(shù)據(jù),正確的了解業(yè)務(wù)或者項(xiàng)目的背景,避免因信息傳遞所產(chǎn)生的認(rèn)知誤差,以免發(fā)生“指向”偏差。而要做到這一點(diǎn),洞察就不能僅僅停留在表面的觀察,詢問(wèn),記錄和數(shù)據(jù)分析,而要隨時(shí)通過(guò)聯(lián)想和反思來(lái)回歸本質(zhì)——客戶(用戶)和場(chǎng)景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
1. 知識(shí)準(zhǔn)備
了解各種市場(chǎng)調(diào)研的方法與過(guò)程,對(duì)調(diào)研方法進(jìn)行分類。
如下圖所示,(戴力農(nóng)《設(shè)計(jì)調(diào)研》 )橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的(人們的行為)還是主觀的(人們的目標(biāo)和觀點(diǎn)),縱軸區(qū)分了該方法的類型是定性的還是定量的。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
2. 選擇正確的調(diào)研辦法
不同的產(chǎn)品生命周期,對(duì)應(yīng)不同的調(diào)研方法,根據(jù)產(chǎn)品的不同時(shí)期選擇合適屬性的調(diào)研辦法。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
互聯(lián)網(wǎng)設(shè)計(jì)師的常規(guī)調(diào)研手法,受困于資源,多是在桌面進(jìn)行。我們通過(guò)二手資料研究、競(jìng)品和線上走查獲得問(wèn)題,進(jìn)行虛擬對(duì)象的研究,極易發(fā)生偏差。
拓新場(chǎng)景和成長(zhǎng)初期,通常資源緊張且缺乏具象客戶,很難進(jìn)行大樣本調(diào)研數(shù)據(jù)挖掘。對(duì)于設(shè)計(jì)師來(lái)說(shuō),在了解業(yè)務(wù)信息,對(duì)稱業(yè)務(wù)方向時(shí)可以依賴其他職崗提供的資料進(jìn)行研究;但是對(duì)于設(shè)計(jì)息息相關(guān)的關(guān)鍵點(diǎn),建議還是通過(guò)自己實(shí)地考察、焦點(diǎn)實(shí)驗(yàn)去獲取真實(shí)的體驗(yàn)信息。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
成長(zhǎng)后期與成熟期,關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量,縮短與頭部產(chǎn)品之間的差距,實(shí)現(xiàn)產(chǎn)品的高增長(zhǎng) 。大樣本的用戶與競(jìng)品調(diào)研可以幫助我們更可觀的看到真實(shí)的客戶需求。再輸入到我們的日常桌面研究中去。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
3. 掌握信息收集、數(shù)據(jù)統(tǒng)計(jì)分析方面的知識(shí)
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
4. 了解調(diào)研的流程
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
確定調(diào)研目標(biāo) → 制定調(diào)研計(jì)劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請(qǐng)調(diào)研對(duì)象&執(zhí)行調(diào)研過(guò)程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。
調(diào)研的實(shí)際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了,也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。
得到大量信息,進(jìn)行吸收、理解和處理后,我們將收獲大量的問(wèn)題。接下來(lái)就是如何解決問(wèn)題。
 
第二階段:定位價(jià)值
定位價(jià)值是洞見(jiàn)的關(guān)鍵階段,是能給業(yè)務(wù)帶來(lái)價(jià)值的核心,是可以改變客戶(用戶)習(xí)慣和行為的關(guān)鍵博弈。
那么如何定位價(jià)值呢?
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
1. 問(wèn)題整合,提煉與確認(rèn)指向
將調(diào)研獲得的問(wèn)題進(jìn)行歸納與整理,如簡(jiǎn)單的 Card Sorting ,確認(rèn)所有問(wèn)題的核心指向(Pointer)。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
接下來(lái)就需要不停的切換指向,并深入每個(gè)關(guān)鍵 key 下進(jìn)一步拆解,確定你收獲的是否是一個(gè)真正且重要的 Pointer。
 
EG  海底撈 ▽
餐廳高峰期經(jīng)常人滿為患,排隊(duì)體驗(yàn)差。常規(guī)餐廳的做法:約束更快的出餐、收臺(tái),拆分更多的餐位,引導(dǎo)拼桌服務(wù)等等等等..短期可能會(huì)帶來(lái)改變,但是達(dá)到一個(gè)極限點(diǎn)以后,就很難再提升了。
類似的場(chǎng)景還有曾經(jīng)的外賣小哥:30 分鐘以內(nèi)還能更快嗎?答案是:很難。
那怎么讓客人愿意多等待一點(diǎn),或者不覺(jué)得“等待完全是無(wú)價(jià)值無(wú)意義的”?
海底撈選擇在你排隊(duì)等待的時(shí)候,提供免費(fèi)美甲、護(hù)手、零食等等各種周到服務(wù),讓客人等待的過(guò)程中不至于無(wú)事可做。獲得了認(rèn)可,贏得了口碑。
如果你留心觀察,你會(huì)發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個(gè)打招呼的氣泡Hi,來(lái)強(qiáng)調(diào)服務(wù)為先的品牌定位,解決的是情感需求中的「過(guò)程體驗(yàn)」。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
2. PDS(問(wèn)題-檢測(cè)-研究)調(diào)查分析
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
PSD 調(diào)查分析的核心思想,是調(diào)查客戶(用戶)與預(yù)期(行為/認(rèn)知)的偏差,或不滿與問(wèn)題來(lái)發(fā)現(xiàn)洞見(jiàn)。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
EG  BBDO反煙推廣 ▽
BBDO 的英國(guó)公司層接到過(guò)這樣一個(gè)推廣任務(wù):是讓年輕人,特別是十幾歲的小女孩兒戒煙。
其實(shí)這個(gè)問(wèn)題特別棘手。一方面,吸煙是一個(gè)生理上癮的事情,要戒掉很困難;另一方面,吸煙最大的問(wèn)題是有害健康,但是對(duì)于年輕人來(lái)說(shuō)在這個(gè)角度的感觸不深,很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案,但是借助洞見(jiàn)以后就不一樣了。
通過(guò)了解更多事實(shí),看目標(biāo)群體關(guān)注什么,哪些問(wèn)題對(duì)我們要實(shí)現(xiàn)的目標(biāo)有影響。在這個(gè)案例里,BBDO的做法是派了一個(gè)年輕的女助理在購(gòu)物區(qū)找了一家咖啡館,連著5天坐在那里聽(tīng)那里的女孩兒在聊些什么。
結(jié)果這5天內(nèi)她就發(fā)現(xiàn),這些十幾歲的女生大部分聊的是買(mǎi)衣服、做頭發(fā)、選什么樣的指甲油和減肥藥,怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時(shí)候,洞見(jiàn)就自己呼之欲出了:原來(lái)對(duì)于這些無(wú)所事事,十幾歲的年輕女孩而言,沒(méi)有什么比她們看起來(lái)漂亮更重要了。
因此,你不需要告訴她吸煙可能縮短壽命,你只要告訴她一件事情:“吸煙會(huì)讓你變得難看”,就足夠讓她戒煙了。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
 
所以,想要獲得洞見(jiàn),就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過(guò)調(diào)研發(fā)現(xiàn)真正的問(wèn)題時(shí),洞見(jiàn)往往就會(huì)產(chǎn)生。
 
3. 規(guī)避技能導(dǎo)向
設(shè)計(jì)的職崗角色是單薄的。我們一定要帶著指針與方案,多職崗評(píng)估價(jià)值與可執(zhí)行度,這是一個(gè)設(shè)計(jì)前期任務(wù)的過(guò)程。它的輸出可能為設(shè)計(jì)Demo、簡(jiǎn)單的筆記、方案的列表,或者是一個(gè)說(shuō)明效果的故事版……不一定具備完整的落地性,但是可以讓伙伴更好的理解你的觀點(diǎn)。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
第三階段:系統(tǒng)輸出
設(shè)計(jì)的解決方案要從起心動(dòng)念、貫穿至產(chǎn)、研、運(yùn)營(yíng)甚至上市宣傳的全路徑方案。
在分析階段我們通過(guò)“3步走”的視角思維,明確了任務(wù)重點(diǎn)同時(shí)幫助我們明確不同指針的優(yōu)先級(jí)。
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
 
 
設(shè)計(jì)師要考慮的維度不僅僅在用戶體驗(yàn)層面,更應(yīng)在執(zhí)行時(shí)候要考慮業(yè)務(wù)的實(shí)際需求,考慮上下游不同職能的工作內(nèi)容,始終保持全局與系統(tǒng)的思維,要從客戶價(jià)值出發(fā),回落到企業(yè)成本中去。
通過(guò)設(shè)計(jì)洞見(jiàn),從更本質(zhì)的層面去洞悉問(wèn)題,重新定義和設(shè)計(jì)任務(wù)。
與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計(jì)。
 
善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用
 
 
讓你的設(shè)計(jì)方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù),提升設(shè)計(jì)的效用。讓“提升體驗(yàn)”這件事真正落地。
改變我們看世界的方式,亦改變世界看待我們的方式。
 


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

藍(lán)藍(lán)設(shè)計(jì)(www.wnxcall.com )是一家專注而深入的界面設(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)的軟件開(kāi)發(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。

WechatIMG27.jpg

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

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

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

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

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

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

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

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

UI設(shè)計(jì)

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

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

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

UI設(shè)計(jì)

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

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

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

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

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

UI設(shè)計(jì)

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

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

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

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

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

數(shù)據(jù)大屏

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

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

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

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

數(shù)據(jù)大屏

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

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

數(shù)據(jù)大屏

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

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

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

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

UI 設(shè)計(jì)入門(mén)指南

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

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

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

UI 設(shè)計(jì)

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

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

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

UI 設(shè)計(jì)

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

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

UI 設(shè)計(jì)

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

日歷

鏈接

個(gè)人資料

存檔