【 設計理論】詳細解析從三個角度設計品牌風格

詳細解析從三個角度設計品牌風格

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

教學大綱:

在品牌設計中,品牌風格指南是最重要文檔之一。無論是建立一個全新的品牌,還是為一個現有公司重建品牌,都需要為之定下基調,圍繞着這個品牌建立一系列具有凝聚力的素材和規範。


設計理論教學開始

在品牌設計中,品牌風格指南是最重要文檔之一。無論是建立一個全新的品牌,還是為一個現有公司重建品牌,都需要為之定下基調,圍繞着這個品牌建立一系列具有凝聚力的素材和規範。

在這篇文章中,我們將會探討一下針對不同用戶群體創建設計風格指南的技巧,如何通過系統化的細分來強化品牌生態系統。文中所涉及的技巧不僅適用於傳統的品牌,其中還有一些建議會有助於依託互聯網創建和傳播的原生品牌。

用戶#1:你自己

人都需要規則約束,包括自己。同時,人也需要責任感。如果沒有這些,你將無法塑造擁有凝聚感的品牌。創建一套規範的設計風格指南需要有嚴格的基本結構,在開發和設計過程中要將自己從漫無目的的聯想中釋放出來,系統化地梳理。

White Stripes的吉他手Jack White曾經說過一句名言:

“你可以告訴自己,你擁有全世界所有的時間,全部的金錢,掌控所有想要的色彩,一切如你所想——我的意思是,這樣一來,就扼殺了全部的創造力。”

謹慎設定限制條件,不要盲目作出選擇,應該通過研究,結合手頭的第一手資料和自己的經驗與記錄來進行實踐。值得注意的是,研究和創意、直覺並不衝突,而三者是可以輔助強化。

應選擇什麼樣的限制條件?

這個問題並不容易回答,因為限制條件會因實際狀況變化而有差異。接下來我們會探討設計風格規範對於其他用戶的影響,但是在此之前我們得先明確為自己設定限制條件。

設計風格指南,或者說規範,它的最終目標是通過限制條件達到規範化的目的。為了更好的探討這個問題,我們不妨假定要為一個品牌來設計風格設計指南。

在品牌設計的語境之下,限制條件的挑選是至關重要的。我們現在以MailChimp的風格設計規範素材為樣本來探討:

詳細解析從三個角度設計品牌風格

為了更為有效地設計,在認知上應該將這個品牌視為一個有血有肉的人,將品牌服務視為一個有待設定的佔位符。這樣一來,品牌設計就更加形象了。那麼他應該給人怎樣的感受?用什麼樣的語音來和用戶溝通,以什麼樣的形象展現出來呢?仔細考慮這些因素,在這個過程中自然而然就會明確品牌的定位,而品牌自然也會成為公司和組織值得信賴的代言人。

詳細解析從三個角度設計品牌風格

在設計品牌風格規範的過程中,會有哪些因素與之緊密關聯呢?坦率地講,所有的因素你都要考慮到。參考設計研究方法、傳播理論和心理學原理,你可以基於之前為品牌“形象”所設定的風格和語調,來逐步完善其他的設計元素。如果你將這個品牌想象成為一個友好的小孩子,那麼你在視覺設計的時候,應該考慮明亮的色調,在文案選取上應該使用簡短自然的語言,而不是複雜的長句,控制好文字和圖案的比例,並且盡量使用圖片等設計元素。

當品牌主要通過互聯網傳播的時候,有些品牌設計的細節需要完善:

設計建議:

當你需要用戶填寫表單的時候,請注意表述的語氣和風格。不要將所有的精力都投入到宣傳和標語中,因為表單本身也是和用戶進行溝通的一部分,控制好語氣和表述方式,才能保證風格一致。

同理,當用戶填寫信息出錯的時候,也應該確保提示信息的表述風格與整體風格的統一性。

詳細解析從三個角度設計品牌風格

