欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

干货分享!悬浮按钮设计规范和经典实践

发布时间:2018:02:27 16:16:44 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1240个文字,预计阅读时间4分钟
导语
悬浮按钮设计规范和经典实践。

  悬浮按钮设计规范和经典实践。

  悬浮按钮(Floating Action Button,简称FAB)是APP应用中常见的UI元件。它轻盈、优雅、便捷又高效,是Google设计语言中一颗璀璨的明珠。悬浮按钮往往都会独立出现在界面之上,提升整体的导航,拓展页面的功能,使应用的操作更加便捷。

  

干货分享!悬浮按钮设计规范和经典实践

 

  作为Android UI交互中最关键的元素之一,悬浮按钮在用户体验中的地位十分重要。UI上,往往是最色彩大胆最直观的页面元素;在功能上,往往是代表用户在页面上最高频次的操作。悬浮按钮的使用有什么基本准则?有哪些实用用途?我们一起在这篇文章中来看一看。

  悬浮按钮的使用原则

  A、选择适当的悬浮按钮尺寸

  

干货分享!悬浮按钮设计规范和经典实践

 

  悬浮按钮主要用于促进用户行为,它们通过在UI上浮动的圆圈图标来区分,并且具有包括变形,启动和传送锚点的运动行为。一般有两种尺寸,默认版和迷你版(仅用于与其他界面元素创建视觉连续性)。

  默认的尺寸一般为56*56dp,迷你版的尺寸为40*40dp。界面宽度低于460dp时,需要从默认尺寸(56dp)调整至迷你尺寸(40dp)。

  B、悬浮按钮只承载正向操作

  

干货分享!悬浮按钮设计规范和经典实践

 

  

干货分享!悬浮按钮设计规范和经典实践

 

  由于悬浮按钮通常承载的是主要的、有代表性的操作,通常它应该是个积极正向的交互,比如创建、分享、探索等。唯一的悬浮按钮不应该执行破坏性的操作,比如删除、归档。它不应该是非特定的操作,或者是不完整的交互,比如剪切和粘贴是一组组合交互,它们应该存在于菜单栏当中,而非悬浮按钮中。

  C、大尺寸屏幕上的悬浮按钮

  

干货分享!悬浮按钮设计规范和经典实践

 

  

干货分享!悬浮按钮设计规范和经典实践

 

  悬浮按钮在大尺寸的屏幕上可以放置在扩展的APP栏、工具栏或者结构性的元素(前提不阻碍其他元素)和表单的边缘上。需要注意的是,每个页面只能出现一个悬浮按钮,也不要将悬浮按钮与一个页面上的所有元素产生关联,悬浮按钮本身显眼抓人眼球,滥用悬浮按钮会分散用户的注意力。

  悬浮按钮的用途

  触发器

  悬浮按钮可以简单地触发某个动作或在某处导航,常用于触发功能、菜单或导航。

  

干货分享!悬浮按钮设计规范和经典实践
干货分享!悬浮按钮设计规范和经典实践

 

  工具栏

  悬浮按钮可以在进行点按或滚动操作时变换成工具栏。 工具栏可以包含相关的操作,文本和搜索字段等。当用户通过滚动发出他们有兴趣继续浏览内容的信号,滚动消失的工具栏则大大地节省了屏幕空间,整体的使用体验会非常流畅。

  

干货分享!悬浮按钮设计规范和经典实践
干货分享!悬浮按钮设计规范和经典实践

 

  界面变形的枢纽

  悬浮按钮可以转换为APP结构的一部分,借助动效延伸到整个屏幕,甚至变为独立的界面,从而成为界面功能切换的动态枢纽。

  

干货分享!悬浮按钮设计规范和经典实践

 

  对于这一块的用法,谷歌Material Design设计规范要求:“变形浮动按钮时,需要以逻辑的方式在开始和结尾的位置转换,不要使用其他元素,并且变形动画应该是可逆的,新的变形页面也可以转换会悬浮按钮。”

  触发和扩展一系列操作

  除了单一的功能触发外,通过悬浮按钮更常用于触发一系列的操作,通过扩展,用一组相关、常用的悬浮按钮来替代原来的单一交互。常见的形式有拓展按钮,拓展表单等。

  

干货分享!悬浮按钮设计规范和经典实践

 

  作为一般规则,这组拓展出来的按钮不应少于3个,不能多于6个,,否则违反了作为悬浮按钮的快速、高效的原则。

  

干货分享!悬浮按钮设计规范和经典实践

 

  悬浮按钮的实践

  明确了悬浮按钮的基本设计规范和用途分类后,我们就可以尝试开始动手自己的设计实践了,下面为大家从两个方面的入门提供帮助。

  原型设计

  如果对悬浮按钮在产品上的运用有了初步的构思,可以通过原型工具Mockplus快速实现原型效果。

  

干货分享!悬浮按钮设计规范和经典实践

 

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:产品设计:怎样产出靠谱的原型?

下一篇:极简非简陋:英才APP的设计减法

  • 18893 文章总数
  • 2304710访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信