當(dāng)你為你的項(xiàng)目創(chuàng)建有效的，可訪問(wèn)的，漂亮的ui時(shí)，只需要最小的調(diào)整來(lái)幫助快速改善你的設(shè)計(jì)。 努力創(chuàng)造。在這篇簡(jiǎn)短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實(shí)踐中，這些小技巧可以毫不費(fèi)力地幫助你改善你的設(shè)計(jì)，還有用戶體驗(yàn)。

希望你喜歡！

1·讓你的元素出現(xiàn)更多

用微妙的邊界定義。

使用多重陰影或非常微妙的邊界（只是一個(gè)陰影比你的實(shí)際影子）周圍的某些元素可以使這些元素出現(xiàn)

更清晰，更清晰，幫助你避免那些看起來(lái)泥濘的陰影。

2.減少字母間距

標(biāo)題給一個(gè)更好的光學(xué)范圍。減少長(zhǎng)格式正文的字母間距？這是一個(gè)大大的“不”。但對(duì)于標(biāo)題……我要說(shuō)“是”!

你的標(biāo)題很可能會(huì)比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時(shí)會(huì)出現(xiàn)視覺(jué)上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺(jué)平衡，更易于閱讀，通常更賞心悅目。

3.圖表一致性

為了一致性，確保你的圖標(biāo)具有相同的視覺(jué)風(fēng)格。確保它們擁有相同的視覺(jué)風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。

4.頁(yè)面可以用一種字體

只使用一種字體就很好。在設(shè)計(jì)時(shí)，使用單一字體是絕對(duì)沒(méi)問(wèn)題的，這樣做實(shí)際上可以幫你產(chǎn)生更強(qiáng)、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個(gè)單獨(dú)的字體。

5.適當(dāng)?shù)牧舭?/h3>

 

留白是UI設(shè)計(jì)朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計(jì)透氣，而且看起來(lái)更光亮。

 

 

6.20pt的文字

創(chuàng)建長(zhǎng)篇內(nèi)容？給20 pt試試。對(duì)于長(zhǎng)形式的內(nèi)容（即微博文章，項(xiàng)目描述等等），試著這樣做20pt(甚至更多一點(diǎn))為你的文本字號(hào)。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時(shí)效果得很好，并帶來(lái)更好的閱讀體驗(yàn)當(dāng)你的用戶面對(duì)一堵文字墻的時(shí)候。18pt太過(guò)時(shí)了。

7.字號(hào)集比例

使用字體比例定義一個(gè)適合的字體大小集。使用字體比例可以幫助您輕松、實(shí)用地定義一組字體大小。顧名思義，Type Scale基于一個(gè)比例因子(比如1.25)工作的。從一個(gè)基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來(lái)和諧的文本字號(hào)集。因?yàn)樗麄兊拇笮「鶕?jù)設(shè)定的固定比例增加和減少。

8.界面顏色定義

選擇一個(gè)基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計(jì)。如果項(xiàng)目允許，簡(jiǎn)單地使用一個(gè)有限的調(diào)色板選擇一個(gè)基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡(jiǎn)單的方式來(lái)改變你的設(shè)計(jì)。

9.登陸用戶體驗(yàn)

改善用戶登錄的體驗(yàn)。記住拇指規(guī)則。允許用戶在任何時(shí)候跳過(guò)您的移動(dòng)應(yīng)用程序上線序列，并且放置跳過(guò)鏈接在拇指容易觸及的位置。只是一個(gè)簡(jiǎn)單的調(diào)整，可以為你的用戶提供更好的體驗(yàn)……

記住，拇指仍然是主宰！

10.陰影來(lái)自一個(gè)光源

你的影子來(lái)自其中一個(gè)光源對(duì)吧？確保你的影子總是來(lái)自一個(gè)光源。這是一個(gè)簡(jiǎn)單的錯(cuò)誤，但它可以讓你的設(shè)計(jì)看起來(lái)更拋光且統(tǒng)一。記住，我們不是生活在一個(gè)擁有一千個(gè)太陽(yáng)的國(guó)度里。

