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

第１章　手機(jī)UI 設(shè)計概述
1．1　手機(jī)UI 設(shè)計概述　002
1．1．1　什么是UI ？　002
1．1．2　優(yōu)秀的UI 具有哪些特點(diǎn)　003
1．2　UI 設(shè)計的布局和分類　003
1．2．1　UI 設(shè)計的布局　003
1．2．2　UI 設(shè)計的分類　005
1．3　如何制作出優(yōu)秀的UI　008
1．4　UI 設(shè)計師如何自我提升　012
1．4．1　形狀/ 輪廓　012
1．4．2　美術(shù)基礎(chǔ)　013
1．4．3　色彩識別　013
1．4．4　引導(dǎo)視覺　014
設(shè)計思路：如何設(shè)計出更加友好的UI　016
知識擴(kuò)展：瀏覽本書所有范例，從視覺上總結(jié)　UI 設(shè)計的基本要素　018
第2　章 手機(jī)UI 設(shè)計基礎(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è)計相關(guān)知識　023
2．2．1　什么是UI 設(shè)計　023
2．2．2　UI 設(shè)計的目的和重要性　024
2．2．3　UI 設(shè)計中最重要的元素是什么　024
2．2．4　平面UI 與手機(jī)UI 的不同　025
2．3　UI 設(shè)計的原則　026
設(shè)計思路：一個UI　設(shè)計師去找工作，如何展示他的價值　029
知識擴(kuò)展：思考一下UI　設(shè)計的流程？　029
第3　章 Photoshop 制作圖標(biāo)常用的編輯操作
3．1　UI 設(shè)計的準(zhǔn)則　032
3．2　圖標(biāo)設(shè)計的格式和大小　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è)計一組圖標(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è)計思路：設(shè)計圖標(biāo)的三個階段　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è)計思路：繪制基本形狀　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è)計思路：在　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è)計思路1：Apple　和Android 移動端尺寸指南　139
設(shè)計思路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è)計思路1：圖標(biāo)設(shè)計的流程　175
設(shè)計思路2：如何讓圖標(biāo)更具吸引力　176
知識擴(kuò)展：立體圖標(biāo)的設(shè)計原則　177
第8　章 手機(jī)UI 的按鈕設(shè)計
實(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è)計思路：如何設(shè)計和諧的交互　212
知識擴(kuò)展：設(shè)計師關(guān)于按鈕設(shè)計的幾點(diǎn)建議　213
第9　章 手機(jī)UI 局部設(shè)計
實(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è)計思路：如何制作配色卡　246
知識擴(kuò)展：關(guān)于進(jìn)度條設(shè)計的幾點(diǎn)建議　250
第10　章 手機(jī)UI 零件設(shè)計大集合
實(shí)戰(zhàn)01　進(jìn)度條　252
實(shí)戰(zhàn)02　音量設(shè)置　262
實(shí)戰(zhàn)03　選項(xiàng)設(shè)置　278
設(shè)計思路：導(dǎo)航列表的設(shè)計原則　288
第11　章 手機(jī)UI 整體制作
實(shí)戰(zhàn)01　Windows Phone 手機(jī)UI 總體設(shè)計　291
實(shí)戰(zhàn)02　蘋果手機(jī)IOS UI 總體設(shè)計　307
實(shí)戰(zhàn)03　Android 手機(jī)UI 總體設(shè)計　320
附錄　網(wǎng)絡(luò)資源與常用UI 設(shè)計工具
1．　網(wǎng)上資源　336
2．　原型設(shè)計輔助工具　338