注重實用技能培養——打造“互聯網+”UI 設計師 突出創意設計訓練——授人以漁而不只是作品臨摹

真實商業項目驅動——行業知識與專業設計相呼應 學習體驗時尚前衛——傳統教材與二維碼革命性攜手

隨著移動互聯技術的飛速發展，“互聯網+”時代已經悄然到來，這自然催生了各行業、企業對UI設計人才的大量需求。與傳統美工、設計人員相比，新“互聯網+”時代對UI設計師提出了更高的要求，傳統美工、設計人員已無法勝任。在這樣的大環境下，這套“互聯網UI設計師”系列教材應運而生，它旨在幫助讀者朋友快速成長為符合“互聯網+”時代企業需求的優秀UI設計師。

這套教材是由課工場（kgc.cn）的UI/UE教研團隊研發的。課工場是北大青鳥集團下屬企業北京課工場教育科技有限公司推出的互聯網教育平臺，專注于互聯網企業各崗位人才的培養。平臺匯聚了數百位來自知名培訓機構、高校的頂級名師和互聯網企業的行業專家，面向大學生以及需要“充電”的在職人員，針對與互聯網相關的產品、設計、開發、運維、推廣和運營等崗位，提供在線的直播和錄播課程，并通過遍及全國的幾十家線下服務中心提供現場面授以及多種形式的教學服務，且同步研發出版最新的課程教材。

課工場為培養互聯網UI設計人才設立了UI/UE設計學院及線下服務中心，提供各種學習資源和支持，包括：

　現場面授課程

　在線直播課程

　錄播視頻課程

　案例素材下載

　學習交流社區

　作業提交批改系統

　QQ討論組（技術、就業、生活）

以上所有資源請訪問課工場UI/UE學院：kgc.cn/uiue。

■ 本套教材特點

（1）課程高端、實用——拒絕培養傳統美工。

　培養符合“互聯網+”時代需求的高端UI設計人才，包括移動UI設計師、網頁UI設計師、平面UI設計師。

　除UI設計師所必須具備的技能外，本課程還涵蓋網絡營銷推廣內容，包括：網絡營銷基本常識、符合SEO標準的網站設計、Landing Page設計優化、營銷型企業網站設計等。

　注重培養產品意識和用戶體驗意識，包括電商網站設計、店鋪設計、用戶體驗、交互設計等。

　學習W3C相關標準和設計規范，包括HTML5/CSS3、移動端Android/iOS相關設計規范等內容。

（2）真實商業項目驅動——行業知識、專業設計一個也不能少。

　與知名4A公司合作，設計開發項目課程。

　幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業。

　不僅注重商業項目實訓的流程和規范，還傳遞行業知識和業務需求。

（3）更時尚的二維碼學習體驗——傳統紙質教材學習方式的革命。

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

　課工場UI/UE學院（kgc.cn）開辟教材配套版塊，提供素材下載、學習社區等豐富的在線學習資源。

■ 讀者對象

（1）初學者：本套教材將幫助你快速進入互聯網UI設計行業，從零開始，逐步成長為專業UI設計師。

（2）設計師：本套教材將帶你進行全面、系統的互聯網UI設計學習，傳遞最全面、科學的設計理論，提供實用的設計技巧和項目經驗，幫助你向互聯網方向迅速轉型，拓寬設計業務范圍。

課工場出品（kgc.cn）

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

1. 網站前端技術案例教程（HTML+CSS+JavaScript）（第二版） [黃華升]
2. Web前端開發項目化教程（微課版） [主編　郭立文　王洪波]
3. Unity應用開發與實戰（微課版） [主 編 程永恒]
4. 深入淺出OpenHarmony——架構、內核、驅動及應用開發全棧 [李傳釗 著]
5. Python開發實踐教程（第二版） [于京 陳平生 編著]
6. Java Web開發技術任務驅動式教程 [金靜梅]
7. HTML5+CSS3前端開發項目式教程（微課版） [主編 譚衛 徐文義]
8. iOS項目開發實戰 [主編 趙善龍 劉俊馳]
9. UI設計與開發 [主編　李昀蕓　宋蓓蓓　王悅娟]
10. ASP.NET（C#）網站開發（第二版） [主編 張志明 王輝]
11. ARM Cortex-M體系架構與接口開發實戰 [林慶峰 等 編著]
12. 基于Android平臺的移動開發技術 [主編 徐碩博 黃衛東 賈雁]
13. Android 應用開發項目實戰 [主編 梁 琨 朱冰鴻]
14. Java Web開發技術與項目實戰 [主編 羅如為]
15. Android開發基礎教程 [黃日勝 謝志偉 楊凌 楊琳芳]
16. Android項目開發實戰 [趙善龍 李旭東]
17. Hadoop大數據開發 [主 編 劉春陽 張學龍 劉麗軍]
18. Web前端開發從學到用完美實踐HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS（第2版） [阮曉龍]
19. 嵌入式Linux開發技術基礎 [主編 伍德雁]
20. 嵌入式應用Qt_C++傳感數據采集開發實訓教程 [主編 劉和文 文燕 謝忠敏]
21. 基于ARM Cortex-M4內核的物聯網/嵌入式系統開發教程 [主編 劉雯]
22. Android應用開發基礎教程 [主編 巫湘林]
23. SEO網站權重深度解析 [主編 肖睿]
24. HTML5游戲開發技術—Egret Engine [辛子俊 林雪瑩]
25. 網站前端技術案例教程（HTML+CSS+JavaScript） [黃華升]
26. Hadoop & Spark大數據開發實戰 [主編　肖睿　雷剛躍]
27. Java Web開發實戰 [主編 肖睿　高海波　徐申]
28. MySQL數據庫開發實戰 [肖睿　訾永所　侯小毛]
29. PHP安全開發案例教程 [唐乾林 李治國]
30. 大型網站架構與自動化運維 [主編　肖睿　羅保山　劉麗軍]