11.建立字體集合

使用更好的字體組合，效率會(huì)很很快。當(dāng)你想要提高你的字體組合技巧的時(shí)候，當(dāng)面對(duì)1000個(gè)字體選擇，只是去尋找對(duì)應(yīng)的自己集合，效率會(huì)快很多。

12.提高你的對(duì)比

文字和圖像與一個(gè)微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測(cè)試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實(shí)現(xiàn)兩者之間的簡(jiǎn)單對(duì)比。為了在你的文本之間形成良好的對(duì)比，不要太復(fù)雜的內(nèi)容和圖片。

13.使用居中排列文字要有節(jié)制

太多就會(huì)導(dǎo)致用戶體驗(yàn)不合格。盡量只在標(biāo)題和小段落中使用中心文字。對(duì)于幾乎所有其他內(nèi)容，保持文本左對(duì)齊。你的用戶會(huì)感謝你的你。

14.多字重

當(dāng)選擇一個(gè)多用途的文字，盡量找一個(gè)大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項(xiàng)目中使用它，請(qǐng)嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項(xiàng)目會(huì)要求“只有一種風(fēng)格”

更精致的字體，但對(duì)于絕大多數(shù)項(xiàng)目，你想要的字體再多一點(diǎn)就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計(jì)過(guò)程的后期需要更多的空間。

15.淺色背景不要文本過(guò)亮

想要?jiǎng)?chuàng)造更容易理解的界面，對(duì)吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時(shí)，不要讓你的文本太亮。

16.純黑色文字未必是好

當(dāng)涉及到長(zhǎng)形式的內(nèi)容時(shí)，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會(huì)很僵硬。你可以很容易地解決這個(gè)問(wèn)題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。

17.通過(guò)色彩對(duì)比度作區(qū)分

總是通過(guò)icon最突出的內(nèi)容。你認(rèn)為這是常識(shí)，對(duì)嗎？我并不覺(jué)得。通過(guò)使用色彩對(duì)比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。

18.字體越小，行高越大

當(dāng)你的字體變小時(shí)，請(qǐng)?jiān)黾有懈?，以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡(jiǎn)單地降低行高。

19.“Il1”測(cè)試文字可讀性

使用x-height來(lái)測(cè)試字體的可讀性。基本上，x-height是一個(gè)小寫字母' x '相對(duì)于大寫字母高度 (T)的相同字體。如果你的字體有一個(gè)大的x高，通常有助于更好地閱讀，特別是在使用長(zhǎng)形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無(wú)法選擇的字體，可以做這個(gè)測(cè)試，比較來(lái)自特定字體的三個(gè)字符：大寫字母I，小寫的L和數(shù)字1。

20.突出實(shí)用動(dòng)作

當(dāng)設(shè)計(jì)一個(gè)在應(yīng)用程序內(nèi)部使用的菜單時(shí)，確保提供最多經(jīng)常使用的動(dòng)作（例如：上傳圖像，添加文件等)最突出的屏幕上。

21.顏色-從你的圖像中選擇

顏色-從你的圖像中選擇，會(huì)給你的產(chǎn)品帶來(lái)生命。簡(jiǎn)單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計(jì)具有豐富的視覺(jué)趣味和個(gè)性。

22.不同字體，不同行高

基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測(cè)量，實(shí)現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來(lái)實(shí)現(xiàn)。

23.突出最重要元素的方式

突出最重要的元素。通過(guò)使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡(jiǎn)單，但微妙的調(diào)整，讓用戶體驗(yàn)更好一點(diǎn)。

24.錯(cuò)誤下額外的視覺(jué)輔助

