基本介紹
- 書名：超越平凡的視覺設計：網頁設計原理
- 作者：[日] 久保田涼子
- ISBN：9787115495204
- 類別：設計
- 定價：88.0
- 出版社：人民郵電出版社
- 出版時間：2019-01
- 裝幀：平裝
- 開本：16開
圖書簡介,作者簡介,圖書目錄,
圖書簡介
現代社會，網際網路、計算機硬體、移動終端設備的發展日新月異，對於企業和用戶來說，網站是一個很好的宣傳與交流平台，它既是企業形象的展示平台，又是用戶了解企業產品的平台，因此網頁的視覺效果尤為重要。那么對於從事或即將從事網頁設計的讀者來說，如何才能高效又快速地製作出抓人眼球的網頁頁面呢？本書將帶領讀者從網頁設計的基礎知識開始學起。 全書共分為8個部分：Part 0介紹了網頁設計的基礎知識，包括服務對象決定的設計核心內容、建立網站所用的工作流引擎、頁面內所使用的設計要素等內容；Part 1則從字型、素材、配色三個方面分析了如何把握網頁設計的風格；Part 2依次對顏色的固有印象、搭配方法、調配方法以及配色理論進行了講解；Part 3則從多個角度對不同行業、不同領域的網站中出現的信息設計方法及異同之處進行了分析，同時在功能、配色、版式等方面進行了逐一解析，使讀者在實際的網頁設計工作中可以作為參考；Part 4則針對PC、平板電腦、智慧型手機等設備的顯示尺寸，從版式、構圖兩方面講解了如何不斷最佳化網頁；Part 5詳細講解了如何將照片、手繪插畫等素材及字型、程式套用到網頁設計中；Part 6對於如何設計好“當下流行”的網頁、版式布局的流行趨勢，以及*的網頁技術進行了講解和總結；Part 7對網頁中頁眉、頁腳、標題等設計要素進行了分類講解，並介紹了各個要素的配置方式和版式設計，供讀者參考學習。 本書案例豐富、講解清晰、版式新穎，適合網頁設計師、用戶體驗設計師、前端頁面開發人員閱讀使用，同時還可作為各院校相關專業的教材。
作者簡介
久保田涼子（KUBOTA RYUKO） 1982年出生於日本廣島縣廣島市。畢業於東京女子大學心理學專業。是一位以“產生令人心動的產品、時間、場所”為主題的自由創作者。 擔任從事網頁製作業務的Coco-Factory公司的法人，創作者集團ROOT的法人。 在數字好萊塢STUDIO涉谷、以及廣島講師開展線上講座並從事教材的便攜，還涉足多項公開研究課程的開發。 其負責了多國不同領域企業的網站設計總監，還擔任一些知名企業的設計顧問。 此外，還擔任過不同展會活動的監製。
圖書目錄
目錄
本書的使用方法····························· 8
PART 0 網頁設計基礎知識
01 網頁設計基礎知識························ 10
02 網頁的結構和工作流程······················ 12
03 在網頁中加入設計部件······················ 14
專欄 關於網頁瀏覽器························· · 14
04 網頁中所用的圖像························ 16
05 網頁設計與文字版式······················· 18
專欄 設計小竅門···························· 19
06 色彩的基礎知識························· 20
專欄 通過調整補色讓照片的色調更加理想················ · 21
專欄 顏色搭配方法的參考網站····················· · 23
專欄 用於判斷色覺異常患者所看顏色效果的工具·············· 23
專欄 在醒目位置或頁面按鈕上反映出顏色的印象·············· 23
07 配色的基礎知識························· 24
專欄 可供參考的網頁設計網站···················· ·· 26
PART 1 從風格方面進行網頁設計
01 源自可愛的萌動設計······················· 28
02 充滿活力的流行風格設計····················· 30
03 洋溢著雅致高端氣息的設計···················· 32
04 自然柔和的設計························· 34
05 炫酷先進的設計························· 36
06 信任可靠的設計························· 38
07 復古懷舊的設計························· 40
專欄 復古風格的字型在CSS中的表現方法·················· 41
08 古典高雅的設計························· 42
09 日式和風的設計························· 44
10 透明感的設計·························· 46
11 面向兒童用戶的設計······················· 48
12 女人味的設計·························· 50
13 男人味的設計·························· 52
14 高級感的設計·························· 54
15 讓食物看起來更美味的設計···················· 56
16 帶有季節感的設計························ 58
專欄 可商用的攝影素材網站·················· ····· 60
PART 2 從配色方面進行網頁設計
01 基於標誌、品牌顏色的配色···················· 62
02 以黃色為基調的配色······················· 64
03 以橙色為基調的配色······················· 66
04 以紅色為基調的配色······················· 68
05 以粉色為基調的配色······················· 70
06 以紫色為基調的配色······················· 72
07 以藍色為基調的配色······················· 74
08 以綠色為基調的配色······················· 76
09 以茶色為基調的配色······················· 78
10 以白色和灰色為基調的配色···················· 80
11 以黑色為基調的配色······················· 82
12 與色調相結合的配色······················· 84
專欄 配色生成器與瀏覽器外掛程式····················· · 86
PART 3 從不同行業、領域方面進行網頁設計
01 西餐廳、咖啡店類網站的網頁設計················· 88
02 醫療機構類網站的網頁設計···················· 90
03 流行時尚類網站的網頁設計···················· 92
04 美容、美發類網站的網頁設計··················· 94
05 藝術節、展覽類網站的網頁設計·················· 96
06 音樂類網站的網頁設計······················ 98
07 動畫、遊戲類網站的網頁設計··················· 100
08 職業資格類網站的網頁設計···················· 102
09 學校、幼稚園類網站的網頁設計·················· 104
10 藝術類網站的網頁設計······················ 106
11 新聞、門戶類網站的網頁設計··················· 108
12 電子商務類網站的網頁設計··············· ···· 110
專欄 電子商務網站與平台······················· · 111
13 企業類網站的網頁設計······················ 112
14 體育健身類網站的網頁設計···················· 114
15 引導頁的網頁設計························ 116
專欄 提供引導頁參考的網站················· ··· ·· 117
專欄 將使用目的與網頁設計結合起來的方法·············· ·· 118
PART 4 從版式、構圖方面進行網頁設計
01 格線型版式··························· 120
專欄 在Photoshop中輕鬆製作參考線···················· 121
02 卡片、瓷磚型版式························ 122
03 單專欄型版式·························· 124
04 雙專欄型版式·························· 126
05 組合專欄型版式························· 128
06 全螢幕型版式··························· 130
07 脫離格線型版式························· 132
08 自由型版式··························· 134
專欄 版式設計的4個法則························· 136
PART 5 使用素材、字型、程式的設計
01 以圖像素材為主體的設計····················· 138
專欄 豐富的視差效果帶來的魅力····················· 140
02 使用摳圖照片的設計······················· 142
03 使用紋理材質的設計······················· 144
04 使用裝飾素材的設計······················· 146
05 使用手繪插圖的設計······················· 148
06 使用文字版式的設計······················· 150
07 有效運用視頻的設計······················· 152
08 帶有動態特效的設計······················· 154
09 展示數據圖像的設計······················· 156
專欄 能夠輕鬆製作出統計圖和圖表的Java Script庫············· 157
專欄 Font Awsome的導入方法······················· 158
PART 6 網頁設計的趨勢
01 回響式網頁設計························· 160
02 網頁字型·········· 162
專欄 提供網頁字型服務的網站·················· ···· 163
03 分屏式設計··························· 164
04 扁平化設計和材料設計······················ 166
專欄 採用材料設計語言的示例網站···················· 167
05 微互動式設計·························· 168
專欄 從手機APP的UI中學習微互動的套用·················· 169
06 品牌主視覺設計························· 170
07 視差設計···························· 172
專欄 能夠實現視差效果的jQuery外掛程式示例················· 173
08 雙色調設計··························· 174
專欄 雙色調圖像的製作方法······················· 175
09 文字豎排的版式設計······················· 176
專欄 使用可更新編輯的WordPress····················· 178
PART 7 網頁各個要素的設計
01 頁眉······························ 180
02 全局導航欄··························· 182
03 標題························ ······184
04 按鈕、圖示··························· 185
05 表格······························ 186
06 填寫項目···························· 187
07 頁腳····························· ·188
專欄 收藏夾圖示的設定方法······················· 190
本書的使用方法····························· 8
PART 0 網頁設計基礎知識
01 網頁設計基礎知識························ 10
02 網頁的結構和工作流程······················ 12
03 在網頁中加入設計部件······················ 14
專欄 關於網頁瀏覽器························· · 14
04 網頁中所用的圖像························ 16
05 網頁設計與文字版式······················· 18
專欄 設計小竅門···························· 19
06 色彩的基礎知識························· 20
專欄 通過調整補色讓照片的色調更加理想················ · 21
專欄 顏色搭配方法的參考網站····················· · 23
專欄 用於判斷色覺異常患者所看顏色效果的工具·············· 23
專欄 在醒目位置或頁面按鈕上反映出顏色的印象·············· 23
07 配色的基礎知識························· 24
專欄 可供參考的網頁設計網站···················· ·· 26
PART 1 從風格方面進行網頁設計
01 源自可愛的萌動設計······················· 28
02 充滿活力的流行風格設計····················· 30
03 洋溢著雅致高端氣息的設計···················· 32
04 自然柔和的設計························· 34
05 炫酷先進的設計························· 36
06 信任可靠的設計························· 38
07 復古懷舊的設計························· 40
專欄 復古風格的字型在CSS中的表現方法·················· 41
08 古典高雅的設計························· 42
09 日式和風的設計························· 44
10 透明感的設計·························· 46
11 面向兒童用戶的設計······················· 48
12 女人味的設計·························· 50
13 男人味的設計·························· 52
14 高級感的設計·························· 54
15 讓食物看起來更美味的設計···················· 56
16 帶有季節感的設計························ 58
專欄 可商用的攝影素材網站·················· ····· 60
PART 2 從配色方面進行網頁設計
01 基於標誌、品牌顏色的配色···················· 62
02 以黃色為基調的配色······················· 64
03 以橙色為基調的配色······················· 66
04 以紅色為基調的配色······················· 68
05 以粉色為基調的配色······················· 70
06 以紫色為基調的配色······················· 72
07 以藍色為基調的配色······················· 74
08 以綠色為基調的配色······················· 76
09 以茶色為基調的配色······················· 78
10 以白色和灰色為基調的配色···················· 80
11 以黑色為基調的配色······················· 82
12 與色調相結合的配色······················· 84
專欄 配色生成器與瀏覽器外掛程式····················· · 86
PART 3 從不同行業、領域方面進行網頁設計
01 西餐廳、咖啡店類網站的網頁設計················· 88
02 醫療機構類網站的網頁設計···················· 90
03 流行時尚類網站的網頁設計···················· 92
04 美容、美發類網站的網頁設計··················· 94
05 藝術節、展覽類網站的網頁設計·················· 96
06 音樂類網站的網頁設計······················ 98
07 動畫、遊戲類網站的網頁設計··················· 100
08 職業資格類網站的網頁設計···················· 102
09 學校、幼稚園類網站的網頁設計·················· 104
10 藝術類網站的網頁設計······················ 106
11 新聞、門戶類網站的網頁設計··················· 108
12 電子商務類網站的網頁設計··············· ···· 110
專欄 電子商務網站與平台······················· · 111
13 企業類網站的網頁設計······················ 112
14 體育健身類網站的網頁設計···················· 114
15 引導頁的網頁設計························ 116
專欄 提供引導頁參考的網站················· ··· ·· 117
專欄 將使用目的與網頁設計結合起來的方法·············· ·· 118
PART 4 從版式、構圖方面進行網頁設計
01 格線型版式··························· 120
專欄 在Photoshop中輕鬆製作參考線···················· 121
02 卡片、瓷磚型版式························ 122
03 單專欄型版式·························· 124
04 雙專欄型版式·························· 126
05 組合專欄型版式························· 128
06 全螢幕型版式··························· 130
07 脫離格線型版式························· 132
08 自由型版式··························· 134
專欄 版式設計的4個法則························· 136
PART 5 使用素材、字型、程式的設計
01 以圖像素材為主體的設計····················· 138
專欄 豐富的視差效果帶來的魅力····················· 140
02 使用摳圖照片的設計······················· 142
03 使用紋理材質的設計······················· 144
04 使用裝飾素材的設計······················· 146
05 使用手繪插圖的設計······················· 148
06 使用文字版式的設計······················· 150
07 有效運用視頻的設計······················· 152
08 帶有動態特效的設計······················· 154
09 展示數據圖像的設計······················· 156
專欄 能夠輕鬆製作出統計圖和圖表的Java Script庫············· 157
專欄 Font Awsome的導入方法······················· 158
PART 6 網頁設計的趨勢
01 回響式網頁設計························· 160
02 網頁字型·········· 162
專欄 提供網頁字型服務的網站·················· ···· 163
03 分屏式設計··························· 164
04 扁平化設計和材料設計······················ 166
專欄 採用材料設計語言的示例網站···················· 167
05 微互動式設計·························· 168
專欄 從手機APP的UI中學習微互動的套用·················· 169
06 品牌主視覺設計························· 170
07 視差設計···························· 172
專欄 能夠實現視差效果的jQuery外掛程式示例················· 173
08 雙色調設計··························· 174
專欄 雙色調圖像的製作方法······················· 175
09 文字豎排的版式設計······················· 176
專欄 使用可更新編輯的WordPress····················· 178
PART 7 網頁各個要素的設計
01 頁眉······························ 180
02 全局導航欄··························· 182
03 標題························ ······184
04 按鈕、圖示··························· 185
05 表格······························ 186
06 填寫項目···························· 187
07 頁腳····························· ·188
專欄 收藏夾圖示的設定方法······················· 190
