<b>怎樣為網(wǎng)站創(chuàng)建風格指南(style guide)</b>

作者: 來源:未知 2012-06-19 17:38:57 閱讀 我要評論 直達商品

 

  旅途歸來,一切安好。五天很短暫,回想起來基本只有將就算是藍色的大海和天空,還有白花花的沙灘;有興趣的朋友可以到我的微博中看看風景照什么的。

  還好,回來之后并沒覺得無法適應慣常生活一類,它們之間的區(qū)別只是“狀態(tài)1”與“狀態(tài)2”這樣;把該做的事情立刻開始做起來吧,心里會安一些。之前一篇是“iOS Wow體驗 – 第六章 – 交互模型與創(chuàng)新的產(chǎn)品概念”的前半部分。今天插播小文一篇,怎樣為網(wǎng)站創(chuàng)建風格指南。進入正文,鏘鏘鏘。

  什么是風格指南?簡單的說,就是一份告訴你如何講故事的文檔。它確立了一些標準,例如怎樣撰寫文案、怎樣排版、怎樣打造視覺元素和交互方式等等。風格指南源自于印刷領域,例如報刊(看看衛(wèi)報的風格指南);在Web領域,它同樣體現(xiàn)出了巨大的價值。

  無論是傳統(tǒng)印刷,還是互聯(lián)網(wǎng),最關(guān)鍵的都是“內(nèi)容”。風格指南的最終目標就是讓內(nèi)容以清晰并且一致的視覺風格呈現(xiàn)出來。BBC的全球體驗語言(Global Experience Language,GEL)就是網(wǎng)站風格指南的絕佳范例。不妨通過頁面右側(cè)的“Download GEL Web Styleguide”下載一份PDF文檔來稍作了解先。

  

bbc-Global-Experience-Language-GEL

 

  關(guān)于系統(tǒng)的故事

  好的風格指南看上去就像是網(wǎng)站的自傳,它能夠讓其他人與之進行互動,從而進一步了解并擴展這個網(wǎng)站。風格指南應該包含相關(guān)人員在網(wǎng)站項目過程中所積累的知識與經(jīng)驗,并以直白的方式描述出來;它在設計系統(tǒng)的層面上詮釋了項目過程中的各種設計思路,使團隊中的其他設計師,或是將來的團隊,能夠更好的了解項目,展開工作。

  也許你會想,作為設計師,這些難道不是我們在本能當中應該了解的嗎,何必搞到文檔中呢?在實際工作中,設計師不可能包攬所有的事情,例如商業(yè)研究、內(nèi)容策略、用戶體驗、技術(shù)開發(fā)、QA、部署等方面的工作需要涉及到的人員和團隊也許會有很多,你要在恰當?shù)沫h(huán)節(jié)將文檔交付給對應的合作部門,使他們在必要的時候可以更加準確的了解網(wǎng)站產(chǎn)品的特性。

  通常,在網(wǎng)站的界面設計工作結(jié)束之后,交互設計師與視覺設計師就該展開風格指南方面的工作了?纯茨闶欠袷煜は旅孢@樣的情景:你們已經(jīng)在Photoshop或Fireworks當中打造了完美的視覺稿,每個像素都很到位,行間距控制的不錯,配色即合理又富有含義。很棒,接下來應該將設計稿交付給前端開發(fā)了;你準備怎樣就方案中的每個細節(jié)元素與開發(fā)人員進行溝通呢?回想一下你們在設計過程中作出的各種重要的設計決策,那些背景的不透明度為60%、擁有一像素淺灰色邊框的容器,那些像素級精確的padding與margin設定…所有這些,你們應該以怎樣的方式與開發(fā)人員進行交流,才能讓他們了解到這些重要的細節(jié)呢?

  

design-style-guide-grid-web-page

 

  一致性

  在設計過程中,我們也許要作出成百上千個大大小小的設計決策,任何一個明顯或隱蔽的元素當中都有可能蘊含著特定的意義,并對頁面整體的用戶體驗造成影響。要將所有這些細節(jié)都落實到文檔中,那樣所花費的時間也許會超過設計過程本身;項目組恐怕難以承受這樣的成本。

  風格指南不需要對每個設計元素當中每個像素進行說明,我們要做的是總結(jié)出一系列通用的設計原則,使項目中的相關(guān)人員理解和領會。這種相對抽象化的做法也可以使你的設計思想和意圖得到體現(xiàn)。

  “一致性”是界面當中的所有元素都應當具有的普遍特質(zhì),作為設計體系的一部分,它們都應該體現(xiàn)出一致的設計思想。當人們使用不同類型的設備訪問你的站點時,保持視覺風格及體驗的一致也是很重要的。

  正像Nathan Borror在2009年發(fā)布的一篇關(guān)于界面協(xié)調(diào)性的文章當中所說:“良好的界面一致性是不會被用戶所注意到的。”換句話講,良好的界面協(xié)調(diào)性所帶來的美妙體驗會讓用戶在不知不覺當中產(chǎn)生愉悅的感受。

  我(英文原文作者)通常會在風格指南當中借用這篇文章當中介紹的“界面協(xié)調(diào)性畫布”這一方式,將項目所涉及的所有典型設計元素同時呈現(xiàn)在一張畫布當中,包括它們各自不同的狀態(tài),以及對應的代碼片段。

  

