移動端APPUI設(shè)計與交互基礎(chǔ)教程第2章UI圖標設(shè)計課件

1、設(shè)計與交互基礎(chǔ)教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移動端APP UI02UI圖標設(shè)計本章依托UI設(shè)計中常見圖標的制作方法與質(zhì)感表現(xiàn)，在介紹圖標制作規(guī)范的基礎(chǔ)上，鞏固和加強Photoshop軟件在UI設(shè)計中的核心操作。2.1 初識移動設(shè)備尺寸及其相關(guān)概念1px2pt3分辨率（1）物理分辨率（2）邏輯分辨率4縮放倍率5ppi6dpi2.1.1 px、pt和ppi等相關(guān)概念2.1 初識移動設(shè)備尺寸及其相關(guān)概念2.1.2 iPhone機型屏幕尺寸規(guī)格2.2 UI圖標設(shè)計1系統(tǒng)圖標（按屬性分類）系統(tǒng)圖標指的是系統(tǒng)功能或APP應(yīng)用程序的啟

2、動圖標。2功能圖標（按屬性分類）功能圖標指的是承擔(dān)著某種功能的圖標。2.2.1 圖標的分類圖2-1 系統(tǒng)圖標 圖2-2 功能圖標2.2 UI圖標設(shè)計3線性圖標和剪影圖標（按設(shè)計風(fēng)格分類）線性圖標的外觀由線條組成，而剪影圖標由填充輪廓的方式進行表現(xiàn)。4扁平化圖標（按設(shè)計風(fēng)格分類）扁平化圖標就是指那些去掉裝飾效果（投影、高光、紋理和漸變等）的圖標。2.2.1 圖標的分類圖2-3 線性圖標和剪影圖標 圖2-4 扁平化圖標設(shè)計2.2 UI圖標設(shè)計5擬物化圖標（按設(shè)計風(fēng)格分類）擬物化圖標指的是模擬現(xiàn)實物品的造型和質(zhì)感的圖標。2.2.1 圖標的分類圖2-5 擬物化圖標2.2 UI圖標設(shè)計1存儲格式（1）J

3、PEG（2）PNG2圖標尺寸（1）iOS系統(tǒng)2.2.2 常見存儲格式與圖標尺寸2.2 UI圖標設(shè)計（2）Android系統(tǒng)2.2.2 常見存儲格式與圖標尺寸2.2 UI圖標設(shè)計1使用產(chǎn)品名字的首字母或一個字2.2.3 APP啟動圖標的常見創(chuàng)意設(shè)計方法2使用品牌名字全稱2.2 UI圖標設(shè)計3使用產(chǎn)品核心功能的圖形2.2.3 APP啟動圖標的常見創(chuàng)意設(shè)計方法4使用產(chǎn)品形象2.3 線性圖標2.3.1 線性圖標概述線性圖標也可以稱為功能性圖標，這是因為線性圖標大多數(shù)用于APP應(yīng)用的某些具體功能展示方面。圖2-11 線性圖標圖2-12 多種風(fēng)格的線性圖標2.3 線性圖標2.3.2 線性圖標的制作（WIF

4、I圖標）2.3.3 課堂鞏固練習(xí)（Keep圖標）1.1 UI設(shè)計行業(yè)的發(fā)展前景 2ID（Interaction Design）交互設(shè)計 交互指的是人和機器互動的過程，交互設(shè)計通過了解人的心理、目標和期望，使用有效的交互方式來讓整個過程可用、易用。 3UE（User Experience）用戶體驗 UE是指用戶使用一個產(chǎn)品時的全部體驗，這種體驗主要來自用戶和人機界面的交互過程。1.1.1 認識相關(guān)概念2.4 剪影類圖標2.4.1 剪影類圖標概述剪影指的是形態(tài)明顯且沒有影調(diào)細節(jié)的黑影。包含剪影的畫面，形象表現(xiàn)力取決于形象動作的鮮明輪廓，這種手法也經(jīng)常用在圖標設(shè)計中。圖2-25 雙色設(shè)計圖2-26

5、正負組合型設(shè)計2.4 剪影類圖標2.4.2 剪影類圖標的制作（抖音APP圖標）圖2-27 抖音APP圖標解析2.4 剪影類圖標2.4.3 課堂鞏固練習(xí)（微信圖標） 圖2-41 制作氣泡 圖2-42 微信圖標制作完成2.5 扁平化與長陰影類圖標2.5.1 知識點概述1扁平化圖標扁平化指的是在設(shè)計手法上摒棄高光、陰影等造成透視感的制作方法，通過簡化和抽象的設(shè)計元素直觀傳遞信息內(nèi)涵。2長陰影圖標長陰影圖標指的是以扁平化設(shè)計為基礎(chǔ)，添加簡單投影效果的圖標。圖2-43 扁平化圖標 圖2-44 長陰影圖標2.5 扁平化與長陰影類圖標2.5.2 扁平化與長陰影圖標制作（指南針圖標）圖2-45 扁平化圖標（指南針）解析 圖2-46 扁平化圖標（文字類）解析2.5 扁平化與長陰影類圖標2.5.3 課堂鞏固練習(xí)（一組扁平化圖標）圖2-59 扁平化圖標一組2.6 擬物類圖標的制作2.6.1 知識點概述1擬物擬物指的是通過疊加高光、紋理、材質(zhì)、陰影等效果對實物進行再現(xiàn)，其設(shè)計元素均來自于真實生活接觸的物件。2擬物與扁平擬物與扁平是相互對立的設(shè)計理念，作為設(shè)計師應(yīng)該多關(guān)注信息本身的含義，而對于元素承載信息量的多少則要根據(jù)產(chǎn)品的用戶角色來綜合考量。圖2-60 質(zhì)感細節(jié)明顯的擬物圖標2.6 擬物類圖標的制作2.6.2