　　一個優秀的網站，通常具備豐富的內容、美觀的界麵效果和獨特的風格，並在這幾個方麵能夠實現和諧的統一。在多姿多彩的互聯網世界中，美觀的界麵效果和鮮明的設計風格能夠給瀏覽者留下深刻的印象。
　　《網頁UI設計之道》是一本使用Photoshop進行網頁UI設計製作的案例教程，語言淺顯易懂，配閤大量精美的網頁UI設計案例，講解瞭有關網頁UI設計的相關知識和使用Photoshop進行網頁UI設計製作的方法和技巧；可使讀者在掌握網頁UI設計各方麵知識的同時，能夠在網頁UI設計製作基礎上做到活學活用。
　　《網頁UI設計之道》共分為9章，全麵介紹瞭網頁UI設計中的理論設計知識以及具體案例的製作方法；第1章：關於網頁UI設計，第2章：網站基本圖形元素設計，第3章：網站導航設計，第4章：網頁文字與廣告設計，第5章：網頁布局與版式設計，第6章：網頁UI配色，第7章：兒童類網頁UI設計，第8章：企業類網頁UI設計，第9章：遊戲類網頁UI設計。
　　《網頁UI設計之道》配套的光盤中提供瞭本書所有案例的源文件及素材，方便讀者藉鑒和使用。
　　《網頁UI設計之道》適閤有一定Photoshop軟件操作基礎的設計初學者以及設計愛好者閱讀，也可以為一些設計製作人員以及相關專業的學習者提供參考。

作者簡介

　　高金山，資深UI設計師，有豐富的UI設計經驗，先後從事軟件界麵、網站界麵和遊戲界麵的設計工作。參與瞭大量的手機界麵設計工作。熟知UI設計領域的相關知識。有豐富的教學經驗，曾在中國傳媒大學、北京大學、北京師範大學等重點院校教授設計課程。對UI設計風格有獨特見解。並參與清華大學中職教材的編寫工作。

內頁插圖

CHAPTER　1
關於網頁UI設計 1　
1．1　瞭解網頁UI 2
1．1．1　什麼是網頁界麵 2
1．1．2　網頁界麵設計的特點 2
1．2　網頁UI設計要點 5
1．2．1　設計與技術的結閤 5
1．2．2　立體空間節奏感 8
1．2．3　視覺導嚮性 9
1．2．4　視覺服務 10
1．3．1　文字 10
1．3　網頁UI構成元素 10
1．3．2　圖形符號 11
1．3．3　圖像 11
1．3．4　多媒體 12
1．3．5　色彩 12
1．4　網頁UI設計與審美 13
1．4．1　功能與形式美 13
1．4．2　網頁UI形式美法則 14
1．5　網頁UI的設計原則 16
1．5．1　以用戶為中心 16
1．5．2　視覺美觀 16
1．5．3　主題明確 17
1．5．4　內容與形式統一 18
1．5．5　有機的整體 19
1．6　網頁UI創意設計方法 20
1．6．1　綜閤型 21
1．6．2　趣味型 21
1．6．3　聯想型 22
1．6．4　比喻型 22
1．6．5　變異型 22
1．6．6　古樸型 23
1．6．7　流行型 23
1．7　扁平化在網頁UI設計中的
應用 24
1．7．1　圖標 24
1．7．2　圓角 25
1．7．3　摺角 25
1．7．4　標簽 26
1．7．5　徽章 26
1．7．6　條紋 26
1．7．7　裝飾元素 27
1．7．8　裝飾背景 27
1．8　本章小結 28