interface-harmony-canvas

 

  這種方式同時可以幫助我們建立一套相對自由的設計模式庫。誠然,不同項目當中的視覺設計風格會有所變化,但基于這些項目所抽象出來的模式卻可以保持相對統(tǒng)一。

  別等到項目進行到后期才開始風格指南方面的工作,你完全可以在設計過程當中一點點的將逐漸成熟的界面風格標準添加到文檔當中。在創(chuàng)建界面元素的同時就對它們在一致性與標準化等方面的特質(zhì)進行認真的思考,這是很好的習慣。

  

interface-style-guide-overlay

 

  DrupalCon Chicago官方網(wǎng)站的風格指南,關(guān)于全局網(wǎng)格及界面布局的部分。

  重在交流

  作為設計師,我們時常會陷入設計的細節(jié)當中難以自拔;記得提醒自己,設計的本質(zhì)在于傳遞信息,也就是交流;“設計方案”這個整體也是對某種宏觀問題的回應。我們同樣要站在一個較高的層面上,以交流為目的來創(chuàng)建風格指南,闡述設計決策及其背后的思路。

  簡單的講,我們應該以那些“大”元素作為起點來創(chuàng)建風格指南,在接下來的過程中逐漸進行細化?梢哉f,如果你能夠在設計流程進入到細節(jié)階段之前讓自己對于那些全局層面的元素保持思考,那么接下來的設計工作也會變的非常從容和協(xié)調(diào)。其實這樣的過程聽上去有些像CSS(cascading style sheets)的原理。所謂的層疊樣式表,關(guān)鍵在于從宏觀結(jié)構(gòu)到微觀細節(jié)的層疊。所以如果你愿意的話,也可以將風格指南叫做“層疊風格指南”。


  推薦閱讀

  合格的SEOER的網(wǎng)站優(yōu)化之道

這是一個優(yōu)勝劣汰SEO的時代,做為一名SEOER,我們到底應該怎樣把握SEO創(chuàng)新的腳步呢?大家往下面看。 解析一個合格的SEOER。 當我們考驗一個SEOER,看他整天的工作分配情況,當一個SEOER每天把一天八個小時中的4~5個小>>>詳細閱讀


本文標題:<b>怎樣為網(wǎng)站創(chuàng)建風格指南(style guide)</b>

地址:http://m.sdlzkt.com/a/22/20120619/69278.html

樂購科技部分新聞及文章轉(zhuǎn)載自互聯(lián)網(wǎng),供讀者交流和學習,若有涉及作者版權(quán)等問題請及時與我們聯(lián)系,以便更正、刪除或按規(guī)定辦理。感謝所有提供資訊的網(wǎng)站,歡迎各類媒體與樂購科技進行文章共享合作。

網(wǎng)友點評
我的評論: 人參與評論
驗證碼: 匿名回答
網(wǎng)友評論(點擊查看更多條評論)
友情提示: 登錄后發(fā)表評論,可以直接從評論中的用戶名進入您的個人空間,讓更多網(wǎng)友認識您。
自媒體專欄

評論

熱度

主站蜘蛛池模板: 成人综合激情另类小说| 成人品视频观看在线| 一级成人黄色片| 揄拍成人国产精品视频| 国产精品成人久久久久| 免费成人在线电影| 成人黄色激情视频| 国产午夜成人AV在线播放| 香蕉视频成人在线观看| 亚洲综合国产成人丁香五月激情| 国产成人年无码AV片在线观看| 免费观看成人羞羞视频软件| 欧美成人免费全部观看天天性色 | 久久久久成人精品一区二区| 成人看片黄a免费看| 国产成人亚洲综合a∨| 欧美成人伊人十综合色| 亚洲国产成人精品无码区在线观看| 成人爽爽激情在线观看| www国产成人免费观看视频| 国产成人一区二区三区免费视频 | 国产成人精品免高潮在线观看 | 欧美成人免费高清视频| 久久精品国产成人AV| 国产成人欧美一区二区三区| 成人中文字幕一区二区三区 | 亚洲国产成人高清在线观看| 国产成人精品视频一区二区不卡| 成人毛片全部免费观看| 成人精品视频99在线观看免费| 精品久久久久成人码免费动漫| 亚洲av无码成人精品国产| 久久成人无码国产免费播放| 免费看成人aa片无码视频吃奶 | 国产成人精品视频网站| 成人中文精品3d动漫在线| 成人动漫在线免费观看| 成人在线激情网| 国产成人麻豆亚洲综合无码精品 | 伊人久久大香线蕉AV成人| 成人黄软件网18免费下载成人黄18免费视频|