Ketika Anda memutar ponsel untuk menguji layar, dan tata letaknya beradaptasi dengan baik atau hancur. Teks mengalir kembali, tombol melompat, modal tiba-tiba menutup area yang salah, atau pemutar video berperilaku seperti yang diharapkan. Saat itu kecil adalah saat orientasi potret berhenti menjadi istilah desain dan menjadi keputusan produk.
Jika Anda membangun untuk mobile, Anda membutuhkan jawaban yang jelas untuk apa itu orientasi potret. Tidak hanya definisi kelas, tetapi versi pengembang. Bagaimana cara pengaturan layout, kapan harus mendukung rotasi, kapan harus mengunci, dan bagaimana mengaturnya dalam aplikasi web, aplikasi native, dan Capacitor proyek tanpa menciptakan UX yang rapuh.
Daftar Isi
- Mengerti Orientasi Potret
- Potret vs Lautan: Perbandingan Fundamental
- Penggunaan Umum di Berbagai Media
- Mengatasi Orientasi pada Web
- Mengelola Orientasi pada Aplikasi Mobile
- Praktik Terbaik UX untuk Orientasi Layar
Mengerti Orientasi Portrait
Orang pertama kali menyadari orientasi ketika layar memutar. Pengembang menyadarinya ketika putaran itu mengganggu antarmuka mereka.
Orientasi potret berarti frame lebih tinggi daripada lebarnya. Konsep itu berasal dari seni visual, di mana potret wajah dan bagian atas tubuh biasanya diframe secara vertikal. Konsep itu kemudian diterapkan pada desain halaman, fotografi, dan antarmuka digital. Referensi yang baik untuk sejarah yang lebih luas adalah halaman ringkasan orientasi Wikipedia.Bagi pembangun, bagian yang penting adalah bahwa orientasi potret tidak terkait dengan satu ukuran layar, satu perangkat, atau satu format file. Ini adalah aturan tentang bentuk. Jika tinggi lebih besar dari lebar, Anda berada di orientasi potret. Mengapa hal ini penting dalam pekerjaan produk.
Orientasi potret menjadi default yang praktis untuk mobile karena penggunaan tegak sesuai dengan cara orang alami memegang ponsel. Hal ini mempengaruhi pengguliran, jangkauan jari, aliran baca, desain formulir, dan penempatan navigasi.
Feed, tampilan artikel, layar pengaturan, atau thread percakapan biasanya membaca lebih alami dalam frame vertikal. Itu adalah salah satu alasan pilihan orientasi terkait langsung dengan keputusan pengalaman pengguna aplikasi mobile
__CAPGO_KEEP_0__
__CAPGO_KEEP_1__ __CAPGO_KEEP_2__Hanya gaya visual saja.
Aturan praktis: Tangani potret sebagai konteks tata letak, bukan hanya posisi perangkat.
Dimana para pengembang junior sering kali bingung
Kebiasaan bingung biasanya adalah menggabungkan orientasi dengan resolusi atau rasio aspek. Mereka terkait, tapi bukan hal yang sama.
- Orientasi arti mana sisi yang lebih panjang.
- Resolusi arti berapa banyak piksel yang ada di setiap dimensi.
- Aspek rasio menjelaskan hubungan antara lebar dan tinggi.
Tablet di potret dan ponsel di potret dapat memiliki dimensi yang sangat berbeda, tetapi mereka masih memiliki keadaan 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 Dasar Perbandingan Fundamental
Cara sederhana untuk berpikir tentang ini adalah melalui komposisi. Lukisan potret fokus perhatian pada orang atau subjek yang lebih 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 tinggi melebihi lebar, sehingga sisi yang lebih panjang adalah vertikal. Itu adalah kebalikan dari orientasi horizontal. SLR Lounge’s entri kamus menjelaskan definisi teknis dan mengapa bentuk ini sesuai untuk subjek yang tinggi dan struktur vertikal.
Diferensi dalam satu tabel
| Posisi | Bentuk | Pengaturan terbaik | Pengaruh biasa |
|---|---|---|---|
| Potret | Lebih tinggi dari lebarnya | Isi, formulir, membaca, subjek yang tinggi | Mengarahkan perhatian secara vertikal |
| Lanskap | Lebih luas daripada tinggi | Video, peta, dashboard, scene yang luas | Menampilkan lebih banyak konteks horizontal |
Itu terdengar dasar, tapi itu berguna ketika Anda membuat penyesuaian dalam tinjauan produk.
Apa yang berubah untuk pengguna
Biasanya, potret mempersempit perhatian. Ini mengurangi konten samping dan mendorong aliran dari atas ke bawah. Itu mengapa feed sosial, halaman artikel, langkah onboarding, dan antarmuka percakapan sering terasa lebih bersih dalam potret.
Orientasi horizontal melakukan yang sebaliknya. Ini menampilkan lebih banyak lebar, yang membantu dengan tampilan split, timeline, galeri, pemutaran media, permukaan yang kaya data, dan tampilan immersive. Jika tata letak Anda memerlukan perbandingan samping-samping, format horizontal ini sering memberikan ruang napas yang lebih luas.
Potret biasanya tentang fokus. Lahan biasanya tentang konteks.
Apa yang berubah untuk pengembang
Salah besar adalah menganggap format yang lebih luas sebagai versi yang dipanjangkan dari potret. Ini bukanlah. Hierarki informasi sering harus berubah.
Contoh:
- Dalam potretDashboard dapat menumpuk kartu menjadi satu kolom.
- Pada orientasi yang lebih luasdashboard yang sama mungkin beralih ke beberapa kolom dan menampilkan filter atau panel samping.
- Pada portraitform pembayaran dapat memprioritaskan target sentuh besar dan aliran yang jelas.
- Pada orientasi yang lebih luaslayar yang sama dapat terasa tidak nyaman jika bidang menjadi terlalu kompres vertikal.
Pengembang yang bekerja pada tata letak mobile yang imersif juga perlu memikirkan pengelolaan tepi, area yang aman, dan perilaku layar penuh. Jika Anda menyesuaikan detail tersebut, Capacitor pengaturan layar tanpa tepi adalah bagian dari percakapan yang sama karena perubahan orientasi mempengaruhi cara pengguna memahami ruang yang tersedia.
Penggunaan Umum Bersamaan di Berbagai Media
Orientasi portrait muncul di tempat-tempat lain lebih banyak daripada layar mobile. Hal itu penting karena konsep itu tidak dimulai di perangkat lunak, dan itu tidak hanya milik perangkat lunak.
Fotografi dan cetak.
Contoh profesional dari foto depan adalah contoh yang jelas. Frame vertikal lebih cocok untuk wajah dan tubuh seseorang daripada frame lebar.
Logika yang sama berlaku untuk foto mode fashion, sampul buku, poster, dan sampul majalah.
Desain cetak juga bergantung pada potret ketika pengalaman membaca harus bergerak dari atas ke bawah dalam kolom yang sempit. Bentuk itu membantu mata berjalan secara alami ke bawah halaman.
Dokumen dan komunikasi sehari-hari.
Laporan, resume, surat, dan dokumen internal biasanya dirancang dalam potret. Tidak karena potret selalu lebih baik. Itu karena halaman vertikal bekerja baik untuk membaca urutan paragraf, judul, daftar, dan tanda tangan.
Jika Anda pernah mengexport PDF dan melihat bahwa tabel lebar suddenly menjadi tidak dapat dibaca, Anda telah melihat batas potret juga. Beberapa konten lebih baik ditampilkan dalam format horizontal. Kunci adalah memilih frame yang sesuai dengan struktur konten.
Produk dan alur aplikasi mobile.
Dalam situasi ini, potret menjadi model mental default bagi banyak tim.
- Pikirkan tentang layar yang dibuka oleh pengguna secara berulang-ulang: Aplikasi chat: pesan berderet secara vertikal.
- Applikasi sosial: postingan, komentar, dan reels dikonsumsi dalam aliran yang tegak.
- Applikasi retail: hasil pencarian dan daftar produk bergeser ke bawah.
- Applikasi perbankan: saldo, transaksi, dan alur konfirmasi biasanya disusun dalam bagian vertikal.
Polanya tidak semata-mata kebetulan. Portrait mendukung penggunaan satu tangan, navigasi jari, dan penyelesaian tugas linear.
Banyak UI mobile terasa intuitif karena antarmuka mengasumsikan perangkat tegak sebelum mengasumsikan hal lain.
Itu tidak berarti setiap layar harus tetap portrait. Pemutar media, peta, grafik besar, dan alur kerja kamera seringkali mendapat manfaat dari penataan yang lebih lebar. Namun, untuk alur tugas sehari-hari, portrait biasanya tempat dimana pengguna memulai.
Menangani Orientasi di Web
Bug web yang 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 perlu bereaksi dengan 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 berlaku. Menggunakan Capacitor untuk mengubah aplikasi web menjadi aplikasi mobile tidak menghilangkan kebutuhan untuk pengaturan orientasi web yang baik. Ini membuat dasar yang lebih penting.
Platform ini memberikan Anda dua alat utama. Screen Orientation API mengungkapkan jenis orientasi dan peristiwa perubahan, dan Web App Manifest memungkinkan aplikasi yang diinstal menyatakan mode yang diinginkan secara tegak seperti portrait, portrait-primary, atau portrait-secondary. MDN mendokumentasikan nilai-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.
Praktik ini bekerja seperti peningkatan progresif untuk bentuk layar. Mulai dengan tata letak yang sempit dan tegak 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 dapat menghemat waktu di kemudian hari:
Mulai dari mode utama:
- jika orang-orang mayoritas menggunakan aplikasi secara tegak, buat tata letak dasar itu. Jangan lupa untuk mengatur orientasi layar yang tepat untuk pengalaman pengguna yang lebih baik.
- Hindari tingkat ketinggian tetap: Menggoyangkan perangkat dapat menyusut ruang vertikal yang dapat digunakan dengan cepat, terutama ketika antarmuka browser atau keyboard virtual muncul.
- Uji interaksi nyata: Bentuk-bentuk seperti formulir, header yang menempel, dan lembaran bawah sering gagal selama rotasi, bukan dalam sketsa statis.
Pakai JavaScript ketika perilaku harus bereaksi:
CSS dapat mengatur kotak-kotak. Namun, CSS tidak dapat memutuskan kapan harus membangun kembali grafik atau mengatur kembali pengendali gestur.
Pakai JavaScript ketika perubahan orientasi 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 cangkang navigasi kustom. Model mentalnya sederhana. Jika rotasi mengubah presentasi data atau logika interaksi, JavaScript harus bereaksi. Jika rotasi hanya mengubah jarak atau posisi, CSS harus mengaturnya.
Aturan praktis yang satu membantu tim junior menghindari banyak kompleksitas. Jangan gunakan JavaScript untuk memaksa keputusan tata letak yang CSS sudah mengaturnya dengan baik.
Setel orientasi yang diinginkan untuk Aplikasi PWA:
Jika Aplikasi PWA Anda dirancang utamanya untuk penggunaan tegak, deklarasikan itu dalam manifest.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}Ini adalah preferensi, bukan pengganti 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);
}
}Gunakan 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.
Pengaturan Orientasi di 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 itu. Kontrol tambahan itu berguna, tetapi itu juga menciptakan kesalahan umum. Tim membatasi rotasi terlalu luas, dan aplikasi sederhana mulai terasa rigid.
Model mental yang baik membantu di sini. Pengaturan aplikasi luas adalah kebijakan default Anda. Layar-level 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.
Kontrol Platform Asli
Aktif Android, orientasi sering kali ditetapkan di AndroidManifest.xml untuk aktivitas:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Ini bekerja seperti flag konfigurasi tingkat atas. Ini sederhana, prediktif, dan mudah untuk melaksanakan di seluruh aktivitas. Tukarannya adalah ruang lingkup. Jika hanya satu layar yang memerlukan mode tegak, menerapkan aturan global biasanya terlalu kasar.
On iOS, orientasi yang didukung ditetapkan di Xcode melalui pengaturan target dan metadata aplikasi. Anda dapat menentukan apa yang aplikasi dukung secara keseluruhan, kemudian memperhalus perilaku di pengontrol tampilan tertentu ketika layar memiliki persyaratan yang lebih ketat. Perbedaan itu penting bagi tim yang mengembangkan aplikasi lintas platform. Konfigurasi native menjawab, “Apa yang aplikasi ini biasanya harus izinkan?” Sementara __CAPGO_KEEP_0__ menjawab, “Apa yang layar ini harus lakukan sekarang?”Pengendalian programatis di aplikasi __CAPGO_KEEP_0__
Jika Anda membangun dengan code, kendali dinamis biasanya harus dimasukkan ke dalam __CAPGO_KEEP_1__, dekat dengan jalur atau tampilan yang membutuhkannya. Layar masuk mungkin lebih mudah digunakan dalam orientasi potret. Layar media atau aliran kamera mungkin perlu memungkinkan rotasi berdasarkan cara perangkat dipegang.
Programmatic control in Capacitor apps
If you build with Capacitor, dynamic control usually belongs in code, close to the route or view that needs it. A sign-in screen may be easier to use in portrait. A media screen or camera flow may need to allow rotation based on how the device is held.
Gaya ini sederhana. Aplikasikan pembatasan ketika layar menjadi aktif. Hapus 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. Capacitor screen orientation plugin for Capacitor apps Gunakan mode tegak yang tetap ketika rotasi akan mengganggu input, penempatan, atau fokus pengguna.
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);
}On iOS, orientasi yang didukung ditetapkan di Xcode melalui pengaturan target dan metadata aplikasi. Anda dapat menentukan apa yang aplikasi dukung secara keseluruhan, kemudian memperhalus perilaku di pengontrol tampilan tertentu ketika layar memiliki persyaratan yang lebih ketat.
Perbedaan itu penting bagi tim yang mengembangkan aplikasi lintas platform. Konfigurasi native menjawab, “Apa yang aplikasi ini biasanya harus izinkan?” Sementara __CAPGO_KEEP_0__ menjawab, “Apa yang layar ini harus lakukan sekarang?”
Pengendalian programatis di aplikasi __CAPGO_KEEP_0__
Contoh-Contoh Umum termasuk:
- Antarmuka Pengguna Autentikasi: Input tetap stabil saat pengguna mengetik.
- Langkah Pembayaran dan Konfirmasi: Perubahan tata letak yang lebih sedikit selama tugas yang memerlukan perhatian tinggi.
- Kiosk atau alur kerja yang dipandu: Antarmuka perlu satu presentasi konsisten.
Biarkan perangkat berputar bebas saat lebar tambahan atau pegangan yang berbeda jelas membantu tugas.
Contoh Umum termasuk pemutaran media, peta, permainan, tampilan kamera, dan layar data yang padat.
Satu aturan berguna untuk tim junior adalah sederhana. Jika mengubah arah perangkat hanya akan mengubah jarak, biarkan sistem tata letak menghandleinya. 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 seperti perilaku. Simpan flexibel default, aplikasikan pembatasan dengan hati-hati, dan hapusnya segera setelah layar tidak lagi membutuhkannya.
Praktik Terbaik UX untuk Orientasi Layar
Pengaturan orientasi adalah keputusan UX terlebih dahulu dan keputusan teknis kedua. code biasanya sederhana. Bagian sulit adalah memilih perilaku yang terasa alami.
Daftar periksa singkat membantu:
- Desain untuk konteks dominan: Jika pengguna sebagian besar memulai dengan tegak, buat versi potret yang kuat dari antarmuka.
- Dukung mode tampilan yang lebih luas di mana itu menambah nilai: Tidak blokir rotasi pada layar yang mendapat manfaat dari lebar tambahan.
- Kunci hanya dengan alasan yang jelas: Form, proses checkout, atau aliran keamanan mungkin membenarkan itu. Layar konten biasanya tidak.
- Simpan keadaan selama rotasi: Pengguna tidak boleh kehilangan input, posisi scroll, atau tab yang dipilih.
- Uji kedua orientasi pada perangkat nyata: Simulator melewatkan transisi yang tidak nyaman, penumpukan kibor, dan masalah area yang aman.
For 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 terasa asli di berbagai ukuran perangkat dan konvensi platform.
Kesimpulan utama adalah sederhana. Jika Anda bertanya apa itu orientasi potret, jawabannya bukan hanya “vertikal.” Itu adalah aturan penataan, keadaan tata letak, dan harapan pengguna. Aplikasi baik menganggapnya sebagai itu.
Jika Anda mengirimkan aplikasi Capacitor dan membutuhkan perilaku orientasi yang dikendalikan bersama dengan perbaikan cepat setelah rilis, Capgo patut dipertimbangkan. Ini menyediakan pembaruan langsung untuk aplikasi CapacitorJS dan Electron, serta menjaga plugin untuk kemampuan aplikasi seperti orientasi layar, yang dapat membantu ketika Anda perlu memblokir atau mengaktifkan tampilan tertentu tanpa harus membangun ulang proses rilis Anda.
