Web 前端設(shè)計是為適應(yīng)信息時代發(fā)展應(yīng)運而生的多領(lǐng)域交叉設(shè)計方向，對設(shè)計師而言，Web 跨平臺、跨終端、智能化的新特征，對內(nèi)容策略、交互方式、用戶體驗設(shè)計都提出了更高的要求，同時了解前端技術(shù)對設(shè)計師提升自身創(chuàng)新能力也變得越發(fā)重要。因此，本書內(nèi)容整體上包含設(shè)計和技術(shù)兩部分，并在內(nèi)容編排和設(shè)計上充分體現(xiàn)設(shè)計和技術(shù)的有機融合。在設(shè)計部分，按照思維方法到用戶體驗設(shè)計再到跨媒介綜合設(shè)計的梯度組織內(nèi)容，融入跨終端、跨媒介等符合時代變化的前沿設(shè)計理念和方法；在技術(shù)部分，不同于信息技術(shù)專業(yè)學(xué)習(xí)的硬核技術(shù)，而是以設(shè)計師視角切入，以輔助創(chuàng)意設(shè)計實現(xiàn)為目標(biāo)，形成與設(shè)計匹配的前端技術(shù)基礎(chǔ)到響應(yīng)式前端技術(shù)的知識梯度。 本書可以作為高等院校數(shù)字媒體、視覺傳達、交互設(shè)計、網(wǎng)絡(luò)傳播等專業(yè)Web 前端設(shè)計相關(guān)課程的教材，也可以作為愛好者的自學(xué)用書。
《Web前端設(shè)計》內(nèi)容整體上包含設(shè)計和技術(shù)兩個部分，在設(shè)計部分，按照思維方法到用戶體驗設(shè)計再到跨媒介綜合設(shè)計的梯度組織內(nèi)容，融入跨終端、跨媒介等符合時代變化的前沿設(shè)計理念和方法；技術(shù)方面不同于信息技術(shù)專業(yè)的學(xué)習(xí)的硬核技術(shù)，而是以設(shè)計師視角切入，以輔助創(chuàng)意設(shè)計實現(xiàn)為目標(biāo)，形成與設(shè)計匹配的前端技術(shù)基礎(chǔ)到響應(yīng)式前端技術(shù)的知識梯度。
黨的二十大報告指出：教育、科技、人才是全面建設(shè)社會主義現(xiàn)代化國家的基礎(chǔ)
性、戰(zhàn)略性支撐。必須堅持科技是第一生產(chǎn)力、人才是第一資源、創(chuàng)新是第一動力，
深入實施科教興國戰(zhàn)略、人才強國戰(zhàn)略、創(chuàng)新驅(qū)動發(fā)展戰(zhàn)略，開辟發(fā)展新領(lǐng)域新賽
道，不斷塑造發(fā)展新動能新優(yōu)勢。
互聯(lián)網(wǎng)是對人類社會影響最為廣泛、深刻的數(shù)字媒介，是社會創(chuàng)新驅(qū)動的先導(dǎo)
力量，圍繞互聯(lián)網(wǎng)媒介的創(chuàng)新設(shè)計是高校藝術(shù)設(shè)計專業(yè)的重要教學(xué)方向之一。其中，
Web 是互聯(lián)網(wǎng)最普及、影響最深遠的服務(wù)，具有開放、兼容、應(yīng)用形式多樣等特點，
是Web 前端設(shè)計成為高校數(shù)字媒體專業(yè)開展互聯(lián)網(wǎng)創(chuàng)新設(shè)計教學(xué)的極佳切入點。隨
著技術(shù)的不斷演進，人類開啟了移動互聯(lián)網(wǎng) 智能時代，Web 早已不僅是網(wǎng)頁
的范疇，而且是以各種智能終端為載體，拓展出豐富的應(yīng)用形式，融合更多的媒介和
技術(shù)，滿足人們不同應(yīng)用場景下的不同需求。Web 在多領(lǐng)域跨界融合，使得Web 前
端設(shè)計成為緊隨時代發(fā)展的前沿多領(lǐng)域交叉設(shè)計方向，其要求的知識能力與當(dāng)今社會
對創(chuàng)新型設(shè)計人才的需求相吻合。
本書正是瞄準當(dāng)今時代背景下社會對創(chuàng)新型設(shè)計人才的需求，以及高校數(shù)字媒體
專業(yè)復(fù)合型設(shè)計人才培養(yǎng)目標(biāo)對設(shè)計人才知識結(jié)構(gòu)和能力水平的要求而進行的內(nèi)容組
織和編寫。本書的特色主要包含以下幾方面。
（1）本書從思維、方法、技術(shù)三個層面層層遞進，以培養(yǎng)創(chuàng)新設(shè)計思維、跨學(xué)科
知識素養(yǎng)及較強行業(yè)實踐能力的創(chuàng)新型設(shè)計人才為目標(biāo)，系統(tǒng)地幫助學(xué)習(xí)者構(gòu)建Web
前端設(shè)計知識體系。
（2）本書注重實用性和前瞻性相結(jié)合，在構(gòu)建基礎(chǔ)、系統(tǒng)知識體系的基礎(chǔ)上，著
眼于當(dāng)今移動互聯(lián)網(wǎng)、智能時代背景下的新設(shè)計特征，注重進一步拓展跨媒介、跨學(xué)
科的綜合設(shè)計能力培養(yǎng)，例如融入跨終端Web 設(shè)計、智能系統(tǒng)設(shè)計、Web VR 和AR
等前沿的設(shè)計模式。
Wqjzw.indd 5
2023/5/30 15:49:19
Web前端設(shè)計VI
（3 ）本書與教學(xué)過程緊密結(jié)合，章節(jié)設(shè)置體現(xiàn)了研究性學(xué)習(xí)過程和內(nèi)涵，并專門
設(shè)置了Web 設(shè)計研究章節(jié)，通過真實案例介紹設(shè)計研究經(jīng)典理論和方法，讓知
識在真實的應(yīng)用場景中易于學(xué)習(xí)者學(xué)習(xí)和理解，培養(yǎng)科學(xué)探究能力和發(fā)現(xiàn)解決問題的
能力。
在本書的編寫過程中，編者參閱了大量的資料，在此對資料的原著作者表示衷心
的感謝。由于編者水平有限，對書中不足之處敬請廣大讀者批評、指正。
編者
2023 年3 月
王珊，畢業(yè)于北京航空航天大學(xué)虛擬現(xiàn)實技術(shù)與系統(tǒng)國家重點實驗室，獲得工學(xué)博士學(xué)位，2007年起任教于北京航空航天大學(xué)新媒體藝術(shù)與設(shè)計學(xué)院。主要研究方向為數(shù)字媒體藝術(shù)、Web前端設(shè)計、虛擬現(xiàn)實，在本領(lǐng)域內(nèi)知名國際期刊和會議發(fā)表多篇論文。主講課程有《Web前端設(shè)計》《網(wǎng)頁設(shè)計》《網(wǎng)頁設(shè)計技術(shù)》《移動交互應(yīng)用設(shè)計》，在此Web前端設(shè)計類課程方面積累十幾年的教學(xué)經(jīng)驗，打造了Web前端設(shè)計課程群，針對不同年級不同專業(yè)方向?qū)W生，形成了一套完整有效的教學(xué)體系和模式，目前依托此課程群承擔(dān)了北航校級重點教學(xué)改革項目。
PART 1 設(shè)計篇第1章 Web前端設(shè)計概論 / 3
2.1.3 PC 端與移動端的對比/ 17
1.1 Web 前端的概念 / 3
2.1.4 其他終端/ 18
1.2 Web應(yīng)用類型 / 4
2.2 Web元素 / 19
1.2.1 網(wǎng)站、網(wǎng)頁/ 4 2.3 跨終端設(shè)計 / 21
1.2.2 Web App 和混合式App / 5
2.3.1 響應(yīng)式設(shè)計/ 21
1.2.3 基于微信的Web 應(yīng)用/ 6
2.3.2 智能系統(tǒng)設(shè)計/ 22
1.2.4 其他游戲和互動類Web 應(yīng)用/ 6 第3章 Web設(shè)計研究 / 24
1.3 Web 媒介特點 / 7
3.1 Web 設(shè)計理論 / 24
1.3.1 跨平臺性/ 7
3.1.1 設(shè)計思維/ 24
1.3.2 融合多元信息形態(tài)/ 8
3.1.2 用戶體驗要素/ 25
1.3.3 動態(tài)交互性/ 9
3.2 設(shè)計研究的意義 / 26
1.3.4 分布式信息/ 10
3.3 設(shè)計研究的方法 / 27
1.4 Web 發(fā)展趨勢 / 10
3.3.1 用戶研究/ 27
1.5 Web 前端設(shè)計范疇 / 11
3.3.2 競品分析（同類、現(xiàn)有解決方案
第2章 Web設(shè)計模式 / 13 分析）/ 31
2.1 不同終端的設(shè)計模式
/
13
第4章 Web設(shè)計過程
/
33
2.1.1 PC 端/ 13
4.1 信息架構(gòu)的概念
/
33
2.1.2 移動端/ 14
4.2 交互設(shè)計的概念
/
34
Wqjzw.indd 7
2023/5/16 19:45:32
Web前端設(shè)計VIII
4.3 信息與交互的關(guān)系 /354.4 設(shè)計方法與工具 /364.4.1 信息架構(gòu)設(shè)計要素/ 36
4.4.2 信息分類方式/ 37
4.4.3 層級式任務(wù)分析/ 42
4.5 Web組織結(jié)構(gòu) /434.5.1 單一模式/ 43
4.5.2 混合模式/ 47
第5章 Web設(shè)計表達 /505.1 原型的概念 /505.2 低保真原型 /515.3 高保真原型 /535.4 多模態(tài)原型 /535.5 感知設(shè)計 /545.5.1 視覺/ 54
5.5.2 聽覺/ 55
5.5.3 觸覺/ 56
5.5.4 嗅覺/ 56
5.5.5 味覺/ 57
5.6 多模態(tài)交互 /57
第6章 Web設(shè)計技術(shù)結(jié)構(gòu) /616.1 基本的Web標(biāo)準 /616.2 HTML與Web結(jié)構(gòu) /626.3 HTML5基本語法 /636.3.1 HTML 標(biāo)簽/ 63
6.3.2 HTML 5 文檔基本結(jié)構(gòu)/ 63
6.4 HTML5元素 /646.4.1 頁面布局元素/ 64
6.4.2 文本元素/ 68
6.4.3 超鏈接/ 69
6.4.4 圖像、音視頻元素/ 70
6.4.5 列表/ 72
6.4.6 表格和表單/ 73
第7章 Web設(shè)計技術(shù)表現(xiàn) /777.1 CSS簡介 /777.2 CSS基本語法 /797.3 CSS選擇器 /797.3.1 基本選擇器/ 79
7.3.2 復(fù)合選擇器/ 83
7.4 CSS優(yōu)先級 /857.5 CSS顏色 /867.6 CSS常用屬性 /877.6.1 文本相關(guān)屬性/ 87
7.6.2 圖像相關(guān)屬性/ 88
7.6.3 列表相關(guān)屬性/ 89
第8章 Web設(shè)計技術(shù)布局 /918.1 布局基礎(chǔ) /918.1.1 元素顯示類型/ 91
8.1.2 盒模型/ 93
8.2 CSS定位方式 /968.2.1 浮動定位/ 97
8.2.2 絕對定位/ 99
8.2.3 相對定位/ 101
8.3 常見布局 /102PART 2 技術(shù)篇
Wqjzw.indd 8 2023/5/16 19:45:32
IX
8.3.1 一欄式布局/ 102 第10
章 跨終端Web
設(shè)計技術(shù)響應(yīng)式
8.3.2 兩欄式布局/ 104 設(shè)計
/
118
8.3.3 三欄式布局/ 106
10.1 響應(yīng)式設(shè)計的概念
/
118
第
9
章 跨終端Web
設(shè)計技術(shù)彈性10.2 響應(yīng)式設(shè)計模式
/
119
布局
/
108
10.3 媒體查詢
/
121
9.1 彈性布局的概念
/
108
10.3.1 基本語法/ 121
9.2 彈性盒模型
/
109
10.3.2 媒體查詢實例/ 123
9.3 彈性盒基本屬性
/
109
10.4 響應(yīng)式框架
/
124
9.4 彈性盒對齊屬性
/
111
10.4.1 Bootstrap 介紹/ 124
9.5 彈性盒布局案例
/
113
10.4.2 Bootstrap 柵格系統(tǒng)/ 125
9.5.1 水平垂直居中元素/ 114
10.4.3 Bootstrap 布局案例/ 126
9.5.2 圣杯布局/ 115
10.4.4 Bootstrap 基本組件/ 129
參考文獻
/
130
書單推薦
