网站的每个方面都很重要。我们已经涵盖了一些大的冲击,从表单创建和标题设计到跟踪谁正在访问你的网站,他们停留多久,以及他们是否回来的流量指标。
同样重要?细节。颜色选择和布局。简单性和简化的设计是一个优先事项。但是,还有一个经常被忽视的组件,在做得正确时并不突出,但可以在错过标记时侧面的经验:按钮。
让用户对你的网站形成一个总体印象50毫秒他们来了之后,你不能把任何东西放得乱七八糟——包括一个丢失的按钮。
从点击按钮获取更多信息或链接到产品页面,按钮请求客户服务或快速添加商品到购物车,您的网站按钮不仅仅是橱窗装饰;它们是必要的设计元素,有助于讲述你的品牌故事,引导访客更接近你的产品或服务。
对网站按钮设计感兴趣?不确定如何(或从哪里)开始?我们帮你搞定了。
按钮的设计思想
虽然按钮设计没有黄金标准,但有一些简单的指导原则:
- 清晰的:按钮文字和颜色要清晰、锐利、容易理解。
- 简洁的。按钮上最少的文字是理想的。一个词是目标,最多两个词。再多一点就麻烦了。
- 上下文这个按钮通向哪里?它是做什么的?令人困惑的按钮不会被点击。
在你开始构建自己的按钮之前,有必要看看一些免费的模板,看看哪些适合你的风格,哪些对你的网站最有意义。
Vecteezy
Vecteezy免费按钮简单,切中要点,颜色鲜艳,让用户很容易找到他们想要的东西并点击。
设计师还添加了小图标来改善环境——例如,“播放视频”按钮有一个小的“播放”符号,搜索按钮有一个放大镜。
Freepik
这些社交按钮来自Freepik更抽象一点,但绝对吸引眼球。双色系的使用有助于吸引用户,而每个社交网站的符号-搭配其相关配色方案-使访问者很容易找到他们想要的东西。
在这里,情境是最重要的;虽然按钮上的文字并没有减少它们的影响,但文字只是每个按钮上的三种上下文提示之一。聪明。
如何设计一个按钮
如果你想自己设计按钮怎么办?虽然基本按钮可以达到目的,但你也可以选择更深入地挖掘并添加有趣的效果——从鼠标悬停时改变颜色的按钮到有阴影的按钮、禁用的按钮或按钮组。
你最好的选择是什么?按钮设计CSS(层叠样式表)。CSS是一种定义和描述元素如何在HTML中显示的工具。使用CSS编辑器,你可以自定义网页的每个方面,从页眉和页脚到侧边栏和按钮。
虽然您可以向任何网站添加CSS条件,但不同的工具需要不同级别的专业知识。如果你刚刚开始,WordPress是一个安全的bet - 该平台可以轻松访问,添加和调整CSS设置并构建新按钮。就是这样。
首先,进入你的WordPress仪表盘并点击外观>定制。
下一步,头部到左侧工具条的底部并单击额外的CSS。
这将弹出一个CSS编辑器页面,在这里您可以输入任何自定义CSS代码。
现在你已经在这里了,你应该添加什么来创建伟大的按钮呢?这取决于你想要什么。让我们来看看如何修改按钮属性。
CSS按钮设计
这段代码创建一个用户可以单击的基本绿色按钮。在本节中,我们将讨论基于您的按钮设计首选项编辑和自定义按钮的方法。
.button {
background - color: # 4 caf50;/ * * /
边界:没有;
颜色:白色;
填充:15 px 32 px;
text-align:中心;
文字修饰:没有;
显示:inline-block;
字体大小:16 px;
}
彩色的按钮
使用背景颜色属性更改按钮的背景颜色。
.button {background-color: #4CAF50;} /*绿色*/
圆角
正方形的角并不总是理想的。使用这个特性属性将按钮的边界半径更改为圆角——像素数(或百分比)越高,圆角就越圆润。
.button {border - radius: 2 px;}
颜色的边界
使用边境属性为按钮设置带有白色背景的彩色边框。
.button {
背景颜色:白色;
颜色:黑色;
边框:2px固体#4CAF50;/ * * /
}
Hoverable按钮
使用:徘徊当用户将鼠标移到按钮上时,更改按钮样式的选择器。使用transition-duration属性更改悬停效果。
.button {
transition-duration: 0.4秒;
}
.button:{徘徊
background - color: # 4 caf50;/ * * /
颜色:白色;
}
阴影按钮
使用不必属性为按钮添加阴影。
.button1 {
Box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:{徘徊
Box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
禁用按钮
在某些情况下,您可能需要禁用按钮。使用不透明度属性为按钮添加透明度,创建一个“禁用”的外观。您还可以添加光标属性,其值为“不允许”,当鼠标移到按钮上时,将显示“禁止停车标志”。
.disabled {
透明度:0.6;
光标:不允许;
}
创建一个更好的按钮
有时候,获得帮助比从头构建一个按钮更容易。考虑到你网站上按钮的数量——以及对样式和表单一致性的需求——考虑一下功能齐全的工具是值得的,这些工具可以让你简化按钮的创建,并大规模地构建你的网站。
1.Hubspot的CMS
HubSpot的CMS是你的一站式商店,你需要建立伟大的网站。设计适合你的需求和吸引访问者兴趣的网站——然后将你的HubSpot网站与流量和营销解决方案连接起来,以确保你的设计能够随着时间的推移而交付。
从一系列预建的按钮模板和样式中选择,为您的网站获得完美的外观。
2.WordPress
CSS编码在WordPress很简单,而且网站平台也提供了大量的网站模板和插件。虽然WordPress中的自定义按钮需要更多的工作,但如果你能适应基本的编码,这是值得考虑的。
3.款
款使网站设计容易与伟大的网站功能和功能。虽然使用Wix无法实现完整的按钮定制,但如果您需要清晰的、上下文相关的、开箱即用的选项,那么这是一个可靠的起点。
按键底线
第一印象很重要。当用户到达你的网站时,他们几乎马上就会对你的网站有一个大致的看法——所以确保你的网站的各个方面都能相互配合是值得的。
按钮是一个重要的背景元素;定制的、清晰的、简洁的和上下文相关的按钮设计可以帮助你的网站获得成功。
最初发布于2020年5月11日早上7:00:00,更新于2020年5月11日
主题:
网站设计别忘了分享这篇文章!
相关文章
扩大提供
注册HubSpot的CMS软件雷竞技苹果下载官方版
现在得到它