解讀UI中的對比設(shè)計

互聯(lián)網(wǎng)產(chǎn)品應(yīng)該做到讓用戶在短時間內(nèi)就可以獲取到他們期望的信息，找到他們想要使用的功能。

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

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

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

對比可以由形狀、配色、大小、字體和位置(留白)等來實現(xiàn)。

形狀

首先我們來說說形狀，對比的主要原則就是避免頁面中的元素太過于相似。在同一個頁面中，如果兩個功能是不一樣的，那么我們就盡量讓它倆在外觀上看起來不一樣。如果無法在設(shè)計上進(jìn)行很好的區(qū)分，用戶很容易會混淆。

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

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

配色

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

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

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

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

位置

下面這個登錄界面比較常見，在登錄按鈕有三個鏈接，分別是：忘記密碼、立即注冊和游客登錄。

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

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

令人糾結(jié)的“對比”

就像我在上篇文章中說到的，設(shè)計是一個經(jīng)常會讓人陷入糾結(jié)的行業(yè)。以信息錄入頁面為例，在設(shè)計此類頁面的時候，我經(jīng)常問自己錄入的信息到底是居中，居左還是居右。我沒有辦法說服我自己去100%的接受一個方案。

如果需要用戶填寫的項目比較少那還好，因為位置沒有那么重要，信息左對齊、右對齊或居中都可以。只要保持頁面整潔美觀就行了。但是當(dāng)頁面信息比較多，而且需要用戶填寫的信息和回顯的信息夾雜在一起，我就很糾結(jié)了，因為位置的重要性就凸顯出來了。

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

接下來我們再來看看右邊的排布，回顯的信息采用的是右對齊，這樣用戶的確可以很快的分辨出需要的填寫的信息，但是排布有點亂，而且不符合用戶的操作習(xí)慣。

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

但是我一直堅信沒有一種好的設(shè)計方案，有的產(chǎn)品追求頁面美觀整潔可能會犧牲一些易用性，而有的產(chǎn)品為了追求更好的操作體驗可能會打破設(shè)計的一致性。

扁平化設(shè)計中“對比”

扁平化設(shè)計現(xiàn)在的大行其道離不開微軟和蘋果兩大巨頭的推動。2006年微軟推出的Metro Design標(biāo)志著扁平化設(shè)計在IT領(lǐng)域應(yīng)用的開始，蘋果開始使用扁平化設(shè)計是2013年iOS7的發(fā)布。其實同樣是扁平化設(shè)計，微軟和蘋果的風(fēng)格還是有區(qū)別的。微軟的扁平化設(shè)計有點過于扁平了：把陰影、質(zhì)感、深度一律去除，一點過渡都沒有，一律拍扁，一拍到底。整個界面看起來就是各種純色、方形大色塊的集合，頁面缺乏層次感。

從對比實現(xiàn)角度來說，我個人更偏愛蘋果。因為陰影、質(zhì)感、深度這樣統(tǒng)統(tǒng)都是實現(xiàn)對比的重要手段，Metro design里砍掉了這些無疑給設(shè)計平添了很多限制。蘋果的扁平化還是保留了很多之前擬物化設(shè)計時代的一些細(xì)節(jié)，沒有像微軟一樣走的那么極端。

總結(jié)

對比是UI設(shè)計中一個重要的技(套)法(路)，以上就是我對其做的一些總結(jié)，希望大家讀完之后可以有所收獲。

名稱欄目：解讀UI中的對比設(shè)計
標(biāo)題網(wǎng)址：http://muchs.cn/news9/170609.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、微信小程序、Google、定制開發(fā)、移動網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)