“按钮”设计要遵循什么规则？

它提到了不同位置的按钮如何影响用户体验。今天这篇文章的内容是扩展，在一定程度上优化，分析，旨在帮助你「按钮位置」更彻底地理解。EdmundC是古腾堡原则的出现.Arnold是一名报纸设计师，被公认为现代报纸设计之父。他设计了波士顿环球报、国家观察报、今日报、多伦多星报、堪萨斯城星报等1000多种报纸。在那个时代，人们对报纸的追求就像公众对手机的追求一样。虽然新闻内容是主要的，但报纸的外观、阅读方法、触摸舒适度等也非常精致。EdmundC.Arnold本身也是一个非常励志的人物。1945年二战结束，32岁的他开始研究排版编辑，1960年成为锡拉丘兹大学S.I.Newhouse公共传播学院教授1975年被任命为弗吉尼亚联邦大学图形艺术系主任，期间出版了27本书。20世纪50年代，在设计报纸的过程中，他提出了一个原则，认为人们的阅读方式应该遵循某种习惯，就像阅读一样，除了从左到右，还有从上到下的方式。但是里面有哪些信息呢？经过多方研究，他终于得出了后人所熟知的原则，并附上了一张名为“多方研究”的图片「古腾堡图」。古腾堡图将显示介质分为四个象限：左上角「第一视觉落点区」，也叫「主光学区域」，类似于自然光的落点；右下角「终端区域」；右上角的「强休区」和左下角的「弱休区」。从图中可以看出，读者自然是从「主光学区域」在显示介质上来回移动，通过一系列扫描到达终端区域。整个阅读方式从左到右，读者倾向于关注整个页面的开始和结束，而段落的开始和结束则很少被关注，即休闲区。这一原则的支撑点是「阅读重心」，由人们一直以来的阅读习惯形成。协调图表设计和阅读重心，可以帮助读者梳理阅读逻辑。研究表明，这可以提高读者的阅读节奏和理解能力。例如，按照古腾堡图的布局，将关键元素放在左上角（如标题）、中间(如图像)和右下角(如联系信息)。因此，我们经常看到这样的图纸内容：古腾堡图将设计元素的重量与其布局和组成相协调，以指导眼睛的运动规律。熟悉信息和媒体也会影响眼球运动。比如经常以一致的方式呈现给读者，不仅能让读者更容易理解内容，还能提高他们的可信度。也从中得到了一致性原则。当互联网兴起时，这一原则也应用于网页设计，甚至后来的移动设备界面设计。让我们来看看它在界面设计中对按钮的影响。按照古腾堡的原则，在用户查看不熟悉的界面时，浏览顶部按钮和底部按钮的设计理念是用户的第一行为。他们的眼睛会根据界面元素移动，最后停留在最后的动作点。此时，按钮的位置非常重要。如果界面需要用户阅读和操作，按钮的最佳位置应该在界面底部。例如：或者：这张图很好地诠释了古腾堡原则的运用。如果你研究过界面滚动屏幕，很容易发现界面红色区域的颜色深度代表点击率。影响界面信息布局的用户浏览视线。我们还可以看到，评论的视觉流也以这种形式设计：你甚至可以根据页面的布局来判断为什么产品功能的评论和拇指的排列顺序是这样的。即使是整个页面模块的评论显示，从小到大都是按照类似的视觉流设计的。例如，如果你不熟悉这方面，你只是觉得按钮位置占据了屏幕空间，并将按钮移动到右上角，但本末倒置。这将影响用户在操作和阅读方面的使用路径。例如：不仅如此，顶部按钮尺寸较小，因为它占用的空间有限，所以在操作中点击相对不方便。因此，这种顶部按钮更适合「编辑页面」，用户需要谨慎操作。例如，在这种情况下，使用顶部按钮可以让用户在注意到应用栏中的状态变化后更快地采取操作行为。接近状态标题的按钮意味着用户的眼睛不必偏离太远。因此，从古腾堡的原则来看，我们需要注意的是，顶部按钮设计的关键在于可编辑的内容区域，而不是按钮本身。底部按钮的核心是按钮本身，而不是内容。在设计界面的过程中，我们通常会遇到一种类似于设计界面的水平按钮的设计理念「取消」和「确认」。例如，这是一种常见的弹框按钮样式，设计师通常使用它让用户确认某种操作行为。可以提交表单，弹框内容是表单内容的重新显示，方便用户确认，所以这里的确认文案可以是「提交」；也有可能修改内容细节，修改后点击确认。无论如何，它都遵循古腾堡原则的视觉终点描述──让用户尽快看到主要操作内容。界面设计中也有很多类似的页面，比如keep的页面「继续」和「结束」按钮并排放置，最后放在右边，完全一致「取消」和「退出」布置逻辑也符合古腾堡的原则。熟悉的朋友都知道，这个页面「结束」按下按钮需要多长时间才能结束。包括类似的购物产品：这个按钮的位置设计主要取决于它们之间的逻辑关系和重要性。如上图的「喜欢」按钮相对于「加入购物车」对于用户来说，更关注的是是是否购买，而不是是是否喜欢。虽然也有，但程度较低，所以「喜欢」按钮相对较弱。或者支付宝的余额宝在「转入」和「转出」上述设计也是如此：可以找到很多类似的内容，如微信朋友圈的拇指和评论；以及知乎拇指和评论的位置，也在一定程度上解释了产品希望用户做什么。当主要动作在左侧时，用户的眼睛想要向右移动，而左侧的主按钮需要用户的视线来回移动，以增加用户的阅读时间。因此，当产品希望用户操作时，将主按钮放在右侧。当然，同时也要结合「取消左边，行进右边」的原则。如果一个界面上同时有两个按钮，虽然优先级不同，但设计师希望用户单独关注每个操作，那么垂直放置是最理想的选择。虽然垂直按钮在风格上有所不同，但用户也会停留一段时间进行比较和思考。垂直按钮比水平按钮更突出，它们占据了更多的屏幕空间宽度。因此，根据古腾堡的原则，正常的垂直按钮设计应该是这样的：但我想在这里举一个特别的例子：如上图所示，对于第一次使用此类界面的人，「充值」和「提现」两者都需要考虑逻辑，否则就不能突然反映充值和现金提取之间的关系。因此，这种放置可以让用户仔细思考两者。同时，用户进入这个页面最有可能的行为可以通过风格区分来区分。但如果按照原则设计，上图的微信界面似乎并不遵循古腾堡的原则，「充值」按钮应该在下面，因为底部是视觉终点。为什么呢？微信在这里玩了一个小把戏，我们可以看到原则和业务之间的关系。首先，我们暂时无法预测用户是否真的想在进入界面时充电，甚至可以猜测用户是否想提取现金：根据古腾堡的原则，页面按钮的位置可以看到逻辑是真的。所以这个页面对于想要提现的用户的正常逻辑应该是下图右侧:为了突出充值，微信反转了它的颜色。意图是将零钱与充值的关系联系起来，并将提现与底部的解释性文字结合起来，从而促进用户进行充值操作。即使有多余的零钱，也不要提现来理财。但是，如果将充值转移到下面，将现金提取到上面，就会遇到业务问题，即零钱与现金提取绑定，违反了零钱与充值的业务关系。然而，根据微信的做法，一些用户在这个页面上的停留时间会增加，特别是那些想要提取现金的用户需要来回查看，并在操作之前理解两者的含义。因此，我们可以从这个页面上解释，当微信认为业务与原则存在矛盾时，业务仍然占据高优先级。总结一下，我通过有限的例子，从正面和背面告诉你如何遵循古腾堡的原则。根据这一原则，我们还可以解释更多关于按钮位置背后的设计思路。