藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源：http://www.woshipm.com/ucd/160195.html

 一個(gè)好的用戶界面具有較高的轉(zhuǎn)化率和易用性。換句話說，它既能滿足商業(yè)用途也便于使用。以下是我們發(fā)現(xiàn)的一些想法清單。

上一篇：交互設(shè)計(jì)技巧：創(chuàng)造好的用戶體驗(yàn)（1）(翻譯)

21. 嘗試平滑過渡而不是突兀呈現(xiàn)

當(dāng)用戶進(jìn)行操作的時(shí)候，界面元素經(jīng)常會(huì)有出現(xiàn)、隱藏、移動(dòng)、轉(zhuǎn)換以及大小調(diào)整的動(dòng)作。作為對(duì)操作的回應(yīng)，為元素變化適當(dāng)添加時(shí)間延遲有時(shí)候讓用戶更容易理解剛剛發(fā)生了什么。以動(dòng)畫或者過渡的形式刻意制造的延時(shí)，給了用戶理解元素大小或者位置變化的必要的反應(yīng)時(shí)間。當(dāng)然了，你也要記住，我們應(yīng)該將過渡的時(shí)間控制在0.5s之內(nèi)，時(shí)間太久的話，用戶可能就會(huì)感到不適。對(duì)于那些只想快點(diǎn)完成任務(wù)的用戶，太長時(shí)間的延時(shí)當(dāng)然會(huì)成為一種負(fù)擔(dān)。

 22. 嘗試循序漸進(jìn)的引導(dǎo)而不是草率地讓用戶注冊(cè)

與其要求用戶立馬注冊(cè)，何不讓用戶先體驗(yàn)一些已示范的有價(jià)值的操作呢？在最初的交互過程中，不僅能展現(xiàn)產(chǎn)品的價(jià)值，也能顯示出產(chǎn)品的個(gè)性。一旦用戶開始看到你的產(chǎn)品的價(jià)值，了解產(chǎn)品對(duì)自己的用處，他們將更樂于與你分享更多的信息。這種循序漸進(jìn)的引導(dǎo)是一種盡可能推遲注冊(cè)過程的方法，同時(shí)還可以讓用戶使用和自定義你的應(yīng)用或產(chǎn)品。

23. 不要讓過多的邊框來分散用戶的注意力

邊框會(huì)讓用戶從真正的內(nèi)容上分散注意力。注意力當(dāng)然是寶貴的資源，因?yàn)槲覀冎荒茉谔囟ǖ臅r(shí)間內(nèi)抓住它。邊框也確實(shí)能清楚準(zhǔn)確地劃分空間，但其鮮明的線條也會(huì)吸引用戶的注意力。為了清楚地劃分屏幕上的區(qū)域但又不至于太惹眼，可以將相似內(nèi)容的元素放在一塊，每一塊區(qū)域里的內(nèi)容通過對(duì)齊方式保持一致，使用不同的背景加以區(qū)分，甚至僅僅只是使用類似的排版風(fēng)格。當(dāng)使用抽象的UI工具進(jìn)行設(shè)計(jì)時(shí)，很容易弄得到處都是邊框。通常邊框被用來排列和整理界面上的元素，但往往這樣做的結(jié)果是界面顯得混亂不堪。有時(shí)候在界面上加一些分隔線也是有幫助的，但是考慮盡量用不太顯眼的方式來替代，這樣你的內(nèi)容才會(huì)凸顯出來。

24. 嘗試銷售好處而不只是羅列功能

我想這就是市場營銷101。相比于產(chǎn)品的功能，用戶更關(guān)心產(chǎn)品能帶來的好處。好處更明確地定義了產(chǎn)品的價(jià)值?？死锼辜獱柌凇稄?00美金開始創(chuàng)業(yè)》中寫道，人們真正關(guān)心的是：愛、金錢、認(rèn)同和自由支配的時(shí)間，同時(shí)希望更少的壓力、沖突、麻煩和不確定性。當(dāng)向用戶展示功能的時(shí)候，我覺得仍為客戶留有猶豫的空間，盡可能將用戶吸引到產(chǎn)品的好處上來。

