文章主要分析了不同的視覺(jué)設(shè)計(jì)元素是如何影響網(wǎng)站用戶體驗(yàn)，希望通過(guò)文章的解讀能夠?qū)δ愕漠a(chǎn)品設(shè)計(jì)帶來(lái)些啟發(fā)。

也許是因?yàn)槲以谝曈X(jué)設(shè)計(jì)上沒(méi)有太多經(jīng)驗(yàn)，我發(fā)現(xiàn)平常在與視覺(jué)設(shè)計(jì)師討論設(shè)計(jì)方案時(shí)，我們常常討論的是：“我覺(jué)得這樣布局很奇怪”、“我覺(jué)得A不太好看”、“這個(gè)地方給我?guī)?lái)了某種XXX的感覺(jué)”、“這樣顯示會(huì)不會(huì)給用戶帶來(lái)某種誤解”……

不難發(fā)現(xiàn)，大多數(shù)時(shí)候我們討論的是一種捉摸不透的“感覺(jué)”。視覺(jué)設(shè)計(jì)固然需要美感和源于直覺(jué)的創(chuàng)造力，但是作為一個(gè)“設(shè)計(jì)”領(lǐng)域，它需要有更多理性的思考。為什么應(yīng)該是這樣?這對(duì)用戶的情緒和行為帶來(lái)了怎樣的影響?我們需要一些研究結(jié)果和經(jīng)驗(yàn)法則作為參考，知其所以然才能做出好的設(shè)計(jì)。

以下是原文：

介紹

為網(wǎng)站、APP或產(chǎn)品設(shè)計(jì)一個(gè)漂亮的用戶界面需要技能、天賦和靈感的特殊組合。

但是用戶界面的設(shè)計(jì)不是漂亮就行。它應(yīng)該幫助用戶去做他們需要做的事情。

為了創(chuàng)造出不但有吸引力，而且能夠服務(wù)于用戶體驗(yàn)的設(shè)計(jì)，你需要清楚地認(rèn)識(shí)到你的設(shè)計(jì)決策是如何幫助或者阻礙你的用戶的。

我們?cè)赨serTesting執(zhí)行和分析過(guò)數(shù)十萬(wàn)個(gè)可用性研究，從中看過(guò)了很多有效的(以及不那么有效的)視覺(jué)設(shè)計(jì)決策?，F(xiàn)在我們想分享一下我們從這些研究中學(xué)到的東西。

本文是關(guān)于不同的視覺(jué)設(shè)計(jì)元素是如何影響網(wǎng)站、APP或產(chǎn)品中的用戶體驗(yàn)的。我們將會(huì)談到以下內(nèi)容：

• 顏色
• 排版
• 圖標(biāo)
• 和用戶一起測(cè)試你的設(shè)計(jì)

你將會(huì)學(xué)到如何做出對(duì)用戶友好的設(shè)計(jì)決策，并且為你的公司帶來(lái)最好的結(jié)果。

顏色

在設(shè)計(jì)師的工具箱中，顏色是最有力的工具之一。

你可以使用顏色去影響用戶的情感，吸引他們的注意力，把他們置入適于購(gòu)物的情緒體驗(yàn)中。顏色同時(shí)也是客戶對(duì)一個(gè)品牌認(rèn)知的主要因素之一。

由于可能的顏色組合是無(wú)限的，很難去決定哪種顏色會(huì)對(duì)你的網(wǎng)站或應(yīng)用產(chǎn)生大影響。去測(cè)試所有的顏色是不可能的，但是我們總結(jié)了關(guān)于顏色如何影響用戶的態(tài)度和行為的一些技巧和趨勢(shì)。

顏色理論與用戶體驗(yàn)

基礎(chǔ)顏色理論的原理是雕琢用戶體驗(yàn)的一個(gè)重要起點(diǎn)。

互補(bǔ)色可以用來(lái)吸引觀看者的注意力并且創(chuàng)造活力，而類似色可以用來(lái)在設(shè)計(jì)中創(chuàng)造協(xié)調(diào)感和一致感?？紤]一下在主頁(yè)或者主屏幕上你可以如何使用互補(bǔ)或類似的配色方案，去為用戶奠定基調(diào)并且讓用戶進(jìn)入能夠促使他們采取你期望的行為的心態(tài)中去。

當(dāng)你在文本中使用顏色時(shí)，記住把兩種低對(duì)比度的顏色放在一起會(huì)使它們非常難以閱讀(不管它們是互補(bǔ)色還是類似色)。

