最专业的八方代购网站源码!

资讯热点
“按钮系列”的按钮位置与用户体验

发布时间:2020-8-4 分类: 电商动态

之间的关系本文主要是为大家解释:“确认”,“下一步”等页面上的按钮放置时,对页面或产品有什么影响。

 这类按钮在页面中的主要形式有以下三种:

固定在底部

固定在底部并跟随键盘移动

按照列表移动(用户体验说明)

 固定于底部

当“下一页”或“确认”按钮固定在页面底部时,页面布局将从全局角度更加清晰,页面的完整性将更加一致,符合均匀性原则设计。

因此,将按钮固定到页面底部是许多设计人员在设计此类界面时使用的方法。

但这并不意味着这种方法是好的,假设三页中的列表需要填写或编辑,那么放在底部的按钮操作起来不太方便。

首先,当修改列表可编辑列时,键盘将弹出页面底部,键盘的存在将阻止确认按钮,使用户无法点击。因此,在开发产品时,您需要注意键盘的“完成”或“完成”按钮以及页面上的“下一步”按钮。但事实上,有些键盘没有“完成”或“完成”键,所以这是一个更大的开发成本,当然,这不是最重要的。

关键是,对于某些用户来说,单击键盘上的“完成”按钮是相对不熟悉的,包括我自己,实际上很少直接点击键盘上的“完成”按钮。像大多数人一样,编辑后的第一反应不是单击键盘上的“完成”按钮,而是单击键盘上的“隐藏”按钮或页面的空白区域,并希望键盘消失,从而显示“下一步”按钮。但是,这样的操作并不友好。

因此,从这个角度来看,如果在产品列表页面的操作期间列表类型属于视图类(即,它不能被编辑),则统一页面底部的按钮是没有问题的。

如果在产品列表页面的操作过程中需要填写或编辑,则将按钮固定到底部不是一个非常明智的选择。

 固定于底部且跟随键盘运动

我最初设计的程序实际上是这个:将按钮绑定到键盘,并在开始时将其固定到底部。编辑时,键盘弹出,按钮组合在一起。

这不仅解决了上述“按钮遮挡”问题,而且在操作过程中也非常方便。它固定在底部而不进行编辑,需要进行编辑以使用键盘移动到顶部。无论列表如何变化,按钮的位置始终是两个位置,并且不会改变。

不幸的是,我是一个极度强迫症的人,所以当我遇到极端的例子时,我开始纠缠这个程序的可行性。如下图所示:

你遇到了似曾相识的事吗?当我在素描时,我遇到了这样的情况。我立刻想到使用App遇到类似的场景:按钮暴露,填写后,我不想隐藏键盘或先点击它。键盘的确认按钮,但用你自己的瘦手指指出暴露的按钮部分,然后经常出错。

所以我继续考虑这个计划。

 跟随列表移动(用户体验讲解)

按钮跟随列表移动,我在许多场景后决定。虽然有瑕疵,但它已经是我能想到的最好的了。

诀窍是:虽然这个解决方案可以解决键盘弹出的问题,但实际上仍然会出现遮挡现象,如图所示。

但与键盘运动相比的优势在于:符合用户的操作体验。

我相信第三个选项(在列表移动之后)是大多数人在设计时所想到的,但很多人不知道为什么。

在设计这个过程时,实际上存在一个误解,这就是我在开头提到的那个,即:页面遵循设计一致性的原则。

引领设计师尽可能多地设计页面元素,包括图标,按钮,位置等。因此忽略每个页面是“单个人”,我们需要的是让用户在每个页面上平滑地完成操作,而不是从设计者的角度看“页面布局”的一致性。

因此,根据列表的阅读顺序,我们从第一行读取最后一行。从视觉流的角度来看,当按钮靠近列表下方的位置时,对用户来说是最快的。

同时,在设计过程中,我拒绝了将“确认”按钮放在右上角的计划。

因为用户在这样的列表页面的操作下确认列表信息是非常重要的,所以只有当列表页面的内容不重要时才在右上角放置“下一步”或“确认”按钮。它将被设计为这样。

 总结

本文的要点是:按钮在页面上的位置的影响,不受一致性原则的约束,而是要了解如何灵活使用它。

因此,页面中任何元素的放置不仅会影响页面的布局,还会影响操作期间用户的体验。

事实上,工作中存在许多类似的小问题。许多人认为这是理所当然的。他们没有研究过为什么,而这些细节往往是产品成功的关键。

« MituInfo V6.1.2版本的MRT企业代购源码网站系统在线发布 | 您撰写的广告文案难以被用户记住?请尝试这5个副本模板 »