第2章 商務(wù)網(wǎng)頁(yè)布局與設(shè)計(jì).中職課件電子教案

1、 長(zhǎng)沙民政商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作商務(wù)網(wǎng)頁(yè)布局與設(shè)計(jì)第二章 長(zhǎng)沙民政理解并掌握網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)要點(diǎn)能針對(duì)商務(wù)訴求組織網(wǎng)頁(yè)內(nèi)容能繪制網(wǎng)頁(yè)布局草圖學(xué)習(xí)目標(biāo) 長(zhǎng)沙民政 項(xiàng)項(xiàng) 目目 概概 述述 任務(wù)任務(wù)1：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì) 任務(wù)任務(wù)2：草圖繪制：草圖繪制學(xué)習(xí)內(nèi)容 第二章項(xiàng)項(xiàng) 目目 概概 述述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制 長(zhǎng)沙民政項(xiàng)項(xiàng) 目目 概概 述述長(zhǎng)沙市碧雅園花卉苗木基地成立于2008年，位于美麗的湘江河畔，是長(zhǎng)沙市著名的花卉苗木公司。近三年來，苗木基地面積一直穩(wěn)居同行首位，榮獲全國(guó)優(yōu)秀苗木基地提名單位等多項(xiàng)榮譽(yù)稱號(hào)。公司經(jīng)營(yíng)的苗木品種有喬灌木、移栽大樹、扦插小苗、樹樁盆景、竹類植物、藤本

2、植物、草本花卉、草皮草種、造林苗、新優(yōu)果苗、種籽種苗等，其中紅花紫薇、羅漢杉、紅梅、廣玉蘭、海棠、櫻花、香樟、桂花為其經(jīng)營(yíng)的特色苗木。公司希望通過企業(yè)網(wǎng)站的建設(shè)，提高網(wǎng)絡(luò)知名度，開拓網(wǎng)絡(luò)銷售渠道。小王所在的智越網(wǎng)絡(luò)公司承接了基地的網(wǎng)站建設(shè)項(xiàng)目。網(wǎng)站建設(shè)部經(jīng)理安排小王負(fù)責(zé)該項(xiàng)目，并要求小王在五天內(nèi)提交網(wǎng)站首頁(yè)草圖。 第二章項(xiàng)項(xiàng) 目目 概概 述述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制 長(zhǎng)沙民政項(xiàng)項(xiàng) 目目 分分 析析 第二章項(xiàng)項(xiàng) 目目 概概 述述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制網(wǎng)站建設(shè)業(yè)務(wù)流程圖網(wǎng)站建設(shè)業(yè)務(wù)流程圖 1、網(wǎng)頁(yè)草圖是進(jìn)一步、網(wǎng)頁(yè)草圖是進(jìn)一步挖掘客戶需求的網(wǎng)頁(yè)挖掘客戶需求的網(wǎng)頁(yè)原型之一，也是制作原型之一，也是制作效果圖

3、的藍(lán)本。效果圖的藍(lán)本。 2、具體工作包括頁(yè)面、具體工作包括頁(yè)面布局、色彩搭配、文布局、色彩搭配、文字圖片編排、頁(yè)面內(nèi)字圖片編排、頁(yè)面內(nèi)容組織等。容組織等。 長(zhǎng)沙民政任任 務(wù)務(wù) 分分 解解 第二章項(xiàng)項(xiàng) 目目 概概 述述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制本項(xiàng)目本項(xiàng)目可分解為以下兩個(gè)任務(wù)：可分解為以下兩個(gè)任務(wù)：任務(wù)任務(wù)1：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)任務(wù)任務(wù)2：網(wǎng)頁(yè)草圖繪制：網(wǎng)頁(yè)草圖繪制 長(zhǎng)沙民政 項(xiàng)項(xiàng) 目目 概概 述述 任務(wù)任務(wù)1：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì) 任務(wù)任務(wù)2：草圖繪制：草圖繪制學(xué)習(xí)內(nèi)容 第二章項(xiàng)項(xiàng) 目目 概概 述述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制 長(zhǎng)沙民政任務(wù)一、任務(wù)一、網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì) 第二章項(xiàng) 目 概

