今天要圍繞這期 C 端學員提出的問題做解答，內容是 —— 為什么做出來的界面沒有設計感，應該怎么練？

往期干貨：

一、界面的設計感是什么

我相信很多同學還是初學者都會發現，自己做的界面就是很“普通”，缺乏設計感，比如下面這些案例（隨手找的）。

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

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

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

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

更具體一點，設計感就是對不同設計細節處理的合理性和創意性，比如內容的排版、線段的應用、色彩的填充、圖標的樣式等等。設計感不是一個單一的問題，是不同細節專處理的合集，這些細節處理得越專業，設計感越強，反之則越弱。

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

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

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

每個小模塊的設計，就是形成界面設計感的關鍵。我們來看看一些“簡單”的組件，和另一些“成熟”組件之間的對比。

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

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

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

舉個栗子：

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

所以提升設計感，就要重點關注組件的設計，通過優化局部組件的樣式，來實現更好的整體效果。

二、組件優化的方式和訓練

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

在經過長期的培訓經驗總結中，我認為最好的組件設計思維的掌握，就是通過實戰方式獲得，而不是看書、看視頻、看干貨分享。

具體應該怎么實戰？大致的練習路徑如下：

第一步：頁面選擇

就是從原創頁面練習的案例中找出一個頁面（組件模塊多點的）作為練習對象，比如下面這個學員的作業。

第二步：組件區分

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

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

第三步：尋找參考

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

真正找參考的方式，是根據組件的類型去找，而不是頁面類型。且每個組件單獨收集靈感案例，收集的標準一方面是質量比較優秀，另一方面是要覺得這個組件是可以套進原有設計中的，而不是完全沒有抄的空間。

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

第四步：篩選對象

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

第五步：完成復制

即根據最終篩選出來的案例，完成對它們的樣式復制，也就是直接“抄”。但因為組件之間字段信息有一定的差異，所以當然不能完全一模一樣的抄下來，而是要在吸收它們設計優點的同時換上自己的內容。

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

比如下面這樣：

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

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

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

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

結尾

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

歡迎關注作者的微信公眾號：「超人的電話亭」