文章主要分析了不同的視覺設(shè)計(jì)元素是如何影響網(wǎng)站用戶體驗(yàn)，希望通過文章的解讀能夠?qū)δ愕漠a(chǎn)品設(shè)計(jì)帶來些啟發(fā)。
也許是因?yàn)槲以谝曈X設(shè)計(jì)上沒有太多經(jīng)驗(yàn)，我發(fā)現(xiàn)平常在與視覺設(shè)計(jì)師討論設(shè)計(jì)方案時(shí)，我們常常討論的是：“我覺得這樣布局很奇怪”、“我覺得A不太好看”、“這個(gè)地方給我?guī)砹四撤NXXX的感覺”、“這樣顯示會不會給用戶帶來某種誤解”……
不難發(fā)現(xiàn)，大多數(shù)時(shí)候我們討論的是一種捉摸不透的“感覺”。視覺設(shè)計(jì)固然需要美感和源于直覺的創(chuàng)造力，但是作為一個(gè)“設(shè)計(jì)”領(lǐng)域，它需要有更多理性的思考。為什么應(yīng)該是這樣?這對用戶的情緒和行為帶來了怎樣的影響?我們需要一些研究結(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è)計(jì)決策是如何幫助或者阻礙你的用戶的。
我們在UserTesting執(zhí)行和分析過數(shù)十萬個(gè)可用性研究，從中看過了很多有效的(以及不那么有效的)視覺設(shè)計(jì)決策?，F(xiàn)在我們想分享一下我們從這些研究中學(xué)到的東西。
本文是關(guān)于不同的視覺設(shè)計(jì)元素是如何影響網(wǎng)站、APP或產(chǎn)品中的用戶體驗(yàn)的。我們將會談到以下內(nèi)容：
你將會學(xué)到如何做出對用戶友好的設(shè)計(jì)決策，并且為你的公司帶來最好的結(jié)果。
在設(shè)計(jì)師的工具箱中，顏色是最有力的工具之一。
你可以使用顏色去影響用戶的情感，吸引他們的注意力，把他們置入適于購物的情緒體驗(yàn)中。顏色同時(shí)也是客戶對一個(gè)品牌認(rèn)知的主要因素之一。
由于可能的顏色組合是無限的，很難去決定哪種顏色會對你的網(wǎng)站或應(yīng)用產(chǎn)生最大影響。去測試所有的顏色是不可能的，但是我們總結(jié)了關(guān)于顏色如何影響用戶的態(tài)度和行為的一些技巧和趨勢。
顏色理論與用戶體驗(yàn)
基礎(chǔ)顏色理論的原理是雕琢用戶體驗(yàn)的一個(gè)重要起點(diǎn)。
互補(bǔ)色可以用來吸引觀看者的注意力并且創(chuàng)造活力，而類似色可以用來在設(shè)計(jì)中創(chuàng)造協(xié)調(diào)感和一致感。考慮一下在主頁或者主屏幕上你可以如何使用互補(bǔ)或類似的配色方案，去為用戶奠定基調(diào)并且讓用戶進(jìn)入能夠促使他們采取你期望的行為的心態(tài)中去。
當(dāng)你在文本中使用顏色時(shí)，記住把兩種低對比度的顏色放在一起會使它們非常難以閱讀(不管它們是互補(bǔ)色還是類似色)。
在手機(jī)屏幕上尤其如此，因?yàn)橛脩舾赡茉趹敉饣蛘呙髁恋牡胤绞褂檬謾C(jī)以致屏幕比較刺眼。
(譯注：原文描述了他們做的一個(gè)關(guān)于顏色偏好的性別差異的研究，但由于樣本只有50人且差異不大，在此不譯，感興趣的同學(xué)可以查看原文。)
顏色帶來的聯(lián)想在不同文化下，對不同的個(gè)體都不一樣。不同性別經(jīng)常有不同的顏色偏好，年度流行色對年輕人或者高收入人群都可能更有吸引力。
色彩心理學(xué)與關(guān)聯(lián)
眾所周知，顏色可以喚起情感，以下是傳統(tǒng)上與顏色關(guān)聯(lián)的情感：
商標(biāo)與行業(yè)
很多著名公司在客戶購買之前很久就已經(jīng)用顏色喚起了特定的情緒。
客戶也會將顏色和特定的行業(yè)建立聯(lián)系，比如藍(lán)色和科技，綠色和健康，紅色和快餐。當(dāng)有些公司為了匹配客戶期望而選擇用行業(yè)通用色時(shí)，有些公司發(fā)現(xiàn)反其道而行之可以快速讓人留下印象。
舉個(gè)栗子。在旅游業(yè)中，藍(lán)色對于網(wǎng)站和應(yīng)用來說是非常常用的?？匆豢聪旅孢@個(gè)網(wǎng)站主頁：
藍(lán)色代表著可信賴，這對旅游公司來說是一個(gè)好事。但是旅游網(wǎng)站使用藍(lán)色并不是一個(gè)鐵則。
維珍美國航空在設(shè)計(jì)網(wǎng)站時(shí)就選擇了反其道而行。
當(dāng)它與用戶對航空網(wǎng)站的期待不同時(shí)，就會顯得比較突出。選擇一個(gè)意料之外的顏色可以有效地讓用戶體驗(yàn)到高興，并且讓他們記住你的公司。
考慮你的目標(biāo)客戶有多傳統(tǒng)。
他們對背離規(guī)范有什么反應(yīng)?
這會令他們感到開心還是迷惑?
如果你的配色背離了傳統(tǒng)預(yù)期，你的公司傳達(dá)出了什么信息?
顏色與可及性
你的網(wǎng)站或應(yīng)用對有視覺障礙的用戶來說是什么樣子的?
大約8%的男性和0.5%的女性患有某種形式的色盲。色盲有多種情況，但紅綠色盲是最常見的。紅綠色盲患者無法區(qū)分紅色，綠色和具有相似值的黃色，尤其是當(dāng)綠色中含有的黃色比藍(lán)色更多時(shí)，比如下面的橄欖色背景色。
同樣的按鈕，左邊是視力正常者看到的，右邊是紅綠色盲看到的
如果你在使用低對比度的顏色，要知道色盲用戶可能根本無法辨認(rèn)文字或者圖片。在寒假這個(gè)問題尤其嚴(yán)重，大量網(wǎng)站充斥著節(jié)日喜慶的紅色和綠色。記住，如果有8%的男性訪客無法看到按鈕上的文字“Buy Now”，那么你可能正在流失掉數(shù)量可觀的轉(zhuǎn)化。
如果你不得不使用對色盲患者來說難以區(qū)分的顏色組合，你仍然可以通過提高顏色之間的對比度來保證可及性。比如下面這張圖使用了非常暗的紅色和非常亮的綠色，不管是否色盲都很容易看清楚。
同樣的按鈕，左邊是視力正常者看到的，右邊是紅綠色盲看到的
還有一些關(guān)于可及性的要點(diǎn)：不要忘記那些可能在使用屏幕閱讀器訪問你的網(wǎng)站的用戶。你是否曾經(jīng)在填寫表格的時(shí)候收到一個(gè)錯(cuò)誤信息，比如“標(biāo)紅的字段是必填的”?這對于那些無法看到紅色字符的人來說是極其糟糕的體驗(yàn)。最好避免在網(wǎng)站或者應(yīng)用中提到顏色，并且提供更加具體的錯(cuò)誤信息，比如“郵件地址是必填的”。
可及性測試工具
有一些很棒的工具可以幫助你測試網(wǎng)站的可及性。
下載Color Oracle的色盲模擬器，有Windows，Mac和Linux版本;
將你的靜態(tài)圖片上傳到Coblis，可以用九種不同的顏色視角去體驗(yàn)它們;
甚至可以邀請色盲患者去測試網(wǎng)站，看是否有他們難以看清的東西。
有些優(yōu)化轉(zhuǎn)化率的專家會聲稱對按鈕來說最好的顏色是大膽的、吸引眼球的紅色，但也有人說綠色最佳因?yàn)榫G色表示“開始”。
有大量的A/B測試顯示了CTA按鈕(CallToAction)的顏色改變會對轉(zhuǎn)化帶來極大的影響。HubSpot在以前仍叫做Performable的時(shí)候分享了這個(gè)著名的測試：
HubSpot的A/B測試
盡管他們原來預(yù)測綠色按鈕會表現(xiàn)得更好，但是紅色按鈕帶來的點(diǎn)擊量高了21%。但是他們?nèi)匀惶嵝炎x者，這個(gè)測試結(jié)果本身不應(yīng)該使所有人都把按鈕變成紅色。可能的解釋是他們的用戶就是喜歡紅色，盡管其他的用戶可能更喜歡綠色?；蛘撸赡艿那闆r是，這個(gè)紅色按鈕得到了更多注意是因?yàn)樗沁@個(gè)頁面上唯一的紅色物體。
壞消息是并不存在一種魔法顏色能在所有網(wǎng)站上都表現(xiàn)最優(yōu)。好消息是有一些經(jīng)驗(yàn)法則可以幫助你有效地使用顏色。
對比是關(guān)鍵
這看起來很明顯，但是我們還是要說：如果你希望用戶點(diǎn)擊某處，你要讓它足夠突出。如果你的網(wǎng)站或應(yīng)用使用了很多橘色，用戶可能不會馬上注意到一個(gè)橘色的按鈕，不管這個(gè)橘色按鈕在其他公司的A/B測試中表現(xiàn)多好。
在我們的研究中，我們讓用戶指出他們在每個(gè)網(wǎng)站上首先會點(diǎn)擊的東西。不出意料，用戶更可能點(diǎn)擊與背景形成強(qiáng)烈對比的CTA按鈕。
明亮令人難忘
在上面提到的那個(gè)50人的研究中，我們問的最后一個(gè)問題是用戶訪問的哪個(gè)網(wǎng)站最令人印象深刻。
50%的用戶選擇了明亮的網(wǎng)站。有趣的是很多選擇深色或者白色網(wǎng)站的用戶是出于一些與設(shè)計(jì)無關(guān)的原因。比如一個(gè)用戶認(rèn)為Dropbox是最印象深刻的因?yàn)樗呀?jīng)有了Dropbox賬號。
文字的主要目的是幫助用戶去做你需要讓他們做的事情——不管是探索產(chǎn)品，學(xué)習(xí)如何玩一個(gè)游戲，還是瀏覽一些令人愉快的故事。
遺憾的是，在網(wǎng)站和應(yīng)用排版中有很多相互矛盾的選項(xiàng)，并且沒有一個(gè)適用于所有情況的嚴(yán)格規(guī)則(否則事情也太簡單了吧)。但是你可以做一些事情，以保證你為網(wǎng)站或應(yīng)用選擇的字體對你和你的用戶有所幫助，而不是跟你唱反調(diào)。
字號與行長
文字的尺寸和布局會對在線閱讀的體驗(yàn)帶來巨大影響。年齡較大的人或者有視力障礙的人在面對小字的時(shí)候尤其痛苦。即使是視力正常的人盯著屏幕太久后也會覺得疲勞——當(dāng)他們?yōu)榱碎喿x不得不斜視或者放大時(shí)會感到激怒。
看看下面這個(gè)例子：對于臺式機(jī)來說，正文較好的處理方式是每行50-75個(gè)字符，字號不低于16pt。
對比下面這個(gè)頁面，每行有100個(gè)字符，并且字體更小。
這個(gè)問題在手機(jī)上有所延伸。對用戶來說在一個(gè)小的明亮的屏幕上閱讀是一件很頭疼的事情。比較好的做法是在手機(jī)上每行顯示30-40個(gè)字符。下面是在智能手機(jī)上看到的兩個(gè)網(wǎng)站，第一個(gè)使用了30-40個(gè)字符，而第二個(gè)使用了為臺式機(jī)設(shè)計(jì)的網(wǎng)站上的尺寸。
因?yàn)閷懰赖淖痔?比如，16px)在不同的設(shè)備上顯示效果不同，所以試著使用rem單位去定義字號(譯注：rem是CSS3引入的字體大小單位，是指相對于根元素的字體大小，便于實(shí)現(xiàn)響應(yīng)式設(shè)計(jì))。
關(guān)于文本顏色和可讀性，有兩種不同意見：
一種認(rèn)為高對比度更好，白底黑字是最具有可讀性的組合;
另一種認(rèn)為太大的對比度反而難以閱讀，使用灰色陰影更好。
應(yīng)用多少對比度需要微妙的平衡。因?yàn)槠聊恢g的差異太大，在設(shè)計(jì)師的屏幕上顯得足夠深的灰色在用戶的屏幕上可能更淡。
在手機(jī)上有足夠的對比度尤其重要，因?yàn)橛脩艨赡苄枰趹敉饣蛘呙髁恋牡胤绞褂谩?
W3C網(wǎng)站內(nèi)容可及性指南是一個(gè)不錯(cuò)的開始。他們設(shè)定了最小對比度的標(biāo)準(zhǔn)，保證適度低視力的用戶能夠閱讀你的文本。你可以使用一個(gè)對比率工具快速找到你設(shè)定的對比度是否在合適范圍中。
但是純黑的文本(#000000)對于誦讀困難者來說更難以閱讀，并且經(jīng)過長時(shí)間閱讀后會導(dǎo)致眼睛疲勞。
很多設(shè)計(jì)師選擇使用非常深的灰色或者實(shí)際的黑色(而不是純黑)，比如#0D0D0D，#0F0F0F，或者#141414。
一旦你選擇了顏色，讓真實(shí)用戶在自然環(huán)境中使用任何你能想到的設(shè)備試用是絕對需要的。如果任何測試用戶在閱讀你的文本時(shí)遇到了麻煩，那么有理由相信你的客戶正在遭遇相同的問題。
在傳統(tǒng)的印刷排版中有個(gè)常識，襯線字體可以通過在水平方向上溫和地引領(lǐng)視線而提高可讀性和閱讀速度。
但是關(guān)于這兩種字體的實(shí)際區(qū)別的研究結(jié)果非常不確定。我們需要自己做試驗(yàn)，所以我們做了一個(gè)研究，讓30個(gè)用戶閱讀兩個(gè)除了字體之外完全相同的頁面(A使用的是Arial，B使用的是Times New Roman)，并測量閱讀時(shí)間和理解程度。
我們得出的結(jié)果同樣是難下定論的。
閱讀非襯線字體頁面的用戶平均閱讀速度高了9%，但是差異沒有達(dá)到統(tǒng)計(jì)顯著水平。并且，用戶的理解率也非常接近：閱讀襯線字體頁面的用戶的理解分?jǐn)?shù)高了1%，同樣也是不顯著的。
唯一值得注意的區(qū)別是閱讀襯線字體的用戶抱怨的次數(shù)是另一組的兩倍(表示段落很難閱讀的用戶在襯線字體組和非襯線字體組分別是6人和3人)。
所以襯線字體有什么問題呢?
首先，襯線改變了每個(gè)字母的輪廓，所以它們對有誦讀困難癥或視力障礙的人來說更難識別。
第二，因?yàn)檫@些水平線非常小，它們在低分辨率的老計(jì)算機(jī)屏幕上顯示效果很差。(智能手機(jī)和平板上的Retina屏幕有更高的分辨率，會讓襯線字體更容易閱讀。)
這意味著我們在電子產(chǎn)品上只應(yīng)該使用非襯線字體嗎?
絕對不是。這只是意味著當(dāng)你選擇使用襯線字體的時(shí)候，要確保使用干凈而準(zhǔn)確的在線字體，并且——你知道的——用真實(shí)用戶去測試你的選擇。
你選擇的字體是用戶在你的網(wǎng)站或應(yīng)用中的整體體驗(yàn)中的主要部分?？紤]完整的情境，而不是只是在設(shè)計(jì)的時(shí)候依賴某些規(guī)則。
你的用戶期待什么?
有什么更復(fù)雜的東西嗎?樂趣?極簡主義?在訪問網(wǎng)站或打開你的應(yīng)用之前，用戶對你的品牌已經(jīng)有哪些了解?你想要?jiǎng)?chuàng)造怎樣的第一印象?
客戶在使用什么設(shè)備?
對于大多數(shù)電子設(shè)備來說，你的用戶會在火車上，在電視前，在陽光明媚的露臺上閱讀你的文本。確保保持他們的注意力，不要用難以閱讀的文字把他們趕跑。
用戶試圖完成什么?
購物?學(xué)習(xí)?娛樂?確保你提供的體驗(yàn)與用戶的需求(以及你的商業(yè)目標(biāo))相匹配。
如果你希望客戶快速理解你的產(chǎn)品特點(diǎn)以便他們決定下單，那么選擇讓他們瞄一眼就能夠理解的字體。如果你希望用一個(gè)長而吸引人的故事保持讀者的注意力，那么選擇讓用戶容易保持盯住頁面的字體。
不管設(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ù)，而不需要過多地依賴文本。但是如果處理得不好，圖標(biāo)也會迷惑用戶，把他們帶向錯(cuò)誤的路徑，并摧毀他們使用產(chǎn)品的體驗(yàn)。
因?yàn)橛泻芏嗟膽?yīng)用和網(wǎng)站都在使用令人迷惑的圖標(biāo)，我們想知道一個(gè)問題：讓一個(gè)圖標(biāo)達(dá)到用戶友好需要做什么呢?
我們做了一個(gè)遠(yuǎn)程可用性研究去探索移動應(yīng)用上的圖標(biāo)帶來的用戶體驗(yàn)。我們觀察了35個(gè)用戶與一系列安卓應(yīng)用上的190個(gè)圖標(biāo)的交互過程。有些圖標(biāo)是很明顯的，比如放大鏡表示搜索功能。有一些不太明顯，比如一個(gè)旗幟表示群成員。有一些有文字標(biāo)簽，有一些則沒有。
圖標(biāo)類型及其對用戶體驗(yàn)的影響
令人舒服的圖標(biāo)
有一些圖標(biāo)幾乎是通用的。一個(gè)房子形狀的圖標(biāo)會帶你到主頁或者主屏幕，一個(gè)購物車會讓你購買東西，這都是相當(dāng)安全的猜測。
在大多數(shù)情況下，圖標(biāo)不是一個(gè)用來發(fā)揮創(chuàng)意的地方。你可以依賴其他設(shè)計(jì)元素去傳達(dá)品牌信息。你的圖標(biāo)的首要工作是指導(dǎo)你的用戶到他們想要去的地方。用奇特的或者過度聰明的圖標(biāo)表示基本功能，會摧毀用戶體驗(yàn)。保持簡單就好。
圖標(biāo)的作用是指導(dǎo)用戶。請保持簡單。
令人迷惑的和矛盾的圖標(biāo)
當(dāng)你使用有著矛盾或者多重含義的常用圖標(biāo)時(shí)，麻煩就來了。
想象一下你在一個(gè)應(yīng)用中的一張圖片下面看到這個(gè)圖標(biāo)。它表示什么?如果你點(diǎn)擊了它會發(fā)生什么?這個(gè)圖標(biāo)是用來表示你喜歡某些東西，這非常清楚。
但是它會把這個(gè)圖片或項(xiàng)目保存到收藏夾列表嗎?它會通知某人你喜歡了它嗎?它會塑造你的偏好并在你的信息來源中添加相似的圖片或項(xiàng)目嗎?或者它只是對支持的一種通用表達(dá)?
就像這個(gè)心，有很多圖標(biāo)我們常常在多種情境下見到，但是它們在不同圖標(biāo)中的的功能都稍有不同?？紤]以下這些有多重含義的常用圖標(biāo)：
即使是在應(yīng)用本身的情境中，這些符號也可能很令人迷惑，用戶可能期待某個(gè)結(jié)果但卻得到了一個(gè)不同的結(jié)果。
更別說iOS和安卓系統(tǒng)慣例的不同了。不同操作系統(tǒng)的欄圖標(biāo)可能非常不同，給用戶帶來了額外的困惑。如果你對這件事情不太確信，請閱讀這篇描述了分享圖標(biāo)的12種變化的文章，其中幾種很容易被誤解為其他東西而不是分享。
過時(shí)的圖標(biāo)
很多常用的圖標(biāo)參照了過時(shí)的或者廢棄的技術(shù)。很多應(yīng)用中保留的保存圖標(biāo)，對于大多數(shù)使用過軟盤的人來說沒有問題，但很多95后會認(rèn)為這些老人家們堅(jiān)持使用這種圖標(biāo)是個(gè)怪癖。繼續(xù)使用像軟盤這種圖標(biāo)會讓你的品牌對年輕用戶群來說顯得過時(shí)。即使是電話圖標(biāo)也可能需要演變，因?yàn)槟贻p的用戶已經(jīng)不太能夠辨認(rèn)出電話機(jī)了。
獨(dú)一無二的圖標(biāo)
最棘手的圖標(biāo)挑戰(zhàn)之一是當(dāng)你的產(chǎn)品有獨(dú)一無二的功能，不在分享、喜歡、上傳圖片、輸入文本等標(biāo)準(zhǔn)動作之內(nèi)時(shí)，應(yīng)該怎么做。你如何使用一個(gè)簡單的符號傳達(dá)更加抽象的概念——比如觀看你即將到來的旅游，向朋友發(fā)送一個(gè)有聲讀物，查看你的歷史訂單，或者追蹤你的睡眠模式?
很多設(shè)計(jì)師在做嘗試，很多設(shè)計(jì)師失敗了。無論在你知道一個(gè)圖標(biāo)應(yīng)該代表什么之后圖標(biāo)具有怎樣的意義，對于第一次使用的用戶來說它都可能帶來完全不同的體驗(yàn)。
這并不是說如果你想要?jiǎng)?chuàng)造一個(gè)可用的用戶界面，就不能遠(yuǎn)離通用圖標(biāo)。有一些獨(dú)特的圖標(biāo)不管對新用戶還是老用戶來說都能有效地傳達(dá)它們的意義。
推特著名的羽管筆圖標(biāo)就是很好的例子。盡管沒有標(biāo)簽，在我們的研究中仍然有80%的用戶正確地猜到它是干什么的。
讓我們看看推特在這個(gè)圖標(biāo)上做了些什么：
布局。推特將用來創(chuàng)造(寫推特，拍照，以及上傳圖片)和用來探索(消息來源，通知，信息，人和搜索)的圖標(biāo)分開了。如果用戶想要寫一篇帖子，屏幕的底部就是一站式服務(wù)區(qū)。
在桌面版上的文字。很多人是首先在電腦上使用推特的。這樣他們就會很明顯地看到這個(gè)圖標(biāo)旁邊的解釋文字。
可記憶性。雖然羽管筆可以被認(rèn)為是過時(shí)的技術(shù)，就像軟盤一樣，但是它是非常獨(dú)特的，并且容易記憶。你不會在很多應(yīng)用中看到羽管筆，所以用戶不必嘗試去分辨與其他產(chǎn)品功能上的細(xì)微差異。
品牌化。筆上的羽毛與推特logo上的羽毛對應(yīng)。這在品牌和發(fā)表推文的動作之間創(chuàng)造了一種整體感。
針對于那些認(rèn)為一圖勝千言的人來說可能會有些失望：
文本標(biāo)簽會極大地提高圖標(biāo)的可用性。
我們很容易期望用戶(尤其是手機(jī)用戶)會到處點(diǎn)，高興地嘗試所有不同的圖標(biāo)直到他們發(fā)現(xiàn)了每個(gè)圖標(biāo)是干嘛的。
但實(shí)際上，用戶會被新的用戶界面嚇到并且不會像我們期望的那樣在他們的舒適區(qū)之外探索。在一個(gè)不熟悉的產(chǎn)品中，用戶想要在采取動作之前就清楚地知道這樣做會發(fā)生什么。
你的圖標(biāo)需要在用戶點(diǎn)擊之前為用戶設(shè)定清楚的期望，而這通常意味著使用文本標(biāo)簽。
我們的研究結(jié)果：有標(biāo)簽VS沒有標(biāo)簽
在我們的研究中，我們發(fā)現(xiàn)對有標(biāo)簽的圖標(biāo)來說，在88%的情況下用戶能夠在點(diǎn)擊之前正確地預(yù)測將會發(fā)生什么。
而對于沒有標(biāo)簽的圖標(biāo)來說，這個(gè)比率只有60%。
并且如果沒有標(biāo)簽的圖標(biāo)在應(yīng)用中是獨(dú)一無二的，那么用戶在點(diǎn)擊之前正確預(yù)測將會發(fā)生什么的比例只有34%。
比如說，Meetup應(yīng)用使用一個(gè)名牌圖標(biāo)表示小組活動并加上了一些額外的品牌識別。但是，因?yàn)橐粋€(gè)空的名牌不會讓大多數(shù)人想起活動或者通知，所以他們增加了標(biāo)簽。100%的測試參與者能夠正確地猜測出這個(gè)加了標(biāo)簽的圖標(biāo)能干什么。
變通方法
有一些設(shè)計(jì)師發(fā)現(xiàn)加標(biāo)簽違背了使用圖標(biāo)的目的，并且使用戶界面顯得雜亂。為了避免使用標(biāo)簽，他們在教程或者引導(dǎo)頁面中加上了關(guān)于使用圖標(biāo)的說明，希望訓(xùn)練用戶如何與圖標(biāo)交互。
雖然這可能是用來介紹獨(dú)特的或者不通用的圖標(biāo)的好方式，但是這不應(yīng)該替代更加直覺化的設(shè)計(jì)。記住一件事：用戶常常跳過教程或者很快地忘記了他們學(xué)過的一切。教程應(yīng)該是一個(gè)工具，而不是一個(gè)依靠。
在做一個(gè)新的設(shè)計(jì)的時(shí)候，跟隨最佳實(shí)踐比如高對比度按鈕和可讀性強(qiáng)的字體是一個(gè)很好的開始。但是最終，正確的設(shè)計(jì)決策是能夠帶來預(yù)期結(jié)果的那個(gè)。去發(fā)現(xiàn)你的設(shè)計(jì)決策是否給用戶帶來直覺并且以你希望的方式影響他們。
驗(yàn)證你的假設(shè)
把你的設(shè)計(jì)當(dāng)做是你需要常常去驗(yàn)證、反證或改進(jìn)的假設(shè)。這會給你信心去嘗試很多實(shí)驗(yàn)并發(fā)現(xiàn)什么才能夠帶來最好的商業(yè)結(jié)果以及愉悅你的用戶。
做定期的用戶測試，去聽用戶如何描述他們在使用你的網(wǎng)站、應(yīng)用或者產(chǎn)品時(shí)的體驗(yàn)。你將會聽到他們描述你的品牌與什么情感聯(lián)系在一起，你會看到很多因?yàn)榱钊艘苫蟮膱D標(biāo)或者難以閱讀的文字而讓他們感到困惑的地方。
但是你不必等到有了一個(gè)開發(fā)完成的真實(shí)的產(chǎn)品才能去收集用戶反饋;你可以在原型設(shè)計(jì)階段就開始用戶測試。這會幫助你驗(yàn)證你的設(shè)計(jì)決策并帶著信心繼續(xù)，或者快速發(fā)現(xiàn)和修復(fù)所有不起作用的設(shè)計(jì)。
如果你的設(shè)計(jì)已經(jīng)實(shí)現(xiàn)了，使用A/B測試驗(yàn)證你的設(shè)計(jì)決策是否影響了用戶行為，轉(zhuǎn)化率以及以你期望的方式帶來的收益。
簡單的用戶測試問題
這是當(dāng)你在驗(yàn)證你的設(shè)計(jì)時(shí)可以詢問用戶的一些問題：
不要點(diǎn)擊，告訴我們你認(rèn)為點(diǎn)擊了一個(gè)這種形狀的圖標(biāo)會發(fā)生什么?然后點(diǎn)擊它，實(shí)際上發(fā)生了什么?
如果你的設(shè)計(jì)決策對用戶起作用并且能夠指導(dǎo)他們使用你的用戶界面，那么用戶就能夠完成你期望他們完成的事情了。這不只是一個(gè)有效的設(shè)計(jì)——這也是一種巧妙的商業(yè)行為。
以上就是海淘科技為你推出的全部內(nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：2017年度視覺設(shè)計(jì)趨勢，于此同時(shí)，海淘科技還提供了相關(guān)內(nèi)容，可點(diǎn)擊：app設(shè)計(jì),企業(yè)自媒體運(yùn)營
