如何展示日益龐大的小型虛擬寵物收藏

小型寵物主要是視覺項目，因此規則的網格是個很好的起點。使用尺寸相同的單元格，並保持從左到右、由上而下的穩定閱讀順序。這能讓每隻新寵物佔據可預期的位置，並有助於回訪的收藏者瀏覽整個畫廊。Apple 建議在視覺收藏中使用熟悉的列或網格版面配置，而 Material Design 則說明輕量級網格圖塊非常適合圖片畫廊。(Apple Human Interface Guidelines: Collections；Material Design: Cards)

為每個單元格保留足夠的空間來容納寵物圖片及其名稱。若每隻寵物旁都必須顯示名稱、類型或簡短狀態，請使用層次清晰的簡單圖塊，而不是新增帶有邊框、按鈕和裝飾細節的完整卡片。Material 的指南區分了圖片畫廊與卡片，後者在項目具有不同內容或操作時更為實用。對於多數一致的寵物系列，多餘的卡片外框元素反而會分散對收藏本身的注意力。

一旦收藏規模超出可用螢幕區域，網格就無法同時顯示所有寵物。請選擇一個主要目標：一眼看到盡可能多的寵物、快速找到某隻特定名稱的寵物，或是欣賞精選展示。這些目標會對應到不同的版面配置。

主要目標	實用的展示選擇	權衡取捨
瀏覽大量寵物	緊湊、均勻的網格	單隻寵物獲得的空間較少
尋找已知寵物	網格搭配搜尋或按字母排序	控制項會佔用部分螢幕空間
展示少數最愛	網格上方設置精選列或較大的展示區	完整收藏的更多內容會移至下方
比較寵物詳細資訊	清單或詳細資訊檢視	初始檢視中容納的寵物較少

將精選區視為窺探收藏的一扇小視窗，而不是它的替代品。例如，在頂部顯示幾隻最喜歡的寵物，然後在下方保留完整的網格。Android 的自適應寵物畫廊範例使用了一個突出的寵物區域，以及一個能隨著版面空間變大而展示更多寵物的網格。這體現了常見的設計選擇：賦予精選區視覺優先權，同時在下方保留可供瀏覽的畫廊。(Android Developers: Furry friends and adaptive APIs)

當網格變長時，請使用符合收藏者思考邏輯的類別來劃分。可能的選擇包括物種或所屬世界、收藏系列、色系或獲得時期——請僅使用收藏中實際存在的類別。先從少數群組開始。過多細小的區塊會讓瀏覽感覺像是在不同收藏之間切換。

保留一個明確的預設檢視（例如「所有寵物」），並讓目前啟用的群組保持可見。如果寵物可以屬於多個群組，使用篩選器通常比在多個區塊中重複顯示同一隻寵物更清晰。如果每隻寵物都剛好屬於一個固定群組，帶有標籤的區塊可以讓整個收藏更容易瀏覽。這些都是圍繞內容結構安排內容的實際應用；最佳分組方式取決於收藏的真實屬性，而非一體適用的分類架構。

寵物圖片可能對其主人來說很好辨認，但隨著陣容不斷擴大，名稱有助於區分外觀相似的變體。在每個縮圖正下方放置一個簡短的名稱。如果兩隻寵物名稱相同，請新增一個簡潔的第二識別碼，例如牠們的系列或型態。避免在每個圖塊中放入多個數值、徽章和控制項：這些細節會與圖片搶奪視覺焦點，並使網格顯得過於密集。

如果此展示屬於網站或應用程式的一部分，請確保寵物的身分資訊既有文字也有圖片。W3C 指南指出，資訊性圖片需要傳達其相關資訊的替代文字；當相鄰標籤已提供相同資訊時，在圖片的替代文字中重複該資訊可能是不必要的。在實踐中，請將可見名稱與適當的無障礙標籤配對，並避免讓獨特的寵物僅依賴顏色或圖片來識別。(W3C WAI: Images Tutorial)

利用可用寬度來調整欄數，而不是在所有螢幕上強制使用固定欄數。緊湊的手機螢幕可能顯示兩欄；較寬的螢幕可以顯示更多欄，前提是每張圖片和名稱仍保持清晰易讀。保持間距一致，並在版面重排時保留相同的基本順序。Android 的自適應設計範例說明了在小螢幕上使用雙欄畫廊，並在有更多空間時展示更多內容。(Android Developers: Furry friends and adaptive APIs)

在使用者可能使用的最窄尺寸以及寬版桌面尺寸下檢查展示效果。尋找是否有被截斷的名稱、失去識別細節的圖片、不均勻的圖塊高度，或是換行不自然的控制項。如果某隻寵物需要較長的名字，請刻意允許第二行，或採用一致的截斷方式並提供查看完整名稱的途徑；不要讓單一異常項目默默破壞了整個網格的美觀。

對於數量較少的收藏，滑動瀏覽單一網格可能就足夠了。當人們需要從較長的清單中檢索特定寵物時，請新增搜尋功能。當順序很重要時（例如按字母順序或新增時間），請加入排序功能。僅針對有助於區分項目的屬性新增篩選條件。將這些控制項保留在結果上方，並顯示目前選定的排序或篩選條件，讓目前的檢視狀態清晰易懂。Material 的收藏指南將篩選和排序放置在卡片本身之外，從而讓各項目專注於自身的內容。(Material Design: Cards)

避免依賴毫無進度感的無限捲動。可見的收藏計數、區塊標題或明確的「顯示更多」操作，有助於說明還剩多少內容。這些是可選的提示信號而非硬性要求；選擇最輕量且能幫助使用者辨明位置的方式，同時避免造成視覺混亂。

加入幾隻具代表性的寵物（包括外觀相似的寵物以及名稱最長的寵物），然後在手機和桌面寬度下檢視收藏。請自問：大家能否辨認出每隻寵物、看清其名稱、理解目前的群組或排序方式，並在無需猜測的情況下瀏覽完整收藏？他們能否不必掃視每個項目就找到熟悉的寵物？圖片是否依然是視覺焦點？

如果難以辨認，請放大圖塊或減少顯示的細節。如果尋找項目困難，請新增名稱搜尋或合理的排序。如果首頁畫面顯得擁擠，請保留一個小型的精選區，並將完整收藏放在下方。一次只做一項變更，並隨著收藏增加重複進行這項檢查；最佳的展示方式，就是在使用者所採用的尺寸和密度下，依然能支援其實際任務的配置。

• Apple Developer, “Collections” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, “Cards” — https://m1.material.io/components/cards.html
• Android Developers, “Furry friends and adaptive APIs” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, “Images Tutorial” — https://www.w3.org/WAI/tutorials/images/