Photoshop+PxCook+Cutterman網(wǎng)頁UI設(shè)計教程

定　價：￥89.80

作　者：	李曉斌
出版社：	電子工業(yè)出版社
叢編項：
標(biāo)　簽：	暫缺

購買這本書可以去

ISBN：	9787121414329	出版時間：	2021-08-01	包裝：	平裝-膠訂
開本：	16開	頁數(shù)：	232	字?jǐn)?shù)：

內(nèi)容簡介

　　本書主要講解了iOS系統(tǒng)和Android系統(tǒng)兩種移動設(shè)備系統(tǒng)界面的結(jié)構(gòu)及設(shè)計規(guī)范，全面解析了移動端App界面的設(shè)計流程及技巧。本書還介紹了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流軟件進行UI設(shè)計制作。本書共6章。第1章主要講解移動UI設(shè)計基礎(chǔ)；第2章主要講解iOS系統(tǒng)界面設(shè)計；第3章主要講解Android系統(tǒng)界面設(shè)計；第4章主要講解移動UI圖標(biāo)設(shè)計；第5章主要講解iOS系統(tǒng)界面應(yīng)用設(shè)計；第6章主要講解Android系統(tǒng)界面應(yīng)用設(shè)計。本書將提供全部案例的素材、源文件和教學(xué)視頻，讀者可以結(jié)合書、練習(xí)文件和教學(xué)視頻，提升移動端App界面設(shè)計的學(xué)習(xí)效率。

作者簡介

　　李曉斌，多年視頻剪輯與特效制作工作背景與設(shè)計經(jīng)驗，精通視頻講解與特效相關(guān)軟件，熟練掌握After Effect軟件的各項功能與操作技巧，能夠完成視頻特效的添加與優(yōu)化。優(yōu)秀的團隊合作精神，對工作認(rèn)真負責(zé)，積極主動，思維嚴(yán)謹(jǐn)，具有較高的技術(shù)水平和豐富的工作經(jīng)驗。曾出版多本相關(guān)教材，參與多所院校的視頻剪輯的培訓(xùn)工作。

圖書目錄

第1章網(wǎng)頁UI設(shè)計初體驗
1.1 初識網(wǎng)頁UI ···································1
1.2 網(wǎng)頁UI的分類 ································2
1.3 網(wǎng)頁UI設(shè)計的工作流程 ····················5
1.3.1 網(wǎng)頁產(chǎn)品調(diào)研 ···············································.5
1.3.2 網(wǎng)頁原型設(shè)計 ···············································.6
1.3.3 設(shè)計網(wǎng)頁UI ··················································.7
1.3.4 網(wǎng)頁UI 標(biāo)注 ·················································.8
1.3.5 網(wǎng)頁UI 切圖輸出 ·········································.8
1.4 深刻理解網(wǎng)頁UI設(shè)計原則 ·················8
1.4.1 視覺美觀 ·······················································.8
1.4.2 主題明確 ·······················································.9
1.4.3 內(nèi)容與形式相統(tǒng)一 ·····································.10
1.4.4 整體性 ·························································.11
1.4.5 快速加載 ·····················································.11
1.4.6 為用戶考慮 ·················································.12
1.5 網(wǎng)頁UI的設(shè)計風(fēng)格 ························13
1.5.1 擬物化風(fēng)格 ·················································.13
1.5.2 扁平化風(fēng)格 ·················································.13
1.5.3 極簡化風(fēng)格 ·················································.14
1.5.4 3D 風(fēng)格 ·······················································.14
1.5.5 插畫風(fēng)格 ·····················································.15
1.5.6 低多邊形風(fēng)格 ·············································.15
1.5.7 無邊框風(fēng)格 ·················································.15
1.5.8 縱向分割風(fēng)格 ·············································.16
1.5.9 超級頭版風(fēng)格 ·············································.17
1.6 設(shè)計網(wǎng)頁UI的常用工具 ··················17
1.6.1 Axure RP 9 ···················································.17
1.6.2 Photoshop 和Illustrator·······························.18
1.6.3 Sketch 和Adobe XD ···································.21
1.6.4 PxCook 和Cutterman ·································.23
1.7 本章小結(jié) ····································24
第2章合理的網(wǎng)頁版式與布局
2.1 了解網(wǎng)頁布局 ······························25
2.1.1 網(wǎng)頁布局的目的 ·········································.25
2.1.2 網(wǎng)頁布局的操作流程 ·································.26
2.2 網(wǎng)頁布局的基本方法 ·····················27
2.2.1 網(wǎng)頁的布局設(shè)計 ·········································.27
2.2.2 網(wǎng)頁布局的原則 ·········································.28
2.3 網(wǎng)頁布局的常見類型 ·····················29
2.3.1 國字型 ·························································.30
2.3.2 拐角型 ·························································.30
2.3.3 標(biāo)題正文型 ·················································.31
2.3.4 左右框架型 ·················································.31
2.3.5 上下框架型 ·················································.31
2.3.6 封面型 ·························································.32
2.3.7 變化型 ·························································.33
2.4 根據(jù)內(nèi)容位置決定網(wǎng)頁布局方式 ······33
2.4.1 滿屏式網(wǎng)頁布局 ·········································.33
2.4.2 一欄式網(wǎng)頁布局 ·········································.34
實戰(zhàn)練習(xí)01——設(shè)計并制作白酒網(wǎng)頁 ···············.35
2.4.3 兩欄式網(wǎng)頁布局 ·········································.40
實戰(zhàn)練習(xí)02——布局啤酒網(wǎng)站 ···························.42
2.4.4 三欄式網(wǎng)頁布局 ·········································.45
2.4.5 水平和垂直居中的網(wǎng)頁布局 ·····················.47
2.5 頁面分割方向的布局方式 ···············48
2.5.1 縱向分割 ·····················································.48
2.5.2 橫向分割 ·····················································.49
實戰(zhàn)練習(xí)03——布局家居網(wǎng)站 ···························.49
2.5.3 縱向與橫向復(fù)合型 ·····································.52
2.5.4 運用固定區(qū)域的設(shè)計 ·································.53
2.6 網(wǎng)頁布局的特性 ···························53
2.7 PC端與移動端網(wǎng)頁布局的區(qū)別 ········55
2.8 本章小結(jié) ····································56
第3章奠定基礎(chǔ)的網(wǎng)頁構(gòu)成元素
3.1 網(wǎng)頁中的線條 ······························57
3.1.1 點、線、面的關(guān)系 ·····································.57
3.1.2 網(wǎng)頁中應(yīng)用的線條風(fēng)格 ·····························.58
3.1.3 線條在網(wǎng)頁UI 中的作用 ···························.62
3.2 網(wǎng)頁中的標(biāo)志 ······························66
3.2.1 網(wǎng)頁標(biāo)志的尺寸 ·········································.66
3.2.2 網(wǎng)頁標(biāo)志的特點 ·········································.66
3.2.3 網(wǎng)頁標(biāo)志的設(shè)計規(guī)范 ·································.67
實戰(zhàn)練習(xí)01——設(shè)計并制作網(wǎng)頁標(biāo)志 ···············.69
3.2.4 網(wǎng)頁標(biāo)志的表現(xiàn)形式 ·································.71
3.3 網(wǎng)頁中的圖標(biāo)和按鈕 ·····················73
3.3.1 網(wǎng)頁圖標(biāo)的概念 ·········································.73
3.3.2 網(wǎng)頁圖標(biāo)的設(shè)計原則 ·································.73
3.3.3 網(wǎng)頁圖標(biāo)的應(yīng)用 ·····································3