操作錯(cuò)誤的時(shí)候，添加一個(gè)額外的視覺(jué)輔助。在用戶剛剛采取的操作附近添加一個(gè)錯(cuò)誤消息可以是簡(jiǎn)單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時(shí)額外的視覺(jué)輔助。

25.移動(dòng)端熱區(qū)創(chuàng)建

嘗試在移動(dòng)端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域，是好的。對(duì)于只包含文本的按鈕和鏈接來(lái)說(shuō)，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。

以下是iOS和Android的最小推薦點(diǎn)擊區(qū)域：

44 x 44pt用于iOS

48x48dp用于Android

26.短標(biāo)題上盡量使用全大寫

在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請(qǐng)確保它們?cè)谌魏螘r(shí)候都很短。有可能，最好是一行。將它們用于較長(zhǎng)的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺(jué)效果更好。

27.保持文字與圖像的對(duì)比度

在輕文本和圖像之間，保持可接受的對(duì)比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡(jiǎn)單地應(yīng)用一個(gè)稍微不透明的背景在你的文本后面將保持這些元素之間的對(duì)比度很好。

28.英文標(biāo)題字體推薦

看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計(jì)感很強(qiáng)。（我沒(méi)有推廣費(fèi)用，請(qǐng)放心用）

29.英文長(zhǎng)文本字體推薦

看看這些很棒的字體，用于長(zhǎng)文本是非常好的，強(qiáng)烈推薦使用。（我仍然沒(méi)有任何推廣費(fèi)）。

30.讓垂直節(jié)奏恰到好處

標(biāo)題和正文。當(dāng)你想實(shí)現(xiàn)一個(gè)好的垂直節(jié)奏，以及一個(gè)強(qiáng)大的視覺(jué)之間，需要對(duì)文本元素排版、間距作設(shè)計(jì)。我見(jiàn)過(guò)許多設(shè)計(jì)，最常見(jiàn)的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會(huì)給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強(qiáng)，有良好的垂直節(jié)奏，視覺(jué)層次保留在所有的文章之間。

31.使用具有信息性的提示符

對(duì)于下載指標(biāo)，試著去做盡可能提供信息。對(duì)于用戶，嘗試使具有信息性的下載指示符對(duì)用戶很友好。你可以通過(guò)使用顏色來(lái)實(shí)現(xiàn)這一點(diǎn)，用百分?jǐn)?shù)來(lái)顯示當(dāng)前進(jìn)度，一個(gè)簡(jiǎn)單的圖標(biāo)，讓他們可以在任何地方取消下載時(shí)間。

32.保持標(biāo)題相對(duì)簡(jiǎn)潔

如果你能保持標(biāo)題簡(jiǎn)短，簡(jiǎn)潔……“想做就做”。

如果可以，如果合適的話，保持標(biāo)題簡(jiǎn)短，時(shí)髦，切中要點(diǎn)。而不是“這是你的風(fēng)格，你的方式”，簡(jiǎn)單地使用像這樣的“你的風(fēng)格。你的方式。”人們會(huì)瀏覽，保持這些標(biāo)題簡(jiǎn)短有力有助于他們更快地消化中的信息。

記住，這種方式可能會(huì)讓人感覺(jué)很突然，你需要考慮一下你所從事的項(xiàng)目類型，以及目標(biāo)受眾來(lái)決定方法是合適的，相對(duì)于更標(biāo)準(zhǔn)的格式。

33.選擇合適的字體

正確的設(shè)計(jì)“聲音”。在項(xiàng)目中處理文本時(shí)，選擇正確的字體將影響就像你說(shuō)話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨(dú)特的聲音，關(guān)鍵在于找到合適的字體你正在做的項(xiàng)目的聲音。當(dāng)你剛接觸字體時(shí)，這似乎是一項(xiàng)艱巨的任務(wù)，所以不要害怕從類似的項(xiàng)目中獲得靈感，并從這些項(xiàng)目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。

34.行長(zhǎng)度的平衡點(diǎn)

