Spesifikasi Reka Bentuk Program Mini WeChat (2) Jelas dan jelas

2. Jelas dan jelas

Sebagai pembangun yang bertanggungjawab, sebaik sahaja pengguna memasuki halaman program mini kami, kami mempunyai tanggungjawab dan kewajipan untuk memberitahu pengguna dengan jelas di mana mereka berada dan ke mana mereka boleh pergi, untuk memastikan pengguna berada di atas. halaman Navigasi dengan bebas tanpa tersesat, untuk memberikan pengguna pengalaman yang selamat dan menyenangkan.

1. Navigasi yang jelas, mudah untuk datang dan pergi

Navigasi adalah faktor paling kritikal untuk memastikan pengguna tidak tersesat semasa melayari halaman web. Navigasi perlu memberitahu pengguna di mana saya berada, ke mana saya boleh pergi, cara untuk kembali, dsb. Pertama sekali, semua halaman semua program mini dalam sistem WeChat akan mempunyai bar navigasi mereka sendiri yang disediakan oleh WeChat, yang boleh menyelesaikan masalah di mana saya berada dan cara untuk kembali secara seragam. Mengekalkan pengalaman yang konsisten dalam navigasi peringkat WeChat membantu pengguna membentuk pengalaman yang lebih bersatu dan persepsi interaktif dalam WeChat, tanpa menambah kos pembelajaran baharu atau tabiat penggunaan apabila bertukar antara program mini dan WeChat.

WeChat Navigation Bar

WeChat Navigation Bar diwarisi secara langsung daripada pelanggan Selain daripada warna bar navigasi, pembangun tidak perlu dan tidak boleh menyesuaikan kandungan. Walau bagaimanapun, pembangun perlu menentukan hubungan lompatan antara setiap halaman program mini supaya sistem navigasi boleh berfungsi dengan cara yang munasabah.

Bar navigasi WeChat dibahagikan kepada kawasan navigasi, kawasan tajuk dan kawasan operasi. Kawasan navigasi mengawal proses halaman program. Pada masa ini, bar navigasi dibahagikan kepada dua warna asas, gelap dan terang, yang dipaparkan secara berbeza pada iOS dan Android, seperti yang ditunjukkan dalam rajah di bawah:

Kawasan navigasi (iOS)

Kawasan navigasi biasanya hanya mempunyai satu operasi, iaitu untuk kembali ke antara muka tahap sebelumnya. Pembangun boleh menentukan kandungannya, tetapi gaya tidak boleh diubah suai.

Kawasan navigasi (Android)

Biasanya, satu-satunya operasi di sebelah kiri navigasi sistem ialah "Tinggalkan program mini, kembali ke WeChat, dan program berjalan di latar belakang."

Apabila pengguna memasuki halaman kedua program mini, kami mengesyorkan agar program mini itu sendiri boleh mereka bentuk operasi kembali, dan pengguna juga boleh kembali ke tahap sebelumnya melalui butang pulangan perkakasan yang disertakan dengan sistem Android.

Peraturan warna tersuai bar navigasi WeChat (iOS dan Android)

Bar navigasi program mini menyokong fungsi penyesuaian warna latar belakang asas Warna yang dipilih perlu sepadan secara harmoni dengan dua set utama yang disediakan oleh WeChat sambil memenuhi bar Navigasi ikon. Adalah disyorkan untuk merujuk kepada kesan pemilihan warna berikut:

Contoh skema pemilihan warna:

Navigasi dalam halaman

Pembangun boleh menambah navigasi mereka sendiri ke halaman mengikut keperluan fungsi mereka sendiri. Dan pastikan navigasi konsisten antara halaman yang berbeza. Walau bagaimanapun, disebabkan oleh had saiz skrin telefon mudah alih, navigasi halaman program mini hendaklah semudah mungkin Jika ia hanya untuk penyemakan imbas linear umum, adalah disyorkan untuk menggunakan bar navigasi WeChat sahaja.

Pustaka kawalan WeChat menyediakan navigasi tab untuk dipilih oleh pembangun. Bar tab boleh dibetulkan di bahagian atas atau bawah halaman, menjadikannya lebih mudah bagi pengguna untuk bertukar antara halaman tab yang berbeza. Untuk memastikan kawasan yang boleh diklik, item tab tidak boleh melebihi 4 item. Tidak boleh ada lebih daripada satu set tab pada halaman. . Walaupun begitu, apabila memuatkan dan menunggu tidak dapat dielakkan berlaku, maklum balas yang tepat pada masanya perlu diberikan untuk melegakan mood buruk pengguna menunggu.

Reka bentuk halaman permulaan

