第31課功能圖標一主講師：牛MO王“來瓶A弟鈣，擼標嗷嗷快”本課程由哇哈哈A弟鈣奶贊助播出課時課程大綱課程簡介主講導(dǎo)師第31節(jié)功能圖標一功能圖標設(shè)計原則及規(guī)范，正負形圖標實操牛MO王第32節(jié)功能圖標二利用矢量工具及圖層樣式設(shè)計扁平功能圖標牛MO王第33節(jié)天氣圖標設(shè)計擬物風格、扁平風格、線性風格三種天氣設(shè)計方法及創(chuàng)作思路牛MO王第34節(jié)UI

Kit一利用圖層樣式設(shè)計一款播放器輕擬物化界面牛MO王第35節(jié)UI

Kit二設(shè)計扁平化和磨砂風格的Dashboard界面牛MO王第36節(jié)產(chǎn)品實戰(zhàn)一閃屏頁面、注冊頁面和登錄頁面的設(shè)計方法及思考牛MO王第37節(jié)產(chǎn)品實戰(zhàn)二實戰(zhàn)設(shè)計APP社交風格方向及原則牛MO王第38節(jié)產(chǎn)品實戰(zhàn)三實戰(zhàn)設(shè)計APP新聞、貼吧頁面風格方向及原則牛MO王第39節(jié)產(chǎn)品實戰(zhàn)四實戰(zhàn)設(shè)計APP工具、統(tǒng)計頁面方向及原則牛MO王第40節(jié)交互動畫實現(xiàn)動效基本原理應(yīng)用技巧及PS簡單的步驟實現(xiàn)的交互動畫牛MO王每天一項技能成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31準確什么是功能圖標？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31在界面中傳達并具有功能意義存在的圖形什么是功能圖標？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31什么是功能圖標？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31功能圖標的特點是什么？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31高度濃縮并快捷傳達信息、便于加深記憶v功能圖標的特點是什么？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31化繁為簡并保留核心元素功能圖標的特點是什么？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31把抽象和虛擬進行圖形表達云彩？備份？為什么要學習功能圖標？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31A：找不到合適的素材B：為了設(shè)計更加專業(yè)C：設(shè)計師必備的技能D：勤奮一次偷懶一生C：設(shè)計師必備的技能為什么要學習功能圖標？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31設(shè)計不是不停地素材拼湊設(shè)計需要通過自己的雙手來呈現(xiàn)自己腦海中的創(chuàng)意設(shè)計要做的是為了符合產(chǎn)品本質(zhì)、統(tǒng)一產(chǎn)品風格，并不是一味追求好看架輕熟就才能真正意義的“偷懶”為什么要學習功能圖標？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31連小事都做不好如何挑大梁？功能圖標常用的尺寸成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class3116

x

16

|

24

x

24

|

32

x

32

|

48

x

48

|

64

x

64

128

x

128

|

256

x

256

|

512

x

51212

x

12

|

18

x

18

|

72

x

72

|

96

x

96

……偶數(shù)+

4的倍數(shù)！！偶數(shù)+

4的倍數(shù)！！偶數(shù)+

4的倍數(shù)！！為什么盡量不要出現(xiàn)奇數(shù)？成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class3132

x

2

=

6433

x

2

=

6632

x

3

=

9633

x

3

=

99無法居中對齊32

x

1.5

=

4833

x

1.5

=

49.5無法保證不虛功能圖標的重要性成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31減少文字閱讀的復(fù)雜性增加板式布局的清晰性輔助信息識別的功能性幫助用戶使用的簡易性Aiki006Aiki001Aiki007Aiki002Aiki005Aiki004Aiki009Aiki003Aiki008Aiki00EAiki00GAiki00BAiki00FAiki00CAiki00AAiki00HAiki00IAiki00D功能圖標的構(gòu)成要素成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31識別顏色狀態(tài)是否能讓用戶看懂是否閱讀產(chǎn)生歧義是否增加用戶喜愛是否需要顏色輔助是否符合用戶習慣是否符合產(chǎn)品風格是否正確表達用途是否提供用戶反饋是否干擾用戶思考功能圖標的構(gòu)成要素——識別成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31加或減都會嚴重影響到信息傳達的準確度功能圖標的構(gòu)成要素——識別成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31飛行模式不要輕易的天馬行空創(chuàng)意你的設(shè)計功能圖標的構(gòu)成要素——識別成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31個人中心不要輕易的天馬行空創(chuàng)意你的設(shè)計功能圖標的構(gòu)成要素——識別成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31設(shè)置保持固有形態(tài)進行優(yōu)化設(shè)計功能圖標的構(gòu)成要素——顏色成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31使用用戶日常生活中已經(jīng)習慣的顏色功能圖標的構(gòu)成要素——顏色成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31盡可能保持實體物質(zhì)的相近色功能圖標的構(gòu)成要素——狀態(tài)成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31用顏色狀態(tài)來反饋用戶的操作功能圖標的構(gòu)成要素——狀態(tài)成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31用在準確的地方而不是隨便用功能圖標的構(gòu)成要素——狀態(tài)成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31統(tǒng)一規(guī)范的狀態(tài)讓用戶知道能做什么選中選中不可用未選中未選中不可用功能圖標設(shè)計中最重要的是易懂、易用成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31功能圖標設(shè)計時候的注意事項（實操講解）成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class311）圖標清晰滿格像素2）傾斜角度盡可能保持45°3）比例協(xié)調(diào)4）視覺平衡關(guān)于內(nèi)圓角的算術(shù)公式成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31外角半徑–邊緣高度=內(nèi)角半徑8

–

4

=

4px外角半徑–邊高/2

=內(nèi)角半徑8

–

4/2

=

6px關(guān)于命名格式成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31模塊_類別_功能_狀態(tài)Nav_button_message_selAndroid平臺不支持“-”，所以用“_”。Ios不需要highlight狀態(tài)切圖，但是Android需要。Disable狀態(tài)在移動端出現(xiàn)情況較少，其他三種屬于必備輸出（nor.hig.sel.）功能圖標設(shè)計時候的注意事項

-視覺平衡成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31功能圖標設(shè)計時需要的工具成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31ABCDEFG功能圖標設(shè)計時需要的工具成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31ABCDEFG本章作業(yè)成果預(yù)覽設(shè)計思路設(shè)計步驟成果展示設(shè)計延展本章總結(jié)Class31根據(jù)提供的模板