網(wǎng)站UI商業(yè)項(xiàng)目實(shí)戰(zhàn)——令人驚叫的網(wǎng)頁(yè)是這樣煉成的！

注重實(shí)用技能培養(yǎng)——打造“互聯(lián)網(wǎng)+”UI 設(shè)計(jì)師 突出創(chuàng)意設(shè)計(jì)訓(xùn)練——授人以漁而不只是作品臨摹

真實(shí)商業(yè)項(xiàng)目驅(qū)動(dòng)——行業(yè)知識(shí)與專(zhuān)業(yè)設(shè)計(jì)相呼應(yīng) 學(xué)習(xí)體驗(yàn)時(shí)尚前衛(wèi)——傳統(tǒng)教材與二維碼革命性攜手

隨著移動(dòng)互聯(lián)技術(shù)的飛速發(fā)展，“互聯(lián)網(wǎng)+”時(shí)代已經(jīng)悄然到來(lái)，這自然催生了各行業(yè)、企業(yè)對(duì)UI設(shè)計(jì)人才的大量需求。與傳統(tǒng)美工、設(shè)計(jì)人員相比，新“互聯(lián)網(wǎng)+”時(shí)代對(duì)UI設(shè)計(jì)師提出了更高的要求，傳統(tǒng)美工、設(shè)計(jì)人員已無(wú)法勝任。在這樣的大環(huán)境下，這套“互聯(lián)網(wǎng)UI設(shè)計(jì)師”系列教材應(yīng)運(yùn)而生，它旨在幫助讀者朋友快速成長(zhǎng)為符合“互聯(lián)網(wǎng)+”時(shí)代企業(yè)需求的優(yōu)秀UI設(shè)計(jì)師。

這套教材是由課工場(chǎng)（kgc.cn）的UI/UE教研團(tuán)隊(duì)研發(fā)的。課工場(chǎng)是北大青鳥(niǎo)集團(tuán)下屬企業(yè)北京課工場(chǎng)教育科技有限公司推出的互聯(lián)網(wǎng)教育平臺(tái)，專(zhuān)注于互聯(lián)網(wǎng)企業(yè)各崗位人才的培養(yǎng)。平臺(tái)匯聚了數(shù)百位來(lái)自知名培訓(xùn)機(jī)構(gòu)、高校的頂級(jí)名師和互聯(lián)網(wǎng)企業(yè)的行業(yè)專(zhuān)家，面向大學(xué)生以及需要“充電”的在職人員，針對(duì)與互聯(lián)網(wǎng)相關(guān)的產(chǎn)品、設(shè)計(jì)、開(kāi)發(fā)、運(yùn)維、推廣和運(yùn)營(yíng)等崗位，提供在線(xiàn)的直播和錄播課程，并通過(guò)遍及全國(guó)的幾十家線(xiàn)下服務(wù)中心提供現(xiàn)場(chǎng)面授以及多種形式的教學(xué)服務(wù)，且同步研發(fā)出版最新的課程教材。

課工場(chǎng)為培養(yǎng)互聯(lián)網(wǎng)UI設(shè)計(jì)人才設(shè)立了UI/UE設(shè)計(jì)學(xué)院及線(xiàn)下服務(wù)中心，提供各種學(xué)習(xí)資源和支持，包括：

　現(xiàn)場(chǎng)面授課程

　在線(xiàn)直播課程

　錄播視頻課程

　案例素材下載

　學(xué)習(xí)交流社區(qū)

　作業(yè)提交批改系統(tǒng)

　QQ討論組（技術(shù)、就業(yè)、生活）

以上所有資源請(qǐng)?jiān)L問(wèn)課工場(chǎng)UI/UE學(xué)院：kgc.cn/uiue。

■ 本套教材特點(diǎn)

（1）課程高端、實(shí)用——拒絕培養(yǎng)傳統(tǒng)美工。

　培養(yǎng)符合“互聯(lián)網(wǎng)+”時(shí)代需求的高端UI設(shè)計(jì)人才，包括移動(dòng)UI設(shè)計(jì)師、網(wǎng)頁(yè)UI設(shè)計(jì)師、平面UI設(shè)計(jì)師。