4、 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制 風(fēng)格設(shè)計(jì)的重點(diǎn)是版面布局、顏色的使用和搭配、文字和圖片的編排等。要完成這一任務(wù)，可以從分析比較同類網(wǎng)站入手，以快速形成初步的設(shè)計(jì)方案?！救蝿?wù)說明任務(wù)說明】 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制【任務(wù)步驟任務(wù)步驟-1、競(jìng)爭(zhēng)對(duì)手網(wǎng)站對(duì)比分析】、競(jìng)爭(zhēng)對(duì)手網(wǎng)站對(duì)比分析】競(jìng)爭(zhēng)對(duì)手網(wǎng)站獲取途徑競(jìng)爭(zhēng)對(duì)手網(wǎng)站獲取途徑關(guān)鍵詞搜索關(guān)鍵詞搜索行業(yè)網(wǎng)站會(huì)員行業(yè)網(wǎng)站會(huì)員相關(guān)統(tǒng)計(jì)報(bào)告相關(guān)統(tǒng)計(jì)報(bào)告競(jìng)爭(zhēng)對(duì)手網(wǎng)站篩選競(jìng)爭(zhēng)對(duì)手網(wǎng)站篩選用戶體驗(yàn)度用戶體驗(yàn)度百度權(quán)重、百度權(quán)重、PR值值分析要點(diǎn)分析要點(diǎn)網(wǎng)頁(yè)配色網(wǎng)頁(yè)配色 頁(yè)面布局頁(yè)面布局 文字、圖像的編排文字、圖像的編排內(nèi)

5、容組織內(nèi)容組織欄目結(jié)構(gòu)欄目結(jié)構(gòu) 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制【任務(wù)步驟任務(wù)步驟-2、網(wǎng)頁(yè)配色網(wǎng)頁(yè)配色】主色調(diào)主色調(diào) 在主色調(diào)的選擇上，首先應(yīng)該明確網(wǎng)站的主題、服務(wù)對(duì)象、所要傳達(dá)的信息，還有利用色彩想要達(dá)到的視覺和心理效果，以確保所選用的色彩與網(wǎng)站形象相吻合。 主色調(diào)選取要點(diǎn)：主色調(diào)選取要點(diǎn)： 1）、色彩分為無彩色和有彩色兩大類，無彩色是指黑、白、灰，其它的為有彩色。 2）、有彩色又可分為暖色調(diào)和冷色調(diào)兩大類，它們分別給人以不同的感覺。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制冷暖色對(duì)比冷暖色對(duì)比 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)

6、網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制輔助用色輔助用色 在確定了網(wǎng)頁(yè)的主色調(diào)后，可以適當(dāng)?shù)剌o以其它幾種輔助色，但一般不超過三種（背景色和主體文字顏色不計(jì)入其中），這樣可以對(duì)整個(gè)頁(yè)面的色彩起著調(diào)和的作用，讓頁(yè)面生動(dòng)活潑、富有生氣，并使主色調(diào)更加流暢地貫穿整體。輔助用色分類：輔助用色分類： 1）、輔助用色包括輔色調(diào)、點(diǎn)睛色、背景色三種。 2）、僅次于主色調(diào)的視覺面積的輔色調(diào)，能起到烘托主色調(diào)、支持主色調(diào)、融合主色調(diào)的作用；點(diǎn)睛色是在小范圍內(nèi)“點(diǎn)”上強(qiáng)烈的顏色來突出主題效果，使頁(yè)面更加鮮明生動(dòng)；背景色是襯托整體的色調(diào)，起到協(xié)調(diào)的作用。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制示例：示例： 長(zhǎng)沙民

7、政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制 輔助用色要點(diǎn)：輔助用色要點(diǎn)： 1）、可以考慮跟主色調(diào)相鄰近的顏色，也可以用主色調(diào)的對(duì)比色。 2）、相鄰色給人的感覺是穩(wěn)定、和諧、內(nèi)向；而對(duì)比色給人的感覺是沖突，強(qiáng)的對(duì)比色運(yùn)用可以使畫面的開放性增強(qiáng)，整體印象變得輕松舒暢。 3）、在具體應(yīng)用的時(shí)候用把握整體和諧、局部對(duì)比的原則。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制輔助用色基準(zhǔn)輔助用色基準(zhǔn) -色環(huán)圖：色環(huán)圖： 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制本項(xiàng)目擬建網(wǎng)站配色參考：本項(xiàng)目擬建網(wǎng)站配色參考：主色調(diào)：白色；輔色調(diào)：綠色；點(diǎn)睛色：紅色。 長(zhǎng)

8、沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制【任務(wù)步驟任務(wù)步驟-3、網(wǎng)頁(yè)版式設(shè)計(jì)】、網(wǎng)頁(yè)版式設(shè)計(jì)】 在網(wǎng)頁(yè)布局，即設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容及各元素空間分布時(shí)，因充分考慮“F”型的閱讀習(xí)慣，確保最重要的信息能有效展示在瀏覽者面前。 F型熱點(diǎn)圖型熱點(diǎn)圖 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制國(guó)字型網(wǎng)國(guó)字型網(wǎng)頁(yè)布局頁(yè)布局 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制拐角型網(wǎng)拐角型網(wǎng)頁(yè)布局頁(yè)布局 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制框架型網(wǎng)框架型網(wǎng)頁(yè)布局頁(yè)布局 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制“回回”

