IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

悬浮动效常见的几种玩法

Catherine • 2017-05-05 16:10 • 交互设计

动效是如今UI设计中的重要组成部分,也是目前最热门的设计趋势之一。在之前的《在现代网页设计中,动效常见的几种用法》这篇文章中,我们探讨了动效对于交互和用户的重要意义,动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效,这也是近年动效设计的热点之一。

文章目录[隐藏]

  • 首页动效
  • 按钮特效
  • 图库和轮播图
  • 导航和菜单
  • 表单和字段
  • 相关资源
  • 结语

动效是如今UI设计中的重要组成部分,也是目前最热门的设计趋势之一。在之前的《在现代网页设计中,动效常见的几种用法》这篇文章中,我们探讨了动效对于交互和用户的重要意义,动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效,这也是近年动效设计的热点之一。

悬浮动效常见的几种玩法

正是由于Material Design 和苹果所引领的动效设计风潮,许多曾经有过的设计技巧和元素正在逐步回归,而悬停特效就是其中之一。但是相比于曾经那些闪烁弹跳的特效,现如今的光标悬停特效来的更加微妙,更加强调功能性和体验。

和其他动效相似,光标悬停特效让交互的引导性更强,有的还带有预览的作用,它的使用范围非常广,大到全屏,小到提示和导航元素,不一而足。

接下来,我们通过实战案例看看,光标悬停特效目前有哪些创新的玩法。

首页动效

悬浮动效常见的几种玩法

光标悬停特效用的好,能成为你的网页整体设计中的大杀器。当你光标悬停在特定的位置的时候,整页的动效随之触发,视觉上是相当惊艳的。

比如Haus 这个页面,触发动效之后,整页的卡通角色在屏幕上走来走去,这个工作量和效果都是相当惊人的。触发动效前,只有标题文字会在屏幕上舞动。

触发全屏幕动画之后,让用户觉得愉悦而不是给用户带来压力。这中间的平衡很难把握。在这个案例中,设计师让黑色的背景和白色的非衬线体来构成对比,而中间留出空间给动效。这种设计手法是为了鼓励用户在向下滚动前,尽量多和屏幕上的内容进行互动。

按钮特效

悬浮动效常见的几种玩法

一个简单的动效实际上能够让用户的点击欲望提升一大截。看起来,为按钮做特效是一件很简单的事情,是吧?正是因此,按钮的悬停动效一直都很火,也是设计师们最快能想到的。

一个设计良好的按钮悬停动效,能让用户更好的理解按钮的功能,并吸引用户触发它。上面的案例来自 Luke Etheridge,当光标悬停到按钮上的时候,色彩改变,通过变化告知用户,这个按钮可以点击。

图库和轮播图

悬浮动效常见的几种玩法

网页中的图库和轮播图也是相当常见的控件。几乎所有的图库和轮播图都带有动效,从图片切换的动效到光标悬浮显现的箭头,图库和轮播图和按钮的悬浮动效一样,堪称这类动效的典范。

不过,动效要设计合格也是非常讲究的,Material Design 对于动效的要求非常值得参考学习:

  • 动效要快速
  • 动效要清晰
  • 动效要有凝聚力

上方的这个动效案例源自于设计师Baptiste Dumas之手,所有的这些动效都非常的迅速,绝不拖泥带水,所有的内容之间都有着明显的界限,而内容和内容之间又通过动效相互串在了一起,如同行云流水一般顺畅。

导航和菜单

悬浮动效常见的几种玩法

不管你喜欢不喜欢,隐藏式导航是目前最流行的设计趋势之一。大量的悬停动效的加入,让用户可以在拥有干净清爽的界面的同时,顺畅自然的随着导航浏览不同的内容。

悬停动效的加入,让代表菜单的汉堡图标可以随着光标移动而出现或者消失,用户可以在菜单或者导航出现的时候点击内容,而无需查看的时候移开光标,就能拥有一个开阔的视野。

