在我做界面遇到問題的時(shí)候,前輩經(jīng)常建議“多看看好的設(shè)計(jì)”,可是現(xiàn)在平臺(tái)上琳瑯滿目的設(shè)計(jì)作品,到底哪些是值得學(xué)習(xí)的,又覺得難以辨別,憑自己的感覺難免會(huì)有偏差。因此有時(shí)候自己找的學(xué)習(xí)對(duì)象就有一些問題,自然也就做不出好的設(shè)計(jì)。
多次碰壁之后,自己總結(jié)了三個(gè)分辨好壞設(shè)計(jì)的套路:具有視覺吸引力;細(xì)節(jié)處理到位;實(shí)用。
具有視覺吸引力
當(dāng)我看到一個(gè)作品的時(shí)候,首先看它是否具有視覺吸引力。這個(gè)吸引力和單純的好看還不太一樣。好看的設(shè)計(jì)不一定就是好的設(shè)計(jì),但是好的設(shè)計(jì)一定要具有視覺吸引力。好看不好看的評(píng)判是很主觀的,但是視覺吸引力是有原則可循的。我把他們分為以下三個(gè)參考標(biāo)準(zhǔn):層級(jí)分明、一致性、小特別。
1、層級(jí)分明
清晰的層級(jí)結(jié)構(gòu)能讓用戶看起來更加舒適,也能夠快速的獲取重要內(nèi)容。那么我們?cè)诳吹臅r(shí)候判斷它是否層級(jí)分明,主要看不同的模塊之間是否區(qū)分明確;界面中主次是否分明;是否符合用戶的閱讀習(xí)慣。
首先,好的界面,都是分模塊展示的,而不是平鋪直敘。并且不同的模塊之間區(qū)分明確。當(dāng)我們看到一個(gè)界面,不能快速的區(qū)分出不同的模塊,那說明它的模塊區(qū)分的不夠好。比如下圖,右圖看著就更加舒適、清晰。
其次,內(nèi)容要有主有次,重要的信息突出,次要的信息弱化。一個(gè)模塊中的重要內(nèi)容只能有一個(gè),如果有多個(gè)重點(diǎn),那就等于沒有重點(diǎn)。以下圖為例,左圖沒有主次,右圖很明顯就能知道重點(diǎn)內(nèi)容是什么。
最后要根據(jù)視覺流的原則去審視這個(gè)界面是否符合用戶的閱讀習(xí)慣。比如說我們的閱讀習(xí)慣是從左到右,從上到下,但是界面的重點(diǎn)內(nèi)容卻放在視覺流程的尾端,是不是就不太合理呢?
2、一致性
這里說的一致性,一方面是視覺上的一致,另一方面是與已知的一致。視覺上,一個(gè)產(chǎn)品中頁面的風(fēng)格、元素、間隔等都要遵循統(tǒng)一原則,同一層級(jí)的內(nèi)容要統(tǒng)一,比如說同為模塊標(biāo)題,字體色號(hào)卻不一致,這樣就會(huì)導(dǎo)致頁面的混亂。
與已知的一致,是把設(shè)計(jì)與生活聯(lián)系起來,讓用戶看到這個(gè)設(shè)計(jì)就能想到生活中相關(guān)的東西,具有熟悉感,也更容易上手。比如說界面中的票券設(shè)計(jì),與生活中的票券可撕樣式保持一致。
3、小特別
為什么這里說是小特別,沒有說大差異呢。因?yàn)槲艺J(rèn)為,UI和平面設(shè)計(jì)還不太一樣。平面重視覺,追求視覺沖擊力。但是UI界面更多的是追求好用。用戶已經(jīng)習(xí)慣了已有的視覺形式和交互模式,突然來了一個(gè)顛覆性的設(shè)計(jì),用戶反倒不知所措。但是又要有差異,區(qū)分那些常規(guī)的設(shè)計(jì)。所以我在看的時(shí)候就去看一些符合現(xiàn)有的習(xí)慣,但是又有些微創(chuàng)意在里面的。
細(xì)節(jié)處理到位
有句話說,真正考驗(yàn)設(shè)計(jì)能力的是設(shè)計(jì)細(xì)節(jié)上的處理。的確,一個(gè)界面的細(xì)節(jié)把握能很大提升一個(gè)界面的品質(zhì),有時(shí)候我們看到一個(gè)界面,大問題沒有,但就是有些粗糙,不夠精致。這就是細(xì)節(jié)處理不到位的結(jié)果。小到一個(gè)卡片的圓角設(shè)計(jì),分割線的粗細(xì)、顏色設(shè)置等,都能影響一個(gè)界面的整體感覺。
比如說下面的分割線,左面的色彩粗細(xì)都很合適,能夠在不干擾內(nèi)容的情況下,做到分割的作用。右側(cè)的顏色過重又是通欄效果,給人的感覺就很生硬。
實(shí)用
好的設(shè)計(jì)最終都是要落地的。起初我通常會(huì)更加關(guān)注這個(gè)界面好不好看,事實(shí)上比好看更重要的是好用、實(shí)用。因此平時(shí)看作品的時(shí)候要分辨出哪些是單純視覺好,但是實(shí)現(xiàn)起來成本會(huì)比較高或者效果并沒有那么好的。
我在學(xué)習(xí)的時(shí)候就盡量多去看線上產(chǎn)品,畢竟經(jīng)得起市場(chǎng)考驗(yàn)的才是好的設(shè)計(jì)。平臺(tái)上很多概念稿,有些簡單的大圖堆積就很漂亮,但是在做的時(shí)候可能并不實(shí)用。因?yàn)樽髡咴谠O(shè)計(jì)的時(shí)候都是精心挑選的圖片,我們?cè)诳吹臅r(shí)候就很容易忽視細(xì)節(jié),而只看到了圖片的效果。但是也要去看概念稿,因?yàn)楦拍罡謇镉泻芏啻竽懙呐渖?,?chuàng)新的形式可能是線上作品中所缺乏的。
劃重點(diǎn)
好的設(shè)計(jì)要具備以下幾個(gè)特點(diǎn):
第一是具有視覺吸引力,首先要層級(jí)分明,具有一致性,并且有一些小特別;
第二是細(xì)節(jié)處理到位,頁面具有品質(zhì)感;
第三是實(shí)用,比好看更加重要的是實(shí)用。
雖然我總結(jié)了幾點(diǎn)好的設(shè)計(jì)的特點(diǎn),但是并不是說不具備這些特點(diǎn)的就完全不好。事實(shí)上很多作品都有我們可以學(xué)習(xí)的點(diǎn)??偨Y(jié)的不足的地方,還希望大家指正。我們一起學(xué)習(xí)吖。
作者:山竹屁
公眾號(hào):海鹽社
全站高品質(zhì)素材免費(fèi)下載!