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

一、項目中的視覺說明

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

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

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

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

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

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

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

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

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

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

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

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

1. 情緒版/風格
2. 配色
3. 字體
4. 圖標
5. 樣式
6. 控件/組件

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

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

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

1. 情緒版

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

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

2. 配色

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

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

3. 字體

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

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

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

4. 圖標

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

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

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

5. 樣式

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

6. 控件/組件

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

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

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

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

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

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

結(jié)尾

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

我們下篇再賤~

作者：超人的電話亭