遵循Web標準的網頁設計工作流程

2021-08-23 13:21:19 字數 3063 閱讀 5527

經常有讀者來信詢問在實際開發乙個**的時候,具體是按照什麼工作流程進行工作的,乙個**到底是如何從零開始一點點做出來的呢?

今天我們來就這個問題作一些說明。我們今天介紹的是關於從零開始設計乙個頁面的過程,我們可以把乙個頁面的完整設計過程分為7個步驟,如下圖所示。

在圖中,這個過程分為了7個步驟,並且說明了這7個步驟相應使用的工具。這7個步驟依次為:

1. 內容分析:仔細研究需要在網頁中的展現的內容,梳理其中的邏輯關係,分清層次,以及重要程度。

2. 結構設計:根據內容分析的成果,搭建出合理的html結構,保證在沒有任何css樣式的情況下,在瀏覽器保持高可讀性。

3. 原型設計:根據網頁的結構,繪製出原型線框圖,對頁面進行合理的分割槽的布局,原型線框圖是設計負責人與客戶交流的最佳媒介。

4. 方案設計:在確定的原型線框圖基礎上,使用美工軟體,設計出具有良好視覺效果的頁面設計方法。

5. 布局設計:使用html和css對頁面進行布局。

6. 視覺設計:使用css並配合美工設計元素,完成由設計方法到網頁的轉化。

7. 互動設計:為網頁增添互動效果,如滑鼠指標經過時的一些特效等。

下面具體解說一下,例如要設計出乙個如下圖所示的頁面。這是為乙個假想的名為「baby housing」的兒童用品網上商店製作的乙個**首頁。

今天開始來看一看具體是如何進行的。

第1步要先想清楚這個**的內容是什麼?通過乙個網頁要傳達給訪問者什麼資訊?這些資訊中哪些是最重要的?哪些是相對比較重要的?以及哪些是次要的。這些資訊應該如何組織呢? 我們可以參考一些網上商店的**,比如下圖所示的是卓越沿馬遜網上商店的首頁,讀者在研究一些成功**的時候,不要僅僅關注這些**的設計風格和技術細節,更要從更深的角度觀察它們,這樣才能更好地掌握核心的東西。例如從圖中可以看到,這個頁面儘管內容非常多,但簡單來說,就分為兩大類——「分類鏈結」和「推薦商品鏈結」。

在理解了**的基礎上,我們開始構建**的內容結構。現在完全不要管css,而是完全從網頁的內容出發,根據上面列出的要點,通過html搭建出網頁的內容結構。

如下圖所示的是搭建的html在沒有使用任何css設定的情況下,使用瀏覽器觀察的效果。在圖中,左側使用線條表示了各個專案的構成。實際上圖中顯示的就是前面的圖在不使用任何css樣式時的表現。

在設計任何乙個網頁之前,都應該先有乙個構思的過程,對**的完整功能和內容作乙個全面的分析。如果有條件,應該製作出線框圖,這個過程專業上稱為「原型設計」,例如,在具體製作頁面之前,我們就可以先設計乙個如下圖所示的網頁原型線框圖

網頁原型設計也是分步驟實現的,先把乙個頁面分為若干個大部分,然後分別逐步細化。

如果是為客戶設計的網頁,那麼使用原型線框圖與客戶交流溝通是最合適的方式,既可以清晰地表明設計思路,又不用花費大量的繪製時間,因為原型設計階段,往往要經過反覆修改,如果每次都使用完成以後的設計圖交流,則反覆修改需要大量的時間和工作量,而且在設計的開始階段,往往交流溝通的中心並不是涉及的細節,而是功能、結構等策略性的問題,因此使用這種線框圖示非常合適的。

這裡向讀者推薦一種繪製圓形線框圖非常方便的軟體——「axure rp」,這個軟體是專門用來作原型設計的,而且可以方便地設計動態過程的原型,讀者有興趣可以實踐一下。這個軟體的**是:這個軟體目前沒有中文版。

如果沒有axure rp這樣的軟體,普通的繪圖軟體,例如微軟公司的visio,adobe公司的fireworks、甚至photoshop等軟體,都可以勝任。

在與客戶討論,確定了原型以後,可以進行實際的頁面方案設計了,這一步通常使用photoshop或者fireworks等軟體完成。如下圖所示的是在fireworks中的效果。

進行下一步工作。

下面應該進行的步驟是頁面布局這一步驟,任務是把各種元素放到適當的位置,暫時不用涉及非常細節的因素。