Permulaan program mini juga merupakan salah satu halaman di mana program mini memaparkan ciri-ciri jenama pada tahap tertentu dalam kandungan WeChat. Halaman ini akan menyerlahkan ciri jenama program mini dan status pemuatan.

Kecuali paparan jenama LOGO pada halaman permulaan, semua elemen lain pada halaman, seperti penunjuk kemajuan pemuatan, disediakan oleh WeChat dan tidak boleh diubah. Tidak perlu pemaju untuk membangunkan.

Kawasan penunjuk drop-down

Semua halaman program mini WeChat akan mempunyai kawasan penunjuk bersatu yang direka oleh WeChat apabila ia ditarik ke bawah. Kawasan paparan jenama terdiri daripada nama jenama dan gesaan program mini WeChat. Tujuannya adalah untuk mengukuhkan jenama dan persepsi produk pengguna terhadap program mini.

Tanda drop-down (skim warna gelap dan terang iOS)

WeChat menyediakan dua set skema warna gelap dan terang Seperti yang ditunjukkan dalam tanda di sini, warna teks tidak boleh disesuaikan untuk memastikan bahawa apabila menyesuaikan warna latar belakang Keterlihatan tanda lungsur turun.

Tanda drop-down (skema warna gelap dan terang Android)

Gesaan lungsur WeChat digunakan untuk memberi pengguna pemilik program mini yang jelas untuk mengelakkan penipuan dan penipuan. Logo di sini menyediakan dua set penyelesaian gelap dan terang Warna teks tidak boleh disesuaikan Pembangun harus memberi perhatian untuk memastikan keterlihatan logo lungsur apabila menyesuaikan warna latar belakang.

Interaksi muat semula halaman (iOS)

Pembangun boleh menyesuaikan halaman yang perlu dimuat semula melalui interaksi lungsur turun WeChat akan menyediakan keupayaan dan gaya standard untuk jenis interaksi ini. Dari segi gaya, warna ikon muat semula dan ikon lungsur telah digabungkan, dan dibahagikan kepada dua set skema gelap dan terang Apabila menggunakannya, pembangun harus memberi perhatian kepada keharmonian dan perpaduan teks pengepala , ikon lungsur turun dan ikon muat semula. Walau bagaimanapun, apabila pengguna membuat interaksi tarik-turun pada halaman jenis ini, animasi pemuatan standard halaman applet WeChat muncul. Pembangun tidak perlu membangunkan gaya mereka sendiri.

Dalam kes di mana pembangun tidak mereka bentuk tab di bahagian atas halaman, jika ditakrifkan bahawa halaman boleh dimuat semula melalui tindakan tarik ke bawah, kawasan paparan jenama program mini gesaan status pemuatan akan muncul di bawah tajuk bar dan di bahagian atas halaman selepas dimuat semula.

Pembangun tidak dapat menentukan kesan pemuatan ini pada masa ini.

Jika pembangun mentakrifkan tab di bahagian atas halaman dan mentakrifkan bahawa halaman kandungan di bawah tab boleh dimuat semula melalui tindakan tarik ke bawah, maka selepas menyegarkan, kawasan paparan jenama program mini gesaan status pemuatan akan muncul di bawah tab atas, dan hanya halaman semasa akan dimuatkan semula Kandungan halaman. Pembangun pada masa ini tidak dapat menentukan sendiri kesan pemuatan ini.

Interaksi muat semula halaman (Android)

adalah sama seperti iOS Dari segi gaya, ikon muat semula dan warna tanda lungsur di bawah Android telah digabungkan dan dibahagikan kepada dua set penyelesaian gelap dan terang. . Pembangun harus memberi perhatian kepada pengepala apabila menggunakannya Perpaduan harmoni teks utama, logo lungsur turun dan ikon muat semula.

WeChat drop-down menandakan kes penggunaan yang salah

Sila elakkan kes penggunaan yang tidak betul berikut untuk memastikan keterlihatan maklumat dan kebolehgunaan halaman.

Navigasi dalam halaman

Pustaka kawalan WeChat menyediakan penyelesaian navigasi tab yang mendalam dan cetek untuk dipilih oleh pembangun. Bar tab perlu dibetulkan di bahagian atas halaman untuk memudahkan pengguna bertukar antara halaman tab yang berbeza. Untuk memastikan kawasan yang boleh diklik, item tab tidak boleh melebihi 4 item. Tidak boleh ada lebih daripada satu set tab pada halaman.

Keadaan bar Tab yang dipilih menjadi lalai kepada 100% warna pepejal, dan keadaan yang tidak dipilih mempunyai 60% warna. Warna keadaan yang dipilih boleh disesuaikan. Dalam pemilihan warna tersuai, pastikan anda mengekalkan kebolehgunaan, keterlihatan dan kebolehkendalian Tab.

Maklum balas pemuatan dalam halaman

