SwiftUI Seri 11｜Mode gelap SwiftUI, font dinamis, dan adaptasi multi-ukuran

Banyak halaman yang tampak normal pada mesin pengembangan pada awalnya:

-Warnanya oke -Ukuran fontnya juga sesuai

• Tata letaknya cukup halus

Tapi potong saja menjadi:

• mode gelap
• Font lebih besar
• Layar lebih sempit
• Salinan lebih panjang

Masalahnya akan segera terungkap.

Hal ini menunjukkan bahwa banyak yang disebut “masalah adaptasi” pada dasarnya adalah halaman yang ditulis ke dalam kondisi default sejak awal.

1. Mode gelap, font dinamis, dan layar berbeda semuanya menanyakan hal yang sama: apakah halaman fleksibel terhadap perubahan lingkungan?

Situasi yang umum adalah melihat item adaptasi ini secara terpisah:

• Mode gelap adalah masalah warna
• Font dinamis adalah masalah ukuran font
• Adaptasi layar kecil adalah masalah tata letak

Tentu saja, penilaian ini benar, tetapi dari tingkat yang lebih tinggi, penilaian tersebut pada dasarnya menguji hal yang sama:

Apakah halaman hanya dibuat di satu “lingkungan default”?

Jika suatu halaman hanya terlihat masuk akal dalam ukuran font default, mode terang, dan ukuran standar, masalahnya sebenarnya adalah kurangnya fleksibilitas.

2. Kegagalan adaptasi yang paling umum adalah terlalu banyak asumsi visual yang dikodekan secara keras.

Misalnya:

• Teks selalu satu baris
• Memperbaiki tinggi kartu
• Jarak antara ikon dan copywriting selalu dapat dijaga
• Warna tertentu cukup jelas pada latar belakang apa pun

Semua asumsi ini mungkin benar dalam satu lingkungan, namun begitu lingkungan berubah, semuanya akan runtuh secara bersamaan.

Jadi yang paling penting dalam adaptasi adalah mengurangi asumsi rapuh ini.

3. Masalah paling umum yang ditimbulkan oleh font dinamis adalah tingkat tata letak yang tidak stabil.

Ketika topik font dinamis diangkat, reaksi pertama adalah:

• Jika ukuran font terlalu besar, apakah akan melebihi

Hal ini tentu saja merupakan sebuah masalah, namun risiko yang lebih dalam adalah:

• Struktur tertentu pada dasarnya hanya valid dengan panjang salinan yang tetap.
• Beberapa kartu secara inheren dipertahankan dengan ketinggian yang dikodekan secara keras
• Tidak ada fleksibilitas dalam beberapa hubungan gambar-teks.

Jadi font dinamis sedang menguji apakah tata letaknya hanya valid pada “ukuran ini saja”.

4. Kesulitan sebenarnya dari mode gelap adalah apakah hubungan hierarki dan kontras akan menjadi tidak seimbang.

Banyak halaman mengalami masalah setelah beralih ke warna gelap:

• Hubungan antara latar belakang dan hierarki teks tidak jelas
• Warna aksen terlihat bagus dalam mode terang, namun kasar dalam mode gelap
• Informasi sekunder memiliki kontras yang terlalu rendah dalam warna gelap

Dengan kata lain, mode gelap menguji apakah hierarki visual cukup jelas.

5. Adaptasi ke layar dengan ukuran berbeda pada dasarnya adalah tentang apakah logika alokasi ruang cukup stabil

Beberapa halaman terlihat nyaman di layar besar, namun mulai terlihat seperti ini di layar kecil:

• peras
• istirahat
• Semuanya kacau setelah jeda baris

Hal ini menunjukkan bahwa masalahnya biasanya bukan pada layar kecil itu sendiri, tetapi pada logika alokasi ruang yang tidak stabil. Misalnya:

• Daerah manakah yang harus diperluas secara elastis? -Area mana yang bisa diberi garis?
• Konten mana yang memiliki prioritas lebih tinggi

Saya tidak memikirkan hal ini dengan jelas pada awalnya, tetapi ini akan terungkap setelah peralatan berganti.

6. Kesimpulan: Kemampuan beradaptasi sebenarnya pada dasarnya adalah fleksibilitas halaman terhadap perubahan lingkungan.

Singkatnya, saya akan mengatakan:

Halaman SwiftUI beradaptasi dengan mode gelap, font dinamis, dan layar dengan ukuran berbeda. Yang sebenarnya perlu dilakukan adalah tidak mengunci halaman di lingkungan default sejak awal.

Jika halamannya fleksibel, adaptasinya akan jauh lebih alami; Ketika tidak ada elastisitas, bercak-bercak selanjutnya biasanya menjadi semakin banyak.