追求卓越一諾千金

藍藍設計-|雅安江神医,2011年成立_|李涵辰网站,主創清華團隊|_-物合网,專注軟件和互聯網ui設計開發|_-银河娱乐网站线路。擅長企業信息化管理-_三横一竖倒月钩、監控||_至尊联盟、大數據軟件UIUE谘詢和設計開發服務|-_济南新闻频道。立足UI-|-马云评价云联惠,好好學習-锡盟蒙中,天天進步|-_注册送58元彩票红包!


Tab Bar 圖標動效設計類型總結

2019-7-9 泥人張 圖標設計文章及欣賞


如果您想訂閱本博客內容--苏州园区乙类公积金,每天自動發到您的郵箱中||金星a1000, 請點這裏

Tab bar 作為整個 APP 的第一觸點||-儿童画春天的图片,給用戶傳遞的理念及信息在整個 APP 中具有不可替代的重要性|_|二手摩托车跑车 黑车。我們的第一感受是粗糙或是精致_|诺基亚6120软件下载,都會通過這個簡單的操作切換而感知-|_3g加油站。因此 tab bar 的設計---父爱难消by公子书包,往往也是檢驗整個 APP 設計是否精致的標準|-248彩票安卓版免费。

Tab bar 設計中_|-何小萌萌萌,有一個很重要但卻常常會被設計師們遺漏的關鍵點──tab 切換時的 「圖標動畫設計」|-金兜洞兕大王。如這些 APP 的底部 tab 設計都使用了這一種方式(以下視頻)__|陈亚辉:

Tab bars圖標動畫的作用

精彩的圖標動畫|-常州模具城,對整體的設計具有畫龍點睛的作用-|永盛彩票网怎么注册,降低 tab 切換時的枯燥感-|-1010cc彩票安卓版,提升操作的愉悅度和期待感_|徐娇新浪微博。甚至可以通過 tab 的動畫設計給用戶傳達出整個 APP 設計的品牌及理念__氯丹。

1. 動靜對比

動態的設計豐富了圖標更多可能性的表達|__阜新苏阳,結合不同的動態效果表達出不同的情緒或情感__2019网投平台。而除了情感的表達之外|_-晚托网,最基礎的作用在於動態比靜態更加吸引眼球亿彩彩票app登录,增加視覺關注度||脉搏士,因此在切換 tab 時具有更強的視覺衝擊力-|注册送金币。

2. 柔和與生硬

緩動的動效過渡__-眠宝,相比於無動效的設計-苏畅古筝,在 tab 切換時整體的視覺感受會更加柔和-|_158计划网分分彩、輕量-_-芬兰语好学吗。過渡直接的反饋-_|行乐居,容易造成生硬而不具美感|_中国人电影网。

3. 趣味的表達

由於動效的加入-__123彩票靠谱吗,我們在設計 tab 切換時會變得更加多元化|_重庆打黑英雄,而不是單純的設計一個動作的反饋-浠水姜林。在過渡的時間差中|_|易彩彩票是正规的吗,可以進行很多趣味的表達__-赢彩网是正规网站吗。

3. 情緒代入

圖標結合表情的設計_||西凤酒1952价格表,運用動效的設計|-|菲诗曼尔,讓整體的情緒感受更加直觀中考百日誓师誓词。如下圖案例_-101号宠物恋人2,默認態與選中態通過前後的差異對比_|_云顶至尊户型图,點擊後出現的表情驚喜_||莱州市教育科研网,具有不一樣的情緒變化-_11选5天津开奖。

Tab bar圖標動畫的基礎類型

動畫的設計是多樣化的|6月新股,Tab bar 圖標動畫的類型實際上並沒有明確的劃分|详细个人自传,這裏主要列舉的是自己在日常瀏覽設計網站時的收集-_-小学生400字日记,以及個人認為比較常見的一些類型-|卜冰。我們可以基於這些常見類型的設計||亿彩彩票能提现吗,對我們的設計進行再升華_-天下足球微观天下,從而提高整體設計的質感和趣味-亿彩彩票怎么样。

1. 縮放動畫

點擊後通過一定的比例 「縮放」 反饋-|_优优娱乐彩票反向,突出 tab 之前的變化_长线放大器,從而強化了 tab 操作的感知|-丰田路霸汽车报价,提升對於操作區域的視覺聚焦_-|中大恒基。結合不同的縮放效果--|安心奶妈网,可以呈現出不同的視覺感知-|_美年达揭盖赢奖,縮放動畫大致分為線性和彈性兩種類型-_-英姿带。

線性縮放

圖標在放大或縮小的過程中|-佳俊车行,使用了勻速的動畫效果_|kingroot pc版官方下载,整體動畫一步到位_|雅马哈r6报价、幹淨利落106福利安卓版。整體視覺感知較為柔和_||乏力草。

彈性縮放

帶有彈性縮放的 tab 反饋-qq超市5店3口碑摆法,讓整體的設計更加具有趣味性|-_耐美金,相比線性縮放也更有視覺衝擊力|-_优彩娱乐骗局。圖標的運動規則__008彩票资讯网:先從 0 放大到最大(數值根據實際情況設定)_-农牧场盗匪,然後再回彈至正常大小|_|云顶国际赌场。

2. 透明度自然過渡

讓 tab 切換之間的過渡更加自然-_-易彩是不是骗局、柔和-_盈彩网apP。相比於純靜態切換隻多了一層透明度變化_qq2011版,但卻具有完全不一樣的視覺感受||古典舞基本功。

3. 位移

位移出現的圖標會產生一定的速度感-杨幂醉酒视频种子ed2k,但需要控製位移的速度|-|众博是真的还是假的,過快容易忽略中間的運動軌跡|-安心奶妈网,而影響自然過渡的效果__-人妻 中文字幕 ed2k。

4. 抖動

通過圖標的左右_|106下载苹果版本、上下快速位移或旋轉形成_-|苏州新区人才市场现场招聘,整體的動畫效果節奏較快-_至尊争霸大发快3下载,具有一定的速度感-|诺基亚asha503。情緒表達上較為俏皮-|空间克。

左右抖動

點擊後|保定热线宽带测速,圖標反饋進行上下快速位移_语智通。建議來回位移次數不宜太多|_1号彩,控製在 1-2 次左右_-_苏州园区博客门,次數太多容易顯得拖遝||黄山奇石图片天狗望月。

跳動的圖標

點擊切換後-__法兰碧,圖標從底部彈起再回到初始位置_格瑞特月神学院,整體視覺感受具有跳動的韻律感_--纳粹大战僵尸。

晃動的圖標

旋轉抖動的圖標比上下或左右會更加具有趣味感_||试剂空白。設定圖標的中心點或角點為旋轉軸-|未成年身份证号码,通過來回晃動而形成的效果|_国家副主席有几个。

5. 填充

切換時|||靖州红网,默認 tab 由線性向麵性的轉變-梅州二手房网。填充類型的動畫效果整體簡單||优衣库视频种子百度云、直接_||周星驰电影大全国语版全集,直觀地表達出圖標切換前後的對應關係-|娱乐天地平台app。關鍵點在於處理好線性與麵性圖標的細節轉換|芙蓉树下的博客。

中心填充

使用某種幾何圖形(可以是圓形或其他)通過發散放大的設計方式__|殷世航,結合一定的節奏韻律擴展至填滿整個圖標_|_亿发彩票怎么推广下级。

掃描填充

動畫效果從圖標的一側|小狼狗心水论坛,通過劃動變化至填滿-_|fj 12530。

6. 畫線-線性軌跡

以線性圖標或線麵圖標中的線運動為主-|海信电视维修价目表,在設計整套圖標時--都匀蓝宇装饰,運動軌跡需要保持統一(線的初始與結束的位置/方向等)__金黛尔。軌跡不一致--苏州消防网,容易導致圖標的一致性被破壞|_038彩票正规吗?。

局部細節畫線

選擇圖標的關鍵細節或圖標的特征進行畫線設計--|法网决赛时间,增強圖標的特征細節||_保定热线测网速,提高圖標的記憶點-_众赢彩票。

整體畫線

與局部細節畫線基本一致|_gts3370,差別的點在於表達了不同的視覺感受|-999桑拿会所。整體畫線從視覺感受上會相對更加飽滿||_甄情达。但需要根據圖標的複雜程度而定-__青岛台东八路洗头房,圖標過渡複雜||_亿彩卸载了怎么办,可能容易造成拖遝的動畫效果|-_钢构的故乡。

7. 結合容器

結合不同的幾何形作為選中圖標的當前態的背景|-爱唯侦x论坛,在背景上設計出現的動畫效果__仲博彩票苹果版客户端。既強化了選中當前態_|-160630基金,整體的 tab 切換的一致性也較高-||三毛妮。

8. 元素介質

設計上結合某種圖形元素作為當前選中態-|爵士纯烟,在切換時通過元素的位移__吸血白蝙蝠卫生巾、跳動等方式來達到 tab 切換的動畫效果|_mc擦皮鞋歌词。

Tab圖標動畫的組合形

除了以上單種類型的動畫方式外|-_铁木真炒锅,還可以嚐試多種方式結合|-|艺龙团购后台。通過不同的方式結合可以產生出更多的可能性|-365彩票有人中多少钱,讓你的設計更加具有創意和打破常規-_至尊彩app是官方的吗。

1. 填充+畫線

2. 填充+抖動

3. 彈性縮放+填充

4. 元素介質+抖動

5. 位移+透明度

更多案例(來自dribbble)

總結

tab bar 的圖標動畫最大的作用在於解決切換時的枯燥與單調|-_包塑轴承,我們在設計時除了單純追求動畫的變化及多樣性之外-_-胡梦舟,更多需要思考的是什麼樣的動畫更符合我們的設計__永盛国际被关了。

本文的主旨是分享自己日常看到的一些動畫效果|_集美大学诚毅学院体育教研室,以及對收集的內容進行的分析_诺基亚3110c游戏。實際的動畫樣式或者效果肯定遠遠不隻這些-_-注册反现金app,我們可以通過基礎的方法再結合自己的創意發揮出更多滿足自我設計的表達方式-|_苏州电话订火车票。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司--1990娱乐注册,為期望卓越的國內外企業提供卓越的UI界麵設計-_易彩易彩福地app、BS界麵設計 |||杀人游戏软件、 cs界麵設計 __-农行黄金价格、 ipad界麵設計 _|木樨园服装批发、 包裝設計 _至尊彩平台下载、 圖標定製 -||媚行深宫、 用戶體驗 |-卫生人才考试成绩查询、交互設計苏州36路公交车路线、 網站建設 --美生美时、平麵設計服務__诺亚舟np1000。

標簽: 圖標 動效 bar tab « 【Web前端筆記07】列表與超鏈接 | HTML 盒子模型div»


訂閱Rss