用戶#1：你自己 人都需要規(guī)則約束，包括自己。同時(shí)，人也需要責(zé)任感。如果沒(méi)有這些，你將無(wú)法塑造擁有凝聚感的品牌。創(chuàng)建一套規(guī)范的設(shè)計(jì)風(fēng)格指南需要有嚴(yán)格的基本結(jié)構(gòu)，在開(kāi)發(fā)和設(shè)計(jì)過(guò)程中要將自己從漫無(wú)目的的聯(lián)想中釋放出來(lái)，系統(tǒng)化地梳理。 White Stripes的吉他手Jack White曾經(jīng)說(shuō)過(guò)一句名言：

“你可以告訴自己，你擁有全世界所有的時(shí)間，全部的金錢(qián)，掌控所有想要的色彩，一切如你所想——我的意思是，這樣一來(lái)，就扼殺了全部的創(chuàng)造力。”

謹(jǐn)慎設(shè)定限制條件，不要盲目作出選擇，應(yīng)該通過(guò)研究，結(jié)合手頭的第一手資料和自己的經(jīng)驗(yàn)與記錄來(lái)進(jìn)行實(shí)踐。值得注意的是，研究和創(chuàng)意、直覺(jué)并不沖突，而三者是可以輔助強(qiáng)化。 應(yīng)選擇什么樣的限制條件？ 這個(gè)問(wèn)題并不容易回答，因?yàn)橄拗茥l件會(huì)因?qū)嶋H狀況變化而有差異。接下來(lái)我們會(huì)探討設(shè)計(jì)風(fēng)格規(guī)范對(duì)于其他用戶的影響，但是在此之前我們得先明確為自己設(shè)定限制條件。 設(shè)計(jì)風(fēng)格指南，或者說(shuō)規(guī)范，它的最終目標(biāo)是通過(guò)限制條件達(dá)到規(guī)范化的目的。為了更好的探討這個(gè)問(wèn)題，我們不妨假定要為一個(gè)品牌來(lái)設(shè)計(jì)風(fēng)格設(shè)計(jì)指南。 在品牌設(shè)計(jì)的語(yǔ)境之下，限制條件的挑選是至關(guān)重要的。我們現(xiàn)在以MailChimp的風(fēng)格設(shè)計(jì)規(guī)范素材為樣本來(lái)探討：
為了更為有效地設(shè)計(jì)，在認(rèn)知上應(yīng)該將這個(gè)品牌視為一個(gè)有血有肉的人，將品牌服務(wù)視為一個(gè)有待設(shè)定的占位符。這樣一來(lái)，品牌設(shè)計(jì)就更加形象了。那么他應(yīng)該給人怎樣的感受？用什么樣的語(yǔ)音來(lái)和用戶溝通，以什么樣的形象展現(xiàn)出來(lái)呢？仔細(xì)考慮這些因素，在這個(gè)過(guò)程中自然而然就會(huì)明確品牌的定位，而品牌自然也會(huì)成為公司和組織值得信賴的代言人。 在設(shè)計(jì)品牌風(fēng)格規(guī)范的過(guò)程中，會(huì)有哪些因素與之緊密關(guān)聯(lián)呢？坦率地講，所有的因素你都要考慮到。參考設(shè)計(jì)研究方法、傳播理論和心理學(xué)原理，你可以基于之前為品牌“形象”所設(shè)定的風(fēng)格和語(yǔ)調(diào)，來(lái)逐步完善其他的設(shè)計(jì)元素。如果你將這個(gè)品牌想象成為一個(gè)友好的小孩子，那么你在視覺(jué)設(shè)計(jì)的時(shí)候，應(yīng)該考慮明亮的色調(diào)，在文案選取上應(yīng)該使用簡(jiǎn)短自然的語(yǔ)言，而不是復(fù)雜的長(zhǎng)句，控制好文字和圖案的比例，并且盡量使用圖片等設(shè)計(jì)元素。 當(dāng)品牌主要通過(guò)互聯(lián)網(wǎng)傳播的時(shí)候，有些品牌設(shè)計(jì)的細(xì)節(jié)需要完善： 設(shè)計(jì)建議：

