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

一个高转化率的按钮应该如何设计?

发布时间:2017:11:07 19:09:38 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1448个文字,预计阅读时间4分钟
导语
聊到按钮的设计,我们有太多的话要说。确认按钮在左边还是右边,幽灵按钮到底可靠不可靠,阴影的存在到底合理不合理,等等等等。但是今天不聊这些,我们来聊一下,如何设计一

  聊到按钮的设计,我们有太多的话要说。确认按钮在左边还是右边,幽灵按钮到底可靠不可靠,阴影的存在到底合理不合理,等等等等。但是今天不聊这些,我们来聊一下,如何设计一个高转化率的按钮:

  我们常常会揪住某个设计细节不放,深入讨论直到透彻。这样的探究并非毫无意义,因为即使是最细小的细节也可能会让近乎完美的设计毁于一旦。

  所以,今天的文章我们继续深入到设计的细节当中,探讨按钮的设计。用户每天都会接触按钮,从现实世界到虚拟的界面,从移动端要桌面端,它是如今界面设计中最小的元素之一,同时也是最关键的控件。当你在设计按钮的时候,是否想过用户会在什么情形下与之交互?按钮将会在整个交互和反馈的循环中提供信息?

  在早期的扁平化设计当中,用户常常因为按钮的感知度较差而完全处于懵逼状态,这也从侧面反映出按钮本身在UI设计中的重要作用。

  它应当看起来可点击/触摸

  

一个高转化率的按钮应该如何设计?

 

  用户看到可点击的按钮会有去点击和触摸的冲动。虽然按钮在屏幕上会以各种各样的尺寸出现,并且通常都具备良好的可点击性,但是在移动端设备上按钮本身的尺寸和按钮周围的间隙尺寸都是非常有讲究的。

  普通用户的指尖尺寸通常为8~10毫米,所以尺寸为10×10毫米的触摸交互对象是符合逻辑的,这也算是移动端上约定俗成的规则了。

  想要让一个元素看起来可点击,注意下面的技巧:

  ·微妙的阴影能够让按钮看起来“浮动”出界面,让它看起来更接近用户

  ·增加按钮内边距,让它看起来更容易点击,引导用户点击

  ·进行悬浮或者点击操作的时候通过实时色彩和效果变化,提示用户

  色彩很重要

  

一个高转化率的按钮应该如何设计?

 

  按钮的色彩需要根据整个网站的配色来单独搭配。作为用户交互的核心,按钮在页面中适合使用特定的色彩进行强调。

  按钮的色彩应该明亮而迷人,这也是为什么那么多UI设计都喜欢采用明亮的黄色、绿色和蓝色的按钮设计。想要按钮在视觉上突出,按钮的色彩最好选取背景色在色轮上相对位置的互补色。

  另外一个值得注意的是品牌用色。你需要为按钮选取一个同你的品牌配色方案相匹配的色彩,它不仅要有识别度,还要有关联性。不论你配色方案怎么调整,按钮首先要与你的主要配色保持关联和一致。

  尺寸的影响更大

  

一个高转化率的按钮应该如何设计?

 

  按钮要大!设计师常常被各种人戳屏,LOGO要大是被指责得最多的地方,,而在进行按钮设计的时候,大也同样是钢需。只有当按钮尺寸够大的时候,用户才能在一看到界面的时候就被它所吸引。虽然幽灵按钮可以占据足够大的面积,但是幽灵按钮在视觉重量上的不足,使得它并不是最好的选择。所以,我们所说的大不仅仅是尺寸上的大,在视觉重量上同样要“大”。

  当然,按钮的大小尺寸也是一个相对值。有的时候,同样的尺寸的按钮,在一种情况下是完美的大小,在另外一个界面中可能就是过大了。很大程度上,按钮的大小取决于周围元素的大小比例。如果按钮是界面中可见的唯一元素,那么谁都不会错过了。

  位置也关键

  

一个高转化率的按钮应该如何设计?

 

  按钮应该放置在哪个位置?界面中哪些地方能够为你带来更多的点击量?

  在绝大多数的情况下,按钮应当按照你的页面和APP的内容来添加:

  ·在表单的底部

  ·在行为召唤类信息附近

  ·在页面或者屏幕底部

  ·在信息的正下方

  为何要放置在这些位置?因为他们遵循用户的习惯和自然的交互路径,不论是网页还是APP。

  专注于对比

  

一个高转化率的按钮应该如何设计?

 

  几乎所有类型的设计都会对对比度有所要求,在进行按钮设计的时候,不仅要让按钮内的内容(图标、文本)能够同按钮本身构成良好的对比,而且按钮和背景以及周围的元素也要形成对比。

  那么,在你进行设计的时候,需要考虑到下面的因素:

  ·色彩

  ·字体的字重和尺寸

  ·元素的大小

  ·背景与形状

  ·阴影与渐变

  ·留白和内外间距

  使用标准的形状

  

一个高转化率的按钮应该如何设计?

 

  当你在考虑按钮的外形的时候,你只需要考虑两种情况:

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

看了这篇文章的人还看了

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

上一篇:超实用!比较重要的设计方法论大整理

下一篇:如何设计令人“上瘾”的产品?

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

      统一报价,无隐形消费

    • 金牌服务

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

    • 售后无忧

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

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

    截屏,微信识别二维码

    微信号:13825575516

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

    优化二维码打开微信