网站首页
手机版

按钮图标设计的注意事项有哪些?

更新时间:2022-03-22 16:58:46作者:未知

按钮图标设计的注意事项有哪些?

  要想创建一个流畅的交互体验,按钮设计是一个至关重要的元素,因此,投入一定精力到该元素的设计上是非常有意义的。那么图标按钮要怎么设计,按钮图标设计有哪些需要注意的事项,下面小编为您解答。

  

  一、按钮图标设计需要注意的事项有哪些?

  

  按钮图标设计注意事项1:使按钮看起来确实像按钮

  

  仔细想想一个按钮究竟是如何通过良好的设计向用户传达其功能可见性的。用户又是怎样将一个元素理解成按钮的?最简单的办法就是使用形状和颜色让元素看起来像一个按钮。

  

  另外,你需要认真考虑下设计中涉及到的元素的可触摸尺寸。就帮助用户从一堆元素中识别出按钮一事,按钮本身的尺寸大小也发挥着重要的作用。其实各种平台中的设计指南中也都指出了其要求的最小设计尺寸。而来自 MIT Touch Lab 的一项研究表明,手指的平均触摸大小在10-14mm之间,指尖的范围则在8-10mm,这就使得最合适的尺寸下限应该在10mm x 10mm左右。

  

  按钮图标设计注意事:2:注意按钮的位置和顺序

  

  应该把按钮放在用户容易发现或预期看到的位置。例如,iOS UI guidelines 中的实例:

  

  按钮的摆放顺序也非常重要,尤其对一双成对的(比如“前一个”和“下一个”)选项按钮。一定要确保最重要的按钮在视觉设计上更为突出。   在下面的示例中,我们使用红色标示出可能代表毁灭性操作的按钮。请注意重要按钮不光在颜色和对比度上更加突出,其位置也放在了对话框的右侧。

  

  按钮图标设计注意事项3:要不要使用标签

  

  标签用来告诉用户操作按钮后会发生什么。

  

  同样是上面的示例,如果没有使用合适的文本标签,情况如下,瞧瞧,你感觉到这其中的不同了吗?

  

  按钮图标设计注意事项4:行为召唤按钮(CTA)

  

  应该使最重要的按钮(尤其是行为召唤类按钮)看起来确实是最重要的。

  

  二、按钮图标的形状要如何设计?

  

  通常情况下,你会根据网站/应用程序的类型将按钮设计成直角或圆角型。一些研究指出,圆角按钮能够提升信息的表现力并吸引用户的注意力到元素的中心处(文本部分)。

  

  你当然也可以更具创新,使用其他诸如圆形、三角形或者自定义形状的按钮,但是请牢记选择后者可能会更有风险。

  

  请确保贯穿整个应用程序的控件保持良好的一致性,好让用户能够轻易的识别出你的界面元素并能够分辨出究竟哪些是按钮。

  

  按钮是用户使用你的网站/程序的介质之一,用户通过点击相应的按钮从而能够顺着你的想法继续向下走。如果你使用合理的按钮类型、摆放位置并精心设计按钮的状态变化,这自然而然能够创造一个流畅的体验过程。而如果你的设计糟糕,导致用户甚至不能找到正确的按钮,那最好的结果可能就是用户被打断而已(需要花时间整明白),最坏的则可能是的用户产生误操作、满心抱怨甚至是放弃你的网站/程序。

  

  按钮的用户体验设计通常关注于识别性和清晰度。若将你的网站/应用程序视作是跟一个忙碌的用户进行人机对话的渠道,你应该意识到按钮在这个过程中发挥着至关重要的作用了吧。

  

  以上就是关于按钮图标设计注意事项的介绍,如果您对按钮图标设计还有其他的疑问或者需求,欢迎前往,汇聚按钮图标设计人才,拥有丰富的按钮图标设计经验,为您服务。


本文标签: 图标  按钮  标签  简介  

为您推荐

WPS2016文档怎么快速转换成PDF(wps office文档转换)

WPS2016文档怎么快速转换成PDF 1.打开需要转成的WPS文档,然后点击工具栏的"输出为PDF" 2.接着我们就可以选择转换的页面以及勾选相关的选项. 3

2023-09-28 00:08

手机WPS 手机wps表格怎么制作表格

手机WPS Office怎么填充表格? 手机WPS Office怎么填充表格? 1.首先打开手机WPS Office 2.打开或新建表格 3.点击"工具" 4.

2023-09-27 00:11

WPS2016打印如何节省纸张(wpsoffice怎么打印一张纸)

WPS2016打印如何节省纸张 首先我们在制作文档的时候为了区分段落经常会给段落加上空格进行区分,其实我们可以删除这个段落,这样对于长篇的文档来说可以节省很多空

2023-09-27 00:11

WPS2016如何限制文档编辑 wps文档怎么限制编辑

WPS2016如何限制文档编辑 1.打开需要限制编辑的文档,然后点击左上角的"WPS文字"然后点击"工具"→"限制编辑" 2.在限制编辑列表里点击"限制"选项,

2023-09-27 00:11

WPS2016个性页眉如何制作(wps做页眉)

WPS2016个性页眉如何制作 1.打开需要插入个性页眉的WPS文档 2.点击工具栏的"插入",点击"页眉和页脚" 3.接着点击"插入"→"形状",我们就可以在

2023-09-27 00:10

WPS2016如何修改纸张大小(wps怎样更改纸张大小)

WPS2016如何修改纸张大小 1.打开WPS文档,然后点击工具栏的"页面布局",接着选择"纸张大小" 2.进入页面设置选项后我们就可以根据自己的需求修改页面纸

2023-09-27 00:10