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

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