第1章商務(wù)網(wǎng)頁設(shè)計導(dǎo)引

1、商務(wù)網(wǎng)頁設(shè)計與制作商務(wù)網(wǎng)頁設(shè)計與制作商務(wù)網(wǎng)頁設(shè)計導(dǎo)引第一章了解網(wǎng)頁的基本構(gòu)成及主要元素了解常見的商務(wù)網(wǎng)站類型掌握客戶需求分析的途徑和方法能合理規(guī)劃設(shè)計網(wǎng)站欄目。學(xué)習(xí)目標 第一節(jié)第一節(jié) 商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述 第二節(jié)第二節(jié) 客戶需求分析客戶需求分析第三節(jié)第三節(jié) 網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃學(xué)習(xí)內(nèi)容 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃第一節(jié)第一節(jié) 商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站，是經(jīng)營性組織為實現(xiàn)其商業(yè)目標而建立的網(wǎng)站。準確表達和有效傳遞企業(yè)組織的商務(wù)訴求,是這類網(wǎng)站網(wǎng)頁設(shè)計時要考慮的重點和難點。 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃一、一、商務(wù)網(wǎng)站類型商務(wù)網(wǎng)

2、站類型依據(jù)商務(wù)訴求側(cè)重點的不同，可分為以下幾類： 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃企業(yè)網(wǎng)站行業(yè)網(wǎng)站網(wǎng)上商城資訊網(wǎng)站1、展示型企業(yè)網(wǎng)站、展示型企業(yè)網(wǎng)站 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃2、功能型企業(yè)網(wǎng)站、功能型企業(yè)網(wǎng)站 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃3、綜合型行業(yè)網(wǎng)站綜合型行業(yè)網(wǎng)站 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃4、垂直型行業(yè)網(wǎng)站垂直型行業(yè)網(wǎng)站 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃5、綜合型網(wǎng)上商城綜合型網(wǎng)上商城 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃6、垂直型網(wǎng)上商城垂

3、直型網(wǎng)上商城 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃7、品牌型網(wǎng)上商城品牌型網(wǎng)上商城 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃8、門戶類門戶類資訊資訊網(wǎng)站網(wǎng)站 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃9、垂直資訊類網(wǎng)站垂直資訊類網(wǎng)站 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃10、分類信息網(wǎng)站分類信息網(wǎng)站 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃二、二、網(wǎng)頁構(gòu)成網(wǎng)頁構(gòu)成1、網(wǎng)頁的空間結(jié)構(gòu)網(wǎng)頁的空間結(jié)構(gòu)（1）網(wǎng)站LOGO（2）網(wǎng)站名稱（3）導(dǎo)航條（4）Banner（5）網(wǎng)頁正文區(qū)（6）網(wǎng)頁底部 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客

4、戶需求分析網(wǎng)站欄目規(guī)劃2、網(wǎng)頁的邏輯結(jié)構(gòu)、網(wǎng)頁的邏輯結(jié)構(gòu)網(wǎng)頁的基礎(chǔ) 網(wǎng)頁的條理 網(wǎng)頁的顯示 網(wǎng)頁的互動 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃3、網(wǎng)頁組成元素、網(wǎng)頁組成元素文字文字圖片圖片動畫動畫背景音樂背景音樂視頻視頻表單表單腳本程序腳本程序 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃三、三、網(wǎng)頁網(wǎng)頁風(fēng)格風(fēng)格要點：要點： 網(wǎng)頁風(fēng)格就相當于網(wǎng)頁的外衣，是指網(wǎng)頁設(shè)計時使用的文字、顏色、布局等的組合搭配給人帶來的視覺印象。 商務(wù)網(wǎng)頁并不是純粹的藝術(shù)設(shè)計作品，應(yīng)圍繞準確表達商務(wù)訴求、能被大多數(shù)瀏覽者接受和理解來確定頁面風(fēng)格。 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站

5、欄目規(guī)劃 http:/ http:/ http:/ 大幅用圖，且畫面精美，顏色鮮艷，文字樣式及圖片排版活潑、優(yōu)美。 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃2、歐版風(fēng)格、歐版風(fēng)格特點：特點： 頁面內(nèi)容部分結(jié)構(gòu)比較清晰，板快分明，頁面顏色的使用主次分明，有較強的平面感。 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃3、中式風(fēng)格、中式風(fēng)格特點：特點： 氣勢磅礴、高貴典雅、獨具韻味，頁面具有平衡、和諧、莊重之美。 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃4、其它風(fēng)格（、其它風(fēng)格（1）Web2.0風(fēng)格風(fēng)格 ： 版塊之間劃分非常清晰，界限非常分明，頁面簡潔規(guī)整，以非