25. 考慮界面上記錄為空的情況

在某些情況下，你可能會(huì)有0, 1, 10, 100，或10000+的數(shù)據(jù)結(jié)果需要以不同的方式進(jìn)行展示。最常見的場景可能是第一次使用是0條數(shù)據(jù)到后來有非常大的數(shù)據(jù)量的中間過渡期。我們常常忘了設(shè)計(jì)什么都沒有時(shí)的初始狀態(tài)，而且這樣做讓我們有忽視用戶的風(fēng)險(xiǎn)。零數(shù)據(jù)世界是冰冷的。當(dāng)用戶第一次登錄你的app，看到的是一個(gè)沒有任何引導(dǎo)的空白頁，那么你很有可能因此錯(cuò)失機(jī)會(huì)。零數(shù)據(jù)狀態(tài)是向用戶展示接下來應(yīng)該怎么做的最佳學(xué)習(xí)時(shí)間。好的事物就應(yīng)該精益求精，用戶界面也不例外。

26. 嘗試默認(rèn)選中，而不是待選

選中狀態(tài)意味著用戶或客戶不需要進(jìn)行任何操作就已默認(rèn)接受服務(wù)。另外，也有一些傳統(tǒng)的選擇策略要求用戶先進(jìn)行操作然后才能參加或接受服務(wù)。默認(rèn)選中與待選相比有兩個(gè)好處。一是減輕用戶的負(fù)擔(dān)，因?yàn)橛脩舨恍枰魅魏尾僮?。二是這也向用戶暗示了——“因?yàn)閯e人都需要這個(gè)，我也會(huì)這樣做”。當(dāng)然了，這種默認(rèn)選中策略通常被認(rèn)為是有爭議的，因?yàn)槟承┚有牟涣嫉臓I銷者濫用的緣故。一種濫用表現(xiàn)在故意降低默認(rèn)選中文字的可讀性，另一種是使用讓人混亂的文字，比如說雙重否定。這兩種情況都會(huì)導(dǎo)致用戶不太了解實(shí)情就稀里糊涂地注冊(cè)了。因此在保持道德的前提下，如果你決定采用這種默認(rèn)選中的退出方式，保持其清晰可見，讓你的客戶知道他們被默認(rèn)添加的操作。畢竟，這種策略曾在歐洲被用來拯救生命。

27. 嘗試保持一致性，而不是讓用戶重學(xué)習(xí)

因?yàn)樘萍{德?諾曼那些很棒的書，保持用戶界面設(shè)計(jì)的一致性可能是最廣為人知的原則之一了。當(dāng)用戶使用界面或者產(chǎn)品時(shí)，一個(gè)一致的UI或者交互是減少用戶學(xué)習(xí)量的一種很好的方法。當(dāng)我們按下按鈕，移動(dòng)滑條的時(shí)候，我們希望這些交互元素看起來、用起來和被找到的方式是一樣的。一致性讓我們習(xí)慣了交互的方式，而一旦沒有了一致性，我們被迫進(jìn)入反復(fù)的學(xué)習(xí)中。一致性的界面元素可以通過多種方式來實(shí)現(xiàn)，比如說：顏色，方向，行為，位置，大小，形狀，標(biāo)簽以及語言。然而在我們保持所有元素的一致性之前，請(qǐng)記住，保持元素的不一致性仍然是有價(jià)值的。不一致的元素或者行為的出現(xiàn)能從我們的習(xí)慣性潛意識(shí)的深處喚起我們的注意力——當(dāng)你有想要獲得關(guān)注的事情的時(shí)候，這是很有幫助的。試一試，但也要知道什么時(shí)候打破它。

28. 嘗試使用智能的默認(rèn)值，而不是要求額外的操作

使用智能默認(rèn)值，或者根據(jù)經(jīng)驗(yàn)猜測預(yù)填表單字段能夠幫助用戶減少大量的工作量。這是一種節(jié)省用戶的寶貴時(shí)間，幫助用戶快速完成表單填寫的常用技巧。最糟糕的事情是從經(jīng)驗(yàn)和轉(zhuǎn)化點(diǎn)出發(fā)要求用戶填寫的信息可能是他們?cè)谶^去已經(jīng)反復(fù)多次提供過的。嘗試加載和顯示已經(jīng)驗(yàn)證過的字段值，而不是每次都要求用戶填寫。用戶的工作量越少越好。