　除UI設(shè)計(jì)師所必須具備的技能外，本課程還涵蓋網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣內(nèi)容，包括：網(wǎng)絡(luò)營(yíng)銷(xiāo)基本常識(shí)、符合SEO標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)、Landing Page設(shè)計(jì)優(yōu)化、營(yíng)銷(xiāo)型企業(yè)網(wǎng)站設(shè)計(jì)等。

　注重培養(yǎng)產(chǎn)品意識(shí)和用戶(hù)體驗(yàn)意識(shí)，包括電商網(wǎng)站設(shè)計(jì)、店鋪設(shè)計(jì)、用戶(hù)體驗(yàn)、交互設(shè)計(jì)等。

　學(xué)習(xí)W3C相關(guān)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范，包括HTML5/CSS3、移動(dòng)端Android/iOS相關(guān)設(shè)計(jì)規(guī)范等內(nèi)容。

（2）真實(shí)商業(yè)項(xiàng)目驅(qū)動(dòng)——行業(yè)知識(shí)、專(zhuān)業(yè)設(shè)計(jì)一個(gè)也不能少。

　與知名4A公司合作，設(shè)計(jì)開(kāi)發(fā)項(xiàng)目課程。

　幾十個(gè)實(shí)訓(xùn)項(xiàng)目，涵蓋電商、金融、教育、旅游、游戲等行業(yè)。

　不僅注重商業(yè)項(xiàng)目實(shí)訓(xùn)的流程和規(guī)范，還傳遞行業(yè)知識(shí)和業(yè)務(wù)需求。

（3）更時(shí)尚的二維碼學(xué)習(xí)體驗(yàn)——傳統(tǒng)紙質(zhì)教材學(xué)習(xí)方式的革命。

　每章提供二維碼掃描，可以直接觀看相關(guān)視頻講解和案例操作。

　課工場(chǎng)UI/UE學(xué)院（kgc.cn）開(kāi)辟教材配套版塊，提供素材下載、學(xué)習(xí)社區(qū)等豐富的在線(xiàn)學(xué)習(xí)資源。

■ 讀者對(duì)象

（1）初學(xué)者：本套教材將幫助你快速進(jìn)入互聯(lián)網(wǎng)UI設(shè)計(jì)行業(yè)，從零開(kāi)始，逐步成長(zhǎng)為專(zhuān)業(yè)UI設(shè)計(jì)師。

（2）設(shè)計(jì)師：本套教材將帶你進(jìn)行全面、系統(tǒng)的互聯(lián)網(wǎng)UI設(shè)計(jì)學(xué)習(xí)，傳遞最全面、科學(xué)的設(shè)計(jì)理論，提供實(shí)用的設(shè)計(jì)技巧和項(xiàng)目經(jīng)驗(yàn)，幫助你向互聯(lián)網(wǎng)方向迅速轉(zhuǎn)型，拓寬設(shè)計(jì)業(yè)務(wù)范圍。

課工場(chǎng)出品（kgc.cn）

第1章
    網(wǎng)站UI項(xiàng)目管理規(guī)范
本章簡(jiǎn)介 2
1.1 互聯(lián)網(wǎng)網(wǎng)站的分類(lèi) 2
1.2　構(gòu)成網(wǎng)頁(yè)的元素 8
1.2.1　文字 8
1.2.2　圖像 9
1.2.3　多媒體 11
1.2.4　交互元素 12
1.3　網(wǎng)頁(yè)UI設(shè)計(jì)的基本步驟 13
1.3.1　設(shè)計(jì)頁(yè)面的前期準(zhǔn)備 13
1.3.2　使用參考線(xiàn)繪制大致結(jié)構(gòu) 15
1.3.3　繪制內(nèi)容 16
1.3.4　輸出切片 16
1.4　網(wǎng)頁(yè)設(shè)計(jì)原則及規(guī)范 17
1.4.1　布局實(shí)用原則 17
1.4.2　網(wǎng)頁(yè)配色實(shí)用原則 21
1.4.3　設(shè)計(jì)的四大基本原則 24
1.5　網(wǎng)頁(yè)切片輸出 24
1.5.1　切片概述 25
1.5.2　規(guī)則切片 26
1.5.3　手動(dòng)切片 27
1.5.4　輸出、保存文件設(shè)置 30
1.5.5　編輯切片 31
1.5.6　常用切片技巧 32
本章總結(jié) 33
第2章
    聯(lián)想官網(wǎng)——營(yíng)銷(xiāo)型企業(yè)網(wǎng)站視覺(jué)設(shè)計(jì)
