如何展示不断增长的微型虚拟宠物收藏
为了让不断增长的微型虚拟宠物收藏保持一目了然且易于浏览，可以使用统一的缩略图网格作为主视图，为每只宠物提供清晰易读的名称，并添加几种实用的分组或排序方式。让宠物本身在视觉上保持突出；将额外细节移入宠物的单独详情视图中。在小屏幕上，让网格自适应重排为较少的列数，而不是不断缩小每只宠物直至难以辨认。
从画廊视图开始，而非铺满微型卡片
微型宠物主要是视觉元素，因此规整的网格是一个很好的切入点。使用大小相同的单元格，并保持从左到右、从上到下的稳定阅读顺序。这能让每只新宠物都处于一个可预测的位置，并有助于回访的收藏者快速扫视画廊。Apple 建议在视觉收藏中使用熟悉的行或网格布局，而 Material Design 则指出轻量级网格磁贴非常适合图片画廊。(Apple 人机界面指南：集合 (Collections)；Material Design：卡片 (Cards)）
为每个单元格留出足够的空间来展示宠物图片及其名称。如果每只宠物旁边都必须显示名称、类型或简短状态，请使用层级分明的简单磁贴，而不要添加包含边框、按钮和装饰细节的完整卡片。Material 的指南将图片画廊与卡片区分开来，卡片在内容或操作多样化时更为实用。对于基本一致的宠物集合而言，多余的卡片修饰元素会分散对收藏本身的注意力。
明确“一目了然”对你的收藏意味着什么
一旦收藏规模超出了可用屏幕区域，网格就无法同时显示每只宠物。选择一个首要目标：一眼看到尽可能多的宠物、快速找到某只特定名称的宠物，还是欣赏精选展示。这些目标对应着不同的布局方案。
| 主要目标 | 实用的展示方案 | 权衡取舍 |
|---|---|---|
| 快速浏览大量宠物 | 紧凑、均匀的网格 | 单只宠物获得的展示空间较小 |
| 查找已知宠物 | 网格搭配搜索或字母排序 | 控件会占用部分屏幕空间 |
| 展示几只特别喜爱的宠物 | 在网格上方设置精选行或更大的展示区 | 完整收藏的更多部分会移至下方 |
| 比较宠物详情 | 列表或详情视图 | 初始视图容纳的宠物数量较少 |
将精选区视为通往收藏的一个小窗口，而不是它的替代品。例如，在顶部展示少数几只最喜爱的宠物，然后在下方保留完整的网格。Android 的自适应宠物画廊示例采用了一个突出的宠物展示区，以及一个可随布局空间增大而展示更多宠物的网格。这印证了常见的设计选择：在赋予精选区视觉优先地位的同时，在下方保留便于浏览的画廊。(Android Developers：毛茸茸的朋友与自适应 API）
按用户易懂的规则对宠物进行分组
当网格变长时，使用符合收藏者心智模型的类别来进行划分。可选方案包括物种或所属世界、收藏系列、色系或获取时期——请仅使用收藏中实际存在的分类。先从少数几个分组开始。过多细小的分区会让浏览体验感觉像是在不同收藏之间来回切换。
保留一个显而易见的默认视图（例如“所有宠物”），并让当前激活的分组清晰可见。如果宠物可以属于多个分组，使用筛选通常比在多个分区中重复显示同一只宠物更清晰。如果每只宠物仅属于一个固定的分组，带有标签的分区可以让整个收藏更容易扫视。这些都是围绕内容结构进行排布的实际应用；最佳的分组方式取决于收藏的实际属性，而非一套放之四海皆准的分类方案。
让名称和标识符发挥实际作用
宠物的主人或许能通过图片认出它，但随着名册不断增加，名称有助于识别并区分外观相似的变体。在每个缩略图正下方放置一个简短的名称。如果两只宠物可能同名，请添加一个简练的次级标识符，例如它们所属的系列或形态。避免在每个磁贴中放入多项属性、徽章和控件：这些细节会抢夺图片的焦点，并使网格显得拥挤。
如果展示界面属于网站或应用程序的一部分，请确保宠物的身份信息既可以通过图像获取，也可以通过文本获取。W3C 指南指出，传递信息的图像需要有能够传达相关信息的替代文本；当相邻的标签已经提供了相同的信息时，在图像的替代文本中重复该信息可能是不必要的。在实践中，应将可见名称与适当的无障碍标签配对，避免让具有特色的宠物仅能通过颜色或图像来识别。(W3C WAI：图像教程）
在缩略图变得难以辨认之前让布局自适应调整
利用可用宽度来调整列数，而不是在所有屏幕上强行使用固定的列数。小屏手机可能会显示两列；较宽的屏幕则可以显示更多列，前提是每张图片和名称都保持清晰可读。保持间距一致，并在布局重排时保留相同的基本顺序。Android 的自适应设计示例介绍了在紧凑屏幕上使用双列画廊，并在空间更充裕时展示更多内容。(Android Developers：毛茸茸的朋友与自适应 API）
在用户可能使用的最窄尺寸以及宽屏桌面尺寸下检查展示效果。排查是否存在名称被截断、图片失去辨识细节、磁贴高度不一或控件换行不协调等问题。如果某只宠物的名称较长，可以特意允许折为两行，或者以一致的方式截断并提供查看全称的途径；切勿让个别异常条目在不知不觉中破坏整个网格。
仅在解决实际问题时添加浏览控件
对于规模较小的收藏，仅通过单一网格滚动浏览可能就足够了。当用户需要从较长的列表中检索某只已知宠物时，再添加搜索功能。当顺序具有实际意义时添加排序——例如按字母顺序或按添加宠物的先后时间。仅针对有助于区分项目的属性添加筛选。将这些控件保留在结果上方，并显示当前选中的排序或筛选条件，以便用户了解当前视图状态。Material 的集合指南将筛选和排序放置在卡片本身之外，从而让各项目专注于自身的内容展示。(Material Design：卡片 (Cards)）
避免依赖没有进度提示的无休止滚动。清晰可见的收藏数量统计、分区标题或明确的“显示更多”操作，都可以帮助用户了解还剩多少内容。这些是可选的辅助提示而非强制要求；选择最轻量的一种方式，既能帮助用户建立方位感，又不会增加视觉混乱。
在最终确定布局前进行快速核对
添加几只具有代表性的宠物（包括外观相似的宠物以及名称最长的一只），然后在手机和桌面宽度下检查收藏界面。思考以下问题：用户能否辨认出每只宠物、读懂其名称、了解当前的分组或排序，并且无需猜测就能查看全部收藏？他们能否无需扫视每个项目就找到熟悉的宠物？图片是否依然是视觉焦点？
如果辨认困难，请放大磁贴或减少显示的细节。如果查找项目困难，请添加名称搜索或合理的排序方式。如果首屏显得拥挤，请保留一个较小的精选区，并将完整收藏放在下方。一次只做一项调整，并随着收藏的增长重复进行核对；最合适的展示方案，是能够在用户所采用的尺寸和密度下，始终为他们的实际任务提供支持的方案。
参考来源
- Apple 开发者，“集合 (Collections)” — https://developer.apple.com/design/human-interface-guidelines/collections
- Material Design，“卡片 (Cards)” — https://m1.material.io/components/cards.html
- Android 开发者，“毛茸茸的朋友与自适应 API (Furry friends and adaptive APIs)” — https://developer.android.com/design/ui/gallery/social/pawparazzi
- W3C 无障碍网页倡议，“图像教程 (Images Tutorial)” — https://www.w3.org/WAI/tutorials/images/