如何優化產品介面中的細節設計

ADVERTISEMENT

你的產品的成功是基於一系列因素,但是整體上看使用者體驗至上。當設計一個新的應用程式或一個網站時,堅持最佳實踐是一個必要的途徑,但是在建立大畫面的過程中,撇開那些看起來不錯但不必要的設計元素是非常容易的。然而,好與壞的體驗差異往往歸結於我們如何深思熟慮地設計這些細節。

在這篇文章中,我將專注於視覺反饋,微視窗和空白區域,你將會明白為什麼這些小細節和你設計的顯著元素是一樣的重要,以及它們如何幫助你確定產品的成功。

視覺反饋

視覺反饋可能更容易在很大的設計方案中被忽視,但它實際上將整個體驗結合在了一起。當沒有任何反饋時,就沒有適當的互動。想象一下,與不給你任何方式迴應的人說話——你根本不能溝通。所以你的應用程式也是如此。

缺乏視覺反饋能夠使使用者混淆。

您必須確保對使用者操作總是有一些反饋意見,因為它讓使用者感到受控。視覺反饋

•確認應用程式已收到使用者的操作。

•溝通互動的結果,使其既可見又可理解。給使用者一個訊號,告知他們(或應用程式)執行任務是成功還是失敗了。

使按鈕和其他控製項有形

在現實生活中,按鈕、控製項及其他物體響應我們的互動,這就是人們所期望的行為。人們期望應用程式的元素具有類似的響應能力。

操作結果

當你需要通知使用者有關操作的結果時,視覺反饋也是很有幫助的。您可以用現有元素提供反饋。

系統應該告訴使用者他們的狀態

ADVERTISEMENT

使用者希望在任何給定的時間內知道他們當前在系統中所處的環境,應用程式不應該讓他們猜測- 他們應該通過適當的視覺反饋告訴使用者發生了什麼。對於頻繁和次要的行動,響應可能不大,而對於罕見的和主要的行動,響應應該更大。

•動畫通知使使用者能夠快速瞭解當前狀態。

•載入動畫提供應用程式程式狀態的實時通知,使使用者能夠快速瞭解發生的情況。

載入欄與使用者互動,並防止應用程式忙於載入資料時出現混淆。圖片出自:馬克

微檢視

•微檢視是引導使用者體驗的一小部分文字。顯微技術的例子是錯誤資訊,按鈕標籤,提示文字。一目瞭然,這詞與整體應用程式設計相比微不足道。但令人驚訝的是,它們對轉換有巨大的影響。

在應用程式中編寫好的微視窗與使其正常工作,以及使用者介面易於使用和高效使用是同樣重要的。

證明你是人類

•一個快速的方法,使你的使用者介面更溫暖,在副本中減少機械性的人的語調。如果你的產品聽起來很人性化,那麼人們會更容易信任你。

在故障時刻使用友好和有用的副本

如何傳達錯誤會對使用者的產品體驗方式有很大的影響。通常被忽視,一個用錯誤構造的錯誤資訊可能會讓使用者感到沮喪。

ADVERTISEMENT

諸如“發生錯誤”的警報資訊對所有使用者都是神祕的,並且可能會使經驗豐富的使用者感到煩惱。

另一方面,精心設計的錯誤資訊可能會使一時的沮喪變成一時的喜悅。因此,使用人為,而不是技術性的錯誤資訊,去適應你的觀眾。

錯誤狀態必須包括關於下一步做什麼的簡明、友好、和指導性的副本。

緩解使用者的擔憂

微檢視是特別情境。這就是為什麼它如此重要。它解決了人們和他們所關注的點這一非常特殊的問題。例如,微檢視可以在根本安撫使用者的訂閱或共享的細節。雖然 '不要垃圾郵件/自動鳴叫' 可能被視為理所當然的良好的營銷時,要求電子郵件地址/訪問社會網路帳戶連線,使用者是不確定的。因此,當人們新增他們的電子郵件或連線他們的Twitter帳戶,說:“我們討厭垃圾郵件。”

微檢視涵蓋所有潛在使用者的關注在一個緊密的句子中。

空白區域

空白(或負空間)是設計師沒有設計元素放置的區域。空白的元素是文字內容中的影象,邊距,填充,行間距和字母間距的空間。雖然許多人可能會認為這是浪費寶貴的螢幕空間,但空白是使用者介面設計的基本要素。

提高對使用者介面的理解

混亂是不好的。使用者介面過量載入資訊:每一個新增按鈕、影象和文字使介面更復雜。如果你認為你設計的任何部分不應該有故意空白的,看看下面的例子,你會看到當有太多的物件吸引你的注意力時,會發生什麼情況。

混亂的使用者介面是沒有吸引力的,使用者不會看它,尤其是當檢視中沒有視覺化層次結構時。

ADVERTISEMENT

白色空間的力量來自人類的記憶和注意力的極限。我們的短期記憶可以容納少量的資訊(通常約7個或更少)銘記在一個活躍的,隨時可用的狀態,在很短的時間內(通常從10至15秒,有時甚至一分鐘)。

使用者關注是一種寶貴的資源,應相應地分配。

如果你的使用者載入過量的資訊,導致介面混亂。因此減少混亂以此提高對使用者介面的理解能力。空白可以使一些混亂的介面看起來更簡潔。空白減少了大量元素,讓使用者看一次就能夠便於搜尋。使用空白技巧是為你的使用者剝離掉多餘的細節,以提供易理解的內容(大塊的內容)。

媒介是一個不錯的例子,使用空白來改善內容和使用者介面的理解。

關注點

空白建立設計元素的空間,幫助它們脫穎而出,或從其他元素分離。它有助於溝通什麼是最重要的,什麼是需要注意的。

元素周圍提供的空間越多,它的聚焦就越大。

Google搜尋首頁是使用空白的一個很好的例子。佈局立即通過將主要互動元素(搜尋框)放置在前面和中央位置,在任何一方有足夠的空白以增加重點,從而有助於使用者目標。

缺少其他元素將使現有元素更加突出。

明確關係

接近法則描述眼腦作用是一個不斷組織、簡化、統一的過程,正是通過這一過程,才產生出易於理解、協調的整體。我們的視覺系統自動對視覺輸入構建結構,並且在神經系統層面上感知形狀,圖形和物體,而不是隻看到互不相連的邊,線和區域。看看這張照片。幾乎每個人都看到兩組點,而不是簡單的16點。

把資訊分成相應的組可以使它更清晰且具有可讀性。在右邊的表格,把15個領域分為三組,使過程更容易。內容的量是一樣的,但對使用者的影響卻大不相同。

圖片來源:nngroup

結論

精心的設計。應用程式的使用者介面的每一個小細節都是值得密切關注,因為使用者體驗是所有細節的工作協調的總和:

“細節不是細節。它們造就設計。”——Charles Eames

科技

» 產品100

ADVERTISEMENT