在前面的 C 端行業(yè)分析說(shuō)過(guò)，當(dāng)前的 C 端 APP 界面為了搶奪用戶的注意力，設(shè)計(jì)越做越花哨，運(yùn)營(yíng)、國(guó)潮化的風(fēng)格越來(lái)越濃烈。

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

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

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

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

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

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

而這次的分析中，重點(diǎn)是圍繞在重復(fù)性的問(wèn)題上展開(kāi)，所以我不會(huì)過(guò)多講解設(shè)計(jì)本身的好壞和體驗(yàn)的問(wèn)題。

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

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

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

問(wèn)題 2：標(biāo)題樣式各異

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

問(wèn)題 3：熱門(mén)片場(chǎng)的樣式

熱門(mén)片場(chǎng)這個(gè)組件的樣式獨(dú)立性過(guò)強(qiáng)，包含了很多特殊的設(shè)計(jì)細(xì)節(jié)，比如序號(hào)和下方的小字母。而右側(cè)的兩個(gè)同級(jí)模塊又不保留間距，直接連接到一起。

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

問(wèn)題 4：漸變應(yīng)用過(guò)多

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

問(wèn)題 5：熱門(mén)城市卡片樣式

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

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

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

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

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

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

上面的問(wèn)題有不少，但在以重復(fù)性原則的優(yōu)化角度來(lái)說(shuō)，頭疼醫(yī)頭、腳痛醫(yī)腳的做法是沒(méi)用的，因?yàn)槟愀耐炅诉€可以出現(xiàn)新的問(wèn)題，治標(biāo)不治本。

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

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

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

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

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

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

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

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

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

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

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

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

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

同時(shí)，在漸變方向，要定出符合項(xiàng)目需要的漸變還是有點(diǎn)困難，因?yàn)楫?dāng)前的界面視覺(jué)元素和顏色已經(jīng)很多了（圖片、圖標(biāo)），漸變顯得很多余，所以最好的方法就是不用、少用……在一定要加的場(chǎng)景在看情況設(shè)計(jì)。

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

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

原版合集：

新版合集：

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

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

新人可千萬(wàn)不要拿這些東西做參考，他們雖然那么做了，但招聘的時(shí)候可是另一套標(biāo)（zui）準(zhǔn)（lian），所以一定要按更嚴(yán)格的標(biāo)準(zhǔn)來(lái)要求自己。

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

結(jié)尾

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

我們下篇再賤~

作者：超人的電話亭