今天分享的主題還是和作品集有關(guān)，我們要圍繞一個(gè)相對(duì)基礎(chǔ)的部分，即項(xiàng)目中的規(guī)范部分應(yīng)該怎么設(shè)計(jì)好。

一、項(xiàng)目中的視覺(jué)說(shuō)明

在項(xiàng)目包裝里，放規(guī)范基本已經(jīng)成為標(biāo)配，但它們?yōu)槭裁词亲髌钒b的必需品？

很少有設(shè)計(jì)師能回答這個(gè)問(wèn)題，基本都是 "因?yàn)閯e人也放了" 所以也要放來(lái)湊數(shù)的初級(jí)理解。要做好規(guī)范的展示，就要理解規(guī)范放在展示中的邏輯和價(jià)值。

項(xiàng)目為什么需要包裝，因?yàn)楹?jiǎn)單"陳列"界面看起來(lái)非常的簡(jiǎn)陋業(yè)余，所以有了包裝的需要將設(shè)計(jì)的思路、材料、產(chǎn)出組合起來(lái)，讓結(jié)果看起來(lái)更專業(yè)更有說(shuō)服力。

這個(gè)組合的過(guò)程當(dāng)然不是像樂(lè)高一樣找自己喜歡的拼，拼成啥樣是啥樣，而是需要有一定的邏輯去連接和貫穿起來(lái)。

整個(gè)作品集的輸出思路大概由下面這樣的邏輯鏈條進(jìn)行串聯(lián)：

其中，視覺(jué)方案就是我們構(gòu)建最終界面樣式的基礎(chǔ)，一套成熟的設(shè)計(jì)必然是先有設(shè)計(jì)的想法，才有最后的界面。如果對(duì)這個(gè)過(guò)程沒(méi)有概念的話，看下面這些案例：

你們應(yīng)該能很清晰的感受到其中的設(shè)計(jì)風(fēng)格和情緒，這種風(fēng)格不可能是設(shè)計(jì)師 "憑感覺(jué)" 隨機(jī)輸出的，必然是經(jīng)過(guò)一系列專業(yè)的思考和實(shí)踐轉(zhuǎn)化而來(lái)。

并且，一套有風(fēng)格且統(tǒng)一的界面必然也有一套成熟的設(shè)計(jì)系統(tǒng)進(jìn)行規(guī)范，是整套設(shè)計(jì)的基石。視覺(jué)方案說(shuō)明部分，就是對(duì)風(fēng)格的形成，以及設(shè)計(jì)方案組成要素進(jìn)行說(shuō)明、展示的部分。

很多新人會(huì)認(rèn)為做界面哪有什么思路，沒(méi)有想法可以說(shuō)明，這些東西只是用來(lái)應(yīng)對(duì)領(lǐng)導(dǎo)現(xiàn)編的。這只能說(shuō)是他們?cè)O(shè)計(jì)的積累還不夠多，沒(méi)辦法把工作的產(chǎn)出按一種更有說(shuō)服力的標(biāo)準(zhǔn)輸出出來(lái)。

如果本身設(shè)計(jì)界面的過(guò)程就是純 "憑感覺(jué)"，且做出來(lái)的東西又乏善可陳，那么對(duì)它的視覺(jué)方案展示就同樣非常雞肋，因?yàn)槟阒皇怯靡恍┓浅Ｌ茁返膬?nèi)容去解釋一套非常普通的方案，它怎么可能有說(shuō)服力？

所以最合理的設(shè)計(jì)方案說(shuō)明，就是對(duì)一套設(shè)計(jì)風(fēng)格顯著且專業(yè)、統(tǒng)一的界面進(jìn)行分解的過(guò)程。你得確保自己的設(shè)計(jì)專業(yè)、風(fēng)格化，才有分解它的必要性。

而分解的內(nèi)容包含下面這些主要模塊：

1. 情緒版/風(fēng)格
2. 配色
3. 字體
4. 圖標(biāo)
5. 樣式
6. 控件/組件

這些內(nèi)容總結(jié)起來(lái)就是項(xiàng)目的設(shè)計(jì)規(guī)范，但一份完整的設(shè)計(jì)規(guī)范包含的信息和說(shuō)明非常多，全放進(jìn)項(xiàng)目包裝里是不可能的。所以，在包裝過(guò)程中要對(duì)放的內(nèi)容做精簡(jiǎn)，達(dá)到 —— 通過(guò)少數(shù)的內(nèi)容來(lái)感知全貌的效果，尤其是字體、組件庫(kù)的展示。

二、視覺(jué)說(shuō)明的內(nèi)容認(rèn)識(shí)

下面簡(jiǎn)單來(lái)介紹下這些主要模塊展示的邏輯：

1. 情緒版

情緒版是對(duì)設(shè)計(jì)風(fēng)格本身的提煉，會(huì)使用一些圖片和詞匯的組合來(lái)展示。之所以用它們，是因?yàn)槲覀儾豢赡軐?duì)每種設(shè)計(jì)風(fēng)格都給出一個(gè)準(zhǔn)確的命名！所以只能用一些比較抽象的詞匯和圖例對(duì)這種風(fēng)格進(jìn)行概括。

但抽象詞匯很多時(shí)候是真的 hin —— 抽象，而且簡(jiǎn)約、便捷、易用之類的詞匯又爛大街，想要精準(zhǔn)又不失優(yōu)雅的用詞非常困難。所以找詞是一回事，也要找到合適的圖例來(lái)配合這些用詞，讓這些情緒更具象化，也讓觀眾更容易感受和理解。

2. 配色

配色就是項(xiàng)目里用到的色彩內(nèi)容了，基礎(chǔ)的色彩就是主色、輔助色、中性色，如果主色的定 色過(guò)程有很合理的解釋，比如根據(jù)哪個(gè)場(chǎng)景綜合篩選或用戶測(cè)試的結(jié)果可以放。但是 UI 方向單調(diào)的主色定義范圍很難用這種品牌平面的口徑去描述，非常不建議在這里進(jìn)行展開(kāi)。

同時(shí)一個(gè)項(xiàng)目的設(shè)計(jì)過(guò)程中可能還有一些很特殊的色彩應(yīng)用，比如漸變、圖表、等級(jí)、會(huì)員之類，配色的展示應(yīng)該去體現(xiàn)這些特殊的色彩定義，只羅列基礎(chǔ)配色就只能是純湊數(shù)。

3. 字體

字體方案就是展示項(xiàng)目中用過(guò)的字體種類，除了基礎(chǔ)信息用字的標(biāo)題、正文、注釋三個(gè)大類以外，還包括英文、數(shù)字等特殊類型。

在今天偏潮流化、平面化的界面設(shè)計(jì)中，會(huì)采用大量第三方字體作為標(biāo)題、運(yùn)營(yíng)用字，這種字體的選擇是可以放到這個(gè)部分講解的。

如果沒(méi)有這種特殊字體的應(yīng)用，那么這個(gè)模塊是最枯燥也最沒(méi)內(nèi)容的部分。如果整個(gè)應(yīng)用的設(shè)計(jì)偏簡(jiǎn)潔、干練（不是必須花哨），那么色彩和字體部分是可以結(jié)合到一起的而不用硬拆成兩部分水篇幅。

4. 圖標(biāo)

圖標(biāo)是視覺(jué)效果的重要組成部分之一，以前也分享過(guò)圖標(biāo)包含工具圖標(biāo)和裝飾圖標(biāo)兩種。復(fù)雜的視覺(jué)效果主要由裝飾圖標(biāo)呈現(xiàn)，但不代表簡(jiǎn)單的圖標(biāo)就沒(méi)有展示空間。

但很遺憾的是，初級(jí)設(shè)計(jì)師已經(jīng)很少能把全套的圖標(biāo)做清楚了，很多作品集中的圖標(biāo)展示，內(nèi)容既不完整，設(shè)計(jì)的也很業(yè)余，最差的情況就是用的還全都是素材……

圖標(biāo)的展示首先需要原創(chuàng)，然后就是圖標(biāo)設(shè)計(jì)是能和整體的設(shè)計(jì)搭配上的，得有自己的風(fēng)格，而不是最基礎(chǔ)的線性還是面性設(shè)計(jì)。如果實(shí)在做不出有設(shè)計(jì)感的圖標(biāo)，那么這個(gè)模塊寧愿不放也不要硬放。

5. 樣式

樣式是設(shè)計(jì)的細(xì)節(jié)，包括圓角、間距、模糊、投影，需要在設(shè)計(jì)階段對(duì)這些內(nèi)容有比較深入的定義且影響到最終風(fēng)格呈現(xiàn)時(shí)，可以進(jìn)行細(xì)致的說(shuō)明。同理，如果沒(méi)有就不要放一些毫無(wú)幫助的內(nèi)容。

6. 控件/組件

每個(gè)界面都是控件和組件的組合產(chǎn)物，所以任何界面，肯定都有控件和組件，所以呢？所以你放了控件和組件能有什么價(jià)值？

控件和組件的放置同樣要尋找價(jià)值點(diǎn)，如果你的組件設(shè)計(jì)本身非常有特點(diǎn)，且能很直觀的反映設(shè)計(jì)風(fēng)格，那么可以篩選一些核心的風(fēng)格化組件進(jìn)行展示，和前面的內(nèi)容呼應(yīng)。

如果組件本身單看沒(méi)有很強(qiáng)的表現(xiàn)力，湊一起毫無(wú)新意的話，那么還有種做法就是展示項(xiàng)目的 "組件庫(kù)"，即在項(xiàng)目組件庫(kù)內(nèi)對(duì)組件分類、變體、狀態(tài)的安排和展示，表現(xiàn)如何用組件庫(kù)構(gòu)建出統(tǒng)一、和諧、整體的結(jié)果也行。

上面幾個(gè)模塊的組合，就要形成對(duì)整套項(xiàng)目設(shè)計(jì)風(fēng)格的詮釋，讓觀眾清晰感覺(jué)到組成后續(xù)頁(yè)面的視覺(jué)構(gòu)成是什么。

這里還有個(gè)非常重要的認(rèn)識(shí)，就是在實(shí)際項(xiàng)目設(shè)計(jì)過(guò)程中，前期視覺(jué)方案的構(gòu)思是很模糊的，只有個(gè)大概的方向，要在后續(xù)的設(shè)計(jì)實(shí)踐里進(jìn)行探索和反復(fù)的修改，才能得到準(zhǔn)確的思路，是一個(gè)從模糊到清晰的過(guò)程。只有確定風(fēng)格以后才會(huì)去整理設(shè)計(jì)規(guī)范，并推進(jìn)到整個(gè)項(xiàng)目執(zhí)行。

而作品包裝中的視覺(jué)方案，是對(duì)你最終成型風(fēng)格的拆解和展示，是對(duì)更前期項(xiàng)目分析中提出的問(wèn)題的解決方案。不要因?yàn)檎故卷樞虻年P(guān)系，認(rèn)為視覺(jué)要素是前期全部定好了才做后面的界面，兩者是相互優(yōu)化成型的。

結(jié)尾

對(duì)于作品集展示來(lái)說(shuō)，還是那句話，只有做好界面才有東西展示，界面做不好光學(xué)習(xí)一些包裝上的"奇技淫巧"是拯救不了整個(gè)項(xiàng)目的觀感的。

我們下篇再賤~

作者：超人的電話亭