你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長(zhǎng)度可能有點(diǎn)平衡。對(duì)于一個(gè)單獨(dú)的列頁(yè)面，45到75個(gè)字符被普遍認(rèn)為是滿意的行長(zhǎng)度，而行長(zhǎng)度為66個(gè)字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時(shí)也起著重要作用，但是對(duì)于行長(zhǎng)，保持在45到75個(gè)字符之間，就會(huì)更好了。

35.幽靈文字提升用戶體驗(yàn)

偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問(wèn)題。屏幕上的大部分文本內(nèi)容應(yīng)該堅(jiān)持可用性最佳的做法是沒(méi)有問(wèn)題的。但有時(shí)，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計(jì)都落入乏味。如果沒(méi)有元素會(huì)以任何方式影響用戶體驗(yàn)，那么出于裝飾的原因，插入奇怪的元素是可以的。

36.界面元素保證快速區(qū)分

使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個(gè)獨(dú)立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來(lái)，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項(xiàng)目在屏幕上，并很容易區(qū)分其他元素。

37.投影的玩兒法

只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對(duì)吧？它們可以作為微妙又很強(qiáng)大的視覺(jué)線索，在您的設(shè)計(jì)中使用要適度?，F(xiàn)實(shí)世界中的陰影，在大多數(shù)情況下幾乎是不可察覺(jué)的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實(shí)現(xiàn)一些的東西更微妙和栩栩如生。

38.全大寫文本

使用全部大寫？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計(jì)中適度使用“全部大寫”是很好的。選擇一個(gè)合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。

39.讓面包屑脫穎而出

讓面包屑脫穎而出，易于為用戶解釋。面包屑無(wú)處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過(guò)最小的調(diào)整，你可以確保用戶能夠快速定位他們?cè)谝粋€(gè)網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過(guò)使用跳轉(zhuǎn)到網(wǎng)站的某個(gè)深度，這一點(diǎn)尤其有用。

40.嘗試用高飽和顏色

使用高度飽和的顏色?試一試用淺色調(diào)來(lái)緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來(lái)很棒，但是當(dāng)過(guò)度使用時(shí)，它們會(huì)使使用者的眼睛疲勞，主要是在使用的時(shí)候的文字內(nèi)容。盡可能使用時(shí)要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時(shí)，可讀性和可訪問(wèn)性應(yīng)該是最優(yōu)先的。

41.圖表不要叛逆的使用

在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計(jì)中添加圖標(biāo)時(shí)，試著選擇一個(gè)有代表性的已建立的圖標(biāo)。不要選擇一個(gè)能傳達(dá)正確含義和功能的圖標(biāo)否則會(huì)引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過(guò)于叛逆。

42.接近原則

在眾多經(jīng)過(guò)嘗試和測(cè)試的設(shè)計(jì)原則中，這里有一個(gè)是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計(jì)元素放置在一起的過(guò)程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。

43.文本網(wǎng)格

4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時(shí)，8點(diǎn)網(wǎng)格旁邊使用4點(diǎn)基線

可以為你的設(shè)計(jì)帶來(lái)更和諧的垂直節(jié)奏。您需要對(duì)齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）

為什么4？我發(fā)現(xiàn)在過(guò)去使用特定的文本大小時(shí)，按8的倍數(shù)縮放是不太合適。

44.文本建議行高比例

減少標(biāo)題上的行高是很好的。與長(zhǎng)形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。

45.顏色選擇

選顏色有困難計(jì)劃嗎？在顏色上進(jìn)行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個(gè)簡(jiǎn)單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時(shí)，可以使用類似的方法。

46.提高信噪比

在你的設(shè)計(jì)中盡量提高信噪比。你可以在你的設(shè)計(jì)中通過(guò)最大化信號(hào)來(lái)實(shí)現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過(guò)確保提供相關(guān)信息(信號(hào))來(lái)實(shí)現(xiàn)這一點(diǎn)有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。

