123,123

內(nèi)容簡(jiǎn)介

　　現(xiàn)代社會(huì)，互聯(lián)網(wǎng)、計(jì)算機(jī)硬件、移動(dòng)終端設(shè)備的發(fā)展日新月異，對(duì)于企業(yè)和用戶來(lái)說，網(wǎng)站是一個(gè)很好的宣傳與交流平臺(tái)，它既是企業(yè)形象的展示平臺(tái)，又是用戶了解企業(yè)產(chǎn)品的平臺(tái)，因此網(wǎng)頁(yè)的視覺效果尤為重要。那么對(duì)于從事或即將從事網(wǎng)頁(yè)設(shè)計(jì)的讀者來(lái)說，如何才能高效又快速地制作出抓人眼球的網(wǎng)頁(yè)頁(yè)面呢？本書將帶領(lǐng)讀者從網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)開始學(xué)起。全書共分為8個(gè)部分：Part 0介紹了網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)，包括服務(wù)對(duì)象決定的設(shè)計(jì)核心內(nèi)容、建立網(wǎng)站所用的工作流引擎、頁(yè)面內(nèi)所使用的設(shè)計(jì)要素等內(nèi)容；Part 1則從字體、素材、配色三個(gè)方面分析了如何把握網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格；Part 2依次對(duì)顏色的固有印象、搭配方法、調(diào)配方法以及配色理論進(jìn)行了講解；Part 3則從多個(gè)角度對(duì)不同行業(yè)、不同領(lǐng)域的網(wǎng)站中出現(xiàn)的信息設(shè)計(jì)方法及異同之處進(jìn)行了分析，同時(shí)在功能、配色、版式等方面進(jìn)行了逐一解析，使讀者在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)工作中可以作為參考；Part 4則針對(duì)PC、平板電腦、智能手機(jī)等設(shè)備的顯示尺寸，從版式、構(gòu)圖兩方面講解了如何不斷優(yōu)化網(wǎng)頁(yè)；Part 5詳細(xì)講解了如何將照片、手繪插畫等素材及字體、程序應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中；Part 6對(duì)于如何設(shè)計(jì)好“當(dāng)下流行”的網(wǎng)頁(yè)、版式布局的流行趨勢(shì)，以及*新的網(wǎng)頁(yè)技術(shù)進(jìn)行了講解和總結(jié)；Part 7對(duì)網(wǎng)頁(yè)中頁(yè)眉、頁(yè)腳、標(biāo)題等設(shè)計(jì)要素進(jìn)行了分類講解，并介紹了各個(gè)要素的配置方式和版式設(shè)計(jì)，供讀者參考學(xué)習(xí)。本書案例豐富、講解清晰、版式新穎，適合網(wǎng)頁(yè)設(shè)計(jì)師、用戶體驗(yàn)設(shè)計(jì)師、前端頁(yè)面開發(fā)人員閱讀使用，同時(shí)還可作為各院校相關(guān)專業(yè)的教材。

作者簡(jiǎn)介

　　久保田涼子（KUBOTA RYUKO）1982年出生于日本廣島縣廣島市。畢業(yè)于東京女子大學(xué)心理學(xué)專業(yè)。是一位以“產(chǎn)生令人心動(dòng)的產(chǎn)品、時(shí)間、場(chǎng)所”為主題的自由創(chuàng)作者。擔(dān)任從事網(wǎng)頁(yè)制作業(yè)務(wù)的Coco-Factory公司的法人，創(chuàng)作者集團(tuán)ROOT的法人。在數(shù)字好萊塢STUDIO涉谷、以及廣島講師開展在線講座并從事教材的便攜，還涉足多項(xiàng)公開研究課程的開發(fā)。其負(fù)責(zé)了多國(guó)不同領(lǐng)域企業(yè)的網(wǎng)站設(shè)計(jì)總監(jiān)，還擔(dān)任一些知名企業(yè)的設(shè)計(jì)顧問。此外，還擔(dān)任過不同展會(huì)活動(dòng)的監(jiān)制。

圖書目錄

目錄
本書的使用方法····························· 8

PART　0 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)
01 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)························ 10
02 網(wǎng)頁(yè)的結(jié)構(gòu)和工作流程······················ 12
03 在網(wǎng)頁(yè)中加入設(shè)計(jì)部件······················ 14
專欄關(guān)于網(wǎng)頁(yè)瀏覽器························· · 14
04 網(wǎng)頁(yè)中所用的圖像························ 16
05 網(wǎng)頁(yè)設(shè)計(jì)與文字版式······················· 18
專欄設(shè)計(jì)小竅門···························· 19
06 色彩的基礎(chǔ)知識(shí)························· 20
專欄通過調(diào)整補(bǔ)色讓照片的色調(diào)更加理想················ · 21
專欄顏色搭配方法的參考網(wǎng)站····················· · 23
專欄用于判斷色覺異?；颊咚搭伾Ч墓ぞ?middot;············· 23
專欄在醒目位置或頁(yè)面按鈕上反映出顏色的印象·············· 23
07 配色的基礎(chǔ)知識(shí)························· 24
專欄可供參考的網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站···················· ·· 26

