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

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

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

視覺反饋

視覺反饋可能更容易在很大的設(shè)計(jì)方案中被忽視鸦做,但它實(shí)際上將整個(gè)體驗(yàn)結(jié)合在了一起励烦。當(dāng)沒有任何反饋時(shí),就沒有適當(dāng)?shù)幕悠糜铡O胂笠幌绿陈樱c不給你任何方式回應(yīng)的人說話——你根本不能溝通。所以你的應(yīng)用程序也是如此治筒。

缺乏視覺反饋能夠使用戶混淆屉栓。

您必須確保對用戶操作總是有一些反饋意見,因?yàn)樗層脩舾械绞芸厮释唷R曈X反饋

?確認(rèn)應(yīng)用程序已收到用戶的操作友多。

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

使按鈕和其他控件有形

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


操作結(jié)果

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


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

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

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


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


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

微視圖

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

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

證明你是人類

?一個(gè)快速的方法塔嬉,使你的用戶界面更溫暖,在副本中減少機(jī)械性的人的語調(diào)租悄。如果你的產(chǎn)品聽起來很人性化谨究,那么人們會更容易信任你。



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

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


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

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


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

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

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


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

空白區(qū)域

空白(或負(fù)空間)是設(shè)計(jì)師沒有設(shè)計(jì)元素放置的區(qū)域译荞∪康模空白的元素是文本內(nèi)容中的圖像休弃,邊距,填充堤瘤,行間距和字母間距的空間玫芦。雖然許多人可能會認(rèn)為這是浪費(fèi)寶貴的屏幕空間浆熔,但空白是用戶界面設(shè)計(jì)的基本要素本辐。

提高對用戶界面的理解

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


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

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

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

如果你的用戶載入過量的信息恕刘,導(dǎo)致界面混亂。因此減少混亂以此提高對用戶界面的理解能力抒倚『肿牛空白可以使一些混亂的界面看起來更簡潔⊥信唬空白減少了大量元素献起,讓用戶看一次就能夠便于搜索。使用空白技巧是為你的用戶剝離掉多余的細(xì)節(jié)镣陕,以提供易理解的內(nèi)容(大塊的內(nèi)容)谴餐。


Medium是一個(gè)不錯(cuò)的例子,使用空白來改善內(nèi)容和用戶界面的理解呆抑。

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

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

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

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


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

明確關(guān)系

接近法則描述眼腦作用是一個(gè)不斷組織罐柳、簡化掌腰、統(tǒng)一的過程,正是通過這一過程张吉,才產(chǎn)生出易于理解齿梁、協(xié)調(diào)的整體。我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu)肮蛹,并且在神經(jīng)系統(tǒng)層面上感知形狀勺择,圖形和物體,而不是只看到互不相連的邊,線和區(qū)域伦忠∈『耍看看這張照片。幾乎每個(gè)人都看到兩組點(diǎn)缓苛,而不是簡單的16點(diǎn)芳撒。


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


圖片來源:nngroup

結(jié)論

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

“細(xì)節(jié)不是細(xì)節(jié)日月。它們造就設(shè)計(jì)$凸牵”―Charles?Eames

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

作者信息:Nick Babich

譯文出自:SKYUI

歡迎關(guān)注SKYUI官方微博“SKYUIHOME”

官方微信公眾賬號“SKYUIUX”?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末爱咬,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子绊起,更是在濱河造成了極大的恐慌精拟,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蜂绎,居然都是意外死亡栅表,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進(jìn)店門师枣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來怪瓶,“玉大人,你說我怎么就攤上這事践美∠捶。” “怎么了?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵拨脉,是天一觀的道長哆姻。 經(jīng)常有香客問我宣增,道長玫膀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任爹脾,我火速辦了婚禮帖旨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘灵妨。我一直安慰自己解阅,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布泌霍。 她就那樣靜靜地躺著货抄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪朱转。 梳的紋絲不亂的頭發(fā)上蟹地,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天,我揣著相機(jī)與錄音藤为,去河邊找鬼怪与。 笑死,一個(gè)胖子當(dāng)著我的面吹牛缅疟,可吹牛的內(nèi)容都是我干的分别。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼存淫,長吁一口氣:“原來是場噩夢啊……” “哼耘斩!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起桅咆,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤括授,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刽脖,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡羞海,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了曲管。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片却邓。...
    茶點(diǎn)故事閱讀 40,973評論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖院水,靈堂內(nèi)的尸體忽然破棺而出腊徙,到底是詐尸還是另有隱情,我是刑警寧澤檬某,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布撬腾,位于F島的核電站,受9級特大地震影響恢恼,放射性物質(zhì)發(fā)生泄漏民傻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一场斑、第九天 我趴在偏房一處隱蔽的房頂上張望漓踢。 院中可真熱鬧,春花似錦漏隐、人聲如沸喧半。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽挺据。三九已至,卻和暖如春脖隶,著一層夾襖步出監(jiān)牢的瞬間扁耐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工浩村, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留做葵,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓心墅,卻偏偏與公主長得像酿矢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子怎燥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容