47.圖像文字達(dá)到強(qiáng)對(duì)比

我想用更非正式的方式說(shuō)話。語(yǔ)氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會(huì)顯得有點(diǎn)正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項(xiàng)目時(shí)，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強(qiáng)的對(duì)比。

48.使用重量、大小和顏色來(lái)表示類型中的層次結(jié)構(gòu)

當(dāng)使用類型時(shí)，元素不需要尖叫“看看我!”一直如此但他們確實(shí)需要一個(gè)平衡的等級(jí)制度。只需通過(guò)重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實(shí)現(xiàn)這一點(diǎn)。這樣做可以讓用戶掃描并找到必要的元素，避免在過(guò)程中產(chǎn)生任何混淆。

49.淺色文字加深色？

養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個(gè)更輕的粗細(xì)。但是…反過(guò)來(lái)說(shuō):淺色文字>深色背景。最好是看一下增加一點(diǎn)字體重量，特別是對(duì)于長(zhǎng)表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。

50. 用你的字體選擇創(chuàng)造正確的情感回應(yīng)

試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺(jué)，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。

51.大寫字母+字母間距=更好的易讀性

你是否使用全大寫的短行文本？嗯…這是一個(gè)好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因?yàn)樽帜父啾舜藚^(qū)分。字母之間的間距只要稍微增加一點(diǎn)就可以。

52.錯(cuò)誤告知

打開這些錯(cuò)誤消息，您的表格有幫助。在使用表單時(shí)，請(qǐng)嘗試并確保錯(cuò)誤消息得到解釋。出了什么問(wèn)題，如何補(bǔ)救。總是讓用戶了解情況，即使是像常規(guī)一樣常見(jiàn)的事情的形式。讓這些錯(cuò)誤消息有用，不要讓您的用戶蒙昧。

53.告知用戶正在發(fā)生什么

試著向用戶保證在加載過(guò)程中會(huì)發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見(jiàn)性是一個(gè)重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。

54.不可逆的操作強(qiáng)提醒

告訴用戶將要做什么如果他們應(yīng)用了某個(gè)動(dòng)作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進(jìn)行確認(rèn)。他們就會(huì)按下那個(gè)標(biāo)有“刪除”的紅色大按鈕。

參考文獻(xiàn)《UI & UX Micro Tips - The Ultimate Collection》

在我們使用的產(chǎn)品中，多多少少都會(huì)有一些微交互的穿插，但由于微交互性能的不搶眼也不明顯的條件下，所以往往會(huì)被很多設(shè)計(jì)和開發(fā)人員所忽略。

微交互的轉(zhuǎn)型

但在一個(gè)優(yōu)秀的產(chǎn)品中，微交互卻是必不可少的重要關(guān)口，它直接承載著用戶在使用產(chǎn)品時(shí)對(duì)產(chǎn)品細(xì)節(jié)的細(xì)微體驗(yàn)。雖然在互聯(lián)網(wǎng)產(chǎn)品早期，微交互曾被人稱之為是“很炫酷的特性象征”，但時(shí)隔今日，在這百花齊放的產(chǎn)品大環(huán)境中，其實(shí)微交互已經(jīng)慢慢從膚淺的炫酷轉(zhuǎn)型為附有內(nèi)涵的用戶體驗(yàn)關(guān)鍵要素了。

作為產(chǎn)品細(xì)節(jié)體驗(yàn)的重要承載，微交互的價(jià)值與地位逐漸提升，在用戶使用產(chǎn)品過(guò)程中，它不僅僅能促進(jìn)產(chǎn)品與用戶的互動(dòng)性，而且還能激發(fā)用戶對(duì)產(chǎn)品的積極感覺(jué)，并且最終影響用戶的整體行為。

什么是微交互

