← 返回博客

100 项购物清单的问题

文本列表不缩放。以下是视觉分组如何让大型商店易于管理。

在任何应用程序中,十项列表都很容易。一百个项目的列表是不同的产品。节日大餐、乔迁商店和“我们要招待二十个人”周都暴露了纯文本的局限性。

文本列表在自身重量下崩溃

随着列表的增长:

  • 线条模糊在一起
  • 滚动变得无限
  • 相似的名字隐藏在彼此旁边
  • 查找“我星期二添加的一件事”变成搜索

您花在浏览列表上的时间比浏览商店的时间还要多。该工具成为瓶颈。

视觉分组改进了导航

图标不仅在规模上看起来更好——它们在规模上组织。相关产品共享视觉家族:乳制品看起来像乳制品,农产品像农产品。在您的手指找到行号之前,您的眼睛会先看到簇。

在列表中您还可以:

  • 重新订购商品以匹配您的商店路线
  • 按文件夹或通道分组
  • 扫描网格而不是列

同样的一百件物品。完全不同的体验。

之前和之后

之前: 一长卷文本——面粉、糖、黄油、鸡蛋、香草、奶油……——每一行的重量相等,每一项都是一个小的阅读任务。

之后: 一个视觉板,烘焙用品放在一起,图标区分罐子、纸箱和袋子,完成的物品会褪色,而不会破坏您在网格中的位置。

大型列表不应该随着它们的增长而变得更难使用。它们应该变得更容易导航,因为结构是从视觉效果本身产生的。


大型列表不应变得更难使用。

尝试列表为您的下一个大商店 - 并将商品拖到与您的商店匹配的订单中。