以下內容由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司，寶雞世紀網(wǎng)絡(luò )為您編輯整理。

什么是網(wǎng)站獨特風(fēng)格？簡(jiǎn)單的說(shuō)，就是一份告訴你如何確立一些標準，例如怎樣撰寫(xiě)文案、怎樣排版、怎樣打造視覺(jué)元素和交互方式等等。風(fēng)格指南源自于印刷領(lǐng)域，在Web領(lǐng)域，

它同樣體現出了巨大的價(jià)值。

無(wú)論是傳統印刷，還是互聯(lián)網(wǎng)，最關(guān)鍵的都是“內容”。風(fēng)格指南的最終目標就是讓內容以清晰并且一致的視覺(jué)風(fēng)格呈現出來(lái)。(Global Experience Language,GEL)就是網(wǎng)站

風(fēng)格指南的絕佳范例。不妨通過(guò)頁(yè)面右側的“Download GEL Web Styleguide”下載一份PDF文檔來(lái)稍作了解先。

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

好的風(fēng)格指南看上去就像是網(wǎng)站的自傳，它能夠讓其他人與之進(jìn)行互動(dòng)，從而進(jìn)一步了解并擴展這個(gè)網(wǎng)站。風(fēng)格指南應該包含相關(guān)人員在網(wǎng)站項目過(guò)程中所積累的知識與經(jīng)驗，并

以直白的方式描述出來(lái)；它在設計系統的層面上詮釋了項目過(guò)程中的各種設計思路，使團隊中的其他設計師，或是將來(lái)的團隊，能夠更好的了解項目，展開(kāi)工作。

也許你會(huì )想，作為設計師，這些難道不是我們在本能當中應該了解的嗎，何必搞到文檔中呢？在實(shí)際工作中，設計師不可能包攬所有的事情，例如商業(yè)研究、內容策略、用戶(hù)體驗

、技術(shù)開(kāi)發(fā)、QA、部署等方面的工作需要涉及到的人員和團隊也許會(huì )有很多，你要在恰當的環(huán)節將文檔交付給對應的合作部門(mén)，使他們在必要的時(shí)候可以更加準確的了解網(wǎng)站產(chǎn)品

的特性。

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

一致性

在設計過(guò)程中，我們也許要作出成百上千個(gè)大大小小的設計決策，任何一個(gè)明顯或隱蔽的元素當中都有可能蘊含著(zhù)特定的意義，并對頁(yè)面整體的用戶(hù)體驗造成影響。要將所有這些

細節都落實(shí)到文檔中，那樣所花費的時(shí)間也許會(huì )超過(guò)設計過(guò)程本身；項目組恐怕難以承受這樣的成本。

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

“一致性”是界面當中的所有元素都應當具有的普遍特質(zhì)，作為設計體系的一部分，它們都應該體現出一致的設計思想。當人們使用不同類(lèi)型的設備訪(fǎng)問(wèn)你的站點(diǎn)時(shí)，保持視覺(jué)風(fēng)

格及體驗的一致也是很重要的。

良好的界面一致性是不會(huì )被用戶(hù)所注意到的。換句話(huà)講，良好的界面協(xié)調性所帶來(lái)的美妙體驗會(huì )讓用戶(hù)在不知不覺(jué)當中產(chǎn)生愉悅的感受。

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

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

別等到項目進(jìn)行到后期才開(kāi)始風(fēng)格指南方面的工作，你完全可以在設計過(guò)程當中一點(diǎn)點(diǎn)的將逐漸成熟的界面風(fēng)格標準添加到文檔當中。在創(chuàng )建界面元素的同時(shí)就對它們在一致性與

標準化等方面的特質(zhì)進(jìn)行認真的思考，這是很好的習慣。

重在交流

作為設計師，我們時(shí)常會(huì )陷入設計的細節當中難以自拔；記得提醒自己，設計的本質(zhì)在于傳遞信息，也就是交流；“設計方案”這個(gè)整體也是對某種宏觀(guān)問(wèn)題的回應。我們同樣要

站在一個(gè)較高的層面上，以交流為目的來(lái)創(chuàng )建風(fēng)格指南，闡述設計決策及其背后的思路。

簡(jiǎn)單的講，我們應該以那些“大”元素作為起點(diǎn)來(lái)創(chuàng )建風(fēng)格指南，在接下來(lái)的過(guò)程中逐漸進(jìn)行細化?？梢哉f(shuō)，如果你能夠在設計流程進(jìn)入到細節階段之前讓自己對于那些全局層面

