遵循Web標準的網(wǎng)頁設(shè)計工作流程

/遵循Web標準的網(wǎng)頁設(shè)計工作流程(一)經(jīng)常有讀者來信詢問在實際開發(fā)一個網(wǎng)站的時候，具體是依據(jù)什么工作流程進行工作的，一個網(wǎng)站原委是如何從零起先一點點做出來的呢?今日我們來就這個問題作一些說明。我們今日介紹的是關(guān)于從零起先設(shè)計一個頁面的過程，我們可以把一個頁面的完整設(shè)計過程分為7個步驟，如下圖所示。在圖中，這個過程分為了7個步驟，并且說明白這7個步驟相應(yīng)運用的工具。這7個步驟依次為：1.內(nèi)容分析：細致探討須要在網(wǎng)頁中的呈現(xiàn)的內(nèi)容，梳理其中的邏輯關(guān)系，分清層次，以及重要程度。2.結(jié)構(gòu)設(shè)計：依據(jù)內(nèi)容分析的成果，搭建出合理的HTML結(jié)構(gòu)，保證在沒有任何CSS樣式的狀況下，在閱讀器保持高可讀性。3.原型設(shè)計：依據(jù)網(wǎng)頁的結(jié)構(gòu)，繪制出原型線框圖，對頁面進行合理的分區(qū)的布局，原型線框圖是設(shè)計負責(zé)人和客戶溝通的最佳媒介。4.方案設(shè)計：在確定的原型線框圖基礎(chǔ)上，運用美工軟件，設(shè)計出具有良好視覺效果的頁面設(shè)計方法。5.布局設(shè)計：運用HTML和CSS對頁面進行布局。6.視覺設(shè)計：運用CSS并協(xié)作美工設(shè)計元素，完成由設(shè)計方法到網(wǎng)頁的轉(zhuǎn)化。7.交互設(shè)計：為網(wǎng)頁增加交互效果，如鼠標指針經(jīng)過時的一些特效等。下面具體解說一下，例如要設(shè)計出一個如下圖所示的頁面。這是為一個假想的名為“BabyHousing”的兒童用品網(wǎng)上商店制作的一個網(wǎng)站首頁。請讀者思索一下要設(shè)計出這樣的一個頁面，依據(jù)上面描述的工作流程，應(yīng)當在每一步驟中完成什么工作呢？遵循Web標準的網(wǎng)頁設(shè)計工作流程(二)昨天介紹了網(wǎng)頁設(shè)計的工作流程概述，今日起先來看一看具體是如何進行的。第1步要先想清楚這個網(wǎng)站的內(nèi)容是什么？通過一個網(wǎng)頁要傳達給訪問者什么信息？這些信息中哪些是最重要的？哪些是相對比較重要的？以及哪些是次要的。這些信息應(yīng)當如何組織呢？我們可以參考一些網(wǎng)上商店的網(wǎng)站，比如下圖所示的是卓越沿馬遜網(wǎng)上商店的首頁，讀者在探討一些勝利網(wǎng)站的時候，不要僅僅關(guān)注這些網(wǎng)站的設(shè)計風(fēng)格和技術(shù)微小環(huán)節(jié)，更要從更深的角度視察它們，這樣才能更好地駕馭核心的東西。例如從圖中可以看到，這個頁面盡管內(nèi)容特殊多，但簡潔來說，就分為兩大類——“分類鏈接”和“舉薦商品鏈接”。這樣回到我們自己的網(wǎng)站，比如說，可以確定出須要在首頁展示如下一些信息：網(wǎng)站標題網(wǎng)站標記主導(dǎo)航欄自身介紹和用戶幫助的鏈接賬號登錄和購物車今日舉薦商品（1種）最受歡迎商品（1種）分類舉薦商品（3種）搜尋框類別菜單特殊提示信息版權(quán)信息在理解了網(wǎng)站的基礎(chǔ)上，我們起先構(gòu)建網(wǎng)站的內(nèi)容結(jié)構(gòu)?，F(xiàn)在完全不要管CSS，而是完全從網(wǎng)頁的內(nèi)容動身，依據(jù)上面列出的要點，通過HTML搭建出網(wǎng)頁的內(nèi)容結(jié)構(gòu)。如下圖所示的是搭建的HTML在沒有運用任何CSS設(shè)置的狀況下，運用閱讀器視察的效果。在圖中，左側(cè)運用線條表示了各個項目的構(gòu)成。事實上圖中顯示的就是前面的圖在不運用任何CSS樣式時的表現(xiàn)。提示讀者一點，任何一個頁面，應(yīng)當進可能保證在不運用CSS的狀況下，照舊保持良好結(jié)構(gòu)和可讀性。這不僅僅對訪問者很有幫助，而且可以有助于你的網(wǎng)站被Google、百度這樣的搜尋引擎了解和收錄，這樣對于網(wǎng)站提升訪問量可是至關(guān)重要的。遵循Web標準的網(wǎng)頁設(shè)計工作流程(三)在設(shè)計任何一個網(wǎng)頁之前，都應(yīng)當先有一個構(gòu)思的過程，對網(wǎng)站的完整功能和內(nèi)容作一個全面的分析。假如有條件，應(yīng)當制作出線框圖，這個過程專業(yè)上稱為“原型設(shè)計”，例如，在具體制作頁面之前，我們就可以先設(shè)計一個如下圖所示的網(wǎng)頁原型線框圖。網(wǎng)頁原型設(shè)計也是分步驟實現(xiàn)的，先把一個頁面分為若干個大部分，然后分別逐步細化。假如是為客戶設(shè)計的網(wǎng)頁，那么運用原型線框圖和客戶溝通溝通是最合適的方式，既可以清楚地表明設(shè)計思路，又不用花費大量的繪制時間，因為原型設(shè)計階段，往往要經(jīng)過反復(fù)修改，假如每次都運用完成以后的設(shè)計圖溝通，則反復(fù)修改須要大量的時間和工作量，而且在設(shè)計的起先階段，往往溝通溝通的中心并不是涉及的微小環(huán)節(jié)，而是功能、結(jié)構(gòu)等策略性的問題，因此運用這種線框圖示特殊合適的。這里向讀者舉薦一種繪制圓形線框圖特殊便利的軟件——“AxureRP”，這個軟件是特地用來作原型設(shè)計的，而且可以便利地設(shè)計動態(tài)過程的原型，讀者有愛好可以實踐一下。這個軟件的網(wǎng)址是：://axure/。這個軟件目前沒有中文版。假如沒有AxureRP這樣的軟件，一般的繪圖軟件，例如微軟公司的Visio，Adobe公司的Fireworks、甚至Photoshop等軟件，都可以勝任。在和客戶探討，確定了原型以后，可以進行實際的頁面方案設(shè)計了，這一步通常運用Photoshop或者Fireworks等軟件完成。如下圖所示的是在Fireworks中的效果。遵循Web標準的網(wǎng)頁設(shè)計工作流程(四)昨天介紹了原型原型設(shè)計和網(wǎng)頁方案設(shè)計這兩個步驟，今日進行下一步工作。下面應(yīng)當進行的步驟是頁面布局這一步驟，任務(wù)是把各種元素放到適當?shù)奈恢?，短暫不用涉及特殊微小環(huán)節(jié)的因素。具體來說，首先應(yīng)當對頁面的整體進行一些設(shè)置，把個各種閱讀器中默認值不同的元素屬性都設(shè)置為統(tǒng)一的值等等，以保證這些內(nèi)容在各個閱讀器中有相同表現(xiàn)。接下來就依次對網(wǎng)頁的各個部分進行布局設(shè)置，入頁頭、中間部分、頁腳等等，此時的主要任務(wù)是把位置定好，例如下圖中，可以看到，網(wǎng)頁中間的內(nèi)容已經(jīng)實現(xiàn)了兩列布局的效果，而具體的樣式微小環(huán)節(jié)還沒有設(shè)置。在各個部分布局完成以后，就起先對每個部分依次設(shè)置視覺微小環(huán)節(jié)效果，例如在頁面的頁頭部分，就可以如圖下所示地在Fireworks中進行切片，把須要的圖像切出來。在例如，在網(wǎng)頁右側(cè)的圓角框，也是在這一步中實現(xiàn)的，如下圖所示。此外還有很多微小環(huán)節(jié)都須要細致設(shè)置，例如圓角框中的書目列表、搜尋表單等等，這些設(shè)置就都是只涉及局部的樣式了。從圖中可以看到，到這里已經(jīng)接近勝利了。遵循Web標準的網(wǎng)頁設(shè)計工作流程(五)昨天介紹了布局設(shè)計和視覺微小環(huán)節(jié)設(shè)計這兩個步驟，今日進行下一步工作，也是這個系列的最終一次內(nèi)容了。接下來我們進行一些交互性的動態(tài)設(shè)計，這里主要是為網(wǎng)頁元素增加鼠標經(jīng)過時的效果。如下圖所示，在鼠標指針經(jīng)過主導(dǎo)航欄和次導(dǎo)航欄的時候，相應(yīng)的菜單項會發(fā)生變更，鼠標經(jīng)過“登錄帳號”或者“購物車”圖像時，顏色也會變淺，這都是為了提示用戶所進行的選擇。此外，當鼠標經(jīng)過圖像時，圖像四周的邊框也會發(fā)變更。到這里，這個頁面的靜態(tài)設(shè)計就算完成了，接下來還須要進行相應(yīng)程序的開發(fā)，無論是由程序員進行開發(fā)，還是運用CMS系統(tǒng)，都應(yīng)當相關(guān)的開發(fā)人員來接著工作了，設(shè)計師的工作到這里基本就結(jié)束了。希望讀者可以通過5天來的講解，對網(wǎng)頁設(shè)計從無到有，從策劃構(gòu)思到設(shè)計實施，有一個比較完整的概念了！最終，談一談運用這種方法設(shè)計出來頁面具有哪些優(yōu)點。做到這里，讀者可能還沒有完全意識到運用這種CSS進行布局的優(yōu)點。這種布局方式的最大優(yōu)點是特殊靈敏，可以便利地擴展和調(diào)整。例如，當網(wǎng)站隨著業(yè)務(wù)的發(fā)展，須要在頁面中增加一些內(nèi)容，那么不須要修改CSS樣式，只須要簡潔地在HTML中增加相應(yīng)的模塊就可以了。如下圖所示的就是對頁面擴展了內(nèi)容以后的效果，在“主要內(nèi)容”部分，增加了“特色促銷”和“優(yōu)中選優(yōu)”兩個模塊，再右側(cè)欄中增加了“送貨服務(wù)”和“熱門信息”兩個模塊，在前面的頁面基礎(chǔ)上，增加這些內(nèi)容之須要幾分鐘的時間就可以完成。不但如此，充分設(shè)計合理的頁面，可以特殊靈敏地修改樣式，例如，只須要將兩列布局的浮動方向交換，就可以立刻得到一個新