2024UI培訓(xùn)課件教程

第?一部分：什什么是UI？通?用解釋userinterface，?用戶界?面，?大家都知道。介于機(jī)器?與?人類之間的?一座橋梁梁，可以理理解為機(jī)器?語與?人類視覺/?文字語?言之間的翻譯第?二部分：UI的發(fā)展歷程DOS命令?行行系統(tǒng)：?風(fēng)?行行于1969-1983，?用戶通過鍵盤輸?入指令，電腦接收到指令后，予以運?行行。在1980年年代，蘋果發(fā)布Macintosh，其使?用的，以WIMP(window、icon、menu、pointer)為基礎(chǔ)的Systemsoftware(MacOS早期名稱)系統(tǒng)將圖形?用戶界?面帶進(jìn)了了?大眾市場，取代早期計算機(jī)使?用的命令?行行?工具。但現(xiàn)在?大家?耳熟能詳?shù)腢I設(shè)計，尤指移動端UI設(shè)計，始于年年蘋果發(fā)布第?一代iPhone，在第?二代iPhone3G時發(fā)布iPhone4的出現(xiàn)徹底引爆了了移動互聯(lián)?網(wǎng)的熱潮，同時引發(fā)UI設(shè)計的井噴式發(fā)展。第三部分：國內(nèi)UI?行行業(yè)的現(xiàn)狀互聯(lián)?網(wǎng)?行行業(yè)規(guī)模的變化越來越多的企業(yè)開始轉(zhuǎn)型擁抱互聯(lián)?網(wǎng)，應(yīng)?用互聯(lián)?網(wǎng)?方法和?工具實現(xiàn)?自?己的?目標(biāo)UI設(shè)計師的?入?門薪資逐年年提?高，已經(jīng)成為絕對?高收?入群體第2課——UI的實際?工作內(nèi)容第?一部分：界?面類APP界?面界?面設(shè)計是設(shè)計師最主要的?工作內(nèi)容之?一，為進(jìn)?行行初期的?風(fēng)格定位、界?面以及后續(xù)的界?面迭代。?小程序界?面?自從微信推出?小程序以來，很多沒有能?力力獨?立開發(fā)APP的?廠商開始把?目光聚集到?小程序這個媒介上，越來越多的店家已經(jīng)開始?用?小程序點單結(jié)算，所以?小程序的界?面也需要UI設(shè)計師進(jìn)?行行設(shè)計。界?面?網(wǎng)?頁設(shè)計依然是UI設(shè)計師回避不不了了的產(chǎn)出內(nèi)容，?大多品牌最起碼會有?一個?自?己的品牌主站這個主站的設(shè)計維護(hù)?大多數(shù)場景下都需要UI設(shè)計師進(jìn)?行行設(shè)計。管理理界?面隨著桌?面客戶端界?面當(dāng)然除了了移動端界?面，我們平時在PC和Mac上使?用的?大量量軟件，其界?面也是由UI設(shè)計師所完成的。第?二部分：運營類banner為產(chǎn)品的運營需求設(shè)計banner是另?一?大主要的持續(xù)的?工作內(nèi)容，如果公司內(nèi)部分?工沒有那么精細(xì)，那么banner這種偏平?面設(shè)計的?工作依然需要UI設(shè)計師完成。H5活動?頁?面我們?一般所說的H5，是?一種運?用html5為?手段的運營解決?方案。我們時常能夠看到?網(wǎng)易易云?音樂、?支付寶這類APP會出?一些“年年度xxx”的數(shù)據(jù)報告類運營，這時候?用獨?立的H5?頁?面更更能滿?足運營需求。活動圖標(biāo)很多APP在?一些特殊的節(jié)?日?比如新年年、中秋、雙?十?一、618等等，會將快速?入?口的圖標(biāo)進(jìn)?行行運營性質(zhì)的重設(shè)計，以符合節(jié)?日的氛圍。應(yīng)?用商店圖?片UI時活動的處理理，當(dāng)然這屬于細(xì)枝末節(jié)的?工作。第三部分：?矢量量類圖標(biāo)在APP中存在?大量量圖標(biāo)，?無論是功能性圖標(biāo)(搜索、設(shè)置之類)，還是視覺性圖標(biāo)(快速?入?口)，均以?矢量量圖形為主，也是設(shè)計師?日常?工作之?一。扁平插畫缺省?頁、引導(dǎo)?頁、閃屏?頁、banner，?矢量量插畫在實際?工作中其實應(yīng)?用得很多，所以也是UI設(shè)計師主要的產(chǎn)出物之?一。第四部分：動效類交互動效APP界?面需要交互，有交互就?一定就有動效，?一個元素是怎么從?頁?面1的狀態(tài)變化?至?頁?面2狀態(tài)的？時間多少？快慢如何變化？需不不需要其他動畫？這些都是UI設(shè)計師必須要思考的點。GIF素材?而有時候我們要制作的純粹就是?一張動圖，?比如加載符的動畫，當(dāng)我們的設(shè)計深?入到?頁?面的情感化設(shè)計之后，這些?小動畫就變成了了可以玩的細(xì)節(jié)。5.對接類規(guī)范?文檔切圖標(biāo)注第3課——UI設(shè)計軟件介紹第?一部分：界?面設(shè)計軟件AdobeXD專?門推出的界?面設(shè)計軟件，設(shè)計師的最優(yōu)解，基礎(chǔ)功能較為完善，插件種類也在增加當(dāng)中。SketchMac平臺的主流界?面設(shè)計軟件，功能完善插件繁多操作順?手，但僅?支持Mac平臺。Figma全平臺通?用的線上設(shè)計?工具，由于其良好的協(xié)作設(shè)計體驗正在沖擊的地位，缺陷是沒?網(wǎng)不不能?用。InvisionStudioinvision推出的UI設(shè)計軟件，?目前有mac和Windows兩端，優(yōu)點是可以和invision聯(lián)動標(biāo)注?比較?方便便，缺點是完成度不不夠?高，對中?文設(shè)計環(huán)境?支持不不佳。Axure沒落的交互設(shè)計軟件，盡管Axure能夠?qū)崿F(xiàn)海?量量的交互場景，但上?手難度?高、操作不不友好受詬病，所以對?比sketch、XD失去了了優(yōu)勢。第?二部分：交互動效軟件FlintoMac平臺的交互動效制作軟件，著重在制作?頁?面與?頁?面之間的跳轉(zhuǎn)動效，主要輸出界?面的交互演示稿，與Sketch?無縫對接。Principle平臺的交互動效制作軟件，特點是右側(cè)的實時預(yù)覽窗?口，與屬于?一個類型的軟件，兩者挑?一即可。Drama?一款新的mac平臺的交互動效制作軟件，與flinto、principle屬于同?一類型的軟件。FramerMac上的原型制作?工具，他要求設(shè)計師對React、JavaScript有?一定的了了解。唯?二能?用的交互動效軟件之?一，著重原型的交互動效，、的平臺替代。AdobeAfterEffectUI設(shè)計師主要?用AE來制作?一些概念性質(zhì)的交互動畫稿或者GIF動圖，不不適合實際項?目的界?面跳轉(zhuǎn)演示，上?手難度?高、功能復(fù)雜，但卻是Windows平臺唯?二能?用的動效軟件之?二。第三部分：位圖/?矢量量繪制?工具AdobePhotoshop位圖處理理軟件，我們?一般?用它來處理理所有需要使?用光影和特效的圖?片。AdobeIllustrator?矢量量繪制軟件，我們?一般?用它來繪制基礎(chǔ)圖標(biāo)和?矢量量插畫。A?nityPhotoPhotoshop的有?力力競爭者，缺點是效果處理理能?力力沒PS那么全能，優(yōu)點是?矢量量?工具?比PS少。A?nityDesignerIllustrator的有?力力競爭者，缺點是形狀?生成?工具沒Ai強?大，優(yōu)點是?自帶軸測輔助線，畫2.5D插畫?方便便第4課——設(shè)計資源的整理理與準(zhǔn)備第?一部分：iOS/Android官?方組件庫iOS端組件庫在我們構(gòu)建APP的時候，有些元素是系統(tǒng)級組件不不可更更改?比如statusbar、home有些則是習(xí)慣使?用且可以?自定義?比如navigationbar、tabbar，這些組件可以重復(fù)在設(shè)計稿中使?用所以蘋果官?方會給?一套組件庫，?里里?面包含了了構(gòu)建?一個iOSAPP可能?用到的可復(fù)?用組件。Android端組件庫跟iOS端?一樣，安卓也有?自?己的?一套組件庫，指導(dǎo)設(shè)計師如何針對MaterialDesign進(jìn)?行行設(shè)計。第?二部分：系統(tǒng)字體iOS端系統(tǒng)字體iOS端的系統(tǒng)默認(rèn)字體不不可更更改，所以如?無特殊需要，我們設(shè)計的時候也以蘋?方和SanFrancisco作為基礎(chǔ)字體。當(dāng)然也不不是只能?用這兩種字體，iOS內(nèi)置了了不不少第三?方字體?方便便搭建APP時調(diào)?用，但這些字體不不建議作為全局字體來?用。Android端系統(tǒng)字體?谷歌也給出了了Android端的系統(tǒng)默認(rèn)字體，設(shè)計時同樣以這兩個字體為準(zhǔn)。第三部分：設(shè)計資源?網(wǎng)址花瓣?網(wǎng)站酷UI中國?日常的設(shè)計視野拓拓展——設(shè)計師導(dǎo)航第11課——什什么是系統(tǒng)規(guī)范第?一部分：系統(tǒng)規(guī)范概述在移動端UI的整個發(fā)展歷程中，系統(tǒng)設(shè)計規(guī)范是?一個由公司內(nèi)部泛化到公司外部的概念。早年年在iPhone3G和AppStore還未出現(xiàn)之前，iPhone的內(nèi)置應(yīng)?用都為蘋果?自?己開發(fā)，但不不APP會由不不同的團(tuán)隊負(fù)責(zé)開發(fā)，這時候就需要考慮到?一個問題——如何保證每個App?一致？為了了解決這個問題，設(shè)計規(guī)范出現(xiàn)了了。iOS設(shè)計規(guī)范GoogleMaterialDesign設(shè)計規(guī)范它們給出了了APP?風(fēng)格?方向、組件尺?寸、觸控?行行為、反饋等等?一系列列的細(xì)節(jié)。符合規(guī)范進(jìn)?行行設(shè)計，那么這些細(xì)節(jié)加起來就保證了了iOS、安卓系統(tǒng)內(nèi)?生態(tài)的穩(wěn)定性和?一性?！敖ㄗh”，iOS更更主流?小?米、魅族、華為等主流?廠商，在系統(tǒng)的設(shè)計上都更更傾向于iOS“不不是那么好?用”。APPiOSUI但為什什么?大多應(yīng)?用在兩個系統(tǒng)中使?用?一樣的設(shè)計呢：設(shè)計的成本過?高交互的定義成本過?高開發(fā)協(xié)作的成本過?高每次迭代的時間過?長數(shù)據(jù)統(tǒng)計更更艱難……所以，優(yōu)先了了解和能設(shè)計出優(yōu)秀的iOS應(yīng)?用更更重要第12課——iOS系統(tǒng)規(guī)范初識第?一部分：iOS官?方規(guī)范第?二部分：iOS設(shè)備中的像素和分辨率iOS常?見iPhone機(jī)型的分辨率設(shè)計界?面時應(yīng)當(dāng)使?用的畫布尺?寸主要以兩部典型機(jī)型的邏輯分辨率為準(zhǔn)：iPhoneX：375?812iPhone6：375?667第三部分：界?面的布局?方式官?方建議的iOS界?面布局圖頂部導(dǎo)航欄(?大)+底部標(biāo)簽欄頂部導(dǎo)航欄(?小)+底部標(biāo)簽欄?無頂部導(dǎo)航欄，有底部標(biāo)簽欄有頂部導(dǎo)航欄，?無底部標(biāo)簽欄?無頂部導(dǎo)航欄，?無底部標(biāo)簽欄控件和組件第13課——iOS系統(tǒng)夜間模式的說明第?一部分：深?色模式概述繼蘋果去年年在macOS10.14Mojave上推出了了深?色模式之后，安卓?廠商紛紛跟進(jìn)，?一時間深?色模式似乎成為了了今年年UI設(shè)計圈的?又?一個潮流。在19年年WWDC?大會上，蘋果終于也把深?色模式的潮流也帶到了了iOS中，也就是iOS13中的DarkMode。第?二部分：iOS系統(tǒng)?色彩適配基礎(chǔ)彩?色的適配保持?一致。當(dāng)然，蘋果也強調(diào)了了這些?色彩并不不是強制使?用的，按需取?用即可。適配后案例例：背景?色的適配背景?色有三個層級，淺?色模式下三個層級分別為?白→淺灰→?白，?而深?色模式則是依次變淺的?黑?色。適配后案例例：?文字?色的適配?文字?色除了了?一級?色彩使?用的全?黑和全?白之外，其余三個層級均為同?一?色彩的不不同透明度。適配后案例例：分割線的適配?而分割線，蘋果也給出了了帶透明度和不不透明的各?一組?色彩，正常情況下使?用帶透明度的可，只有當(dāng)出現(xiàn)交叉分割線時才需要?用到第?一列列實?色適配后案例例：陰影浮層的適配需要注意的是在?白?色背景下能夠表達(dá)縱深的「陰影」，在深?色模式的純?黑?色背景下已經(jīng)不不適?用了了，所以iOS建議利利?用「浮層」(Elevated)來表達(dá)?頁?面的縱向關(guān)系。Elevated模式中起作?用，所以對應(yīng)的?色彩規(guī)范也全是以深?色模式為準(zhǔn)。適配后案例例：Material卡?片的適配Material卡?片是在iOS中?大量量使?用的帶磨砂玻璃質(zhì)感的卡?片，系統(tǒng)中包括負(fù)?一屏卡?片、touchMaterialMaterial卡?片按照厚薄來區(qū)分?一共有四組。適配后案例例：?自定義?色彩的適配除了了系統(tǒng)已經(jīng)給你備好的這么多顏?色，?大量量的第三?方APP諧統(tǒng)?一，構(gòu)建更更加整體?一致的iOS?生態(tài)，官?方建議?自定義?色彩與背景的對?比度不不?小于4.5第?一部分：深?色模式下的組件引?用第17課——?色彩模式的認(rèn)識第?一部分：常?見的?色彩模式在?自然界中，存在?無窮?無盡的?色彩?而我們是“詞窮”的所以，顏?色的描述要準(zhǔn)確，不不是訴諸語?言，?而是“參數(shù)RGB模式RGB是?一種由紅(Red)、綠(Green)、藍(lán)(Blue)為三原?色的?色彩模式。CMYK模式CMYK是以?青(Cyan)獨添?一個?黑?色(Black)通道。HSB模式以?色相(Hue)、飽和度(Saturation)、明度(Brightness)為分量量的?色彩模式，不不?用于?色彩顯示，?一般只?用于拾拾?色選?色。灰度模式只存在灰階?色彩的圖像模式。位圖模式灰度模式的?子集，每個像素只能存儲?黑?色和?白?色?二者之?一的?二元圖像模式。索引?色彩模式索引模式的圖像會帶有?一張?色彩索引表，圖像內(nèi)所有的像素只能從表中選?色。我們在使?用PS的導(dǎo)出為web格式時能夠看到?色彩索引表，這也是?一種壓縮圖?片的算法。Lab模式以亮度(Lightness)、從紅?色到綠?色的分量量(a)、從藍(lán)?色到?黃?色的分量量(b)作為描述的?色彩模式，?色彩空間中擁有?人眼可?見的所有?色彩。第?二部分：?色彩模式的應(yīng)?用RGB：?用在以屏幕作為顯示媒介的圖?片上CMYK：?用在以印刷物作為媒介的圖?片上HSB：?方便便拾拾?色Lab：?用在?色彩轉(zhuǎn)換、?色差測量量和圖像調(diào)?色領(lǐng)域索引?色彩：?用來壓縮圖?片灰度：?用于特殊印刷物的圖?片(?比如報紙)位圖：特殊的?風(fēng)格化處理理、印刷時的?網(wǎng)格定位在我們真正的配?色過程中，主要采取HSB的模式來完成我們的?色彩選擇第18課——關(guān)于?色環(huán)和配?色?方案第?一部分：?色環(huán)/?色相環(huán)第?二部分：基本配?色?方案同類?色在?色環(huán)上相距15°以內(nèi)的?色彩。鄰近?色?色相環(huán)上相距?大約45°的?色彩，常?見紅配橙，紅配?黃中差?色?色環(huán)上相距?大約90°的?色彩，常?見藍(lán)配綠，藍(lán)配紫，綠配橙此案例例的藍(lán)?色降低了了明度和飽和度此案例例綠?色降低了了明度對?比?色?色環(huán)上相距120°的?色彩，常?見紅配藍(lán)，紅配綠案例例中的紅?色和藍(lán)?色都降低了了明度案例例中綠?色降低了了明度互補?色?色環(huán)上相距180°，常?見藍(lán)配?黃，紅配?青，紫配綠第19課——常?用的配?色?工具AdobeColor在?色輪上選取?一種主?色就能按照某種配?色?方案?自動變更更其余?色彩。GoogleColorhttps://material.io/resources/color/#!/?view.left=0&view.right=0專?門針對MD?風(fēng)格設(shè)計的配?色?工具能夠?自動把MD出來。ColorHunterhttp://www.colorhunt.co/提供優(yōu)秀配?色案例例和?方案的?網(wǎng)站，可以直接從上?面提取?心儀案例例4.Itemo/主要?用來分享和上傳優(yōu)秀漸變?色的?網(wǎng)站第20課——漸變?色彩的應(yīng)?用第?一部分：XD中的漸變設(shè)置第?二部分：漸變?色的模式同?色漸變案例例同?色漸變多?用于卡?片、按鈕的背景，?用來體現(xiàn)輕微的漸變異?色漸變案例例異?色漸變通常作為卡?片、按鈕的背景，?用來體現(xiàn)沖擊較?大的漸變透明度漸變案例例性。疊加漸變案例例疊加漸變通常?用來增加卡?片背景的紋理理和細(xì)節(jié)$21???fi?@??$—?y:fl??“?@??”$t?????fi?‰?@??%1998@$BenShneiderman($·fi???)??$·fi???DesigntheUserInterface?$@$?§??J?,?$]$;???fifi,??]fl???????????.?fl?fl$?1.?—?fi2.??g$?fl?$t$???fl3.?$?$§?a?5.??$6.fififi?7.?$t$???8.??$t??fi?¤fi?01.?—??Striveforconsistency—?fi?g????:3?—?.?—.?—?02.fi?g$?fl?$t$???flEnableFrequenttoUseShortcuts?$????,$t$??????§??????03.?$?$§OVerInformativeFeedback?—?$t?fl,fi?‰?—;§?04.??? Designdialogtoyieldclosure—4$fifl?‰???fl.$?.?$?05.??$??????OVerSimpleErrorHandlingfi ?fi?????fl￡?‰‰???$‰?fl???fl?‰],fi??,??—??$.?????????fifi?fl???flPermitEasyReversalofActions?$ta??fl?fi‰?,???$t%??,??fl$t??{?fl?fi$t$???SupportInternalLocusofControlfl?fifi ,??$t?flfiflJfl??%???????fifi?ReduceShort-termMemoryLoad$???fi?????$,?????#fl???,?fl? ???flfi?$22?‰?10$??—?y:?‰?10$?%fl???$·?‰?(JakobNielsen)%??]?$ ?§?fi$?$fl???T2000@6$,)?]‰‰fi???fi?fl@$?,2006@4$,?????,??$fl????8?????%??@????fi?,fifl?.??.UI)fi???@?}—??s?y:?÷???fi??Visibilityofsystemstatus?fi?$fl?,fl???fi?fl?? §,?,qfl,fi??‰????flJ?q?fl??flMatchbetweensystemandtherealworldfl?fl???a?‰??$?§?,??????,‰?L{???$t???Usercontrolandfreedom$tgg???‰$‰fl?,fi??‰?$t?fi?????—???Consistencyandstandards?]$t??,?fl@y.?.?,?‰????$?,???${?%,?—$?.fl?.?fl??—??fl??Errorpreventionfl—?fi”‰???????fi?fi,%fl??‰??{}????y??$?Recognitionratherthanrecall?‰?fl.?§?‰??fl,???$tfi?¤??‰????Flexibilityande?ciencyofuse?fl???????$t???$t?fi??fl?Aestheticandminimalistdesignfl??gfl????????/?fl???$ ?§?????T?fi?fi????Helpusersrecognize,diagnose,andrecoverfromerrors‰????‰$??@y(fl?$fi?),$?fl???Helpanddocumentation??fifi?$—?fi?.g?????@????:?‰??$?,?fl??$?fl?fi‰?$?fiJ%—$?8??fi??fiI$$23?§??fi??—?y:fi?%fl??fi$?? fi??—? fi????,y%??fi?$???flfl.???y?$$??—fi??,%‰fi???fi$"g?? ????1910@,MaxWertheimer?‰fi?#fifi,?????fl??,?fi,fl?—‰??}fi?fi‰??fi?????%fi]—fi????J???y ??]?$}??$]???fi.?fi?? fi?A$????s?y:fi?A$?1.?$???fi??%?fl??fia$flfl$,fi???fifl—?$?$??fi????fi??$?flfiaflfl???‰?$??‰fl,s%??y??fi,??%fi????:?$(Pr?gnanz)?2.????y?$??3.????}???y?$??4.ffi?$??]fi????fl?y???????5.4?fi???$—???Ly???fi4????$24$tfl????$—?y:fl??$tfl?????$tfl? %— y$t$fl? ????fi,fi?fl$t$fl?????flfi?????fifl????A???%?$tfl??fi$$??;?,%—I$??A???y?fi:???.???.?fi?.fi??.$‰?,UI?fifi??$‰????$??y:????????1.??????—?$;???fl??¤?,???fl??fi?$??:;?/fl???%fl?????‰?fi?}????$tq‰??????%???????§??$t??%fl??fi?$t$fi?fl??y?fl?????‰—;??}?,fl?‰??fi?fl?$??%flfl????2.????fl???fl?,???fl(???fl?)?fl??? %fl???gfl?§%???fi??fi%fl???? ??UGCfi??fi?3.?fi?flfl??fl?$???y??????fi,?‰]fi???$t???fl????fi??%???fi,??@fi???¤fi???????fi?fl?? $3???,y???;?$t??%fl?fl??)]—?fi;,fi???$t?fifl???§fi????fi???fiT? %???fl?fi??y