目　錄

Part　1 基礎(chǔ)篇

第1章　網(wǎng)頁設(shè)計概述

1.1　認(rèn)識網(wǎng)站　002

1.1.1　網(wǎng)站的基本概念　002

1.1.2　網(wǎng)站的分類　003

1.1.3　網(wǎng)站的商業(yè)模式　005

1.2　網(wǎng)頁界面空間的影響要素　009

1.2.1　分辨率與顯示器　009

1.2.2　瀏覽器　010

1.3　網(wǎng)站開發(fā)的團隊與協(xié)作　012

1.4　網(wǎng)頁的制作流程　013

第2章　網(wǎng)頁界面設(shè)計的內(nèi)容

2.1　網(wǎng)站形象　016

2.1.1　網(wǎng)站Logo　016

2.1.2　廣告語與圖片形象　017

2.2　導(dǎo)航系統(tǒng)　019

2.2.1　全局導(dǎo)航　019

2.2.2　局部導(dǎo)航　021

2.2.3　搜索引擎導(dǎo)航　021

2.2.4　面包屑導(dǎo)航　022

2.2.5　其他輔助導(dǎo)航　023

2.3　信息內(nèi)容　023

2.3.1　首頁信息展示　024

2.3.2　列表頁面信息展示　024

2.3.3　詳細(xì)頁面信息展示　025

2.4　廣告　026

2.4.1　Banner　026

2.4.2　彈出式廣告　027

2.4.3　浮動式廣告　028

2.4.4　文字鏈接式廣告　028

2.5　表單區(qū)　029

2.5.1　信息提交　029

2.5.2　信息交流　029

2.6　案例

Banner設(shè)計　030



Part　２ 界面交互篇

第3章　用戶體驗研究

3.1　以用戶為中心的設(shè)計　034

3.1.1　用戶體驗概念　034

3.1.2　以用戶為中心的研究方法　035

3.2　用戶需求研究　039

3.2.1　了解你的網(wǎng)站　039

3.2.2　關(guān)注你的用戶　039

3.3　案例

從用戶身上尋找需求【登錄界面】　041

界面交互篇

Part�。�

第4章　信息架構(gòu)設(shè)計

4.1　網(wǎng)站的信息結(jié)構(gòu)　047

4.1.1　信息結(jié)構(gòu)的概念　047

4.1.2　網(wǎng)站信息組織方式　048

4.1.3　信息結(jié)構(gòu)的類型　050

4.2　網(wǎng)站整體結(jié)構(gòu)到界面架構(gòu)　054

4.2.1　確定網(wǎng)站的導(dǎo)航　054

4.2.2　提高用戶體驗的交互技巧　056

4.3　案例

活動頁面設(shè)計　059

第5章　界面與布局

5.1　界面的布局原理　065

5.1.1　對稱與均衡　065

5.1.2　重點與主次　066

5.1.3　變化與統(tǒng)一　066

5.2　界面布局類型　068

5.2.1　固定布局　068

5.2.2　流動布局　069

5.2.3　響應(yīng)式布局　069

5.3　原型的構(gòu)建　071

5.3.1　確定頁面尺寸　071

5.3.2　頁面設(shè)計的優(yōu)先級　072

5.3.3　線框圖設(shè)計　072

5.3.4　原型設(shè)計　074

5.4　案例

食品公司網(wǎng)站的界面改版設(shè)計　074



Part　3 視覺表現(xiàn)篇

第6章　視聽元素

6.1　文字　082

6.1.1　字體的選擇　082

6.1.2　文字的可讀性　083

6.1.3　文字編排的藝術(shù)性　085

6.2　圖片　086

6.2.1　圖片的選擇　086

6.2.2　格式與優(yōu)化　089

6.2.3　圖像的肌理　093

6.3　色彩　095

6.3.1　色彩的模式　095

6.3.2　色彩的情感　095

6.3.3　色彩組合　101

6.4　多媒體　104

6.4.1　視頻　104

6.4.2　音頻　105

6.5　動效　106

6.5.1　GIF動圖　106

6.5.2　Flash動畫　107

6.5.3　程序?qū)崿F(xiàn)的動畫　108

6.6　案例

天貓商城店鋪界面設(shè)計　108