9、字型字型網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制自由式結(jié)自由式結(jié)構(gòu)布構(gòu)布局局 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制“另類另類”結(jié)結(jié)構(gòu)構(gòu) 結(jié)構(gòu)布結(jié)構(gòu)布局局 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制本項(xiàng)目擬建網(wǎng)站布局：本項(xiàng)目擬建網(wǎng)站布局： 在展示型企業(yè)網(wǎng)站中，產(chǎn)品往往是展示的重點(diǎn)。在產(chǎn)品線較長(zhǎng)、產(chǎn)品品種較多的情況下，一般需要在頁(yè)面中給出相應(yīng)的列表，并將該列表置于頁(yè)面的左側(cè)，以符合“F型熱點(diǎn)圖”規(guī)律。在該項(xiàng)目中，“拐角型”布局可以作為首選。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制【任務(wù)步驟

10、任務(wù)步驟-4、文字和圖像編排、文字和圖像編排】文字的編排文字的編排 在網(wǎng)頁(yè)中通過設(shè)置其字體、字號(hào)、行距，以及采用不同的排列和表現(xiàn)形式，還可以表達(dá)出特別的視覺效果，從而強(qiáng)化要傳遞的商業(yè)訴求。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制示例：示例：通過文字大小及疏密的處理，可突出重點(diǎn)，給人層次分明 的感覺。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制圖像的編排圖像的編排 圖像在頁(yè)面中的位置、排列方式及其大小、數(shù)量、外形等，對(duì)頁(yè)面的均衡、視覺流程、文字的強(qiáng)調(diào)均能產(chǎn)生較大的影響。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制示例：示例：圖像的大

11、小不僅決定著主從關(guān)系，也控制著頁(yè)面的均衡與 運(yùn)動(dòng)。大小對(duì)比強(qiáng)烈，給人跳躍感，使主角更突出；大小 對(duì)比減弱，則頁(yè)面穩(wěn)定、安靜。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制示例：示例：不同的圖像自由疊置或分類疊置，構(gòu)成的塊狀組合，具有輕快、活潑的特性，卻不失整體感。在圖像較多時(shí)，會(huì)無法突出重點(diǎn)，這時(shí)可改變圖像的面積，有效地區(qū)分層次。 長(zhǎng)沙民政 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制本項(xiàng)目擬建網(wǎng)站文字與圖像編排要點(diǎn)：本項(xiàng)目擬建網(wǎng)站文字與圖像編排要點(diǎn)：首頁(yè)中需要展示的文字量不是很大，正文使用默認(rèn)字體字號(hào)，即宋體、12磅字即可。在顏色的使用上，可考慮使用此前確定的輔助用

12、色紅色，來處理其中需要強(qiáng)化表達(dá)的部分文字。 本項(xiàng)目中的苗木基地在同行業(yè)中具有一定的影響力，為強(qiáng)化企業(yè)品牌形象及主營(yíng)產(chǎn)品，可使用較大尺寸的圖片作為Banner的背景圖片，展示基地實(shí)景、特色苗木等。內(nèi)容區(qū)的產(chǎn)品圖片，可采用塊狀形式排列。為了與Banner圖片匹配，產(chǎn)品圖片尺寸可適當(dāng)小一些，具體到每行圖片的數(shù)量及大小，在制作效果圖時(shí)，應(yīng)根據(jù)視覺效果適當(dāng)調(diào)整。 長(zhǎng)沙民政 項(xiàng)項(xiàng) 目目 概概 述述 任務(wù)任務(wù)1：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)：網(wǎng)頁(yè)風(fēng)格設(shè)計(jì) 任務(wù)任務(wù)2：草圖繪制：草圖繪制學(xué)習(xí)內(nèi)容 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制草圖繪制 長(zhǎng)沙民政任務(wù)二、任務(wù)二、草圖繪制草圖繪制 網(wǎng)頁(yè)風(fēng)格的設(shè)計(jì)一旦確定，就可以開始確定網(wǎng)站的欄目及頁(yè)面中要展示的內(nèi)容，在此基礎(chǔ)上，再繪制出網(wǎng)頁(yè)的草圖。 特別注意，在這一階段中，保持與客戶的及時(shí)聯(lián)系和充分溝通非常重要。因?yàn)椋蛻魧?duì)網(wǎng)頁(yè)內(nèi)容的把握，肯定比設(shè)計(jì)師更專業(yè)?！救蝿?wù)說明任務(wù)說明】 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制草圖繪制 長(zhǎng)沙民政【任務(wù)步驟任務(wù)步驟-1、網(wǎng)站欄目設(shè)計(jì)網(wǎng)站欄目設(shè)計(jì)】 第二章項(xiàng) 目 概 述網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)草圖繪制草圖繪制 根據(jù)網(wǎng)站欄目設(shè)置的原則及設(shè)計(jì)方法，