遵循web標準的網頁設計工作流程(一)
經常有讀者來信詢問在實際開發乙個**的時候，具體是按照什麼工作流程進行工作的，乙個**到底是如何從零開始一點點做出來的呢?
今天我們來就這個問題作一些說明。我們今天介紹的是關於從零開始設計乙個頁面的過程，我們可以把乙個頁面的完整設計過程分為7個步驟，如下圖所示。
在圖中，這個過程分為了7個步驟，並且說明了這7個步驟相應使用的工具。這7個步驟依次為：
1. 內容分析：仔細研究需要在網頁中的展現的內容，梳理其中的邏輯關係，分清層次，以及重要程度。
2. 結構設計：根據內容分析的成果，搭建出合理的html結構，保證在沒有任何css樣式的情況下，在瀏覽器保持高可讀性。
3. 原型設計：根據網頁的結構，繪製出原型線框圖，對頁面進行合理的分割槽的布局，原型線框圖是設計負責人與客戶交流的最佳媒介。
4. 方案設計：在確定的原型線框圖基礎上，使用美工軟體，設計出具有良好視覺效果的頁面設計方法。
5. 布局設計：使用html和css對頁面進行布局。
6. 視覺設計：使用css並配合美工設計元素，完成由設計方法到網頁的轉化。
7. 互動設計：為網頁增添互動效果，如滑鼠指標經過時的一些特效等。
下面具體解說一下，例如要設計出乙個如下圖所示的頁面。這是為乙個假想的名為「baby housing」的兒童用品網上商店製作的乙個**首頁。
遵循web標準的網頁設計工作流程(二)
昨天介紹了網頁設計的工作流程概述，今天開始來看一看具體是如何進行的。
第1步要先想清楚這個**的內容是什麼？通過乙個網頁要傳達給訪問者什麼資訊？這些資訊中哪些是最重要的？
哪些是相對比較重要的？以及哪些是次要的。這些資訊應該如何組織呢？
我們可以參考一些網上商店的**，比如下圖所示的是卓越沿馬遜網上商店的首頁，讀者在研究一些成功**的時候，不要僅僅關注這些**的設計風格和技術細節，更要從更深的角度觀察它們，這樣才能更好地掌握核心的東西。例如從圖中可以看到，這個頁面儘管內容非常多，但簡單來說，就分為兩大類——「分類鏈結」和「推薦商品鏈結」。
這樣回到我們自己的**，比如說，可以確定出需要在首頁展示如下一些資訊：
**標題
**標誌
主導航欄
自身介紹和使用者幫助的鏈結
賬號登入與購物車
今日推薦商品（1種）
最受歡迎商品（1種）
分類推薦商品（3種）
搜尋框類別選單
特別提示資訊
版權資訊
在理解了**的基礎上，我們開始構建**的內容結構。現在完全不要管css，而是完全從網頁的內容出發，根據上面列出的要點，通過html搭建出網頁的內容結構。
如下圖所示的是搭建的html在沒有使用任何css設定的情況下，使用瀏覽器觀察的效果。在圖中，左側使用線條表示了各個專案的構成。實際上圖中顯示的就是前面的圖在不使用任何css樣式時的表現。
提示讀者一點，任何乙個頁面，應該進可能保證在不使用css的情況下，依然保持良好結構和可讀性。這不僅僅對訪問者很有幫助，而且可以有助於你的**被google、百度這樣的搜尋引擎了解和收錄，這樣對於**提公升訪問量可是至關重要的。
遵循web標準的網頁設計工作流程(三)
昨天介紹了搭建網頁的html結構，今天進行下一步工作。
在設計任何乙個網頁之前，都應該先有乙個構思的過程，對**的完整功能和內容作乙個全面的分析。如果有條件，應該製作出線框圖，這個過程專業上稱為「原型設計」，例如，在具體製作頁面之前，我們就可以先設計乙個如下圖所示的網頁原型線框圖。
網頁原型設計也是分步驟實現的，先把乙個頁面分為若干個大部分，然後分別逐步細化。
如果是為客戶設計的網頁，那麼使用原型線框圖與客戶交流溝通是最合適的方式，既可以清晰地表明設計思路，又不用花費大量的繪製時間，因為原型設計階段，往往要經過反覆修改，如果每次都使用完成以後的設計圖交流，則反覆修改需要大量的時間和工作量，而且在設計的開始階段，往往交流溝通的中心並不是涉及的細節，而是功能、結構等策略性的問題，因此使用這種線框圖示非常合適的。
這裡向讀者推薦一種繪製圓形線框圖非常方便的軟體——「axure rp」，這個軟體是專門用來作原型設計的，而且可以方便地設計動態過程的原型，讀者有興趣可以實踐一下。這個軟體的**是：這個軟體目前沒有中文版。
如果沒有axure rp這樣的軟體，普通的繪圖軟體，例如微軟公司的visio，adobe公司的fireworks、甚至photoshop等軟體，都可以勝任。
在與客戶討論，確定了原型以後，可以進行實際的頁面方案設計了，這一步通常使用photoshop或者fireworks等軟體完成。如下圖所示的是在fireworks中的效果。
遵循web標準的網頁設計工作流程(四)
昨天介紹了原型原型設計和網頁方案設計這兩個步驟，今天進行下一步工作。
下面應該進行的步驟是頁面布局這一步驟，任務是把各種元素放到適當的位置，暫時不用涉及非常細節的因素。
具體來說，首先應該對頁面的整體進行一些設定，把個各種瀏覽器中預設值不同的元素屬性都設定為統一的值等等，以保證這些內容在各個瀏覽器中有相同表現。
接下來就依次對網頁的各個部分進行布局設定，入頁頭、中間部分、頁尾等等，此時的主要任務是把位置定好，例如下圖中，可以看到，網頁中間的內容已經實現了兩列布局的效果，而具體的樣式細節還沒有設定。
在各個部分布局完成以後，就開始對每個部分依次設定視覺細節效果，例如在頁面的頁頭部分，就可以如圖下所示地在fireworks中進行切片，把需要的影象切出來。
在例如，在網頁右側的圓角框，也是在這一步中實現的，如下圖所示。
此外還有很多細節都需要仔細設定，例如圓角框中的目錄列表、搜尋表單等等，這些設定就都是只涉及區域性的樣式了。從圖中可以看到，到這裡已經接近勝利了。
遵循web標準的網頁設計工作流程(五)
昨天介紹了布局設計和視覺細節設計這兩個步驟，今天進行下一步工作，也是這個系列的最後一次內容了。
接下來我們進行一些互動性的動態設計，這裡主要是為網頁元素增加滑鼠經過時的效果。如下圖所示，在滑鼠指標經過主導航欄和次導航欄的時候，相應的選單項會發生變化，滑鼠經過「登入帳號」或者「購物車」影象時，顏色也會變淺，這都是為了提示使用者所進行的選擇。此外，當滑鼠經過影象時，影象周圍的邊框也會發變化。
到這裡，這個頁面的靜態設計就算完成了，接下來還需要進行相應程式的開發，無論是由程式設計師進行開發，還是使用cms系統，都應該相關的開發人員來繼續工作了，設計師的工作到這裡基本就結束了。
希望讀者可以通過5天來的講解，對網頁設計從無到有，從策劃構思到設計實施，有乙個比較完整的概念了！
最後，談一談使用這種方法設計出來頁面具有哪些優點。做到這裡，讀者可能還沒有完全意識到使用這種css進行布局的優點。這種布局方式的最大優點是非常靈活，可以方便地擴充套件和調整。
例如，當**隨著業務的發展，需要在頁面中增加一些內容，那麼不需要修改css樣式，只需要簡單地在html中增加相應的模組就可以了。
如下圖所示的就是對頁面擴充套件了內容以後的效果，在「主要內容」部分，增加了「特色**」和「優中選優」兩個模組，再右側欄中增加了「送貨服務」和「熱門資訊」兩個模組，在前面的頁面基礎上，增加這些內容之需要幾分鐘的時間就可以完成。
不但如此，充分設計合理的頁面，可以非常靈活地修改樣式，例如，只需要將兩列布局的浮動方向交換，就可以立即得到乙個新的頁面，如下圖所示，可以看到，左右兩列交換了位置。
試想如果沒有從一開始就有良好的結構設計，那麼稍微修改一下內容都是非常複雜的事情。如果讀者曾經使用**進行頁面布局，就會發現這裡列出的優點了，對於**布局的網頁，這些都是不可想象的。
好了，5天的講解到這這裡就全部完成了，希望通過以上的介紹，能夠給讀者在設計思路上有一些幫助！
幕牆設計工作流程
工作程式 1 工作程式 1.1 設計準備設計部提前介入工程，熟悉土建圖紙及招 投標檔案。1.2技術交底技術方案 工程合同交底會後，設計工作開始進行。1.3 設計輸入設計輸入條件包括 合同及合同附件 招標檔案 中標方 案 中標 單 土建圖紙 成本單等 注 此程式介面部門是銷售部和技術部 1.4設計計畫...
2019設計工作流程
公司主要經營範圍 經營系列 產品包裝 目錄 訂單等設計製作印刷，各產品的形式及風格多樣。商務系列 卡片 票 便簽 信封 信紙等產品設計製作，具有新穎的創意 獨特的風格。宣傳系列 樣本，宣傳單，單，說明書，招貼畫，不幹膠,商標,服裝吊牌,檯曆掛曆月曆等各類設計製作。宣傳單的特種工藝 燙金 起凸 壓痕 ...
平面設計工作流程
平面設計 崗位職責 1 負責公司旗下品牌 f k 500club 福客會等 平面宣傳品設計 2 負責公司旗下品牌新專案包裝設計 3 負責公司 處理 4 負責公司活動各類宣傳品設計 5 負責公司加盟店標準門頭效果圖製作及製作檔案製作 6 完成上級安排的其他工作。平面設計操作流程說明 1 接到設計任務 ...