Photoshop-智能手機(jī)App圖標(biāo)和界面設(shè)計(jì)課件

第4章制作不同風(fēng)格的圖標(biāo)區(qū)分不同風(fēng)格的App圖標(biāo)了解扁平化風(fēng)格圖標(biāo)了解立體質(zhì)感圖標(biāo)了解卡通風(fēng)格圖標(biāo)4.1扁平化風(fēng)格圖標(biāo)要制作扁平化風(fēng)格圖標(biāo)，首先應(yīng)該了解什么是扁平化。扁平化概念最核心的地方如下。去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來。并且在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡、符號(hào)化。這里注意，扁平化設(shè)計(jì)并不是就意味著拋棄了所有的效果。扁平化尤其在手機(jī)上，更少的按鈕和選項(xiàng)使得界面干凈整齊，使用起來格外簡潔?？梢愿雍唵沃苯拥膶⑿畔⒑褪挛锏墓ぷ鞣绞秸故境鰜?，減少認(rèn)知障礙的產(chǎn)生。扁平化不僅界面美觀、簡潔，而且達(dá)到降低功耗，延長待機(jī)時(shí)間和提高運(yùn)算速度。它的優(yōu)點(diǎn)在于：降低移動(dòng)設(shè)備的硬件需求，延長待機(jī)時(shí)間；扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡單直接的將信息和事物的工作方式展示出來，減少認(rèn)知障礙的產(chǎn)生。隨著App在許多平臺(tái)涵蓋了越來越多不同的屏幕尺寸，創(chuàng)建多個(gè)屏幕尺寸和分辨率的擬物化設(shè)計(jì)既繁瑣又費(fèi)時(shí)。所以設(shè)計(jì)正朝著更加扁平化的設(shè)計(jì)而發(fā)展，它可以保證在所有的屏幕尺寸上都能達(dá)到同樣的效果。4.1.1時(shí)鐘圖標(biāo)時(shí)鐘圖標(biāo)是系統(tǒng)基礎(chǔ)組件之一，在制作時(shí)只要把握住始終的必要元素，隨意的設(shè)計(jì)即可。案例制作時(shí)鐘圖標(biāo)4.1.2火箭圖標(biāo)本案例制作的時(shí)火箭圖標(biāo)，除模擬火箭外觀以外，采用了長陰影的效果，并且搭配點(diǎn)綴的星辰也是設(shè)計(jì)中比較小的技巧。案例制作火箭圖標(biāo)4.2立體質(zhì)感風(fēng)格圖標(biāo)立體質(zhì)感的圖標(biāo)就是通過模擬物體本身材質(zhì)的質(zhì)感、細(xì)節(jié)、光亮和陰影等細(xì)節(jié)，來達(dá)到一種接近于真實(shí)的效果，其實(shí)相對(duì)于扁平化風(fēng)格的設(shè)計(jì)，立體質(zhì)感肯定是要更加真實(shí)和富有情感的。但是立體質(zhì)感的圖標(biāo)有一個(gè)比較嚴(yán)重的缺點(diǎn)，現(xiàn)在的手機(jī)尺寸繁多，立體質(zhì)感的各種效果制作就限制了本身，因?yàn)樵诟淖兂叽鐣r(shí)，會(huì)大大的加重工作量和時(shí)間，讓設(shè)計(jì)變得非常的繁雜。4.2.1水晶質(zhì)感按鈕本案例制作的是水晶質(zhì)感的按鈕，主要通過對(duì)質(zhì)感的控制制作出水晶的效果，水晶效果的重點(diǎn)比較偏向于對(duì)于高光的掌握。案例制作水晶質(zhì)感按鈕4.2.2調(diào)節(jié)按鈕圖標(biāo)本案例主要是通過擬物實(shí)際應(yīng)用的控制開關(guān)而制作的圖標(biāo)。案例制作調(diào)節(jié)按鈕圖標(biāo)4.3卡通風(fēng)格圖標(biāo)除了扁平化和立體質(zhì)感的圖標(biāo)以外，卡通風(fēng)格算是可以自成一系的風(fēng)格。描邊卡通算是卡通風(fēng)格中比較使用的一種風(fēng)格，制作方法簡單而且實(shí)用。這種圖標(biāo)主要通過布爾運(yùn)算、路徑和錨點(diǎn)就可以輕松的制作。4.3.1描邊卡通一本案例制作的是一個(gè)描邊卡通的冰棍，重點(diǎn)需要掌握制作的方法，要學(xué)會(huì)自己制作更多的圖標(biāo)。案例制作描邊卡通一4.3.2描邊卡通二本案例制作的是一個(gè)描邊卡通的太陽，通過這兩個(gè)案例，要理解設(shè)計(jì)的要點(diǎn)，要學(xué)會(huì)通過觀察物體的特點(diǎn)制作出更多的描邊卡通圖案。案例制作描邊卡通二3.2.3對(duì)話框現(xiàn)在基本上所有App都有對(duì)話的功能，所以對(duì)話框基本上也是所有App必備的一個(gè)組件案例制作對(duì)話框3.2.4選項(xiàng)框選項(xiàng)框也叫做復(fù)選框，是按鈕中的一個(gè)組件，用于簡化管理一些復(fù)雜的功能。案例制作選項(xiàng)框3.3圖形的效果處理隨著Photoshop的日益成熟，圖片處理技術(shù)的無所不能，Photoshop也已應(yīng)用在很多領(lǐng)域中?；旧弦磺心憧梢韵胂蠡蛴^察到的效果都可以使用Photoshop實(shí)現(xiàn)，在App中也會(huì)應(yīng)用到這些效果處理，從原來擬物化圖標(biāo)中，可以明顯的看出，Photoshop制作的效果非常逼真，讓人看上去就知道其意思，表達(dá)得很清晰，但是要設(shè)計(jì)得如此真實(shí)，設(shè)計(jì)師的功力是必不可少的，必須有一定的能力才能制作出如此漂亮和真實(shí)的圖標(biāo)。而現(xiàn)在的設(shè)計(jì)趨勢(shì)已經(jīng)逐漸趨于扁平化，拋棄了冗余、厚重和繁雜的裝飾效果，強(qiáng)調(diào)了一種抽象極簡和符號(hào)化的設(shè)計(jì)理念。這里需要注意，扁平化雖然拋棄了過多的去使用復(fù)雜的效果，但是并不代表就不會(huì)使用一些效果來讓設(shè)計(jì)更加精美，下面的效果處理中，后面3個(gè)案例會(huì)具體講解一些簡單的效果對(duì)扁平化圖形從美觀上的提升。3.3.1鏡面效果鏡面效果常用于制作App的展示頁面，將App界面置于手機(jī)屏幕中，然后為其添加鏡面效果，可以讓展示效果看起來更加的真實(shí)。案例制作鏡面效果3.3.2倒影效果倒影效果也是常常用于制作App的展示界面，可以將其賦予手機(jī)，也可以直接將App的界面進(jìn)行倒影展示。案例制作倒影效果3.3.3畫中畫效果畫中畫效果一般用于制作App的一些界面內(nèi)容，比如頭像與背景之間的層次關(guān)系。案例制作畫中畫效果3.3.4彌散陰影效果彌散陰影是最近大熱的設(shè)計(jì)效果，一個(gè)簡單的效果就讓畫面顯得非常的精致，普通的【投影】圖層樣式相對(duì)就比較古板。但是彌散陰影在畫面中不宜過多，在主要的組件使用就可以了，不然會(huì)讓畫面非常的雜亂。案例制作彌散陰影效果3.3.5長陰影效果在扁平化設(shè)計(jì)中，長陰影也是非常流行的一種設(shè)計(jì)趨勢(shì)，長陰影其實(shí)就是擴(kuò)展了對(duì)象的投影，感覺是一種光線照射下的影子，通常采用角度為45°的投影，給對(duì)象添加了一份立體感。長陰影快速發(fā)展為流行的設(shè)計(jì)趨勢(shì)，并經(jīng)常被應(yīng)用到扁平設(shè)計(jì)方案的對(duì)象。這些陰影特別之處在于它們也是扁