6、彩色搭配彩色為主。網(wǎng)頁的logo、banner、導(dǎo)航區(qū)界線分明。 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃4、其它風(fēng)格（、其它風(fēng)格（2）印刷體風(fēng)格印刷體風(fēng)格 ： 采用襯線字體、大標題、多列式布局、大幅配圖，頁面具有強烈的平面媒體效果。 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃4、其它風(fēng)格（、其它風(fēng)格（3）簡約風(fēng)格簡約風(fēng)格： 大量留白，僅保留最基本的內(nèi)容元素，從而讓展示出來的元素具有最大的視覺沖擊力 第一章商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃【討論】瀏覽長職院網(wǎng)站，說一說它的設(shè)計風(fēng)格是什么？技能訓(xùn)練1-1 訪問你所在地區(qū)一家知名企業(yè)的網(wǎng)站，分析網(wǎng)站首頁的空

7、間結(jié)構(gòu)，并將相應(yīng)的分析結(jié)論填入表1-1中。 第一節(jié)第一節(jié) 商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述 第二節(jié)第二節(jié) 客戶需求分析客戶需求分析第三節(jié)第三節(jié) 網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃學(xué)習(xí)內(nèi)容 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃【案例】： 近年來，瀏陽市委、市政府不斷為企業(yè)探索創(chuàng)新營銷方式。一方面著手建立全球化營銷網(wǎng)絡(luò)，推行整體營銷策略。目前已與世界100多個國家和地區(qū)建立了長期性的合作關(guān)系。另一方面以電子商務(wù)為主導(dǎo)，采用現(xiàn)代化信息手段實行網(wǎng)上直銷。此前所做電子商務(wù)就是把產(chǎn)品拍成數(shù)碼圖片，在商務(wù)網(wǎng)站發(fā)布供求信息和廣告?，F(xiàn)在越來越多的企業(yè)和個人在網(wǎng)上開店甚至直接建立供求信息網(wǎng)站。據(jù)某煙花網(wǎng)的總經(jīng)理透

8、露，自網(wǎng)站改版半年多的時間以來，已有2600多位英文會員、2300多位中文會員，他們在網(wǎng)上做生意、上網(wǎng)賣產(chǎn)品、上網(wǎng)買原材料、上網(wǎng)找客戶等等。【討論】 企業(yè)建立網(wǎng)站，如何設(shè)計適合的網(wǎng)頁？客戶導(dǎo)向客戶導(dǎo)向第二節(jié)第二節(jié) 客戶需求分析客戶需求分析客戶需求分析，即分析客戶建立網(wǎng)站想要解決的問題或要達到的目標，以及相關(guān)的條件和要求。作為網(wǎng)頁設(shè)計人員，在分析客戶的需求時，關(guān)鍵是要明確客戶要建立的網(wǎng)站類型，并了解客戶想要通過網(wǎng)站展示的信息。 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃一、行業(yè)背景分析一、行業(yè)背景分析 -PEST方法方法 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃-波特五

9、力模型分析波特五力模型分析 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃二、典型網(wǎng)頁分析二、典型網(wǎng)頁分析 1、典型網(wǎng)頁的選擇、典型網(wǎng)頁的選擇 什么樣的網(wǎng)頁是我們設(shè)計時可以參照的網(wǎng)頁？參考標準：用戶體驗度（競爭對手）（競爭對手） 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃用評價驗度分析用評價驗度分析 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃2、網(wǎng)頁表現(xiàn)形式分析、網(wǎng)頁表現(xiàn)形式分析 客戶所在企業(yè)與競爭對手在目標受眾群體、產(chǎn)品或服務(wù)特性、業(yè)務(wù)模式等方面存在著一定的相似性，甚至一致性。其典型競爭對手網(wǎng)頁的風(fēng)格是設(shè)計師可以認真考察和借鑒的對象。 重點分析考察兩個方面：網(wǎng)