微交互的基本概念就是指：關(guān)注一項(xiàng)主要任務(wù)、一個(gè)目的得事件過(guò)程。通常情況下，微交互需要關(guān)注得是這個(gè)事件的整體交互過(guò)程，并且它存在的目的也是為了讓用戶在使用產(chǎn)品時(shí)能感覺(jué)到順暢性、一致性，并產(chǎn)生心理的愉悅感，從而讓用戶喜歡產(chǎn)品，愛(ài)上產(chǎn)品，從而留住用戶。

如果籠統(tǒng)概括的話，可以說(shuō)微交互幾乎會(huì)遍布任何設(shè)備、任何應(yīng)用程序中。并且他們存在的價(jià)值就是讓用戶高興。就單純從產(chǎn)品說(shuō)起，如果說(shuō)在產(chǎn)品設(shè)計(jì)中，在大多數(shù)用戶與產(chǎn)品接觸時(shí)都能發(fā)現(xiàn)微交互的存在與應(yīng)用。

舉例

1、你在Web看一段話時(shí)結(jié)尾展示是“…”時(shí)，那么通過(guò)你的心智程序，你就會(huì)下意識(shí)的將光標(biāo)停留在這段話上，在這樣的情況下，微交互就會(huì)出現(xiàn)了，則在這段話的周圍就會(huì)出現(xiàn)這句話完整的展示從而被你瀏覽。

2、還有一種常見(jiàn)的就是在你輸入錯(cuò)誤的信息時(shí)系統(tǒng)會(huì)自動(dòng)識(shí)別，并在末尾彈出消息提示，提示你需要從新輸入，更有優(yōu)秀的系統(tǒng)會(huì)從你開始輸入時(shí)就跟進(jìn)你的輸入狀態(tài)，時(shí)刻提醒你輸入的結(jié)果是否正確。

其實(shí)這些小的視覺(jué)暗示和微妙的指示就是所謂的為微交互，也有人稱之為“圍觀互動(dòng)”。雖然這些微交互平日不太容易能被用戶所直觀的發(fā)現(xiàn)，但也就是這些微小的交互，才能提升一個(gè)產(chǎn)品的整體用戶體驗(yàn)。所以說(shuō)，無(wú)論他們是多么的微妙，你都需要重視起來(lái)，并嘗試著將一般的設(shè)計(jì)方案和這些結(jié)合起來(lái)使用，并提供一些有效的信息，這樣才能讓你的用戶在瀏覽產(chǎn)品界面和執(zhí)行操作時(shí)有基本的保障。

知道了什么是微交互后，你還需要吃透微交互它到底是怎么工作的，只有這樣才能確保你靈活的使用微交互…

微交互是如何工作的

微交互的工作一般要分為四個(gè)基本要素：觸發(fā)、規(guī)則、反饋、循環(huán)。

觸發(fā)

觸發(fā)簡(jiǎn)單講就是“啟動(dòng)微交互”，例如：點(diǎn)擊按鈕或點(diǎn)擊鼠標(biāo)。這里需要注意的是，觸發(fā)并不單純是人為操作的開始，它也同樣包含系統(tǒng)自動(dòng)啟動(dòng)的操作，比如說(shuō)在你設(shè)備上收到一份郵件或短信時(shí)，這時(shí)的你其實(shí)并沒(méi)有任何操作，但系統(tǒng)就會(huì)有一個(gè)微交互啟動(dòng)為你提示，這時(shí)的微交互就是被動(dòng)的。

這些所謂的啟動(dòng)微交互，需要注意的是必須與一組已經(jīng)擬定好的操作規(guī)則一起工作，這些規(guī)則里包含了什么能做，什么不能做的內(nèi)容。

規(guī)則

