如何優(yōu)化產(chǎn)品界面中的細(xì)節(jié)設(shè)計(jì)

2017-09-14 13387 0

你的產(chǎn)品的成功是基于一系列因素,但是整體上看用戶(hù)體驗(yàn)至上。當(dāng)設(shè)計(jì)一個(gè)新的應(yīng)用程序或一個(gè)網(wǎng)站時(shí),堅(jiān)持最佳實(shí)踐是一個(gè)必要的途徑,但是在創(chuàng)建大畫(huà)面的過(guò)程中,撇開(kāi)那些看起來(lái)不錯(cuò)但不必要的設(shè)計(jì)元素是非常容易的。然而,好與壞的體驗(yàn)差異往往歸結(jié)于我們?nèi)绾紊钏际鞈]地設(shè)計(jì)這些細(xì)節(jié)。

在這篇文章中,我將專(zhuān)注于視覺(jué)反饋,微視窗和空白區(qū)域,你將會(huì)明白為什么這些小細(xì)節(jié)和你設(shè)計(jì)的顯著元素是一樣的重要,以及它們?nèi)绾螏椭愦_定產(chǎn)品的成功。

視覺(jué)反饋

視覺(jué)反饋可能更容易在很大的設(shè)計(jì)方案中被忽視,但它實(shí)際上將整個(gè)體驗(yàn)結(jié)合在了一起。當(dāng)沒(méi)有任何反饋時(shí),就沒(méi)有適當(dāng)?shù)幕?dòng)。想象一下,與不給你任何方式回應(yīng)的人說(shuō)話——你根本不能溝通。所以你的應(yīng)用程序也是如此。

缺乏視覺(jué)反饋能夠使用戶(hù)混淆。

您必須確保對(duì)用戶(hù)操作總是有一些反饋意見(jiàn),因?yàn)樗層脩?hù)感到受控。視覺(jué)反饋

•確認(rèn)應(yīng)用程序已收到用戶(hù)的操作。

•溝通互動(dòng)的結(jié)果,使其既可見(jiàn)又可理解。給用戶(hù)一個(gè)信號(hào),告知他們(或應(yīng)用程序)執(zhí)行任務(wù)是成功還是失敗了。

使按鈕和其他控件有形

在現(xiàn)實(shí)生活中,按鈕、控件及其他物體響應(yīng)我們的互動(dòng),這就是人們所期望的行為。人們期望應(yīng)用程序的元素具有類(lèi)似的響應(yīng)能力。

操作結(jié)果

當(dāng)你需要通知用戶(hù)有關(guān)操作的結(jié)果時(shí),視覺(jué)反饋也是很有幫助的。您可以用現(xiàn)有元素提供反饋。

系統(tǒng)應(yīng)該告訴用戶(hù)他們的狀態(tài)

用戶(hù)希望在任何給定的時(shí)間內(nèi)知道他們當(dāng)前在系統(tǒng)中所處的環(huán)境,應(yīng)用程序不應(yīng)該讓他們猜測(cè)- 他們應(yīng)該通過(guò)適當(dāng)?shù)囊曈X(jué)反饋告訴用戶(hù)發(fā)生了什么。對(duì)于頻繁和次要的行動(dòng),響應(yīng)可能不大,而對(duì)于罕見(jiàn)的和主要的行動(dòng),響應(yīng)應(yīng)該更大。

•動(dòng)畫(huà)通知使用戶(hù)能夠快速了解當(dāng)前狀態(tài)。

•加載動(dòng)畫(huà)提供應(yīng)用程序進(jìn)程狀態(tài)的實(shí)時(shí)通知,使用戶(hù)能夠快速了解發(fā)生的情況。

加載欄與用戶(hù)互動(dòng),并防止應(yīng)用程序忙于加載數(shù)據(jù)時(shí)出現(xiàn)混淆。圖片出自:馬克

微視圖

•微視圖是引導(dǎo)用戶(hù)體驗(yàn)的一小部分文字。顯微技術(shù)的例子是錯(cuò)誤信息,按鈕標(biāo)簽,提示文本。一目了然,這詞與整體應(yīng)用程序設(shè)計(jì)相比微不足道。但令人驚訝的是,它們對(duì)轉(zhuǎn)換有巨大的影響。

在應(yīng)用程序中編寫(xiě)好的微視窗與使其正常工作,以及用戶(hù)界面易于使用和高效使用是同樣重要的。

證明你是人類(lèi)

•一個(gè)快速的方法,使你的用戶(hù)界面更溫暖,在副本中減少機(jī)械性的人的語(yǔ)調(diào)。如果你的產(chǎn)品聽(tīng)起來(lái)很人性化,那么人們會(huì)更容易信任你。

在故障時(shí)刻使用友好和有用的副本

如何傳達(dá)錯(cuò)誤會(huì)對(duì)用戶(hù)的產(chǎn)品體驗(yàn)方式有很大的影響。通常被忽視,一個(gè)用錯(cuò)誤構(gòu)造的錯(cuò)誤信息可能會(huì)讓用戶(hù)感到沮喪。

諸如“發(fā)生錯(cuò)誤”的警報(bào)信息對(duì)所有用戶(hù)都是神秘的,并且可能會(huì)使經(jīng)驗(yàn)豐富的用戶(hù)感到煩惱。

