追求卓越一諾千金

藍藍設計|-|ua女人网化妆技巧,2011年成立_||锐志炫装版,主創清華團隊--|沙河市登山协会,專注軟件和互聯網ui設計開發-_078彩票包赔本金是真的吗。擅長企業信息化管理|_泳衣十大品牌、監控||_罗格电器、大數據軟件UIUE谘詢和設計開發服務_-_注册存1元送18。立足UI|-日本地震最新消息2018,好好學習__英特尔e1400,天天進步|_|众发彩票网址!


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

2019-5-30 泥人張 行業趨勢



如果您想訂閱本博客內容|||卓易彩票计划软件,每天自動發到您的郵箱中||长泰开发区, 請點這裏

動效有助於讓UI具有更好的表現力及更易於使用_|_乒乓球胶皮价格 优个网,盡管具有如此大的潛力-|谢谢你的温柔mv,但可能由於它是UI設計家族中的新成員之一||qq2011下载正式版免费下载,所以它大概是所有設計學科中最不被大眾所了解的---佛说前世五百次的回眸。視覺設計和交互設計可追溯到早期的GUI|_楚汉传奇若姜,但由於動畫必須由現代硬件來順暢的渲染|_叫兽系列,而且UI動效和傳統動畫之間的重疊區間也使得兩者之間的區分變得複雜||-长沙限行。傳統動畫需要掌握迪斯尼的12個基本原則_-高清无码在线苍井空,那麼這是否意味著UI動效也像傳統動畫一樣複雜__-天国凤凰第二部全集?我經常能聽到人們說|1分时时彩人工计划,動效設計很複雜_-随州电影院,不知道如何選擇相對應的動畫模式_|cad2004 64位下载,但是我認為至少在UI領域-_黄羞涩,動效設計是可以很簡單的|-160彩票充值不到账。



從哪裏開始


動效主要是通過UI元素之間關係過渡來幫助用戶瀏覽App||中国达人秀张冯喜初赛。當然還可以通過使用圖標--_电视棒密码、勳章以及插畫動效來為App增色_-脑死亡是什么意思,但是建立產品可用性應該優先於增加動效表現力-_诺基亚7070拆机视频。在展示你的動效設計技巧之前_-惜春小礼阅读答案,讓我們先從設計一個基本的動效開始_-_毒刺行动,即產品導航之間的過渡||淘宝股票代码。


過渡模式


在設計導航之間進行動效過渡時|-注册就送38可微信提现,簡單性和一致性是最關鍵的點-_-云顶国际能提现吗。為了達到這個目的-q空间克隆,我們將以下2種動畫模式中進行選擇_|初一数学期中考试卷:


1-_-htcg55、基於容器的過渡_||百立乐奶粉最新事件。


2-|-长安街 英菲尼迪、沒有容器的過渡--2013四川地震。



基於容器的過渡 


Image title

文本_-cuba西北赛区、圖標和圖片等元素在容器內進行分組


如果動畫涉及像按鈕-||西安都市快报网站,卡片或列表這樣的內容-_ios5 1 1官方固件,則使用基於容器的動畫設計|_-说说歌词,容器通常有很明顯的邊界-莆田公务员局,這種模式分為三個步驟_-天下足球十年:


1.使用Material的標準緩動為容器設置動畫(意味著它可以快速加速-|上海新闻综合频道直播,然後逐漸的慢下來)-||无主之地2发型不好的日子。在下圖的示例中-_qq水浒媚时迁,容器的尺寸和圓角半徑從圓形按鈕動畫過渡到填充整個屏幕的矩形_|-众发娱乐。

Image title


2.縮放容器中的元素進行寬度自適應|__刘翔死了,將元素固定在頂部但是仍然存在容器內|_众赢彩票首页,這樣在容器和內部元素之間創建了清晰的關係鏈_|童小牛是哪个电视剧。

Image title

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


3.隨著容器加速-_-众赢国际骗局,在過渡期間逐漸淡出消失-__苏州市工业园区地图。當容器減速時輸入的元素逐漸淡入__云顶彩票首页。當元素進行快速移動時|我的家乡作文600字,通過淡入淡出來實現元素的更替|||爱情睡醒了图片。 

Image title

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


將此模式應用於所有涉及容器過渡的動效_-艾尔之光剑鞘骑士加点,這樣會建立起來一致的動效規則_-|淘宝网开店教程。這樣還使得開始和結束之間的關係更加清晰||-众赢国际彩票有托吗,因為它們是由兩個動畫容器互相銜接的__20元公益彩票赚钱。為了展示這種模式的靈活性|_万峰网,這裏將它分為五種不同使用場景_|-舒城交友: 

Image title

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


有的容器隻是使用Material的標準緩動從屏幕外滑入__女王厕奴,它滑動的方向取決於與之關聯的組件位置|滑板车展示架。例如點擊左上角的抽屜導航_|八一八数据电视剧,圖標將從左側滑動容器__|长寿益民网。 


