《商務(wù)網(wǎng)頁設(shè)計》

1、學(xué)習(xí)方案單元名稱第一章網(wǎng)頁設(shè)計導(dǎo)引學(xué)時8單元 簡介人們常從藝術(shù)和技術(shù)兩個維度來看待和處理網(wǎng)頁設(shè)計，這使得目前網(wǎng)頁的 表現(xiàn)形式豐富多彩，功能及應(yīng)用也在不斷完善。我們發(fā)現(xiàn)，針對各類商務(wù)應(yīng)用 的網(wǎng)頁設(shè)計，一般都聚焦于滿足客戶需求、實現(xiàn)營銷目標(biāo)這一關(guān)鍵環(huán)節(jié)。本章從構(gòu)成網(wǎng)頁的基本要素出發(fā)，通過大量典型樣例的介紹，讓學(xué)習(xí)者直 接接觸各類常見商務(wù)網(wǎng)站的頁面結(jié)構(gòu)，迅速理解其功能特點，初步掌握客戶需 求分析的基本方法，最終能從具體客戶需求出發(fā)，掌握商務(wù)網(wǎng)頁設(shè)計的基本原 貝y,合理規(guī)劃和設(shè)計商務(wù)網(wǎng)站的欄目結(jié)構(gòu)。1、能有效地進行客戶需求分析；2、能合理規(guī)劃設(shè)計網(wǎng)站欄目。知識 目標(biāo)1、掌握常見商務(wù)網(wǎng)站類型及特點；2、

2、理解網(wǎng)頁基本構(gòu)成及相關(guān)概念；3、熟悉常見網(wǎng)頁風(fēng)格及特征；4、掌握客戶需求分析方法；5、掌握網(wǎng)站欄目規(guī)劃基本原則及方法。教學(xué)設(shè)計一、商務(wù)網(wǎng)站類型展示（35分鐘）【設(shè)問】：商務(wù)網(wǎng)頁設(shè)計中的“商務(wù)網(wǎng)頁”，包含哪些典型類型？教師可使用 WYT010101-WYT010110 所示樣例圖展示常見的各種商務(wù)網(wǎng) 站類型?！咀⒁狻浚航滩闹猩虅?wù)網(wǎng)站的類型僅列出商務(wù)網(wǎng)頁設(shè)計領(lǐng)域中需求量較大的 或較典型的類型，供教師參考，教師可適當(dāng)拓展或提出自己的見解。不冋類型的商務(wù)網(wǎng)站，其內(nèi)容及頁面風(fēng)格、布局等有著較大的差異，講解 中應(yīng)多進行比較。【提問】：（給出實際的網(wǎng)站，要求學(xué)生分析并指出其類型）?！驹O(shè)問】：網(wǎng)頁設(shè)計中的“設(shè)

3、計”，設(shè)計什么？二、網(wǎng)頁基本構(gòu)成的講授（30分鐘）引導(dǎo)動畫： WYD010103網(wǎng)頁基本兀素以網(wǎng)頁組成圖（WYT010111 ）為樣本，講述網(wǎng)頁的基本組成及相關(guān)概念。回答前述設(shè)問，以網(wǎng)頁邏輯結(jié)構(gòu)圖（WYT010112 ）為基礎(chǔ)，強調(diào)從網(wǎng)頁設(shè)計的角度來看待網(wǎng)頁的組成，即內(nèi)容、結(jié)構(gòu)、表現(xiàn)、交互。其中，結(jié)構(gòu)（網(wǎng)站 的欄目結(jié)構(gòu)）和表現(xiàn)（風(fēng)格、色彩、布局等）是本門課程關(guān)注的重點。網(wǎng)頁結(jié)構(gòu)的處理重點是網(wǎng)站欄目的規(guī)劃，這在本單兀后續(xù)部分強調(diào)。而內(nèi) 容是網(wǎng)頁的靈魂，教師在學(xué)生了解了網(wǎng)站構(gòu)成的基礎(chǔ)上，應(yīng)特別強調(diào)這一概念，并就內(nèi)容的表達形式-網(wǎng)頁組成兀素做一全面說明。三、網(wǎng)頁風(fēng)格講授（15分鐘）引導(dǎo)動畫：WYD0

4、10104色彩與風(fēng)格引用資源圖片 WYT010115-WYT010164 及 WYT010166-WYT0101215 , 通過豐富的案例圖片講解網(wǎng)頁設(shè)計的風(fēng)格類型。本單兀列出的網(wǎng)頁風(fēng)格類型僅為常見的網(wǎng)頁風(fēng)格，教師應(yīng)抓住各類風(fēng)格的 基本特征加以闡述和討論。特別注意的是，這些風(fēng)格類型僅為可參照或可借鑒 的，并不是一個規(guī)范或標(biāo)準(zhǔn)，教師應(yīng)鼓勵學(xué)生在設(shè)計時大膽嘗試和創(chuàng)新?！菊n堂討論】：（舉一國內(nèi)典型企業(yè)網(wǎng)站），這一網(wǎng)站的設(shè)計風(fēng)格是什么？對于國內(nèi)大部分企業(yè)網(wǎng)站而言，基本上在歐版風(fēng)格上做了不同程度的改變和調(diào)整，教師要引導(dǎo)學(xué)生認識到這一情況，并指出在具體設(shè)計時可以參照這一普遍 做法。四、課后實訓(xùn)“技能訓(xùn)練1

5、-1商務(wù)網(wǎng)頁空間結(jié)構(gòu)分析”（WYD010105 ）可安排為課后實訓(xùn)，并在下次課點評。要求學(xué)生以其所在地的一家知名企業(yè)的企業(yè)網(wǎng)站為分析對象，分析其網(wǎng)站首頁的組成， 并填寫的“表1-1企業(yè)網(wǎng)站首頁空間結(jié)構(gòu)分析 ”其中設(shè)計分析可不作太高要求，而由教師適當(dāng)從風(fēng)格、色彩、布局、內(nèi)容等方面加以說明。五、 客戶需求分析案例引述（5分鐘）參考本單元實訓(xùn)要求和內(nèi)容，選擇一家典型煙花企業(yè)網(wǎng)站（或自行選擇一家熟悉的企業(yè)網(wǎng)站），給定以下案例：【案例】：近年來，瀏陽市委、市政府不斷為企業(yè)探索創(chuàng)新營銷方式。一方 面著手建立全球化營銷網(wǎng)絡(luò)，推行整體營銷策略。目前已與世界100多個國家和地區(qū)建立了長期性的合作關(guān)系。另一方面以

6、電子商務(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)理透露，自網(wǎng)站改版半年多的時間以來，已 有2600多位英文會員、2300多位中文會員，他們在網(wǎng)上做生意、 上網(wǎng)賣產(chǎn)品、 上網(wǎng)買原材料、上網(wǎng)找客戶等等。此案例引述的重點不是企業(yè)如何開展網(wǎng)絡(luò)營銷，而從這一點出發(fā)強調(diào)企業(yè)建立網(wǎng)站的必要性?！菊n堂討論】：企業(yè)要建網(wǎng)站，如何設(shè)計合適的網(wǎng)頁？討論時，教師要注重引導(dǎo)學(xué)生認識“客戶導(dǎo)向”原則，好的設(shè)計固然重要，但客戶的需求是第一位的。六、客戶需求分析講授1、引述（

7、2分鐘）教師可使用 WYT 010201客戶需求分析流程示意圖，講授如何分析客戶需求，并強調(diào)以下邏輯：了解客戶所在行業(yè)了解客戶競爭對手與客戶進行深度溝通確定網(wǎng)站定位 確定網(wǎng)站內(nèi)容架構(gòu) 一 確定網(wǎng)頁設(shè)計風(fēng)格?！咎崾尽浚嚎蛻粜枨蠓治龅闹攸c是做好競爭對手網(wǎng)站的選擇與分析。要做到有效地與客戶做好溝通，分析并挖掘其真實需求，對客戶所在行業(yè)其本情況有 所了解是必需的基礎(chǔ)，但通過分析其競爭對手的網(wǎng)站，并建立初步的網(wǎng)頁設(shè)計 思路，是與客戶進行有效溝通最快速的途徑。2、行業(yè)背景分析（3分鐘）關(guān)于行業(yè)背景分析，可做簡要說明（可使用的資源圖片： WYT010202 PEST 方法示意圖、WYT010203波特五力分

8、析模型），強調(diào)其分析的意義及基本方法。 具體執(zhí)行可通過本單元實訓(xùn)完成。3、競爭對手網(wǎng)頁的選擇（20分鐘）【提問】：什么樣的網(wǎng)頁是我們在設(shè)計時可參照的網(wǎng)頁？教師在引導(dǎo)學(xué)生回答這一問題時，要強調(diào)的概念是“用戶體驗度”。當(dāng)然這一概念教師可根據(jù)自己的見解靈活處理，本單元使用這一概念是希望給出一 個參考準(zhǔn)則，尤其是從商務(wù)營銷的角度來看待網(wǎng)頁的設(shè)計，只有用戶體驗度良 好的網(wǎng)頁，才是我們選擇分析的對象。引用WYT010204用戶體驗度分析圖，對用戶體驗度這一概念做一概述?！咀⒁狻浚簩τ谄髽I(yè)網(wǎng)站而言，用戶體驗度強調(diào)的是信任體驗即網(wǎng)站內(nèi)容的 處理是否得當(dāng)，包括信息完整度、導(dǎo)航設(shè)置等等問題，以及網(wǎng)站的可訪問性兩