在手機(jī)屏幕上尤其如此，因?yàn)橛脩舾赡茉趹敉饣蛘呙髁恋牡胤绞褂檬謾C(jī)以致屏幕比較刺眼。

(譯注：原文描述了他們做的一個(gè)關(guān)于顏色偏好的性別差異的研究，但由于樣本只有50人且差異不大，在此不譯，感興趣的同學(xué)可以查看原文。)

顏色帶來(lái)的聯(lián)想在不同文化下，對(duì)不同的個(gè)體都不一樣。不同性別經(jīng)常有不同的顏色偏好，年度流行色對(duì)年輕人或者高收入人群都可能更有吸引力。

色彩心理學(xué)與關(guān)聯(lián)

眾所周知，顏色可以喚起情感，以下是傳統(tǒng)上與顏色關(guān)聯(lián)的情感：

• 紅色：力量，熱情，食欲，愛(ài)，危險(xiǎn)
• 橘色：自信，高興，友好
• 黃色：青春，幸福，溫暖，陽(yáng)光
• 綠色：成長(zhǎng)，金錢，治愈，環(huán)境，嫉妒
• 藍(lán)色：信任，和平，忠誠(chéng)，陽(yáng)剛，安全
• 紫色：皇室，神秘，靈性，創(chuàng)造
• 棕色：戶外，食物，保守，地球
• 黑色：正式，奢華，高雅，死亡
• 白色：春節(jié)，樸素，善良，新鮮

商標(biāo)與行業(yè)

很多著名公司在客戶購(gòu)買之前很久就已經(jīng)用顏色喚起了特定的情緒。

客戶也會(huì)將顏色和特定的行業(yè)建立聯(lián)系，比如藍(lán)色和科技，綠色和健康，紅色和快餐。當(dāng)有些公司為了匹配客戶期望而選擇用行業(yè)通用色時(shí)，有些公司發(fā)現(xiàn)反其道而行之可以快速讓人留下印象。

舉個(gè)栗子。在旅游業(yè)中，藍(lán)色對(duì)于網(wǎng)站和應(yīng)用來(lái)說(shuō)是非常常用的?？匆豢聪旅孢@個(gè)網(wǎng)站主頁(yè)：

藍(lán)色代表著可信賴，這對(duì)旅游公司來(lái)說(shuō)是一個(gè)好事。但是旅游網(wǎng)站使用藍(lán)色并不是一個(gè)鐵則。

維珍美國(guó)航空在設(shè)計(jì)網(wǎng)站時(shí)就選擇了反其道而行。

當(dāng)它與用戶對(duì)航空網(wǎng)站的期待不同時(shí)，就會(huì)顯得比較突出。選擇一個(gè)意料之外的顏色可以有效地讓用戶體驗(yàn)到高興，并且讓他們記住你的公司。

考慮你的目標(biāo)客戶有多傳統(tǒng)。

他們對(duì)背離規(guī)范有什么反應(yīng)?

這會(huì)令他們感到開(kāi)心還是迷惑?

如果你的配色背離了傳統(tǒng)預(yù)期，你的公司傳達(dá)出了什么信息?

顏色與可及性

你的網(wǎng)站或應(yīng)用對(duì)有視覺(jué)障礙的用戶來(lái)說(shuō)是什么樣子的?

大約8%的男性和0.5%的女性患有某種形式的色盲。色盲有多種情況，但紅綠色盲是最常見(jiàn)的。紅綠色盲患者無(wú)法區(qū)分紅色，綠色和具有相似值的黃色，尤其是當(dāng)綠色中含有的黃色比藍(lán)色更多時(shí)，比如下面的橄欖色背景色。

同樣的按鈕，左邊是視力正常者看到的，右邊是紅綠色盲看到的

如果你在使用低對(duì)比度的顏色，要知道色盲用戶可能根本無(wú)法辨認(rèn)文字或者圖片。在寒假這個(gè)問(wèn)題尤其嚴(yán)重，大量網(wǎng)站充斥著節(jié)日喜慶的紅色和綠色。記住，如果有8%的男性訪客無(wú)法看到按鈕上的文字“Buy Now”，那么你可能正在流失掉數(shù)量可觀的轉(zhuǎn)化。

如果你不得不使用對(duì)色盲患者來(lái)說(shuō)難以區(qū)分的顏色組合，你仍然可以通過(guò)提高顏色之間的對(duì)比度來(lái)保證可及性。比如下面這張圖使用了非常暗的紅色和非常亮的綠色，不管是否色盲都很容易看清楚。

