动作
按钮 我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮 *** 作不取决于它们的外观，而是取决于用户的行为。 1_1.行为召唤（CTA / C2A）在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。 行为召唤按钮对于CTA按钮，我喜欢使用圆形按钮，这样会更引人注目。 1_2.主要 *** 作按钮虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器，可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。主要 *** 作按钮对于主要 *** 作，我喜欢使用实心按钮。 1_3.次要 *** 作按钮从“返回”的辅助按钮到“下一步”的主按钮，或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要 *** 作的备选方案。 主按钮旁边的辅助按钮的两种设计我更倾向于使用线性按钮或文本链接作为辅助按钮。 1_4.三级按钮三级按钮通常用于其他 *** 作，可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容，前提是它们不是主要 *** 作。不同形式的三级按钮一般来说，人们会使用较小或较不突出的按钮样式。 常用按钮样式 下面我们将介绍常见的按钮样式，不同风格的按钮样式和他们的使用技巧。 2_1.实心按钮实心按钮是带有实心填充的按钮。 一个实心按钮 2_2.线性和幽灵按钮线性按钮和实心按钮正好相反，一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色（在白底下按钮的轮廓和文本
颜色深一点更明显），将幽灵按钮视为深色（在黑底下按钮的轮廓和文本颜色浅一点更明显）。 线性按钮（左）和幽灵按钮（右） 2_3.圆形按钮圆形按钮其边缘设置为最大圆角半径。 圆形按钮 2_4.FAB（悬浮按钮）悬浮按钮是一种巧妙的设计模式，Google Material Design中更加受欢迎。虽然它们可能看起来像一个
图标按钮，但实际上它们用在屏幕上的主要 *** 作按钮。 一个悬浮按钮如果您想了解有关FAB的更多信息，我建议您在Material Design的网站上查看( https://material.io/design/components/buttons-floating-action-button.html ) 2_5.文字链接文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本，甚至就是文本本身（例如“阅读更多”）。 文本链接的不同样式在颜色方面，大多数网站使用蓝色，因为它是最容易识别的。为什么文本链接的颜色会使用蓝色？它一直追溯到是万维网的发明者，在他选择颜色时发现蓝色很酷的一种颜色，即使是色盲的人通常也能看到它。 2_6.带图标的标签按钮图标按钮越来越受欢迎，一些按钮仍然需要一个标签来确保按钮的语意明了。 带图标的标签按钮处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。方法1：让图标的大小对齐字体的顶线。方法2：让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。 2_7.图标按钮图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。图标按钮具有不同的风格如果你在为计算机认知度较低的人群设计产品时，我建议使用带标签的按钮 – 尤其是那些很抽象的语意。 2_8.带图标的文本链接某些文本链接可能带有图标。这些通常不会在正文中使用。各种带图标的文本链接 按钮的颜色和形状 在设计按钮时，需要考虑以下几个不同的元素。 3_1.颜色在设计产品时，你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色，你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )不同颜色的按钮 另外，在选择颜色时应该考虑色彩心理学。红色按钮多用于删除，黄色按钮多用于警示等。“删除”、“警告”、“保存”和“更多”按钮 3_2.边界半径边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。 不同边界半径设置的按钮 3_3.投影按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状
悬浮按钮只需要设置按钮positi的属性为fixed即可。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动按钮</title>
<style>
*
{
margin: 0px
padding: 0px
}
#container
{
width: 1000px
height: 3000px
background-color: #1b6d85
margin: auto
}
#div1
{
height: 600px
background-color: #255625
}
#div2
{
height: 600px
background-color: #c0a16b
}
#div3
{
height: 600px
background-color: #b92c28
}
#div4
{
height: 600px
background-color: #449d44
}
#div5
{
height: 600px
background-color: #999999
}
.btn-style
{
width: 30px
height: 120px
position: fixed/*此处即是固定按钮位置的属性。*/
left: 1500px
top: 400px
}
</style>
</head>
<body>
<button class="btn-style">这是一个浮动按钮</button>
<div id="container">
<div id="div1">第一节</div>
<div id="div2">第二节</div>
<div id="div3">第三节</div>
<div id="div4">第四节</div>
<div id="div5">第五节</div>
</div>
</body>
</html>
效果图：
1、首先创建一个新的html文件，如图所示。
2、在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg ，如图所示。
3、接着在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。
4、然后设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。
5、最后实用浏览器打开，保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。
微信扫一扫
支付宝扫一扫
评论列表（0条）