29. 嘗試遵守約定俗成的規(guī)則，而不是新建標(biāo)準(zhǔn)

統(tǒng)一的約定是一致性的好伙伴。如果我們?cè)诮缑嫔媳３衷氐南嗨菩裕脩羰褂闷饋砭筒粫?huì)特別困難。另一方面，如果我們盡可能地保持多個(gè)界面上的元素的相似性，這就進(jìn)一步降低了用戶的學(xué)習(xí)成本。有了統(tǒng)一的UI約定，我們就知道屏幕右上角的叉是用來關(guān)閉窗口的。當(dāng)然這種約定隨著時(shí)間推移可能也會(huì)改變。不過記住，當(dāng)需要打破這種約定的時(shí)候，明確自己的意圖，并保證出發(fā)點(diǎn)是好的。

30. 嘗試聲明免于受損，而不是強(qiáng)調(diào)收益

我們都想贏，并且討厭失敗。根據(jù)說服力心理學(xué)的規(guī)則，我們更希望避免損失而不是獲得收益。這種規(guī)則也可以應(yīng)用于產(chǎn)品設(shè)計(jì)和宣傳中。宣傳產(chǎn)品能夠保護(hù)客戶現(xiàn)有的幸福、財(cái)富或社會(huì)地位，類似這種策略可能比嘗試向客戶提供客戶現(xiàn)在還沒有的、額外的東西要更有效。保險(xiǎn)公司在宣傳的時(shí)候，是說我們可以在事故之后獲得賠償還是強(qiáng)調(diào)能保護(hù)我們現(xiàn)有珍視的東西呢？

 31. 嘗試營造視覺層次，而不是平淡無奇

良好的視覺層次能區(qū)分重要的元素與不太重要的元素。視覺層次可以通過對(duì)齊、距離、顏色、色調(diào)、縮進(jìn)、字體大小、元素大小、填充、間距等方式來體現(xiàn)。當(dāng)這些視覺語言元素被正確運(yùn)用，他們能在頁面上抓住用戶的注意力，提高頁面的可讀性。視覺層次結(jié)構(gòu)可以產(chǎn)生視覺摩擦，放慢我們從上到下瀏覽整個(gè)頁面的速度。通過一個(gè)好的視覺層次，我們可能會(huì)多花點(diǎn)時(shí)間在頁面上，最后的結(jié)果可能是我們注冊(cè)了更多的項(xiàng)目。就像是一次公路旅行，你可以走高速公路，很快地到達(dá)目的地（頁面底部）；你也可以走風(fēng)景優(yōu)美的路線，放慢行程，沿路記住更多有趣的事物。給眼睛一個(gè)停留的地方。

32. 嘗試將相關(guān)的項(xiàng)目分組，而不是雜亂無序

將相關(guān)的項(xiàng)目分組在一起是增加產(chǎn)品可用性的一種基本方式。我們大多數(shù)人都知道刀和叉是放在一起的，同理打開和關(guān)閉功能通常也是在一起的。將相關(guān)的項(xiàng)目放在一起符合邏輯，也更符合用戶對(duì)產(chǎn)品的整體的認(rèn)知。用戶通常都不太樂意浪費(fèi)時(shí)間到處找東西。

