Spacing

Short distance relationship

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.

Aplikasi Spacing Pada Komponen UI

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.

1C: Container

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:

2C: Content

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.

3C: Component

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.

Besaran spasi yang digunakan dalam menciptakan desain tidak melulu kaku dan harus mengikuti aturan yang ada. Desainer memiliki keluwesan dalam menentukan spasi yang cocok untuk desain yang diciptakan. Poin penting dalam implementasi spasi pada desain terletak pada konsistensi angka yang digunakan, sehingga tidak menimbulkan kebingungan baik bagi sesama desainer maupun developer.

Referensi untuk bacaan lebih lanjut: