奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌

您現在所在的位置:首頁 >關于奇酷 > 行業動態 > UI設計師如何為產品快速構建合理的UI動效

UI設計師如何為產品快速構建合理的UI動效

來源:奇酷教育 發表于:

奇酷教育-UI培訓_UI培訓班_UI設計_UI設計培訓班

動效有助于讓UI具有更好的表現力及更易于使用,盡管具有如此大的潛力,但可能由于它是UI設計家族中的新成員之一,所以它大概是所有設計學科中最不被大眾所了解的。視覺設計和交互設計可追溯到早期的GUI,但由于動畫必須由現代硬件來順暢的渲染,而且UI動效和傳統動畫之間的重疊區間也使得兩者之間的區分變得復雜。傳統動畫需要掌握迪斯尼的12個基本原則,那么這是否意味著UI動效也像傳統動畫一樣復雜?我經常能聽到人們說,動效設計很復雜,不知道如何選擇相對應的動畫模式,但是我認為至少在UI領域,動效設計是可以很簡單的。

 

從哪里開始

動效主要是通過UI元素之間關系過渡來幫助用戶瀏覽App。當然還可以通過使用圖標、勛章以及插畫動效來為App增色,但是建立產品可用性應該優先于增加動效表現力。在展示你的動效設計技巧之前,讓我們先從設計一個基本的動效開始,即產品導航之間的過渡。

過渡模式

在設計導航之間進行動效過渡時,簡單性和一致性是最關鍵的點。為了達到這個目的,我們將以下2種動畫模式中進行選擇:

1、基于容器的過渡。

2、沒有容器的過渡。

基于容器的過渡 

Image title

文本、圖標和圖片等元素在容器內進行分組

 

如果動畫涉及像按鈕,卡片或列表這樣的內容,則使用基于容器的動畫設計,容器通常有很明顯的邊界,這種模式分為三個步驟:

1.使用Material的標準緩動為容器設置動畫(意味著它可以快速加速,然后逐漸的慢下來)。在下圖的示例中,容器的尺寸和圓角半徑從圓形按鈕動畫過渡到填充整個屏幕的矩形。

Image title

 

2.縮放容器中的元素進行寬度自適應,將元素固定在頂部但是仍然存在容器內,這樣在容器和內部元素之間創建了清晰的關系鏈。

Image title

*放慢動畫速度以說明元素在容器內如何縮放

 

3.隨著容器加速,在過渡期間逐漸淡出消失。當容器減速時輸入的元素逐漸淡入。當元素進行快速移動時,通過淡入淡出來實現元素的更替。

Image title

*放慢動畫速度以說明元素如何使用淡出淡出

 

將此模式應用于所有涉及容器過渡的動效,這樣會建立起來一致的動效規則。這樣還使得開始和結束之間的關系更加清晰,因為它們是由兩個動畫容器互相銜接的。為了展示這種模式的靈活性,這里將它分為五種不同使用場景:

Image title

*放慢動畫速度以說明容器如何連接開始和結束

 

有的容器只是使用Material的標準緩動從屏幕外滑入,它滑動的方向取決于與之關聯的組件位置。例如點擊左上角的抽屜導航,圖標將從左側滑動容器。

如果容器從屏幕邊界進入,則它會淡入并放大。它并不是從0%的比例制作動畫,而是從95%開始,以避免元素之間的過渡幅度太大。縮放動畫使用Material的減速緩動,這意味著它以峰值速度開始并逐漸減速停止。在元素退出時,容器會在沒有縮放動畫的情況下淡出。為什么退出動畫會有這樣微妙的設計呢,這樣做是便于將注意力集中在新內容上。

Image title

*放慢動畫速度以說明容器如何通過淡入淡出進行縮放動畫

 

沒有容器的過渡

有些作品將使用沒有容器的過渡來構建動效設計,例如點擊底部導航中的圖標,將用戶帶到新的頁面,在這些情況下,將使用以下兩個步驟:

1、起始元素通過淡出消失,然后最終元素通過淡入進入。

2、隨著最終元素逐漸出現,使用Material的減速運動來巧妙的展現。但同時縮放僅適用于新舊內容的替換。

Image title

*放慢動畫速度以說明沒有容器的過渡如何使用淡入淡出和縮放

 

如果開始和結束的組合元素具有清晰的空間或順序關系,則可以使用共享動畫來強化它。例如當下圖觸發導航組件時,開始和結束的動畫都在垂直維度進行滑動,這加強了他們的垂直布局。當點擊下右圖入門流程中的下一個按鈕時,從左向右水平動畫強化了序列進行的的概念。共享動畫使用Material的標準緩動。

Image title

*減慢動畫以說明垂直和水平共享動畫

 

最佳方案

把事情變的更簡單一些

