今天要圍繞這期 C 端學(xué)員提出的問(wèn)題做解答，內(nèi)容是 —— 為什么做出來(lái)的界面沒(méi)有設(shè)計(jì)感，應(yīng)該怎么練？

一、界面的設(shè)計(jì)感是什么

我相信很多同學(xué)還是初學(xué)者都會(huì)發(fā)現(xiàn)，自己做的界面就是很"普通"，缺乏設(shè)計(jì)感，比如下面這些案例（隨手找的）。

這種界面的質(zhì)量只能叫 —— 給原型上色，遠(yuǎn)遠(yuǎn)達(dá)不到專(zhuān)業(yè)要求。很多設(shè)計(jì)師自己也能感覺(jué)出來(lái)做出來(lái)的東西不夠理想，沒(méi)設(shè)計(jì)感，但就是不知道怎么優(yōu)化和改觀。

這種問(wèn)題的存在非常普遍，因?yàn)?UI 設(shè)計(jì)雖然很簡(jiǎn)單，但它還是設(shè)計(jì)，是需要積累和經(jīng)驗(yàn)。而只是學(xué)會(huì)軟件和了解些基礎(chǔ)規(guī)范的話(huà)，是不足以支撐有效設(shè)計(jì)輸出的。

所以，必須要做進(jìn)一步的訓(xùn)練來(lái)提升這部分的能力。而想要提升界面設(shè)計(jì)感，首先就要知道設(shè)計(jì)感是什么。

設(shè)計(jì)感是一個(gè)比較含糊的名詞，它是對(duì)設(shè)計(jì)專(zhuān)業(yè)性的評(píng)價(jià)。有設(shè)計(jì)感，就是設(shè)計(jì)出來(lái)的東西看起來(lái)專(zhuān)業(yè)，沒(méi)設(shè)計(jì)感，就是設(shè)計(jì)的東西看起來(lái)簡(jiǎn)陋、業(yè)余。但要注意的是，簡(jiǎn)約不代表沒(méi)設(shè)計(jì)感。

更具體一點(diǎn)，設(shè)計(jì)感就是對(duì)不同設(shè)計(jì)細(xì)節(jié)處理的合理性和創(chuàng)意性，比如內(nèi)容的排版、線(xiàn)段的應(yīng)用、色彩的填充、圖標(biāo)的樣式等等。設(shè)計(jì)感不是一個(gè)單一的問(wèn)題，是不同細(xì)節(jié)專(zhuān)處理的合集，這些細(xì)節(jié)處理得越專(zhuān)業(yè)，設(shè)計(jì)感越強(qiáng)，反之則越弱。

分拆細(xì)節(jié)逐一講解雖然有必要，但篇幅太長(zhǎng)，我們?cè)谶@里先圍繞一個(gè)能囊括這些細(xì)節(jié)的對(duì)象做解析，即 —— 組件。

UI 的界面是由若干組件組成的，每個(gè)組件往往有很強(qiáng)的獨(dú)立性，不管是內(nèi)容還是樣式上，比如下面的案例。

所以，我們可以把界面理解成是一個(gè)若干小模塊的設(shè)計(jì)，只是最終有一個(gè)把它們組合起來(lái)的過(guò)程。

每個(gè)小模塊的設(shè)計(jì)，就是形成界面設(shè)計(jì)感的關(guān)鍵。我們來(lái)看看一些"簡(jiǎn)單"的組件，和另一些"成熟"組件之間的對(duì)比。

在對(duì)比中可以明顯感覺(jué)到，右側(cè)的組件比左側(cè)的更有設(shè)計(jì)感。

如果很多同學(xué)不知道怎么判斷自己的作品有沒(méi)有設(shè)計(jì)感，對(duì)比成熟的線(xiàn)上項(xiàng)目就可以得到答案。

而右側(cè)組件之所以看起來(lái)更成熟、有設(shè)計(jì)感，是因?yàn)樗鼈儠?huì)增加很多設(shè)計(jì)細(xì)節(jié)，來(lái)提升整個(gè)組件的質(zhì)感。

舉個(gè)栗子：

如果設(shè)計(jì)出來(lái)的組件只有左側(cè)的水平，右邊這類(lèi)組件樣式做不出來(lái)，那頁(yè)面的效果是指定不會(huì)好的，也不會(huì)有多少設(shè)計(jì)感。

所以提升設(shè)計(jì)感，就要重點(diǎn)關(guān)注組件的設(shè)計(jì)，通過(guò)優(yōu)化局部組件的樣式，來(lái)實(shí)現(xiàn)更好的整體效果。

二、組件優(yōu)化的方式和訓(xùn)練

設(shè)計(jì)是種思維和實(shí)踐能力的結(jié)合，實(shí)踐能力可以通過(guò)看教學(xué)和臨摹獲得，而思維的掌握卻有一定的門(mén)檻，需要我們進(jìn)行 —— 刻意練習(xí)。

在經(jīng)過(guò)長(zhǎng)期的培訓(xùn)經(jīng)驗(yàn)總結(jié)中，我認(rèn)為最好的組件設(shè)計(jì)思維的掌握，就是通過(guò)實(shí)戰(zhàn)方式獲得，而不是看書(shū)、看視頻、看干貨分享。