CHAPTER　2
網站基本圖形元素設計 29
2．1　認識網頁圖標 30
2．1．1　圖標概述 30
2．1．2　網頁圖標應用 31
【自測1】設計簡約風格網站圖標 32
【自測2】設計按鈕圖標工具欄 37
2．2　網頁中圖標的設計原則 42
【自測3】設計水晶質感圖標 43
2．3　網頁按鈕的常見類型 55
2．4　網站按鈕的特點 56
【自測4】設計質感遊戲按鈕 57
【自測5】設計網站個性按鈕 62
2．5　網頁中按鈕的錶現形式 68
2．5．1　實現提交功能的按鈕 68
2．5．2　實現鏈接的圖片按鈕 68
【自測6】設計網頁中的下載按鈕 69
【自測7】設計質感播放按鈕 74
2．6　網站LOGO的錶現形式 80
2．7　網站LOGO的特點和設計
規範 82
【自測8】設計影視網站LOGO 84
【自測9】設計娛樂網站LOGO 90
2．8　專傢支招 99
2．8．1　圖形元素的作用 99
2．8．2　網頁中常用的圖形格式 99
2．9　本章小結 100
CHAPTER　３
網站導航設計 101
3．1　網站導航概述 102
3．2　網站導航的錶現形式 103
【自測1】設計遊戲網站導航 104
【自測2】設計質感企業網站導航 110
3．3　導航菜單在網頁中的布局 117
【自測3】設計下拉網站導航 121
【自測4】設計垂直網站導航 127
3．4　網站導航的視覺風格 136
【自測5】設計圖標網站導航 139
3．5　專傢支招 146
3．6　本章小結 146
CHAPTER　４
網頁文字與廣告設計 147
4．1　文字在網頁界麵中的作用 148
4．2　網頁界麵中文字設計要求 148
【自測1】設計網頁中的變形文字 150
4．3　網頁界麵中文字的設計原則 156
4．3．1　可讀性 156
4．3．2　藝術化 157
【自測2】設計網頁主題特效文字 159
4．4　網頁界麵文字的排版設計 167
4．4．1　對比 167
4．4．2　統一與協調 169
4．4．3　平衡 169
4．4．4　節奏與韻律 170
4．4．5　視覺誘導 170
【自測3】設計3D廣告文字 171
4．5　網站廣告的特點 179
【自測4】設計網站産品宣傳廣告 180
4．6　網絡廣告的常見類型 186
【自測5】設計網站促銷活動廣告 188
【自測6】設計産品廣告頁麵 197
4．7　專傢支招 203
4．8　本章小結 204
CHAPTER　５
網頁布局與版式設計 205
5．1　瞭解網頁布局 206
5．1．1　網頁布局的目的 206
5．1．2　網頁布局的操作順序 206
5．2　常見的網頁布局方式 207
【自測1】設計手機宣傳網頁 210
5．3　網頁布局方法 220
【自測2】設計咖啡館網頁界麵 222
5．4　網頁形式的藝術錶現 230
5．4．1　分割構成 230
5．4．2　對稱構成 231
5．4．3　平衡構成 231
【自測3】設計淘寶促銷網頁 232
5．5　網頁界麵設計風格 242
5．5．1　大眾化設計風格 242
5．5．2　個性化設計風格 243
5．6　專傢支招 251
5．6．1　網頁界麵分割方嚮的
布局方式 251
5．6．2　網頁界麵布局的連貫性和
多樣性 251
5．7　本章小結 252
CHAPTER　６
網頁UI配色 253
6．1　色彩在網頁UI設計中的作用 254
6．2　理解色彩 255
6．2．1　色彩屬性 256
6．2．2　基礎配色 257
【自測1】設計數碼産品網站頁麵 259
6．3　色彩的搭配 266
6．3．1　網頁UI配色基礎 266
6．3．2　網頁UI配色原則 268
【自測2】設計房地産網站頁麵 269
6．4　網頁UI配色的方法 278
6．5　網頁中的文本配色 280
【自測3】設計珠寶網站頁麵 282
6．6　網頁元素色彩搭配 290
【自測4】設計手機網站頁麵 292
6．7　影響網頁配色的因素 301
6．7．1　根據行業特徵選擇網頁
配色 301
6．7．2　根據色彩聯想選擇網站
配色 303
6．7．3　根據産品銷售周期選擇
網頁配色 304
6．8　專傢支招 306
6．9　本章小結 306
CHAPTER　7
兒童類網頁UI設計 307
7．1　瞭解兒童類網站 308
7．1．1　兒童網站的分類 308
7．1．2　兒童網站頁麵的設計原則 309
7．2　設計兒童網站頁麵 309
7．2．1　設計分析 309
7．2．2　製作兒童網站首頁 310
【自測1】設計兒童網站首頁 310
7．2．3　製作兒童網站二級頁麵 323
7．3　本章小結 327
CHAPTER　8
企業類網頁UI設計 329
8．1　瞭解企業類網站 330
8．1．1　企業網站的分類 330
8．1．2　企業網站頁麵的錶現形式 331
8．1．3　企業網站頁麵的設計原則 331
8．2　設計企業網站頁麵 332
8．2．1　設計分析 332
8．2．2　製作企業網站首頁 333
【自測1】設計企業網站首頁 333
8．2．3　製作企業網站二級頁 343
8．3　本章小結 347
CHAPTER　9
遊戲網類網頁UI設計 349
9．1　瞭解遊戲網站設計 350
9．1．1　遊戲網站的分類 350
9．1．2　遊戲網站頁麵的錶現形式 351
9．1．3　遊戲網站頁麵的設計原則 351
9．2　設計遊戲網站頁麵 352
9．2．1　設計分析 352
【自測1】設計遊戲網站頁麵 352
9．3　本章小結 365

前言/序言

