你知道UI设计中的按钮设计规范吗？

时间：2024-02-16 08:55:01 | 来源：网站运营

时间：2024-02-16 08:55:01 来源：网站运营

你知道UI设计中的按钮设计规范吗？：按钮是产品界面中非常重要的元素之一，它对于用户的引流和动作触发都很重要。按钮设计如何做到最好，是设计者需要不断探索的问题，掌握好每个细节，才能使每个元素更加精巧。

按钮设计基本原则包括：强化按钮、凸显按钮位置、凸显重要按钮、把按钮按照合理的顺序放好、给按钮匹配释义标签、如果用户不想做任何操作，不安排按钮、弱化消极按钮。按钮创建并不是特别困难，但很容易在各类产品中找到一些体验不好的按钮设置影响用户体验。


一、强化按钮

强化按钮边缘或在按钮下方添加阴影使得按钮在视觉效果上更加强化，让按钮从背景上分离开；而且看起来可以吸引人去点击。如果单词周围没有形状和阴影包裹，那么没有办法感知其是一个按钮；而且一个单词是没有办法给予足够的视觉提示，吸引用户做点击操作的；按钮保持该有的按钮的基本属性。但许多网站设计师会担心一个凌乱的旧的按钮会破坏整体设计的格调。希望主操作按钮设计得很棒，同时也包含基础的按钮属性；而对于用户来说，这是一个最重要的地方，所以需要让用户感知到带有按钮属性的视觉愉悦。

二、凸显按钮位置

用户体验中争论最激烈的问题之一是：“确定按钮是在取消按钮的左侧或是右侧?”。这边还有一个关于按钮组合同样激烈的争论，例如研究上一个和下一个按钮的组合设计。你可以在很多地方找到这样的争论，而且观点往往不一。设计只包含有确认和取消两个按钮组合的对话框或弹窗。同时我也没有在哪个地方看到过只包含有上一步和下一步两个按钮的页面。在一个网页中，总会包含有其他的元素，比如文本、图像或者其他元素。

三、凸显重要按钮

在现有的产品中经常看到界面上罗列了一堆相似的按钮让用户去从中挑选，这个过程相当有难度，需要耗费用户的认知成本。为什么不给用户一点提示，让主按钮更加突出?把它变大一点或让它看起来更重要，创建一个更大的目标供用户单击。或尝试更传统的方法：用一个更亮的颜色作为主要的动作按钮，来让主按钮变得显而易见。

四、按钮顺序合理

如果主按钮需要放在用户下一个查看的位置，那么其他按钮应该放在哪里?应该把其他的按钮藏起来，这样用户就不太容易发现它们。虽然这是一个很好的建议，但是如果您不考虑其他设计因素而遵循它，可能会出现不正确的布局。对于从左到右阅读的语言，上一步按钮应该始终位于下一步按钮的左侧，所以给出的解决方法是重新排列字段和按钮。另一个方法是增加页面的左边距并将上一个按钮放入其中。

五、给按钮匹配释义标签

最佳体验设计原则：给按钮安置释义标签。不受欢迎的消息类弹框，告诉一些严重和可怕的错误，并希望单击确认。这种体验不好，我不想在收到这样的坏消息后再单击“确定”，当然不能保证用户会看到按钮上的标签。如果你在告警提示时放置了错误的按钮，一些用户不会阅读按钮的标签，而是会单击按钮；一些用户则会阅读这些标签，因此可以通过编写每个按钮释义标签来帮助用户快速理解；如果你发现自己陷入了一个争论中，比如说，取消操作应该在一个对话框中，记住你需要用它的功能性意思来标记按钮。

六、用户不想做任何操作不安排按钮

为了测试是否适用，我尽量去进行填写，但我真的不想注册一个网站或申请贷款或做其他目的的表单，所以这个时候有一个重置或取消按钮会比较方便。如果为从事表单设计的客户做设计，请确保包含重置按钮。如果为别人设计的，问问自己是否真的想清楚所有的填写过的内容。在流程中，用户遇到“登录”按钮和“注册”按钮两个选择，但用户要么不记得的登录凭据，要么不想注册，所以两个都不是用户的选择。用户想做的是将注册改为继续，从而实现了销售额的大幅增长。

七、弱化消极类按钮

放置用户不想操作的按钮，但是有时确实需要提供消极类按钮，如取消订单。在自己案例库中找到的看上去一个合理的“取消”按钮，截图来源一个网站，该网站的目标用户是那些即将准备进行一笔相当大的购买、每月支付长期款项的非熟练用户，因为这批用户不知道点击关闭窗口的关闭按钮就可以取消交易。

网页是用户和网页的对话过程。按钮在人和网页的对话中起着至关重要的作用。按钮设计一定要遵循设计基本原则。

觉得有用，就关注+点赞+收藏吧！