具體應(yīng)該怎么實(shí)戰(zhàn)？大致的練習(xí)路徑如下：

第一步：頁(yè)面選擇

就是從原創(chuàng)頁(yè)面練習(xí)的案例中找出一個(gè)頁(yè)面（組件模塊多點(diǎn)的）作為練習(xí)對(duì)象，比如下面這個(gè)學(xué)員的作業(yè)。

第二步：組件區(qū)分

確定頁(yè)面中包含的組件類(lèi)型，并對(duì)不同組件做一個(gè)基本的認(rèn)識(shí)，它是什么或類(lèi)似什么。

這一步非常重要，因?yàn)殡m然有很多行業(yè)通用的標(biāo)準(zhǔn)組件類(lèi)型，比如瓷片區(qū)、快速入口、動(dòng)態(tài)卡片之類(lèi)，但也有很多組件根本就沒(méi)有明確的歸類(lèi)，你要自己給它做個(gè)大致的分類(lèi)，才能在下一步有針對(duì)性的篩選相關(guān)的參考和案例。

第三步：尋找參考

接下來(lái)是很關(guān)鍵的一步，就是找參考，但大多數(shù)新手其實(shí)壓根不知道應(yīng)該怎么找。參考不是根據(jù)應(yīng)用的頁(yè)面類(lèi)型去網(wǎng)上四處亂找，比如這個(gè)菜譜的首頁(yè)，你就專(zhuān)門(mén)挑同類(lèi)的應(yīng)用首頁(yè)去找。一方面這類(lèi)應(yīng)用和案例數(shù)量少，另一方面做得好的就更少。

真正找參考的方式，是根據(jù)組件的類(lèi)型去找，而不是頁(yè)面類(lèi)型。且每個(gè)組件單獨(dú)收集靈感案例，收集的標(biāo)準(zhǔn)一方面是質(zhì)量比較優(yōu)秀，另一方面是要覺(jué)得這個(gè)組件是可以套進(jìn)原有設(shè)計(jì)中的，而不是完全沒(méi)有抄的空間。

比如首頁(yè)頂部欄和廣告區(qū)域，可以找出若干的案例，然后放進(jìn)本地的文件夾，或者類(lèi)似花瓣 Eagle 中的畫(huà)板里，這個(gè)收集過(guò)程不要太長(zhǎng)，最多收集 20-30 個(gè)案例即可，再多也沒(méi)用：

第四步：篩選對(duì)象

雖然前面收集控制了數(shù)量，但依舊有很多，會(huì)造成參考上的混亂。所以我們就要從中進(jìn)一步篩選出最適合、最優(yōu)秀的學(xué)習(xí)、模仿對(duì)象，再將它們和原組件置入到畫(huà)布排列到一起。

第五步：完成復(fù)制

即根據(jù)最終篩選出來(lái)的案例，完成對(duì)它們的樣式復(fù)制，也就是直接"抄"。但因?yàn)榻M件之間字段信息有一定的差異，所以當(dāng)然不能完全一模一樣的抄下來(lái)，而是要在吸收它們?cè)O(shè)計(jì)優(yōu)點(diǎn)的同時(shí)換上自己的內(nèi)容。

而每個(gè)組件并不是只做一個(gè)就夠了，實(shí)現(xiàn)越多的效果，對(duì)最終頁(yè)面的影響越大，作為練習(xí)的效果也越好。

比如下面這樣：

組件都完成以后，最后就可以去把整個(gè)頁(yè)面拼起來(lái)，做最終的優(yōu)化。而因?yàn)樽鲞^(guò)的組件樣式不止一種，所以可以進(jìn)行不同的組合，組合出新的頁(yè)面。

按這種方式完成的案例和原圖對(duì)比如下：

在這里我們只用最基本照搬的模式給你們展示結(jié)果，而不是我們自己認(rèn)為更合理的修改，也能比原來(lái)的設(shè)計(jì)有極大的提升。原因就是你們需先學(xué)會(huì)怎么找參考，怎么關(guān)注別人優(yōu)秀的細(xì)節(jié)，怎么把優(yōu)秀的設(shè)計(jì)套到自己項(xiàng)目里來(lái)，否則糾結(jié)得再多，最終輸出的結(jié)果還是很普通。

使用這種方式進(jìn)行訓(xùn)練，一周完成 3-5 個(gè)頁(yè)面案例，那么一個(gè)月后你就可以得到完全不同的結(jié)果。

結(jié)尾

設(shè)計(jì)能力的提升源自有效的練習(xí)，光看不做是沒(méi)有結(jié)果的，方法給了剩下的得靠自己練，不然誰(shuí)也幫不了你們。而這種訓(xùn)練，最多也就只有 1%的設(shè)計(jì)師會(huì)展開(kāi)，所以他們立馬就可以獲得壓倒性的優(yōu)勢(shì)。這是 UI 行業(yè)實(shí)際上一點(diǎn)也"不卷"的原因。

作者：超人的電話(huà)亭