鑒于其動畫頻率高低與產品可用性密切相關,導航過渡通常應該優先于功能展示。引人注目的動畫通常最適用于小圖標,勛章,加載或空狀態等元素。下面這個簡單的案例可能不會得到Dribbble的那么多關注,但是它更像一個真實的產品。

Image title

*放慢動畫速度以顯示不同的動畫風格

 

選擇合適的時間及緩動類型

導航過渡應該使用合適的時間,快速過渡優先考慮功能,但是速度也不要太快,防止動畫路徑迷失。根據動畫占用的屏幕比例來選擇動畫持續時間。由于導航過渡通常占據屏幕的大部分,因此300ms是一個比較有經驗的動畫時長。相比之下,像開關按鈕這種小組件動畫持續時間很短,大概在100ms左右。如果過渡感覺太快或太慢,請以25ms的增量調整其持續時間,直到它達到合適的動畫節奏。

Easing描述了動畫加速和減速。大多數導航過渡使用Material的標準緩動,這是一種不對稱的緩動類型。這意味著元素會快速加速運動,然后緩慢減速以將注意力集中在動畫結束時。這種類型的緩動為動畫提供了自然的感覺,因為現實世界中的物體不會立即開始或停止移動。如果動畫看起來很僵硬或死板,那么可能是由于你選錯了緩動類型。

Image title

*放慢動畫速度以說明不同的緩動類型

 

本文所說的動效模式在建立一種實用而又微妙的動畫風格。這適用于大多數產品,但某些品牌可能需要更激進的動效表達。要了解更多有關動效的內容,請閱讀Material motion指南。

一旦處理好了導航之間的過渡動畫,在你的產品中添加角色動畫的挑戰就開始了。這意味著簡單動畫模式是不夠的,這時候動傳統的動畫工藝會真正閃耀起來。

Image title

角色動畫可以增加趣味性

主站蜘蛛池模板: 曙光腾达官网-天津脚手架租赁-木板架出租-移动门式脚手架租赁「免费搭设」 | 阿米巴企业经营-阿米巴咨询管理-阿米巴企业培训-广东键锋企业管理咨询有限公司 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 实验室pH计|电导率仪|溶解氧测定仪|离子浓度计|多参数水质分析仪|pH电极-上海般特仪器有限公司 | 合同书格式和范文_合同书样本模板_电子版合同,找范文吧 | 亳州网络公司 - 亳州网站制作 - 亳州网站建设 - 亳州易天科技 | 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | RO反渗透设备_厂家_价格_河南郑州江宇环保科技有限公司 | 全国国际学校排名_国际学校招生入学及学费-学校大全网 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 档案密集架_电动密集架_移动密集架_辽宁档案密集架-盛隆柜业厂家现货批发销售价格公道 | 氮化镓芯片-碳化硅二极管 - 华燊泰半导体 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 防火窗_耐火窗_防火门厂家_防火卷帘门-重庆三乐门业有限公司 | 乐考网-银行从业_基金从业资格考试_初级/中级会计报名时间_中级经济师 | 自动焊锡机_点胶机_螺丝机-锐驰机器人 | 食品无尘净化车间,食品罐装净化车间,净化车间配套风淋室-青岛旭恒洁净技术有限公司 | 东莞压铸厂_精密压铸_锌合金压铸_铝合金压铸_压铸件加工_东莞祥宇金属制品 | 在线PH计-氧化锆分析仪-在线浊度仪-在线溶氧仪- 无锡朝达 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 开云(中国)Kaiyun·官方网站-登录入口| 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 国际金融网_每日财经新资讯网 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | CE认证_产品欧盟ROHS-REACH检测机构-商通检测 | 篷房|仓储篷房|铝合金篷房|体育篷房|篷房厂家-华烨建筑科技官网 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | RS系列电阻器,RK_RJ启动调整电阻器,RQ_RZ电阻器-上海永上电器有限公司 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 高低温老化试验机-步入式/低温恒温恒湿试验机-百科 | 玉米加工设备,玉米深加工机械,玉米糁加工设备.玉米脱皮制糁机 华豫万通粮机 | 餐饮小吃技术培训-火锅串串香培训「何小胖培训」_成都点石成金[官网] | 硫化罐-电加热蒸汽硫化罐生产厂家-山东鑫泰鑫智能装备有限公司 | 实验室隔膜泵-无油防腐蚀隔膜泵-耐腐蚀隔膜真空泵-杭州景程仪器 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 北钻固控设备|石油钻采设备-石油固控设备厂家 | 偏心半球阀-电动偏心半球阀-调流调压阀-旋球阀-上欧阀门有限公司 | LED太阳能中国结|发光红灯笼|灯杆造型灯|节日灯|太阳能灯笼|LED路灯杆装饰造型灯-北京中海轩光电 | 手持式线材张力计-套帽式风量罩-深圳市欧亚精密仪器有限公司 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 |