• 當(dāng)你需要用戶填寫(xiě)表單的時(shí)候，請(qǐng)注意表述的語(yǔ)氣和風(fēng)格。不要將所有的精力都投入到宣傳和標(biāo)語(yǔ)中，因?yàn)楸韱伪旧硪彩呛陀脩暨M(jìn)行溝通的一部分，控制好語(yǔ)氣和表述方式，才能保證風(fēng)格一致。
• 同理，當(dāng)用戶填寫(xiě)信息出錯(cuò)的時(shí)候，也應(yīng)該確保提示信息的表述風(fēng)格與整體風(fēng)格的統(tǒng)一性。

• 除了設(shè)定整套規(guī)范中的色板或者配色組成之外，還需要明確色彩和含義之間的聯(lián)系。比如，如果規(guī)范中色板上的紅色代表了積極的含義，那么這一定義是需要記錄下來(lái)，因?yàn)檫@并非是暗示或者自然聯(lián)系。當(dāng)色彩與含義都被界定好了之后，會(huì)非常有助于接下來(lái)的設(shè)計(jì)決策。

• 不要只考慮顏色、形狀、樣式等靜態(tài)的設(shè)計(jì)元素，動(dòng)畫(huà)特效也是應(yīng)當(dāng)重點(diǎn)考慮的設(shè)計(jì)元素。色彩漸變，線性滑動(dòng)，翻頁(yè)特效，反彈特效，哪些需要，如何展示，都是需要考慮的事情。對(duì)于Skype而言，對(duì)于動(dòng)畫(huà)特效的需求并不大，所以這些需要用到動(dòng)效的地方就得仔細(xì)考量了，畢竟每一種過(guò)度效果都有著不同的含義。這個(gè)時(shí)候，你需要參考動(dòng)效設(shè)計(jì)12原則來(lái)做篩選。
• 確定所有基礎(chǔ)頁(yè)面的類(lèi)型和模板，并且通過(guò)注釋解釋它們的功能。通常我們會(huì)使用一個(gè)線框圖頁(yè)面來(lái)展示這些信息。
• 確定整個(gè)網(wǎng)站需要復(fù)用的模塊，同樣以線框圖的形式對(duì)其予以解釋說(shuō)明，包括樣式的使用，尺寸的要求，在不同情況下的響應(yīng)和交互。
• 需要明確的因素不僅僅是視覺(jué)上看得見(jiàn)的東西，還應(yīng)該包括用戶體驗(yàn)設(shè)計(jì)上的限制和規(guī)范。也就是說(shuō)，設(shè)計(jì)風(fēng)格指南還應(yīng)該包括“用戶體驗(yàn)指南”這樣的部分，比如在開(kāi)發(fā)階段要求規(guī)范化的審核和測(cè)試，確保設(shè)計(jì)和使用體驗(yàn)；在設(shè)計(jì)階段要求控制好動(dòng)效的變化速率、頁(yè)面加載速度等涉及到使用體驗(yàn)的部分。
• 在設(shè)計(jì)初期就應(yīng)該區(qū)分使用移動(dòng)端和桌面端的用戶群體，界定兩者不同的使用習(xí)慣和風(fēng)格，根據(jù)這些差異來(lái)進(jìn)行差異化設(shè)計(jì)。
• 根據(jù)不同屏幕使用狀況，設(shè)定好各種狀況下不同的字體的使用規(guī)則。
• 界定網(wǎng)站或者APP所面對(duì)的普通用戶。通過(guò)研究產(chǎn)品的用戶群，來(lái)確定是否只有一種原型用戶，如果存在多種不同類(lèi)型的原型用戶，那么弄清楚哪種是最重要的，并且盡量通過(guò)設(shè)計(jì)讓產(chǎn)品盡量覆蓋不同的用戶群。
• 不要忽略網(wǎng)站的邊邊角角，對(duì)于那些標(biāo)準(zhǔn)化設(shè)計(jì)難以覆蓋和企及的角落需要單獨(dú)設(shè)計(jì)，以確保整體設(shè)計(jì)的質(zhì)量。
• 確保默認(rèn)情況下每一種元素的樣式都足夠協(xié)調(diào)和實(shí)用。
• 在切換視覺(jué)元素的樣式和風(fēng)格的時(shí)候，確保不同主題或者樣式在易用性、可用性和美學(xué)上的平衡。即使是諸如滾動(dòng)、點(diǎn)擊、懸停這些常見(jiàn)的操作的不同樣式，也應(yīng)該在你的設(shè)計(jì)風(fēng)格指南中明確地標(biāo)識(shí)出來(lái)。