另一方面,精心設(shè)計(jì)的錯(cuò)誤信息可能會(huì)使一時(shí)的沮喪變成一時(shí)的喜悅。因此,使用人為,而不是技術(shù)性的錯(cuò)誤信息,去適應(yīng)你的觀眾。

錯(cuò)誤狀態(tài)必須包括關(guān)于下一步做什么的簡(jiǎn)明、友好、和指導(dǎo)性的副本。

緩解用戶(hù)的擔(dān)憂

微視圖是特別情境。這就是為什么它如此重要。它解決了人們和他們所關(guān)注的點(diǎn)這一非常特殊的問(wèn)題。例如,微視圖可以在根本安撫用戶(hù)的訂閱或共享的細(xì)節(jié)。雖然 '不要垃圾郵件/自動(dòng)鳴叫' 可能被視為理所當(dāng)然的良好的營(yíng)銷(xiāo)時(shí),要求電子郵件地址/訪問(wèn)社會(huì)網(wǎng)絡(luò)帳戶(hù)連接,用戶(hù)是不確定的。因此,當(dāng)人們添加他們的電子郵件或連接他們的Twitter帳戶(hù),說(shuō):“我們討厭垃圾郵件?!?/P>


微視圖涵蓋所有潛在用戶(hù)的關(guān)注在一個(gè)緊密的句子中。

空白區(qū)域

空白(或負(fù)空間)是設(shè)計(jì)師沒(méi)有設(shè)計(jì)元素放置的區(qū)域??瞻椎脑厥俏谋緝?nèi)容中的圖像,邊距,填充,行間距和字母間距的空間。雖然許多人可能會(huì)認(rèn)為這是浪費(fèi)寶貴的屏幕空間,但空白是用戶(hù)界面設(shè)計(jì)的基本要素。

提高對(duì)用戶(hù)界面的理解

混亂是不好的。用戶(hù)界面過(guò)量載入信息:每一個(gè)添加按鈕、圖像和文本使界面更復(fù)雜。如果你認(rèn)為你設(shè)計(jì)的任何部分不應(yīng)該有故意空白的,看看下面的例子,你會(huì)看到當(dāng)有太多的對(duì)象吸引你的注意力時(shí),會(huì)發(fā)生什么情況。


混亂的用戶(hù)界面是沒(méi)有吸引力的,用戶(hù)不會(huì)看它,尤其是當(dāng)視圖中沒(méi)有可視化層次結(jié)構(gòu)時(shí)。

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

用戶(hù)關(guān)注是一種寶貴的資源,應(yīng)相應(yīng)地分配。

如果你的用戶(hù)載入過(guò)量的信息,導(dǎo)致界面混亂。因此減少混亂以此提高對(duì)用戶(hù)界面的理解能力??瞻卓梢允挂恍┗靵y的界面看起來(lái)更簡(jiǎn)潔??瞻诇p少了大量元素,讓用戶(hù)看一次就能夠便于搜索。使用空白技巧是為你的用戶(hù)剝離掉多余的細(xì)節(jié),以提供易理解的內(nèi)容(大塊的內(nèi)容)。


媒介是一個(gè)不錯(cuò)的例子,使用空白來(lái)改善內(nèi)容和用戶(hù)界面的理解。

關(guān)注點(diǎn)

空白創(chuàng)建設(shè)計(jì)元素的空間,幫助它們脫穎而出,或從其他元素分離。它有助于溝通什么是最重要的,什么是需要注意的。

元素周?chē)峁┑目臻g越多,它的聚焦就越大。

Google搜索首頁(yè)是使用空白的一個(gè)很好的例子。布局立即通過(guò)將主要交互元素(搜索框)放置在前面和中央位置,在任何一方有足夠的空白以增加重點(diǎn),從而有助于用戶(hù)目標(biāo)。


缺少其他元素將使現(xiàn)有元素更加突出。

明確關(guān)系

接近法則描述眼腦作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過(guò)程,正是通過(guò)這一過(guò)程,才產(chǎn)生出易于理解、協(xié)調(diào)的整體。我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu),并且在神經(jīng)系統(tǒng)層面上感知形狀,圖形和物體,而不是只看到互不相連的邊,線和區(qū)域??纯催@張照片。幾乎每個(gè)人都看到兩組點(diǎn),而不是簡(jiǎn)單的16點(diǎn)。

把信息分成相應(yīng)的組可以使它更清晰且具有可讀性。在右邊的表格,把15個(gè)領(lǐng)域分為三組,使過(guò)程更容易。內(nèi)容的量是一樣的,但對(duì)用戶(hù)的影響卻大不相同。


圖片來(lái)源:nngroup

結(jié)論

精心的設(shè)計(jì)。應(yīng)用程序的用戶(hù)界面的每一個(gè)小細(xì)節(jié)都是值得密切關(guān)注,因?yàn)橛脩?hù)體驗(yàn)是所有細(xì)節(jié)的工作協(xié)調(diào)的總和:

“細(xì)節(jié)不是細(xì)節(jié)。它們?cè)炀驮O(shè)計(jì)?!薄狢harles Eames

原文鏈接:https://uxplanet.org/the-details-that-matter-8b962ca58b49?source=---------0-----------


151
評(píng)論區(qū)(0)
正在加載評(píng)論...