<option id="wmpe5"></option>
    <form id="wmpe5"><th id="wmpe5"><noscript id="wmpe5"></noscript></th></form>
      <wbr id="wmpe5"><legend id="wmpe5"></legend></wbr>
      1. 首页

        网站建设

        移动端开发

        设计

        案例

        营销

        新闻动态

        关于我们

        当前位置: 首页 > 新闻动态 > 网站设计 >时代创信建站大咖带您了解如何设计出色的网站动效

        时代创信建站大咖带您了解如何设计出色的网站动效

        责任编辑:网站设计 点击:2874 发表时间:2021-04-16

          如何设计出色的网站动效?最近越来越多公司开始做动效设计,也有不少团队意识到动效对产品的重要性。动效在网站设计中拥有巨大的潜力,能让网站设计更具有表现力和易用性。
          很多人说UI动效设计很复杂,参数的选取也非常模棱两可。但其实只要看完以下的内容,你会发现网站动效设计其实可以很简单。
        时代创信网站设计
          制作网站动效设计,要从哪里开始?
          要制作动效设计,我们先了解一下动效的主要作用-用于呈现网站中不同元素间的关系,帮助用户在界面间进行导航;或加持到图标、Logo、插画等元素,给UI赋予个性,加深用户对产品的印象。
          在探讨动效如何给网站设计拓展调性和个性之前,首先我们应该关注如何借助动效优化过渡,构建强大的动效基础。
          如何设计出色的动效?
          一、关于转场过渡的设计模式
          在考虑网站设计的过渡效果时,简单性和一致性都是两大关键属性。为了做好这两点,通?;岣菀韵铝街植煌榭隼瓷杓疲?/span>
          1.基于某个容器的转场动效
          在网站设计中,如果转场动效牵涉到按钮、卡片或列表等元素,通?;峄谡庑┤萜鹘猩杓?。
          大多容器空间都会有着清晰的边缘,但在动效出现之前,边缘可以是不可见的。
         ?、?UI元素在容器内缩放过程中,会基于宽度自适应调整,使元素和容器之间的相互关系更加清晰。
         ?、?动画变化前阶段,变化速度逐渐加快。当整个动效足够快时,整个过程都显得无缝而自然。
          【特点】
          这种动效设计规则非常清晰,如果将它应用到整个界面的不同控件上,能建立出一致的动效样式。加之,整体动效设计的变化都是依靠容器连结,无论是开始还是结束的过程中,界面都有着非常清晰的逻辑关系。
          2.不存在容器情况下的转场动效
          很多动效都是在没有容器的承载下构建的,比如点击APP设计中置于底部的导航按钮,将会让用户进入一个全新的界面中。
          【特点】
          如果网站设计开始和结束的过程中,都有着清晰的空间关系和逻辑顺序,那么选用这种过渡转场方式,能强化设计的一致性。
          二、关于转场过渡的设计
          1.保持简约
          鉴于动效的使用频率非常高,加上和设计的可用性有密切相关,所以导航过渡效果的功能性应更加优先,而非风格。
          通常,引人瞩目的动效并不一定需要风格化(具体视实际情况而定),反而和小图标、Logo、加载器和空状态等元素或界面搭配会更加适合,所以这类动效确保品牌整体风格一致就可以了。
          2.选择合适的时长和节奏
          进行网站设计的时候,要注意动效转场所持续的时长,这应该是考虑到它的功能性。转场速度太快会让用户感到迷惑,太慢则会让用户产生厌烦的情绪。
          这可以根据用户在界面停留的时长来估算动效的持续时长。
          按照以往导航过程中,用户在导航中所驻留的时长进行判断,300s的动效时长是个值得参考的数据。而其他更小的UI空间,动效持续时长需要缩短,通常100ms就足够了。
          * 如果以上参考数据无法套用到你的某个动效设计中,可以25ms为单位调整动效速度,直到它达到你的预期效果。
          完成基本的转场动效设计后,就可以考虑更加细化和个性化的设计和挑战。到这时简单的动效不能满足的地方,你可添加生动多变的动效,让你的网站设计更加有趣。

        案例

        售前咨询 建站在线咨询 售后咨询 QQ : 97494357 电话沟通 热线 :010-83630580 站内搜索
        嘿,我来帮您!

        免费咨询电话

        010-83630580

        mhy@www.investingnewsalerts.com

        北京丰台区汉威国际广场二区1号楼6M层

        寻求帮助

        北京时代创信科技有限公司 | 北京网站建设公司 版权所有

        Copyright2001-2019 | ? 京ICP备14021542号-1

        云南厩党水电安装有限公司 德令哈市| 盐边县| 饶阳县| 莒南县| 邹平县| http://www.topflightdevs.com http://www.thamanaphotos.com