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

一、項目中的視覺說明

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

很少有設(shè)計師能回答這個問題，基本都是 "因為別人也放了" 所以也要放來湊數(shù)的初級理解。要做好規(guī)范的展示，就要理解規(guī)范放在展示中的邏輯和價值。

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

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

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

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

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

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

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

如果本身設(shè)計界面的過程就是純 "憑感覺"，且做出來的東西又乏善可陳，那么對它的視覺方案展示就同樣非常雞肋，因為你只是用一些非常套路的內(nèi)容去解釋一套非常普通的方案，它怎么可能有說服力？

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

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

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

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

二、視覺說明的內(nèi)容認(rèn)識

下面簡單來介紹下這些主要模塊展示的邏輯：

1. 情緒版

情緒版是對設(shè)計風(fēng)格本身的提煉，會使用一些圖片和詞匯的組合來展示。之所以用它們，是因為我們不可能對每種設(shè)計風(fēng)格都給出一個準(zhǔn)確的命名！所以只能用一些比較抽象的詞匯和圖例對這種風(fēng)格進(jìn)行概括。

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

2. 配色

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

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

3. 字體

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

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

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

4. 圖標(biāo)

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

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

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

5. 樣式

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

6. 控件/組件

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

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

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

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

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

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

結(jié)尾

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

我們下篇再賤~

作者：超人的電話亭