服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

让等待变得有趣 - 智行loading设计探索

日期: 来源:智行ZXD设计中心收集编辑:智行ZXD设计中心




写在前面

设计移动端应用产品时,我们绝大多数的精力和时间都会花在各个页面的设计上。但是细节化的设计不仅可以提高整体视觉,更能带来舒适的交互体验。本文将围绕智行loading改版升级,浅谈下设计过程。



为什么升级Loading?


智行着力于打造年轻化的一站式出行平台,好的的产品离不开有趣且有创意的设计。“loading”作为App中重要的元素,不仅可以有效缓解用户等待的焦虑,还可以向用户传达感情和品牌形象。

现有loading已经不满足“有趣”、“年轻” 的品牌调性,因此需要对loading进行升级设计。




怎么改?

1、优秀案例分析
改版前,我们收集市面上以及设计网站上优秀的案例,分析其共同点,取长补短。并总结出以下4条结论。


1. 大多产品使用吉祥物即IP作为载体进行设计(美团,去哪儿等)


2.采用两种形式loading动画,即:吉祥物loading图形loading(飞猪)


3. 动画巧妙结合产品业务属性进行设计,如:京东结合快递盒子;每日优鲜结合外卖配送服务。


4. 动画具有循环性和“魔性”,足够有趣,有记忆点(饿了么、知乎)



2.  明确设计方向

基于上述的分析以及结合智行业务属性,我们明确了此次优化升级的设计方向


1. 动画要符合趣味性、独特性、业务属性

2. 结合智行产品设计需求,我们决定设计两种,即:图形 loadingIP loading
在二三级页面的下拉及跳转则采用相对简洁的图形loading;在相对高频出现的一级页面下拉刷新运用IP loading。




图形Loading设计


1.  初步方案

智行作为出行服务平台,我们决定继续保留微笑元素,对线上方案进行优化。为此初步做出以下方案
初步方案:三个点跳动过程中结合歪嘴微笑,循环性和连贯性方面相对较好,但是缺少趣味性,记忆点不够;在动效上也不够灵动,缺乏弹性



2.  明确优化方向
总结初步方案的问题,明确优化方向:强化趣味性、优化动效弹性


强化趣味性
在喜剧中,演员往往通过“夸大”某个动作或者表情来达到喜剧效果,受此启发,我们将动效中歪嘴幅度变大,同时眼睛也做出呼应,使动效更加有趣。

优化动效弹性
动效制作中,通过调整运动曲线,使动效看起来更加Q弹



3.  图形Loanding最终方案展示




IP Loading设计


1.  初步方案

在IP loading 设计中我们紧扣趣味性、独特性以及业务属性进行设计。我们尝试了以下方案

方案一:在结合了旅行箱和票,以及搞怪的走路动作,虽然符合趣味性和产品业务属性,但是画面过于复杂,由于loading在页面中占比较小,会导致识别性较差,缺乏记忆点。
方案二:IP收拾旅行箱的动作,相对方案一IP和旅行箱的比例变大,识别性较好,但是画面相对简单,导致动效过于平淡。且旅行箱作为体现智行业务属性的元素不够贴切。



2.  明确优化方向

总结初步方案问题,明确优化方向为增强识别性、强化业务属性 



增强识别性

由于loading在页面中比例较小,为了强化识别性,我们提取IP头部作为动效元素,并简化其他元素。


强化产品属性

由于智行主要业务为火车票、机票、酒店、汽车票,因此我们提取「票」作为辅助元素来传达产品属性。



3.  IP  Loanding 优化方案展示
方案一:IP 左右接票,头眼晃动的同时,手也随之进行夸张的运动,像是在炫耀票,动效符合趣味性、识别性
方案二:IP 扔票接票,头、眼、手相互配合,一气呵成;通过杂耍的动作更能展现趣味性、循环性。
结论:两种方案各有优点,方案一相对方案二在趣味性上较弱,最终我们通过内部投票选择了方案二