視覺表現(xiàn)篇

Part　3

第7章　網(wǎng)頁視覺設(shè)計要點

7.1　視覺的有效性　116

7.1.1　簡化　116

7.1.2　留白　118

7.2　視覺的層次性　120

7.2.1　視覺流程　120

7.2.2　視覺層級關(guān)系　123

7.3　視覺的一致性　129

7.3.1　與企業(yè)形象一致　129

7.3.2　頁面及各元素間的共識　130

7.4　視覺的創(chuàng)意性　131

7.4.1　秩序內(nèi)的創(chuàng)新　132

7.4.2　新媒體下的出其不意　133

7.5　案例

早教機構(gòu)網(wǎng)站界面設(shè)計　134



第8章　網(wǎng)頁視覺風(fēng)格

8.1　簡約風(fēng)格　145

8.1.1　簡約風(fēng)格的特點　145

8.1.2　簡約風(fēng)格應(yīng)用及分析　145

8.2　影像風(fēng)格　148

8.2.1　影像風(fēng)格的特點　148

8.2.2　影像風(fēng)格應(yīng)用及分析　148

8.3　手繪風(fēng)格　150

8.3.1　手繪風(fēng)格的特點　150

8.3.2　手繪風(fēng)格應(yīng)用及分析　150

8.4　復(fù)古風(fēng)格　152

8.4.1　復(fù)古風(fēng)格的特點　152

8.4.2　復(fù)古風(fēng)格應(yīng)用及分析　152

8.5　中式傳統(tǒng)風(fēng)格　153

8.5.1　中式傳統(tǒng)風(fēng)格的特點　153

8.5.2　中式傳統(tǒng)風(fēng)格應(yīng)用及分析　153

8.6　立體風(fēng)格　155

8.6.1　立體風(fēng)格的特點　155

8.6.2　立體風(fēng)格應(yīng)用及分析　155

8.7　拼貼風(fēng)格　157

8.7.1　拼貼風(fēng)格的特點　157

8.7.2　拼貼風(fēng)格應(yīng)用及分析　158



Part　4 綜合案例篇

第9章　網(wǎng)站靜態(tài)頁面

　前端開發(fā)基礎(chǔ)

9.1　HTML基礎(chǔ)　161

9.1.1　HTML簡介　161

9.1.2　HTML文檔結(jié)構(gòu)　161

9.1.3　常用標(biāo)簽　162

9.2　CSS基礎(chǔ)　167

9.2.1　CSS簡介　167

9.2.2　CSS編碼規(guī)范　167

9.2.3　CSS屬性選擇器　168

9.2.4　網(wǎng)頁中應(yīng)用樣式表　171

9.2.5　CSS常用屬性　173

9.2.6　CSS盒子模型　175

9.3　JavaScript腳本基礎(chǔ)　181

9.3.1　JavaScript簡介　181

9.3.2　HTML中使用JavaScript　182

9.3.3　JavaScript的變量　182

9.3.4　JavaScript操作HTML標(biāo)簽　182

9.3.5　JavaScript的注釋　183

9.3.6　函數(shù)　183

9.3.7　JavaScript的運算符　184

9.3.8　JavaScript的3種流程控制　185

9.3.9　JavaScript與HTML的交互　187

9.4　案例幻燈片效果　187

9.4.1　Jquery.anythingslider插件　188

9.4.2　Jquery.anythingslider的用法　188

9.4.3　頂部導(dǎo)航Logo及菜單　189

9.4.4　幻燈片效果完整代碼　190

第10章　餐廳網(wǎng)站靜態(tài)

頁面設(shè)計

10.1　前期準(zhǔn)備　194

10.1.1　項目背景　194

10.1.2　前期策劃　194

10.1.3　確定網(wǎng)站信息框架　195

10.1.4　交互原型設(shè)計　195

10.2　網(wǎng)頁界面設(shè)計　197

10.2.1　整體視覺風(fēng)格定位及首頁設(shè)計　197

10.2.2　列表頁面設(shè)計　200

10.2.3　詳細(xì)頁面設(shè)計　201

10.3　網(wǎng)站布局　201

10.3.1　首頁制作　201

10.3.2　列表頁制作　208

10.4　網(wǎng)站動效表現(xiàn)　215