UI组件——分页最佳实践

一些设计师认为分页是一种过时的设计模式，并切换到更优雅的无限滚动，而不是探索有助于整体导航的复杂性和最佳实践。

分页以逻辑组的形式提供内容，这些内容按结果的相关性分成页面。反过来，当人们继续滚动并感觉无法做出最终选择时，无限滚动可能会非常令人难以抗拒并导致决策瘫痪。

当您希望人们不仅浏览而且进行购买时，分页可以成为电子商务网站的完美解决方案。此外，它允许人们在知道他们需要去哪里时转到确切的页面

截断过多的页面链接

有时，页面太多以至于分页面板会缩短。多行分页会使设计变得嘈杂和笨拙。相反，  通过折叠过多的页面链接并仅显示最有用的页面链接来使用智能截断。

根据您拥有的页面数量，您可以显示第一页、最后一页和当前页面并隐藏中间页面；或者您可以显示前 3 个、后 3 个和当前一个，并在每侧填充 3 个链接。要显示该范围内的隐藏页面，允许用户单击或悬停在三点图标上。

确保一个体面的可点击区域

即使是像在悬停时突出显示的可点击区域这样的小细节也可以显着提高可用性。确保每个页面链接的点击目标足够大，以便用户可以快速轻松地点击它，而无需尝试太多就可以点击。

WCAG 建议目标尺寸至少为 44×44 像素。

提供足够的分页对比度

创意和品牌标识的独特性很重要，即使涉及到最小的细节。但是，每个人都应该可以访问分页等组件。确保选择与背景形成对比的颜色以获得更好的可见性。

争取在前景和背景之间达到 4.5:1 的对比度。

明确指出当前页面

当前页面的清晰指示可防止用户迷路。明确的背景颜色带来更多关注，并帮助用户更快地注意到所选页面。

允许用户翻页

一个好的导航面板可以让用户舒适地浏览界面。手动页面输入是一项不错的功能，而分页按钮是允许用户翻页的分页的主要元素。用户以不同的方式浏览页面，通常他们不知道确切的页码。

更重要的是，按钮也应该引人注目且明确——最常用的控件是单个 V 形或 Next/Previous 按钮。

允许用户切换到列表的开头和结尾

双左右人字形就像神奇的门户，可以在眨眼之间将用户从当前页面传送到第一页或最后一页。它是提供数十页大型目录的电子商务网站的必备功能。

包括这些控件显着降低了交互成本。

确保分页面板的可见性

页面导航面板可能不是页面的焦点，但它应该是可见且易于查找的。使文本、数字和按钮足够大，以便阅读和单击，并与其他文本级别成比例。

在移动设备上用手指点击的可点击区域的建议大小至少为 44×44 像素。

本文内容为转载