六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

怎樣為網(wǎng)站創(chuàng)建風(fēng)格指南(style guide)

2012-12-23    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.wnxcall.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 來(lái)源: http://beforweb.com/node/88

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,            請(qǐng)點(diǎn)這里

什么是風(fēng)格指南?簡(jiǎn)單的說(shuō),就是一份告訴你如何講故事的文檔。它確立了一些標(biāo)準(zhǔn),例如怎樣撰寫(xiě)文案、怎樣排版、怎樣打造視覺(jué)元素和交互方式等等。風(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)容以清晰并且一致的視覺(jué)風(fēng)格呈現(xiàn)出來(lái)。BBC的全球體驗(yàn)語(yǔ)言 (Global Experience Language,GEL)就是網(wǎng)站風(fēng)格指南的絕佳范例。不妨通過(guò)頁(yè)面右側(cè)的“Download GEL Web Styleguide”下載一份PDF文檔來(lái)稍作了解先。

點(diǎn)擊查看原圖

關(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)目過(guò)程中所積累的知識(shí)與經(jīng)驗(yàn),并以直白的方式描述出來(lái);它在設(shè)計(jì)系統(tǒng)的層面上詮釋了項(xiàng)目過(guò)程中的各種設(shè)計(jì)思路,使團(tuán)隊(duì)中的其他設(shè)計(jì)師,或是將來(lái)的團(tuán)隊(duì),能夠更好的了解項(xiàng)目,展開(kāi)工作。

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

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

點(diǎn)擊查看原圖

一致性

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

風(fēng)格指南不需要對(duì)每個(gè)設(shè)計(jì)元素當(dāng)中每個(gè)像素進(jìn)行說(shuō)明,我們要做的是總結(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è)備訪問(wèn)你的站點(diǎn)時(shí),保持視覺(jué)風(fēng)格及體驗(yàn)的一致也是很重要的。

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

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

點(diǎn)擊查看原圖

這種方式同時(shí)可以幫助我們建立一套相對(duì)自由的設(shè)計(jì)模式庫(kù)。誠(chéng)然,不同項(xiàng)目當(dāng)中的視覺(jué)設(shè)計(jì)風(fēng)格會(huì)有所變化,但基于這些項(xiàng)目所抽象出來(lái)的模式卻可以保持相對(duì)統(tǒng)一。

別等到項(xiàng)目進(jìn)行到后期才開(kāi)始風(fēng)格指南方面的工作,你完全可以在設(shè)計(jì)過(guò)程當(dāng)中一點(diǎn)點(diǎn)的將逐漸成熟的界面風(fēng)格標(biāo)準(zhǔn)添加到文檔當(dāng)中。在創(chuàng)建界面元素的同時(shí)就對(duì)它們?cè)谝恢滦耘c標(biāo)準(zhǔn)化等方面的特質(zhì)進(jìn)行認(rèn)真的思考,這是很好的習(xí)慣。

點(diǎn)擊查看原圖

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

重在交流

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

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

點(diǎn)擊查看原圖

創(chuàng)建層疊化的風(fēng)格指南

回想一下CSS的工作方式。如果你在樣式表比較靠前的位置定義了某種全局元素的默認(rèn)樣式屬性,那么這些設(shè)定就會(huì)被與之相關(guān)的子級(jí)元素所繼承,直到你為某些特定的元素添加了更加具體的樣式屬性。同樣的道理,在風(fēng)格指南中,我們會(huì)從最普通的、最具普遍代表性的元素出發(fā),逐漸為細(xì)節(jié)元素增加具體的規(guī)則。

道理說(shuō)了不少,接下來(lái),我們將了解一下創(chuàng)建風(fēng)格指南的基本步驟與流程。

1.概述

對(duì)項(xiàng)目的簡(jiǎn)單陳述,包括項(xiàng)目目標(biāo)及解決方案的介紹。在這部分內(nèi)容中,你有機(jī)會(huì)就一些大方向問(wèn)題與其他成員進(jìn)行溝通,讓他們了解整個(gè)項(xiàng)目的重心及著眼點(diǎn)在哪里。同時(shí)你還可以對(duì)網(wǎng)站所需要具有的風(fēng)格氣質(zhì)、基調(diào)、內(nèi)容策略進(jìn)行簡(jiǎn)要的描述。

2.布局

頁(yè)面設(shè)計(jì)所使用的網(wǎng)格系統(tǒng)、基本的布局情況、頁(yè)面模塊的定位規(guī)則等。你要對(duì)一些全局性的頁(yè)面元素的定位進(jìn)行描述,還有相關(guān)的留白規(guī)則等。一些典型頁(yè)面的線框原型也要作為圖例出現(xiàn)在這部分內(nèi)容中。

3.品牌識(shí)別

包括配色方案、全局性的品牌圖片、品牌圖片的使用規(guī)則及約束等內(nèi)容。

4.文字排印