本章簡(jiǎn)介 36
2.1　聯(lián)想官網(wǎng)——營(yíng)銷(xiāo)型企業(yè)網(wǎng)站設(shè)計(jì)需求概述 36
2.1.1　項(xiàng)目名稱(chēng) 37
2.1.2　項(xiàng)目定位 37
2.1.3　聯(lián)想集團(tuán)企業(yè)背景 37
2.1.4　網(wǎng)站功能要求 37
2.1.5　網(wǎng)站風(fēng)格要求 38
2.2　營(yíng)銷(xiāo)型企業(yè)網(wǎng)站相關(guān)理論講解 38
2.2.1　營(yíng)銷(xiāo)型企業(yè)網(wǎng)站概述 38
2.2.2　營(yíng)銷(xiāo)型企業(yè)網(wǎng)站和普通企業(yè)網(wǎng)站的區(qū)別 38
2.2.3　需要營(yíng)銷(xiāo)型網(wǎng)站的企業(yè) 40
2.3　聯(lián)想官網(wǎng)——營(yíng)銷(xiāo)型企業(yè)網(wǎng)站設(shè)計(jì)需求分析 40
2.3.1　競(jìng)爭(zhēng)對(duì)手分析 40
2.3.2　目標(biāo)用戶(hù)分析 43
2.4　聯(lián)想官網(wǎng)——營(yíng)銷(xiāo)型企業(yè)網(wǎng)站設(shè)計(jì)規(guī)劃 43
2.4.1　界面整體風(fēng)格定位 43
2.4.2　首頁(yè)界面布局分析 44
2.4.3　界面色彩定位 44
2.5　聯(lián)想官網(wǎng)——營(yíng)銷(xiāo)型企業(yè)網(wǎng)站視覺(jué)設(shè)計(jì)思路 45
2.5.1　技術(shù)要點(diǎn) 45
2.5.2　大體框架、色調(diào) 45
2.5.3　素材準(zhǔn)備 47
2.5.4　頂部設(shè)計(jì) 47
2.5.5　設(shè)計(jì)導(dǎo)航 48
2.5.6　設(shè)計(jì)主要banner 48
2.5.7　設(shè)計(jì)新品推薦等內(nèi)容區(qū) 49
2.5.8　設(shè)計(jì)版權(quán)區(qū) 49
2.5.9　切片輸出 50
本章總結(jié) 51
第3章
    天貓商城——電商網(wǎng)站視覺(jué)設(shè)計(jì)
本章簡(jiǎn)介 54
3.1　電商網(wǎng)站概述 54
3.1.1　什么是電商網(wǎng)站 54
3.1.2　電商網(wǎng)站的功能 56
3.2　從電商出發(fā)——界面設(shè)計(jì)前的準(zhǔn)備 59
3.2.1　銷(xiāo)售的是什么 59
3.2.2　需要的功能 60
3.2.3　目標(biāo)用戶(hù)群 60
3.3　電商網(wǎng)站主要頁(yè)面設(shè)計(jì)技巧 61
3.3.1　首頁(yè)設(shè)計(jì) 61
3.3.2　列表頁(yè)設(shè)計(jì) 70
3.3.3　商品詳情頁(yè)設(shè)計(jì) 71
3.3.4　其他頁(yè)面 71
3.4　天貓商城——電商網(wǎng)站首頁(yè)設(shè)計(jì) 72
3.4.1　技術(shù)要點(diǎn) 73
3.4.2　劃分大致布局 73
本章總結(jié) 76
第4章
   　三星天貓旗艦店——電商網(wǎng)站店鋪視覺(jué)
