网页产品设计中的排序

按照排序的可选性,主要分为单向、双向、多选,下面逐一阐述。

单向

理论上排序都是可以正序和倒序的,但是在一些实际的场景中,倒序是没有意义的,所以就只有单向的正序:

  • 销量
  • 好评数
  • 人气

在展示方面不会有太多的变化,大体都和上图一样。

双向

使用非常频繁的场景就是「价格」排序,即需要从高到低,也需要从低到高。

主要有以下两种展示方式:

其一,正序倒序图标同时展示,通过标亮来显示当前的序列。

其二,只展示当前序列图标,点击之后更换图标。

这两种方式,第一种更优,直观的告诉用户即可以正序也可以倒序,而第二种增加了用户的认知成本。

多选

常用的场景,比如价格阶段选择。

有一个重要的细节需要注意:

  • 未选中状态
    展示文字显示的是「标题」,比如上图中的「价格区间」,此种情况下面罗列的是各个区间段;
  • 选中状态
    展示文字显示的是「当前价格区间」,比如上图中的「20-50元」,较第一种下拉多出一个「全部价格」,不然就无法回到所有;同时,此时选择全部价格,又回到了未选中状态,直接显示「价格区间」,而不是「全部价格」。

「价格区间」与「全部价格」表意的不同点在于,前者有告之用户当前是可选的。

Author: 四勾 4J

via 4jplus.com

Leave a Reply

Your email address will not be published. Required fields are marked *