9、個方面。至于風(fēng)格、配色、布局等問題只是其中的一個子問題?！窘ㄗh】：教師可對比選擇兩家有著較大反差的網(wǎng)站進行比較，以加深學(xué)生的理解和印象。【課后閱讀】：WYA010201淘寶案例（淘寶網(wǎng)用戶體驗分析報告）素材可 供學(xué)生課后閱讀，以加深學(xué)生對這一概念的認知和理解。4、網(wǎng)頁表現(xiàn)形式分析（15分鐘）【提問】：參照競爭對手的網(wǎng)頁， 我們?nèi)绾我?guī)劃設(shè)計適應(yīng)客戶需求的網(wǎng)頁？ 前述的設(shè)問，“網(wǎng)頁設(shè)計，設(shè)計什么”，我們強調(diào)了結(jié)構(gòu)和表現(xiàn)形式。這里 要引導(dǎo)學(xué)生關(guān)注的就是網(wǎng)頁的表現(xiàn)形式具體包括哪些方面，以及在進行設(shè)計時 必需掌握的相關(guān)要點。選用資源圖片 WYT010115-WYT010164 及 WYT010166-W

10、YT0101215 ， 通過豐富的案例講解網(wǎng)頁設(shè)計的風(fēng)格、配色、布局的概念及基本原理和方法。【注意】：教材中未特別提出版式設(shè)計的概念，可將此處的風(fēng)格、配色、 布局看成是版式設(shè)計的主要內(nèi)容。5、網(wǎng)頁內(nèi)容分析（10分鐘）本部分內(nèi)容的的講授，教師要強調(diào)一個觀念，即網(wǎng)站內(nèi)容架構(gòu)的設(shè)計是網(wǎng) 網(wǎng)頁設(shè)計中最重要的一環(huán)。教師要抓住兩個關(guān)鍵點，即網(wǎng)站內(nèi)容結(jié)構(gòu)和網(wǎng)頁內(nèi) 容組織，弓I導(dǎo)學(xué)生關(guān)注網(wǎng)頁內(nèi)容的表達。1）網(wǎng)站內(nèi)容結(jié)構(gòu)引用資源 WYT010205，闡述網(wǎng)站內(nèi)容結(jié)構(gòu)及相關(guān)概念。【注意】：對于門戶網(wǎng)站，使用頻道、欄目、專題來組織網(wǎng)站的內(nèi)容，形成 的信息架構(gòu)體系較復(fù)雜。但對于企業(yè)網(wǎng)站而言，信息量相對較少，我們一般只

11、 用欄目結(jié)構(gòu)來描述。2）網(wǎng)頁內(nèi)容組織引用資源WYT010206，闡述頁面內(nèi)容組織的要點是準(zhǔn)確地向瀏覽者傳遞要 表達的商務(wù)訴求。6、網(wǎng)頁原型分析（10分鐘）此處是客戶需求分析是否到位的關(guān)鍵點，教師應(yīng)特別強調(diào)其重要性。教師可通過討論法，采取模擬客戶訪談等方式，對教材中提及的三個方面的問題（網(wǎng)站建設(shè)的目的、網(wǎng)站服務(wù)對象、網(wǎng)站產(chǎn)品和服務(wù)定位）進行深入探 討。討論過程中，要引導(dǎo)學(xué)生充分意識到客戶參與的重要性。七、課后實訓(xùn)課時量充足的情況下，“技能訓(xùn)練1-2網(wǎng)站用戶體驗度分析”（WYD010201） 可考慮在課堂內(nèi)完成。教師要注重引導(dǎo)學(xué)生借鑒和學(xué)習(xí)其網(wǎng)頁設(shè)計中優(yōu)秀的方 面，以加深學(xué)生的感性認識和理性思考。