上面名为Oxen Made 的网站首页就有两个地方采用了悬停动效,引导用户点击,右上角的Menu 菜单按钮在鼠标悬停上去的时候会改变颜色,点击呼出菜单;右下方的三角形按钮采用了同样的动效,引导用户向下翻页,查看更多的内容。

这些微妙的动效和背景下快速切换的视频内容构成了鲜明的对比,用户会很容易发现它们的存在,被吸引注意力,并且被引导着去交互。

表单和字段

悬浮动效常见的几种玩法

表单和其中的字段内容是使用鼠标悬停特效的大户。几乎你所访问的每一个网站都或多或少需要你填写表单,提交信息。如果表单越容易填写,获取用户信息的成功率就越高。

并不是说表单本身一定要非常简单,或者非常有趣,而是你需要让用户清楚如何填写表单,格式是怎样的,以及是否填写正确。这个时候,光标悬停的特效就显得非常重要了。

正如同上面所展示出的这个案例。通过动效和图标等信息,用户被告知了哪些信息是需要被输入的,当他们输入完成后,点击登录,确认的动画立刻就出现了。这个案例是APP的。在桌面端上,你可以让说明在光标悬浮在特定字段上的时候借助动效呈现说明,将说明信息推送到用户眼前。

如果你不知道从哪里开始下手设计悬浮动效的话,表单是你的首要选择。至少在这个环节,用户是有预期的,而他们的需求也不复杂:使用简单的动效给予用户清晰的说明,和正确的反馈。

相关资源

如果你想立刻马上动手试一试悬浮动效的话,下面的资源可以实现你的愿望:

(1)Hover.css:这是一组使用CSS3实现的悬浮特效,它可以应用到按钮、链接、LOGO、SVG、图片等元素上。它还提供了CSS、Sass和Less的版本。

(2)Image hover effects:这是一组帮你实现图片悬浮特效的代码。

(3)Icon hover effects:这是一组简单的悬浮特效,它会让圆形的图标看起来更加显眼。

(4)Amazing WordPress hover effects:这是为WordPress 用户所准备的光标悬浮特效,纯CSS3,不依赖其他组件。这个合集包含了几十个备选样式。

(5)W3Schools – CSS3 Transitions:从0开始学习CSS3过渡特效。

结语

悬停动效看起来很麻烦很棘手,但是实际上很简单,使用CSS动效,几乎任何人都可以轻松的在网页中实现这个功能。它是轻量级的,并且有大量的现成的代码供你使用。

不过,重点在于你需要把握悬停动效的核心规则:它是要有用的,而不仅仅是炫酷的效果。

 

原文作者:CARRIE COUSINS

原文地址:designshack

译者:@陈子木

译文地址:http://www.uisdc.com/design-trend-innovative-hover-effects

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23472/

logoMaterial designPSUIUI设计交互产品经理动效动效设计动画图标悬浮动效案例分析用户网页设计视觉设计设计师设计技巧译文
赞 (0)
CatherineCatherine
0
生成海报
做设计,为什么总是心里没底?
上一篇 2017-05-05 15:03
一名交互设计师的日常思考方式
下一篇 2017-05-05 17:09

