恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计师如何快速利用微动效优化页面体验
0.0°
原创文章 / 经验/观点 / / 举报
1085 10 11 2

2019-06-24

设计师如何快速利用微动效优化页面体验

Image title

Image title


? ? ? ? ? ? ? ? ? ? ? ? ? ?

01? 什么是动效?

动效是用来辅助设计的一种形式;精准辅助设计在用户场景恰当使用,让这用户更容易理解产品,也让设计师更好的表达。好的动效可以弥补静态页面的表达不足,赋予产品界面生命力和活力,促进用户与产品之间的交流。



动效的类型主要有:


(一)MG动画

MG动画(Motion Graphics),简单来说就是图文动画的意思。MG动画的整体运用十分广泛,其中包括电影开头、电视开头、栏目包装、产品演示、广告节目等各个领域。

Image title


(二)表情包互动

如今的微信表情平台发展成了一个表情包行业,可以让设计师发布自己设计的表情包供微信用户使用,其中一部分表情包是带有动效的,即逐帧动画的产物,以小?gif?的格式呈现。

Image title


(三)UI交互动效

在用户体验界面设计中,因交互需求而发生的动效设计,例如:loading、转场、点击反馈等。现在越来越多专业化?UX?交互动效软件助力实现?html?在手机上的实时操作反馈,就仿佛你不用代码做了一个?app?出来。



Image title



Image title? ? ? ? ? ? ? ? ? ? ? ? ? ??

02? 为什么需要设计动效?


(一)更利于品牌建设

如优酷更新的logo,动效能更好的展示品牌logo的效果,更能吸引人注意。

Image title


(二)焦点引导

通过动效来引导用户的视觉焦点,缓解等待时间或增加用户关注度。


Image title


(三)增加使用感和趣味性

一些好的动态效果在交互上能让使用者有更好的体验,加强用户与产品的情感传递,增加用户对产品的友好度,同时增加了使用时的趣味性。

Image title




Image title

? ? ? ? ? ? ? ? ? ? ? ? ? ??

03? 什么时候需要设计动效?

在动效设计的初期阶段,我们需要对项目进行需求分析,从业务方面来讲,动效的作用是为了引导用户,展示页面的层级信息,而对用户而言是为了改善用户体验,减少页面过渡的僵硬感。


(一)告知用户目前状态

为了保证正常的运行,后台总会有许多进程在进行着,需要借助动效让用户明白用户目前系统的状态?;蛘哂没г诮辛四骋桓霾僮骱?,需要有反馈,告知用户目前的状态,帮助用户更好地感知页面布局、层级结构和重点内容,同时也能让整个流程更加丰富流畅,增添了界面的活力。

Image title

(二)减轻用户不良情绪

对于许多数字产品而言,加载、页面故障等糟糕的用户体验是不可避免的。虽然动效并不能解决相关的问题,但是它会减轻用户的不良情绪。

Image title

(三)增加页面功能趣味

在产品设计的过程中,情感化的重要性越来越凸显出来,而添加动效的方式能够添加页面功能趣味,提高用户对页面的关注。

Image title




Image title

? ? ? ? ? ? ? ? ? ? ? ? ? ??

04 动效要怎么设计?


(一)、做动效需要考虑的因素


1、这个动效是否会影响性能?

添加任何动效前都要考虑是否会影响产品的性能,如果一个很酷炫的动效会拖累性能,使体验变得卡顿不流畅,那么必须毫不犹豫的砍掉或简化。


2、这个动效是否会提高产品的可用性?

任何动效的出现都必须带有明确的目的性,能够解决用户在使用过程中的困惑,而不是炫技。单纯的炫技只会分散用户的注意力,弱化内容,变得适得其反。


3、这个动效是否会给产品带来独特的气质?

这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花,深化你的主题和功能。


(二)做动效有什么原则?


Image title


1、目的明确原则:总的来说也就是明确需求背景,动效的商业价值以及预期目标,防止增加无关动效。


2、一致性原则:动效属于整个产品组件的一部分,应该符合产品的一致性。


3、效果适宜原则:动效涉及多个元素或者界面层级时,除了有效表现元素属性变化以外,还应将这些元素之前的关系传递出来:譬如:主次、联动、并列先后、因果。


4、聚焦用户原则:应顺应用户的操作路径与真实场景。


5、情感传达原则:保持一致性与官方原则的基础上,考虑用户的心理情感,用动效创新体验。



(三)、?动效的创作思路

1、属性转换法

属性包含了位置、大小、旋转、透明度、颜色等,在这些属性上面做动效,若运用恰当,可以做出令人眼前一亮的动效。

现在绝大多数icon动效都离不开属性变化,运动恰当,这个简单而强大的方法大有可为之处。

Image title


2、路径重组法

将icon的路径(笔画)进行重组,构成一个新的icon,这期间考验着更多的东西,比如观察两个icon笔画之间的关系,这个思路最近相当流行,同时也具有挑战性。

Image title

3、分裂融合法

打个贴切的比方,就是把一把剑融成铁水之后,铸成一把新刀。

分裂融合法尤其适用于其中一个图标是一个整体,另一个图标由多个分离的部分组成的情况。由分裂融合法做出来的动效也相当有趣。

Image title


以上图片来源互联网,侵权删

Image title





设计分享经验动效

创建于:2019-06-24
收藏

10人已收藏

道乐科技设计中心

道乐科技UED

  • 12

    作品

  • 38

    粉丝

  • 3

    关注

  • 互联网基金交易的安全感设计探究
  • 基金产品推荐卡片如何设计,才能吸引用户?| 干货分享
  • 支付宝是如何做运营活动的?——支付宝理财周活动分析
  • 深度好文|一文读懂数据可视化(理论+实操)

猜你喜欢

    道乐科技设计中心

    道乐科技设计中心

    道乐科技UED

    老马识途
    • 38

      粉丝

    • 4.4

      人气

    • 580

      颜值

    作品

      最新推荐

      职业化设计师的自我修养(二)

      145 0 0

      相关佳作
      换一换

        道乐科技设计中心

        点赞:11

        收藏:10

        评论:2

        设计师如何快速利用微动效优化页面体验

        你确定要举报设计师如何快速利用微动效优化页面体验?

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2019年06月24日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录
        全网福利资源合集搜索处解压码