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