相关推荐

  • 从交互层面探讨:不一样的 App 该如何设计? 交互设计

    从交互层面探讨:不一样的 App 该如何设计?

    针对APP同质化现象,本文作者从从交互层面探索了不一样的 App 该如何设计,且谈及自己的解决方案。值得一读。     “首先占据人们大多数时间的同类型APP内容高度同质化,而风格取决于内容,在平庸的内容下只能诞生风格平庸的APP设计。其次,对于以商业目标为根本的APP应用设计开发,设计风格的投入产出比并不高(游戏依然除外),设计模式的流行以及交互方式的单一使得保守的设计投入产出更高。最后在现今的消费领域,功能主义盛行,界面设计中理性居于主导地位,设计风格显示不是理性思考的首要考量目标。”

    2017-05-04
  • 微信热点

    ​50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载

    50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载素材下载方法:长按识别二维码,用微信扫描或者长按识别二维码即可加入。并不是只是下载这个素材。超过200G精品素材全部任意下。素材不断更新,添加。。。有任何问题,请联系微信uisheji----------------------------------------欢迎订阅,查看更多精品UI设计素材下载,请关注公众号mobileui

    2018-04-08
  • 关于微信聊天与朋友圈如何快速切换的小讨论 交互设计

    关于微信聊天与朋友圈如何快速切换的小讨论

    用微信时,你是否遇到这样的情况。你正刷着朋友圈,享受着各种鸡汤,这时候,你收到一条微信,一看是女王大人,不得不回。你诚恳的回了一条,等了二十秒不见有什么回应,于是就退了出来,进入朋友圈找到那篇没看完的文章,没看两行字,那边就回复你了,于是你又乖乖地回过去,来来回回,很麻烦!那,为什么聊天和朋友圈间不能有一种更快捷的切换方式呢?其中A代表微信聊天页,B代表微信其它功能页,X代表实现A和B快速、便捷切换的操作或交互方式。我们不妨先来分析一下聊天页面的功能分布和操作特点。以安卓的微信群聊为例(不要为为什么),其它类似,一共可以分为三类,共14种操作,与手指间的交互动作共有5种。定义好问题、了解好现状后,我做了改善的尝试,下面将有可行度的一些方案与大家交流一下。

    2017-06-03
  • 微信热点

    重版权轻用户体验 盲目IPO的腾讯音乐或成下一个多米

    最近,音乐版权又起风云,各大新闻版面被网易云音乐因版权续约未果,下架周杰伦作品的信息霸占,这场由杰威尔音乐独家版权方腾讯音乐主导的“版权狙击战”再次成为行业焦点。众所周知,自在线音乐兴起至今,腾讯与网易云音乐、虾米音乐等音乐平台之间在版权上的纷争已经历了多个回合。但是,距离国家版权局宣布推动腾讯音乐和网易云音乐达成版权合作还不到两个月,在线音乐市场版权之争就因腾讯再起硝烟,令人诧异之余不免有些心寒。所以,腾讯音乐“阳奉阴违”背后,到底有...

    2018-04-08
  • 如何设计完美的移动端表单【UXRen译#169】

    作者:Levi Kovacs   |  翻译:楠木,校审:小蟹   不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何…

    交互专题 2017-08-07
  • 众多新闻客户端,评论交互哪家强? 交互设计

    众多新闻客户端,评论交互哪家强?

    上一篇文章《众多新闻客户端,评论功能哪家强?》中,我通过抽样的方法对网易新闻、腾讯新闻、今日头条评论功能的数量和质量进行了对比分析。本文将继续对这三款产品评论功能的交互设计进行对比分析。我的结论是并非某款产品明显优于其他,而是各自都有特色和优点,值得对手借鉴。

    2017-04-29
  • 微信热点

    异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08
  • 你离用户的距离,只差一个好的体验 交互设计

    你离用户的距离,只差一个好的体验

    研究表明,90%的用户下载的App只使用一次,然后就会删除。

    2017-05-18
  • 带给你视觉 2015 Web 设计色彩流行趋势 交互设计

    带给你视觉 2015 Web 设计色彩流行趋势

    前几天分享的2015年春夏流行色人气很高,今天直接放干货,@AnyForWeb_UDC 的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色 预测分析,来看看有哪些亮点吧。

    2014-12-28
  • 五大新玩法和新设计方向,教你设计出不一样的年货节页面 交互设计

    五大新玩法和新设计方向,教你设计出不一样的年货节页面

    年关将近,今天就主要分享一下我对这些年的年货节页面看到的一些现象,发表一些自己的看法和思考。“天哪,怎么几乎所有的年货节页面都是红红火火毛笔字,高高兴兴过大年的手绘风格啊?这让我们这些不会写毛笔字也不会手绘的人怎么活?”“抢年货”
    “钜惠来袭”
    “有礼贺新年“
    “贺岁狂欢“
    “年货盛典”
    “年味中国”
    “春节不打烊”
    ………………..

    2017-05-10
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress