怎樣為網(wǎng)站創(chuàng)建風格指南（style guide）
來源:解決方案 2012-06-21
別等到項目進行到后期才開始風格指南方面的工作,你完全可以在設計過程當中一點點的將逐漸成熟的界面風格標準添加到文檔當中
旅途歸來,一切安好五天很短暫,回想起來基本只有將就算是藍色的大海和天空,還有白花花的沙灘;有興趣的朋友可以到我的微博中看看風景照什么的
還好,回來之后并沒覺得無法適應慣常生活一類,它們之間的區(qū)別只是“狀態(tài)1”與“狀態(tài)2”這樣;把該做的事情立刻開始做起來吧,心里會安一些之前一篇是“iOS Wow體驗 – 第六章 – 交互模型與創(chuàng)新的產品概念”的前半部分今天插播小文一篇,怎樣為網(wǎng)站創(chuàng)建風格指南進入正文,鏘鏘鏘
什么是風格指南?簡單的說,就是一份告訴你如何講故事的文檔它確立了一些標準,例如怎樣撰寫文案、怎樣排版、怎樣打造視覺元素和交互方式等等風格指南源自于印刷領域,例如報刊(看看衛(wèi)報的風格指南);在Web領域,它同樣體現(xiàn)出了巨大的價值
無論是傳統(tǒng)印刷,還是互聯(lián)網(wǎng),最關鍵的都是“內容”風格指南的最終目標就是讓內容以清晰并且一致的視覺風格呈現(xiàn)出來BBC的全球體驗語言(Global Experience Language,GEL)就是網(wǎng)站風格指南的絕佳范例不妨通過頁面右側的“Download GEL Web Styleguide”下載一份PDF文檔來稍作了解先
關于系統(tǒng)的故事
好的風格指南看上去就像是網(wǎng)站的自傳,它能夠讓其他人與之進行互動,從而進一步了解并擴展這個網(wǎng)站風格指南應該包含相關人員在網(wǎng)站項目過程中所積累的知識與經(jīng)驗,并以直白的方式描述出來;它在設計系統(tǒng)的層面上詮釋了項目過程中的各種設計思路,使團隊中的其他設計師,或是將來的團隊,能夠更好的了解項目,展開工作
也許你會想,作為設計師,這些難道不是我們在本能當中應該了解的嗎,何必搞到文檔中呢?在實際工作中,設計師不可能包攬所有的事情,例如商業(yè)研究、內容策略、用戶體驗、技術開發(fā)、QA、部署等方面的工作需要涉及到的人員和團隊也許會有很多,你要在恰當?shù)沫h(huán)節(jié)將文檔交付給對應的合作部門,使他們在必要的時候可以更加準確的了解網(wǎng)站產品的特性
通常,在網(wǎng)站的界面設計工作結束之后,交互設計師與視覺設計師就該展開風格指南方面的工作了看看你是否熟悉下面這樣的情景:你們已經(jīng)在Photoshop或Fireworks當中打造了完美的視覺稿,每個像素都很到位,行間距控制的不錯,配色即合理又富有含義很棒,接下來應該將設計稿交付給前端開發(fā)了;你準備怎樣就方案中的每個細節(jié)元素與開發(fā)人員進行溝通呢?回想一下你們在設計過程中作出的各種重要的設計決策,那些背景的不透明度為60%、擁有一像素淺灰色邊框的容器,那些像素級精確的padding與margin設定…所有這些,你們應該以怎樣的方式與開發(fā)人員進行交流,才能讓他們了解到這些重要的細節(jié)呢?
一致性
在設計過程中,我們也許要作出成百上千個大大小小的設計決策,任何一個明顯或隱蔽的元素當中都有可能蘊含著特定的意義,并對頁面整體的用戶體驗造成影響要將所有這些細節(jié)都落實到文檔中,那樣所花費的時間也許會超過設計過程本身;項目組恐怕難以承受這樣的成本
風格指南不需要對每個設計元素當中每個像素進行說明,我們要做的是總結出一系列通用的設計原則,使項目中的相關人員理解和領會這種相對抽象化的做法也可以使你的設計思想和意圖得到體現(xiàn)
“一致性”是界面當中的所有元素都應當具有的普遍特質,作為設計體系的一部分,它們都應該體現(xiàn)出一致的設計思想當人們使用不同類型的設備訪問你的站點時,保持視覺風格及體驗的一致也是很重要的
正像Nathan Borror在2009年發(fā)布的一篇關于界面協(xié)調性的文章當中所說:“良好的界面一致性是不會被用戶所注意到的”換句話講,良好的界面協(xié)調性所帶來的美妙體驗會讓用戶在不知不覺當中產生愉悅的感受
我(英文原文作者)通常會在風格指南當中借用這篇文章當中介紹的“界面協(xié)調性畫布”這一方式,將項目所涉及的所有典型設計元素同時呈現(xiàn)在一張畫布當中,包括它們各自不同的狀態(tài),以及對應的代碼片段
這種方式同時可以幫助我們建立一套相對自由的設計模式庫誠然,不同項目當中的視覺設計風格會有所變化,但基于這些項目所抽象出來的模式卻可以保持相對統(tǒng)一在創(chuàng)建界面元素的同時就對它們在一致性與標準化等方面的特質進行認真的思考,這是很好的習慣
DrupalCon Chicago官方網(wǎng)站的風格指南,關于全局網(wǎng)格及界面布局的部分
1
2
下一頁
文章編輯: 365webcall在線客服系統(tǒng)(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