用戶#2 品牌 品牌不僅僅是一個(gè)LOGO，它代表著一個(gè)群體，一種想法和行為，甚至是一種文化，最直接的，它還代表著一個(gè)公司和機(jī)構(gòu)。所以，在你設(shè)計(jì)品牌風(fēng)格指南的時(shí)候，還有一個(gè)重要的受眾，就是組成這家公司人，他們是構(gòu)成這個(gè)品牌的重要組成部分。 歸根結(jié)底，品牌風(fēng)格指南是一份構(gòu)建品牌的準(zhǔn)則和參考。而構(gòu)建品牌的那批人也應(yīng)該是使用品牌設(shè)計(jì)指南最頻繁的用戶?？紤]到品牌凝聚力，品牌風(fēng)格指南中所有的限制條件和規(guī)范，都應(yīng)該為這些核心用戶清晰明了的標(biāo)識(shí)出來(lái)。大多數(shù)公司都需要一個(gè)品牌風(fēng)格指南，在公司里，它的用戶可以分為兩個(gè)群體：有設(shè)計(jì)意識(shí)者和無(wú)設(shè)計(jì)意識(shí)者。 有設(shè)計(jì)意識(shí)者 在培訓(xùn)過(guò)程中，將品牌風(fēng)格指南交付有設(shè)計(jì)意識(shí)者手上的時(shí)候，需要根據(jù)他們的實(shí)際需求，進(jìn)行適當(dāng)?shù)男抻喓驼{(diào)整。 一般情況下，這些有設(shè)計(jì)意識(shí)者會(huì)明確地感知和運(yùn)用設(shè)計(jì)語(yǔ)言。品牌風(fēng)格指南會(huì)幫助這些有設(shè)計(jì)意識(shí)者，在之后的工作中，探索并完善品牌；而品牌本身自然也需要保留可塑性，隨著這些用戶和市場(chǎng)同步成長(zhǎng)，逐漸轉(zhuǎn)變。 無(wú)設(shè)計(jì)意識(shí)者 對(duì)于無(wú)設(shè)計(jì)意識(shí)者，給他們品牌風(fēng)格指南的目的在于構(gòu)建他們的品牌意識(shí)，并通過(guò)培訓(xùn)引導(dǎo)他們遵守并執(zhí)行它。如果品牌風(fēng)格指南的主要受眾用是無(wú)設(shè)計(jì)意識(shí)者，那么在規(guī)范和限制條件上應(yīng)該給予更明確的描述和更詳細(xì)的說(shuō)明。 以Adobe為例，面對(duì)這樣的用戶群體的時(shí)候，需要將標(biāo)識(shí)的位置、類(lèi)型、關(guān)鍵詞、色彩乃至可用性測(cè)試和要求都盡量描述地清晰而詳細(xì)。

設(shè)計(jì)建議：

• 使用不好、一般、好、最好等不同級(jí)別的案例來(lái)說(shuō)明
• 不要混淆有設(shè)計(jì)意識(shí)者和無(wú)設(shè)計(jì)意識(shí)者兩種不同類(lèi)型的用戶。通常，在指南偏向工具性而非規(guī)定性的時(shí)候，人們會(huì)樂(lè)于按照指引來(lái)操作。

• 明確說(shuō)明比隱式規(guī)定（潛規(guī)則）更好，在必要的時(shí)候使用截圖、案例來(lái)協(xié)助說(shuō)明。
• 清單是承載和展示信息的好辦法，但前提是千萬(wàn)不要太過(guò)于技術(shù)，不要塞進(jìn)過(guò)多內(nèi)容，或者要求過(guò)于嚴(yán)苛。
• 不要僅僅作出規(guī)定而說(shuō)明原因。用清晰明了的語(yǔ)言來(lái)解釋，而不要濫用術(shù)語(yǔ)。
• 使用清晰的色塊來(lái)展示標(biāo)準(zhǔn)色，并且提供不同色彩模式下對(duì)應(yīng)的色彩代碼來(lái)予以說(shuō)明，方便使用。

