IF Notes

UI Component Implementation Differences

4 min read

Back to Mobile Application Development

UI Component Implementation Differences

Questions/Cues

  • Perbedaan jenis tombol pada Android vs iOS?
  • Bagaimana implementasi konten terenkapsulasi?
  • Pendekatan input teks di kedua platform?
  • Pola navigasi spesifik komponen UI?
  • Konsep elevation vs blur effects?

Reference Points

  • UI/UX Principles in Mobile Apps Development (Pages 8-11)

Perbedaan Implementasi Tombol

Pada Material Design (Android), terdapat empat jenis tombol utama dengan tingkat penekanan berbeda:

  1. Text Button: Tombol minimalis tanpa latar, digunakan untuk tindakan sekunder
  2. Elevated Button: Memiliki bayangan dan elevasi, untuk tindakan penting
  3. Filled Button: Tombol padat warna, untuk tindakan utama
  4. Outlined Button: Garis tepi dengan latar transparan, untuk tindakan penting tapi kurang menonjol

Human Interface Guidelines (iOS) menggunakan pendekatan berbeda:

  • System Button: Tombol standar dengan teks atau ikon
  • Detail Disclosure Button: Untuk menampilkan detail tambahan
  • Info Button: Ikon ‘i’ lingkaran untuk informasi kontekstual

Perbedaan filosofis: Android menekankan hierarki visual melalui variasi bentuk, sedangkan iOS lebih konsisten dengan fungsionalitas spesifik.

Contoh implementasi: Di formulir Android, tombol “Submit” menggunakan Filled Button sedangkan “Batal” menggunakan Text Button. Di iOS, tombol “Edit” menggunakan System Button standar tanpa variasi bentuk ekstensif.

Kartu vs Collection Views

Material Design menggunakan Card sebagai wadah konten terstruktur:

  • Mengenkapsulasi gambar, teks, dan tombol aksi
  • Memiliki bayangan untuk menunjukkan kedalaman (elevation)
  • Contoh: Daftar produk di e-commerce Android

iOS tidak memiliki komponen Card khusus tetapi mencapai fungsi serupa dengan Collection Views:

  • Mengatur item dalam grid atau layout fleksibel
  • Menggunakan blur effect untuk lapisan tambahan
  • Contoh: Galeri foto di aplikasi iOS

Perbedaan utama: Android menggunakan komponen khusus dengan aturan desain ketat, sedangkan iOS mengandalkan komponen generik dengan konfigurasi fleksibel.

Implementasi Field Teks

Material Design menerapkan TextField dengan:

  • Label tetap di atas field
  • Helper text di bawah untuk petunjuk
  • Floating label saat aktif
  • Error state dengan warna merah dan pesan

Human Interface Guidelines menggunakan pendekatan minimalis:

  • Label terintegrasi dalam field (placeholder)
  • Auto-correction dan prediksi teks bawaan
  • Search field khusus dengan ikon pencarian

Perbedaan krusial: Android menyediakan petunjuk konstan melalui helper text, sedangkan iOS mengandalkan placeholder yang menghilang saat input.

Pola Navigasi Komponen Spesifik

Material Design menggunakan Navigation Drawer:

  • Panel samping tersembunyi yang muncul dengan geser
  • Menampilkan menu utama aplikasi
  • Contoh: Menu profil di Gmail Android

iOS mengimplementasikan Tab Bar:

  • Bar persisten di bawah layar
  • Ikon dan teks untuk bagian utama
  • Maksimal 5 item dengan penanda aktif

Perbedaan interaksi: Drawer Android memerlukan gesture khusus, sedangkan Tab Bar iOS selalu terlihat dan mudah dijangkau ibu jari.

Summary

Perbedaan implementasi komponen UI antara Material Design dan HIG mencakup empat area utama: (1) Tombol di Android memiliki variasi hierarkis (Text, Elevated, Filled, Outlined) sedangkan iOS menggunakan tipe fungsional spesifik (System, Detail Disclosure); (2) Konten terenkapsulasi di Android menggunakan Card dengan shadow sedangkan iOS mengandalkan Collection Views dengan efek blur; (3) Input teks Android menyertakan label permanen dan helper text, berbeda dengan placeholder iOS yang menghilang; (4) Pola navigasi khusus Android menggunakan Navigation Drawer yang tersembunyi, kontras dengan Tab Bar iOS yang selalu terlihat. Kunci perbedaan terletak pada pendekatan hierarki visual vs konsistensi fungsional.

Graph View

Backlinks