《UI設計系統教程》是一套系統講解UI設計的課程,由知名UI設計大咖王鐸老師傾心打造。課程涵蓋知識點全面,從基礎到高級,理論結合實戰,帶你一步步從UI入門到高手進階,適合所有想學習UI設計的學員學習。
課程從圖形語言開始講解,到深入的界面設計,通過理論性的講解與實際案例操作結合,帶你快速掌握UI設計中所用到的知識點。課程內容包括圖標制作、APP形象制作、iOS 及Android的設計規范、各個類型的界面設計、切圖標注、活動頁面、設計題案流程、面試技巧等,并包含大量前沿的實戰案例。
整套課程共20章,章節安排合理,內容貼合實際應用,系統性強,是有意向從事UI設計工作的同學必修課。通過這套課程的學習,你能快速掌握實用的UI技能,實現0基礎到UI大神的完美蛻變!
第一章 UI設計的基本定義和設計趨勢
|
本節課主要介紹UI設計的基本定義和設計趨勢,通過工作流程介紹,分析UI設計的發展前景。 |
本節課主要介紹UI在職設計師應該具備哪些素質,掌握哪些知識,了解設計行業的團隊分類及公司規模。 |
第二章 圖形語言與布爾運算的使用
|
本節課主要介紹UI設計中圖形語言圖標的定義與作用,以及圖形創意的創意思路與方向。 |
本節課主要詳細介紹圖標從形式劃分具體有哪些表現形式,以及不同表現形式的應用。 |
本節課主要結合軟件操作介紹布爾運算的基本操作,以及在做布爾運算時需要注意的問題。 |
本節課主要通過實戰案例詳細介紹布爾運算的運用,同時通過圖標的繪制和細節的處理,知道如何把握形狀圖形的一致性,了解圖形語言在界面中的重要性。 |
第三章 線性圖形設計思路及制作
|
本節課主要講解利用創意草圖將圖形具象化的創意技法,了解繪制草圖的目的是什么,以及如何進行創意思維練習的三種方法。 |
本節課主要利用布爾運算和圖形語言的知識,繪制一套天氣類的圖標,通過本節課的學習,初步掌握圖形創意的方法,以及在繪制的過程中如何發散設計思維。 |
本節課主要介紹如何使用形狀工具,以及描邊繪制線性圖標的基本方法。 |
本節課主要介紹圖標創意的技巧,通過發散思維提高原創能力,并利用實戰案例進行演示讓大家更好的了解一個圖標的創作過程。 |
第四章 系統級圖標制作
|
本節課主要介紹什么叫系統級圖標,以及系統級圖標的設計規范與特性,在APP設計中系統圖標具有什么樣的功能。 |
本節課主要通過實例操作講解系統功能圖標制作技巧的基本規范,以及在設計制作中的具體繪制方法和需要注意的事項。 |
本節課接著上節課繼續完成系統圖標的繪制,并對系統圖標進行上色,通過本章的學習,理解系統圖標的制作規范,開拓圖標創意的思維和制作能力。 |
第五章 微質感圖標制作技法
|
本節課主要帶大家了解微質感圖標的特性,針對表現成面進行練習,提高大家的深入能力,從而能更好的運用在工作的各個維度中。 |
本節課主要演示一個微質感相機圖標的具體繪制方法,著重講解如何通過對顏色和投影的處理提高物體的體感。 |
本節課主要結合PS和AI軟件演示了一個人物化圖標的具體繪制方法,重點講解圖標體感塑造的基本思路。 |
本節課主要演示一個小書包圖標的具體繪制方法,通過多個案例的演示,加深大家對微質感圖標繪制的理解以及處理技巧。 |
本節課主要演示從一張草圖到質感圖標繪制的具體操作步驟,著重介紹草圖的摳圖技巧以及圖標紋理質感的表現。 |
第六章 表情圖標制作技法
|
本節課主要介紹表情圖標和禮物圖標的概念,以及基礎表情包和定制表情包的區別與功能,并通過一組基礎表情包的設計與繪制,講解表情包不同表情的創意思路和表現。 |
本節課繼續完成趣味性表情包的繪制,通過實例演示,讓大家迅速掌握不同表情的創意思路與繪制技巧,以及表情包在放大或縮小之后,如何處理細節,使表情包更易識別和使用。 |
本節課主要對禮物圖標進行實戰操作,從表現形式上讓大家擴充自己的設計表現形式,讓想法變的具象化。 |
本節課主要著重演示一個玫瑰禮物圖標的繪制,通過該案例的講解,提高大家對復雜圖案結構的理解,以及光影層次關系的處理方法,加強大家的繪圖能力。 |
本節課主要演示蛋糕與戒指禮物圖標的繪制,通過本章的學習,讓大家迅速掌握不同禮物圖標的繪制方法,以及不同材質禮物細節與明暗對比關系的處理。 |
第七章 APP品牌LOGO
|
本節課主要介紹如何運用illustrator來完成品牌與app主logo的設計,分析logo草圖繪制的設計思路,以及在設計的過程中如何統一平衡字體。 |
本節課主要演示APPlogo設計中圖形圖標的制作,以及文字與圖形不同的組合方式和處理方法。 |
第八章 角色化APP形象設計
|
本節課主要介紹產品延展角色設計,以及角色設計在產品界面和情景中的功能與作用,并通過案例演示,講解角色繪制的具體思路和步驟。 |
本節課主要講解如何運用ai軟件對角色形象進行描邊和上色,以及具體的處理方法和操作技巧。 |
本節課在上節課的基礎上,繼續延展不同神態和動作的角色,通過本節課的實例演示,提高大家對角色設計與繪制的理解,熟練軟件操作。 |
第九章 iOS設計原則及基礎規范
|
本節課主要介紹蘋果界面設計的發展變化,詳細介紹iOS的基本設計原則,以及iOS系統不同設備的具體設計尺寸。 |
本節課繼續講解iOS設計的層級性和易操作兩大基本原則,通過對設計原則的了解,提高ui設計的功能性和實用性,同時詳細介紹了iOS系統中界面尺寸及控件的規范,包括狀態欄、導航欄、標簽欄的規范等等。 |
本節課主要根據iOS的設計規范來演示一款app界面的設計,在設計的過程中,教會大家如何通過一個品牌的logo來確定整個設計的色調,根據品牌特性確定設計的風格,以及如何把iOS的設計規范和原則落實到具體設計中。 |
本節課主要講解案例中Banner與分類模塊的制作,以及如何根據分類名稱設計圖形圖標,豐富模塊內容,并通過小元素的表現加強氛圍的營造。 |
本節課接著講解案例中任務內容的具體繪制方法,以及設計稿在不同設備上的適配方法和具體操作。 |
第十章 Android設計規范
|
本節課主要介紹的Android設計規范,包括Material design的核心理念,設計規范中的作用與視覺體系,Android的控件設計規范,并詳細介紹了設計中的尺寸和單位,通過本節課的學習,讓大家了解Android的具體設計規范和尺寸,以及in、pt、px、dpi、dp不同單位的定義。 |
本節課主要通過一個金融界面的實例演示,來講解如何結合Android設計規范的知識來表現畫面。 |
第十一章 Watch設計規范
|
本節課分別介紹了Android wear 與apple watch不同產品的設計風格與功能,以及apple watch的具體設計規范。 |
本節課主要通過watch界面設計實例演示,讓大家快速的理解apple watch的具體設計規范和具體操作技巧。 |
第十二章 界面類型及產品流程設計分析
|
本節課主要介紹界面的類型,以及不同類型具體包括哪些內容和頁面,并結合圖文講解,分析不同界面的功能與定義,我們在經后的設計中要注意什么? |
第十三章 界面的圖版率
|
本節課主要介紹界面中圖版率的概念,以及提高界面圖版率的方式和方法。 |
本節課主要通過實例操作演示,講解如何把圖版率的相關知識運用到界面設計中,以及大塊色彩在界面中的運用。 |
第十四章 元素在界面中的運用
|
本節課主要講解元素在界面設計中的運用,常用的元素有哪些,以及如何更好的運用元素,通過什么樣的技巧來提升畫面的設計感。 |
本節課通過實戰演練讓大家更好的理解元素在設計中的運用,教會大家如何運用同一種元素貫穿整個設計的思路和技巧,統一整體設計風格。 |
本節課主要演示首頁界面的設計,重點講解如何通過ai軟件快速制作統一規范的圖形圖標,以及AI軟件路徑與形狀工具的使用技巧。通過本節課的學習,教會大家如何思考,并通過字體、顏色、形狀、細節的處理統一界面整體調性與風格。 |
本節課主要介紹個人主頁界面的設計,通過本節課的學習,教會大家如何在簡潔的畫面中去豐富內容,統一配色,加強層級的表現。 |
第十五章 界面字體及間距使用
|
本節課主要講解在界面排版設計中如何正確的使用字體和字體的間距,確保字體樣式與色調氛圍相匹配,提高界面的版式率和閱讀性。同時著重給大家介紹了界面文字的使用規則和常用字體。 |
本節課主要通過一個app界面的延展,來演示標簽彈窗頁面的設計,通過本節課的學習,提高字體與字間距的排版使用,加強界面文字使用規則的理解。 |
本節課繼續延展首頁風格繼續繪制動態頁面,在設計的過程中,主要講解排版中文字與文字之間的關系,文字與內容之間的關系,根據內容的不同功能去表現文字與圖標 |
本節課在前面幾節課的基礎上,繼續繪制發現頁面,重點介紹大色塊背景的繪制方法,以及作品輸出的表現技巧和操作。 |
第十六章 直播類APP界面設計
|
本章主要針對火爆的直播類APP進行實戰演練,,這節課主要完成直播app首頁導航欄與底部標簽欄的制作,通過本節課的學習,提高大家對頁面的排版能力,以及圖標的繪制技巧。 |
本節課主要詳細演示直播頁面icon的具體操作以及配色技巧。 |
本節課繼續繪制直播頁面內容板塊的制作,通過本節課的學習,讓大家了解直播界面的排版方式,掌握圖片與文字之間的處理技巧。 |
本節課主要詳細演示直播app直播頁的具體繪制技巧,綜合前面所學知識,鞏固圖形圖標繪制的相關知識,以及禮物圖標在界面中運用的表現方式。通過實戰演練,本章從一個產品的功能圖標到界面的布局進行了完整的演示,讓大家更深入的了解直播界面。 |
第十七章 APP引導頁及市場圖的設計
|
本節課主要講解APP引導頁及市場圖的概念與作用,以及引導頁具體有哪些類 |
本節課主要通過實例操作給大家演示app市場圖的設計思路與具體制作,教會大家如何通過對主題文字與軟件界面的表現,來突出軟件的核心特點。 |
第十八章 地圖軟件繪制實例
|
本章通過一個地圖軟件實例來逐步講解頁面設計中一級、二級、三級頁面的設計思路和具體操作,本節課主要針對項目首頁進行設計,演示不同功能圖標的繪制。 |
本節課主要綜合本套課程所學知識,繼續繪制項目的結果頁面,通過一個完整案例的演示,鞏固UI設計相關理論知識與軟件操作,提高大家對界面設計的理解與表現。 |
第十九章 界面切圖及標注
|
本節課主要介紹界面中的切圖與標注的定義,以及常用的切圖軟件有哪些,在操作的過程中要注意什么,如何規范的命名,并通過實例演示教大家具體的切圖步驟,以及Android與ios不同的命名方法。 |
本節課主要通過實例演示講解標注的具體操作步驟和方法,以及.9文件的概念與作用。通過操作進行詳細的了解輸出的過程及需要輸出的內容。從而在工作中更好的去對接一個APP的設計。 |
第二十章 面試與提案
|
本節課主要講解了作品集和面試技巧,通過作品集的演示讓大家更清楚的將學習成果更好的展示,最終進行工作面試的檢驗。通過了解面試中常會提到的問題,更好的分析自己的不足和注意事項。 |
本節課主要介紹UI設計的提案技巧,通過多個項目的演示講解,教大家如何樹立正確的提案思路,提高過稿率。 |