1、網頁設計的原則網頁設計的原則v會明確網站主題會明確網站主題v會分析行業資料會分析行業資料v會確定網站的用戶目標群會確定網站的用戶目標群v會使用會使用5 5種達到種達到“設計設計”的方法的方法 建設網站的流程建設網站的流程通通過過未未通通過過通通過過 業務接洽業務接洽 項目簽單項目簽單繼續開發繼續開發網站整合網站整合網站測試網站測試網站發布網站發布提交方案提交方案開發和設計開發和設計寫網站策劃書寫網站策劃書溝通溝通參與人：業務員、項目經理、參與人：業務員、項目經理、程序員、策劃人員、網頁設程序員、策劃人員、網頁設計師計師參與人：業務員、客戶參與人：業務員、客戶明確網站主題、目標用戶群、目的、明確

2、網站主題、目標用戶群、目的、設計風格、布局等；采用的架構、設計風格、布局等；采用的架構、開發語言（開發語言（ASP/JSP/JAVA/等等)、數據庫（數據庫（SQL/MY SQL/Oracle)等。等。網站架構：架構師網站架構：架構師功能開發：開發工程師（程序員）功能開發：開發工程師（程序員）設計參與人：網頁設計師設計參與人：網頁設計師所用軟件：所用軟件：PS/FW參與人：策劃人員（主）、參與人：策劃人員（主）、項目經理、開發工程師（輔）、項目經理、開發工程師（輔）、網頁設計師（輔）網頁設計師（輔）開發參與人：開發工程師、開發參與人：開發工程師、架構師、項目經理架構師、項目經理設計參與人：網頁

3、設計師、設計參與人：網頁設計師、業務員、客戶業務員、客戶開發參與人：架構師、開發工程師開發參與人：架構師、開發工程師設計參與人：網站制作人員設計參與人：網站制作人員所用軟件：所用軟件：DW/FL/ PS/FW參與人：開發工程師、制作人員參與人：開發工程師、制作人員參與人：測試工程師參與人：測試工程師參與人：項目經理參與人：項目經理未未通通過過v網頁設計的原則網頁設計的原則n統一、連貫、分割、對比、和諧。統一、連貫、分割、對比、和諧。n在原則指引下，建站前要做準備工作在原則指引下，建站前要做準備工作。創作前的準備工作創作前的準備工作 與客戶有效的溝通與客戶有效的溝通分析行業資料分析行業資料尋訪相

4、關網站尋訪相關網站匯總目標用戶群的特征匯總目標用戶群的特征新網站的優勢和特色新網站的優勢和特色網站導航（信息方面）網站導航（信息方面）形象口號（文化方面）形象口號（文化方面）構思進行創作構思進行創作確定主題（創作前的準備工作）確定主題（創作前的準備工作）v案例分析案例分析n通過通過4 4點對網站進行對比：點對網站進行對比：產品產品結構和功能結構和功能消費人群消費人群設計風格設計風格v涉及的知識點：涉及的知識點：n如何明確網站主題如何明確網站主題 網站對比網站對比v首先，對比兩個網站首先，對比兩個網站 箱包批發網箱包批發網LVLV網網v操作步驟分析：操作步驟分析：n第一步：兩個網站的產品分析第一

5、步：兩個網站的產品分析 箱包批發網：品種多、齊全。綜箱包批發網：品種多、齊全。綜合的大型電子商務網站。合的大型電子商務網站。LVLV網：專營自身品牌產品的電子商務網站。網：專營自身品牌產品的電子商務網站。箱包批發網：產品以裝飾品名稱分類，左側按各箱包批發網：產品以裝飾品名稱分類，左側按各個產品的品牌分類。個產品的品牌分類。n第二步：網站功能和結構分析第二步：網站功能和結構分析LVLV網：采用網：采用FlashFlash特特效，精致效，精致而多變。而多變。右邊多國右邊多國語言選擇，語言選擇，使用方便。使用方便。n第三步：兩個網站的商品針對的消費人群分析第三步：兩個網站的商品針對的消費人群分析l中

6、低檔消費人群。中低檔消費人群。n第四步：兩個網站的設計風格分析第四步：兩個網站的設計風格分析l傳統風格傳統風格 FlashFlash多媒體多媒體高端消費人群高端消費人群v目標用戶群不同和網站產品不同，目標用戶群不同和網站產品不同，設計風格也隨之不同。設計風格也隨之不同。v講解：理論知識（如何明確網站主題）講解：理論知識（如何明確網站主題）n對于題材選擇的建議對于題材選擇的建議主題要小而精主題要小而精目標不要太濫或太高目標不要太濫或太高n網頁形式是為突出主題服務的網頁形式是為突出主題服務的交換箱包批發網和交換箱包批發網和LVLV網的設計形式是不可取的。網的設計形式是不可取的。v講解：理論知識（如