• 對(duì)于應(yīng)用于互聯(lián)網(wǎng)涉及HTML等代碼的設(shè)計(jì)風(fēng)格指南，需要提供相應(yīng)的代碼集，方便用戶可以復(fù)制粘貼，并且代碼中需要添加合理清晰的注釋。
• 在使用圖片的地方請(qǐng)確保圖片質(zhì)量，并為用戶提供案例，說(shuō)明符合要求的圖片應(yīng)該具備的特征。

用戶#3 公眾（可選） 如果你的品牌屬于大眾品牌，而不僅僅是公司內(nèi)部使用，那么你可能需要針對(duì)公眾單獨(dú)制作一個(gè)品牌風(fēng)格指南了。通常，大家經(jīng)常接觸、熟知的大品牌都在這個(gè)范疇以內(nèi)。比較典型的案例就是Twitter、Facebook、新浪微博、騰訊QQ。
以Twitter的LOGO使用為例，放置的尺寸和使用的細(xì)節(jié)都在指南中使用了明確的反例予以說(shuō)明。在LOGO使用上，其實(shí)是有基本規(guī)則的：

• 需要提供常用格式的LOGO文件下載，并且提供多種尺寸應(yīng)對(duì)不同需求。
• 明確規(guī)定LOGO與周?chē)鷥?nèi)容的間距大小，以及周?chē)淖炙褂玫淖痔?hào)等信息。
• 明確規(guī)定LOGO是否居中、靠左或者靠右，或者是否可以根據(jù)頁(yè)面狀況靈活應(yīng)對(duì)。
• 說(shuō)明LOGO周?chē)约氨尘暗挠蒙?guī)范，并使用實(shí)際案例說(shuō)明哪些可以，哪些不行。

網(wǎng)站風(fēng)格指南：身份與交互 可能風(fēng)格指南與網(wǎng)站用戶體驗(yàn)之間最令人困惑的地方就在于品牌與交互之間的鴻溝。兩者關(guān)系晦澀難明，我們通常只能用“感覺(jué)”來(lái)描述兩者之間的關(guān)系。這樣一來(lái)，交互原型的重要性就體現(xiàn)出來(lái)了。很少會(huì)有品牌風(fēng)格指南通過(guò)交互設(shè)計(jì)來(lái)凸顯品牌的身份特征，但正是因此，我們有必要完善這一點(diǎn)。所以，當(dāng)你在為一個(gè)品牌制定規(guī)范的時(shí)候，請(qǐng)慎重考慮下列幾條涉及交互的建議：

• 讓交互設(shè)計(jì)成為品牌風(fēng)格指南最重要的組成部分之一，與色彩和樣式并列。
• 通過(guò)“用戶故事”來(lái)明確用戶路徑和用戶行為，這可以幫助交互設(shè)計(jì)師明確高層級(jí)、跨頁(yè)面的交互行為。
• 使用兩種不同的語(yǔ)言來(lái)描述動(dòng)畫(huà)特效：1、使用統(tǒng)一的描述性語(yǔ)言，試圖客觀地定義動(dòng)效；2、使用主觀的語(yǔ)言，來(lái)描述動(dòng)效給人帶來(lái)的感覺(jué)。一個(gè)好的設(shè)計(jì)師很清楚2秒和3秒的動(dòng)畫(huà)會(huì)有什么差別，但是無(wú)法使用準(zhǔn)確數(shù)據(jù)來(lái)描述兩者之間的深層差異。
• 當(dāng)無(wú)法進(jìn)行描述時(shí)，提供你試圖實(shí)現(xiàn)效果的交互原型。請(qǐng)務(wù)必注意交互的細(xì)微末節(jié)，在幾秒鐘的時(shí)間中會(huì)發(fā)生什么事情，會(huì)出現(xiàn)什么樣的意外。

結(jié)語(yǔ) 這篇介紹如何構(gòu)建風(fēng)格指南的說(shuō)明文檔其實(shí)還很粗糙，遠(yuǎn)未完成。哪怕是做一個(gè)非常簡(jiǎn)短的品牌風(fēng)格指南都需要考慮各方面的因素，因?yàn)樗旧砭褪且粋€(gè)系統(tǒng)工程。說(shuō)易行難，最好的VI設(shè)計(jì)師都是在真刀真槍的實(shí)踐中磨出來(lái)的，希望這篇“務(wù)虛”的文章能給你幫助。