現在網頁設計越來越重視視覺設計、使用者經驗，如何針對一個將要開發的網站製作一個設計準則、規範，符合本網站著題與企業形象還有讓自己或是團隊中的其他開發人員也能遵守？
這就是專業網頁設計團隊在開發網站時要做出來的一份文件，通稱 “ Web Design Style Guide ”，那麼這份文件需要有哪些重要項目？如何搞出一份 Web Design Style Guide
國外網站有一篇參考文章，寫得不錯，你們可以參考一下，當然還可以依照自己需求加入。
原文有許多參考圖，起點進去對照
原文有許多參考圖，起點進去對照
1. Study the Brand
了解此網站所代表的品牌、角色，了解背後的故事，未來的願景，網站帶出的價值與任務。
如此才能夠激發出你用視覺、情感設計出符合此網站所代表的企業、任務.......的基調。
在此階段，大量運用你熟悉的 Photoshop\ Illustrator 組合顏色、當然你有行動裝置，快下載 Adobe Color, Adobe Line, Adobe Sketch, Adobe Idea ….等免費 APPs 隨時、隨地都可以蒐集顏色、決定色票（色盤）。
如果你已經對 HTML 很熟悉了，就快用 HTML定義好這些決定的元素。
2. Define Typography
根據 Oliver Reichenstein 所說 95% 網站的資訊是以文字呈現，所以選擇對的型以及樣式是對於網站與用戶溝通非常重要的一件事情。從最大標題到註解、圖說，所用的字型、顏色、樣式，都要清楚定義好。
3. Color Palette / 色盤
這是網站用色列表，代表著此網站品牌形象與溝通的任務，給予客戶舒適的視覺閱讀、操作介面並能夠清楚指示網站各資訊區塊劃分。
此色盤定義操作介面用的元素，如線條、色塊....等，建議不要太多顏色，每個顏色明暗區分別超過三色 (如要表現陰影、受光面...)。
4. Voice / 用詞調性
簡單說一下，就是網站裡的通用術語，如果能改成符合此站的風格，會更棒，如果是兒童網站，使用者點到無效的連結，如果直接出現的是“You’ve got 404 error” 就太正經了，或許可以改為： 底迪，你迷路了喔。之類的。
5. Iconography / 圖示
網站內用的圖示也要統一風格，如果用免費的，請注意版權，注意圖示的通用性、直覺性，易於了解意思。
6. Imagery / 圖片風格
所使用圖片色調與風格盡量統一，符合設計網站代表的形象與任務。
照片所表達的故事性、情感，引發出來的感受也特別重要，別亂選圖庫的圖，把網站弄的亂七八糟的。
7. Forms and Buttons / 表單
表單以及其他與使用者互動的按鈕、畫面這些東西，都確保每個狀態都要定義好，例如：使用者按下後、還沒按下、按過以後，錯誤訊息.....等。 這些樣式都要詳盡規定。
8. Spacing / 留白
每個元素之間的空隙、網站邊界的留白還有跨螢幕設計的 Responsive Web Design 的 grid （格線系統）設計，這都是非常重要的，適當的留白可讓網站視覺專業度增加不少。
9. Dos and Don’ts / 可以與不可以
最後，一定要說明設計時應避開不可以放進來的東西或是顏色、樣式。
如果處於模糊地帶，就用圖指示哪些不可以哪些是被允許的。
沒有留言:
張貼留言