10、頁配色網(wǎng)頁布局 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃3、網(wǎng)站內(nèi)容分析、網(wǎng)站內(nèi)容分析 典型的競爭對手網(wǎng)站，可以說就是客戶想要建立的網(wǎng)站內(nèi)容結(jié)構(gòu)的藍本。通過分析其內(nèi)容結(jié)構(gòu)及頁面內(nèi)容組織，可以為與客戶進行進一步溝通、明確需求、給出資料搜集清單等工作給出明確的線索。 重點分析考察兩個方面：網(wǎng)站內(nèi)容結(jié)構(gòu)網(wǎng)頁內(nèi)容組織 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃 網(wǎng)站內(nèi)容結(jié)構(gòu)是指網(wǎng)站頻道、欄目、子欄目、專題等組成結(jié)構(gòu)。 中小型商務(wù)網(wǎng)站往往去掉頻道的概念，統(tǒng)稱為欄目結(jié)構(gòu)。 網(wǎng)站內(nèi)容結(jié)構(gòu)網(wǎng)站欄目結(jié)構(gòu)網(wǎng)站欄目結(jié)構(gòu) 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃 網(wǎng)頁的內(nèi)容組織

11、是指對網(wǎng)頁需要呈現(xiàn)的內(nèi)容進行信息序化和優(yōu)化，最終確定在合適的位置放置合適的內(nèi)容，準確地向瀏覽者傳遞要表達的商務(wù)訴求。網(wǎng)頁內(nèi)容組織三、三、網(wǎng)頁原型分析網(wǎng)頁原型分析 第一章商務(wù)網(wǎng)站概述客戶需求分析客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)頁原型是網(wǎng)頁設(shè)計最終作品的模擬圖，可以有以下形式： 使用筆和紙直接繪制簡單的示意藍圖 在word、Excel中創(chuàng)建簡單的框架圖 基于競爭對手網(wǎng)頁制作的網(wǎng)頁原型 使用專業(yè)工具制作的網(wǎng)頁原型 通過網(wǎng)頁原型，重點要與客戶進行深入的探討幾個問題： 1、網(wǎng)站建設(shè)的目的、網(wǎng)站建設(shè)的目的 ？2、網(wǎng)站服務(wù)對象？、網(wǎng)站服務(wù)對象？ 3、網(wǎng)站產(chǎn)品和服務(wù)定位？、網(wǎng)站產(chǎn)品和服務(wù)定位？ 技能訓(xùn)練1-2 一網(wǎng)

12、全城一網(wǎng)全城作為東北三省首家區(qū)域性電子商務(wù)平臺，集線上交易、線下物流配送、電商綜合服務(wù)為一體的電子商務(wù)平臺。http:/ 仔細瀏覽和分析其首頁欄目內(nèi)容，對其主要功能進行在線訪問，給出體驗度分析總結(jié)。 第一節(jié)第一節(jié) 商務(wù)網(wǎng)站概述商務(wù)網(wǎng)站概述 第二節(jié)第二節(jié) 客戶需求分析客戶需求分析第三節(jié)第三節(jié) 網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃學(xué)習(xí)內(nèi)容 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃第三節(jié)第三節(jié) 網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃網(wǎng)站欄目的規(guī)劃，其實也是對網(wǎng)站內(nèi)容的高度提煉。在明確了網(wǎng)站的商務(wù)訴求后，要對網(wǎng)站的定位形成一個清晰的認識，在此基礎(chǔ)上，對網(wǎng)站的內(nèi)容進行分類，用最簡練的語言提煉出網(wǎng)站每一個部分內(nèi)容，以

13、形成清晰的欄目結(jié)構(gòu)。 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃示例：示例： 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃一級欄目一級欄目二級欄目二級欄目內(nèi)內(nèi) 容容公司概況公司概況公司介紹公司介紹介紹企業(yè)的一些基本情況、公司的歷史等信息。組織機構(gòu)組織機構(gòu)公司組織機構(gòu)拓撲圖領(lǐng)導(dǎo)致辭領(lǐng)導(dǎo)致辭公司的證書發(fā)展規(guī)劃發(fā)展規(guī)劃領(lǐng)導(dǎo)致辭及領(lǐng)導(dǎo)照片公司發(fā)展目標及發(fā)展計劃企業(yè)文化企業(yè)文化企業(yè)理念及員工風(fēng)采等新聞中心新聞中心公司要聞公司要聞公司最新動態(tài)、活動行業(yè)信息行業(yè)信息行業(yè)相關(guān)資訊產(chǎn)品展示產(chǎn)品展示主營產(chǎn)品主營產(chǎn)品與其它競爭對手相比，最具競爭力的產(chǎn)品最新產(chǎn)品最新產(chǎn)品公司最新開發(fā)研制的產(chǎn)品產(chǎn)品

