• 【理上网来·辉煌十九大】澳大利亚专家:一个强大自信的中国会给世界带来更多机遇 2019-09-03
  • 流行风向标 助你石博会上淘宝 春城壹网 七彩云南 一网天下 2019-09-03
  • 你千万别欺骗,你能欺骗的,都是相信你的人。 2019-08-23
  • 2018中国(哈尔滨)跨境电商合作会议召开 2019-08-02
  • “安全”这张牌在新一轮网约车大战中必不可少 2019-07-03
  • 不同颜色的鼻涕代表什么? 2019-07-03
  • 夺冠热门频“降温”球迷经历“最冷一夜” 2019-06-30
  • 社会主义是一个真正的民主国家,这里的人民当家做主, 2019-06-27
  • 中国人民解放军进驻香港20周年 2019-06-26
  • 中考期间广州部分公交线路有调整 2019-06-26
  • 全民健康体检:精准对接群众期盼 2019-06-23
  • 2012第七届中国常州先进制造技术成果展示洽谈会 2019-06-12
  • 习近平:坚决打好污染防治攻坚战 推动生态文明建设迈上新台阶 2019-06-09
  • 大鱼漫画:看着《创造101》迎世界杯!你要pick谁? 2019-06-06
  • 没考上?没关系。其它学校也能培养建设国家的人才,清华只是名气大点。 2019-06-06
  • 小纽扣

    重庆福彩欢乐生肖开奖:加载动效项目全解析

    小纽扣 动效设计 2297浏览

    欢乐生肖彩票走势图 www.fmv2.com.cn 成长期产品如何用最小成本做加载动效统一?4步教你用最小成本达到目标,分别是了解加载动效的价值、成长期产品的加载开展、确定场景及类型、进行竟品分析总结

     

    加载动效的价值

    著名的Seo公司Kissmetrics,得出一个报表结论:网页反应延迟一秒钟会导致访问量下降7%,这也就意味着一家每天可赚10万的电子商务网站,每延迟一秒,一年将会损失255万!要知道,阿里巴巴每天收入就达到了6亿多!

    在web时代,用户能够忍受加载的最长时间是:8秒。8秒是一个临界值,如果加载时间超过8秒,大部分访问者最终会选择放弃。到了移动端这个体验至上的时代,用户就变得更加“不耐烦”了。这时候,一个能安抚用户情绪的加载动效,意义不言而喻。

     

    成长期产品的加载开展

    如果探索期产品,有经验的设计师可以对加载内容进行清晰定义,但对于成长期的产品,经验不足的设计师对加载场景大部分都是没有定义清楚的。这时单凭“不好看”、“想要统一样式”这样武断的想法太过浅层,难以在团队内进行推动。

    面对这样的境况,设计师需要明确在适合的时机、具备明确的价值与完整的方案,才可以推动团队执行。这里着重说下,我在公司进行推动的方案及遇到的一些问题。

    总体分为4个步骤:先定出大方向,再倒推去拆解大方向,定出小目标和时间节点,流程如下:

     

    确定场景及类型

    产品在成长期中,是已经存在各种不同的用户场景了,不同的用户场景下使用的加载动效可能会不同。这好比猫眼使用的智能卡片,当距离电影开始前15分钟会推送提醒卡片,当定位到用户到达电影院时,会推送取票的卡片。

    因此,在这个阶段,率先要确认的就是存在当前产品下各个使用场景,做好收集统计,再考虑对应场景下适合使用什么加载样式。而确定场景及类型的方法,可以按以下3个步骤进行(不同平台要分开收集,再考虑是否可以用统一样式):

    • 1. 把所有出现了加载的页面进行了收集统计;
    • 2. 梳理和归纳所有加载场景,分析场景,总结出总共需要多少个类型的加载状态(这里的关键思维:加载样式是否合适当前的场景?同一场景下的多个样式是否能合并?为什么能合并?为什么不能合并?等);
    • 3. 将梳理出的场景和类型与产品等其他同事讨论确认,是否有错漏。

     

    进行竟品分析总结

    此处的竟品调研并非为了找视觉上的参考,而是旨在通过多个竟品和类竟品的调研,来确定当前市场上各类应用在使用加载动效的场景和加载方式的。这个加载场景和方法的归纳为后续自身做加载方案给出了明确的方向。

     

    1. 梳理场景,选对方法

    要做调研,率先的就要选取一定数量的调研对象,调研对象越多得出的结果越趋向真实,这跟问卷调查是一个道理。这时你也许会疑问,这么多竟品要如何做收集分析呢?

    调研的竟品,要分竟品和类竟品两类。竟品当然是跟自己产品类型相近的App,而类竟品是市面上做得出彩的app,分别对他们的加载样式做各种录屏和截图。比如,这次调研中,总共调研了126个竟品和类竟品,保存了136个录屏和130个关键截图。

    这时,我们不难发现加载动效的2个重点是:

    • a. 加载场景;
    • b. 加载方法。

     

    a. 加载场景

    经过多个调研对象的总结,常见的加载场景一般分为以下6种:下拉刷新、上拉刷新、切换新页面的数据加载、页面局部??榈募釉?、启动页加载、按钮加载。因业务不同,不排除有产品有特殊场景。所以总结出较通用的场景即可,便于多项目并行复用。

    这里使用我工作中使用的案例说明,作为思路开拓,大家可以举一反三。

     

    b. 加载方法

    当梳理完后,接下来我们针对不同的加载场景采取对应的解决方法(即加载方法)即可。加载方法的选取要根据通过不同的场景搭配不同的加载样式,才能更好的做到缓解用户的等待焦虑。

    比如:华尔街日报的分步加载。在切换页面时,由于页面内容多,为了减少用户等待时间,优先加载占网络资源较小的元素。如先文字和默认图标后图片,或是选择优先加载文字,图片加载完成前使用占位符显示,后加载图片和视屏,最终等待图片加载完成。

     

    再比如:大众点评的tab采用的同级加载。在同一页面内加载完所有tab的内容,当同级页面间切换时就会非常的流畅。

    可以看出,根据不同的场景选择合适的加载方法,不仅能最大限度的降低焦虑,也能让用户有个更好的使用体验,降低了用户的页面跳出率。这在后续的工作中用户跳出率数据反馈上从8%降低到3%,很好的证实统一加载的设计价值。

    其余详细的加载场景和加载方法线上也有不少资料,这里就不做详细的罗列了,有兴趣的请阅读:

    https://www.uisdc.com/5000-word-app-loading-design-summary

     

    2. 分析加载样式

    我们可以通过3个纬度去分析竟品中加载样式:a.动效形态;b. 动效动态;c. 风格颜色。它可做设计参考,但更多还是需要创新的。

     

    a.动效形态

    加载动效的形态主要分为:形象物、logo、slogan、转圈等非品牌样式。

     

    b.加载动态

    加载效果以这5种为主:形象物出现、形象物动态、转圈、logo出现、logo动态。

     

    c.风格颜色

    最后,就是加载的风格分扁平和立体,颜色分主题色和非主题色。

     

    单场景设计-多场景验证

    在有限的资源配置下,设计师需要把精力放在量入为出的价值输出上。方案实施前,先用较小成本在小渠道做AB测试验证。保证在其他变量不变,只改变设计变量的情况下,证明设计的价值。经过多次调整后,再复用到多场景、多业务中。

    如何做到提升效率而降低成本?可以采用辐射思维的方法,即挑选单一场景下进行样式设计,方案得到部门同事支持后,可复用到多个不同场景下,检验它是否适用于对应下的每一个场景。

     

    1. 单场景设计

    挑选不同场景下不同样式以单场景的形式分别设计。挑选单场景的前提是,必须已经做好前文提及到的两大步骤,自身项目的加载场景已经按不同的样式分类好,在同样样式下分别挑出对应的一个场景,作为一种样式的单场景进行设计。

    比如:在列表用户需要下拉更新数据的场景、用户在进入详情页的场景。这两个场景可以提取为下拉加载一个样式,详情页内子??榈募釉匾桓鲅?,分别输出设计后,去跟产品确认样式是否合理。

    undefined

    undefined

     

    2. 多场景复用

    单场景的加载样式得到确立后,把样式的手法进行复用,代入到各个场景中去验证。

    可以通过自问自答的方式进行自我走查,确保每一个场景对应的每一个样式都是合理的。比如,在tab页切换时下拉的样式是否合适?假如用了形象物做加载,他的动态在场景中是否合适?在账单数据的子??橛猛哪?榧釉匮绞欠窈鲜??场景A和场景B为什么要用不同的样式?等等。

    undefined

     

    3. A/B测试

    最后,便是进行用户场景测试了。提供最优的方案A和方案B分别对用户进行测试,收集他们对加载效果的反馈,根据反馈做最后细节的调整,最终敲下设计稿。

    undefined

    △ 图片来自网络

    以上可以看出,用辐射思维的方式,把单一场景复用到多场景验证,是用最小成本的控制资源??焖傺橹こ鼍哂屑壑档募釉胤桨?,既能提升设计的效能,也能节省产品资源。

     

    制作组件并总结

    当验证了所有场景的样式都适用后,敲定了设计方案,最后一步就是把整套规范完整的输出,制作好组件和说明文档,交付好给开发小哥哥。建议使用sketch做成symbol,标明使用场景和类型,方便日后在多产品线并行的情况下,能直接复用组件,包括代码或样式,会大大提升设计和开发的效率。

    总的来说,“规范化”意味着对团队合作的统一指标,对细节的细致追求。我们可以不被规范所约束,可以去创造新的东西,但却不能完全脱离规范思维。在创新的前提下,团队的合作需要规范的确立,才能在多人协作的项目里,防止产品设计走样。就像造房子一样,得有地基,才能在上面搭建房子。

    希望这篇文章对你有所启发。

     

    原文地址:站酷

    作者:高点点_ko

     

    转载请注明:欢乐生肖彩票走势图 » 加载动效项目全解析

    登录收藏
     
    你可能喜欢的:
    教你用 Principle 做卡片翻转动效教你用 Principle 做卡片翻转动效
    Element 动画宣传片制作全过程Element 动画宣传片制作全过程
    设计师都应该了解的加载动画知识设计师都应该了解的加载动画知识
    如何为产品快速构建合理的UI动效如何为产品快速构建合理的UI动效
    灵感专题 — 2019年优秀UI动画设计作品欣赏#5月灵感专题 — 2019年优秀UI动画设计作品欣赏#5月
    追波交互动效及界面合集(三)追波交互动效及界面合集(三)
    追波交互动效合集(二)追波交互动效合集(二)
    追波交互动效合集(一)追波交互动效合集(一)
    GIF动效合集【1.0】GIF动效合集【1.0】
    PUPU奇幻之旅 - 品牌视频设定PUPU奇幻之旅 – 品牌视频设定
    ?
  • 【理上网来·辉煌十九大】澳大利亚专家:一个强大自信的中国会给世界带来更多机遇 2019-09-03
  • 流行风向标 助你石博会上淘宝 春城壹网 七彩云南 一网天下 2019-09-03
  • 你千万别欺骗,你能欺骗的,都是相信你的人。 2019-08-23
  • 2018中国(哈尔滨)跨境电商合作会议召开 2019-08-02
  • “安全”这张牌在新一轮网约车大战中必不可少 2019-07-03
  • 不同颜色的鼻涕代表什么? 2019-07-03
  • 夺冠热门频“降温”球迷经历“最冷一夜” 2019-06-30
  • 社会主义是一个真正的民主国家,这里的人民当家做主, 2019-06-27
  • 中国人民解放军进驻香港20周年 2019-06-26
  • 中考期间广州部分公交线路有调整 2019-06-26
  • 全民健康体检:精准对接群众期盼 2019-06-23
  • 2012第七届中国常州先进制造技术成果展示洽谈会 2019-06-12
  • 习近平:坚决打好污染防治攻坚战 推动生态文明建设迈上新台阶 2019-06-09
  • 大鱼漫画:看着《创造101》迎世界杯!你要pick谁? 2019-06-06
  • 没考上?没关系。其它学校也能培养建设国家的人才,清华只是名气大点。 2019-06-06