同樣的按鈕，左邊是視力正常者看到的，右邊是紅綠色盲看到的

還有一些關(guān)于可及性的要點(diǎn)：不要忘記那些可能在使用屏幕閱讀器訪問(wèn)你的網(wǎng)站的用戶。你是否曾經(jīng)在填寫表格的時(shí)候收到一個(gè)錯(cuò)誤信息，比如“標(biāo)紅的字段是必填的”?這對(duì)于那些無(wú)法看到紅色字符的人來(lái)說(shuō)是極其糟糕的體驗(yàn)。最好避免在網(wǎng)站或者應(yīng)用中提到顏色，并且提供更加具體的錯(cuò)誤信息，比如“郵件地址是必填的”。

可及性測(cè)試工具

有一些很棒的工具可以幫助你測(cè)試網(wǎng)站的可及性。

下載Color Oracle的色盲模擬器，有Windows，Mac和Linux版本;

將你的靜態(tài)圖片上傳到Coblis，可以用九種不同的顏色視角去體驗(yàn)它們;

甚至可以邀請(qǐng)色盲患者去測(cè)試網(wǎng)站，看是否有他們難以看清的東西。

顏色對(duì)轉(zhuǎn)化率的影響

有些優(yōu)化轉(zhuǎn)化率的專家會(huì)聲稱對(duì)按鈕來(lái)說(shuō)最好的顏色是大膽的、吸引眼球的紅色，但也有人說(shuō)綠色好因?yàn)榫G色表示“開(kāi)始”。

有大量的A/B測(cè)試顯示了CTA按鈕(CallToAction)的顏色改變會(huì)對(duì)轉(zhuǎn)化帶來(lái)極大的影響。HubSpot在以前仍叫做Performable的時(shí)候分享了這個(gè)著名的測(cè)試：

HubSpot的A/B測(cè)試

盡管他們?cè)瓉?lái)預(yù)測(cè)綠色按鈕會(huì)表現(xiàn)得更好，但是紅色按鈕帶來(lái)的點(diǎn)擊量高了21%。但是他們?nèi)匀惶嵝炎x者，這個(gè)測(cè)試結(jié)果本身不應(yīng)該使所有人都把按鈕變成紅色?？赡艿慕忉屖撬麄兊挠脩艟褪窍矚g紅色，盡管其他的用戶可能更喜歡綠色?；蛘?，更可能的情況是，這個(gè)紅色按鈕得到了更多注意是因?yàn)樗沁@個(gè)頁(yè)面上唯一的紅色物體。

壞消息是并不存在一種魔法顏色能在所有網(wǎng)站上都表現(xiàn)最優(yōu)。好消息是有一些經(jīng)驗(yàn)法則可以幫助你有效地使用顏色。

經(jīng)驗(yàn)法則

對(duì)比是關(guān)鍵

這看起來(lái)很明顯，但是我們還是要說(shuō)：如果你希望用戶點(diǎn)擊某處，你要讓它足夠突出。如果你的網(wǎng)站或應(yīng)用使用了很多橘色，用戶可能不會(huì)馬上注意到一個(gè)橘色的按鈕，不管這個(gè)橘色按鈕在其他公司的A/B測(cè)試中表現(xiàn)多好。

在我們的研究中，我們讓用戶指出他們?cè)诿總€(gè)網(wǎng)站上首先會(huì)點(diǎn)擊的東西。不出意料，用戶更可能點(diǎn)擊與背景形成強(qiáng)烈對(duì)比的CTA按鈕。

明亮令人難忘

在上面提到的那個(gè)50人的研究中，我們問(wèn)的最后一個(gè)問(wèn)題是用戶訪問(wèn)的哪個(gè)網(wǎng)站最令人印象深刻。

50%的用戶選擇了明亮的網(wǎng)站。有趣的是很多選擇深色或者白色網(wǎng)站的用戶是出于一些與設(shè)計(jì)無(wú)關(guān)的原因。比如一個(gè)用戶認(rèn)為Dropbox是最印象深刻的因?yàn)樗呀?jīng)有了Dropbox賬號(hào)。

字體

文字的主要目的是幫助用戶去做你需要讓他們做的事情——不管是探索產(chǎn)品，學(xué)習(xí)如何玩一個(gè)游戲，還是瀏覽一些令人愉快的故事。

