Keuntungan:
- Keupayaan untuk menghasilkan kod antara muka yang mantap untuk Jetpack Compose dan SwiftUI mengikut urutan tujuan, komponen, empat keadaan (memuatkan/kosong/ralat/penuh), sistem reka bentuk dan kebolehcapaian
- Keupayaan untuk menghasilkan antara muka yang terbuka kepada semua pengguna dengan mentakrifkan kebolehcapaian dari awal, dengan pelabelan yang betul, kontras yang mencukupi dan sentuhan yang sesuai.
- Keupayaan untuk mencipta antara muka sedia tekal, berbilang bahasa dan tema terang/gelap dengan membaca warna dan ruang daripada tema pusat
Kejayaan apl mudah alih sebahagian besarnya ditentukan oleh antara muka penggunanya (UI — skrin yang dilihat dan disentuh pengguna) dan pengalaman pengguna (UX — betapa lancar dan menyeronokkan untuk digunakan). Pengguna tidak melihat kod buruk, tetapi merasakan antara muka yang buruk pada saat pertama. AI memainkan dua peranan yang kuat dalam pembangunan antara muka: dalam satu pihak, ia menjana idea reka bentuk, aliran dan teks (penulisan UX); Sebaliknya, ia secara langsung menukar reka bentuk ini kepada kod antara muka yang berfungsi. Dalam unit ini, kita akan belajar cara menghasilkan antara muka yang pantas, boleh diakses dan konsisten dengan AI, memfokuskan pada alatan antara muka deklaratif moden Jetpack Compose (Android) dan SwiftUI (iOS). "Deklaratif" bermaksud bahawa bukannya menerangkan langkah demi langkah cara melukis skrin, anda menerangkan "beginilah rupa skrin dalam situasi ini"; Alat melakukan selebihnya.
Daripada reka bentuk kepada kod: susunan yang betul
Memberitahu AI untuk "membuat skrin yang cantik" adalah samar-samar kerana "cantik" tidak boleh diukur. Penjanaan antara muka yang baik mengikut susunan ini:
- Tujuan dan kandungan. Apakah yang dilakukan oleh skrin, maklumat apa yang ditunjukkan, apakah yang akan dilakukan oleh pengguna?
- Senarai komponen. Bahagian seperti tajuk, senarai, butang, medan borang.
- Situasi. Memuatkan, kosong (tiada data), ralat, penuh — empat keadaan skrin asas.
- Sistem reka bentuk. Warna, tipografi, peraturan jarak; secara amnya mematuhi Garis Panduan Antara Muka Manusia Bahan 3 (Android) atau iOS.
- Kebolehcapaian. Label pembaca skrin, kontras yang mencukupi, saiz sasaran sentuh.
- Kod. Setelah mengatakan semua ini, penjanaan Composable atau SwiftUI View.
Langkah yang paling kerap dilangkau ialah langkah ketiga. Pemaju hanya mempertimbangkan keadaan "penuh"; sedangkan dalam aplikasi sebenar pengguna kebanyakannya menghadapi situasi "pemuatan" dan "ralat". Mencetak keempat-empat negeri ke AI adalah rahsia antara muka yang teguh.
Petua: Tambahkan "jana pemuatan, kosong, ralat dan penuh secara berasingan" pada penghujung gesaan. Ayat tunggal ini menjadikan antara muka anda bersedia untuk dunia nyata dan mengurangkan bilangan ralat dalam fasa QA (ujian kualiti) dengan ketara.
Kebolehcapaian tidak boleh dirunding
Kebolehcapaian — keupayaan untuk menggunakan aplikasi oleh pengguna yang kurang upaya penglihatan, pendengaran atau motor — adalah tanggungjawab etika dan harapan kedai dan undang-undang. AI menghasilkan kod yang boleh diakses jika dikehendaki; Mengembalikan antara muka tanpa tag, kontras rendah jika tidak dikehendaki. Tiga peraturan praktikal: berikan setiap elemen interaktif label yang bermakna untuk pembaca skrin (contentDescription / accessibilityLabel), kontras warna yang mencukupi antara teks dan latar belakang (sekurang-kurangnya nisbah 4.5:1), dan sasaran sentuhan sekurang-kurangnya 48x48 dp/44x44 pt. Tanya AI perkara ini secara eksplisit.
Awas: AI juga boleh menambah tag kebolehaksesan yang panjang pada ikon hiasan; Ini mengatasi pengguna pembaca skrin dengan perbualan yang tidak perlu. Unsur hiasan semata-mata harus "disembunyikan daripada kebolehaksesan" (dibenarkan untuk dilangkau oleh pembaca skrin). Semak label yang dihasilkan: biarkan yang bermakna bercakap, biarkan hiasan tetap senyap.
Ketekalan: sistem reka bentuk dan tema
Aplikasi profesional tidak menggunakan warna rawak dan jarak; mengikut sistem reka bentuk (set standard warna, fon, jarak dan komponen). Jika anda memberikan AI nilai tema anda (warna utama, warna sekunder, jejari sudut, skala tipografi), semua skrin akan keluar secara konsisten. Jika tidak, setiap skrin akan menggunakan warna biru yang berbeza dan apl akan kelihatan bersepah. Cara paling berkesan adalah dengan terlebih dahulu meminta AI menjana fail token tema/reka bentuk, kemudian mengikat semua skrin pada tema tersebut.
Subjek
pendekatan yang lemah
Pendekatan yang kuat
warna
Kod warna secara manual setiap skrin
Tema pusat, skrin dibaca daripada tema
situasi
Hanya skrin "penuh".
Memuatkan/kosong/ralat/penuh empat keadaan
kebolehcapaian
Ditambah kemudian
Ia ditakrifkan dalam tuntutan dari awal
teks
tertanam dalam kod
Sumber berasingan, sedia berbilang bahasa
tiga kes mini
Kes 1 — Kes kosong disimpan. Pasukan aplikasi berita mempunyai keadaan skrin individu cetakan AI. Terima kasih kepada skrin "status melahu" ("Tiada berita disimpan lagi"), 70% peserta dalam ujian pengguna tidak meninggalkan apl pada skrin kosong; Dalam versi sebelumnya, skrin kosong kekal putih dan pengguna menyangka ia "pecah" dan dibiarkan. Satu salinan kecil meningkatkan kadar pengekalan.
Kes 2 — Penolakan kontras. Satu pasukan memohon pada App Store dengan skrin dengan teks dalam kelabu muda, warna jenama. Apple mengeluarkan amaran atas alasan kebolehaksesan kerana kontras yang rendah. Apabila AI dimaklumkan untuk "meningkatkan kontras latar belakang teks melebihi 4.5:1", warna menjadi lebih gelap dan masalah telah diselesaikan. Jika ia telah diminta dari awal, tidak akan ada kelewatan.
Kes 3 — Bunyi label hiasan. Penguji cacat penglihatan melaporkan bahawa setiap ikon perhiasan (“garisan,” “titik,” “bayang-bayang”) dibaca dengan kuat pada skrin yang dijana AI, menjadikan skrin tidak boleh digunakan. Pengalaman pembaca skrin menjadi lancar apabila elemen hiasan disembunyikan daripada kebolehaksesan. Pelajaran: kebolehaksesan bermaksud "teg yang betul", bukan "teg yang terlalu banyak".
Gesaan lemah / Gesaan kuat
Gesaan lemah: "Reka bentuk skrin profil."
Gesaan berkuasa: "Jana skrin profil pengguna untuk iOS/SwiftUI. Kandungan: avatar, nama, e-mel, butang 'Edit profil', senarai tetapan. Status: memuatkan (rangka), ralat (butang cuba semula), penuh. Reka bentuk: Bukan Bahan, mematuhi iOS HIG; warna sistem, Jenis Dinamik. Kebolehcapaian: kebolehcapaianLabel untuk setiap elemen, sentuh ikon min4 yang disembunyikan, sasarkan nilai min4 yang disembunyikan, jangan letakkan ikon dekoratif disembunyikan. benamkan kod warna pada skrin Mula-mula lukis pokok komponen, kemudian eksport kod itu.
Templat yang boleh disalin
Templat penjanaan skrin: "Jana [nama skrin] untuk [platform/alat]. Kandungan: [elemen]. Tindakan pengguna: [tindakan]. Hasilkan empat keadaan secara berasingan: pemuatan, kosong, ralat, penuh. Sistem reka bentuk: [Bahan 3 / iOS HIG], baca daripada token tema. Kebolehcapaian: label, kontras >=4.5:1, standard sasaran sentuh."
Templat sistem tema/reka bentuk:"Hasilkan definisi tema pusat untuk apl saya ([Karang Tema /struktur token reka bentuk dalam SwiftUI]):- Warna utama [hex], sekunder [hex], warna ralat, warna permukaan- Skala tipografi (tajuk, badan, penerangan)- Skala jarak (4,8,16,24)- Standard jejari sudutTambah sokongan tema terang dan gelap."
Templat audit kebolehcapaian:"Semak kod skrin ini untuk kebolehaksesan:1) Adakah terdapat sebarang elemen interaktif yang tidak berteg?2) Adakah nisbah kontras mencukupi?3) Adakah sasaran sentuh cukup besar?4) Adakah elemen hiasan tersembunyi daripada pembaca skrin?Cadangkan pembetulan untuk setiap isu. [kod]"
Templat reka bentuk kepada kod: "Saya menerangkan reka bentuk berikut: [huraian skrin atau tangkapan skrin]. Terjemahkannya ke dalam kod [Karang/SwiftUI]. Pastikan jarak dan penjajaran benar kepada reka bentuk, tetapi tambahkan keempat-empat keadaan."
Kesilapan biasa
- Hanya memikirkan keadaan penuh. Selalunya pengguna sebenar melihat skrin pemuatan/ralat.
- Membenamkan warna dan ruang dalam kod. Jika tema tidak berpusat, konsistensi hilang dan penyelenggaraan menjadi sukar.
- Meninggalkan kebolehaksesan untuk yang terakhir. Menambahnya kemudian adalah mahal; Ia adalah bebas kos jika diminta dari awal.
- Pelabelan berlebihan. Membaca unsur hiasan juga mengganggu pengalaman pembaca skrin.
- Membenamkan teks dalam kod. Apabila sokongan berbilang bahasa diperlukan, adalah perlu untuk menukar setiap skrin secara manual; Simpan teks berasingan.
- Mengharapkan salinan tepat daripada tangkapan skrin. Reka bentuk AI menghasilkan lebih kurang. Ketepatan piksel ditetapkan secara manual.
Secara ringkasnya
AI berkuasa dalam pengeluaran antara muka, tetapi ia memerlukan bimbingan. Susunan yang betul: tujuan, komponen, empat keadaan (memuat/kosong/ralat/penuh), sistem reka bentuk, kebolehcapaian, kemudian kod. Kebolehaksesan tidak boleh dirunding dan bermaksud "label yang betul", bukan "label yang terlalu banyak". Untuk ketekalan, baca warna dan jarak daripada tema tengah, jangan benamkannya dalam kod. Kemahuan yang kuat mentakrifkan semua ini dari awal; Oleh itu, antara muka sedia untuk dunia sebenar, kelulusan kedai dan semua pengguna.
Tugasan permohonan
Menggunakan "Templat penjanaan skrin" untuk skrin tetapan, minta AI untuk Kod Karang atau SwiftUI dan minta semua empat keadaan. Kemudian pastikan kod yang sama disemak dengan "Templat semakan kebolehaksesan". Cari dan betulkan sekurang-kurangnya satu peningkatan kebolehaksesan (label tiada, kontras rendah atau sasaran sentuhan kecil) dan perhatikan status (pemuatan/kosong/ralat) yang anda fikir akan muncul paling kerap dalam penggunaan sebenar.
senarai semak
- [ ] Saya membuat tujuan dan komponen paparan jelas dalam gesaan
- [ ] Saya mempunyai empat keadaan (memuat/kosong/ralat/penuh) dijana secara berasingan
- [ ] Saya membuat warna dan ruang dibaca daripada tema pusat, saya tidak membenamkannya dalam kod.
- [ ] Saya mahukan label kebolehaksesan dan kontras dari awal
- [ ] Saya mengesahkan bahawa unsur hiasan disembunyikan daripada pembaca skrin
- [ ] Saya menyimpan teks secara berasingan, sedia untuk berbilang bahasa