每個網站都具有自己的風格規範,這並不困難,但如果在整個專案中或讓每一個都使用同一種風格規範,這就難能可貴了。
現在,我們討論一下,到底應該如何做來確保人們遵循網站的規範,使網站在視覺上存保持一致性?這有那麼一些複雜,讓我們進入今天話題。
1 、品牌概述
如果您從來沒有從頭建立過一個設計模板會有點困難,對於初來乍道的來説,可以在 MailChimp 中找到他們喜歡的風格,MailChimp 可以更根據您選擇的最喜歡的並獲得通用安裝證書許可,然後以此作為一個模型開始這個風格規範的規劃。
大多數設計模板有兩個部分:
文字標準
視覺標準
這兩個標準,是同等重要的,都是整體風格規範的一部分。把元素結合在一起將建立一個整體形象。每一個品牌或企業網站都有自己與眾不同的地方。選擇一個色調和風格,同步運用在字型和視覺畫面的效果上,把您的網站和多用户融為一體。
建立網站整理形象的時候,也正是品牌需求考慮到多用户和相關利益的人對此有何種期望的時候。是否被期待?是否有關聯,是否願意在這樣的網站上進行瀏覽使用等互動行為?
2 、語言風格
雖然我們將主要精力集中於網站風格規範的視覺方面,但語言風格是非常重要的,是整體網站的一部分,也是您與多用户 “交談” 的方式。語言風格是正式還是輕鬆的?是冗長或更簡潔的?
用同樣的方式為網站格式寫您的風格規範。這將有助於提示您的團隊知道網站的初步設想,以及如何運用語言風格去協助於品牌標識。
語言風格是與每一位多用户溝通使用的。返回到 MailChimp,我們通過他的品牌語言風格的塑造上全面審視。注意到公司談論及它的吉祥物,舉個例子:“Freddie 是我們的吉祥物。我們不需要使用他與我們的 logo 組合。 Freddie 的臉右側面的,他的表情一直是眨着眼睛的。”
3 、 “準則” 及用途
您的風格規範應該是您設計的 “劇本” 。(可能是比 “規範” 聽起來更通俗易懂?)
它應該概括瞭如何以及何時使用的字型、顏色和所有其他設計元素型別,讓人更容易理解。包括:
調色盤,包括標準色和可適用的色彩
排版,可適用的字型、字號、縮排、行間距跳轉
LOGO,包括尺寸和位置
圖示或元素樣式(包括分享按鈕等)
拼寫,選項和格式風格(應該遵循哪種編輯格式? APA 格式?AP 格式?或其他?)
照片格式,包括顏色、裁剪尺寸和視覺效果
SEO 站羣資訊,如 ALT 標籤和關鍵詞
電網標準(適用於網絡或列印)
間距方面的考慮(是否設計的太鬆或太緊)
反饋接觸資訊(可以向團隊成員提問或建議的)
4 、簡單而具體的概念
這可能是最困難的部分,您需要明白這些資訊,並將其爛熟於心,理解成簡單、具體、可操作性強的概念:
當涉及到風格規範不能走極端,只是一個視覺參考,而通過這種方式去設計。
組合相關內容,並快速相關聯,比如頁面的顏色、已經跳轉進入另一頁的圖形和照片等。
為可以顯示的內容舉一些相似的例子,不需要解釋的部分用佔位符。
儘可能地提供細節,色彩樣式,例如,包括 RGB(或 HEX)和 CMYK 值等,使顏色可以規範使用。
打破部分常用的元素案例去設計。
5 、片段和例項
無論您的設計風格規範是用於印刷還是數字使用或基於 Web 的文件,應該包含有用的工具。部分有用的元素品牌案例做得到也可能做不到,但他可以很容易把重點放在您想看到的品牌視覺上。
然後,建立一個易操作的目錄。建立原型組(或一組常見的元素,這取決於您使用的軟件)。儲存在一個常用的位置,使其容易操作並且生成容易修改的檔案。
為參與該專案的每個人提供基於雲端軟件的工具列表。(這包括連結、多用户名稱等基本資訊。)確保所有字型包、 logo 和影象檔案是在一個常用的位置,所有的多用户都知道他們在哪裏。(在另一個地方保留備份,以防原檔案、作品丟失。)
建立代碼片段,易於複製並貼上到專案主列表。這樣不用每次重建,常見的元素需要被分享在一個每個人都可以訪問的共享位置。
最後一步是進化優化。每件事情都可能會變,而且必然要經歷蜕變。
6 、執行風格規範
最後,最大的問題是 “如何讓人們遵循風格規範呢?” 按照以上這些列出的內容,您已經有一個很好的方式擁有了設計的輪廓,具有了簡單、具體的概念。
風格規範是很容易被追隨的,就像您寫的網站一樣。語言是簡單的和不生僻的,可以讓人們去追隨這些準則。
風格規範應該留下足夠的設計空間對於其靈活性和實際製作上。就像您的品牌,在一定範圍內,可以幫助團隊成員發揮他們設計的創造力,也同時創造新的東西。風格規範的所有者也是如此,這是指批准、更新和變化設計風格規範的人,並能回答有關設計決策問題的所有人。這個 “所有者” 可以是個人團隊,或者更大組織的規模。
結論
您是不是已經有一個風格規範,或者正在準備一個新的?這是每年都會面對和處理的任務,這份指南將始終不會過時。去設計自己的網站風格規範吧!