遺憾的是，在網(wǎng)站和應(yīng)用排版中有很多相互矛盾的選項(xiàng)，并且沒(méi)有一個(gè)適用于所有情況的嚴(yán)格規(guī)則(否則事情也太簡(jiǎn)單了吧)。但是你可以做一些事情，以保證你為網(wǎng)站或應(yīng)用選擇的字體對(duì)你和你的用戶有所幫助，而不是跟你唱反調(diào)。

字號(hào)與行長(zhǎng)

文字的尺寸和布局會(huì)對(duì)在線閱讀的體驗(yàn)帶來(lái)巨大影響。年齡較大的人或者有視力障礙的人在面對(duì)小字的時(shí)候尤其痛苦。即使是視力正常的人盯著屏幕太久后也會(huì)覺(jué)得疲勞——當(dāng)他們?yōu)榱碎喿x不得不斜視或者放大時(shí)會(huì)感到激怒。

看看下面這個(gè)例子：對(duì)于臺(tái)式機(jī)來(lái)說(shuō)，正文較好的處理方式是每行50-75個(gè)字符，字號(hào)不低于16pt。

對(duì)比下面這個(gè)頁(yè)面，每行有100個(gè)字符，并且字體更小。

這個(gè)問(wèn)題在手機(jī)上有所延伸。對(duì)用戶來(lái)說(shuō)在一個(gè)小的明亮的屏幕上閱讀是一件很頭疼的事情。比較好的做法是在手機(jī)上每行顯示30-40個(gè)字符。下面是在智能手機(jī)上看到的兩個(gè)網(wǎng)站，第一個(gè)使用了30-40個(gè)字符，而第二個(gè)使用了為臺(tái)式機(jī)設(shè)計(jì)的網(wǎng)站上的尺寸。

因?yàn)閷懰赖淖痔?hào)(比如，16px)在不同的設(shè)備上顯示效果不同，所以試著使用rem單位去定義字號(hào)(譯注：rem是CSS3引入的字體大小單位，是指相對(duì)于根元素的字體大小，便于實(shí)現(xiàn)響應(yīng)式設(shè)計(jì))。

文本的顏色對(duì)比度

關(guān)于文本顏色和可讀性，有兩種不同意見(jiàn)：

一種認(rèn)為高對(duì)比度更好，白底黑字是最具有可讀性的組合;

另一種認(rèn)為太大的對(duì)比度反而難以閱讀，使用灰色陰影更好。

應(yīng)用多少對(duì)比度需要微妙的平衡。因?yàn)槠聊恢g的差異太大，在設(shè)計(jì)師的屏幕上顯得足夠深的灰色在用戶的屏幕上可能更淡。

在手機(jī)上有足夠的對(duì)比度尤其重要，因?yàn)橛脩艨赡苄枰趹敉饣蛘呙髁恋牡胤绞褂谩?/p>

W3C網(wǎng)站內(nèi)容可及性指南是一個(gè)不錯(cuò)的開(kāi)始。他們?cè)O(shè)定了最小對(duì)比度的標(biāo)準(zhǔn)，保證適度低視力的用戶能夠閱讀你的文本。你可以使用一個(gè)對(duì)比率工具快速找到你設(shè)定的對(duì)比度是否在合適范圍中。

但是純黑的文本(#000000)對(duì)于誦讀困難者來(lái)說(shuō)更難以閱讀，并且經(jīng)過(guò)長(zhǎng)時(shí)間閱讀后會(huì)導(dǎo)致眼睛疲勞。

很多設(shè)計(jì)師選擇使用非常深的灰色或者實(shí)際的黑色(而不是純黑)，比如#0D0D0D，#0F0F0F，或者#141414。

一旦你選擇了顏色，讓真實(shí)用戶在自然環(huán)境中使用任何你能想到的設(shè)備試用是絕對(duì)需要的。如果任何測(cè)試用戶在閱讀你的文本時(shí)遇到了麻煩，那么有理由相信你的客戶正在遭遇相同的問(wèn)題。

我們的研究結(jié)果：襯線與非襯線

在傳統(tǒng)的印刷排版中有個(gè)常識(shí)，襯線字體可以通過(guò)在水平方向上溫和地引領(lǐng)視線而提高可讀性和閱讀速度。

但是關(guān)于這兩種字體的實(shí)際區(qū)別的研究結(jié)果非常不確定。我們需要自己做試驗(yàn)，所以我們做了一個(gè)研究，讓30個(gè)用戶閱讀兩個(gè)除了字體之外完全相同的頁(yè)面(A使用的是Arial，B使用的是Times New Roman)，并測(cè)量閱讀時(shí)間和理解程度。

我們得出的結(jié)果同樣是難下定論的。

閱讀非襯線字體頁(yè)面的用戶平均閱讀速度高了9%，但是差異沒(méi)有達(dá)到統(tǒng)計(jì)顯著水平。并且，用戶的理解率也非常接近：閱讀襯線字體頁(yè)面的用戶的理解分?jǐn)?shù)高了1%，同樣也是不顯著的。

