发布时间：2022-2-15 分类： 电商动态
之间的关系下一次，我打算为您带来一系列专门用于设计按钮的文章。一篇文章解释了一个逻辑点，我相信它会对你有所帮助。
本周，我将主要向您解释：“确认”，“下一步”等。当页面上的按钮被放置时，对页面或产品有什么影响？
页面中有三种主要类型的按钮：
固定于底部
固定于底部且跟随键盘运动
跟随列表移动(用户体验讲解)
固定于底部
当“下一页”或“确认”按钮固定在页面底部时，页面布局将从全局角度更加清晰，页面的完整性将更加一致，符合均匀性原则设计。
因此，将按钮固定到页面底部是许多设计人员在设计此类界面时使用的方法。
但这并不意味着这种方法很好。如果我假设需要填写或编辑这三个页面中的列表，则按钮位于底部，操作起来不太方便。
首先，当修改列表可编辑列时，键盘将弹出页面底部，键盘的存在将阻止确认按钮，使用户无法点击。因此，在开发产品时，您需要注意键盘的“完成”或“完成”按钮以及页面上的“下一步”按钮。但事实上，有些键盘没有“完成”或“完成”键，所以这是一个更大的开发成本，当然，这不是最重要的。
重点是：对于某些用户，单击键盘上的“完成”按钮相对不熟悉，包括我自己。实际上，只需单击键盘上的“完成”按钮即可。像大多数人一样，编辑后的第一反应不是单击键盘上的“完成”按钮，而是单击键盘上的“隐藏”按钮或页面的空白区域，并希望键盘消失，从而显示“下一步”按钮。但是，这样的操作并不友好。
因此，从这个角度来看，如果在产品列表页面的操作期间列表类型属于视图类（即，它不能被编辑），则统一页面底部的按钮是没有问题的。
如果在产品列表页面的操作过程中需要填写或编辑，则将按钮固定到底部不是一个非常明智的选择。
固定于底部且跟随键盘运动
我最初设计的程序实际上是这个：将按钮绑定到键盘，并在开始时将其固定到底部。编辑时，键盘弹出，按钮组合在一起。
这不仅解决了上述“按钮遮挡”问题，而且在操作过程中非常方便：它固定在底部而不需要编辑，需要编辑才能用键盘移动到顶部。无论列表如何变化，按钮的位置始终是两个位置，并且不会改变。
不幸的是，我是一个极度强迫症的人，所以当我遇到极端的例子时，我开始纠缠这个程序的可行性。如下图所示：
你遇到了似曾相识的事吗？当我在素描时，我遇到了这样的情况。我立刻想到使用App遇到类似的场景：按钮暴露，填写后，我不想隐藏键盘或先点击它。键盘的确认按钮，但用你自己的瘦手指指出暴露的按钮部分（然后经常是错误的）。
所以我继续考虑这个计划。
跟随列表移动(用户体验讲解)
按钮跟随列表移动，我在许多场景后决定。虽然有瑕疵，但它已经是我能想到的最好的了。
诀窍是：虽然这个解决方案可以解决键盘弹出的问题，但实际上仍然会出现遮挡现象，如图所示。
但与键盘运动相比的优势在于：符合用户的操作体验。
我相信第三个选项（在列表移动之后）是大多数人在设计时所想到的，但很多人不知道为什么。
在设计这个过程时，实际上存在一个误解，这就是我在开头提到的那个，即：页面遵循设计一致性的原则。
引领设计师尽可能多地设计页面元素，包括图标，按钮，位置等。因此忽略每个页面实际上是“单个人”，我们需要的是让用户在每个页面上顺利完成操作，而不是从设计者的角度看“页面布局”的一致性（当然，它当你想学会灵活使用它时，这也很重要。
因此，根据列表的阅读顺序，我们从第一行读取最后一行。从视觉流的角度来看，当按钮靠近列表下方的位置时，对用户来说是最快的。
同时，在设计过程中，我拒绝了将“确认”按钮放在右上角的计划。
因为用户在这样的列表页面的操作下确认列表信息是非常重要的，所以只有当列表页面的内容不重要时才在右上角放置“下一步”或“确认”按钮。它将被设计为这样。
小结
本文的要点是：按钮在页面上的位置的影响，不受一致性原则的约束，而是要了解如何灵活使用它。
因此，页面中任何元素的放置不仅会影响页面的布局，还会影响操作期间用户的体验。
事实上，工作中存在许多类似的小问题。许多人认为这是理所当然的。他们没有研究过为什么，而这些细节往往是产品成功的关键。
太小的说，在面试中测试你的思维能力和逻辑，就是这些问题所延伸的个人观点。
那么，你认为这篇文章对你有帮助吗？
该地图来自Unsplash，基于CC0协议
