在我做界面遇到問題的時(shí)候，前輩經(jīng)常建議“多看看好的設(shè)計(jì)”，可是現(xiàn)在平臺上琳瑯滿目的設(shè)計(jì)作品，到底哪些是值得學(xué)習(xí)的，又覺得難以辨別，憑自己的感覺難免會(huì)有偏差。因此有時(shí)候自己找的學(xué)習(xí)對象就有一些問題，自然也就做不出好的設(shè)計(jì)。

多次碰壁之后，自己總結(jié)了三個(gè)分辨好壞設(shè)計(jì)的套路：具有視覺吸引力；細(xì)節(jié)處理到位；實(shí)用。

具有視覺吸引力

當(dāng)我看到一個(gè)作品的時(shí)候，首先看它是否具有視覺吸引力。這個(gè)吸引力和單純的好看還不太一樣。好看的設(shè)計(jì)不一定就是好的設(shè)計(jì)，但是好的設(shè)計(jì)一定要具有視覺吸引力。好看不好看的評判是很主觀的，但是視覺吸引力是有原則可循的。我把他們分為以下三個(gè)參考標(biāo)準(zhǔn)：層級分明、一致性、小特別。

1、層級分明

清晰的層級結(jié)構(gòu)能讓用戶看起來更加舒適，也能夠快速的獲取重要內(nèi)容。那么我們在看的時(shí)候判斷它是否層級分明，主要看不同的模塊之間是否區(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)一原則，同一層級的內(nèi)容要統(tǒng)一，比如說同為模塊標(biā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)得起市場考驗(yàn)的才是好的設(shè)計(jì)。平臺上很多概念稿，有些簡單的大圖堆積就很漂亮，但是在做的時(shí)候可能并不實(shí)用。因?yàn)樽髡咴谠O(shè)計(jì)的時(shí)候都是精心挑選的圖片，我們在看的時(shí)候就很容易忽視細(xì)節(jié)，而只看到了圖片的效果。但是也要去看概念稿，因?yàn)楦拍罡謇镉泻芏啻竽懙呐渖?，?chuàng)新的形式可能是線上作品中所缺乏的。

劃重點(diǎn)

好的設(shè)計(jì)要具備以下幾個(gè)特點(diǎn)：

第一是具有視覺吸引力，首先要層級分明，具有一致性，并且有一些小特別；

第二是細(xì)節(jié)處理到位，頁面具有品質(zhì)感；

第三是實(shí)用，比好看更加重要的是實(shí)用。

雖然我總結(jié)了幾點(diǎn)好的設(shè)計(jì)的特點(diǎn)，但是并不是說不具備這些特點(diǎn)的就完全不好。事實(shí)上很多作品都有我們可以學(xué)習(xí)的點(diǎn)?？偨Y(jié)的不足的地方，還希望大家指正。我們一起學(xué)習(xí)吖。

作者：山竹屁

公眾號：海鹽社