營(yíng)銷(xiāo)設(shè)計(jì)
本章簡(jiǎn)介 78
4.1　三星天貓旗艦店——電商網(wǎng)站店鋪裝修需求描述 78
4.1.1　項(xiàng)目名稱(chēng) 78
4.1.2　項(xiàng)目描述 78
4.1.3　界面要求 78
4.2　電商網(wǎng)站店鋪裝修相關(guān)理論 79
4.2.1　店鋪首頁(yè) 79
4.2.2　店鋪詳情頁(yè) 87
4.3　三星天貓旗艦店——電商網(wǎng)站店鋪裝修需求分析 92
4.3.1　競(jìng)爭(zhēng)對(duì)手分析 92
4.3.2　用戶(hù)（消費(fèi)群體）分析 94
4.4　三星天貓旗艦店——電商網(wǎng)站店鋪裝修思路 95
4.4.1　技術(shù)要點(diǎn) 96
4.4.2　店鋪首頁(yè)設(shè)計(jì) 96
本章總結(jié) 99
第5章
  　Apple Watch百度推廣頁(yè)——Landing Page設(shè)計(jì)與優(yōu)化
本章簡(jiǎn)介 102
5.1　Landing Page概述 102
5.1.1　Landing Page的定義 103
5.1.2　互聯(lián)網(wǎng)營(yíng)銷(xiāo)的目標(biāo) 103
5.1.3　用戶(hù)到達(dá)Landing Page的行為 105
5.2　Landing Page的類(lèi)型 107
5.2.1　交易型Landing Page 107
5.2.2　參考型Landing Page 107
5.2.3　壓縮型Landing Page 108
5.3　Landing Page的內(nèi)容選擇 109
5.3.1　明確核心目的 109
5.3.2　明確目標(biāo)人群 110
5.3.3　分析目標(biāo)人群的特征 110
5.3.4　確定賣(mài)點(diǎn)和主題 111
5.3.5　整理、組織內(nèi)容 111
5.4　Landing Page的設(shè)計(jì)方法 115
5.4.1　Landing Page頁(yè)面結(jié)構(gòu)概述 115
5.4.2　Landing Page頁(yè)面元素布局 119
5.4.3　Landing Page頁(yè)面顏色配置 128
5.5　返利網(wǎng)Landing Page的分析與優(yōu)化 131
5.5.1　案例描述 131
5.5.2　案例分析 131
5.6　返利模塊優(yōu)化 133
5.7　Apple Watch Landing Page的設(shè)計(jì)分析 133
5.7.1　需求說(shuō)明 134
5.7.2　實(shí)現(xiàn)流程 135
5.7.3　蘋(píng)果Landing Page分析 135
本章總結(jié) 137
第6章
   　英雄聯(lián)盟——游戲類(lèi)網(wǎng)站改版設(shè)計(jì)
本章簡(jiǎn)介 140
6.1　英雄聯(lián)盟——游戲類(lèi)網(wǎng)站改版項(xiàng)目背景 140
6.2　網(wǎng)站改版的好處及注意事項(xiàng) 141
6.2.1　網(wǎng)站改版的好處 141
6.2.2　網(wǎng)站改版的注意事項(xiàng) 142
6.3　英雄聯(lián)盟——游戲類(lèi)網(wǎng)站改版項(xiàng)目分析 143
6.3.1　風(fēng)格定位 143
6.3.2　對(duì)老官網(wǎng)進(jìn)行分析 143
6.3.3　對(duì)新游戲UI進(jìn)行分析 145
6.4　英雄聯(lián)盟——游戲類(lèi)網(wǎng)站改版項(xiàng)目設(shè)計(jì)規(guī)劃 146
6.4.1　布局規(guī)劃 146
6.4.2　色調(diào)規(guī)劃 147
6.5　英雄聯(lián)盟——游戲類(lèi)網(wǎng)站改版項(xiàng)目首頁(yè)視覺(jué)設(shè)計(jì) 148
本章總結(jié) 150
第7章
   　我秀網(wǎng)“開(kāi)學(xué)季”專(zhuān)題頁(yè)視覺(jué)設(shè)計(jì)
