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

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

而關(guān)鍵的問題，就出在平面四要素的 —— 重復(fù)性上。

一、學(xué)員案例分析

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

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

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

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

問題 1：頂部廣告樣式不統(tǒng)一

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

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

問題 2：標題樣式各異

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

問題 3：熱門片場的樣式

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

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

問題 4：漸變應(yīng)用過多

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

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

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

且里面出現(xiàn)的字體在前其它頁面也沒有應(yīng)用，突然放進來也很違和。

問題 6：正文文本字體不統(tǒng)一

除了大的設(shè)計樣式外，小的設(shè)計細節(jié)一樣不能忽視，其中承載信息的文本中，權(quán)重基本相同的內(nèi)容尺寸卻不一致，增加了一些沒必要的規(guī)格。

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

二、優(yōu)化思路的解析

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

而想要解決問題，就必須要學(xué)會正確建立并使用 —— 設(shè)計規(guī)范。

設(shè)計規(guī)范不是用來做文檔的擺設(shè)，也不是因為頁面要做的花就可以忽略掉的阻力，它能實打?qū)嵉脦椭O(shè)計師來規(guī)范界面的統(tǒng)一性，實踐重復(fù)原則。

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

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

優(yōu)化 1：圓角的統(tǒng)一

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

優(yōu)化 2：優(yōu)化間距

將原文連接的模塊進行拆分，并統(tǒng)一間距，包括模塊上下間距 36、左右間距 8、內(nèi)間距 12 等。

優(yōu)化 3：字體定義

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

除了特殊字體外，剩下的就是基礎(chǔ)文本字體的統(tǒng)一，削減字號和字重數(shù)量，把它們統(tǒng)一成固定的幾個規(guī)格。

優(yōu)化 4：色彩優(yōu)化

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

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

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

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

原版合集：

新版合集：

設(shè)計規(guī)范對于項目設(shè)計是非常重要的工具，不是用來輸出文檔的擺設(shè)，還是實現(xiàn)復(fù)雜設(shè)計的阻力。

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

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

不要讓自己的專業(yè)性表現(xiàn)在這種初級的問題上翻車！

結(jié)尾

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

我們下篇再賤~

作者：超人的電話亭