除了設定整套規範中的色板或者配色組成之外,還需要明確色彩和含義之間的聯繫。比如,如果規範中色板上的紅色代表了積極的含義,那麼這一定義是需要記錄下來,因為這並非是暗示或者自然聯繫。當色彩與含義都被界定好了之後,會非常有助於接下來的設計決策。

詳細解析從三個角度設計品牌風格

不要只考慮顏色、形狀、樣式等靜態的設計元素,動畫特效也是應當重點考慮的設計元素。色彩漸變,線性滑動,翻頁特效,反彈特效,哪些需要,如何展示,都是需要考慮的事情。對於Skype而言,對於動畫特效的需求並不大,所以這些需要用到動效的地方就得仔細考量了,畢竟每一種過度效果都有着不同的含義。這個時候,你需要參考動效設計12原則來做篩選。

確定所有基礎頁面的類型和模板,並且通過註釋解釋它們的功能。通常我們會使用一個線框圖頁面來展示這些信息。

確定整個網站需要復用的模塊,同樣以線框圖的形式對其予以解釋說明,包括樣式的使用,尺寸的要求,在不同情況下的響應和交互。

需要明確的因素不僅僅是視覺上看得見的東西,還應該包括用戶體驗設計上的限制和規範。也就是說,設計風格指南還應該包括“用戶體驗指南”這樣的部分,比如在開發階段要求規範化的審核和測試,確保設計和使用體驗;在設計階段要求控制好動效的變化速率、頁面加載速度等涉及到使用體驗的部分。

在設計初期就應該區分使用移動端和桌面端的用戶群體,界定兩者不同的使用習慣和風格,根據這些差異來進行差異化設計。

根據不同屏幕使用狀況,設定好各種狀況下不同的字體的使用規則。

界定網站或者APP所面對的普通用戶。通過研究產品的用戶群,來確定是否只有一種原型用戶,如果存在多種不同類型的原型用戶,那麼弄清楚哪種是最重要的,並且盡量通過設計讓產品盡量覆蓋不同的用戶群。

不要忽略網站的邊邊角角,對於那些標準化設計難以覆蓋和企及的角落需要單獨設計,以確保整體設計的質量。

確保默認情況下每一種元素的樣式都足夠協調和實用。

在切換視覺元素的樣式和風格的時候,確保不同主題或者樣式在易用性、可用性和美學上的平衡。即使是諸如滾動、點擊、懸停這些常見的操作的不同樣式,也應該在你的設計風格指南中明確地標識出來。

用戶#2 品牌

品牌不僅僅是一個LOGO,它代表着一個群體,一種想法和行為,甚至是一種文化,最直接的,它還代表着一個公司和機構。所以,在你設計品牌風格指南的時候,還有一個重要的受眾,就是組成這家公司人,他們是構成這個品牌的重要組成部分。

歸根結底,品牌風格指南是一份構建品牌的準則和參考。而構建品牌的那批人也應該是使用品牌設計指南最頻繁的用戶。考慮到品牌凝聚力,品牌風格指南中所有的限制條件和規範,都應該為這些核心用戶清晰明了的標識出來。大多數公司都需要一個品牌風格指南,在公司里,它的用戶可以分為兩個群體:有設計意識者和無設計意識者。

有設計意識者

在培訓過程中,將品牌風格指南交付有設計意識者手上的時候,需要根據他們的實際需求,進行適當的修訂和調整。

一般情況下,這些有設計意識者會明確地感知和運用設計語言。品牌風格指南會幫助這些有設計意識者,在之後的工作中,探索並完善品牌;而品牌本身自然也需要保留可塑性,隨着這些用戶和市場同步成長,逐漸轉變。

無設計意識者

對於無設計意識者,給他們品牌風格指南的目的在於構建他們的品牌意識,並通過培訓引導他們遵守並執行它。如果品牌風格指南的主要受眾用是無設計意識者,那麼在規範和限制條件上應該給予更明確的描述和更詳細的說明。