的元素保持思考，那么接下來(lái)的設計工作也會(huì )變的非常從容和協(xié)調。其實(shí)這樣的過(guò)程聽(tīng)上去有些像CSS(cascading style sheets)的原理。所謂的層疊樣式表，關(guān)鍵在于從宏觀(guān)結構

到微觀(guān)細節的層疊。所以如果你愿意的話(huà)，也可以將風(fēng)格指南叫做“層疊風(fēng)格指南”。

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

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

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

1.概述

對項目的簡(jiǎn)單陳述，包括項目目標及解決方案的介紹。在這部分內容中，你有機會(huì )就一些大方向問(wèn)題與其他成員進(jìn)行溝通，讓他們了解整個(gè)項目的重心及著(zhù)眼點(diǎn)在哪里。同時(shí)你還

可以對網(wǎng)站所需要具有的風(fēng)格氣質(zhì)、基調、內容策略進(jìn)行簡(jiǎn)要的描述。

2.布局

頁(yè)面設計所使用的網(wǎng)格系統、基本的布局情況、頁(yè)面模塊的定位規則等。你要對一些全局性的頁(yè)面元素的定位進(jìn)行描述，還有相關(guān)的留白規則等。一些典型頁(yè)面的線(xiàn)框原型也要作

為圖例出現在這部分內容中。

3.品牌識別

包括配色方案、全局性的品牌圖片、品牌圖片的使用規則及約束等內容。

4.文字排印

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

5.導航

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

6.HTML元素

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

7.媒體文件

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

8.其他資源

這部分內容所涉及到的對象基本都屬于細節層面了，那些無(wú)法歸入以上七個(gè)類(lèi)別的、定制化程度比較高的設計元素都可以放在這里。例如，在某些特定的情況下不同模塊的呈現方

式應該發(fā)生怎樣的變化，側邊欄的廣告規則，搜索出錯的處理方式，評論列表的呈現規則，照片集的瀏覽方式等等。通常，在這一部分內容中，我們可以摸索并歸納出一些復用性

較高的設計模式。

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

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

10.UX文檔

這部分內容的命題確實(shí)不小，其中需要包括項目進(jìn)行到目前為止所產(chǎn)出的交付物，例如站點(diǎn)地圖、線(xiàn)框原型、高保真原型、用研文檔等。這些產(chǎn)品早期的交付物可以在接下來(lái)的設

計與開(kāi)發(fā)流程中對功能、視覺(jué)、交互方式的定義起到重要作用。

使用風(fēng)格指南

創(chuàng )建風(fēng)格指南只是第一步，使它在實(shí)際工作中發(fā)揮價(jià)值才是最重要的。將指南附在項目管理工具中，或是郵件給項目組相關(guān)的人員；如果你不確定哪些人是真正“相關(guān)”的，那么

讓項目leader或是產(chǎn)品經(jīng)理來(lái)做這件事也好?？傊?，我們要通過(guò)風(fēng)格指南來(lái)實(shí)現的目標是團隊協(xié)作，讓大家一起付出努力來(lái)完成項目。

以上內容就是由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司，寶雞世紀網(wǎng)絡(luò )為您搜集整理的《網(wǎng)站設計時(shí)形成獨特風(fēng)格的秘訣》的全部?jì)热荨?/SPAN>我公司是在寶雞市工商局注冊的專(zhuān)業(yè)提供網(wǎng)站建設、網(wǎng)站優(yōu)化、網(wǎng)站推廣，軟件開(kāi)發(fā)的高新技術(shù)企業(yè)，一直致力于面向寶雞地區黨政機關(guān)、企事業(yè)單位提供大中型門(mén)戶(hù)網(wǎng)站解決方案、 OA 辦公自動(dòng)化系統解決方案，以及中小型應用軟件開(kāi)發(fā)及其它信息化外包業(yè)務(wù)。目前已承建寶雞地區近680多家政府網(wǎng)站、企業(yè)網(wǎng)站，是寶雞網(wǎng)站建設行業(yè)規模最大、客戶(hù)數量最多、技術(shù)力量雄厚的寶雞網(wǎng)絡(luò )公司。歡迎您來(lái)電咨詢(xún)，咨詢(xún)熱線(xiàn)：0917-3535180 3536690……