[譯] 細節是產品設計的重中之重

• 原文地址：The Details That Matter
• 原文做者：Nick Babich
• 譯文出自：掘金翻譯計劃
• 譯者：ivyxuan
• 校對者：ylq167、gaozp

一個產品的成功是由各類因素共同造就的，而其中最重要的因素，就是總體的用戶體驗。在設計一款新的應用或是網站的時候，堅持最佳的實踐規範是一個可靠的方法，可是在創造宏偉藍圖的時候，人們很容易就會省略掉那些能讓人有更好的體驗但卻並不是必要的設計元素。然而，設計的優劣每每在於咱們能設計出多麼體貼的細節。

在這篇文章中，我將會重點關注 可視化反饋、小的文字信息 還有 留白 這幾個方面，你將會發現爲何這些不起眼的細節和那些顯眼的設計元素相比一樣重要，而這些細節又是怎樣決定你產品成敗的。

可視化反饋

可視化反饋在較大的設計方案裏很容易就會被忽視掉，但它實際上貫穿總體的用戶體驗流程。能夠說，若是沒有反饋就沒有所謂的交互，你能想象和一我的聊天，可他一點反應也不給你嗎 —— 你根本就聊不下去。而對於你的應用也是一樣的道理。

缺少可視化的反饋會讓用戶感到困惑。

你必需要確保對用戶的每一個動做都有相應的反饋，這樣才能讓用戶感受應用運行一切正常。可視化反饋

• 首先代表這個應用接受到了用戶的操做。
• 而後它經過一種可視化並且易於理解的方式告訴用戶此次交互的結果是什麼，經過給用戶一個信號，來告訴用戶，本身對於這個任務的執行是成功仍是失敗。

讓按鈕或是其餘開關看起來是可觸摸的

在現實生活中，按鈕、開關還有其餘東西都會對咱們的動做有所迴應，人們以爲世界就是這樣運轉的。而一樣，人們也會期待應用裏的元素能有相似的迴應。

圖片來源：Ramotion

操做的結果

當你須要告訴用戶他的操做結果是什麼的時候，可視化反饋就頗有用了，你能夠利用現有的元素去傳遞反饋信息。

圖片來源：Colin Garven

系統須要告訴用戶他當前的狀態是什麼

在系統中，用戶任什麼時候候都會想知道他此刻的狀態是什麼，而這不該該讓用戶本身去猜 —— 因此係統應該經過恰當的可視化反饋告訴用戶此刻正在發生什麼。對於一些常見並且次要的操做，簡單的反饋就能夠了，而對於不尋常並且重要的操做，反饋就須要更明顯一點。

• 動態提醒可讓用戶馬上明白此時的狀態。

圖片來源：Eddy Gann

• 加載動畫是對於應用進程的實時提醒，可讓用戶馬上明白如今加載到哪裏了。

應用加載信息的時候，進度條能夠避免讓用戶感到困惑。圖片來源：Mark

少許的文字信息

少許的文字信息是一些用來是指導用戶行爲的一點點文字。舉一些例子就是，錯誤信息、按鈕對應的標籤、提示信息。乍看之下，這麼少的文字和整個應用設計比起來一點也不重要，但出人意料的是，它們對轉化率有着極爲重要的影響。

在應用裏寫出好的文字信息，和讓應用正常運行、用戶界面易於使用同樣重要。

讓應用看起來像是一我的

有一個快速的方法能讓你的 UI 變得溫暖而不呆板，就是用人說話的口吻去描述內容。若是你的產品聽起來好像是一我的，用戶就會更加的信任你。

Yelp 表現得好像他們是真人在負責這件事情。

Airbnb 的提示聽起來像人說的話並且語氣還很隨和。

報錯的方式要友好並且有效

表達錯誤信息的方式會嚴重影響產品的用戶體驗。一般來講，省略錯誤信息或是沒有正確描述錯誤信息都會讓用戶感到挫敗。

像「出錯啦」這種警告對全部的用戶都會形成困擾，並且還會惹惱專家級用戶。可是，一個精心設計過的錯誤信息，會頓時化失望爲欣喜。因此，把報錯變得人性化、不用技術性的語言而且適合你的用戶羣體。

