发布时间：2021-10-19 分类： 行业资讯
我最近做了一个迭代修订设计，在此期间我遇到了很多问题。其中一个是我在上一篇文章《「瞬间之美」读书笔记：Web界面设计如何让用户心动?》中提到的按钮的设计。在得出结论之前，我想与大家分享我是如何解决的。这个问题。主要可归纳为以下三个步骤：
1.范式——从书籍中找到解决方案
目前公认的原则是范式。对于设计理论，不同的人会有不同的意见。什么是普遍接受的理论？专业书籍是我们获得设计范式的最重要方式。我认为这对年轻设计师来说尤其重要。
2.广博——看看有多好的在线产品可以解决这个问题
任何知识都在不断迭代和完善。只有广博才能不断验证和更新从本书中获得的设计范式。优质产品的分析是广博的主要途径。
3.输出——结论和应用
根据上述两个步骤的结论，总结分析是否可以应用于您自己的设计。
这是我目前正在学习的主要方法。如果你有更好的方法，你可以留言。
以下是我通过这三个步骤得出的关于按钮设计的结论。
首先，按钮的类型
按钮是命令控件，包括普通按钮，图标按钮和文本按钮。
1.普通按钮
2.图标按钮
3.文本按钮
第二，如何确保按钮的识别和轻松学习
1.使用视觉风格告诉人们您可以点击这里
在平面设计之前，按钮具有三维凸起特征，我们仍然可以学习。为按钮添加适当的阴影，使元素从背景中脱颖而出，使用户更容易识别其可点击性。
2.保持一致性
网站上按钮的形状尽可能均匀。矩形用于矩形。圆角矩形用于圆角矩形。用户将特定形状的元素识别为“按钮”。一致性将为用户提供更熟悉的体验。降低用户学习成本。
一致的
不一致的
3.使用高效且易于理解的文案
按钮上的文本“确定，取消”将替换为更生动，更准确的文本。
以下是上一篇文章的示例：
4.使用适当的图标
指向右侧的箭头可能意味着离开页面;向下箭头可能意味着打开下面的内容或打开下面的菜单。
网易邮箱中的“发送”按钮使用图标纸飞机，不仅提高了按钮的易读性，而且与其他按钮有很好的区别，增加了发送按钮的优先级。
三，按钮的反馈状态
该按钮必须在操作期间有反馈，以便让用户知道他的操作发生了什么。
按钮的状态具有默认状态，悬停状态，单击状态，禁用状态和忙碌状态。
第四，残疾人国家有以下几点要注意
1.区别明显
禁用状态和可用状态之间有明显的区别，因此用户清楚地知道该按钮不可点击。
2.在禁用状态下为用户提供相应的反馈
当鼠标移动到处于禁用状态的按钮时，使用提示工具解释禁用用户的原因。
如果无法下载百度中的图片，当鼠标移动到下载按钮时，提示工具将解释按钮不可用的原因。
3.禁用状态按钮是否可见或隐藏
处于禁用状态的按钮的可见性取决于其在界面中的位置和功能属性。
例如，Google Chrome的禁用状态按钮可见。
Safari浏览器也可见。
这是因为两个浏览器都有三个按钮。如果它们在禁用状态下不可见，则右侧按钮的位置将不固定，这违反了设计一致性原则。用户希望在固定位置看到固定功能。如果传入按钮的位置每次都改变，用户将非常困惑，有时按钮将不存在，并且当单击页面时工具栏将明显改变。不好。
在修订之前，firfox浏览器的前进按钮在禁用状态下是不可见的。
因为Firefox在这里只有两个按钮，所以没有明显的跳跃。
以上是以前的版本，修改后的firefox如下：
因此，根据按钮的功能和界面中的位置，具体分析处于禁用状态的按钮的可见性。
你确定要左转或右转吗？
对于这个问题，不同的平台和不同的软件是不同的。
Windows在左侧是正常的，在右侧取消。
并且Mac系统在右侧是正常的，在左侧取消。
为了让用户获得一致的体验，最好的方法是为不同的平台使用不同的平台，但是当我们的设计基于网页时，我们如何安排确定和取消的位置？
我个人更喜欢右边的“OK”，左边的“取消”，“OK”表示进入下一步，“取消”表示返回上一步，基于用户的“上一个”和“下一个”的习惯使用它也应该在右边确定并在左边取消。
六，设计不同的优先级按钮
当我们的界面功能更多时，会有更多的功能按钮，这些功能按钮肯定会有优先权，这次我们需要设计一套一级按钮，两级按钮和三级按钮，甚至更多。
让我分享我在设计修订中设置的按钮：
以上是今天的分享。你有更好的想法吗？如果有任何消息可以留在评论区域，我会仔细查看。我希望这篇文章会对你有所帮助。