33. 嘗試進(jìn)行內(nèi)聯(lián)驗(yàn)證，而不是提交后再報(bào)錯(cuò)

當(dāng)處理表單時(shí)，通常在驗(yàn)證到字段填寫不正確時(shí)就立馬給出錯(cuò)誤提示，比填完提交之后再報(bào)錯(cuò)要好得多。這里強(qiáng)調(diào)的交互模式當(dāng)然就是最著名的內(nèi)聯(lián)驗(yàn)證了。當(dāng)驗(yàn)證到錯(cuò)誤的時(shí)候，將其立馬顯示出來（在輸入框右邊顯示出來），這樣上下文中出現(xiàn)錯(cuò)誤時(shí)就可以立即被更正。另一方面，如果在表單提交之后再提示錯(cuò)誤，就會(huì)強(qiáng)迫用戶回憶之前的操作步驟而做額外的工作。

34. 嘗試放寬輸入的條件，而不是要求嚴(yán)格的數(shù)據(jù)格式

適當(dāng)放寬對(duì)輸入數(shù)據(jù)的要求會(huì)使計(jì)算機(jī)看起來更人性化一點(diǎn)。放寬對(duì)輸入數(shù)據(jù)的要求，包括數(shù)據(jù)的內(nèi)容、格式，會(huì)讓你的用戶界面更加友好。最好的例子就是當(dāng)我們要求用戶輸入電話號(hào)碼的時(shí)候，用戶輸入的方式有很多種——帶括號(hào)的，不帶括號(hào)的，帶破折號(hào)的，帶區(qū)號(hào)的等等。對(duì)你來說，就是稍微多寫幾行代碼，但你的用戶會(huì)因此省很多事。

35. 嘗試營造緊迫感，而不是毫無時(shí)間觀念

緊迫性是一種說服策略，通常被用來讓用戶立刻采取行動(dòng)，而不是稍候再行動(dòng)（或許壓根就不會(huì)采取行動(dòng)）。這種策略會(huì)起作用是因?yàn)樗馕吨撤N程度的短缺，因?yàn)檫@種產(chǎn)品或者服務(wù)可能現(xiàn)在還有，明天或許就沒有了。同樣地，它會(huì)起作用還因?yàn)樗凳玖耸ァ覀兌疾幌矚g失去機(jī)會(huì)。然而，刻意制造緊迫感對(duì)有些人來說是不可取的，這種做法被認(rèn)為是不誠實(shí)的。不過如果這種策略被正確使用的話，它仍然是有效的。所以不要制造虛假的緊迫感，因?yàn)楫?dāng)你的用戶再次造訪的時(shí)候，它會(huì)適得其反。

 36. 嘗試稀缺戰(zhàn)略

物以稀為貴。稀缺性表明商品或服務(wù)曾經(jīng)有很多，今天只有少部分了，明天可能會(huì)更少。你去比較一下批發(fā)市場和精品店的定價(jià)就知道了。再回過頭來看一下批發(fā)商，為了獲得更好的商品供應(yīng)，他們也可能使用稀缺戰(zhàn)略。一些批發(fā)商或大型零售商銷售數(shù)量有限的商品，一旦售罄，就沒有補(bǔ)充供給。在軟件開發(fā)的過程中，我們經(jīng)常忘記稀缺，因?yàn)楸忍睾妥止?jié)都可以輕易被復(fù)制，而且還有這么豐富的資源幫忙復(fù)制粘貼。然而，在UI的世界里，稀缺仍然可以被用來顯示現(xiàn)實(shí)世界的限制和瓶頸?？紤]一下這些數(shù)據(jù)所暗示的限制——你可以出售的網(wǎng)絡(luò)會(huì)議的門票數(shù)，一個(gè)月內(nèi)你能服務(wù)的客戶數(shù)，或者你在下次批量生產(chǎn)前所能提供的成品數(shù)。所有這些事物的顯示都可以喚起用戶的行動(dòng)。想想供應(yīng)和需求，少即是多。

