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