本章簡(jiǎn)介 152
7.1　我秀網(wǎng)“開(kāi)學(xué)季”專(zhuān)題頁(yè)視覺(jué)設(shè)計(jì)項(xiàng)目需求 152
7.1.1　項(xiàng)目名稱(chēng) 152
7.1.2　項(xiàng)目背景 152
7.1.3　項(xiàng)目功能要求 153
7.2　專(zhuān)題頁(yè)視覺(jué)設(shè)計(jì)相關(guān)理論 154
7.2.1　專(zhuān)題頁(yè)和傳統(tǒng)產(chǎn)品頁(yè)面的視覺(jué)差異 154
7.2.2　專(zhuān)題頁(yè)的結(jié)構(gòu) 155
7.2.3　專(zhuān)題頁(yè)的組成 158
7.3　我秀網(wǎng)“開(kāi)學(xué)季”專(zhuān)題頁(yè)視覺(jué)設(shè)計(jì)項(xiàng)目需求分析 159
7.3.1　競(jìng)爭(zhēng)對(duì)手分析 159
7.3.2　用戶(hù)分析 161
7.4　我秀網(wǎng)“開(kāi)學(xué)季”專(zhuān)題頁(yè)視覺(jué)設(shè)計(jì)項(xiàng)目設(shè)計(jì)規(guī)劃 161
7.4.1　界面整體結(jié)構(gòu) 161
7.4.2　頁(yè)面風(fēng)格 162
7.5　項(xiàng)目實(shí)現(xiàn)思路 162
7.5.1　整體設(shè)計(jì)風(fēng)格定位 162
7.5.2　素材搜集 163
7.5.3　首屏展示內(nèi)容 164
7.5.4　次屏展示內(nèi)容 165
7.5.5　版權(quán)區(qū)設(shè)計(jì) 165
7.5.6　切片輸出 165
本章總結(jié) 167
第8章
   　北大青鳥(niǎo)信息管理系統(tǒng)——企業(yè)OA系統(tǒng)
界面設(shè)計(jì)
本章簡(jiǎn)介 170
8.1　北大青鳥(niǎo)信息管理系統(tǒng)——企業(yè)OA系統(tǒng)界面設(shè)計(jì)項(xiàng)目
   需求概述 170
8.1.1　項(xiàng)目名稱(chēng) 171
8.1.2　項(xiàng)目背景 171
8.1.3　項(xiàng)目要求 171
8.2　企業(yè)OA系統(tǒng)相關(guān)理論知識(shí) 172
8.2.1　企業(yè)OA系統(tǒng)包含的常規(guī)內(nèi)容 172
8.2.2　企業(yè)OA的優(yōu)勢(shì) 173
8.3　像產(chǎn)品經(jīng)理一樣進(jìn)行需求分析 174
8.3.1　用戶(hù)分析 174
8.3.2　項(xiàng)目設(shè)計(jì)規(guī)劃 174
8.4　北大青鳥(niǎo)OA系統(tǒng)——企業(yè)OA系統(tǒng)界面設(shè)計(jì)項(xiàng)目
   實(shí)現(xiàn)思路 176
8.4.1　技術(shù)要點(diǎn) 177
8.4.2　繪制登錄頁(yè)效果圖 177
8.4.3　繪制主界面效果圖 177
本章總結(jié) 179

