创新性动画:界面动画的12个概念

生命在于运动,我们无法想象生活中如果没有运动会是什么样子。动画应用于我们每天使用的数码产品,动画的存在为这个数码时代增添了几分生气。关于界面动画,它存在的关键之处就是可以帮助用户更自然地感受到一个页面到另一个页面的转换以及更加直观的引导。合理的使用动画可以让界面更加清晰易用,毫无疑问,这就是用户对产品的期望。

今天的文章介绍了Tubik工作室设计人员为一些项目设计的概念性界面动画。

珠宝电商应用

这是一个珠宝电商应用。在界面动画中你可以看到用户如何从目录中选择产品,查看详细信息和评分。还可以加入购物车使用网络银行进行支付。视觉中心是这个产品的高清图像,图标使用了简约的线性风格,这样不会分散用户的注意力。整张界面使用了比较柔和的色调,在信息冗杂的界面中看起来也很舒适。

书籍交换应用

这是一个为需要交换书籍的读者而设计的社交应用。设计师选择了暗色调背景,因为这个应用中含有大量的图片,包括书籍封面和用户头像,所以暗色背景可以让这些内容看起来更高级。像“followers”和“following”是许多社交类应用的通用元素,设计师决定尝试优化这部分的空间,只留下了“ers”和“ing”

待办事项列表应用

这是为iphone设计的简单优雅的待办事项列表。该应用的基本功能是围绕用户创建待办事项和待办事项时间的任务列表去构建的。可以轻松删除或者标记为完成。此外,这款应用会分析完成进度,以保持用户的动力。简单的界面设计和经过深思熟虑的排版使内容具有高度的可读性,可以让用户在任何环境或者正在移动的过程中都可以轻松使用。

事件应用

这是一个比较简单的应用,它可以让人们看到柏林当天发生所有事件的列表。交互动画中展示了事件列表,数据会按照事件发生的时间进行排序,用户可以垂直滚动浏览。每张卡片会显示有关该事件的关键点:类型、标题、时间、事件的图像。感兴趣的用户可以点击卡片查看关于该事件的更多细节。

闹铃应用

引导页是界面的重要组成部分,可以帮助用户了解基本的交互。设计师使用三张引导页告诉用户应用的功能并创造出一个快乐的吉祥物作为整个屏幕的中心,在交互过程中共用一个元素让整个交互动画更加平滑顺畅。

闹铃类应用中的时间选择器是此类应用的核心部分,也是设计师和开发者要着重关注的部分。当用户设置时间时,屏幕上方的动画会随着时间改变。

另一个有创造性的动画是闹铃的开关,需要一个元素来表明闹铃处于激活状态。设计师的解决方案是在闹铃处于激活状态时,按钮看起来像是一个太阳。

使用动画会更加的生动和愉快,同时也增强了用户体验,使界面更具吸引力和趣味性。

该动画还显示了闹铃界面的另一个功能:当用户摇动设备时,选项卡上的标签全部随机混杂。它看起来很有趣,并且通过模仿自然的物理规律做出交互。这会让应用变得更加形象、有趣。

房地产平台的logo动画

这是一个网站的品牌标志,代表了一个多功能平台,用于不动产业务。使用了一个识别性较强的吉祥物,设计师在设计web界面中使用了动画,增强标志角色的欢快本质。

动画插画

这是为一家营销创业公司做的动画,设计任务是做一个具有创造力的弹窗。画面中的插图具有象征意义:火箭代表有效和快速的业务进展,向上的一个运动趋势则代表了业务的动态增长。

天气应用的交互动画

这个例子是一个简单但很有吸引力的天气交互动画。它提供给用户的功能之一是能够查看当天和未来几天的日落时间。设计师使用了城市的景色插图并且让他们动起来。

社交网络教程

这个例子是针对社交网络应用做的动画。目的是要通过动画对用户起到教程的作用,并且采用一种令人愉悦的方式来展现应用的主要功能。

医疗保健应用

这是一个医疗类的应用,主要目标是优化医生定期处理的大量数据。对于每一位患者的每一条信息都作出正确的判断是至关重要的,因此整个界面要规整有序,使其清晰易用。更加直观的导航使中低技术水平的人也能很好的操作。界面中添加了一些动画转换:输入数据、操作完成、接收完成。

社交应用教程

活泼的动画、明亮的色彩,不仅让用户了解应用,而且可以在打开app的第一时间就营造出了一种积极的气氛。

计算器应用

生活中不仅是严肃的工作,有时候我们希望做一件事的时候给我们带来一些趣味性。计算器是我们平时经常使用的工具,我们希望除了得出答案以外再多一些互动。例如在想要归零时晃动手机,我们认为这很酷。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,386评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 年轻时的我们, 正直,热烈,无所畏惧, 我们敢于直面火辣的太阳, 我们敢于迎面危机挑战, 刚直的我们, 在水泥钢铁...
    云水解心阅读 358评论 1 0
  • 我的名字很美 但爱我的人总是沉默 我的生命漫长 但我爱的人总是先我而去 我的过去复杂 但爱我的人仍坚如磐石 我的未...
    时光穿梭者阅读 173评论 0 2
  • 番茄工作法是目前为止,我复习的时候,用得最多的一种方法。它的操作很简单,而且它的实用程度是出乎意料的。 *首先...
    海璇阅读 679评论 7 8