Photoshop手機(jī)APP界面設(shè)計從入門到精通

第 01 章 智能手機(jī)UI設(shè)計基礎(chǔ)  1.1　APP UI設(shè)計相關(guān)知識　11  1.1.1　什么是APP UI設(shè)計　11  1.1.2　做APP UI設(shè)計的目的和重要性　11  1.1.3　APP UI設(shè)計中的重要元素　11  1.1.4　平面UI與手機(jī)UI的不同　13  1.2　UI設(shè)計原則　14  1.2.1　區(qū)分重點(diǎn)　14  1.2.2　界面統(tǒng)一性　15  1.2.3　清晰度是重中之重　15  1.2.4　界面存在的意義　16  1.2.5　讓界面處在用戶的掌握之中　16  1.2.6　界面的存在必須有所用途　16  1.2.7　強(qiáng)烈的視覺層次感　17  1.2.8　UI設(shè)計師如何展示他的價值　17  1.3　關(guān)于智能手機(jī)　18  1.3.1　智能手機(jī)操作系統(tǒng)的分類　18  1.3.2　手機(jī)屏幕的分辨率　20  1.3.3　屏幕的色彩　20  1.4　課后練習(xí)——UI設(shè)計的流程　21  1.5　課后思考——優(yōu)秀的手機(jī)UI界面有哪些特點(diǎn)　22  第　02 章 APP界面設(shè)計的色彩理論  2.1　色彩的意象　24  2.1.1　紅色的色彩意象　24  2.1.2　橙色的色彩意象　24  2.1.3　黃色的色彩意象　24  2.1.4　綠色的色彩意象　24  2.1.5　藍(lán)色的色彩意象　25  2.1.6　紫色的色彩意象　25  2.1.7　褐色的色彩意象　25  2.1.8　黑色的色彩意象　25  2.1.9　白色的色彩意象　25  2.1.10　灰色的色彩意象　25  2.2　色彩的重要性　26  2.2.1　色彩的物理效應(yīng)　26  2.2.2　色彩的心理反應(yīng)　26  2.3　色彩的屬性　27  2.3.1　色彩的分類　27  2.3.2　色相　27  2.3.3　明度　27  2.3.4　飽和度　28  2.3.5　色調(diào)　28  2.4　色彩的搭配原則　28  2.4.1　色相配色　29  2.4.2　色調(diào)配色　29  2.4.3　明度配色　30  2.5　課后練習(xí)——制作配色卡.31  2.6　課后思考——如何找到完美的色彩搭配　32  第　03 章 熟悉Photoshop的常用工具  3.1　Photoshop CC的工作界面　40  3.1.1　了解工作界面的工作組件　40  3.1.2　了解工具箱　41  3.1.3　了解選項欄　41  3.1.4　了解狀態(tài)欄　43  3.1.5　了解面板　44  3.1.6　調(diào)整面板　45  3.2　選擇工具46  3.2.1　設(shè)定選區(qū)的工作組　46  3.2.2　矩形選框工具的選項欄　47  3.2.3　磁性套索工具的選項欄　48  3.2.4　魔棒工具的選項欄　49  案例1　利用多邊形套索工具繪制立體盒子　50  3.3　填充工具　51  3.3.1　漸變工具的選項欄　52  3.3.2　油漆桶工具的選項欄　54  案例2　使用漸變工具填充圖像顏色　55  3.4　圖層的編輯　56  3.4.1　理解圖層的概念　56  3.4.2　圖層編組命令　57  3.4.3　排列命令　57  3.4.4　自動對齊圖層命令　58  案例3　調(diào)整圖層的不透明度　58  3.5　蒙版的應(yīng)用　59  3.5.1　“屬性”面板　60  3.5.2　圖層蒙版的原理　61  3.5.3　圖層蒙版的編輯　62  3.5.4　矢量蒙版　62  3.5.5　剪貼蒙版　62  3.5.6　快速創(chuàng)建與釋放剪貼蒙版　63  案例4　創(chuàng)建矢量蒙版　63  3.6　課后練習(xí)——用快捷鍵熟練控制視圖以提高工作效率　64  3.7　課后思考——怎樣更好地應(yīng)用圖層樣式　65  第　04 章 制作平面圖標(biāo)  4.1　圖標(biāo)尺寸大小　67  4.2　如何設(shè)計一組圖標(biāo)　67  4.3　圖標(biāo)設(shè)計的格式和大小　73  4.3.1　JPEG格式　73  4.3.2　PNG格式　73  4.3.3　GIF格式　73  案例1　制作Home圖標(biāo)　74  案例2　制作日歷圖標(biāo)　76  案例3　制作錄音機(jī)圖標(biāo)　78  案例4　制作文件夾圖標(biāo)　80  案例5　制作徽章圖形　82  案例6　制作秒表圖形　85  案例7　制作桃心圖形　89  案例8　制作可回收資源圖標(biāo)　91  4.4　課后練習(xí)——制作鬧鐘圖標(biāo)　93  4.5　課后思考——如何快速制作一組圖標(biāo)　98  第　05 章 制作立體圖標(biāo)  5.1　如何讓圖標(biāo)更具吸引力　100  5.2　立體圖標(biāo)的設(shè)計原則　100  案例1　制作Dribbble圖標(biāo)　101  案例2　制作天氣圖標(biāo)　105  案例3　制作Chrome圖標(biāo)　110  案例4　制作twieet圖標(biāo)　113  案例5　制作照相機(jī)圖標(biāo)　117  案例6　制作攝像頭圖標(biāo)　121  5.3　課后練習(xí)——制作短信圖標(biāo)　130  5.4　課后思考——怎樣設(shè)計一個立體圖標(biāo)　132  第　06 章 制作按鈕  6.1　如何設(shè)計和諧的交互　134  6.2　設(shè)計師關(guān)于按鈕設(shè)計的幾點(diǎn)建議　135  案例1　制作發(fā)光按鈕　136  案例2　制作控制鍵按鈕　140  案例3　制作播放器按鈕　144  案例4　制作清新開關(guān)按鈕　156  案例5　制作高調(diào)旋鈕　163  案例6　制作電源風(fēng)格按鈕　168  6.3　課后練習(xí)——制作糖果按鈕　176  6.4　課后思考——按鈕設(shè)計的技巧和方法　182  第　07 章 制作局部界面元素  7.1　關(guān)于局部界面設(shè)計的幾點(diǎn)建議　185  7.1.1　盡量控制質(zhì)感的表現(xiàn)　185  7.1.2　在繁簡之間做選擇185  7.1.3　不要忘記功能的表現(xiàn)　186  7.2　關(guān)于透明元素和透明度使用的藝術(shù)　186  7.2.1　內(nèi)容模塊和網(wǎng)站框架的對比　186  7.2.2　半透明導(dǎo)航的跟蹤運(yùn)用　187  7.2.3　使用較小的透明模塊來襯托187  案例1　登錄界面　188  案例2　設(shè)置界面開關(guān)　192  案例3　通知列表界面　198  案例4　日歷界面　203  案例5　對話框界面　209  案例6　調(diào)整面板　212  7.3　課后練習(xí)——制作搜索界面　220  7.4　課后思考——怎樣解決線條的鋸齒問題　227  第　08 章 設(shè)計手機(jī)UI控件  8.1　控件的設(shè)計原則230  8.1.1　進(jìn)度條的設(shè)計建議　230  8.1.2　導(dǎo)航列表的設(shè)計建議　230  案例1　進(jìn)度條 .232  案例2　音量設(shè)置圖標(biāo)　243  案例3　選項按鈕　254  案例4　Wi-Fi標(biāo)志　262  案例5　藍(lán)牙標(biāo)志　266  案例6　上傳界面　269  案例7　菜單界面按鈕　275  案例8　通知列表界面　278  8.2　課后練習(xí)——制作導(dǎo)航界面　285  8.3　課后思考——如何合理地設(shè)計進(jìn)度條　290  第　09 章 制作手機(jī)軟件界面  9.1　手機(jī)軟件界面的概念　293  9.2　蘋果、安卓和WP系統(tǒng)軟件的區(qū)別　293  案例1　制作美拍界面　294  案例2　制作我愛記單詞界面　300  案例3　制作計算器界面　307  9.3　課后練習(xí)——制作天氣預(yù)報界面　310  9.4　課后思考——你對你的用戶群了解嗎？　318  第　10 章 制作播放器界面  10.1　各種風(fēng)格的播放器界面　321  10.2　寬大的背景面板　321  10.3　突出的質(zhì)感　321  10.4　濃郁的色調(diào)　321  10.5　清晰的邊緣　321  案例1　制作視頻播放器圖標(biāo)　322  案例2　制作震撼的金屬質(zhì)感的播放器圖標(biāo)　325  10.6　課后練習(xí)——制作播放器皮膚　331  10.7　課后思考——UI設(shè)計師如何自我提升？　339  第　11 章 制作手機(jī)游戲界面  11.1　手機(jī)游戲界面概述　344  11.2　手機(jī)游戲界面的設(shè)計方法　344  案例　制作威龍戰(zhàn)士游戲界面　345  11.3　課后練習(xí)——制作大魚吃小魚游戲界面　352  11.4　課后思考——良好界面設(shè)計的幾大特點(diǎn)　358  第　12 章 制作智能手機(jī)UI整體界面  12.1　界面設(shè)計的核心　362  12.2　Apple和Android移動端尺寸指南　363  12.3　iOS 扁平化系統(tǒng)的特色　364  案例1　蘋果手機(jī)界面總體設(shè)計　366  案例2　Android手機(jī)界面總體設(shè)計　375  案例3　Windows Phone手機(jī)界面總體設(shè)計　387  12.4　課后練習(xí)——制作一組清新的界面設(shè)計　400  12.5　課后思考——借助設(shè)計資源來提高自身能力407