以Adobe為例,面對這樣的用戶群體的時候,需要將標識的位置、類型、關鍵詞、色彩乃至可用性測試和要求都盡量描述地清晰而詳細。

詳細解析從三個角度設計品牌風格

設計建議:

使用不好、一般、好、最好等不同級別的案例來說明

不要混淆有設計意識者和無設計意識者兩種不同類型的用戶。通常,在指南偏向工具性而非規定性的時候,人們會樂於按照指引來操作。

詳細解析從三個角度設計品牌風格

明確說明比隱式規定(潛規則)更好,在必要的時候使用截圖、案例來協助說明。

清單是承載和展示信息的好辦法,但前提是千萬不要太過於技術,不要塞進過多內容,或者要求過於嚴苛。

不要僅僅作出規定而說明原因。用清晰明了的語言來解釋,而不要濫用術語。

使用清晰的色塊來展示標準色,並且提供不同色彩模式下對應的色彩代碼來予以說明,方便使用。

詳細解析從三個角度設計品牌風格

對於應用於互聯網涉及HTML等代碼的設計風格指南,需要提供相應的代碼集,方便用戶可以複製粘貼,並且代碼中需要添加合理清晰的註釋。

在使用圖片的地方請確保圖片質量,並為用戶提供案例,說明符合要求的圖片應該具備的特徵。

用戶#3 公眾(可選)

如果你的品牌屬於大眾品牌,而不僅僅是公司內部使用,那麼你可能需要針對公眾單獨製作一個品牌風格指南了。通常,大家經常接觸、熟知的大品牌都在這個範疇以內。比較典型的案例就是Twitter、Facebook、新浪微博、騰訊QQ。

詳細解析從三個角度設計品牌風格

以Twitter的LOGO使用為例,放置的尺寸和使用的細節都在指南中使用了明確的反例予以說明。在LOGO使用上,其實是有基本規則的:

需要提供常用格式的LOGO文件下載,並且提供多種尺寸應對不同需求。

明確規定LOGO與周圍內容的間距大小,以及周圍文字所使用的字號等信息。

明確規定LOGO是否居中、靠左或者靠右,或者是否可以根據頁面狀況靈活應對。

說明LOGO周圍以及背景的用色規範,並使用實際案例說明哪些可以,哪些不行。

網站風格指南:身份與交互

可能風格指南與網站用戶體驗之間最令人困惑的地方就在於品牌與交互之間的鴻溝。兩者關係晦澀難明,我們通常只能用“感覺”來描述兩者之間的關係。這樣一來,交互原型的重要性就體現出來了。很少會有品牌風格指南通過交互設計來凸顯品牌的身份特徵,但正是因此,我們有必要完善這一點。所以,當你在為一個品牌制定規範的時候,請慎重考慮下列幾條涉及交互的建議:

讓交互設計成為品牌風格指南最重要的組成部分之一,與色彩和樣式並列。

通過“用戶故事”來明確用戶路徑和用戶行為,這可以幫助交互設計師明確高層級、跨頁面的交互行為。

使用兩種不同的語言來描述動畫特效:1、使用統一的描述性語言,試圖客觀地定義動效;2、使用主觀的語言,來描述動效給人帶來的感覺。一個好的設計師很清楚2秒和3秒的動畫會有什麼差別,但是無法使用準確數據來描述兩者之間的深層差異。

當無法進行描述時,提供你試圖實現效果的交互原型。請務必注意交互的細微末節,在幾秒鐘的時間中會發生什麼事情,會出現什麼樣的意外。

結語

這篇介紹如何構建風格指南的說明文檔其實還很粗糙,遠未完成。哪怕是做一個非常簡短的品牌風格指南都需要考慮各方面的因素,因為它本身就是一個系統工程。說易行難,最好的VI設計師都是在真刀真槍的實踐中磨出來的,希望這篇“務虛”的文章能給你幫助。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 詳細解析從三個角度設計品牌風格