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

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