2024UI培训课件教程

第⼀一部分：什什么是UI？通⽤用解释userinterface，⽤用户界⾯面，⼤大家都知道。介于机器器与⼈人类之间的⼀一座桥梁梁，可以理理解为机器器语与⼈人类视觉/⽂文字语⾔言之间的翻译第⼆二部分：UI的发展历程DOS命令⾏行行系统：⻛风⾏行行于1969-1983，⽤用户通过键盘输⼊入指令，电脑接收到指令后，予以运⾏行行。在1980年年代，苹果发布Macintosh，其使⽤用的，以WIMP(window、icon、menu、pointer)为基础的Systemsoftware(MacOS早期名称)系统将图形⽤用户界⾯面带进了了⼤大众市场，取代早期计算机使⽤用的命令⾏行行⼯工具。但现在⼤大家⽿耳熟能详的UI设计，尤指移动端UI设计，始于年年苹果发布第⼀一代iPhone，在第⼆二代iPhone3G时发布iPhone4的出现彻底引爆了了移动互联⽹网的热潮，同时引发UI设计的井喷式发展。第三部分：国内UI⾏行行业的现状互联⽹网⾏行行业规模的变化越来越多的企业开始转型拥抱互联⽹网，应⽤用互联⽹网⽅方法和⼯工具实现⾃自⼰己的⽬目标UI设计师的⼊入⻔门薪资逐年年提⾼高，已经成为绝对⾼高收⼊入群体第2课——UI的实际⼯工作内容第⼀一部分：界⾯面类APP界⾯面界⾯面设计是设计师最主要的⼯工作内容之⼀一，为进⾏行行初期的⻛风格定位、界⾯面以及后续的界⾯面迭代。⼩小程序界⾯面⾃自从微信推出⼩小程序以来，很多没有能⼒力力独⽴立开发APP的⼚厂商开始把⽬目光聚集到⼩小程序这个媒介上，越来越多的店家已经开始⽤用⼩小程序点单结算，所以⼩小程序的界⾯面也需要UI设计师进⾏行行设计。界⾯面⽹网⻚页设计依然是UI设计师回避不不了了的产出内容，⼤大多品牌最起码会有⼀一个⾃自⼰己的品牌主站这个主站的设计维护⼤大多数场景下都需要UI设计师进⾏行行设计。管理理界⾯面随着桌⾯面客户端界⾯面当然除了了移动端界⾯面，我们平时在PC和Mac上使⽤用的⼤大量量软件，其界⾯面也是由UI设计师所完成的。第⼆二部分：运营类banner为产品的运营需求设计banner是另⼀一⼤大主要的持续的⼯工作内容，如果公司内部分⼯工没有那么精细，那么banner这种偏平⾯面设计的⼯工作依然需要UI设计师完成。H5活动⻚页⾯面我们⼀一般所说的H5，是⼀一种运⽤用html5为⼿手段的运营解决⽅方案。我们时常能够看到⽹网易易云⾳音乐、⽀支付宝这类APP会出⼀一些“年年度xxx”的数据报告类运营，这时候⽤用独⽴立的H5⻚页⾯面更更能满⾜足运营需求。活动图标很多APP在⼀一些特殊的节⽇日⽐比如新年年、中秋、双⼗十⼀一、618等等，会将快速⼊入⼝口的图标进⾏行行运营性质的重设计，以符合节⽇日的氛围。应⽤用商店图⽚片UI时活动的处理理，当然这属于细枝末节的⼯工作。第三部分：⽮矢量量类图标在APP中存在⼤大量量图标，⽆无论是功能性图标(搜索、设置之类)，还是视觉性图标(快速⼊入⼝口)，均以⽮矢量量图形为主，也是设计师⽇日常⼯工作之⼀一。扁平插画缺省⻚页、引导⻚页、闪屏⻚页、banner，⽮矢量量插画在实际⼯工作中其实应⽤用得很多，所以也是UI设计师主要的产出物之⼀一。第四部分：动效类交互动效APP界⾯面需要交互，有交互就⼀一定就有动效，⼀一个元素是怎么从⻚页⾯面1的状态变化⾄至⻚页⾯面2状态的？时间多少？快慢如何变化？需不不需要其他动画？这些都是UI设计师必须要思考的点。GIF素材⽽而有时候我们要制作的纯粹就是⼀一张动图，⽐比如加载符的动画，当我们的设计深⼊入到⻚页⾯面的情感化设计之后，这些⼩小动画就变成了了可以玩的细节。5.对接类规范⽂文档切图标注第3课——UI设计软件介绍第⼀一部分：界⾯面设计软件AdobeXD专⻔门推出的界⾯面设计软件，设计师的最优解，基础功能较为完善，插件种类也在增加当中。SketchMac平台的主流界⾯面设计软件，功能完善插件繁多操作顺⼿手，但仅⽀支持Mac平台。Figma全平台通⽤用的线上设计⼯工具，由于其良好的协作设计体验正在冲击的地位，缺陷是没⽹网不不能⽤用。InvisionStudioinvision推出的UI设计软件，⽬目前有mac和Windows两端，优点是可以和invision联动标注⽐比较⽅方便便，缺点是完成度不不够⾼高，对中⽂文设计环境⽀支持不不佳。Axure没落的交互设计软件，尽管Axure能够实现海海量量的交互场景，但上⼿手难度⾼高、操作不不友好受诟病，所以对⽐比sketch、XD失去了了优势。第⼆二部分：交互动效软件FlintoMac平台的交互动效制作软件，着重在制作⻚页⾯面与⻚页⾯面之间的跳转动效，主要输出界⾯面的交互演示稿，与Sketch⽆无缝对接。Principle平台的交互动效制作软件，特点是右侧的实时预览窗⼝口，与属于⼀一个类型的软件，两者挑⼀一即可。Drama⼀一款新的mac平台的交互动效制作软件，与flinto、principle属于同⼀一类型的软件。FramerMac上的原型制作⼯工具，他要求设计师对React、JavaScript有⼀一定的了了解。唯⼆二能⽤用的交互动效软件之⼀一，着重原型的交互动效，、的平台替代。AdobeAfterEffectUI设计师主要⽤用AE来制作⼀一些概念性质的交互动画稿或者GIF动图，不不适合实际项⽬目的界⾯面跳转演示，上⼿手难度⾼高、功能复杂，但却是Windows平台唯⼆二能⽤用的动效软件之⼆二。第三部分：位图/⽮矢量量绘制⼯工具AdobePhotoshop位图处理理软件，我们⼀一般⽤用它来处理理所有需要使⽤用光影和特效的图⽚片。AdobeIllustrator⽮矢量量绘制软件，我们⼀一般⽤用它来绘制基础图标和⽮矢量量插画。AffinityPhotoPhotoshop的有⼒力力竞争者，缺点是效果处理理能⼒力力没PS那么全能，优点是⽮矢量量⼯工具⽐比PS少。AffinityDesignerIllustrator的有⼒力力竞争者，缺点是形状⽣生成⼯工具没Ai强⼤大，优点是⾃自带轴测辅助线，画2.5D插画⽅方便便第4课——设计资源的整理理与准备第⼀一部分：iOS/Android官⽅方组件库iOS端组件库在我们构建APP的时候，有些元素是系统级组件不不可更更改⽐比如statusbar、home有些则是习惯使⽤用且可以⾃自定义⽐比如navigationbar、tabbar，这些组件可以重复在设计稿中使⽤用所以苹果官⽅方会给⼀一套组件库，⾥里里⾯面包含了了构建⼀一个iOSAPP可能⽤用到的可复⽤用组件。Android端组件库跟iOS端⼀一样，安卓也有⾃自⼰己的⼀一套组件库，指导设计师如何针对MaterialDesign进⾏行行设计。第⼆二部分：系统字体iOS端系统字体iOS端的系统默认字体不不可更更改，所以如⽆无特殊需要，我们设计的时候也以苹⽅方和SanFrancisco作为基础字体。当然也不不是只能⽤用这两种字体，iOS内置了了不不少第三⽅方字体⽅方便便搭建APP时调⽤用，但这些字体不不建议作为全局字体来⽤用。Android端系统字体⾕谷歌也给出了了Android端的系统默认字体，设计时同样以这两个字体为准。第三部分：设计资源⽹网址花瓣⽹网站酷UI中国⽇日常的设计视野拓拓展——设计师导航第11课——什什么是系统规范第⼀一部分：系统规范概述在移动端UI的整个发展历程中，系统设计规范是⼀一个由公司内部泛化到公司外部的概念。早年年在iPhone3G和AppStore还未出现之前，iPhone的内置应⽤用都为苹果⾃自⼰己开发，但不不APP会由不不同的团队负责开发，这时候就需要考虑到⼀一个问题——如何保证每个App⼀一致？为了了解决这个问题，设计规范出现了了。iOS设计规范GoogleMaterialDesign设计规范它们给出了了APP⻛风格⽅方向、组件尺⼨寸、触控⾏行行为、反馈等等⼀一系列列的细节。符合规范进⾏行行设计，那么这些细节加起来就保证了了iOS、安卓系统内⽣生态的稳定性和⼀一性。“建议”，iOS更更主流⼩小⽶米、魅族、华为等主流⼚厂商，在系统的设计上都更更倾向于iOS“不不是那么好⽤用”。APPiOSUI但为什什么⼤大多应⽤用在两个系统中使⽤用⼀一样的设计呢：设计的成本过⾼高交互的定义成本过⾼高开发协作的成本过⾼高每次迭代的时间过⻓长数据统计更更艰难……所以，优先了了解和能设计出优秀的iOS应⽤用更更重要第12课——iOS系统规范初识第⼀一部分：iOS官⽅方规范第⼆二部分：iOS设备中的像素和分辨率iOS常⻅见iPhone机型的分辨率设计界⾯面时应当使⽤用的画布尺⼨寸主要以两部典型机型的逻辑分辨率为准：iPhoneX：375✕812iPhone6：375✕667第三部分：界⾯面的布局⽅方式官⽅方建议的iOS界⾯面布局图顶部导航栏(⼤大)+底部标签栏顶部导航栏(⼩小)+底部标签栏⽆无顶部导航栏，有底部标签栏有顶部导航栏，⽆无底部标签栏⽆无顶部导航栏，⽆无底部标签栏控件和组件第13课——iOS系统夜间模式的说明第⼀一部分：深⾊色模式概述继苹果去年年在macOS10.14Mojave上推出了了深⾊色模式之后，安卓⼚厂商纷纷跟进，⼀一时间深⾊色模式似乎成为了了今年年UI设计圈的⼜又⼀一个潮流。在19年年WWDC⼤大会上，苹果终于也把深⾊色模式的潮流也带到了了iOS中，也就是iOS13中的DarkMode。第⼆二部分：iOS系统⾊色彩适配基础彩⾊色的适配保持⼀一致。当然，苹果也强调了了这些⾊色彩并不不是强制使⽤用的，按需取⽤用即可。适配后案例例：背景⾊色的适配背景⾊色有三个层级，浅⾊色模式下三个层级分别为⽩白→浅灰→⽩白，⽽而深⾊色模式则是依次变浅的⿊黑⾊色。适配后案例例：⽂文字⾊色的适配⽂文字⾊色除了了⼀一级⾊色彩使⽤用的全⿊黑和全⽩白之外，其余三个层级均为同⼀一⾊色彩的不不同透明度。适配后案例例：分割线的适配⽽而分割线，苹果也给出了了带透明度和不不透明的各⼀一组⾊色彩，正常情况下使⽤用带透明度的可，只有当出现交叉分割线时才需要⽤用到第⼀一列列实⾊色适配后案例例：阴影浮层的适配需要注意的是在⽩白⾊色背景下能够表达纵深的「阴影」，在深⾊色模式的纯⿊黑⾊色背景下已经不不适⽤用了了，所以iOS建议利利⽤用「浮层」(Elevated)来表达⻚页⾯面的纵向关系。Elevated模式中起作⽤用，所以对应的⾊色彩规范也全是以深⾊色模式为准。适配后案例例：Material卡⽚片的适配Material卡⽚片是在iOS中⼤大量量使⽤用的带磨砂玻璃质感的卡⽚片，系统中包括负⼀一屏卡⽚片、touchMaterialMaterial卡⽚片按照厚薄来区分⼀一共有四组。适配后案例例：⾃自定义⾊色彩的适配除了了系统已经给你备好的这么多颜⾊色，⼤大量量的第三⽅方APP谐统⼀一，构建更更加整体⼀一致的iOS⽣生态，官⽅方建议⾃自定义⾊色彩与背景的对⽐比度不不⼩小于4.5第⼀一部分：深⾊色模式下的组件引⽤用第17课——⾊色彩模式的认识第⼀一部分：常⻅见的⾊色彩模式在⾃自然界中，存在⽆无穷⽆无尽的⾊色彩⽽而我们是“词穷”的所以，颜⾊色的描述要准确，不不是诉诸语⾔言，⽽而是“参数RGB模式RGB是⼀一种由红(Red)、绿(Green)、蓝(Blue)为三原⾊色的⾊色彩模式。CMYK模式CMYK是以⻘青(Cyan)独添⼀一个⿊黑⾊色(Black)通道。HSB模式以⾊色相(Hue)、饱和度(Saturation)、明度(Brightness)为分量量的⾊色彩模式，不不⽤用于⾊色彩显示，⼀一般只⽤用于拾拾⾊色选⾊色。灰度模式只存在灰阶⾊色彩的图像模式。位图模式灰度模式的⼦子集，每个像素只能存储⿊黑⾊色和⽩白⾊色⼆二者之⼀一的⼆二元图像模式。索引⾊色彩模式索引模式的图像会带有⼀一张⾊色彩索引表，图像内所有的像素只能从表中选⾊色。我们在使⽤用PS的导出为web格式时能够看到⾊色彩索引表，这也是⼀一种压缩图⽚片的算法。Lab模式以亮度(Lightness)、从红⾊色到绿⾊色的分量量(a)、从蓝⾊色到⻩黄⾊色的分量量(b)作为描述的⾊色彩模式，⾊色彩空间中拥有⼈人眼可⻅见的所有⾊色彩。第⼆二部分：⾊色彩模式的应⽤用RGB：⽤用在以屏幕作为显示媒介的图⽚片上CMYK：⽤用在以印刷物作为媒介的图⽚片上HSB：⽅方便便拾拾⾊色Lab：⽤用在⾊色彩转换、⾊色差测量量和图像调⾊色领域索引⾊色彩：⽤用来压缩图⽚片灰度：⽤用于特殊印刷物的图⽚片(⽐比如报纸)位图：特殊的⻛风格化处理理、印刷时的⽹网格定位在我们真正的配⾊色过程中，主要采取HSB的模式来完成我们的⾊色彩选择第18课——关于⾊色环和配⾊色⽅方案第⼀一部分：⾊色环/⾊色相环第⼆二部分：基本配⾊色⽅方案同类⾊色在⾊色环上相距15°以内的⾊色彩。邻近⾊色⾊色相环上相距⼤大约45°的⾊色彩，常⻅见红配橙，红配⻩黄中差⾊色⾊色环上相距⼤大约90°的⾊色彩，常⻅见蓝配绿，蓝配紫，绿配橙此案例例的蓝⾊色降低了了明度和饱和度此案例例绿⾊色降低了了明度对⽐比⾊色⾊色环上相距120°的⾊色彩，常⻅见红配蓝，红配绿案例例中的红⾊色和蓝⾊色都降低了了明度案例例中绿⾊色降低了了明度互补⾊色⾊色环上相距180°，常⻅见蓝配⻩黄，红配⻘青，紫配绿第19课——常⽤用的配⾊色⼯工具AdobeColor在⾊色轮上选取⼀一种主⾊色就能按照某种配⾊色⽅方案⾃自动变更更其余⾊色彩。GoogleColorhttps://material.io/resources/color/#!/?view.left=0&view.right=0专⻔门针对MD⻛风格设计的配⾊色⼯工具能够⾃自动把MD出来。ColorHunterhttp://www.colorhunt.co/提供优秀配⾊色案例例和⽅方案的⽹网站，可以直接从上⾯面提取⼼心仪案例例4.Itemo/主要⽤用来分享和上传优秀渐变⾊色的⽹网站第20课——渐变⾊色彩的应⽤用第⼀一部分：XD中的渐变设置第⼆二部分：渐变⾊色的模式同⾊色渐变案例例同⾊色渐变多⽤用于卡⽚片、按钮的背景，⽤用来体现轻微的渐变异⾊色渐变案例例异⾊色渐变通常作为卡⽚片、按钮的背景，⽤用来体现冲击较⼤大的渐变透明度渐变案例例性。叠加渐变案例例叠加渐变通常⽤用来增加卡⽚片背景的纹理理和细节$21ş¶ᦡfiἎ@كဩ$—᮱y:fl‡ฎ“Ἆ@كဩ”$þኴᶎş¶ᦡfiك‰Ἆ@ဩڞ%1998@$BenShneiderman($·fi¼஛่)ڞ՗$·fi¼஛่DesigntheUserInterface½$@$¼§õᕮJ๶,¾$]$;හş¶fifi,¼¼]fl¼ᵱᥝᵱᥝ¾ᤈፘଫᥴ᯽.ᔜfl޾fl$̶1.ṛ—¼fi2.½ᕪg$ƒflⒸ$þ$ๅஆ඙fl3.׀$఺$§ޞªᇫ5.׀ᓌ$6.fififiຂ7.½$þ$¿ƒఽ8.ٺ੝$þᎨ๗fi஡¤fiø01.ṛ—¼⎝Striveforconsistency—¼fi۱gßӻᥝᅩ:3¼—¼.ᐏ—.½—¼02.fiᕪg$ƒflⒸ$þ$ๅஆ඙flEnableFrequenttoUseShortcuts୮$᷇ሲीے,$þ$ٺ੝ş¶ེහ§ےளş¶᭛̶03.׀$఺$§OVerInformativeFeedback¼—ӻ$þ඙fl,fiଫ‰ß—;§̶04.ޞᎣᇫ Designdialogtoyieldclosure—4$fiflଫ‰Ⓒᕢßfl.$ᳵ.ᕮ$̶05.׀ᓌ$ßⒸ॒ቘ†¾OVerSimpleErrorHandlingfi ᦡfiଫ୮¾ݢᚆfl£ß‰‰᧏̶®$‰᧏flݢ᭿عfl߉],fiß๶,ଚ׀—ӻᓌ$.ݢቘᥴ॒ቘ†ဩ̶ßfifiຂflඋᲀ඙flPermitEasyReversalofActions୮$þªⒸ඙flݢfi‰ၾ,şٺ¼$þ%ᡤఘ,ଚἩfl$þറÇ{඙fl̶fi$þ$¿ƒఽSupportInternalLocusofControlflᦡfifi ,ᥝ½$þݎ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ᚆ޾๐ªଫ‰ᩂ½$ਫ§ኴ,½מ௳ๅᛔᆐ,‰ᬋL{ๅøⒶ$þݢƒڞUsercontrolandfreedom$þggş᧏᥶‰$‰flᚆ,fiժଫ‰½$þݢfi†׎ᭅß̶—¼⎝ڞConsistencyandstandards¼]$þ๶᧔,¼fl@y.ᇫ.¼,ଫ‰᥶ݎፘ¼$ఘ,᭽՗᭗${੪%,¼—$᧍.flᚆ.඙flכ೮—¼̶flⒸڞErrorpreventionfl—ӻfi”‰᧏ᯯ୨ᑻๅঅᦡfi†fi,%fl½ӻ‰᧏ݎ{}ڹ੪᭿عy̶Ⓐ$ڞRecognitionratherthanrecall᭗‰Ⓒfl.¼§½‰ݢ½fl,๶¼¼$þfi஡¤រ̶‰ၚṛපڞFlexibilityandefficiencyofuseঅflⒸᵱᥝ¼ّᶶƒ$þ޾ᩒႮ$þᵱ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ᥤᥧfiª$flfl$,fiժᵱᥝfifl—ӻ$ڹ$ᚏⒸfi؎ౡ̶Ⓒfi؎ౡ$ᚏflfiªflfl¼ࢶ୵‰¼$şß‰fl,s%ݻᆧyÇᶌfi,½੪%fiरቘ½ஞ:ᓌ$(Prägnanz)̶2.ፘ֒ፘ֒yÇ$ßⒸ3.ള½ፘ¶}ᳵള½yÇ$ßⒸ4.ffiݳ$ݻ؁]fiᗌࢶ୵ᚏflßyⒸݢቘᥴࢶ୵̶5.4ᖅfiժᥤᥧ$—ӻ†ݻLyÇᦩ¾fi4ᖅݻ؁̶$24$þflḵ¶ᥝÇ$—᮱y:fl‡ฎ$þflḵ¶ᥝÇ?$þflḵ %— y$þ$flⒸ ஞቘ޾ᤈfi,fiჿfl$þ$flⒸ๗޾ፓƒflfißݎᅩ๶ᦡfiflⒸ௏Ⓒ̶AᥝÇڞ%՗$þflḵᦡfi$$ß๶;ᅩ,%—I$̶½AӻᥝÇy¾fi:¼ኼ¾.᝜ࢱ¾.ᕮfi¾.fi¾¾.$‰¾,UIᦡfifi¾޾$‰¾᝜ዀ̶$ԫ᮱y:®¼ᥴ᯽¶ᥝÇ?1.౴ኼ¾¼ኼ¾—ᛱ$;ӱ¼ࢫflṛ¾¤ᨱ,¾ᥴ¾flⒸᦡfiच$ᳯ᷌:;ӱ/flⒸፓƒ%fl‡?®¼ਫ‰ፄfi?}ޞ¼න?$þq‰?ଘݣುß?%ވᵱᥝ¾ᤈⒸᇈ§½?$þፓƒ%fl‡?fiժ$þ$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,lj]fi®¼ଫ$þמ௳ࣳflⒸ๶᧔ᕮfi¾ڞ%מ௳¾fi,ݳቘ@fiמ௳¾¤fi׏ቘᥴ̶ş¶ᦡfiӻflᚆࣘ $3¼ᕚⒸ,yժݱӻ;ᅩ$þş¶%fl‡flᚆ¾)]—ӻfi;,fi®¼¼$þᤈfiflßݳቘ§fi̶מ௳¾fiמ௳¾fiTᥝ %מ௳ࣳflⒸfiמ௳y