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