原文地址：https:///the-details-that-matter-8b962ca58b49#.yff8lkoi0

譯文：http://www.uisdc.com/the-details-that-matter

譯者：陳子木

成功的產(chǎn)品通常是構(gòu)建在一系列優(yōu)秀的設(shè)計(jì)之上的,，它除了擁有優(yōu)秀的框架,、系統(tǒng)的邏輯和恰如其分的運(yùn)營(yíng)之外，它還需要符合用戶體驗(yàn)規(guī)則的細(xì)節(jié),，和幾經(jīng)驗(yàn)證的最佳實(shí)踐來(lái)作為支撐,。

今天的文章，我們來(lái)聊聊細(xì)節(jié),，從視覺(jué)反饋、文案和留白三個(gè)角度,，聊聊這些同樣能夠影響整體體驗(yàn)還很容易被忽略的元素,。

視覺(jué)反饋

在許多設(shè)計(jì)方案中，視覺(jué)反饋是很容易被忽略的組成部分,，然而它是整個(gè)UX設(shè)計(jì)中,，對(duì)體驗(yàn)影響非常大的元素。沒(méi)有正確的反饋,，就沒(méi)有正確的互動(dòng),。想象一下，當(dāng)你和人溝通的時(shí)候,，對(duì)方根本不會(huì)給你任何語(yǔ)言,、表情和動(dòng)作的反饋，這是何等的尷尬,。UI界面同樣是如此,。

用戶會(huì)對(duì)缺少視覺(jué)反饋的UI界面感到迷惑。

你需要給用戶一個(gè)反饋信號(hào),，讓他們知道他們的操作是成功了還失敗,，接下來(lái)要向上翻頁(yè)還是向下滾動(dòng),，等等等等。

視覺(jué)反饋的主要目的在于：

·確認(rèn)APP或者網(wǎng)頁(yè)已經(jīng)接收到了用戶的操作或者提交的信息
·傳達(dá)交互的結(jié)果,，結(jié)果可見(jiàn)也可理解,。給用戶一個(gè)信息反饋，告訴他們?nèi)蝿?wù)執(zhí)行成功或者失敗

讓按鈕和控件易于被感知

在現(xiàn)實(shí)生活中,，按鈕和各種開關(guān)都被設(shè)計(jì)成易于互動(dòng),、易于感知的樣子，這樣的設(shè)計(jì)讓人們更容易控制,，也能讓事情向著預(yù)期的方向發(fā)展,。而當(dāng)用戶面對(duì)UI界面的時(shí)候，他們也有同樣的需求,，他們希望按鈕和控件能夠像這些日常的設(shè)計(jì)一樣,，易于被感知，操控,。

操作結(jié)果

當(dāng)你需要告訴用戶某個(gè)操作的結(jié)果的時(shí)候,，可以通過(guò)視覺(jué)反饋來(lái)告知他們。你可以使用現(xiàn)有的元素來(lái)傳達(dá)這一信息,。

告知用戶當(dāng)前狀態(tài)

用戶在任何時(shí)候都希望能夠了解當(dāng)前所處的狀態(tài),，而不用過(guò)多猜測(cè)。所以,，通過(guò)恰當(dāng)?shù)囊曈X(jué)反饋?zhàn)層脩裘靼渍诎l(fā)生什么,，是很有用的。對(duì)于頻繁而又經(jīng)常發(fā)生的操作,，這種狀態(tài)反饋應(yīng)該微妙,，而對(duì)于重要而又不經(jīng)常發(fā)生的交互，這種反饋則應(yīng)該做的更加明顯,。

·提醒動(dòng)效,。提醒動(dòng)效能讓用戶快速注意到，并且能夠清晰理解當(dāng)前的狀態(tài),。

·加載動(dòng)效,。加載動(dòng)效讓用戶實(shí)時(shí)地明白當(dāng)前的狀態(tài)，并且快速的理解,，擁有預(yù)期,，甚至作出反應(yīng)。

微文案

有的時(shí)候,，圖像和圖標(biāo)信息并不足以給出清晰而直接的指引,，起到引導(dǎo)用戶、強(qiáng)化體驗(yàn)的短文案就要發(fā)揮作用了,。最常見(jiàn)的微文案涵蓋了錯(cuò)誤信息,、按鈕標(biāo)簽,、提示文本。同整個(gè)APP或者網(wǎng)站的設(shè)計(jì)相比,，這些微文案顯得微不足道,，但是，令人驚訝的地方在于,，他們對(duì)于整個(gè)轉(zhuǎn)化率有著巨大的影響,。

UI元素和微文案兩者的重要性是同等的。

人性化的設(shè)計(jì)

想要讓你的APP少一點(diǎn)機(jī)械感,，多一絲人情,，多在微文案上下工夫就好了。如果你的產(chǎn)品給人的感受更富有人性,，那么用戶更容易相信它,。