1. 基于AE與C#的地理信息系統(tǒng)二次開(kāi)發(fā) [李小根 賈艷昌 喬翠平 姜彤 ]
2. 微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版） [主編 黃龍泉 郭峰 朱倩]
3. 基于雙元制的建筑工程技術(shù)專(zhuān)業(yè)標(biāo)準(zhǔn)開(kāi)發(fā) [主編 李紅立 徐小珊]
4. 基于雙元制的機(jī)電一體化技術(shù)專(zhuān)業(yè)、工業(yè)機(jī)器人技術(shù)專(zhuān)業(yè)標(biāo)準(zhǔn)開(kāi)發(fā) [主編 黃崇富 朱永麗 胡銀全]
5. 鴻蒙系統(tǒng)應(yīng)用開(kāi)發(fā)項(xiàng)目化教程 [鄧文達(dá)　史勁　李禮]
6. 人工智能開(kāi)發(fā)框架應(yīng)用 [主編 王明超 蘆婭云]
7. 三峽梯級(jí)電站水資源決策支持系統(tǒng)研究與開(kāi)發(fā) [姚華明 潘紅忠 湯正]
8. Web技術(shù)開(kāi)發(fā)教程（基于.NET開(kāi)源MVC框架） [王合闖 韓紅玲 王青正 陳海蕊]
9. SwiftUI完全開(kāi)發(fā) [李智威 著]
10. Unity3D虛擬現(xiàn)實(shí)應(yīng)用開(kāi)發(fā)實(shí)踐 [主 編 劉龍]
11. 黃河流域非遺衍生品傳播與經(jīng)濟(jì)開(kāi)發(fā)協(xié)同發(fā)展研究 [畢雪燕 趙爽 著]
12. 人工智能應(yīng)用系統(tǒng)開(kāi)發(fā)項(xiàng)目化教程 [主編 楊家慧 周永福 魏育華]
13. 媒體融合影響下的體育電視傳播與價(jià)值開(kāi)發(fā)策略研究——以世界杯/NBA為例 [趙曉琳 著]
14. “學(xué)賽一體化”課程開(kāi)發(fā)研究 [李作聚 著]
15. VR-X3D虛擬現(xiàn)實(shí)開(kāi)發(fā)與設(shè)計(jì) [張金釗 張金鏑]
16. 網(wǎng)站前端技術(shù)案例教程（HTML+CSS+JavaScript）（第二版） [黃華升]
17. Web前端開(kāi)發(fā)項(xiàng)目化教程（微課版） [主編　郭立文　王洪波]
18. Unity應(yīng)用開(kāi)發(fā)與實(shí)戰(zhàn)（微課版） [主 編 程永恒]
19. 深入淺出OpenHarmony——架構(gòu)、內(nèi)核、驅(qū)動(dòng)及應(yīng)用開(kāi)發(fā)全棧 [李傳釗 著]
20. Python開(kāi)發(fā)實(shí)踐教程（第二版） [于京 陳平生 編著]
21. Java Web開(kāi)發(fā)技術(shù)任務(wù)驅(qū)動(dòng)式教程 [金靜梅]
22. HTML5+CSS3前端開(kāi)發(fā)項(xiàng)目式教程（微課版） [主編 譚衛(wèi) 徐文義]
23. iOS項(xiàng)目開(kāi)發(fā)實(shí)戰(zhàn) [主編 趙善龍 劉俊馳]
24. UI設(shè)計(jì)與開(kāi)發(fā) [主編　李昀蕓　宋蓓蓓　王悅娟]
25. ASP.NET（C#）網(wǎng)站開(kāi)發(fā)（第二版） [主編 張志明 王輝]
26. ARM Cortex-M體系架構(gòu)與接口開(kāi)發(fā)實(shí)戰(zhàn) [林慶峰 等 編著]
27. 基于Android平臺(tái)的移動(dòng)開(kāi)發(fā)技術(shù) [主編 徐碩博 黃衛(wèi)東 賈雁]
28. Android 應(yīng)用開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn) [主編 梁 琨 朱冰鴻]
29. Java Web開(kāi)發(fā)技術(shù)與項(xiàng)目實(shí)戰(zhàn) [主編 羅如為]
30. Android開(kāi)發(fā)基礎(chǔ)教程 [黃日勝 謝志偉 楊凌 楊琳芳]