4.  不断打磨

相关阅读

  • 学会夸人

  • 我有个口头禅,熟悉的读者应该都知道,就是「很棒」。1.以前带团队,每次交互同学给过来一个方案,我看都没看就会先说:“为什么这么棒?!”看过后如果真的好,我会接着夸:“怎么能这么优秀
  • Hybrid 远程调试的前世今生

  • 大厂技术 坚持周更 精选好文本文为来自 西瓜视频前端技术团队 的文章,已授权 ELab 发布。作者:郑家兴前言前端程序员最容易搞出 P0 事故的就是白屏,PC 上的白屏我们比较好调,
  • 闲鱼大终端UI组件库——FishUI建设之路

  • 背景随着闲鱼前端架构的不断演进,一些关键技术设施需要结合业务特征逐步自建,技术方案也要拥抱社区来提升可扩展性。一方面, 闲鱼跨端开发框架kun 让前端开发者使用JS/CSS/HTML
  • 招商固收|债市温度计

  • 01 高频指标跟踪本周(2月13日至2月19日),招商固收基本面监测体系中,共有63个高频指标更新。我们对其中50个指标计算当月同比,结果显示:总体上,“利好”与“利空”指标个数分别为27
  • 创新者的窘境

  • 最近读了一本书,《创新者的窘境》,这本书讲的是一些非常领先的公司,也没有明显的失误。但是在竞争中就落后了,而且可能就此被淘汰了。这些企业遇到的问题大致可以分成两大类。一
  • 教程|基于QGIS3.16的矢量数据属性查询和数据导出

  • 在进行GIS数据处理过程中,往往需要查询和导出数据,我们今天介绍在QGIS3.16中,如何进行矢量数据的属性查询,并把查到的数据导出。本次的数据使用沈阳市餐饮业的POI点数据,要求1:精
  • 让你们自己斗

  • 小手捞债,发发发财。之前市面上流传的时代方案,现在看是真的,雀食很差,还款周期很长,但亮点在于小额部分,做方案的人多少憋着点坏。核心区别就是小额二选一。A:机构户1%+个人户10WB
  • 遏制“炒差”“炒概念”乱象

  • 来源:界面新闻上海证券交易所副总经理刘逖今日出席可持续发展高峰论坛并发表演讲。他表示,下一步,上交所将以新一轮《推动提高沪市上市公司质量三年行动计划》为抓手,推动上市公

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 让等待变得有趣 - 智行loading设计探索

  • 写在前面设计移动端应用产品时,我们绝大多数的精力和时间都会花在各个页面的设计上。但是细节化的设计不仅可以提高整体视觉,更能带来舒适的交互体验。本文将围绕智行loading
  • 打动用户的设计细节!8个优秀案例剖析

  • #01导语体验设计的本质是服务设计,服务于用户与企业。几乎所有的产品与功能,都是通过用户场景与业务发展的结合而产生的。想要做好产品体验设计,我们绕不开「用户场景」。而用
  • 让用户一见钟情的设计!8个优秀案例剖析

  • #01导语大家好~这是我们的第二期优秀案例分析,这一期一如既往给大家带来一些优秀案例分析,场景细分、信息可视化、巧用动效等我们平时一直在思考的问题,而我们是否能做到更好的
  • 新的设计故事,从这个符号开始

  • #01项目开展近些日子,智行火车票客户端正在准备全新的视觉升级。而作为这次升级的重要分支:UI品牌符号,承载了传递品牌感知,打造产品差异化的重要作用。我们希望符号展现什么?1
  • 智行系列营销活动-设计出圈指南

  • Hi~大家好,我们来自智行设计团队,在过去的这一年里,团队致力于智行视觉设计的品牌感知打造,也在各个平台取得了一定成果,国庆系列营销活动的视觉设计表现更是出圈。现对2022年国庆