利用5种浮动按钮增加网站的体验设计。

在手机应用当中浮动的动作按钮(FAB)或许可以提供我们在制作移动版网站提供一些交互的灵感,浮动的动作按钮是一种漂浮在用户界面上面的图标。它的形状、位置和颜色使它在众多设计元素中脱颖而出。浮动按钮在谷歌2014年的设计标准当中发布和推广。现浮动按钮用户界面元素已被广泛应用在Web和移动设计。

虽然浮动按钮看起来非常地小,甚至看似微不足道的视觉组件,但它的作用是很重要的,总会引导用户的点击。只要对它正确使用,它的可以使用户是立即识别和访问点击。

利用5种浮动按钮增加网站的体验设计(图1)

1、代表一个当前页面最重要的动作

理想的情况是,浮动按钮应突出最相关的或经常使用的操作,它应该被使用,你的应用程序的主要特点的行动。如果你想在你的应用程序使用的晶圆厂,设计必须仔细考虑和用户的可能的行动必须归结到一个单一的突出特点。例如,一个音乐应用程序可能有Fab表示"播放/停止"。Instagram的一个类似的应用程序可能有一个浮动按钮,代表"拍照"。

利用5种浮动按钮增加网站的体验设计(图2)

一个动作按钮代表应用程序中的主要作用。暂停或恢复在这个屏幕上播放告诉用户,这是一个音乐应用程序。

根据研究史蒂夫·琼斯,Fab显示轻微的负对可用性的影响当用户第一次使用按钮。然而,一旦用户成功地完成了任务,使用FAB,他们能够比传统的操作按钮更有效地使用它。

2、最容易找到工具的办法

浮动按地是一个自然的提示告诉用户下一步要做什么。谷歌的调查显示,当面对陌生的屏幕很多用户依浮动按钮导航。因此,FAB是非常有用的一个标志,我们不需要思考就知道下一步要做什么。

利用5种浮动按钮增加网站的体验设计(图3)

一个浮动的动作按钮的使用推特鼓励你的文章内容

3、提供一组动作(多个)

在某些情况下,它是适当的按钮旋转,让其他几个选项,可以在下面看到Evernote。Fab可替换自身一系列更具体的行动,你可以设计你的用户是语境。作为一个经验法则,提供至少三个选项后,按不超过六(含原浮动作按钮的目标)。

利用5种浮动按钮增加网站的体验设计(图4)

也请记住,这些行动必须是初级行动Fab本身表达有关,且相互关联:不要把这些发现的行为作为独立的可如果位于工具栏。

利用5种浮动按钮增加网站的体验设计(图5)

别:"我的行动不创造内容的行为有关。

4、上下文感知

上下文在用户交互的重要作用。有时用户想消费的内容,有时他们要执行的操作。这一切都取决于上下文。使用一些上下文的行为可以带来最好的用户体验的任何应用程序的浮动按钮。让我们来看看谷歌为例。谷歌显示按钮,当用户与流接合,和隐藏在这种交往是相反的。这两个操作需要引导 :当用户与社会流的吸引力,一个主要的行为是滚动,因此不需要浮动按钮,当用户停止滚动,他们可能想要的东西后。

利用5种浮动按钮增加网站的体验设计(图6)

5、连接两个操作界面

浮动按钮的不仅仅是一个圆形按钮,它有一些变革性的特性,可以用来帮助缓解你的用户在屏幕。当变形的动作按钮,使这样一个逻辑的两个状态之间的转换。在下面的例子中的动画保持用户的方位感和帮助用户理解的变化,刚刚在视图的布局发生了,是什么触发了变化,和如何开始再次改变,在需要的时候。

利用5种浮动按钮增加网站的体验设计(图7)

利用5种浮动按钮增加网站的体验设计(图8)

结论

有人可能会说,浮动按钮是坏的用户体验。很想说,因为用户和设计人员不使用它。我们习惯于熟悉的工具栏和浮动按钮的概念仍然是相当新的我们。我们都知道,新的东西是很难的,但同时他们鼓励更多精心设计的用户体验。正确使用,可以是一个令人震惊的浮动按钮帮助最终用户便捷的使用网站。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/217201.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年2月14日 01:36
下一篇 2023年2月14日 01:36

相关推荐

  • 通过网站布局创造难忘的用户体验。

    网站建设的主要目标之一是设计出用户会记住的东西。尽管这个目标听起来很简单,但却很难实现。每个利基市场都有成百上千个网站,所有这些网站都在争取观众的兴趣和关注。 内容和设计是定义站点是否保留在用户内存中…

    2023年2月20日 SEO操作
    00
  • 什么是(UX)用户体验设计?来自15 位UX设计专家的看法。

    什么是用户体验设计? 重要的是首先要说没有普遍接受的 UX 设计定义。 用户体验设计是一个多维度的概念,它包含了很多不同的学科——比如交互设计、信息架构、视觉设计、可用性和人机交互。 但让我们试着更清楚地了解…

    2023年3月7日
    01
  • 2020 UI/UED用户体验设计走向何方。

    大环境下对设计的影响,我们每天使用的工具发展趋势,我们如何相互协作,我们的主动意识如何影响设计变革。2020Ui用户体验设计趋势将走向何方?为"后真相时代"设计信息时代,大量虚假信息被用来推动政治…

    2023年2月20日 SEO操作
    00
  • 用户体验设计和网页设计之间的主要区别。

    每个人都喜欢能够轻松可靠地充分有效地执行的网站。当涉及到网站设计时,良好的功能和性能常常让位于视觉吸引力。当网站无法按预期运行时,缺乏对用户体验的深思熟虑可能会让用户感到失望。 在创建有效的商业网站时…

    2023年3月7日
    01
  • 如何有效地呈现 UX 设计概念。

    所以,你已经完成了你的设计,现在你被要求将它展示给团队。您想为您在设计中投入的工作公正,但您并不完全确定如何有效地展示它。你做什么工作? 首先,试着记住这些年来您有机会观看的一些演示文稿。具体来说,试…

    2023年3月7日
    02
  • 快速提升 UI 设计效果的 6 个小技巧 (UI 设计集-4)。

    编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧,是系列文章的第四篇,原文最早发布于 marcand…

    2023年3月1日 SEO操作
    01
  • 如何让动效又快又好落地?5种动效设计格式优缺点。

    动效设计,可以提升界面的趣味性和引导性,让用户浏览过程中不会太枯燥,获得更好的体验。最近做的金山知了(后面改名为金山知识库)官网,头图元素加入了缓动效果,第一眼挺新颖的。金山协作新年许愿活动,许愿按…

    2023年3月1日 SEO操作
    08
  • 标签栏设计如何设计?5000字干货详解标签栏设计。

    标签栏是用户进入 APP 的第一触点,绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元素之一,是 UI 设计师们绕不开的课题。一个好的底部标签栏可传达出产品的核…

    2023年3月1日 SEO操作
    051

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息