介紹網(wǎng)站所使用的文字排印方案,包括字體風(fēng)格、選取這些字體的理由等。這里還要通過(guò)一些具有代表性的具體圖示來(lái)介紹字體風(fēng)格與頁(yè)面上下文環(huán)境之間的關(guān)系。

5.導(dǎo)航

全局主導(dǎo)航、二級(jí)導(dǎo)航、下拉菜單、分類詞條的文字鏈接、搜索...任何能夠幫助用戶在站點(diǎn)中進(jìn)行導(dǎo)航操作的元素都可以歸納到這部分內(nèi)容中。從這里開(kāi)始,我們就要逐漸進(jìn)入細(xì)節(jié)層面了。導(dǎo)航元素在不同狀態(tài)下的鏈接色、背景色等屬性的定義也要在這里詳細(xì)的描述出來(lái),使開(kāi)發(fā)人員能夠一目了然。

6.HTML元素

一些典型元素的HTML標(biāo)簽使用規(guī)則,包括標(biāo)題元素(h1,h2,h3...)、有序列表、無(wú)序列表、按鈕、表單、字段集(fieldset)、表格等。這份規(guī)則清單不需要事無(wú)巨細(xì),但要盡量使其具有較高的綜合性和代表性;必要的時(shí)候可以與前端開(kāi)發(fā)人員配合完成這部份內(nèi)容。

7.媒體文件

包括圖片、音頻或視頻文件的使用情景、尺寸限制、顯示比例、緩存設(shè)置等方面的規(guī)則。

8.其他資源

這部分內(nèi)容所涉及到的對(duì)象基本都屬于細(xì)節(jié)層面了,那些無(wú)法歸入以上七個(gè)類別的、定制化程度比較高的設(shè)計(jì)元素都可以放在這里。例如,在某些特定的情況下不同模塊的呈現(xiàn)方式應(yīng)該發(fā)生怎樣的變化,側(cè)邊欄的廣告規(guī)則,搜索出錯(cuò)的處理方式,評(píng)論列表的呈現(xiàn)規(guī)則,照片集的瀏覽方式等等。通常,在這一部分內(nèi)容中,我們可以摸索并歸納出一些復(fù)用性較高的設(shè)計(jì)模式。

9.界面協(xié)調(diào)性畫(huà)布

將以上這些內(nèi)容匯總到一張大畫(huà)布中。所謂畫(huà)布,可以是圖片格式,當(dāng)然最好是HTML頁(yè)面的形式,因?yàn)檫@樣可以更加靈活的承載文案和HTML或CSS代碼方面的內(nèi)容,使前端開(kāi)發(fā)人員可以直接根據(jù)頁(yè)面元素的設(shè)計(jì)規(guī)則來(lái)使用對(duì)應(yīng)的代碼片段。另外,將所有涉及到視覺(jué)風(fēng)格的內(nèi)容都放在同一張畫(huà)布中,也可以使設(shè)計(jì)師能夠很容易的對(duì)頁(yè)面元素在整體上的協(xié)調(diào)性進(jìn)行檢視。

10.UX文檔

這部分內(nèi)容的命題確實(shí)不小,其中需要包括項(xiàng)目進(jìn)行到目前為止所產(chǎn)出的交付物,例如站點(diǎn)地圖、線框原型、高保真原型、用研文檔等。這些產(chǎn)品早期的交付物可以在接下來(lái)的設(shè)計(jì)與開(kāi)發(fā)流程中對(duì)功能、視覺(jué)、交互方式的定義起到重要作用。

使用風(fēng)格指南

創(chuàng)建風(fēng)格指南只是第一步,使它在實(shí)際工作中發(fā)揮價(jià)值才是最重要的。將指南附在項(xiàng)目管理工具中,或是郵件給項(xiàng)目組相關(guān)的人員;如果你不確定哪些人是真正“相關(guān)”的,那么讓項(xiàng)目leader或是產(chǎn)品經(jīng)理來(lái)做這件事也好??傊?,我們要通過(guò)風(fēng)格指南來(lái)實(shí)現(xiàn)的目標(biāo)是團(tuán)隊(duì)協(xié)作,讓大家一起付出努力來(lái)完成項(xiàng)目。

將風(fēng)格指南交付給團(tuán)隊(duì)成員之后,記得時(shí)常在項(xiàng)目的重要環(huán)節(jié)中談起這份指南的重要性,使它逐漸成為工作流程甚至是產(chǎn)品文化的一部分。

我得承認(rèn)一點(diǎn),有時(shí)候我確實(shí)覺(jué)得風(fēng)格指南這東西有點(diǎn)乏味,沒(méi)關(guān)系,至少我們不能以此作為借口而不去創(chuàng)建它。請(qǐng)相信一點(diǎn),風(fēng)格指南對(duì)于設(shè)計(jì)流程以致整個(gè)項(xiàng)目的成功會(huì)起到關(guān)鍵性的作用。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