14、系列產(chǎn)品系列完整的產(chǎn)品系列展示客服中心客服中心常見問答常見問答用戶常見的各類問題在線問答售后服務(wù)售后服務(wù)各地營銷中心及售后服務(wù)中心聯(lián)系方式下載中心下載中心支持word、excel、pdf、zip等產(chǎn)品說明或相關(guān)文件下載人才招聘人才招聘人才戰(zhàn)略人才戰(zhàn)略公司的人才戰(zhàn)略，人才發(fā)展計劃等內(nèi)容的發(fā)布招聘職位招聘職位具體的招聘信息，能以表格形式在線填寫并提交應(yīng)聘信息聯(lián)系我們聯(lián)系我們聯(lián)系方式聯(lián)系方式公司聯(lián)系電話和聯(lián)系地址介紹一、一、欄目設(shè)置的基本原則欄目設(shè)置的基本原則 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃原則一：簡潔明了、層次清晰原則一：簡潔明了、層次清晰原則二：突出重點、合理定位原則二：

15、突出重點、合理定位原則三：以客為尊、方便瀏覽原則三：以客為尊、方便瀏覽一、一、欄目設(shè)置的基本原則欄目設(shè)置的基本原則 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃1、突出網(wǎng)站主題、突出網(wǎng)站主題 2、開門見義、開門見義3、層次分明、層次分明 4、設(shè)置互動交流類欄目、設(shè)置互動交流類欄目 5、提供下載類欄目、提供下載類欄目策劃要點：策劃要點：二、網(wǎng)站欄目的策劃二、網(wǎng)站欄目的策劃 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃 網(wǎng)站欄目的策劃，首先要考慮網(wǎng)站的定位、網(wǎng)站的方向是什么。當確定了一個方向后，就可以圍繞這個方向去搜集相關(guān)資料、尋找相關(guān)文章，并整理為相應(yīng)的欄目。 在確定網(wǎng)站欄目

16、結(jié)構(gòu)時，既要考慮網(wǎng)站欄目的層次結(jié)構(gòu)，還應(yīng)設(shè)計好網(wǎng)站欄目的鏈接結(jié)構(gòu)。1、網(wǎng)站內(nèi)容定位、網(wǎng)站內(nèi)容定位 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃 網(wǎng)站內(nèi)容定位，要考慮清楚的三個問題：網(wǎng)站最重要的信息是什么？哪些信息可以提升瀏覽者的信任度？目標受眾群體可能還想了解的信息有哪些？ 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃強調(diào)理性訴求的網(wǎng)站，以事實為依據(jù)，以產(chǎn)品或技術(shù)為核心，強化產(chǎn)品或技術(shù)內(nèi)容的視覺沖擊力和吸引力，網(wǎng)站欄目的設(shè)置也以此線索組織。 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃強調(diào)感性訴求的網(wǎng)站，大多以服務(wù)為導(dǎo)向、以樹立企業(yè)形象為主。這一類型的網(wǎng)站，一定要注重網(wǎng)站的風(fēng)格設(shè)計和創(chuàng)意，以感性訴求為主。網(wǎng)站欄目的設(shè)置要著意渲染或營造一種特有的企業(yè)文化或團隊氛圍，來突出產(chǎn)品或服務(wù)的價值感。2、網(wǎng)站欄目結(jié)構(gòu)、網(wǎng)站欄目結(jié)構(gòu) 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃三級欄目層次結(jié)構(gòu) ：2、網(wǎng)站欄目結(jié)構(gòu)、網(wǎng)站欄目結(jié)構(gòu) 第一章商務(wù)網(wǎng)站概述客戶需求分析網(wǎng)站欄目規(guī)劃網(wǎng)站欄目規(guī)劃樹形鏈接結(jié)構(gòu)樹形鏈接結(jié)構(gòu)2、網(wǎng)站欄目結(jié)構(gòu)、網(wǎng)站欄目結(jié)構(gòu) 第一章商務(wù)網(wǎng)站