Spacing
Short distance relationship
Last updated
Was this helpful?
Short distance relationship
Last updated
Was this helpful?
Dalam menentukan jarak/spasi antar komponen dalam sebuah desain aplikasi mobile, digunakan apa yang disebut dengan base unit. Base unit berupa suatu angka dasar yang menjadi acuan besaran spasi dari desain yang dibuat. Besaran spasi yang dipakai nantinya akan didapat dari kelipatan dan faktor dari base unit itu sendiri.
Rolling Glory mengikuti acuan Apple dan Google dalam menentukan base unit untuk spasi, yaitu sebesar 8 pixel/point atau oleh beberapa sumber biasa disebut Rule of 8. Artinya, segala spasi yang digunakan dalam desain merupakan faktor dan kelipatan dari 8, yaitu 1, 2, 4, 8, 16, 24, 32, dst.
Namun banyak kasus di mana penggunaan spasi 8 dirasa terlalu sempit, sementara 16 dirasa terlalu lebar. Maka dari itu toleransi penggunaan angka tengah dapat dilakukan. Seperti pertengahan antara 8 dan 16 adalah 12, maka digunakan spasi sebesar 12 pixel. Untuk lebih jelasnya, referensi gambar dari material design dapat membantu coaster memahami base unit. (Angka tengah ini secara tidak langsung berupa faktor dan kelipatan dari 4, maka kombinasi base unit 4 dan 8 adalah kombinasi yang cocok)
Dari sekian banyak angka yang menjadi faktor dan kelipatan 4 dan 8, yang paling banyak digunakan dalam desain aplikasi mobile adalah 2, 4, 8 dan 16 pixel.
Kapan dan di mana menggunakan 16px? Atau 8px? Atau angka lainnya?
Anjuran penggunaan besaran spasi yang dapat membantu coaster adalah dengan bantuan Aturan 3C (Container, Content, Component).
Aturan untuk Container menggunakan spasi dengan angka besar, minimal 16px dan diterapkan di semua sisi (box inset).
Aturan untuk Content menggunakan spasi sebesar 4px untuk header text, dan variasi 0-8px untuk body text, serta variasi 8px-16px untuk spasi dan padding konten (icon, text) dalam komponen kecil.
Aturan untuk Component menggunakan spasi sebesar 8px.
Container merupakan sebuah bingkai yang menyimpan berbagai konten di dalamnya. Besaran spasi dari keliling/ujung container terhadap konten didalamnya adalah apa yang disebut dengan padding. Sementara spasi antar container atau dengan komponen lain biasa disebut margin.
Padding container secara umum lazim menggunakan spasi sebesar minimal 16px dan diterapkan di segala sisi, seperti referensi gambar berikut:
Content merupakan isi dari container. Bisa berupa teks, gambar, divider, dan lain-lain. Untuk konten berupa teks header yang berada di dalam suatu container, baiknya gunakan spasi (sekaligus padding dari container yang membalut si konten) sebesar 4px.
Sementara untuk spasi antar konten, terutama yang berupa body text yang memiliki posisi bertetanggaan langsung (tidak dipisah oleh whitespace) atau berbentuk list, bisa menggunakan range angka 0px-8px. Namun dianjurkan menggunakan 2px.
Adalah hubungan spasial antar komponen di dalam suatu container, atau antar container itu sendiri. Besaran umum dari jarak ini adalah 8px, dan pada kasus khusus, dapat digunakan 4px.
Referensi untuk bacaan lebih lanjut:
