Photoshop智能手機(jī)UI設(shè)計(jì)

第１章　手機(jī)UI 設(shè)計(jì)概述
1．1　手機(jī)UI 設(shè)計(jì)概述　002
1．1．1　什么是UI ？　002
1．1．2　優(yōu)秀的UI 具有哪些特點(diǎn)　003
1．2　UI 設(shè)計(jì)的布局和分類　003
1．2．1　UI 設(shè)計(jì)的布局　003
1．2．2　UI 設(shè)計(jì)的分類　005
1．3　如何制作出優(yōu)秀的UI　008
1．4　UI 設(shè)計(jì)師如何自我提升　012
1．4．1　形狀/ 輪廓　012
1．4．2　美術(shù)基礎(chǔ)　013
1．4．3　色彩識別　013
1．4．4　引導(dǎo)視覺　014
設(shè)計(jì)思路：如何設(shè)計(jì)出更加友好的UI　016
知識擴(kuò)展：瀏覽本書所有范例，從視覺上總結(jié)　UI 設(shè)計(jì)的基本要素　018
第2　章 手機(jī)UI 設(shè)計(jì)基礎(chǔ)
2．1　關(guān)于手機(jī)　021
2．1．1　智能手機(jī)操作系統(tǒng)的分類　021
2．1．2　手機(jī)屏幕的分辨率　021
2．1．3　屏幕的色彩　022
2．2　UI 設(shè)計(jì)相關(guān)知識　023
2．2．1　什么是UI 設(shè)計(jì)　023
2．2．2　UI 設(shè)計(jì)的目的和重要性　024
2．2．3　UI 設(shè)計(jì)中最重要的元素是什么　024
2．2．4　平面UI 與手機(jī)UI 的不同　025
2．3　UI 設(shè)計(jì)的原則　026
設(shè)計(jì)思路：一個(gè)UI　設(shè)計(jì)師去找工作，如何展示他的價(jià)值　029
知識擴(kuò)展：思考一下UI　設(shè)計(jì)的流程？　029
第3　章 Photoshop 制作圖標(biāo)常用的編輯操作
3．1　UI 設(shè)計(jì)的準(zhǔn)則　032
3．2　圖標(biāo)設(shè)計(jì)的格式和大小　034
3．2．1　JPEG 格式　034
3．2．2　PNG 格式　034
3．2．3　GIF 格式　034
3．2．4　圖標(biāo)尺寸大小　035
3．3　跟大師設(shè)計(jì)一組圖標(biāo)　036
3．3．1　準(zhǔn)備工作　036
3．3．2　構(gòu)思、草圖　036
3．3．3　輔助背景制作　037
3．3．4　基本形、放大　038
3．3．5　創(chuàng)作過程　038
3．3．6　常用方法——變形　040
3．3．7　成品　041
設(shè)計(jì)思路：設(shè)計(jì)圖標(biāo)的三個(gè)階段　042
知識擴(kuò)展：圖標(biāo)格式的那點(diǎn)事　044
第4　章 手機(jī)UI 的平面圖標(biāo)制作
實(shí)戰(zhàn)01　Home 圖標(biāo)制作　049
實(shí)戰(zhàn)02　日歷圖標(biāo)制作　051
實(shí)戰(zhàn)03　錄音機(jī)圖標(biāo)制作　053
實(shí)戰(zhàn)04　文件夾圖標(biāo)制作　055
實(shí)戰(zhàn)05　徽章圖形　058
實(shí)戰(zhàn)06　秒表圖形　062
設(shè)計(jì)思路：繪制基本形狀　067
知識擴(kuò)展1：了解繪圖模式　070
知識擴(kuò)展2：了解圖層樣式　071
第5　章 手機(jī)UI 的字效表現(xiàn)
實(shí)戰(zhàn)01　車燈字體　073
實(shí)戰(zhàn)02　星星字體　078
實(shí)戰(zhàn)03　牛仔布料字體　084
設(shè)計(jì)思路：在　APP UI 中如何控制字號　088
知識擴(kuò)展：字體配色的那點(diǎn)事　090
第6　章 手機(jī)UI 的質(zhì)感表現(xiàn)
實(shí)戰(zhàn)01　金屬　093
實(shí)戰(zhàn)02　膠布　098
實(shí)戰(zhàn)03　玻璃　101
實(shí)戰(zhàn)04　光滑表面　107
實(shí)戰(zhàn)05　木紋　115
實(shí)戰(zhàn)06　皮革　119
實(shí)戰(zhàn)07　紙張　124
實(shí)戰(zhàn)08　陶瓷　126
實(shí)戰(zhàn)09　光滑漆皮　129
實(shí)戰(zhàn)10　塑料、金屬和玻璃綜合表現(xiàn)　135
設(shè)計(jì)思路1：Apple　和Android 移動端尺寸指南　139
設(shè)計(jì)思路2：iOS　扁平化系統(tǒng)有哪些特色　140
知識擴(kuò)展：關(guān)于透明元素和透明度使用的藝術(shù)　142
第7　章 手機(jī)UI 的立體圖標(biāo)制作
實(shí)戰(zhàn)01　Dribbbleb 圖標(biāo)制作　145
實(shí)戰(zhàn)02　按鈕圖標(biāo)制作　150
實(shí)戰(zhàn)03　Chrome 圖標(biāo)制作　159
實(shí)戰(zhàn)04　twieer 圖標(biāo)制作　164
實(shí)戰(zhàn)05　照相機(jī)圖標(biāo)制作　169
設(shè)計(jì)思路1：圖標(biāo)設(shè)計(jì)的流程　175
設(shè)計(jì)思路2：如何讓圖標(biāo)更具吸引力　176
知識擴(kuò)展：立體圖標(biāo)的設(shè)計(jì)原則　177
第8　章 手機(jī)UI 的按鈕設(shè)計(jì)
實(shí)戰(zhàn)01　發(fā)光按鈕　179
實(shí)戰(zhàn)02　控制鍵按鈕　183
實(shí)戰(zhàn)03　播放器按鈕　188
實(shí)戰(zhàn)04　清新開關(guān)按鈕　195
實(shí)戰(zhàn)05　高調(diào)旋鈕　204
設(shè)計(jì)思路：如何設(shè)計(jì)和諧的交互　212
知識擴(kuò)展：設(shè)計(jì)師關(guān)于按鈕設(shè)計(jì)的幾點(diǎn)建議　213
第9　章 手機(jī)UI 局部設(shè)計(jì)
實(shí)戰(zhàn)01　登錄UI　216
實(shí)戰(zhàn)02　設(shè)置UI 開關(guān)　222
實(shí)戰(zhàn)03　通知列表UI　230
實(shí)戰(zhàn)04　日歷UI　238
設(shè)計(jì)思路：如何制作配色卡　246
知識擴(kuò)展：關(guān)于進(jìn)度條設(shè)計(jì)的幾點(diǎn)建議　250
第10　章 手機(jī)UI 零件設(shè)計(jì)大集合
實(shí)戰(zhàn)01　進(jìn)度條　252
實(shí)戰(zhàn)02　音量設(shè)置　262
實(shí)戰(zhàn)03　選項(xiàng)設(shè)置　278
設(shè)計(jì)思路：導(dǎo)航列表的設(shè)計(jì)原則　288
第11　章 手機(jī)UI 整體制作
實(shí)戰(zhàn)01　Windows Phone 手機(jī)UI 總體設(shè)計(jì)　291
實(shí)戰(zhàn)02　蘋果手機(jī)IOS UI 總體設(shè)計(jì)　307
實(shí)戰(zhàn)03　Android 手機(jī)UI 總體設(shè)計(jì)　320
附錄　網(wǎng)絡(luò)資源與常用UI 設(shè)計(jì)工具
1．　網(wǎng)上資源　336
2．　原型設(shè)計(jì)輔助工具　338