超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

UI設(shè)計(jì)中的對(duì)比應(yīng)用

2017-7-13    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


UI設(shè)計(jì)的最終目的就是為了更好的展示產(chǎn)品的內(nèi)容,讓用戶可以更好的接受。與傳統(tǒng)媒介相比,互聯(lián)網(wǎng)產(chǎn)品所包含的內(nèi)容更多,而且更加復(fù)雜。以書籍為例,我們讀書都是一頁(yè)一頁(yè)的翻,一句一句的讀,不能跳來(lái)跳去。但是對(duì)于app和網(wǎng)頁(yè)來(lái)說,我們無(wú)法期望用戶像讀書一樣來(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)說不是那么重要,我們要弱化處理。同理,對(duì)于那些重要的內(nèi)容,或者用戶比較常用的功能,我們就要進(jìn)行強(qiáng)化凸顯,這就是我們說的對(duì)比。


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


形狀


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


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


UI設(shè)計(jì)中的對(duì)比應(yīng)用


我第一次使用的時(shí)候,嘗試點(diǎn)擊了一下,我以為會(huì)彈出一個(gè)彈出框來(lái)解釋這個(gè)T+0存取的具體意思。當(dāng)然也不是什么大問題,用戶點(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)易云音樂的客戶端為例,網(wǎng)易云音樂客戶端mac版和window版在設(shè)計(jì)上還是有很大區(qū)別的,這里我們只說搜索框。


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


UI設(shè)計(jì)中的對(duì)比應(yīng)用UI設(shè)計(jì)中的對(duì)比應(yīng)用


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


位置


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


UI設(shè)計(jì)中的對(duì)比應(yīng)用


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


UI設(shè)計(jì)中的對(duì)比應(yīng)用


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


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


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


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


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


UI設(shè)計(jì)中的對(duì)比應(yīng)用


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


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


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


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


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


UI設(shè)計(jì)中的對(duì)比應(yīng)用


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


UI設(shè)計(jì)中的對(duì)比應(yīng)用


總結(jié)


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


藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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è)人資料

存檔