唯一值得注意的區(qū)別是閱讀襯線字體的用戶抱怨的次數(shù)是另一組的兩倍(表示段落很難閱讀的用戶在襯線字體組和非襯線字體組分別是6人和3人)。

所以襯線字體有什么問(wèn)題呢?

首先，襯線改變了每個(gè)字母的輪廓，所以它們對(duì)有誦讀困難癥或視力障礙的人來(lái)說(shuō)更難識(shí)別。

第二，因?yàn)檫@些水平線非常小，它們?cè)诘头直媛实睦嫌?jì)算機(jī)屏幕上顯示效果很差。(智能手機(jī)和平板上的Retina屏幕有更高的分辨率，會(huì)讓襯線字體更容易閱讀。)

這意味著我們?cè)陔娮赢a(chǎn)品上只應(yīng)該使用非襯線字體嗎?

絕對(duì)不是。這只是意味著當(dāng)你選擇使用襯線字體的時(shí)候，要確保使用干凈而準(zhǔn)確的在線字體，并且——你知道的——用真實(shí)用戶去測(cè)試你的選擇。

選擇對(duì)用戶來(lái)說(shuō)合適的字體

你選擇的字體是用戶在你的網(wǎng)站或應(yīng)用中的整體體驗(yàn)中的主要部分。考慮完整的情境，而不是只是在設(shè)計(jì)的時(shí)候依賴某些規(guī)則。

你的用戶期待什么?

有什么更復(fù)雜的東西嗎?樂(lè)趣?極簡(jiǎn)主義?在訪問(wèn)網(wǎng)站或打開(kāi)你的應(yīng)用之前，用戶對(duì)你的品牌已經(jīng)有哪些了解?你想要?jiǎng)?chuàng)造怎樣的第一印象?

客戶在使用什么設(shè)備?

對(duì)于大多數(shù)電子設(shè)備來(lái)說(shuō)，你的用戶會(huì)在火車上，在電視前，在陽(yáng)光明媚的露臺(tái)上閱讀你的文本。確保保持他們的注意力，不要用難以閱讀的文字把他們趕跑。

用戶試圖完成什么?

購(gòu)物?學(xué)習(xí)?娛樂(lè)?確保你提供的體驗(yàn)與用戶的需求(以及你的商業(yè)目標(biāo))相匹配。

如果你希望客戶快速理解你的產(chǎn)品特點(diǎn)以便他們決定下單，那么選擇讓他們瞄一眼就能夠理解的字體。如果你希望用一個(gè)長(zhǎng)而吸引人的故事保持讀者的注意力，那么選擇讓用戶容易保持盯住頁(yè)面的字體。

圖標(biāo)

不管設(shè)計(jì)的是網(wǎng)站還是應(yīng)用，在用戶界面上的任何圖標(biāo)都應(yīng)該為某個(gè)目的服務(wù)。當(dāng)然，圖標(biāo)的存在是為了節(jié)約屏幕空間。但是更重要的是，圖標(biāo)應(yīng)該幫助你的用戶。如果得到正確的處理，圖標(biāo)可以幫你指導(dǎo)用戶快速而直觀地完成任務(wù)，而不需要過(guò)多地依賴文本。但是如果處理得不好，圖標(biāo)也會(huì)迷惑用戶，把他們帶向錯(cuò)誤的路徑，并摧毀他們使用產(chǎn)品的體驗(yàn)。

因?yàn)橛泻芏嗟膽?yīng)用和網(wǎng)站都在使用令人迷惑的圖標(biāo)，我們想知道一個(gè)問(wèn)題：讓一個(gè)圖標(biāo)達(dá)到用戶友好需要做什么呢?

我們做了一個(gè)遠(yuǎn)程可用性研究去探索移動(dòng)應(yīng)用上的圖標(biāo)帶來(lái)的用戶體驗(yàn)。我們觀察了35個(gè)用戶與一系列安卓應(yīng)用上的190個(gè)圖標(biāo)的交互過(guò)程。有些圖標(biāo)是很明顯的，比如放大鏡表示搜索功能。有一些不太明顯，比如一個(gè)旗幟表示群成員。有一些有文字標(biāo)簽，有一些則沒(méi)有。

