Cara Memaparkan Koleksi Haiwan Peliharaan Maya Kecil yang Semakin Bertambah

Haiwan peliharaan kecil kebanyakannya merupakan item visual, jadi grid yang teratur ialah titik permulaan yang baik. Gunakan sel yang sama saiz dan kekalkan susunan bacaan yang konsisten dari kiri ke kanan, kemudian dari atas ke bawah. Dengan cara ini, setiap haiwan peliharaan baharu mendapat tempat yang boleh dijangka dan memudahkan pengumpul yang kembali untuk mengimbas galeri. Apple mengesyorkan susun atur baris atau grid yang biasa untuk koleksi visual, manakala Material Design menerangkan bahawa jubin grid yang ringkas sesuai untuk galeri imej. (Garis Panduan Antara Muka Manusia Apple: Koleksi; Material Design: Kad)

Berikan ruang yang mencukupi pada setiap sel untuk imej haiwan peliharaan dan namanya. Jika nama, jenis atau status ringkas perlu dipaparkan bersama setiap haiwan peliharaan, gunakan jubin ringkas dengan hierarki yang jelas dan bukannya menambah kad penuh dengan sempadan, butang dan butiran hiasan. Panduan Material membezakan galeri imej daripada kad, yang lebih berguna apabila item mempunyai kandungan atau tindakan yang pelbagai. Bagi koleksi haiwan peliharaan yang kebanyakannya seragam, hiasan kad tambahan mengalihkan perhatian daripada koleksi.

Grid tidak dapat memaparkan semua haiwan peliharaan serentak apabila koleksi melebihi ruang skrin yang tersedia. Pilih matlamat utama: melihat sebanyak mungkin haiwan peliharaan sepintas lalu, mencari haiwan peliharaan tertentu dengan cepat, atau menikmati paparan yang menonjolkan beberapa pilihan. Matlamat ini menghasilkan susun atur yang berbeza.

Matlamat utama	Pilihan paparan yang berguna	Kompromi
Mengimbas banyak haiwan peliharaan	Grid padat dan seragam	Ruang untuk setiap haiwan peliharaan lebih terhad
Mencari haiwan peliharaan yang diketahui	Grid dengan carian atau pengisihan abjad	Kawalan menggunakan sebahagian ruang skrin
Memaparkan beberapa kegemaran	Baris pilihan atau ruang paparan lebih besar di atas grid	Lebih banyak bahagian koleksi penuh berada di bawah
Membandingkan butiran haiwan peliharaan	Paparan senarai atau butiran	Lebih sedikit haiwan peliharaan muat dalam paparan awal

Anggap ruang pilihan sebagai tingkap kecil kepada koleksi, bukannya penggantinya. Contohnya, paparkan beberapa kegemaran di bahagian atas, kemudian letakkan grid lengkap di bawah. Contoh galeri haiwan peliharaan adaptif Android menggunakan ruang haiwan peliharaan yang menonjol serta grid yang boleh memaparkan lebih banyak haiwan peliharaan apabila susun atur mempunyai lebih banyak ruang. Ini menyokong pilihan reka bentuk umum untuk memberikan keutamaan visual kepada ruang pilihan sambil mengekalkan galeri yang boleh dilayari di bawahnya. (Android Developers: Rakan berbulu dan API adaptif)

Apabila grid menjadi panjang, bahagikannya menggunakan kategori yang sepadan dengan cara pengumpul memikirkan haiwan peliharaan tersebut. Pilihan yang mungkin termasuk spesies atau dunia, set koleksi, keluarga warna atau tempoh pemerolehan—gunakan hanya kategori yang benar-benar wujud dalam koleksi. Mulakan dengan sebilangan kecil kumpulan. Terlalu banyak bahagian kecil boleh menjadikan pelayaran terasa seperti berpindah antara koleksi yang berasingan.

Kekalkan satu paparan lalai yang jelas, seperti “Semua haiwan peliharaan,” dan pastikan kumpulan yang aktif kelihatan. Jika haiwan peliharaan boleh tergolong dalam lebih daripada satu kumpulan, penapis biasanya lebih jelas daripada memaparkan haiwan peliharaan yang sama dalam beberapa bahagian. Jika setiap haiwan peliharaan tergolong dalam satu kumpulan yang tetap, bahagian berlabel boleh memudahkan pengimbasan seluruh koleksi. Ini ialah penerapan praktikal penyusunan kandungan mengikut strukturnya; pengelompokan yang terbaik bergantung pada ciri sebenar koleksi, bukannya skim kategori sejagat.