12、八、網(wǎng)站欄目規(guī)劃講授【提問】：通過分析競爭對手網(wǎng)站，并與客戶進行深度溝通后，如何策劃和設(shè)計滿足客戶需求的網(wǎng)站欄目？教師應(yīng)強調(diào)明確客戶的真實需求是做好設(shè)計的關(guān)鍵，在此基礎(chǔ)上，還應(yīng)掌 握相關(guān)的設(shè)計原則。1、網(wǎng)站欄目策劃” 20分鐘）【重點】：策劃的基本原則、三級欄目結(jié)構(gòu)。教師在講解本部分內(nèi)容時，要抓住以上兩個要點。討論基本原則時，教材 中列出的三個通用原則和五個策劃要點，可引用資源WYA010301進行闡述?！咀⒁狻浚嘿Y源WYA010301是一個資訊類網(wǎng)站的欄目結(jié)構(gòu)示意圖，其簡潔 性在于欄目名稱的規(guī)范及字?jǐn)?shù)的控制，重點突出反映在欄目設(shè)計圍繞著汽車維 護、保養(yǎng)及相關(guān)產(chǎn)品進行拓展，方便易用是指其三級欄

13、目結(jié)構(gòu)的合理設(shè)置。根據(jù)課時量，可引用資源 WYA010302- WYA010310進行欄目結(jié)構(gòu)案例討 論。2、網(wǎng)站欄目設(shè)計” 15分鐘）引用資源 WYA010302，教師著重以企業(yè)網(wǎng)站為對象講解欄目設(shè)計的基本思 路和要點?！咀⒁狻浚捍笮蜕虅?wù)網(wǎng)站，因其內(nèi)容體系龐大，不建議使用其做為分析對象， 可做為課后作業(yè)，讓學(xué)生嘗試通過分析已有網(wǎng)站進行相關(guān)設(shè)計。九、課后實訓(xùn)“技能訓(xùn)練1-3網(wǎng)站欄目設(shè)置分析” ”WYD010301 ）可做為課后實訓(xùn)內(nèi)容， 教師要引導(dǎo)學(xué)生注意網(wǎng)站導(dǎo)航與欄目結(jié)構(gòu)的關(guān)系。對于企業(yè)網(wǎng)站，導(dǎo)航中往往 包含了基本的網(wǎng)站欄目，但網(wǎng)上商城等稍大型的商務(wù)網(wǎng)站，情況就不是這樣， 要從內(nèi)容的分類角度

14、進行全面分析。十、單元實訓(xùn)” 4課時）動畫： WYD010000企業(yè)網(wǎng)站欄目規(guī)劃實訓(xùn) 本單兀實訓(xùn)內(nèi)容為企業(yè)網(wǎng)站欄目規(guī)劃，米用動畫的形式實現(xiàn)。實訓(xùn)的完成 需有上網(wǎng)條件，在實訓(xùn)過程中涉及上網(wǎng)瀏覽等操作。本實訓(xùn)內(nèi)容的設(shè)計強調(diào)是是欄目設(shè)計問題，即網(wǎng)頁設(shè)計中結(jié)構(gòu)方面的問題，關(guān)于風(fēng)格、配色、布局等表現(xiàn)層面的問題在后續(xù)章節(jié)中強調(diào)。十一、課后自主學(xué)習(xí)視頻：WYS010001如何打造營銷型網(wǎng)站實訓(xùn) 步驟一、技能訓(xùn)練本單元技能訓(xùn)含：練技能訓(xùn)練1-1、技能訓(xùn)練1-2、技能訓(xùn)練1-3，可根據(jù)教材學(xué)習(xí)內(nèi)容順序合理安排。二、單元綜合實訓(xùn)綜合實訓(xùn)分為四個子任務(wù)：網(wǎng)站定位、行業(yè)背景分析、典型網(wǎng)頁對比分析、網(wǎng)站欄目設(shè)計。具體實

15、訓(xùn)步聚如下：1、分析給定實訓(xùn)背景材料，給出網(wǎng)站定位及功能定位，完成網(wǎng)站定位分析 任務(wù)；2、通過閱讀行業(yè)相關(guān)材料及瀏覽行業(yè)相關(guān)網(wǎng)站，了解行業(yè)基本情況及相關(guān) 產(chǎn)品，完成行業(yè)背景分析任務(wù)；3、給定五個相關(guān)網(wǎng)站，通過分析比較，選擇較典型的兩家網(wǎng)站并分析其欄 目結(jié)構(gòu)，完成典型網(wǎng)頁對比分析；4、在上述任務(wù)完成的基礎(chǔ)上，設(shè)計網(wǎng)站欄目，完成網(wǎng)站欄目設(shè)計任務(wù)。教學(xué)資源WYT010101、WYT010102、WYT010103、WYT010104、WYT010105、WYT010106、WYT010107、WYT010108、WYT010109、WYT010110、WYT010111、WYT010112、WYD010103、WYD010104、WYD010105、WYD010101、WYD010102、WYT010113、WYT010114、WYT010115-WYT010164、WYT010165、WYT010166-WYT0101215、WYT010121、WYT010121、WYT01012