微交互的規(guī)則就是表明用戶在操作后產(chǎn)品該如何按照用戶正確的心智程序進(jìn)行微交互，它決定了觸發(fā)之后會(huì)發(fā)生什么事情。因此，當(dāng)你在拉下界面時(shí)，產(chǎn)品的規(guī)則就應(yīng)該包含下滑的規(guī)則，這同時(shí)也能表明用戶當(dāng)時(shí)的心理是希望看到界面以上的結(jié)果或者下拉刷新看到更多新的結(jié)果。同樣，規(guī)則就是規(guī)則，在你沒(méi)有進(jìn)行操作時(shí)，規(guī)則時(shí)而也在生效，例如：微信里對(duì)方并未添加你為好友，但依然和你說(shuō)了句話，規(guī)則就是生效的，這里的規(guī)則就是阻止了信息的傳入。

反饋

顧名思義反饋在現(xiàn)實(shí)中就是你與人對(duì)話交流，對(duì)方饋贈(zèng)你的信息，在產(chǎn)品中這個(gè)環(huán)節(jié)也同樣必不可少，它的存在可以讓用戶明確知道在用戶操作后產(chǎn)品發(fā)生了什么，出現(xiàn)什么結(jié)果的回饋信息。在微交互中，用戶看到的、聽到的、操作的、甚至包含感覺(jué)到的，都是可以反饋的。

例如：

1、看到的：希望打車，看到的反饋就是地圖和輸入起始地/目的地的界面，這就符合了用戶心理；

2、聽到的：在與人聊天時(shí)，其他人也和你說(shuō)了句話，就聽到手機(jī)“蜂”一聲，這樣的反饋就是提醒用戶聽到有新消息；

3、操作的：在任何產(chǎn)品中都需要用戶操作，那么然后反饋用戶操作結(jié)果；

4、感覺(jué)到的：這包含界面樣式、產(chǎn)品交互是否符合用戶心理預(yù)期，并通過(guò)預(yù)期實(shí)現(xiàn)操作后得到想要結(jié)果，這里面就包含感覺(jué)到的反饋；

循環(huán)

循環(huán)在微交互里屬于次數(shù)的說(shuō)明，在我們手機(jī)設(shè)置鬧鈴時(shí)就經(jīng)常看到有提醒一次、一周提醒等說(shuō)明，這就是循環(huán)的微交互，循環(huán)的微交互基本上定義了交互的某種性質(zhì)，它會(huì)告訴你隨著時(shí)間的推移發(fā)生了幾次，發(fā)生了多少。

例如：在你去銀行自動(dòng)取款機(jī)取錢時(shí)輸入的密碼，如果輸入錯(cuò)誤，就會(huì)提示你還有幾次輸入，這樣的就是循環(huán)的過(guò)程，等于是在原地打轉(zhuǎn)，但當(dāng)你成功進(jìn)入后就會(huì)從這個(gè)環(huán)節(jié)進(jìn)入到下一個(gè)環(huán)節(jié)繼續(xù)循環(huán)。

說(shuō)了這么多，我想你應(yīng)該知道了微交互的工作方式以及流程，那么接下來(lái)要說(shuō)的就是微交互需要在何時(shí)、何地以及如何才能正確使用了。

何時(shí)、何地以及如何使用微交互

1、界面滑動(dòng)

現(xiàn)如今產(chǎn)品幾乎都帶有滑動(dòng)的交互，之所以滑動(dòng)越來(lái)越多，是因?yàn)榛瑒?dòng)交互可以清楚的展示給用戶行為操作路徑，而點(diǎn)擊確實(shí)短期記憶性的，當(dāng)用戶想要開始滑動(dòng)時(shí)，這是用戶操作前的準(zhǔn)備，而當(dāng)用戶正在滑動(dòng)時(shí)，這是操作中的節(jié)點(diǎn)，這時(shí)滑動(dòng)的界面就會(huì)隨著手勢(shì)的方向進(jìn)行移動(dòng)并告訴用戶界面即將去往哪里，下次想要找到該從哪里找的路徑，在操作結(jié)束后，微交互完成，這時(shí)操作后的結(jié)果，這一整套流程下來(lái)，通過(guò)短小的微交互，就能很清晰的告知用戶他在做什么以及他做了什么。