圖標(biāo)類型及其對(duì)用戶體驗(yàn)的影響

令人舒服的圖標(biāo)

有一些圖標(biāo)幾乎是通用的。一個(gè)房子形狀的圖標(biāo)會(huì)帶你到主頁(yè)或者主屏幕，一個(gè)購(gòu)物車會(huì)讓你購(gòu)買東西，這都是相當(dāng)安全的猜測(cè)。

在大多數(shù)情況下，圖標(biāo)不是一個(gè)用來(lái)發(fā)揮創(chuàng)意的地方。你可以依賴其他設(shè)計(jì)元素去傳達(dá)品牌信息。你的圖標(biāo)的首要工作是指導(dǎo)你的用戶到他們想要去的地方。用奇特的或者過(guò)度聰明的圖標(biāo)表示基本功能，會(huì)摧毀用戶體驗(yàn)。保持簡(jiǎn)單就好。

圖標(biāo)的作用是指導(dǎo)用戶。請(qǐng)保持簡(jiǎn)單。

令人迷惑的和矛盾的圖標(biāo)

當(dāng)你使用有著矛盾或者多重含義的常用圖標(biāo)時(shí)，麻煩就來(lái)了。

想象一下你在一個(gè)應(yīng)用中的一張圖片下面看到這個(gè)圖標(biāo)。它表示什么?如果你點(diǎn)擊了它會(huì)發(fā)生什么?這個(gè)圖標(biāo)是用來(lái)表示你喜歡某些東西，這非常清楚。

但是它會(huì)把這個(gè)圖片或項(xiàng)目保存到收藏夾列表嗎?它會(huì)通知某人你喜歡了它嗎?它會(huì)塑造你的偏好并在你的信息來(lái)源中添加相似的圖片或項(xiàng)目嗎?或者它只是對(duì)支持的一種通用表達(dá)?

就像這個(gè)心，有很多圖標(biāo)我們常常在多種情境下見(jiàn)到，但是它們?cè)诓煌瑘D標(biāo)中的的功能都稍有不同?？紤]以下這些有多重含義的常用圖標(biāo)：

即使是在應(yīng)用本身的情境中，這些符號(hào)也可能很令人迷惑，用戶可能期待某個(gè)結(jié)果但卻得到了一個(gè)不同的結(jié)果。

更別說(shuō)iOS和安卓系統(tǒng)慣例的不同了。不同操作系統(tǒng)的欄圖標(biāo)可能非常不同，給用戶帶來(lái)了額外的困惑。如果你對(duì)這件事情不太確信，請(qǐng)閱讀這篇描述了分享圖標(biāo)的12種變化的文章，其中幾種很容易被誤解為其他東西而不是分享。

過(guò)時(shí)的圖標(biāo)

很多常用的圖標(biāo)參照了過(guò)時(shí)的或者廢棄的技術(shù)。很多應(yīng)用中保留的保存圖標(biāo)，對(duì)于大多數(shù)使用過(guò)軟盤的人來(lái)說(shuō)沒(méi)有問(wèn)題，但很多95后會(huì)認(rèn)為這些老人家們堅(jiān)持使用這種圖標(biāo)是個(gè)怪癖。繼續(xù)使用像軟盤這種圖標(biāo)會(huì)讓你的品牌對(duì)年輕用戶群來(lái)說(shuō)顯得過(guò)時(shí)。即使是電話圖標(biāo)也可能需要演變，因?yàn)槟贻p的用戶已經(jīng)不太能夠辨認(rèn)出電話機(jī)了。

獨(dú)一無(wú)二的圖標(biāo)

最棘手的圖標(biāo)挑戰(zhàn)之一是當(dāng)你的產(chǎn)品有獨(dú)一無(wú)二的功能，不在分享、喜歡、上傳圖片、輸入文本等標(biāo)準(zhǔn)動(dòng)作之內(nèi)時(shí)，應(yīng)該怎么做。你如何使用一個(gè)簡(jiǎn)單的符號(hào)傳達(dá)更加抽象的概念——比如觀看你即將到來(lái)的旅游，向朋友發(fā)送一個(gè)有聲讀物，查看你的歷史訂單，或者追蹤你的睡眠模式?

很多設(shè)計(jì)師在做嘗試，很多設(shè)計(jì)師失敗了。無(wú)論在你知道一個(gè)圖標(biāo)應(yīng)該代表什么之后圖標(biāo)具有怎樣的意義，對(duì)于第一次使用的用戶來(lái)說(shuō)它都可能帶來(lái)完全不同的體驗(yàn)。