Pemilik mungkin dapat mengenali imej haiwan peliharaan, tetapi nama membantu mengurus senarai yang semakin bertambah dan membezakan varian yang kelihatan serupa. Letakkan nama ringkas tepat di bawah setiap lakaran kecil. Jika dua haiwan peliharaan boleh mempunyai nama yang sama, tambahkan satu pengecam sekunder yang ringkas, seperti set atau bentuknya. Elakkan meletakkan berbilang statistik, lencana dan kawalan dalam setiap jubin: butiran ini bersaing dengan imej dan menjadikan grid lebih padat.

Jika paparan ini sebahagian daripada laman web atau aplikasi, pastikan identiti haiwan peliharaan tersedia sebagai teks selain imej. Panduan W3C menyatakan bahawa imej bermaklumat memerlukan alternatif teks yang menyampaikan maklumat berkaitannya; jika label bersebelahan sudah memberikan maklumat yang sama, pengulangannya dalam teks alternatif imej mungkin tidak diperlukan. Dalam amalan, padankan nama yang kelihatan dengan label kebolehcapaian yang sesuai dan elakkan haiwan peliharaan yang unik hanya dapat dikenal pasti melalui warna atau imej. (W3C WAI: Tutorial Imej)

Gunakan lebar yang tersedia untuk mengubah bilangan lajur dan bukannya memaksa bilangan tetap pada setiap skrin. Telefon yang kompak mungkin memaparkan dua lajur; skrin yang lebih lebar boleh memaparkan lebih banyak lajur, asalkan setiap imej dan nama kekal jelas. Kekalkan jarak yang seragam dan susunan asas yang sama apabila susun atur berubah. Contoh reka bentuk adaptif Android menerangkan galeri dua lajur pada skrin kompak dan pemaparan lebih banyak kandungan apabila ruang tersedia lebih luas. (Android Developers: Rakan berbulu dan API adaptif)

Periksa paparan pada saiz paling sempit yang mungkin digunakan orang dan pada saiz desktop yang lebar. Cari nama yang terpotong, imej yang kehilangan butiran pengenalnya, ketinggian jubin yang tidak seragam atau kawalan yang tersusun janggal apabila dibalut. Jika satu haiwan peliharaan mempunyai nama yang lebih panjang, benarkan baris kedua yang disengajakan atau potong nama secara konsisten dengan cara untuk melihat nama penuh; jangan biarkan satu entri luar biasa mengubah bentuk seluruh grid tanpa disedari.

Bagi koleksi yang pendek, menatal satu grid mungkin sudah mencukupi. Tambahkan carian apabila orang perlu mencari haiwan peliharaan tertentu daripada senarai yang lebih panjang. Tambahkan pengisihan apabila susunan penting—contohnya, mengikut abjad atau masa haiwan peliharaan ditambahkan. Tambahkan penapis hanya untuk ciri yang membantu membezakan item. Letakkan kawalan ini di atas hasil dan paparkan pilihan isihan atau penapis yang dipilih supaya paparan semasa mudah difahami. Panduan koleksi Material meletakkan penapisan dan pengisihan di luar kad supaya tumpuan item kekal pada kandungannya. (Material Design: Kad)

Elakkan daripada bergantung pada tatalan tanpa penghujung yang tidak menunjukkan kemajuan. Jumlah koleksi yang kelihatan, tajuk bahagian atau tindakan “paparkan lagi” yang jelas boleh membantu menerangkan jumlah kandungan yang masih ada. Ini ialah petunjuk pilihan, bukannya keperluan; pilih petunjuk paling ringkas yang membantu seseorang memahami kedudukan mereka tanpa menambah keserabutan visual.

Tambahkan beberapa haiwan peliharaan yang mewakili koleksi, termasuk yang kelihatan serupa dan yang mempunyai nama paling panjang, kemudian semak koleksi pada lebar telefon dan desktop. Tanya: bolehkah seseorang mengenali setiap haiwan peliharaan, membaca namanya, memahami kumpulan atau isihan semasa dan mencapai seluruh koleksi tanpa meneka? Bolehkah mereka mencari haiwan peliharaan yang biasa dilihat tanpa mengimbas setiap item? Adakah imej masih menjadi tumpuan?

Jika haiwan peliharaan sukar dikenal pasti, besarkan jubin atau kurangkan butiran yang dipaparkan. Jika item sukar dicari, tambahkan carian nama atau pengisihan yang munasabah. Jika skrin pertama terasa sesak, sediakan ruang pilihan yang kecil dan letakkan koleksi penuh di bawah. Buat satu perubahan pada satu masa dan ulangi semakan apabila koleksi bertambah; paparan yang sesuai ialah paparan yang terus menyokong tugas sebenar pembaca pada saiz dan kepadatan yang mereka gunakan.

• Apple Developer, “Koleksi” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, “Kad” — https://m1.material.io/components/cards.html
• Android Developers, “Rakan berbulu dan API adaptif” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• Inisiatif Kebolehcapaian Web W3C, “Tutorial Imej” — https://www.w3.org/WAI/tutorials/images/