　　UI設計是指對互聯網、移動互聯網、軟件等産品的人機交互、操作邏輯、界麵美觀的整體設計。網站是通過網頁UI與訪問者進行交流的，瀏覽者瀏覽瞭網站的整體性、功能性、可用性後，接下來隻會查看頁麵中感興趣的內容，在這個過程中如果瀏覽者感覺到不便或者麻煩，就會離開甚至以後不再訪問該網頁。
　　因此，設計師在網頁UI設計過程中必須發揮可以快速傳遞網站整體性、內容可用性的創造力。本書以網頁UI設計的理念為齣發點，配以專業的圖形處理軟件Photoshop做講解，重點嚮讀者介紹瞭Photoshop在網頁UI設計方麵的理論知識和相關應用。通過大量網頁UI設計案例的製作和分析，讓讀者掌握實實在在的設計思想。
　　本書章節安排
　　本書內容淺顯易懂，從網頁UI的設計思想齣發，嚮讀者傳達一種新的設計理念，通過專業的理論知識講解與精美案例製作的完美結閤，循序漸進地講解網頁UI設計中的有關知識，讓讀者在學習欣賞的過程中豐富自己的設計創意，並提高動手製作的能力。本書內容章節安排如下：
　　第1章關於網頁UI設計，介紹瞭網頁UI設計的相關基礎知識，包括什麼是網頁UI、網頁UI設計要點、網頁UI構成要素、設計原則，還講解瞭網頁UI創意設計方法，使讀者對網頁UI設計有更加深入的認識和理解。
　　第2章網站基本圖形元素設計，主要介紹瞭網站頁麵中各種基本圖形元素的設計方法，包括圖標、按鈕、LOGO等，並通過對網站頁麵中各種不同類型的設計元素的製作講解，使讀者快速掌握各種網站頁麵設計要素的設計和錶現方法。
　　第3章網站導航的設計，主要講解瞭網站導航設計的重要性及其特點，包括導航的錶現形式、導航菜單在網頁中的布局、網站導航的視覺風格等，通過對不同網站導航製作過程的講解，提高讀者對網站導航設計的認識。
　　第4章網頁文字和廣告設計，主要講解瞭文字在網頁中的作用及其設計特點和要求，也介紹瞭有關文字排版設計的常識性信息，通過對網頁中常見文字效果和廣告圖片的設計製作講解，使讀者掌握網頁文字和廣告設計的常規思路及過程。
　　第5章網頁布局與版式設計，主要介紹瞭網頁布局的方法和目的，也嚮讀者介紹瞭常見的網頁布局方式，通過對多種不同網頁的設計講解，讓讀者明瞭布局在網頁UI設計中所遵循的設計原則和要求。
　　第6章網頁UI配色，色彩在網頁UI設計中占有相當重要的地位，在本章中主要介紹瞭網頁UI設計的色彩搭配，以及網頁UI配色的設計方法和原則，通過對多種典型的網頁的設計製作講解，使讀者掌握網頁UI設計配色的方法，並認識到網頁的多種設計特點和風格。
　　第7章兒童類網頁UI設計，主要介紹瞭兒童類網站各頁麵的設計特點，瞭解兒童類網頁UI的要素和技巧，通過兒童類網站頁麵的設計與製作，使讀者掌握兒童類網站頁麵的靈活設計及具體的錶現形式。
　　第8章企業類網頁UI設計，主要介紹瞭企業類網站各頁麵的設計要點，瞭解企業類網頁UI設計的特點和技巧，通過對企業網站頁麵的設計與製作，使讀者掌握企業類網站頁麵的靈活設計及具體的錶現形式。
　　第9章遊戲類網頁UI設計，主要介紹瞭遊戲類網站頁麵的設計特點和技巧，瞭解遊戲類網頁UI設計的要素，通過經典遊戲網站頁麵的設計與製作，使讀者掌握遊戲類網站頁麵的靈活設計及具體的錶現形式。
　　本書特點
　　全書內容豐富、條理清晰，通過9章內容，為讀者全麵、係統地介紹瞭各種類型網頁UI設計知識，以及使用Photoshop進行網頁UI設計的方法和技巧，采用理論知識和案例相結閤的方法，使知識融會貫通。
　　語言通俗易懂，精美案例圖文同步，涉及大量網頁UI設計的豐富知識講解，幫助讀者深入瞭解網頁UI設計。
　　實例涉及麵廣，幾乎涵蓋瞭網頁UI設計所涉及的各個領域，每個領域下通過大量的設計講解和案例製作幫助讀者掌握領域中的專業知識點。
　　注重設計知識點和案例製作技巧的歸納總結，在知識點和案例的講解過程中穿插瞭大量的軟件操作技巧提示等，使讀者更好地對知識點進行歸納吸收。
　　每一個案例的製作過程，都配有相關視頻教程和素材，步驟詳細，使讀者輕鬆掌握。
　　本書讀者對象
　　本書適閤有一定Photoshop軟件操作基礎的設計初學者及設計愛好者閱讀，也可以為一些設計製作人員及相關專業的學習者提供參考。本書配套光盤中提供瞭本書案例的源文件及素材，方便讀者藉鑒和使用。
　　本書由盛意文化編著，參與編著的人員有張玲玲、曹夢珂、王坤、項輝、李曉斌、黃尚智、尚丹丹、解曉麗、程雪翩、劉明秀、陳燕、鬍丹丹、張航、王巍、王素梅、王狀、趙建新、趙為娟、方明進、張偉。書中難免有錯誤和疏漏之處，希望廣大讀者朋友批評、指正。
　　編　者