Pembangun boleh menyesuaikan gaya pemuatan kandungan halaman dalam program mini. Adalah disyorkan bahawa sama ada ia digunakan secara tempatan atau sepenuhnya, gaya pemuatan tersuai hendaklah sependek yang mungkin, dan animasi mudah harus digunakan untuk memaklumkan pengguna tentang proses pemuatan. Pembangun juga boleh menggunakan gaya pemuatan halaman bersatu yang disediakan oleh WeChat, seperti yang ditunjukkan dalam contoh dalam rajah.

Modal loading

Gaya pemuatan modal akan merangkumi keseluruhan halaman Memandangkan adalah mustahil untuk memberitahu dengan jelas lokasi pemuatan atau kandungan, ia boleh menyebabkan kebimbangan pengguna, jadi ia harus digunakan dengan berhati-hati. Jangan gunakan modal kecuali untuk operasi global tertentu. . Contohnya:

Nota tentang memuatkan maklum balas

Jika masa pemuatan adalah lama, operasi pembatalan perlu disediakan dan bar kemajuan hendaklah digunakan untuk memaparkan kemajuan pemuatan.

Semasa proses pemuatan, kesan animasi harus dikekalkan tanpa kesan animasi boleh memberi ilusi kepada orang ramai bahawa antara muka tersekat.

Jangan gunakan lebih daripada 1 animasi pemuatan pada halaman yang sama.

Maklum balas hasil
• Selain memberikan maklum balas tepat pada masanya sementara pengguna menunggu, maklum balas yang jelas juga diperlukan mengenai hasil operasi. Bergantung pada situasi sebenar, gaya maklum balas hasil yang berbeza boleh dipilih. Untuk operasi setempat pada halaman, maklum balas langsung boleh diberikan dalam kawasan operasi Untuk hasil operasi peringkat halaman, roti bakar, tetingkap timbul atau halaman hasil boleh digunakan untuk memaparkannya.
Maklum balas hasil operasi separa pada halaman

Untuk operasi separa pada halaman, maklum balas langsung boleh diberikan di kawasan operasi, contohnya, seperti yang ditunjukkan di bawah sebelum dan selepas mengklik pada kawalan berbilang pilih. Untuk kawalan biasa, Pusat Reka Bentuk WeChat telah menyediakan perpustakaan kawalan dan pustaka kawalan WeUI, di mana kawalan telah direka bentuk dengan maklum balas operasi yang lengkap.

Hasil operasi global pada halaman - roti bakar Antaranya, roti bakar sesuai untuk gesaan kejayaan ringan Ia akan hilang secara automatik selepas 1.5 saat dan tidak mengganggu proses topik yang tidak perlu menekankan peringatan Operasi. Sila ambil perhatian bahawa borang roti bakar tidak digunakan pada sebarang peringatan ralat.

Hasil operasi global pada halaman - kotak timbul

Untuk status hasil operasi yang perlu diketahui dengan jelas kepada pengguna, kotak timbul boleh digunakan untuk menggesa pengguna, dan boleh disertakan dengan panduan operasi langkah seterusnya.

Halaman keputusan operasi global - halaman keputusan

Jika hasil operasi adalah penghujung proses semasa, anda boleh menggunakan halaman hasil operasi untuk memberikan maklum balas. Kaedah ini adalah cara yang paling kuat dan jelas untuk memaklumkan kepada pengguna bahawa operasi telah selesai, dan boleh memberi panduan untuk langkah seterusnya berdasarkan situasi sebenar.

3. Keabnormalan boleh dikawal dan ada jalan keluar

Apabila mereka bentuk sebarang tugas dan proses, keadaan dan proses yang tidak normal sering diabaikan, dan senario tidak normal ini selalunya apabila pengguna paling kecewa dan memerlukan bantuan , perhatian khusus perlu diberikan kepada reka bentuk keadaan tidak normal Apabila pengecualian berlaku, pengguna mesti diberikan gesaan status yang diperlukan dan dimaklumkan tentang penyelesaian supaya ada jalan keluar.

Adalah perlu untuk mengelakkan situasi di mana pengguna terperangkap pada halaman tertentu dalam keadaan tidak normal dan tidak mempunyai tempat untuk pergi. Tetingkap timbul dan halaman hasil yang disebut dalam 2.2 boleh digunakan sebagai peringatan status abnormal. Di samping itu, pada halaman borang, terutamanya halaman dengan banyak item borang, item ralat harus ditunjukkan dengan jelas supaya pengguna boleh mengubah suainya.

Status pengecualian - ralat borang

Borang melaporkan ralat, memaklumkan punca ralat di bahagian atas borang dan mengenal pasti medan ralat untuk menggesa pengguna mengubah suainya.