視覺(jué)設(shè)計(jì)所傳達(dá)的四種信息
2013/1/9 12:39:12來(lái)源:Danis
在大家著迷用戶體驗(yàn)設(shè)計(jì),關(guān)注用戶研究、人機(jī)交互的時(shí)候,視覺(jué)設(shè)計(jì)好像被遺忘了。
我想說(shuō)的是,視覺(jué)設(shè)計(jì)一如既往地重要著。
視覺(jué)設(shè)計(jì)處在產(chǎn)品表現(xiàn)層,跟諾曼先生提出的情感化設(shè)計(jì)本能層設(shè)計(jì)水平直接相關(guān)。
如果想讓用戶一見(jiàn)鐘情進(jìn)而買單,讓客戶點(diǎn)頭通過(guò)方案,給他們視覺(jué)上的第一印象至關(guān)重要。
沒(méi)有視覺(jué)的最終落地,前面的研究和交互,似乎都將付諸東流。
因?yàn)橐曈X(jué)設(shè)計(jì)至少做了這四件事情:
1 傳達(dá)“品牌”
視覺(jué)設(shè)計(jì)形成一種氛圍,與公司品牌建立聯(lián)系。
既是一種宣傳,也加深了用戶對(duì)品牌的認(rèn)知度。
蘭芝的產(chǎn)品、界面和包裝都是一致的藍(lán)
2 傳達(dá)“美感”
漂亮的東西總是比丑陋的東西容易被人接受。
這里指的“美感”應(yīng)該是“恰當(dāng)?shù)仄?rdquo;,
每個(gè)人的審美不一樣,甲之熊掌乙之砒霜,所以所謂的美感因人而異,因目標(biāo)用戶打造。
小孩認(rèn)為的美跟大人認(rèn)為的美也許是不一樣的。
男人認(rèn)為的美跟女人認(rèn)為的美也許是不一樣的。
文藝青年的美跟土老板認(rèn)為的美也許是不一樣的。
甚至同一個(gè)人身上,當(dāng)他扮演不同的角色的時(shí)候,也應(yīng)該給他恰當(dāng)?shù)拿馈?/div>
邊框是區(qū)分邏輯關(guān)系的一種視覺(jué)手段
比如一個(gè)人潮人醫(yī)生,他使用的手機(jī)界面應(yīng)該新潮,而使用的醫(yī)療器械界面卻應(yīng)該簡(jiǎn)約。
漂亮的產(chǎn)品也許會(huì)讓用戶癡迷并忘記一部分學(xué)習(xí)成本
3 傳達(dá)“信息”
它將產(chǎn)品上的信息/數(shù)據(jù)視覺(jué)化,以容易識(shí)別、容易理解的方式表達(dá)出來(lái)。
比如對(duì)于信息優(yōu)先級(jí)的識(shí)別,通過(guò)視覺(jué)對(duì)比讓用戶知道我們想給他優(yōu)先看什么。
從報(bào)紙的設(shè)計(jì)可以讀出信息優(yōu)先級(jí)
比如對(duì)于信息關(guān)聯(lián)度的識(shí)別,哪些內(nèi)容跟哪些內(nèi)容是相關(guān)的,哪些是包含被包含的。
邊框是區(qū)分邏輯關(guān)系的一種視覺(jué)手段
比如通過(guò)樹狀圖、熱點(diǎn)圖等圖形表達(dá)數(shù)據(jù)的統(tǒng)計(jì),比純粹羅列數(shù)據(jù)更好理解。
4 傳達(dá)“行為”
交互的理念通過(guò)視覺(jué)傳達(dá),視覺(jué)暗示將行為、狀態(tài)傳達(dá)給用戶。
一個(gè)操作的線索,操作的過(guò)程,操作的結(jié)果都需要視覺(jué)來(lái)交待。
比如憤怒的小鳥,在拉動(dòng)彈弓,拉到什么程度,彈出小鳥,砸中積木,整個(gè)過(guò)程都是豐富的視覺(jué)效果在負(fù)責(zé)交待。
最后舉個(gè)例子,在一顆按鈕身上可以也許可以體現(xiàn)出來(lái)這四件事情:
這顆麥當(dāng)勞的按鈕,
紅色的主色,中間有些許黃色的光暈,透露“品牌”。
質(zhì)感、發(fā)光的處理代表“美感”。
鼠標(biāo)懸停、按下的時(shí)候(這個(gè)是我yy的,實(shí)際上他們沒(méi)有做 =.=),有相應(yīng)的狀態(tài)反饋,傳遞“交互”。
按鈕上的字說(shuō)明“信息”。
[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/ui1308.html
本文地址:http://pkvc.cn/tutorial/ui1308.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線詳解
- banner實(shí)戰(zhàn)技巧-版式平衡構(gòu)圖
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏大視
- 如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)
- 做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解
- [圖趣]色彩搭配的核心原則和聯(lián)想
- 扁平化設(shè)計(jì)與可訪問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專題技巧淺析
- WEB設(shè)計(jì)中的排版
這些是最新的
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏
最熱門的教程