7、何分析行業資料）講解：理論知識（如何分析行業資料）n行業資料分析包括：行業資料分析包括： 宣傳冊：公司對外宣傳的載體，宣傳冊：公司對外宣傳的載體，VIVI的一部分。的一部分。宣傳冊展示宣傳冊展示 電視廣告電視廣告VI設計設計行業背景行業背景 n行業資料分析是設計進行前的重要步驟。行業資料分析是設計進行前的重要步驟。 n行業知識積累不夠，在網站分析時，就只能行業知識積累不夠，在網站分析時，就只能看見表面，流于形式。看見表面，流于形式。 洗發水廣告洗發水廣告 手機廣告手機廣告 電腦廣告電腦廣告 廚房用品廣告廚房用品廣告VI設計設計uVI含義：視覺識別（含義：視覺識別（Visual Identity

8、）: : 以標志、標準字、標準色為核心展開的完整的、系統以標志、標準字、標準色為核心展開的完整的、系統的視覺表達體系。將企業理念、企業文化、服務內容、的視覺表達體系。將企業理念、企業文化、服務內容、企業規范等抽象概念轉換為具體符號，塑造出獨特的企業規范等抽象概念轉換為具體符號，塑造出獨特的企業形象。企業形象。uVI內容：基本要素系統和應用系統內容：基本要素系統和應用系統 VI設計設計v通過上面的案例了解網頁設計的主題，主題的不通過上面的案例了解網頁設計的主題，主題的不同導致網頁的設計風格不同。同導致網頁的設計風格不同。1 1）沒有確定網站主題的作品容易出現什么問題？沒有確定網站主題的作品容易出

9、現什么問題？2 2）是不是明確了網站主題就能做好網頁呢？）是不是明確了網站主題就能做好網頁呢？答案是否定的。下面通過實例給大家講解目標用戶群。答案是否定的。下面通過實例給大家講解目標用戶群。v案例分析案例分析n目標用戶群的不同，導航和頁面設計不同。目標用戶群的不同，導航和頁面設計不同。v涉及的知識點：涉及的知識點：n3 3個網站的目標用戶群個網站的目標用戶群網站對比網站對比 v講解：目標用戶群講解：目標用戶群n百業人才網導航按照不同行業分類，百業人才網導航按照不同行業分類，8 8類不同類不同目標用戶群；頁面綠色清新、淡雅；布局功能目標用戶群；頁面綠色清新、淡雅；布局功能模塊明確。模塊明確。分類

10、分類有針對有針對“營銷營銷”人員的，有針對人員的，有針對“五金五金”行業的行業的n中華英才網導航按照內容、用戶經驗值不同的中華英才網導航按照內容、用戶經驗值不同的目標用戶群分類；頁面以藍色為主；頁面重點目標用戶群分類；頁面以藍色為主；頁面重點突出導航中的重點內容。突出導航中的重點內容。按經驗值不同的目標用戶群分類。按經驗值不同的目標用戶群分類。比如：比如：“獵頭服務獵頭服務”是針對較大發展的人。是針對較大發展的人。 “校園招聘校園招聘”是針對畢業學生是針對畢業學生n智聯招聘網導航按照用戶不同身份分類，智聯招聘網導航按照用戶不同身份分類， 同時按照行業分類，針對多種目標用戶群；頁面以同時按照行業

11、分類，針對多種目標用戶群；頁面以藍色為主；布局根據網站側重點不同來分配內容。藍色為主；布局根據網站側重點不同來分配內容。經驗值分類經驗值分類行業分類行業分類v講解：理論知識講解：理論知識( (目標用戶群目標用戶群) )n目標用戶群的概念目標用戶群的概念是指接收并理解網站建設方通過網絡媒是指接收并理解網站建設方通過網絡媒介傳遞的信息個體。介傳遞的信息個體。 n一般網站中目標用戶群分析一般網站中目標用戶群分析門戶類網站：目標用戶群多門戶類網站：目標用戶群多專題類網站：目標用戶群單一、個性專題類網站：目標用戶群單一、個性旅游類網站：年輕、時尚一族旅游類網站：年輕、時尚一族平臺式網站：信息豐富，目標用

12、戶群多平臺式網站：信息豐富，目標用戶群多娛樂類網站：活潑的年輕人娛樂類網站：活潑的年輕人v達到達到“設計設計”目的目的5 5種方法種方法n書寫策劃書書寫策劃書n設計的設計的“4 4”種切入點種切入點n網頁內容安排技巧網頁內容安排技巧n廣告的廣告的“口號口號”n網站可信度網站可信度n網站策劃書的內容：網站策劃書的內容：背景介紹背景介紹市場分析市場分析建設目的及網站定位建設目的及網站定位技術解決方案技術解決方案內容規劃內容規劃頁面設計頁面設計流程及人工流程及人工網站維護網站維護發布與推廣發布與推廣n廣告的廣告的“口號口號”VI不能代替口號不能代替口號u口號出現在口號出現在BannerBanner里里u口號出現在口號出現在TitleTitle里里u口號出現在插畫里口號出現在插畫里選擇口號時需注意：選擇口號時需注意：u好的口號要清楚、有真實的東西。好的口號要清楚、有真實的東西。u不好的口號含混不清。不好的口號含混不清。u好的口號長度適中。好的口號長度適中。u不好的口號太籠統。不好的口號太籠統。u好的口號應該有個性、生動，有時候還很俏皮。好的