Yelp 給人感覺(jué)背后一個(gè)真實(shí)的人類在管理。

Airbnb 讓人覺(jué)得富有人性,，而易于溝通,。

在出錯(cuò)的時(shí)候使用友好而有用的文案

如何在出錯(cuò)或者碰到問(wèn)題的時(shí)候向傳達(dá)信息，對(duì)于整個(gè)產(chǎn)品的體驗(yàn)影響是巨大的,。如果用戶感到被忽視,，或者無(wú)法獲取合理的解決方案，他們會(huì)感到非常沮喪,。

諸如“出現(xiàn)錯(cuò)誤”這樣基本毫無(wú)意義的報(bào)錯(cuò)信息,，會(huì)讓用戶感到苦惱。

一個(gè)精心設(shè)計(jì)的錯(cuò)誤信息,，能夠借助幽默的表達(dá)方式,，將沮喪的情緒轉(zhuǎn)變?yōu)榭鞓?lè)的心情。因此,，錯(cuò)誤信息盡量不要過(guò)于“技術(shù)”，而應(yīng)該讓它更加人性化,。

減輕用戶疑慮

文案和用戶場(chǎng)景,、界面上下文有著緊密的關(guān)聯(lián)。也正是因?yàn)檫@種場(chǎng)景化的需求,，文案需要設(shè)計(jì),，價(jià)值無(wú)可替代。這樣的文案給予用戶的答案非常的具體也非常的有針對(duì)性,。例如當(dāng)用戶在提交郵箱訂閱信息的時(shí)候,，“獲取用戶信息/推送相關(guān)廣告”對(duì)于營(yíng)銷人員而言是很自然的需求，但是對(duì)于用戶而言,，就需要考量了,。所以,，Twitter 在這個(gè)場(chǎng)景下，所使用的文案是“我和您一樣討厭垃圾郵件,?！?/span>

留白

我們常說(shuō)的留白，或者負(fù)空間,，是設(shè)計(jì)師沒(méi)有放置設(shè)計(jì)元素的空白區(qū)域,。留白存在于圖片周圍，文本的間隙,，界面的邊緣,，雖然許多人認(rèn)為屏幕空間要充分利用起來(lái)，但是留白同樣重要,，它讓UI界面中的其他元素有了輕重緩急之分,。

提升UI的可理解性

雜亂的UI會(huì)讓你的用戶信息量過(guò)載：每增加一個(gè)新的控件（按鈕，文本,、圖像）都會(huì)讓你的整體設(shè)計(jì)的混亂度再上一個(gè)新的臺(tái)階,。如果你還不理解留白的意義，不妨看看下面的實(shí)例：

雜亂的界面沒(méi)有吸引力,，碰到這樣的情況,，用戶甚至看都不會(huì)看。而雜亂的UI界面最常見(jiàn)的原因,，就是缺少層次結(jié)構(gòu),。

留白的力量源自于用戶有限的注意力和記憶力。我們的短期記憶只有10~15s,，即使我們主動(dòng)去記憶,，能記下來(lái)的信息也不會(huì)多太多。所以,，用戶總體能記住的信息并不多,，而且這還是你的設(shè)計(jì)足夠有條理的情況下。

用戶的注意力是寶貴的資源,，而留白則能幫你對(duì)它進(jìn)行合理的分配,。

如果你的界面過(guò)于混亂，信息過(guò)多,，用戶就較難理解了,。相對(duì)慷慨的留白能夠讓界面看起來(lái)更加集單。使用留白的技巧在于,，為用戶提供可供消化的內(nèi)容,，然后剝離無(wú)關(guān)的細(xì)節(jié)。

將注意力引導(dǎo)到特定元素

留白讓留白所包圍的元素顯得更加突出，如果你想讓某個(gè)元素從整個(gè)設(shè)計(jì)中脫穎而出,，用留白來(lái)突出它是最直接的辦法,。

元素周圍留白越多，它就越容易被聚焦,。

Google 的搜索頁(yè)就是典型,。打開Google的時(shí)候，用戶會(huì)立馬注意到LOGO和搜索框,。

理清關(guān)系

相互靠近的元素會(huì)在視覺(jué)上給人以相互關(guān)聯(lián)的感覺(jué),，而這種視覺(jué)的遠(yuǎn)近上的感知，通常是借助留白來(lái)呈現(xiàn)的,。

將信息根據(jù)關(guān)系和屬性分割成不同的組,，能夠讓用戶更容易分辨。

結(jié)語(yǔ)

細(xì)節(jié)之中藏有魔鬼,。而細(xì)致到位的細(xì)節(jié)能夠讓你的設(shè)計(jì)更上一層樓,，就像Charles Eames 所說(shuō)，細(xì)節(jié)并不只是細(xì)節(jié),，它們是成就設(shè)計(jì)的重要因素,。

·End·