Dan para pengembang dihadapkan pada pertanyaan - bagaimana cara menempatkan antarmuka aplikasi besar pada layar kecil ponsel?
Di bawah potongan adalah cerita tentang pemecahan masalah antarmuka yang kompleks untuk aplikasi musik. Aplikasi ini dibuat untuk platform Aplikasi VK Mini , tetapi, mungkin, prinsip umum juga akan cocok untuk platform lain.
Sejarah antarmuka editor musik
Editor musik adalah program intensif grafis yang kompleks. Bahkan yang paling sederhana "Pohon Natal lahir di hutan" terdiri dari beberapa trek untuk drum, bass, piano, dan setiap trek berisi ratusan nada.
Semua ini entah bagaimana harus ditempatkan di layar, dan semua elemen harus dapat diedit.
UI biasanya terlihat seperti ini:
Prinsip UX / UI untuk program musik tidak berubah selama bertahun-tahun. Beginilah penampilan mereka 30 tahun lalu:
- Faktanya, lebih banyak warna dan tombol ditambahkan.
Bagaimana antarmuka seluler berevolusi?
Di jalur luas standar.
Antarmuka aplikasi desktop diambil dan ukurannya diperkecil, dan fungsinya terputus tanpa ampun.
Berikut adalah contoh versi seluler FL Studio (yang ini adalah salah satu DAW terbaik):
- tombol terlalu kecil untuk ditekan dengan jari Anda, elemen tidak pas di layar dan sebagian tersembunyi di menu tarik-turun, dan gambar trek terlalu kecil untuk dilihat.
Kesulitan dalam melakukan port antarmuka ke layar kecil
Untuk memperjelas kedalaman masalah, pertimbangkan equalizer 10-band konvensional.
Kebanyakan orang menggunakannya tanpa mengetahui apa itu. Misalnya, berikut adalah equalizer yang ada di layanan Yandex Music:
agar jari nyaman ditekan, tombol dan scrollbar harus berukuran minimal 1 cm. Equalizer memiliki 10 scrollbar, mis. lebar totalnya harus 10cm.
Tapi ini lebih dari lebar ponsel! Dan ini hanyalah salah satu dari banyak kontrol.
Ternyata Anda perlu melakukan segala sesuatu yang kecil dan tidak nyaman untuk menekan, atau menampilkan hanya sebagian kecil dari kontrol, dan membuang sisanya atau menyembunyikannya di menu drop-down, dll.
Menemukan solusi
Adakah pendekatan untuk membantu Anda membuat antarmuka yang kompleks namun ramah pengguna untuk layar kecil?
Tentu.
Ini adalah kartu. Dan tidak hanya di ponsel, tapi juga di desktop.
Peta menggunakan lapisan skala dan visibilitas untuk elemen. Menampilkan jutaan objek interaktif di layar kecil.
Sebagian besar menggunakannya secara intuitif, yang mengonfirmasi kegunaan pendekatan UX / UI ini.
Contoh solusi
Diputuskan untuk meletakkan trek di atas satu sama lain dan menambahkan penskalaan ke seluruh gulungan Piano bersama dengan kontrolnya.
Dalam statika, sepertinya aplikasi lain dari bidang musik:
Tetapi dalam dinamika jelas bahwa perilakunya sangat berbeda:
Buka video kerja dengan aplikasi
Proyek dari video dapat dibuka di VKontakte untuk menguji:
- buka di aplikasi
- berfungsi baik di ponsel dan di dalam pesan umpan VKontakte
Aplikasi total dari pendekatan penskalaan UI memungkinkan sejumlah besar elemen untuk dimuat di layar kecil.
- semua elemen "dekat" dan dapat diakses dengan cepat
- pengguna memiliki kesempatan untuk melihat keseluruhan proyek secara keseluruhan, dan bukan di bagian yang muat di layar kecil