PART　1 從風(fēng)格方面進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)
01 源自可愛的萌動(dòng)設(shè)計(jì)······················· 28
02 充滿活力的流行風(fēng)格設(shè)計(jì)····················· 30
03 洋溢著雅致高端氣息的設(shè)計(jì)···················· 32
04 自然柔和的設(shè)計(jì)························· 34
05 炫酷先進(jìn)的設(shè)計(jì)························· 36
06 信任可靠的設(shè)計(jì)························· 38
07 復(fù)古懷舊的設(shè)計(jì)························· 40
專欄復(fù)古風(fēng)格的字體在CSS中的表現(xiàn)方法·················· 41
08 古典高雅的設(shè)計(jì)························· 42
09 日式和風(fēng)的設(shè)計(jì)························· 44
10 透明感的設(shè)計(jì)·························· 46
11 面向兒童用戶的設(shè)計(jì)······················· 48
12 女人味的設(shè)計(jì)·························· 50
13 男人味的設(shè)計(jì)·························· 52
14 高級(jí)感的設(shè)計(jì)·························· 54
15 讓食物看起來(lái)更美味的設(shè)計(jì)···················· 56
16 帶有季節(jié)感的設(shè)計(jì)························ 58
專欄可商用的攝影素材網(wǎng)站·················· ····· 60

PART　2 從配色方面進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)
01 基于標(biāo)志、品牌顏色的配色···················· 62
02 以黃色為基調(diào)的配色······················· 64
03 以橙色為基調(diào)的配色······················· 66
04 以紅色為基調(diào)的配色······················· 68
05 以粉色為基調(diào)的配色······················· 70
06 以紫色為基調(diào)的配色······················· 72
07 以藍(lán)色為基調(diào)的配色······················· 74
08 以綠色為基調(diào)的配色······················· 76
09 以茶色為基調(diào)的配色······················· 78
10 以白色和灰色為基調(diào)的配色···················· 80
11 以黑色為基調(diào)的配色······················· 82
12 與色調(diào)相結(jié)合的配色······················· 84
專欄配色生成器與瀏覽器插件····················· · 86

PART　3 從不同行業(yè)、領(lǐng)域方面進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)
01 西餐廳、咖啡店類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)················· 88
02 醫(yī)療機(jī)構(gòu)類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)···················· 90
03 流行時(shí)尚類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)···················· 92
04 美容、美發(fā)類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)··················· 94
05 藝術(shù)節(jié)、展覽類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)·················· 96
06 音樂類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)······················ 98
07 動(dòng)畫、游戲類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)··················· 100
08 職業(yè)資格類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)···················· 102
09 學(xué)校、幼兒園類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)·················· 104
10 藝術(shù)類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)······················ 106
11 新聞、門戶類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)··················· 108
12 電子商務(wù)類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)··············· ···· 110
專欄電子商務(wù)網(wǎng)站與平臺(tái)······················· · 111
13 企業(yè)類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)······················ 112
14 體育健身類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)···················· 114
15 引導(dǎo)頁(yè)的網(wǎng)頁(yè)設(shè)計(jì)························ 116
專欄提供引導(dǎo)頁(yè)參考的網(wǎng)站················· ··· ·· 117
專欄將使用目的與網(wǎng)頁(yè)設(shè)計(jì)結(jié)合起來(lái)的方法·············· ·· 118

PART　4 從版式、構(gòu)圖方面進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)
01 網(wǎng)格型版式··························· 120
專欄在Photoshop中輕松制作參考線···················· 121
02 卡片、瓷磚型版式························ 122
03 單專欄型版式·························· 124
04 雙專欄型版式·························· 126
05 組合專欄型版式························· 128
06 全屏型版式··························· 130
07 脫離網(wǎng)格型版式························· 132
08 自由型版式··························· 134
專欄版式設(shè)計(jì)的4個(gè)法則························· 136

PART　5 使用素材、字體、程序的設(shè)計(jì)
01 以圖像素材為主體的設(shè)計(jì)····················· 138
專欄豐富的視差效果帶來(lái)的魅力····················· 140
02 使用摳圖照片的設(shè)計(jì)······················· 142
03 使用紋理材質(zhì)的設(shè)計(jì)······················· 144
04 使用裝飾素材的設(shè)計(jì)······················· 146
05 使用手繪插圖的設(shè)計(jì)······················· 148
06 使用文字版式的設(shè)計(jì)······················· 150
07 有效運(yùn)用視頻的設(shè)計(jì)······················· 152
08 帶有動(dòng)態(tài)特效的設(shè)計(jì)······················· 154
09 展示數(shù)據(jù)圖像的設(shè)計(jì)······················· 156
專欄能夠輕松制作出統(tǒng)計(jì)圖和圖表的Java Script庫(kù)············· 157
專欄 Font Awsome的導(dǎo)入方法······················· 158

PART　6 網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)
01 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)························· 160
02 網(wǎng)頁(yè)字體·········· 162
專欄提供網(wǎng)頁(yè)字體服務(wù)的網(wǎng)站·················· ···· 163
03 分屏式設(shè)計(jì)··························· 164
04 扁平化設(shè)計(jì)和材料設(shè)計(jì)······················ 166
專欄采用材料設(shè)計(jì)語(yǔ)言的示例網(wǎng)站···················· 167
05 微交互式設(shè)計(jì)·························· 168
專欄從手機(jī)APP的UI中學(xué)習(xí)微交互的應(yīng)用·················· 169
06 品牌主視覺設(shè)計(jì)························· 170
07 視差設(shè)計(jì)···························· 172
專欄能夠?qū)崿F(xiàn)視差效果的jQuery插件示例················· 173
08 雙色調(diào)設(shè)計(jì)··························· 174
專欄雙色調(diào)圖像的制作方法······················· 175
09 文字豎排的版式設(shè)計(jì)······················· 176
專欄使用可更新編輯的WordPress····················· 178

PART　7 網(wǎng)頁(yè)各個(gè)要素的設(shè)計(jì)
01 頁(yè)眉······························ 180
02 全局導(dǎo)航欄··························· 182
03 標(biāo)題························ ······184
04 按鈕、圖標(biāo)··························· 185
05 表格······························ 186
06 填寫項(xiàng)目···························· 187
07 頁(yè)腳····························· ·188
專欄收藏夾圖標(biāo)的設(shè)置方法······················· 190