錯誤狀態必定要具體、友好並且有用，要告訴用戶下一步怎麼作。

減小用戶的擔心

這些少許的文字信息是很情景化的，這也是爲何它很重要的一個緣由。它能夠解答用戶具體狀況下的問題，並針對他們所擔心的事情進行直接地交流。舉例來講，當用戶選擇訂閱或是提供了具體信息的時候，一些文字信息對於消除用戶擔心會起到至關關鍵的做用。對於優秀的營銷人員來講，「不會有羣發消息或是自動關注」是理所固然的事情，但用戶本身會存疑。所以，當用戶添加了他們的郵箱地址或者綁定了 Twitter 帳戶的時候，必定要明確表態「咱們和你同樣討厭垃圾消息」。

這只是一小段緊湊的文字，卻涵蓋了用戶全部潛在的擔心。

留白

留白（或者說是負空間）是設計師沒有擺放設計元素的地方。而設計元素間的留白是指處在圖片間距、內邊距、外邊距、行間距和字間距的空白。雖然不少人以爲這些空白浪費了寶貴的界面位置，但其實，留白是用戶界面設計的一個重要元素。

讓用戶界面更容易理解

雜亂的堆砌是很糟糕的一件事情。在界面上雜亂堆砌元素會給用戶帶來過多的信息：每個被添加的按鈕、圖片和文字都會讓界面顯得更加複雜。若是你不想你的設計有任何刻意的留白的話，下面這個例子就能很明白的告訴你，有太多東西一塊兒吸引你的注意力是多麼可怕的事情。

雜亂堆砌的 UI 尤爲是沒有視覺層次的 UI 會讓用戶沒有一點想要審視的慾望。

留白之因此很重要，是由於用戶的注意力還有記憶力是頗有限的。咱們的短時間記憶只能夠在短期內（一般來講是 10 到 15 秒鐘、或者是 1 分鐘之內）記住一點有效的既有信息（一般來講是 7 個事物或者比這個更少）。

用戶的注意力是很寶貴的資源，因此必須合理的分配。

若是是由於界面上胡亂堆砌而使得用戶接收過多的信息，那麼減小一些雜物就能提升用戶的理解。大方地使用留白可讓凌亂的界面變得簡單而有吸引力，留白削減了用戶乍看之下接收到的元素數量，這使得瀏覽信息變得更加容易。留白的使用技巧在於，只給用戶提供他能消化吸取的數量的內容（必定數量的內容），而後去掉沒必要要的細節。

Medium 是一個典型的例子，它善於使用留白來改善用戶對內容和 UI 的理解。

讓元素更具備吸引力

留白在設計中是經過在元素周圍留出空白，以讓元素更加突出或是和其餘元素以進行區分。它能夠告訴用戶什麼是最重要並且是須要格外注意的。

元素周圍的留白越多，元素就會越引人注目。

谷歌搜索的首頁就是一個使用留白的典型例子，它經過在正中央擺放其最重要的交互元素（搜索框），而且在周圍留出足夠的空白以凸顯其重要性的佈局，直接實現了用戶目標。

去掉其餘的元素能夠更加凸顯留下來的元素。

明確關係

接近法則描述了人的眼睛是如何劃分視覺元素的，它闡述說距離更近的物體看起來更類似。咱們能夠利用留白，在不一樣的元素間產生視覺聯繫。你看下面這幅圖片，幾乎全部人都會說看到了兩組點，而不是16個點。

將信息拆分紅合適的組別可讓信息更好的被識別和閱讀。右邊的表單將 15 欄拆分紅 3 組，這樣填寫表單也變得相對容易了。雖然內容的數量仍然相同，可是給用戶的感受卻徹底不一樣。

圖片來源：NNGroup

總結

用心設計，應用界面上的每個小的細節都值得細心揣摩，由於用戶體驗就是由這些小的細節相互協調做用而成的：

「細節不僅是細節，細節成就了設計。」 —— Charles Eames

謝謝！

關注 UX Planet： Twitter | Facebook

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。