37. 嘗試顯式地羅列選項(xiàng)，而不是讓用戶自己邊回憶邊填寫

這是一條與心理學(xué)緊密相關(guān)的經(jīng)典原則，即人們很容易在一些已有的事物中進(jìn)行辨識(shí)，而純粹從記憶中回憶則相對(duì)困難。辨識(shí)給我們提供的線索或提示，讓我們只需要稍微回憶一下就能完成。而回憶則要求人們完全靠自己從記憶深處進(jìn)行搜索。這可能就是為什么在考試中有時(shí)多項(xiàng)選擇題比開放題能更快地完成。所以給用戶提供一些之前涉及到的信息作為選項(xiàng)，而不是讓他們完全靠自己回憶。

  38. 嘗試設(shè)置更大的點(diǎn)擊區(qū)域

如果增加鏈接、表單以及按鈕的大小，它們將更容易被點(diǎn)擊。根據(jù)費(fèi)茨定律，使用點(diǎn)設(shè)備，我們需要更長的時(shí)間的去點(diǎn)擊目標(biāo)，尤其是距離更遠(yuǎn)，或目標(biāo)更小的時(shí)候。鑒于這個(gè)原因，考慮增加你表單字段文本框、行動(dòng)口號(hào)以及鏈接區(qū)域的大小。或者，也可以保持視覺元素的大小，而是只增加熱點(diǎn)或點(diǎn)擊區(qū)域的大小。應(yīng)用最廣泛的例子就是在移動(dòng)設(shè)備上的文本鏈接和導(dǎo)航菜單，將背景進(jìn)行拉伸填充以增大點(diǎn)擊的有效區(qū)域。

39. 嘗試優(yōu)化加載時(shí)間，而不是讓用戶等待

速度很重要?，F(xiàn)在頁面的預(yù)加載速度，或者是對(duì)用戶操作的響應(yīng)速度都會(huì)影響到用戶是否愿意等待。已經(jīng)證實(shí)，響應(yīng)時(shí)間多一秒，項(xiàng)目或產(chǎn)品的轉(zhuǎn)化率和成交率就會(huì)減少一分。因此一種策略就是通過優(yōu)化代碼和圖片技術(shù)性地減少頁面的加載時(shí)間。另一種策略就是應(yīng)用一些心理學(xué)因素來降低用戶對(duì)加載時(shí)間的感知。兩種策略都會(huì)使用戶感覺等待的時(shí)間沒有那么久。顯示進(jìn)度條來管理預(yù)期就是方法之一。另一種方法是在頁面加載的時(shí)候讓用戶有事可做（就好比是你沿著傳送帶走，總好過你站在原地跺腳）。

40. 嘗試使用快捷鍵，而不只是按鈕

當(dāng)你有一個(gè)較高使用率的產(chǎn)品時(shí)，考慮那些經(jīng)常光顧并在你的應(yīng)用上花費(fèi)大把時(shí)間的高級(jí)客戶總是好的。用戶往往會(huì)尋求各種讓他們更快地執(zhí)行重復(fù)任務(wù)的方法，這時(shí)快捷鍵就派上用場了。相比于用鼠標(biāo)在圖形用戶界面上進(jìn)行點(diǎn)擊，快捷鍵可以顯著提高工作效率。這方面的一個(gè)例子就在各大應(yīng)用中被廣泛使用的快捷鍵J（前進(jìn)）和K（后退），比如說Gmail，谷歌閱讀器，Twitter和Tumblr。按鈕也沒問題，但快捷鍵可以作為那些快手指的補(bǔ)充。

本文為@謝爾魚 翻譯并授權(quán)人人都是產(chǎn)品經(jīng)理社區(qū)發(fā)布，轉(zhuǎn)載請(qǐng)注明來自人人都是產(chǎn)品經(jīng)理社區(qū)并保留作者信息。

原文地址：http://goodui.org/

未完待續(xù)...