UI設(shè)計(jì)的最終目的就是為了更好的展示產(chǎn)品的內(nèi)容，讓用戶可以更好的接受。與傳統(tǒng)媒介比擬，互聯(lián)網(wǎng)產(chǎn)品所包羅的內(nèi)容更多，并且更加復(fù)雜。

以書(shū)籍為例，我們讀書(shū)都是一頁(yè)一頁(yè)的翻，一句一句的讀，不能跳來(lái)跳去。但是對(duì)于app和網(wǎng)頁(yè)來(lái)說(shuō)，我們無(wú)法期望用戶像讀書(shū)一樣來(lái)使用你的產(chǎn)品。這樣不現(xiàn)實(shí)，現(xiàn)在是快速讀圖時(shí)代，即使面對(duì)文字用戶也很少去“讀”，他們更習(xí)慣一目十行的去掃描。互聯(lián)網(wǎng)產(chǎn)品應(yīng)該做到讓用戶在短時(shí)間內(nèi)就可以獲取到他們期望的信息，找到他們想要使用的功能。

對(duì)比的應(yīng)用可以很好幫手我們來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)。因?yàn)轫?yè)面中信息雖然多，但是有優(yōu)先級(jí)之分。有些內(nèi)容對(duì)于用戶來(lái)說(shuō)不是那么重要，我們要弱化處理。同理，對(duì)于那些重要的內(nèi)容，或者用戶比較常用的功能，我們就要進(jìn)行強(qiáng)化凸顯，這就是我們說(shuō)的對(duì)比。

對(duì)比可以由形狀、配色、大小、字體和位置（留白）等來(lái)實(shí)現(xiàn)。

首先我們來(lái)說(shuō)說(shuō)形狀，對(duì)比的主要原則就是制止頁(yè)面中的元素太過(guò)于相似。在同一個(gè)頁(yè)面中，如果兩個(gè)功能是紛歧樣的，那么我們就盡量讓它倆在外不雅觀上看起來(lái)紛歧樣。如果無(wú)法在設(shè)計(jì)上進(jìn)行很好的區(qū)分，用戶很容易會(huì)混淆。

例如，現(xiàn)在很多的按鈕樣式都是矩形（圓角矩形）加文字。這就給了用戶一個(gè)暗示，矩形跟文字搭配在一起是可以點(diǎn)擊。但是我看到現(xiàn)在的一些app里，矩形跟文字在一起是做標(biāo)簽使用的。

我第一次使用的時(shí)候，嘗試點(diǎn)擊了一下，我以為會(huì)彈出一個(gè)彈出框來(lái)解釋這個(gè)T+0存取的具體意思。當(dāng)然也不是什么大問(wèn)題，用戶點(diǎn)擊了一次就會(huì)明白這是一個(gè)標(biāo)簽，不會(huì)造成持續(xù)性的干擾。

對(duì)比在UI設(shè)計(jì)中的一個(gè)主要目標(biāo)就是吸引用戶注意力。因?yàn)橐粋€(gè)頁(yè)面中的功能有很多，有的功能比較重要，用戶使用頻率比較高，設(shè)計(jì)師就需要把這個(gè)功能凸顯出來(lái)，更容易被用戶發(fā)現(xiàn)。配色是一個(gè)很好的實(shí)現(xiàn)手段。

以網(wǎng)易云音樂(lè)的客戶端為例，網(wǎng)易云音樂(lè)客戶端mac版和window版在設(shè)計(jì)上還是有很大區(qū)另外，這里我們只說(shuō)搜索框。

Mac版里搜索框填充使用的白色，而windows使用的填充是深紅色。

可以很明顯的看出，同樣在紅色的配景下，搜索框使用白色可以更好的吸引用戶的目光。任何一款音樂(lè)類app，搜索框都是一個(gè)使用頻率很高的功能，這樣的一個(gè)功能，我們應(yīng)該讓用戶很容易就發(fā)現(xiàn)而不是費(fèi)力去找。

下面這個(gè)登錄界面比較常見(jiàn)，在登錄按鈕有三個(gè)鏈接，別離是：忘記密碼、立即注冊(cè)和游客登錄。

為了提升網(wǎng)站轉(zhuǎn)化率，我們會(huì)希望新用戶點(diǎn)擊立即注冊(cè)這個(gè)鏈接，所以在配色上使用了橙色將其凸顯出來(lái)。這屬于通過(guò)配色來(lái)實(shí)現(xiàn)對(duì)比。其實(shí)在這里我們除了使用配色，還可以使用大小和位置來(lái)實(shí)現(xiàn)對(duì)比。

這是同樣的一個(gè)登錄框，將游客登錄移到下方，縮小字號(hào)。兩種設(shè)計(jì)方案都可以很好的鼓勵(lì)用戶去完成注冊(cè)。

就像我在上篇文章中說(shuō)到的，設(shè)計(jì)是一個(gè)經(jīng)常會(huì)讓人陷入糾結(jié)的行業(yè)。以信息錄入頁(yè)面為例，在設(shè)計(jì)此類頁(yè)面的時(shí)候，我經(jīng)常問(wèn)本身錄入的信息到底是居中，居左還是居右。我沒(méi)有措施說(shuō)服我本身去100%的接受一個(gè)方案。

如果需要用戶填寫(xiě)的項(xiàng)目比較少那還好，因?yàn)槲恢脹](méi)有那么重要，信息左對(duì)齊、右對(duì)齊或居中都可以。只要連結(jié)頁(yè)面整潔美不雅觀就行了。但是當(dāng)頁(yè)面信息比較多，并且需要用戶填寫(xiě)的信息和回顯的信息夾雜在一起，我就很糾結(jié)了，因?yàn)槲恢玫闹匾跃屯癸@出來(lái)了。

以下圖為例，左邊回顯信息和需要輸入的信息都是左對(duì)齊，這樣的排布的好處是頁(yè)面非常整潔。但是對(duì)于用戶來(lái)說(shuō)，他們第一眼看去很難分辨出哪些信息是需要填寫(xiě)的。以下圖為例，如果用戶沒(méi)有仔細(xì)看可能會(huì)以為滿屏的信息都是需要填寫(xiě)的，，造成很高的跳出率，然而需要用戶輸入的信息只有3個(gè)。

接下來(lái)我們?cè)賮?lái)看看右邊的排布，回顯的信息采用的是右對(duì)齊，這樣用戶的確可以很快的分辨出需要的填寫(xiě)的信息，但是排布有點(diǎn)亂，并且不符合用戶的操作習(xí)慣。

對(duì)于這個(gè)案例，可能會(huì)有人有更好的解決方案。例如，我們可以加深回顯字體的顏色來(lái)強(qiáng)化對(duì)比，或者我們也可以增加輸入框的高度等。

標(biāo)簽：鹽城 烏魯木齊 東營(yíng) 九江 林芝