簡體書 » 網頁UI設計之道

內容簡介

一個優秀的網站，通常具備豐富的內容、美觀的界面效果和獨特的風格，並在這幾個方面能夠實現和諧的統一。在多姿多彩的互聯網世界中，美觀的界面效果和鮮明的設計風格能夠給瀏覽者留下深刻的印象。

本書是一本使用Photoshop進行網頁UI設計制作的案例教程，語言淺顯易懂，配合大量精美的網頁UI設計案例，講解了有關網頁UI設計的相關知識和使用Photoshop進行網頁UI設計制作的方法和技巧；可使讀者在掌握網頁UI設計各方面知識的同時，能夠在網頁UI設計制作基礎上做到活學活用。

本書共分為9章，全面介紹了網頁UI設計中的理論設計知識以及具體案例的制作方法；第1章：關於網頁UI設計，第2章：網站基本圖形元素設計，第3章：網站導航設計，第4章：網頁文字與廣告設計，第5章：網頁布局與版式設計，第6章：網頁UI配色，第7章：兒童類網頁UI設計，第8章：企業類網頁UI設計，第9章：游戲類網頁UI設計。

本書配套的光盤中提供了本書所有案例的源文件及素材，方便讀者借鑒和使用。

本書適合有一定Photoshop軟件操作基礎的設計初學者以及設計愛好者閱讀，也可以為一些設計制作人員以及相關專業的學習者提供參考。

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

CHAPTER 1
關於網頁UI設計 1
1.1 了解網頁UI2
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）設計影視網站LOGO84
（自測9）設計娛樂網站LOGO90
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設計案例的制作和分析，讓讀者掌握實實在在的設計思想。

看更多