Anda memutar ponsel untuk menguji layar, dan tata letaknya beradaptasi dengan baik atau hancur. Teks mengalir ulang, tombol melompat, modal tiba-tiba menutup area yang salah, atau pemutar video berperilaku tepat seperti yang diharapkan. Saat itu kecil adalah saat orientasi potret berhenti menjadi istilah desain dan menjadi keputusan produk.
Jika Anda sedang membangun aplikasi mobile, Anda membutuhkan jawaban yang jelas untuk apa itu orientasi potret. Bukan hanya definisi kelas, tetapi versi developer. Bagaimana hal ini mempengaruhi tata letak, kapan harus mendukung rotasi, kapan harus mengunci, dan bagaimana mengatasi hal ini dalam aplikasi web, aplikasi native, dan Capacitor proyek tanpa menciptakan UX yang rapuh.
Daftar Isi
- context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman blog/[slug].astro. Kunci pesan `table_of_contents` (Daftar Isi).
- Di mana para developer junior sering kali bingung
- Penggunaan Umum di Berbagai Media
- Mengatasi Orientasi di Web
- Mengelola Orientasi di Aplikasi Mobile
- Praktik Terbaik UX untuk Orientasi Layar
Mengerti Orientasi Potret
Pengguna pertama kali menyadari orientasi ketika layar berputar. Pengembang menyadarinya ketika putaran itu mengganggu antarmuka mereka.
Orientasi potret berarti frame lebih tinggi daripada lebarnya . Itu adalah konsep inti. Konsep itu berasal dari seni visual, di mana potret wajah dan bagian atas tubuh seseorang biasanya diframe secara vertikal. Konsep yang sama kemudian masuk ke dalam desain halaman, fotografi, dan antarmuka digital. Referensi yang baik untuk sejarah yang lebih luas adalah halaman ringkasan orientasi WikipediaUntuk pembangun, bagian yang penting adalah bahwa orientasi potret tidak terkait dengan ukuran layar satu, perangkat satu, atau format file satu. Itu adalah aturan tentang bentuk. Jika tinggi lebih besar dari lebar, Anda berada di orientasi potret. Mengapa itu penting dalam pekerjaan produk.
Orientasi potret menjadi default yang praktis untuk mobile karena penggunaan tegak sesuai dengan cara orang alami memegang ponsel. Hal itu mempengaruhi scrolling, jangkauan jari, aliran membaca, desain formulir, dan penempatan navigasi.
Orientasi potret
Orientasi potret berarti frame lebih tinggi daripada lebarnya.
A feed, artikel, pengaturan layar, atau percakapan biasanya lebih mudah dibaca dalam frame vertikal. Itu adalah salah satu alasan pilihan orientasi terkait langsung dengan keputusan pengalaman pengguna aplikasi mobile, bukan hanya gaya visual.
Aturan praktis: Tentukan potret sebagai konteks tata letak, bukan hanya posisi perangkat.
Di mana para pengembang junior sering kali bingung
Kebingungan biasanya adalah menggabungkan orientasi dengan resolusi atau contextmereka terkait, tapi bukan hal yang sama.
- Orientasi berarti sisi mana yang lebih panjang.
- Resolusi berarti berapa banyak piksel yang ada di setiap dimensi.
- Aspek rasio menjelaskan hubungan antara lebar dan tinggi.
Tablet dalam orientasi potret dan ponsel dalam orientasi potret dapat memiliki dimensi yang sangat berbeda, tapi masih memiliki orientasi yang sama. Itulah mengapa logika UI responsif harus bertanya, 'Apakah tinggi lebih besar dari lebar?' sebelum bertanya sesuatu yang lebih spesifik.
Potret vs Lahan: Perbandingan Fundamental
Cara sederhana untuk memahami ini adalah melalui komposisi. Lukisan potret fokus perhatian pada orang atau subjek yang tinggi. Lukisan horizontal menangkap lebar, konteks, dan ruang sekitar. UI bekerja sama seperti itu.
Dalam fotografi dan desain UI, orientasi potret adalah persegi panjang di mana lebar melebihi panjangsehingga sisi-sisi yang lebih panjang adalah vertikal. Itu sebaliknya dari orientasi horizontal. entry kamus SLR Lounge menggambarkan definisi teknis tersebut dan mengapa bentuk tersebut cocok untuk subjek yang tinggi dan struktur vertikal.
Perbedaan dalam satu tabel
| Orientasi | Bentuk | Terbaik untuk | context: Halaman/area: Capgo Builder / produk halaman pembangunan asli cloud. Peran: Label UI pendek atau item navigasi. Kunci pesan `native_build_builder_compare_fit_feature` (Native Build Builder Compare Fit Feature). |
|---|---|---|---|
| Efek biasa | Potret | Lebih tinggi daripada lebarnya | Menarik perhatian secara vertikal |
| Lanskap | Lebih lebar daripada tinggi | Video, peta, dashboard, scene yang luas | Menggambarkan lebih banyak konteks horizontal |
Terdengar dasar, tapi itu berguna ketika Anda membuat kompromi dalam ulasan produk.
Mengapa perubahan ini penting
Biasanya, potret menyempitkan perhatian. Ini mengurangi konten sampingan dan mendorong aliran dari atas ke bawah. Itulah mengapa feed sosial, halaman artikel, langkah-langkah onboarding, dan antarmuka obrolan sering terasa lebih bersih dalam potret.
Orientasi horizontal melakukan yang sebaliknya. Ini mengekspos lebih banyak lebar, yang membantu dengan tampilan split, timeline, galeri, pemutaran media, permukaan data yang berat, dan tampilan immersive. Jika tata letak Anda memerlukan perbandingan samping-samping, format horizontal ini sering memberikan ruang yang lebih lega.
Potret biasanya tentang fokus. Lanskap biasanya tentang konteks.
Mengapa perubahan ini penting bagi pengembang
Kesalahan terbesar adalah menganggap format yang lebih lebar sebagai versi yang dipanjangkan dari potret. Tidak. Hierarki informasi sering harus berubah.
Contoh seperti ini:
- Dalam orientasi potretsuatu dashboard mungkin mengatur kartu ke dalam satu kolom.
- Dalam orientasi yang lebih luasdashboard yang sama mungkin berpindah ke beberapa kolom dan menampilkan filter atau panel samping.
- Dalam orientasi potretsuatu formulir pembayaran mungkin memprioritaskan target sentuh besar dan aliran yang jelas.
- Dalam orientasi yang lebih luaslayar yang sama dapat terasa tidak nyaman jika bidang-bidang menjadi terlalu kompres vertikal.
Pengembang yang bekerja pada layout mobile yang imersif juga perlu memikirkan pengelolaan tepi, area yang aman, dan perilaku layar penuh. Jika Anda menyesuaikan detail-detail tersebut, konfigurasi layar tanpa tepi Capacitor adalah bagian dari percakapan yang sama karena perubahan orientasi mempengaruhi cara pengguna memandang ruang yang tersedia.
Kasus Penggunaan Umum di Berbagai Media
Orientasi potret muncul di tempat-tempat lain selain layar ponsel. Hal ini penting karena konsep ini tidak dimulai di perangkat lunak, dan tidak hanya milik perangkat lunak.
Fotografi dan cetak
Contoh foto diri profesional adalah contoh yang jelas. Frame vertikal yang sesuai dengan wajah dan tubuh seseorang lebih baik daripada frame lebar.
Logika yang sama berlaku untuk foto mode, sampul buku, poster, dan sampul majalah.
Cetak juga bergantung pada potret ketika pengalaman membaca harus bergerak dari atas ke bawah dalam kolom yang sempit. Bentuk ini membantu mata bergerak secara alami ke bawah halaman.
Surat dan komunikasi sehari-hari
Banyak laporan, resume, surat, dan dokumen internal dirancang dalam potret. Hal ini bukan karena potret selalu lebih baik. Hal ini karena halaman vertikal bekerja baik untuk membaca urutan paragraf, judul, daftar, dan tanda tangan.
Jika Anda pernah mengekspor PDF dan melihat bahwa tabel lebar suddenly menjadi tidak dapat dibaca, Anda telah melihat batasan potret juga. Beberapa konten lebih baik ditampilkan dalam format horizontal. Kunci adalah mencocokkan frame dengan struktur konten.
Produk dan alur aplikasi ponsel
Di situasi ini, potret menjadi model mental default bagi banyak tim.
- Aplikasi Chat: Pesan-pesan tumpuk secara vertikal.
- Aplikasi Sosial: Postingan, komentar, dan reels dikonsumsi dalam aliran yang tegak.
- Aplikasi Retail: Hasil pencarian dan daftar produk dapat di-scroll ke bawah.
- Aplikasi Perbankan: Saldo, transaksi, dan alur konfirmasi biasanya disusun dalam bagian vertikal.
Polanya tidak semata-mata kebetulan. Portrait mendukung penggunaan satu tangan, scrolling jari, dan penyelesaian tugas linear.
Banyak UI mobile terasa intuitif karena interface mengasumsikan perangkat tegak sebelum mengasumsikan apa pun lainnya.
Itu tidak berarti setiap layar harus tetap portrait. Pemutar media, peta, grafik besar, dan alur kerja kamera seringkali mendapat manfaat dari penataan yang lebih luas. Tapi untuk alur tugas sehari-hari, portrait biasanya tempat dimana pengguna memulai.
Mengatasi Orientasi di Web
A bug web umum terlihat kecil pada awalnya. Aplikasi Anda membaca dengan jelas dalam viewport tegak, kemudian pengguna memutar perangkat dan grafik meluap, sidebar muncul pada titik putus yang salah, atau keyboard menutup tombol submit. Orientasi di web sebenarnya tentang keadaan. Bentuk viewport berubah, dan UI Anda harus bereaksi dalam cara yang dapat diprediksi.
Untuk pengembang, itu berarti memisahkan dua tugas. CSS mengatasi perubahan tata letak. JavaScript mengatasi perubahan perilaku. Jika Anda mengemas proyek yang sama untuk mobile kemudian, lapisan web ini masih penting. Menggunakan Capacitor untuk mengubah aplikasi web menjadi aplikasi mobile tidak menghilangkan kebutuhan untuk mengatasi orientasi web dengan baik. Ini membuat fondasi lebih penting.
Platform memberikan Anda dua alat utama. Screen Orientation API mengungkapkan jenis orientasi dan peristiwa perubahan, dan Web App Manifest memungkinkan aplikasi yang diinstal menyatakan mode tegak yang diinginkan seperti portrait, portrait-primaryatau portrait-secondary. MDN mendokumentasikan nilai manifest tersebut dalam referensi orientasi Web App Manifestnya Pakai CSS ketika tata letak harus menyesuaikan .
Mulai dengan CSS. Ini adalah cara termurah dan paling dapat diandalkan untuk bereaksi ketika lebar dan tinggi berganti peran.
Ini bekerja seperti peningkatan progresif untuk bentuk layar. Mulai dengan tata letak tegak yang sempit sebagai default. Kemudian tambahkan ruang untuk UI sekunder hanya ketika viewport menjadi lebih lebar.
/* Default portrait-friendly layout */
.page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar {
display: none;
}
@media (orientation: landscape) {
.page {
grid-template-columns: 280px 1fr;
}
.sidebar {
display: block;
}
}Beberapa praktik ini dapat menghemat waktu kemudian:
orientation
- Mulai dari mode utama Anda: Jika orang-orang biasanya menggunakan aplikasi secara tegak, buatlah itu sebagai tata letak dasar.
- Hindari ketinggian tetap: Mengganti orientasi perangkat dapat menyusut ruang vertikal yang dapat digunakan dengan cepat, terutama ketika antarmuka browser atau keyboard virtual muncul.
- Uji interaksi nyata: Bentuk formulir, header yang menempel, dan sheet bawah sering gagal selama rotasi, bukan dalam sketsa statis.
Pakai JavaScript ketika perilaku harus bereaksi
Pakai CSS ketika hanya perlu mengatur posisi box.
Pakai JavaScript ketika orientasi berubah mempengaruhi UI yang berisi data.
function logOrientation() {
const type = screen.orientation?.type;
console.log('Current orientation:', type);
}
logOrientation();
screen.orientation?.addEventListener('change', () => {
logOrientation();
const isPortrait = window.innerHeight > window.innerWidth;
if (isPortrait) {
document.body.classList.remove('wide-mode');
} else {
document.body.classList.add('wide-mode');
}
});Polanya berguna untuk kanvas, kontrol media, peta, dan kulit navigasi khusus. Model mentalnya sederhana. Jika rotasi mengubah presentasi data atau logika interaksi, JavaScript harus bereaksi. Jika rotasi hanya mengubah jarak atau posisi, CSS yang harus mengaturnya.
Aturan praktis ini membantu tim junior menghindari banyak kompleksitas. Jangan gunakan JavaScript untuk memaksa keputusan tata letak yang sudah diatasi dengan baik oleh CSS.
Setel orientasi yang diinginkan untuk aplikasi PWA
Jika aplikasi PWA Anda dirancang utuh untuk penggunaan tegak, deklarasikan itu dalam manifest.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}Hal ini adalah preferensi, bukan pengganti untuk desain responsif. Ini membantu browser memahami bagaimana aplikasi yang diinstal harus dibuka dan berperilaku dalam konteks yang didukung.
Anda juga dapat meminta penguncian orientasi pada waktu runtime ketika browser memungkinkannya:
async function lockPortrait() {
try {
await screen.orientation.lock('portrait');
console.log('Orientation locked');
} catch (err) {
console.log('Lock failed:', err);
}
}Pakailah dengan hati-hati. Aturan yang baik adalah mengunci hanya ketika rotasi akan mengganggu tugas itu sendiri, seperti aliran tangkapan yang diarahkan atau layar dengan persyaratan penyesuaian fisik yang ketat. Pada kebanyakan kasus lain, menyesuaikan antarmuka adalah pilihan yang lebih baik karena menghormati baik perangkat dan pengguna.
Pengaturan Orientasi pada Aplikasi Mobile
Aplikasi mobile dapat melakukan lebih dari tab browser. Mereka dapat mengumumkan arah layar default pada tingkat aplikasi, kemudian mengubah perilaku untuk layar tunggal ketika tugas meminta.
Model mental yang baik membantu di sini. Pengaturan aplikasi luas adalah kebijakan default. Pengaturan layar code adalah lapisan kecuali. Gunakan kebijakan untuk tujuan luas, dan gunakan kecuali hanya di mana perangkat yang berputar akan mengganggu pekerjaan yang pengguna sedang mencoba selesaikan.
Pengendalian Platform Asli
Pada Android, orientasi sering kali ditetapkan dalam AndroidManifest.xml untuk suatu kegiatan:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Fungsi ini seperti flag konfigurasi tingkat atas. Ini sederhana, prediktif, dan mudah untuk diterapkan di seluruh kegiatan. Namun, ada trade-off yaitu ruang lingkup. Jika hanya satu layar yang memerlukan mode tegak, menerapkan aturan tersebut secara global biasanya terlalu kasar.
Di iOS, orientasi yang didukung ditetapkan di Xcode melalui pengaturan target dan metadata aplikasi. Anda dapat menentukan apa yang aplikasi ini secara umum memungkinkan, kemudian memperhalus perilaku di pengontrol tampilan tertentu ketika layar memiliki persyaratan yang lebih ketat.
Pembedaan ini penting bagi tim yang mengembangkan aplikasi multi-platform. Konfigurasi native menjawab, “Apa yang aplikasi ini secara umum harus memungkinkan?” Sementara code menjawab, “Apa yang layar ini harus lakukan sekarang?”
Kontrol programatis di aplikasi Capacitor
Jika Anda mengembangkan aplikasi dengan Capacitor, kontrol dinamis biasanya harus dimasukkan ke code, dekat dengan jalur atau tampilan yang memerlukannya. Layar masuk mungkin lebih mudah digunakan dalam mode potret. Layar media atau alur kamera mungkin perlu memungkinkan rotasi berdasarkan cara perangkat dipegang.
Plugin tersebut menjaga logika tersebut tetap dapat dibaca dan menghindari pipa native yang kustom. Plugin orientasi layar __CAPGO_KEEP_0__ untuk aplikasi __CAPGO_KEEP_1__ Capacitor screen orientation plugin for Capacitor apps Polanya sederhana. Terapkan pembatasan ketika layar menjadi aktif. Hilangkan pembatasan tersebut ketika layar tidak lagi aktif. Di aplikasi berbasis router, sering kali berarti mengikat perubahan orientasi ke hook siklus halaman daripada menyebarkan panggilan ke komponen acak.
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
async function lockLoginScreen() {
await ScreenOrientation.lock({ orientation: 'portrait' });
}
async function unlockForMedia() {
await ScreenOrientation.unlock();
}
async function checkCurrentOrientation() {
const result = await ScreenOrientation.orientation();
console.log(result);
}untuk suatu kegiatan:
Memilih pembatasan layar yang spesifik dengan hati-hati
Pilih mode tegak tetap ketika rotasi akan mengganggu input, penataan, atau fokus pengguna.
Contoh umum termasuk:
- Layar autentikasi: Input tetap stabil saat pengguna mengetik.
- Layar pembayaran dan konfirmasi: Perubahan layout lebih sedikit selama tugas yang memerlukan perhatian tinggi.
- Layar kiosk atau alur panduan: Antarmuka perlu satu presentasi konsisten.
Biarkan perangkat berputar bebas ketika lebar tambahan atau pegangan yang berbeda jelas membantu tugas.
Contoh umum termasuk pemutaran media, peta, permainan, tampilan kamera, dan layar data padat.
Aturan berguna untuk tim junior adalah sederhana. Jika mengubah arah perangkat hanya akan mengubah jarak, biarkan sistem penataan layar mengaturnya. Jika mengubah arah perangkat akan mengubah cara tugas berjalan, maka orientasi layar code mungkin dapat dibenarkan.
Capgo disebutkan di sini untuk alasan praktis. Dalam Capacitor proyek, pengendalian orientasi adalah salah satu fitur platform yang dimulai sebagai detail UI kecil dan menjadi perilaku aplikasi. Tatalah perilaku ini seperti perilaku. Jaga default yang fleksibel, terapkan pembatasan dengan selektif, dan hapusnya segera setelah layar tidak memerlukannya lagi.
Praktik Terbaik UX untuk Orientasi Layar
Pengendalian orientasi adalah keputusan UX terlebih dahulu dan keputusan teknis kedua. code biasanya tidak sulit. Bagian yang sulit adalah memilih perilaku yang terasa alami.
Daftar Periksa Singkat membantu:
- Desain untuk konteks dominan: jika pengguna sebagian besar memulai dalam posisi tegak, buatlah versi potret yang kuat dari antarmuka.
- Dukung mode tampilan yang lebih luas jika menambah nilai: jangan blokir rotasi pada layar yang mendapat manfaat dari lebar tambahan.
- Kunci hanya dengan alasan yang jelas: form, checkout, atau alur keamanan mungkin membenarkan hal ini. Layar konten biasanya tidak.
- Simpan keadaan selama rotasi: pengguna tidak boleh kehilangan input, posisi scroll, atau tab yang dipilih.
- Tes kedua orientasi pada perangkat nyata: Simulator tidak dapat menangkap transisi yang tidak nyaman, penumpukan kibor, dan masalah area yang aman.
Untuk keputusan tata letak yang lebih luas, Petunjuk UI dan UX lintas platform untuk aplikasi Capacitor cocok dengan pengujian orientasi karena layar yang sama sering perlu merasa asli di berbagai ukuran perangkat dan konvensi platform.
Pesan utama adalah sederhana. Jika Anda bertanya apa itu orientasi potret, jawabannya bukan hanya "vertikal." Itu adalah aturan framing, keadaan tata letak, dan harapan pengguna. Aplikasi yang baik menanggapinya dengan cara itu.
Jika Anda mengirimkan aplikasi Capacitor dan membutuhkan perilaku orientasi yang dikendalikan bersama dengan perbaikan cepat setelah rilis, Capgo layak untuk dilihat. Ini menyediakan update langsung untuk aplikasi CapacitorJS dan Electron, serta menjaga plugin untuk kemampuan aplikasi seperti orientasi layar, yang dapat membantu ketika Anda membutuhkan untuk mengunci atau mengaktifkan tampilan tertentu tanpa harus membangun kembali proses rilis Anda.