具體來說,首先應該對頁面的整體進行一些設定,把個各種瀏覽器中預設值不同的元素屬性都設定為統一的值等等,以保證這些內容在各個瀏覽器中有相同表現。

接下來就依次對網頁的各個部分進行布局設定,入頁頭、中間部分、頁尾等等,此時的主要任務是把位置定好,例如下圖中,可以看到,網頁中間的內容已經實現了兩列布局的效果,而具體的樣式細節還沒有設定。

在各個部分布局完成以後,就開始對每個部分依次設定視覺細節效果,例如在頁面的頁頭部分,就可以如圖下所示地在fireworks中進行切片,把需要的影象切出來。

在例如,在網頁右側的圓角框,也是在這一步中實現的,如下圖所示。

此外還有很多細節都需要仔細設定,例如圓角框中的目錄列表、搜尋表單等等,這些設定就都是只涉及區域性的樣式了。從圖中可以看到,到這裡已經接近勝利了。

進行下一步工作,也是這個系列的最後一次內容了。

接下來我們進行一些互動性的動態設計,這裡主要是為網頁元素增加滑鼠經過時的效果。如下圖所示,在滑鼠指標經過主導航欄和次導航欄的時候,相應的選單項會發生變化,滑鼠經過「登入帳號」或者「購物車」影象時,顏色也會變淺,這都是為了提示使用者所進行的選擇。此外,當滑鼠經過影象時,影象周圍的邊框也會發變化。

到這裡,這個頁面的靜態設計就算完成了,接下來還需要進行相應程式的開發,無論是由程式設計師進行開發,還是使用cms系統,都應該相關的開發人員來繼續工作了,設計師的工作到這裡基本就結束了。

希望讀者可以通過5天來的講解,對網頁設計從無到有,從策劃構思到設計實施,有乙個比較完整的概念了!

最後,談一談使用這種方法設計出來頁面具有哪些優點。做到這裡,讀者可能還沒有完全意識到使用這種css進行布局的優點。這種布局方式的最大優點是非常靈活,可以方便地擴充套件和調整。例如,當**隨著業務的發展,需要在頁面中增加一些內容,那麼不需要修改css樣式,只需要簡單地在html中增加相應的模組就可以了。

如下圖所示的就是對頁面擴充套件了內容以後的效果,在「主要內容」部分,增加了「特色**」和「優中選優」兩個模組,再右側欄中增加了「送貨服務」和「熱門資訊」兩個模組,在前面的頁面基礎上,增加這些內容之需要幾分鐘的時間就可以完成。

不但如此,充分設計合理的頁面,可以非常靈活地修改樣式,例如,只需要將兩列布局的浮動方向交換,就可以立即得到乙個新的頁面,如下圖所示,可以看到,左右兩列交換了位置。

試想如果沒有從一開始就有良好的結構設計,那麼稍微修改一下內容都是非常複雜的事情。如果讀者曾經使用**進行頁面布局,就會發現這裡列出的優點了,對於**布局的網頁,這些都是不可想象的。

好了,5天的講解到這這裡就全部完成了,希望通過以上的介紹,能夠給讀者在設計思路上有一些幫助!

如何設計工作流引擎?

設計工作流就象設計一部汽車 設計乙個好的工作流引擎,就象設計一部汽車,它必須有發動機,提供動力,輪子提供行走,燈提供照明,喇叭提供提示。剎車提供停止,倒擋提供後退出。車門提供鑰匙進入系統,也可以說是安全驗證,導航器提供方向。現在試想一下,我們拿著鑰匙 使用者名稱與密碼 進入汽車 工作流引擎前台操作 ...

WF4 0 2 設計工作流

自從做了程式設計師,發現自己長胖了,而且自己的身體抵抗力也出了問題,最近身體不適,公司工作任務最近也很趕,上次寫了wf4.0的簡介,這次就工作中工作流設計的幾種方式稍微總結一下。設計工作流包括四種方式 流程圖工作流,程式工作流,狀態機工作流,自定義命令性 建立工作流.工作流設計中最常用的就是flow...

WF4 0 2 設計工作流

自從做了程式設計師,發現自己長胖了,而且自己的身體抵抗力也出了問題,最近身體不適,公司工作任務最近也很趕,上次寫了wf4.0的簡介,這次就工作中工作流設計的幾種方式稍微總結一下。設計工作流包括四種方式 流程圖工作流,程式工作流,狀態機工作流,自定義命令性 建立工作流.工作流設計中最常用的就是flow...