這并不是說(shuō)如果你想要?jiǎng)?chuàng)造一個(gè)可用的用戶界面，就不能遠(yuǎn)離通用圖標(biāo)。有一些獨(dú)特的圖標(biāo)不管對(duì)新用戶還是老用戶來(lái)說(shuō)都能有效地傳達(dá)它們的意義。

推特著名的羽管筆圖標(biāo)就是很好的例子。盡管沒(méi)有標(biāo)簽，在我們的研究中仍然有80%的用戶正確地猜到它是干什么的。

讓我們看看推特在這個(gè)圖標(biāo)上做了些什么：

布局。推特將用來(lái)創(chuàng)造(寫推特，拍照，以及上傳圖片)和用來(lái)探索(消息來(lái)源，通知，信息，人和搜索)的圖標(biāo)分開(kāi)了。如果用戶想要寫一篇帖子，屏幕的底部就是一站式服務(wù)區(qū)。

在桌面版上的文字。很多人是首先在電腦上使用推特的。這樣他們就會(huì)很明顯地看到這個(gè)圖標(biāo)旁邊的解釋文字。

可記憶性。雖然羽管筆可以被認(rèn)為是過(guò)時(shí)的技術(shù)，就像軟盤一樣，但是它是非常獨(dú)特的，并且容易記憶。你不會(huì)在很多應(yīng)用中看到羽管筆，所以用戶不必嘗試去分辨與其他產(chǎn)品功能上的細(xì)微差異。

品牌化。筆上的羽毛與推特logo上的羽毛對(duì)應(yīng)。這在品牌和發(fā)表推文的動(dòng)作之間創(chuàng)造了一種整體感。

標(biāo)簽與可用性

針對(duì)于那些認(rèn)為一圖勝千言的人來(lái)說(shuō)可能會(huì)有些失望：

文本標(biāo)簽會(huì)極大地提高圖標(biāo)的可用性。

我們很容易期望用戶(尤其是手機(jī)用戶)會(huì)到處點(diǎn)，高興地嘗試所有不同的圖標(biāo)直到他們發(fā)現(xiàn)了每個(gè)圖標(biāo)是干嘛的。

但實(shí)際上，用戶會(huì)被新的用戶界面嚇到并且不會(huì)像我們期望的那樣在他們的舒適區(qū)之外探索。在一個(gè)不熟悉的產(chǎn)品中，用戶想要在采取動(dòng)作之前就清楚地知道這樣做會(huì)發(fā)生什么。

你的圖標(biāo)需要在用戶點(diǎn)擊之前為用戶設(shè)定清楚的期望，而這通常意味著使用文本標(biāo)簽。

我們的研究結(jié)果：有標(biāo)簽VS沒(méi)有標(biāo)簽

在我們的研究中，我們發(fā)現(xiàn)對(duì)有標(biāo)簽的圖標(biāo)來(lái)說(shuō)，在88%的情況下用戶能夠在點(diǎn)擊之前正確地預(yù)測(cè)將會(huì)發(fā)生什么。

而對(duì)于沒(méi)有標(biāo)簽的圖標(biāo)來(lái)說(shuō)，這個(gè)比率只有60%。

并且如果沒(méi)有標(biāo)簽的圖標(biāo)在應(yīng)用中是獨(dú)一無(wú)二的，那么用戶在點(diǎn)擊之前正確預(yù)測(cè)將會(huì)發(fā)生什么的比例只有34%。

比如說(shuō)，Meetup應(yīng)用使用一個(gè)名牌圖標(biāo)表示小組活動(dòng)并加上了一些額外的品牌識(shí)別。但是，因?yàn)橐粋€(gè)空的名牌不會(huì)讓大多數(shù)人想起活動(dòng)或者通知，所以他們?cè)黾恿藰?biāo)簽。100%的測(cè)試參與者能夠正確地猜測(cè)出這個(gè)加了標(biāo)簽的圖標(biāo)能干什么。

變通方法

有一些設(shè)計(jì)師發(fā)現(xiàn)加標(biāo)簽違背了使用圖標(biāo)的目的，并且使用戶界面顯得雜亂。為了避免使用標(biāo)簽，他們?cè)诮坛袒蛘咭龑?dǎo)頁(yè)面中加上了關(guān)于使用圖標(biāo)的說(shuō)明，希望訓(xùn)練用戶如何與圖標(biāo)交互。

