文章主要分析了不同的視覺設(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的感覺”、“這樣顯示會(huì)不會(huì)給用戶帶來某種誤解”……

不難發(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í)到你的設(shè)計(jì)決策是如何幫助或者阻礙你的用戶的。

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

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

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

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

顏色

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

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

由于可能的顏色組合是無限的，很難去決定哪種顏色會(huì)對你的網(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í)，記住把兩種低對比度的顏色放在一起會(huì)使它們非常難以閱讀（不管它們是互補(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)的情感：

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

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

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

客戶也會(huì)將顏色和特定的行業(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í)，就會(huì)顯得比較突出。選擇一個(gè)意料之外的顏色可以有效地讓用戶體驗(yàn)到高興，并且讓他們記住你的公司。

• 考慮你的目標(biāo)客戶有多傳統(tǒng)。
• 他們對背離規(guī)范有什么反應(yīng)？
• 這會(huì)令他們感到開心還是迷惑？
• 如果你的配色背離了傳統(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)站，看是否有他們難以看清的東西。

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

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

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

HubSpot的A/B測試

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

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

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

對比是關(guān)鍵

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

在我們的研究中，我們讓用戶指出他們在每個(gè)網(wǎng)站上首先會(huì)點(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賬號(hào)。

字體

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

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

字號(hào)與行長

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

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

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

這個(gè)問題在手機(jī)上有所延伸。對用戶來說在一個(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引入的字體大小單位，是指相對于根元素的字體大小，便于實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)）。

文本的顏色對比度

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

• 一種認(rèn)為高對比度更好，白底黑字是最具有可讀性的組合；
• 另一種認(rèn)為太大的對比度反而難以閱讀，使用灰色陰影更好。

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

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

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

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

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

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

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

在傳統(tǒng)的印刷排版中有個(gè)常識(shí)，襯線字體可以通過在水平方向上溫和地引領(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è)字母的輪廓，所以它們對有誦讀困難癥或視力障礙的人來說更難識(shí)別。

第二，因?yàn)檫@些水平線非常小，它們在低分辨率的老計(jì)算機(jī)屏幕上顯示效果很差。（智能手機(jī)和平板上的Retina屏幕有更高的分辨率，會(huì)讓襯線字體更容易閱讀。）

這意味著我們在電子產(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è)備來說，你的用戶會(huì)在火車上，在電視前，在陽光明媚的露臺(tái)上閱讀你的文本。確保保持他們的注意力，不要用難以閱讀的文字把他們趕跑。

用戶試圖完成什么？

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

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

圖標(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ù)，而不需要過多地依賴文本。但是如果處理得不好，圖標(biāo)也會(huì)迷惑用戶，把他們帶向錯(cuò)誤的路徑，并摧毀他們使用產(chǎn)品的體驗(yàn)。

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

我們做了一個(gè)遠(yuǎn)程可用性研究去探索移動(dòng)應(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)會(huì)帶你到主頁或者主屏幕，一個(gè)購物車會(huì)讓你購買東西，這都是相當(dāng)安全的猜測。

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

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

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

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

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

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

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

即使是在應(yīng)用本身的情境中，這些符號(hào)也可能很令人迷惑，用戶可能期待某個(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后會(huì)認(rèn)為這些老人家們堅(jiān)持使用這種圖標(biāo)是個(gè)怪癖。繼續(xù)使用像軟盤這種圖標(biāo)會(huì)讓你的品牌對年輕用戶群來說顯得過時(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)動(dòng)作之內(nèi)時(shí)，應(yīng)該怎么做。你如何使用一個(gè)簡單的符號(hào)傳達(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ū)。
• 在桌面版上的文字。很多人是首先在電腦上使用推特的。這樣他們就會(huì)很明顯地看到這個(gè)圖標(biāo)旁邊的解釋文字。
• 可記憶性。雖然羽管筆可以被認(rèn)為是過時(shí)的技術(shù)，就像軟盤一樣，但是它是非常獨(dú)特的，并且容易記憶。你不會(huì)在很多應(yīng)用中看到羽管筆，所以用戶不必嘗試去分辨與其他產(chǎn)品功能上的細(xì)微差異。
• 品牌化。筆上的羽毛與推特logo上的羽毛對應(yīng)。這在品牌和發(fā)表推文的動(dòng)作之間創(chuàng)造了一種整體感。

標(biāo)簽與可用性

針對于那些認(rèn)為一圖勝千言的人來說可能會(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沒有標(biāo)簽

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

而對于沒有標(biāo)簽的圖標(biāo)來說，這個(gè)比率只有60%。

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

比如說，Meetup應(yīng)用使用一個(gè)名牌圖標(biāo)表示小組活動(dòng)并加上了一些額外的品牌識(shí)別。但是，因?yàn)橐粋€(gè)空的名牌不會(huì)讓大多數(shù)人想起活動(dòng)或者通知，所以他們增加了標(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è)依靠。

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

在做一個(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è)。這會(huì)給你信心去嘗試很多實(shí)驗(yàn)并發(fā)現(xiàn)什么才能夠帶來最好的商業(yè)結(jié)果以及愉悅你的用戶。

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

但是你不必等到有了一個(gè)開發(fā)完成的真實(shí)的產(chǎn)品才能去收集用戶反饋；你可以在原型設(shè)計(jì)階段就開始用戶測試。這會(huì)幫助你驗(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í)可以詢問用戶的一些問題：

• 在使用【你的網(wǎng)站或應(yīng)用】之前，請告訴我們你對一個(gè)從事【你的公司的業(yè)務(wù)】的公司的期望。你認(rèn)為它能夠做什么？你覺得這個(gè)網(wǎng)站或應(yīng)用應(yīng)該長什么樣子？
• 你首先會(huì)點(diǎn)擊的是什么東西？
• 你會(huì)用哪三個(gè)詞描述這個(gè)網(wǎng)站或應(yīng)用？
• 使用1分（非常不愉快）到5分（非常愉快）評價(jià)這個(gè)網(wǎng)站或應(yīng)用給你的感覺？
• 你有多大可能性信任這家公司？
• 這個(gè)網(wǎng)站或應(yīng)用相比起你的期望如何？
• 不要點(diǎn)擊，告訴我們你認(rèn)為點(diǎn)擊了一個(gè)這種形狀的圖標(biāo)會(huì)發(fā)生什么？然后點(diǎn)擊它，實(shí)際上發(fā)生了什么？

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

譯者：cyan_zheng

譯文地址：http://downloads.usertesting.com/white_papers/UserTesting_eBook_Designing_a_brilliant_UX.pdf

本文由 @cyan_zheng 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。