UI界面設計關鍵元素

-圖標教師：XXX班級：XXXUserInterfaceDesign目錄CONTENTS界面常見關鍵元素※01.圖標的類型02.圖標實操-教師03.圖標實操及練習-學生※04.圖標和組件是UI設計中的關鍵元素，學習圖標基本知識，掌握圖標的設計方法，熟練制作各種風格的圖標是UI設計師進入行業(yè)的必備技能。合理使用和管理組件，可以幫助UI設計師和開發(fā)人員更好地創(chuàng)建出具備統(tǒng)一風格、便于維護的用戶界面。項目導讀學習指南

學習指南學習目標知識目標技能目標素質目標1．了解UI圖標的基本分類。2．掌握UI圖標設計的基本流程和要點。3．了解組件的概念和分類。4．熟悉組件的制作過程。1．能夠熟練應用圖標設計的方法。2．能夠獨立設計制作不同風格的圖標。3．能夠獨立制作不同類型的組件。培養(yǎng)學生精益求精的工匠精神。知識鞏固1．分別完成2～4款扁平化和毛玻璃圖標的設計與制作。2．完成2～4個組件的設計與制作。

PARTONE一、界面常見的關鍵要素導航欄banner金剛區(qū)瓷片區(qū)圖片流tab欄思考：UI界面中有哪些關鍵的元素？色彩/配色字體圖標布局與間距按鈕動效banner、圖片視頻GradientColorsCollectionPalette-CoolHue2.0細說圖標設計師：信息通過專業(yè)的設計技巧進而高效傳遞出來。文字信息圖形化處理降低理解成本（認知負荷）提高美觀度圖標設計

圖標設計在UI中的重要性

(1)

站在心理學、腦科學角度來看，人類對于圖像的理解、接受、記憶程度都遠勝過純文字。左腦負責理性，右腦負責感性60萬倍無論是icon設計、按鈕設計、標志設計、導向標識，圖形（圖標）永遠是設計中的一項重要課題免費圖標資源庫一、?通用型圖標庫??Iconfont（阿里巴巴矢量圖標庫）?提供超170萬中文適配圖標，支持SVG/PNG/AI格式下載。?Flaticon?覆蓋92萬+矢量圖標，可按教育、醫(yī)療、游戲等垂直領域篩選，支持16px至512px多尺寸導出。?Easyicon?收錄59萬+圖標，支持中文關鍵詞搜索與PNG/SVG格式轉換。免費圖標資源庫二、?垂直場景強化庫??IconPark（字節(jié)跳動開源庫）?提供線性/填充/雙色/四色四種風格圖標，成套圖標風格統(tǒng)一。?菜鳥圖標?專注商用矢量圖標，提供免費可商用的表情符號、地標等分類圖標。?Icones?聚合100+圖標庫資源，支持混合使用單色與多彩圖標，可直接生成CSS代碼或下載SVG文件?。思考：為什么有共享的圖標資源庫，還要自己畫圖標？版權不同圖標庫里的圖標，在使用時無法統(tǒng)一風格；無法滿足個性化需求。PARTTWO二、圖標的分類1．系統(tǒng)圖標系統(tǒng)圖標指的是系統(tǒng)功能或APP應用程序的啟動圖標。2．功能圖標功能圖標指的是承擔著某種功能的圖標。二、

圖標的分類——（按屬性分類）圖5-1系統(tǒng)圖標

圖5-2功能圖標二、

圖標的分類——（按設計風格分類）常用圖標其他風格圖標二、

圖標的分類——線性圖標1．概念：線性圖標的外觀由線條組成。粗細線條方角圓角簡單復雜斷點線條雙線條單色圖標雙色圖標線性圖標使用場景非常豐富，作為頁面的功能圖標常用于導航欄、金剛區(qū)、列表流、分類區(qū)、局部操作、標簽欄等。2．線性圖標使用場景3．設計要點描邊設置圓角設置描邊數(shù)值大小一致盡量整數(shù)遞進內、外、居中描邊一致圓角數(shù)值一致盡量偶數(shù)線條粗細約等于圓角數(shù)值-纖細例：線粗：4px圓角：4px3．設計要點效果處理漸變：漸變方向一般設置為45度或135漸變的方向和強弱關系是一致疊加：圖標拆解呈多個部分調整透明度呈現(xiàn)疊加效果。圖標繪制多用布爾運算形狀工具布爾運算21PARTTHREE三、教師演示教師演示布爾運算-線性圖標合并形狀繪制三角形、矩形，并調整三角形的圓角。繪制圓形雙擊路徑，刪除頂部錨點。選中兩個圖形進行合并、拼合144*6892*6442100*100120學生練習布爾運算-線性圖標使用“X”、“Y”、“寬”和“高”工具進行調整使圖標符合設計規(guī)范，運用AI變化工具進行快速復制，擴展外觀變成真實圖像。4、課堂案例-制作旅游類App線性圖標設計效果圖環(huán)境效果圖圖標大?。?8*36px,

線粗4px，圓角6px內部短線：寬-8px，高-4px頂部短線：高-10px，寬-4px阿里圖標網(wǎng)站：iconfont二、

圖標的分類——面性圖標1.概念：面性圖標即填充圖標。單色圖標多色圖標色塊單色漸變色塊色塊疊加線面組合圖標二、

圖標的分類——面性圖標面性圖標的使用場景與線性圖標同樣豐富，常用于頁面的核心業(yè)務，如金剛區(qū)、內容裝飾、標簽欄、列表流等。2．面性圖標使用場景3．設計要點挖空比例有無底板挖空比例約占20%～30%；視覺比例較為和諧；無底板又稱為單獨型圖標，直觀;有底板又稱為組合型圖標，精致;小圖標用無底板;大圖標用組合型;無有呼吸透氣3．設計要點細節(jié)處理1.透明度一般設置為60%。2.彌散投影使用教師演示布爾運算-面性圖標學生練習布爾運算-面性圖標4、課堂案例-制作餐飲類App面性圖標——5-8分鐘使用“X”、“Y”、“寬”和“高”工具進行調整，使圖標符合設計規(guī)范。環(huán)境效果圖4、課堂案例-制作旅游類App面性圖標——5-8分鐘通過圓角矩形工具、屬性面板和布爾運算繪制基礎圖形，運用漸變工具為圖標添加顏色，通過不透明度選項的設置調整圖標不透明度。環(huán)境效果圖二、

圖標的分類——玻璃擬態(tài)圖標（毛玻璃、磨砂玻璃）1.概念：毛玻璃圖標是目前比較流行的設計風格之一，通過透明度、模糊等手法制作出一種通透的毛玻璃質感，深受UI設計師的喜愛。校園招聘5、課堂案例-制作毛玻璃圖標使用figma/mastergo/即時設計等UI界面設計軟件繪制如下毛玻璃風格圖標。第三周：課后任務課后臨摹繪制不同圖標（學習通上傳站酷鏈接）線性圖標：20個面性圖標：20個毛玻璃圖標：