雖然這可能是用來(lái)介紹獨(dú)特的或者不通用的圖標(biāo)的好方式，但是這不應(yīng)該替代更加直覺(jué)化的設(shè)計(jì)。記住一件事：用戶常常跳過(guò)教程或者很快地忘記了他們學(xué)過(guò)的一切。教程應(yīng)該是一個(gè)工具，而不是一個(gè)依靠。

對(duì)設(shè)計(jì)決策進(jìn)行測(cè)試和驗(yàn)證

在做一個(gè)新的設(shè)計(jì)的時(shí)候，跟隨好實(shí)踐比如高對(duì)比度按鈕和可讀性強(qiáng)的字體是一個(gè)很好的開(kāi)始。但是最終，正確的設(shè)計(jì)決策是能夠帶來(lái)預(yù)期結(jié)果的那個(gè)。去發(fā)現(xiàn)你的設(shè)計(jì)決策是否給用戶帶來(lái)直覺(jué)并且以你希望的方式影響他們。

驗(yàn)證你的假設(shè)

把你的設(shè)計(jì)當(dāng)做是你需要常常去驗(yàn)證、反證或改進(jìn)的假設(shè)。這會(huì)給你信心去嘗試很多實(shí)驗(yàn)并發(fā)現(xiàn)什么才能夠帶來(lái)最好的商業(yè)結(jié)果以及愉悅你的用戶。

做定期的用戶測(cè)試，去聽(tīng)用戶如何描述他們?cè)谑褂媚愕木W(wǎng)站、應(yīng)用或者產(chǎn)品時(shí)的體驗(yàn)。你將會(huì)聽(tīng)到他們描述你的品牌與什么情感聯(lián)系在一起，你會(huì)看到很多因?yàn)榱钊艘苫蟮膱D標(biāo)或者難以閱讀的文字而讓他們感到困惑的地方。

但是你不必等到有了一個(gè)開(kāi)發(fā)完成的真實(shí)的產(chǎn)品才能去收集用戶反饋;你可以在原型設(shè)計(jì)階段就開(kāi)始用戶測(cè)試。這會(huì)幫助你驗(yàn)證你的設(shè)計(jì)決策并帶著信心繼續(xù)，或者快速發(fā)現(xiàn)和修復(fù)所有不起作用的設(shè)計(jì)。

如果你的設(shè)計(jì)已經(jīng)實(shí)現(xiàn)了，使用A/B測(cè)試驗(yàn)證你的設(shè)計(jì)決策是否影響了用戶行為，轉(zhuǎn)化率以及以你期望的方式帶來(lái)的收益。

簡(jiǎn)單的用戶測(cè)試問(wèn)題

這是當(dāng)你在驗(yàn)證你的設(shè)計(jì)時(shí)可以詢問(wèn)用戶的一些問(wèn)題：

• 在使用【你的網(wǎng)站或應(yīng)用】之前，請(qǐng)告訴我們你對(duì)一個(gè)從事【你的公司的業(yè)務(wù)】的公司的期望。你認(rèn)為它能夠做什么?你覺(jué)得這個(gè)網(wǎng)站或應(yīng)用應(yīng)該長(zhǎng)什么樣子?
• 你首先會(huì)點(diǎn)擊的是什么東西?
• 你會(huì)用哪三個(gè)詞描述這個(gè)網(wǎng)站或應(yīng)用?
• 使用1分(非常不愉快)到5分(非常愉快)評(píng)價(jià)這個(gè)網(wǎng)站或應(yīng)用給你的感覺(jué)?
• 你有多大可能性信任這家公司?
• 這個(gè)網(wǎng)站或應(yīng)用相比起你的期望如何?

不要點(diǎn)擊，告訴我們你認(rèn)為點(diǎn)擊了一個(gè)這種形狀的圖標(biāo)會(huì)發(fā)生什么?然后點(diǎn)擊它，實(shí)際上發(fā)生了什么?

如果你的設(shè)計(jì)決策對(duì)用戶起作用并且能夠指導(dǎo)他們使用你的用戶界面，那么用戶就能夠完成你期望他們完成的事情了。這不只是一個(gè)有效的設(shè)計(jì)——這也是一種巧妙的商業(yè)行為。

標(biāo)題名稱：不同的視覺(jué)設(shè)計(jì)元素是如何影響網(wǎng)站用戶體驗(yàn)
標(biāo)題URL：http://m.rwnh.cn/news/169919.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有用戶體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)