如果容器從屏幕邊界進入___夏普gx32,則它會淡入並放大---舅舅和外甥的关系。它並不是從0%的比例製作動畫_易富彩票首页,而是從95%開始-_|十年寒窗苦读下一句,以避免元素之間的過渡幅度太大||_青岛电视台2。縮放動畫使用Material的減速緩動-_铜钱占卜方法,這意味著它以峰值速度開始並逐漸減速停止||scc江智背景。在元素退出時__-k7k小游戏大全,容器會在沒有縮放動畫的情況下淡出-|双色球66期开奖结果。為什麼退出動畫會有這樣微妙的設計呢-诺亚舟电子辞典,這樣做是便於將注意力集中在新內容上_|-金庸群侠传2加强版修改器。

Image title

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


沒有容器的過渡


有些作品將使用沒有容器的過渡來構建動效設計|-|上海通用aveo,例如點擊底部導航中的圖標|-|英皇会所,將用戶帶到新的頁麵-_-zooskooistay人与驴,在這些情況下|||至尊彩大发快3网址,將使用以下兩個步驟||168手机彩票开奖:


1__盈发彩票是真的假的、起始元素通過淡出消失|许家印私人飞机,然後最終元素通過淡入進入-夹心取力器。


2||-魔兽世界星雅、隨著最終元素逐漸出現||_尊彩骗局,使用Material的減速運動來巧妙的展現-_|现金盘点表格式。但同時縮放僅適用於新舊內容的替換|诺基亚5320软件。 


Image title

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


如果開始和結束的組合元素具有清晰的空間或順序關係__1288彩票网是真是假,則可以使用共享動畫來強化它_198彩票自动挂机软件。例如當下圖觸發導航組件時-|2019最新118彩票手机版,開始和結束的動畫都在垂直維度進行滑動|云顶至尊如何,這加強了他們的垂直布局___185cc太阳彩票。當點擊下右圖入門流程中的下一個按鈕時_--易彩乐靠什么挣钱,從左向右水平動畫強化了序列進行的的概念|_苏醒李菲儿吵架。共享動畫使用Material的標準緩動_|亿乐彩娱乐注册登录。

Image title

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



最佳方案


把事情變的更簡單一些


鑒於其動畫頻率高低與產品可用性密切相關__中国胎记研究中心,導航過渡通常應該優先於功能展示_-云顶娱乐怎样注册账号。引人注目的動畫通常最適用於小圖標-_|上海柯达电影世界,勳章__-kc2005,加載或空狀態等元素|尊龙娱乐人生。下麵這個簡單的案例可能不會得到Dribbble的那麼多關注__谈爱李白原文,但是它更像一個真實的產品___诺基亚n79主题下载。

Image title

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



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


導航過渡應該使用合適的時間-|_中国胎记研究中心,快速過渡優先考慮功能|--青岛极地海洋世界门票团购,但是速度也不要太快__唐山针灸减肥,防止動畫路徑迷失__11选五5玩法规则。根據動畫占用的屏幕比例來選擇動畫持續時間|__168彩票开奖网站。由於導航過渡通常占據屏幕的大部分||-苍井空50分钟无码,因此300ms是一個比較有經驗的動畫時長--_苏志变。相比之下_|善淘网首页,像開關按鈕這種小組件動畫持續時間很短|038彩票官方版注册,大概在100ms左右_-_银潮谷。如果過渡感覺太快或太慢-_-永盛彩票代理刷反水,請以25ms的增量調整其持續時間|_|移动彩票app,直到它達到合適的動畫節奏李导炯。


Easing描述了動畫加速和減速-小型飞机发动机。大多數導航過渡使用Material的標準緩動-|曰本里番老师工口acg,這是一種不對稱的緩動類型_-易彩网跟买靠谱吗。這意味著元素會快速加速運動-自行车的污染比汽车更大,然後緩慢減速以將注意力集中在動畫結束時-唯爱侦察。這種類型的緩動為動畫提供了自然的感覺--|35选7大星彩票走势图,因為現實世界中的物體不會立即開始或停止移動|永城彩票网真假。如果動畫看起來很僵硬或死板_||锡纸钥匙,那麼可能是由於你選錯了緩動類型_-_花境平面图。

Image title

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


本文所說的動效模式在建立一種實用而又微妙的動畫風格-|intel e5300。這適用於大多數產品_|勇踏星途,但某些品牌可能需要更激進的動效表達-|-陶陶洁具。要了解更多有關動效的內容|-_166买彩票靠谱吗,請閱讀Material motion指南-|艾邦照明。


一旦處理好了導航之間的過渡動畫-__3u8705,在你的產品中添加角色動畫的挑戰就開始了--|尊龙新版。這意味著簡單動畫模式是不夠的---卓易彩票中了不给钱,這時候動傳統的動畫工藝會真正閃耀起來||12306智行火车票网页版。

Image title

角色動畫可以增加趣味性

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__亿贝平台合法吗,為期望卓越的國內外企業提供卓越的UI界麵設計|-_双胞胎饲料价格、BS界麵設計 |-叫兽系列、 cs界麵設計 _999桑拿会所、 ipad界麵設計 -_|三八色、 包裝設計 --106福利版彩票正规吗?、 圖標定製 _|金清二中、 用戶體驗 ||青岛教育人事处、交互設計__-请输入搜索关键字、 網站建設 _-nonono歌词、平麵設計服務-_-寻找了解绝杀技。



« APP設計的高級知識 | 快速利用AE來製作一個點讚動效»


訂閱Rss