在品牌設(shè)計(jì)中,品牌風(fēng)格指南是最重要文檔之一。無論是建立一個(gè)全新的品牌,還是為一個(gè)現(xiàn)有公司重建品牌,都需要為之定下基調(diào),圍繞著這個(gè)品牌建立一系列具有凝聚力的素材和規(guī)范。
在這篇文章中,我們將會(huì)探討一下針對不同用戶群體創(chuàng)建設(shè)計(jì)風(fēng)格指南的技巧,如何通過系統(tǒng)化的細(xì)分來強(qiáng)化品牌生態(tài)系統(tǒng)。文中所涉及的技巧不僅適用于傳統(tǒng)的品牌,其中還有一些建議會(huì)有助于依托互聯(lián)網(wǎng)創(chuàng)建和傳播的原生品牌。
用戶#1:你自己
人都需要規(guī)則約束,包括自己。同時(shí),人也需要責(zé)任感。如果沒有這些,你將無法塑造擁有凝聚感的品牌。創(chuàng)建一套規(guī)范的設(shè)計(jì)風(fēng)格指南需要有嚴(yán)格的基本結(jié)構(gòu),在開發(fā)和設(shè)計(jì)過程中要將自己從漫無目的的聯(lián)想中釋放出來,系統(tǒng)化地梳理。
White Stripes的吉他手Jack White曾經(jīng)說過一句名言:
“你可以告訴自己,你擁有全世界所有的時(shí)間,全部的金錢,掌控所有想要的色彩,一切如你所想——我的意思是,這樣一來,就扼殺了全部的創(chuàng)造力。”
謹(jǐn)慎設(shè)定限制條件,不要盲目作出選擇,應(yīng)該通過研究,結(jié)合手頭的第一手資料和自己的經(jīng)驗(yàn)與記錄來進(jìn)行實(shí)踐。值得注意的是,研究和創(chuàng)意、直覺并不沖突,而三者是可以輔助強(qiáng)化。
應(yīng)選擇什么樣的限制條件?
這個(gè)問題并不容易回答,因?yàn)橄拗茥l件會(huì)因?qū)嶋H狀況變化而有差異。接下來我們會(huì)探討設(shè)計(jì)風(fēng)格規(guī)范對于其他用戶的影響,但是在此之前我們得先明確為自己設(shè)定限制條件。
設(shè)計(jì)風(fēng)格指南,或者說規(guī)范,它的最終目標(biāo)是通過限制條件達(dá)到規(guī)范化的目的。為了更好的探討這個(gè)問題,我們不妨假定要為一個(gè)品牌來設(shè)計(jì)風(fēng)格設(shè)計(jì)指南。
在品牌設(shè)計(jì)的語境之下,限制條件的挑選是至關(guān)重要的。我們現(xiàn)在以MailChimp的風(fēng)格設(shè)計(jì)規(guī)范素材為樣本來探討:
為了更為有效地設(shè)計(jì),在認(rèn)知上應(yīng)該將這個(gè)品牌視為一個(gè)有血有肉的人,將品牌服務(wù)視為一個(gè)有待設(shè)定的占位符。這樣一來,品牌設(shè)計(jì)就更加形象了。那么他應(yīng)該給人怎樣的感受?用什么樣的語音來和用戶溝通,以什么樣的形象展現(xiàn)出來呢?仔細(xì)考慮這些因素,在這個(gè)過程中自然而然就會(huì)明確品牌的定位,而品牌自然也會(huì)成為公司和組織值得信賴的代言人。
在設(shè)計(jì)品牌風(fēng)格規(guī)范的過程中,會(huì)有哪些因素與之緊密關(guān)聯(lián)呢?坦率地講,所有的因素你都要考慮到。參考設(shè)計(jì)研究方法、傳播理論和心理學(xué)原理,你可以基于之前為品牌“形象”所設(shè)定的風(fēng)格和語調(diào),來逐步完善其他的設(shè)計(jì)元素。如果你將這個(gè)品牌想象成為一個(gè)友好的小孩子,那么你在視覺設(shè)計(jì)的時(shí)候,應(yīng)該考慮明亮的色調(diào),在文案選取上應(yīng)該使用簡短自然的語言,而不是復(fù)雜的長句,控制好文字和圖案的比例,并且盡量使用圖片等設(shè)計(jì)元素。
當(dāng)品牌主要通過互聯(lián)網(wǎng)傳播的時(shí)候,有些品牌設(shè)計(jì)的細(xì)節(jié)需要完善:
設(shè)計(jì)建議:
- 當(dāng)你需要用戶填寫表單的時(shí)候,請注意表述的語氣和風(fēng)格。不要將所有的精力都投入到宣傳和標(biāo)語中,因?yàn)楸韱伪旧硪彩呛陀脩暨M(jìn)行溝通的一部分,控制好語氣和表述方式,才能保證風(fēng)格一致。
- 同理,當(dāng)用戶填寫信息出錯(cuò)的時(shí)候,也應(yīng)該確保提示信息的表述風(fēng)格與整體風(fēng)格的統(tǒng)一性。
- 除了設(shè)定整套規(guī)范中的色板或者配色組成之外,還需要明確色彩和含義之間的聯(lián)系。比如,如果規(guī)范中色板上的紅色代表了積極的含義,那么這一定義是需要記錄下來,因?yàn)檫@并非是暗示或者自然聯(lián)系。當(dāng)色彩與含義都被界定好了之后,會(huì)非常有助于接下來的設(shè)計(jì)決策。
- 不要只考慮顏色、形狀、樣式等靜態(tài)的設(shè)計(jì)元素,動(dòng)畫特效也是應(yīng)當(dāng)重點(diǎn)考慮的設(shè)計(jì)元素。色彩漸變,線性滑動(dòng),翻頁特效,反彈特效,哪些需要,如何展示,都是需要考慮的事情。對于Skype而言,對于動(dòng)畫特效的需求并不大,所以這些需要用到動(dòng)效的地方就得仔細(xì)考量了,畢竟每一種過度效果都有著不同的含義。這個(gè)時(shí)候,你需要參考動(dòng)效設(shè)計(jì)12原則來做篩選。
- 確定所有基礎(chǔ)頁面的類型和模板,并且通過注釋解釋它們的功能。通常我們會(huì)使用一個(gè)線框圖頁面來展示這些信息。
- 確定整個(gè)網(wǎng)站需要復(fù)用的模塊,同樣以線框圖的形式對其予以解釋說明,包括樣式的使用,尺寸的要求,在不同情況下的響應(yīng)和交互。
- 需要明確的因素不僅僅是視覺上看得見的東西,還應(yīng)該包括用戶體驗(yàn)設(shè)計(jì)上的限制和規(guī)范。也就是說,設(shè)計(jì)風(fēng)格指南還應(yīng)該包括“用戶體驗(yàn)指南”這樣的部分,比如在開發(fā)階段要求規(guī)范化的審核和測試,確保設(shè)計(jì)和使用體驗(yàn);在設(shè)計(jì)階段要求控制好動(dòng)效的變化速率、頁面加載速度等涉及到使用體驗(yàn)的部分。
- 在設(shè)計(jì)初期就應(yīng)該區(qū)分使用移動(dòng)端和桌面端的用戶群體,界定兩者不同的使用習(xí)慣和風(fēng)格,根據(jù)這些差異來進(jìn)行差異化設(shè)計(jì)。
- 根據(jù)不同屏幕使用狀況,設(shè)定好各種狀況下不同的字體的使用規(guī)則。
- 界定網(wǎng)站或者APP所面對的普通用戶。通過研究產(chǎn)品的用戶群,來確定是否只有一種原型用戶,如果存在多種不同類型的原型用戶,那么弄清楚哪種是最重要的,并且盡量通過設(shè)計(jì)讓產(chǎn)品盡量覆蓋不同的用戶群。
- 不要忽略網(wǎng)站的邊邊角角,對于那些標(biāo)準(zhǔn)化設(shè)計(jì)難以覆蓋和企及的角落需要單獨(dú)設(shè)計(jì),以確保整體設(shè)計(jì)的質(zhì)量。
- 確保默認(rèn)情況下每一種元素的樣式都足夠協(xié)調(diào)和實(shí)用。
- 在切換視覺元素的樣式和風(fēng)格的時(shí)候,確保不同主題或者樣式在易用性、可用性和美學(xué)上的平衡。即使是諸如滾動(dòng)、點(diǎn)擊、懸停這些常見的操作的不同樣式,也應(yīng)該在你的設(shè)計(jì)風(fēng)格指南中明確地標(biāo)識(shí)出來。
用戶#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í)出來。大多數(shù)公司都需要一個(gè)品牌風(fēng)格指南,在公司里,它的用戶可以分為兩個(gè)群體:有設(shè)計(jì)意識(shí)者和無設(shè)計(jì)意識(shí)者。
有設(shè)計(jì)意識(shí)者
在培訓(xùn)過程中,將品牌風(fēng)格指南交付有設(shè)計(jì)意識(shí)者手上的時(shí)候,需要根據(jù)他們的實(shí)際需求,進(jìn)行適當(dāng)?shù)男抻喓驼{(diào)整。
一般情況下,這些有設(shè)計(jì)意識(shí)者會(huì)明確地感知和運(yùn)用設(shè)計(jì)語言。品牌風(fēng)格指南會(huì)幫助這些有設(shè)計(jì)意識(shí)者,在之后的工作中,探索并完善品牌;而品牌本身自然也需要保留可塑性,隨著這些用戶和市場同步成長,逐漸轉(zhuǎn)變。
無設(shè)計(jì)意識(shí)者
對于無設(shè)計(jì)意識(shí)者,給他們品牌風(fēng)格指南的目的在于構(gòu)建他們的品牌意識(shí),并通過培訓(xùn)引導(dǎo)他們遵守并執(zhí)行它。如果品牌風(fēng)格指南的主要受眾用是無設(shè)計(jì)意識(shí)者,那么在規(guī)范和限制條件上應(yīng)該給予更明確的描述和更詳細(xì)的說明。
以Adobe為例,面對這樣的用戶群體的時(shí)候,需要將標(biāo)識(shí)的位置、類型、關(guān)鍵詞、色彩乃至可用性測試和要求都盡量描述地清晰而詳細(xì)。
設(shè)計(jì)建議:
- 使用不好、一般、好、最好等不同級(jí)別的案例來說明
- 不要混淆有設(shè)計(jì)意識(shí)者和無設(shè)計(jì)意識(shí)者兩種不同類型的用戶。通常,在指南偏向工具性而非規(guī)定性的時(shí)候,人們會(huì)樂于按照指引來操作。
- 明確說明比隱式規(guī)定(潛規(guī)則)更好,在必要的時(shí)候使用截圖、案例來協(xié)助說明。
- 清單是承載和展示信息的好辦法,但前提是千萬不要太過于技術(shù),不要塞進(jìn)過多內(nèi)容,或者要求過于嚴(yán)苛。
- 不要僅僅作出規(guī)定而說明原因。用清晰明了的語言來解釋,而不要濫用術(shù)語。
- 使用清晰的色塊來展示標(biāo)準(zhǔn)色,并且提供不同色彩模式下對應(yīng)的色彩代碼來予以說明,方便使用。
- 對于應(yīng)用于互聯(lián)網(wǎng)涉及HTML等代碼的設(shè)計(jì)風(fēng)格指南,需要提供相應(yīng)的代碼集,方便用戶可以復(fù)制粘貼,并且代碼中需要添加合理清晰的注釋。
- 在使用圖片的地方請確保圖片質(zhì)量,并為用戶提供案例,說明符合要求的圖片應(yīng)該具備的特征。
用戶#3 公眾(可選)
如果你的品牌屬于大眾品牌,而不僅僅是公司內(nèi)部使用,那么你可能需要針對公眾單獨(dú)制作一個(gè)品牌風(fēng)格指南了。通常,大家經(jīng)常接觸、熟知的大品牌都在這個(gè)范疇以內(nèi)。比較典型的案例就是Twitter、Facebook、新浪微博、騰訊QQ。
以Twitter的LOGO使用為例,放置的尺寸和使用的細(xì)節(jié)都在指南中使用了明確的反例予以說明。在LOGO使用上,其實(shí)是有基本規(guī)則的:
- 需要提供常用格式的LOGO文件下載,并且提供多種尺寸應(yīng)對不同需求。
- 明確規(guī)定LOGO與周圍內(nèi)容的間距大小,以及周圍文字所使用的字號(hào)等信息。
- 明確規(guī)定LOGO是否居中、靠左或者靠右,或者是否可以根據(jù)頁面狀況靈活應(yīng)對。
- 說明LOGO周圍以及背景的用色規(guī)范,并使用實(shí)際案例說明哪些可以,哪些不行。
網(wǎng)站風(fēng)格指南:身份與交互
可能風(fēng)格指南與網(wǎng)站用戶體驗(yàn)之間最令人困惑的地方就在于品牌與交互之間的鴻溝。兩者關(guān)系晦澀難明,我們通常只能用“感覺”來描述兩者之間的關(guān)系。這樣一來,交互原型的重要性就體現(xiàn)出來了。很少會(huì)有品牌風(fēng)格指南通過交互設(shè)計(jì)來凸顯品牌的身份特征,但正是因此,我們有必要完善這一點(diǎn)。所以,當(dāng)你在為一個(gè)品牌制定規(guī)范的時(shí)候,請慎重考慮下列幾條涉及交互的建議:
- 讓交互設(shè)計(jì)成為品牌風(fēng)格指南最重要的組成部分之一,與色彩和樣式并列。
- 通過“用戶故事”來明確用戶路徑和用戶行為,這可以幫助交互設(shè)計(jì)師明確高層級(jí)、跨頁面的交互行為。
- 使用兩種不同的語言來描述動(dòng)畫特效:1、使用統(tǒng)一的描述性語言,試圖客觀地定義動(dòng)效;2、使用主觀的語言,來描述動(dòng)效給人帶來的感覺。一個(gè)好的設(shè)計(jì)師很清楚2秒和3秒的動(dòng)畫會(huì)有什么差別,但是無法使用準(zhǔn)確數(shù)據(jù)來描述兩者之間的深層差異。
- 當(dāng)無法進(jìn)行描述時(shí),提供你試圖實(shí)現(xiàn)效果的交互原型。請務(wù)必注意交互的細(xì)微末節(jié),在幾秒鐘的時(shí)間中會(huì)發(fā)生什么事情,會(huì)出現(xiàn)什么樣的意外。
結(jié)語
這篇介紹如何構(gòu)建風(fēng)格指南的說明文檔其實(shí)還很粗糙,遠(yuǎn)未完成。哪怕是做一個(gè)非常簡短的品牌風(fēng)格指南都需要考慮各方面的因素,因?yàn)樗旧砭褪且粋€(gè)系統(tǒng)工程。說易行難,最好的VI設(shè)計(jì)師都是在真刀真槍的實(shí)踐中磨出來的,希望這篇“務(wù)虛”的文章能給你幫助。
想要逆天?從大神級(jí)案例開始學(xué)習(xí)額:
管中窺豹,從Yosemita的圖標(biāo)設(shè)計(jì)開始學(xué)習(xí):
《抽絲剝繭!揭秘蘋果最新操作系統(tǒng)YOSEMITE的圖標(biāo)設(shè)計(jì)》不落俗套,不要錯(cuò)過Material Design:
《MATERIAL DESIGN:構(gòu)建軟件的物質(zhì)世界》國際大廠,那些讓你欲罷不能的官方文檔:
《頂級(jí)文檔!12個(gè)值得學(xué)習(xí)的知名品牌設(shè)計(jì)規(guī)范指南》
原文地址:tutsplus
優(yōu)設(shè)網(wǎng)翻譯:@陳子木
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯,請尊重版權(quán)和譯者成果,轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接,違者必究。謝謝各位編輯同仁配合。
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書:史上最全的設(shè)計(jì)師圖書導(dǎo)航:http://hao.uisdc.com/book/。
設(shè)計(jì)微博:擁有粉絲量76萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào):【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論!每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后,在評(píng)論區(qū)留言,系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái),提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