2、下拉/側(cè)拉菜單

下拉/側(cè)拉菜單就像產(chǎn)品某個(gè)界面內(nèi)的一個(gè)抽屜，它里面包含了當(dāng)前界面賦予的更多選擇，并且還能占據(jù)極小的空間，根據(jù)用戶的心智程序來(lái)講，竟然是抽屜就應(yīng)該拉取，這才符合環(huán)境映射的條件。當(dāng)前在產(chǎn)品設(shè)計(jì)內(nèi)，幾何都包含了下拉/側(cè)拉菜單的微交互，例如淘寶的側(cè)拉菜單、美團(tuán)的下拉菜單都是微交互的展示，在輕松點(diǎn)擊后，界面tab則下拉或側(cè)拉出一個(gè)抽屜，里面就包含了N多個(gè)附加選擇或者篩選器。

3、引導(dǎo)頁(yè)

對(duì)于產(chǎn)品的不斷迭代與改版，其界面一定會(huì)發(fā)生一些細(xì)微的變化，更有時(shí)功能會(huì)作為轉(zhuǎn)移，那么為了能更好的引導(dǎo)用戶的操作路徑，就需要用到一些引導(dǎo)頁(yè)，我這里說(shuō)的引導(dǎo)頁(yè)并不是啟動(dòng)頁(yè)后的大篇章引導(dǎo)，而是在半黑透明遮罩的同時(shí)，流出需要用戶操作的功能引導(dǎo)，在聚焦了操作功能上，賦予一些微交互，會(huì)加大用戶對(duì)產(chǎn)品的認(rèn)可，包括喜歡新產(chǎn)品。

4、操作反饋

在用戶正在輸入一個(gè)列表菜單時(shí)，最需要的微交互就是即使反饋，作為產(chǎn)品首先應(yīng)該賦予用戶的就是安全與人性，安全是指產(chǎn)品在用戶心理的懷疑指數(shù)多少，指數(shù)越低安全度越高，而人性就需要操作的了路徑與展示是符合用戶的心理預(yù)期的。安全與人性都可以通過(guò)微交互來(lái)實(shí)現(xiàn)，例如在建設(shè)銀行APP登陸前會(huì)出現(xiàn)安全掃描，在支付寶輸入了支付密碼后出現(xiàn)的結(jié)果符合了人性思維。

5、卡片旋轉(zhuǎn)/淡化

有些app會(huì)出現(xiàn)卡片類樣式的界面，并通過(guò)用戶的操作實(shí)現(xiàn)卡片淡化和卡片丟棄等微交互，這樣的微交互則更加具象了用戶的真實(shí)空間感受，通過(guò)與真實(shí)環(huán)境的結(jié)合，將用戶帶入產(chǎn)品，使用戶在使用產(chǎn)品時(shí)會(huì)有現(xiàn)實(shí)版的感覺(jué)。例如：陌陌的附近人卡片丟棄，網(wǎng)易音樂(lè)的音樂(lè)專輯封面淡化。

總結(jié)

微交互在產(chǎn)品內(nèi)可以說(shuō)是無(wú)處不在，雖然這些都是一些很小的細(xì)節(jié)，如果只是靜態(tài)展示可能并沒(méi)有太大作用，但通過(guò)產(chǎn)品與用戶的這種互動(dòng)，變相交流，微交互在產(chǎn)品的整體體驗(yàn)上就可以增加巨大的價(jià)值，這也可能是所謂的“宜家效應(yīng)”吧，用戶在自己親手制作或行動(dòng)時(shí)，才能賦予產(chǎn)品更大的價(jià)值感。

好的產(chǎn)品必須擁有這種精心設(shè)計(jì)的標(biāo)志，它不僅包含了對(duì)用戶的心智理解，更多的，是對(duì)用戶的一種尊重與情感抒發(fā)。