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

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

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

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

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

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

設(shè)計感是一個比較含糊的名詞，它是對設(shè)計專業(yè)性的評價。有設(shè)計感，就是設(shè)計出來的東西看起來專業(yè)，沒設(shè)計感，就是設(shè)計的東西看起來簡陋、業(yè)余。但要注意的是，簡約不代表沒設(shè)計感。

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

分拆細節(jié)逐一講解雖然有必要，但篇幅太長，我們在這里先圍繞一個能囊括這些細節(jié)的對象做解析，即 —— 組件。

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

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

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

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

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

而右側(cè)組件之所以看起來更成熟、有設(shè)計感，是因為它們會增加很多設(shè)計細節(jié)，來提升整個組件的質(zhì)感。

舉個栗子：

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

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

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

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

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

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

第一步：頁面選擇

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

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

確定頁面中包含的組件類型，并對不同組件做一個基本的認識，它是什么或類似什么。

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

第三步：尋找參考

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

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

比如首頁頂部欄和廣告區(qū)域，可以找出若干的案例，然后放進本地的文件夾，或者類似花瓣 Eagle 中的畫板里，這個收集過程不要太長，最多收集 20-30 個案例即可，再多也沒用：

第四步：篩選對象

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

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

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

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

比如下面這樣：

組件都完成以后，最后就可以去把整個頁面拼起來，做最終的優(yōu)化。而因為做過的組件樣式不止一種，所以可以進行不同的組合，組合出新的頁面。

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

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

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

結(jié)尾

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

作者：超人的電話亭