奇酷教育-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

角色動畫可以增加趣味性

51La 主站蜘蛛池模板: 恒温水槽与水浴锅-上海熙浩实业有限公司| 高压包-点火器-高压发生器-点火变压器-江苏天网 | 钢托盘,钢制托盘,立库钢托盘,金属托盘制造商_南京飞天金属制品实业有限公司 | 薪动-人力资源公司-灵活用工薪资代发-费用结算-残保金优化-北京秒付科技有限公司 | 常州翔天实验仪器厂-恒温振荡器-台式恒温振荡器-微量血液离心机 恒温恒湿箱(药品/保健品/食品/半导体/细菌)-兰贝石(北京)科技有限公司 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 胶泥瓷砖胶,轻质粉刷石膏,嵌缝石膏厂家,腻子粉批发,永康家德兴,永康市家德兴建材厂 | 真空粉体取样阀,电动楔式闸阀,电动针型阀-耐苛尔(上海)自动化仪表有限公司 | 一体化隔油提升设备-餐饮油水分离器-餐厨垃圾处理设备-隔油池-盐城金球环保产业发展有限公司 | 西点培训学校_法式西点培训班_西点师培训_西点蛋糕培训-广州烘趣西点烘焙培训学院 | 防火阀、排烟防火阀、电动防火阀产品生产销售商-德州凯亿空调设备有限公司 | 沥青灌缝机_路面灌缝机_道路灌缝机_沥青灌缝机厂家_济宁萨奥机械有限公司 | 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 谈股票-今日股票行情走势分析-牛股推荐排行榜 | 中矗模型-深圳中矗模型设计有限公司 | 砂尘试验箱_淋雨试验房_冰水冲击试验箱_IPX9K淋雨试验箱_广州岳信试验设备有限公司 | 新疆十佳旅行社_新疆旅游报价_新疆自驾跟团游-新疆中西部国际旅行社 | 流水线电子称-钰恒-上下限报警电子秤-上海宿衡实业有限公司 | 手表腕表维修保养鉴定售后服务中心网点 - 名表维修保养 | 宝宝药浴-产后药浴-药浴加盟-艾裕-专注母婴调养泡浴 | 金蝶帐无忧|云代账软件|智能财税软件|会计代账公司专用软件 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 海日牌清洗剂-打造带电清洗剂、工业清洗剂等清洗剂国内一线品牌 海外整合营销-独立站营销-社交媒体运营_广州甲壳虫跨境网络服务 | 贴片电容-贴片电阻-二三极管-国巨|三星|风华贴片电容代理商-深圳伟哲电子 | 发电机组|柴油发电机组-批发,上柴,玉柴,潍柴,康明斯柴油发电机厂家直销 | 万烁建筑设计院-建筑设计公司加盟,设计院加盟分公司,市政设计加盟 | 【电子厂招聘_普工招工网_工厂招聘信息平台】-工立方打工网 | 无锡装修装潢公司,口碑好的装饰装修公司-无锡索美装饰设计工程有限公司 | 气动|电动调节阀|球阀|蝶阀-自力式调节阀-上海渠工阀门管道工程有限公司 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 广州食堂承包_广州团餐配送_广州堂食餐饮服务公司 - 旺记餐饮 | 广东泵阀展|阀门展-广东国际泵管阀展览会| 制氮设备-变压吸附制氮设备-制氧设备-杭州聚贤气体设备制造有限公司 | 东莞精密模具加工,精密连接器模具零件,自動機零件,冶工具加工-益久精密 | 苏州防水公司_厂房屋面外墙防水_地下室卫生间防水堵漏-苏州伊诺尔防水工程有限公司 | 列管冷凝器,刮板蒸发器,外盘管反应釜厂家-无锡曼旺化工设备有限公司 | 便携式高压氧舱-微压氧舱-核生化洗消系统-公众洗消站-洗消帐篷-北京利盟救援 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 企业彩铃制作_移动、联通、电信集团彩铃上传开通_彩铃定制_商务彩铃管理平台-集团彩铃网 | 地图标注|微信高德百度地图标注|地图标记-做地图[ZuoMap.com] | 旋振筛_不锈钢旋振筛_气旋筛_旋振筛厂家—新乡市大汉振动机械有限公司 |