如何正確使用設計規范，提升界面設計水平？

在前面的 C 端行業分析說過，當前的 C 端 APP 界面為了搶奪用戶的注意力，設計越做越花哨，運營、國潮化的風格越來越濃烈。

所以，現在的作品集項目設計和準備都無可避免的要有所涉獵。對于初級設計師來講，“模仿（致敬）”一兩個成熟案例沒什么問題，但要做出一整套，就駕馭不住了。

而關鍵的問題，就出在平面四要素的 —— 重復性上。

一、學員案例分析

“重復”是四要素中最簡單的一個原則，即在畫面中對設計元素、樣式、細節進行重復，來建立整體觀感的統一、和諧。

但越是簡單的原則，越是在實際應用中會被忽視，形成對應的問題。所以如果不能掌握重復的應用方式，就沒辦法確保界面樣式的統一，自然輸出的項目效果就會大打折扣。

想要解決這個問題，我用一個學員的作業為例進行講解，下面是首頁中的三個不同分頁：

而這次的分析中，重點是圍繞在重復性的問題上展開，所以我不會過多講解設計本身的好壞和體驗的問題。

問題 1：頂部廣告樣式不統一

第一個問題就是頂部廣告圖樣式每個頁面都不一樣，用了三種樣式。雖然不是說樣式一定要統一，甚至做不同的樣式也能增加設計的豐富性，但這三個樣式明顯呈現出不和諧的問題。

主要的問題是對圓角和轉角的處理上，三個廣告圖的圓角各不相同，同時在缺口異形處理上，使用的轉角也不一樣。

問題 2：標題樣式各異

第二個問題就是標題的排版和樣式上，除了頂部分頁器標題，下方多數內容模塊是有給模塊標題的，而部分模塊沒有標題，且標題間的尺寸沒有統一。

問題 3：熱門片場的樣式

熱門片場這個組件的樣式獨立性過強，包含了很多特殊的設計細節，比如序號和下方的小字母。而右側的兩個同級模塊又不保留間距，直接連接到一起。

雖然不加間距的做法下方想看模塊也有，但是想看的連接是封面和信息卡片，是一個模塊下的兩部分內容，而不是熱門片場內的并列內容。

問題 4：漸變應用過多

頁面中用的漸變太多，而漸變顏色不同，本身顏色很混亂且缺乏統一性，進一步降低界面的視覺效果。

問題 5：熱門城市卡片樣式

熱門城市模塊如果單看還好，但把它置入到多頁面中一起展示就很突兀，因為沒有這樣的大圓角應用。

且里面出現的字體在前其它頁面也沒有應用，突然放進來也很違和。

問題 6：正文文本字體不統一

除了大的設計樣式外，小的設計細節一樣不能忽視，其中承載信息的文本中，權重基本相同的內容尺寸卻不一致，增加了一些沒必要的規格。

除了以上 6 個問題外，還有一些按鈕、圖標等小細節的問題就不一一列舉。只要知道，很多時候整套界面設計好以后，湊一起檢查覺得看起來不對勁，又找不到問題出在哪里，那就是重復性原則的缺失。

二、優化思路的解析

上面的問題有不少，但在以重復性原則的優化角度來說，頭疼醫頭、腳痛醫腳的做法是沒用的，因為你改完了還可以出現新的問題，治標不治本。

而想要解決問題，就必須要學會正確建立并使用 —— 設計規范。

設計規范不是用來做文檔的擺設，也不是因為頁面要做的花就可以忽略掉的阻力，它能實打實得幫助設計師來規范界面的統一性，實踐重復原則。

而在上面的案例中，要建立什么規范呢？

根據問題的順序包含圓角、間距、字體、顏色四個方向，我們逐一進行解釋：

優化 1：圓角的統一

首先統一圓角的規格，提前把圓角規范成 8 和 4 兩個數值，然后應用到頭部廣告、熱門城市以及其它組件模塊中去。

優化 2：優化間距

將原文連接的模塊進行拆分，并統一間距，包括模塊上下間距 36、左右間距 8、內間距 12 等。

優化 3：字體定義

字體的優化上包含兩個部分，一個是使用特殊字體的使用，因為這類花哨風格的設計只用默認字體確實是不足的，所以要用個性字體就一開始定好用“標小智無界黑”，且這個字體會用在一些關鍵的標題、數字上，而不是像原先只用在熱門城市內的標題。

除了特殊字體外，剩下的就是基礎文本字體的統一，削減字號和字重數量，把它們統一成固定的幾個規格。

優化 4：色彩優化

這個項目的主色其實是橙色…但原設計沒有表現，所以要重新明確主色、中性色。而因為沒有做前面的品牌色搭建，沒有做合理、固定的輔助色的話，那就不在這里強行規范它，給后面的配色更多發揮余地。

同時，在漸變方向，要定出符合項目需要的漸變還是有點困難，因為當前的界面視覺元素和顏色已經很多了（圖片、圖標），漸變顯得很多余，所以最好的方法就是不用、少用……在一定要加的場景在看情況設計。

根據上面定好的規范，再移除一些不必要的元素，我們就可以快速輸出新的版本，下面我們做個前后的對比:

在不涉及頁面、組件大改的情況下，每個頁面對比之前的差距其實并不太大，但當把它們合并到一起以后再對比一次，是否能感受到不同？

原版合集：

新版合集：

設計規范對于項目設計是非常重要的工具，不是用來輸出文檔的擺設，還是實現復雜設計的阻力。

雖然在真實項目中，很多大廠產品的設計毫無重復原則可言，做到哪算哪，前后割裂嚴重，比如：

新人可千萬不要拿這些東西做參考，他們雖然那么做了，但招聘的時候可是另一套標（zui）準（lian），所以一定要按更嚴格的標準來要求自己。

不要讓自己的專業性表現在這種初級的問題上翻車！

結尾

后面還有一些案例的改版會持續更新，有想討論的問題可以在下方或者社群里留言！

我們下篇再賤~

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