Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Apple Watch

Merancang untuk WATCH

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Dengan peluncuran produk terbaru dan terbaik Apple yang terbaru, Apple Watch (err, WATCH) ada banyak perancang di luar sana yang ingin sekali mendapatkan mainan terbaru untuk keluar dari Cupertino. Ada beberapa cara baru untuk berinteraksi dengan perangkat; seperti menu sentuhan gaya Apple dan mahkota digital, serta banyak elemen UI yang mungkin sudah Anda kenal seperti tombol, gaya teks, dan sakelar, ya tuhan!

Sebelum menjelajahi elemen UI yang ada di Apple Watch, pertama-tama mari kita bahas beberapa hal mendasar yang harus Anda ingat ketika merancang untuk perangkat baru ini. Pada saat penulisan, Apple Watch belum dirilis, jadi jika Anda memiliki kiat, komentar, atau koreksi, silakan beri tahu saya di Twitter atau di komentar.

The already familiar Apple Watch homescreenThe already familiar Apple Watch homescreenThe already familiar Apple Watch homescreen
Layar utama Apple Watch yang sudah tidak asing lagi

Lampiran fisik

Pertama, Apple Watch secara fisik melekat ke pengguna. Perhatikan koneksi ini dan bagaimana hal itu akan membuat pengguna Anda merasa ketika berinteraksi dengan UI.

Menurut Anda apa niat Apple terhadap emosi pengguna mereka dengan Apple Watch? Jika iklan ini konsisten dengan strategi konten Apple, maka emosi yang disampaikannya adalah kebahagiaan, kegembiraan, kekaguman, dan keajaiban, sambil menyampaikan rasa personalisasi dengan penggunaan jam tangan, warna, dan tampilan jam yang berbeda. Bagaimana Anda menyampaikan perasaan yang sama dengan desain aplikasi jam tangan Anda? Bagaimana fakta bahwa jam tangan melekat pada pengguna mengubah cara pengguna merasakan tentang desain aplikasi Anda?

Tetap Sederhana

Apple Watch tidak sekuat smartphone baru Anda. Saat mendesain untuk web dan seluler, saya terkadang bersalah karena menggunakan gambar cantik di gambar yang lebih kecil. Dalam kasus Apple Watch kita diingatkan untuk menjaga agar segala sesuatunya seringan mungkin, karena kilobyit ekstra itu benar-benar membuat perbedaan.

Pengguna tidak ingin pengalaman yang lamban dan lelet. Penggunaan gambar dan animasi yang lebih besar tidak hanya akan membuat pengalaman pengguna yang buruk, itu juga akan menyebabkan aplikasi Anda ditolak ketika tiba saatnya untuk mengirimkannya ke Apple.

Cool watch animation broCool watch animation broCool watch animation bro

Tanyakan pada diri Anda, "apakah animasi saya benar-benar diperlukan?" Animasi buruk jika menyebabkan keterlambatan, terlepas dari peningkatan kualitasnya. Ingat Anda sedang membangun sesuatu untuk komputer seukuran prangko yang juga harus mengalirkan data dari ponsel secara nirkabel. Kemacetan ada di sana.

Pura-pura Anda sedang membangun situs web di awal tahun 90-an yang perlu mentransfer informasinya melalui modem 14.4k ke pengguna di komputer dengan prosesor 386 dan 2 MB ram. Anda tidak akan menggunakan fon khusus, animasi, dan pustaka JavaScript besar dalam situasi itu, kan? Jaga agar tetap ringan. Bangun untuk kecepatan dan hormati waktu pengguna Anda. Tahan dorongan untuk mempesona. Menjaga interaksi bermakna. Jangan menggunakan animasi tidak perlu. Minum banyak air. Bersikap baik dan hormat terhadap orang lain. Mendengarkan ibumu.

“Jika Anda mengukur interaksi dengan aplikasi iOS Anda dalam hitungan menit, Anda dapat mengharapkan interaksi dengan aplikasi WatchKit Anda diukur dalam hitungan detik. Jadi ingatlah interaksi singkat dan antarmuka sederhana."-Apple Watch Human Interface Guidelines

Warna dan tipografi

Penggunaan warna dan tipografi penting dalam branding aplikasi Anda, tetapi ada beberapa pertimbangan utama yang perlu diingat.

Warna 

"Warna membantu memberikan visual kontinuitas dan branding untuk app Anda."- Apple Watch Human Interface Guidelines
  • Gunakan hitam untuk background Anda Itu akan menyatu dengan panel layar fisik dan mempertahankan ilusi tanpa tepi layar. Jangan gunakan background terang.
  • Gunakan warna kontras tinggi untuk teks. Ingat arloji tidak digunakan untuk jangka waktu yang lama, pengguna harus dapat membaca konten Anda dengan cepat dan mudah.
  • Waspadalah terhadap buta warna. 

Tipografi

Dengan segala cara, gunakan font khusus, tetapi ketahuilah bahwa font sistem dirancang untuk berfungsi dengan baik di perangkat baru ini.

“Di atas segalanya, teks harus dapat dibaca. Jika pengguna tidak dapat membaca kata-kata di aplikasi Anda, tidak mempengaruhi betapa indahnya tipografi. ”- Apple Watch Human Interface Guidelines

Manfaat font sistem (San Francisco) meliputi: 

  • Karakter yang dikondensasi mengambil lebih sedikit ruang horizontal. 
  • Pada ukuran besar mereka ditempatkan lebih longgar dan memiliki lubang mesin terbang yang lebih besar.
  • Tanda baca mendapat proporsional lebih besar ketika font semakin kecil.

Gaya Teks

Gaya teks adalah deskripsi semantik dari penggunaan yang dimaksudkan untuk font Anda. Contohnya adalah hal-hal seperti Judul, Tubuh, dll. Anda mungkin akrab dengan HTML setara dari <h1><h2><body> dan sejenisnya. Jika Anda menggunakan gaya teks bawaan, Anda mendapatkan dukungan Jenis Dinamis gratis yang merespons secara otomatis preferensi akses pengguna. Jika Anda menggunakan font kustom, Anda harus melakukan beberapa pekerjaan untuk mengadopsi fitur.

Ruang

Apple Watch lebih kecil daripada sebuah ponsel pintar, jelas. Semua ruang yang tersedia harus digunakan secara cerdas untuk membuat interaksi yang akan dibuat oleh pengguna Anda senyaman mungkin. Menjaga tombol besar sehingga mudah untuk berinteraksi dengan mereka. Pertimbangkan cara untuk menggunakan menu sentuhan berlaku untuk pilihan tambahan. Tolak godaan untuk menampilkan logo Anda di aplikasi, ada cara lain untuk memberi merek aplikasi Anda melalui penggunaan warna dan citra yang bermakna dan kontekstual.

“Ruang di Apple Watch adalah premium, dan setiap kemunculan logo membutuhkan ruang yang jauh dari konten yang ingin dilihat pengguna.” - Apple Watch Human Interface Guidelines
Perbandingan perbandingan relatif iOS

Apple Watch memiliki bingkai di sekeliling tepinya yang menambahkan bantalan fisik pada desain Anda. Karena itu Anda tidak perlu menambahkan margin ke tepi layar Anda.

screen vs bezelscreen vs bezelscreen vs bezel
a) layar aktual dan b) bezel kaca

Awalnya terlihat agak aneh ketika berkembang di Xcode, karena Anda tidak akan melihat padding ini di bagian tepinya, tetapi ingatlah untuk desain Anda:

Ukuran Layar

Aplikasi menampilkan antarmuka yang sama pada kedua ukuran Apple Watch, (38mm dan 42mm) sehingga dengan menggunakan unit relatif Anda dapat memungkinkan item Anda tumbuh dan menyusut untuk mengisi ruang yang tersedia pada kedua ukuran. Layar selalu dalam potret mode: tinggi lebih besar dari lebar.

Apple Watch Screen ResolutionsApple Watch Screen ResolutionsApple Watch Screen Resolutions
Ukuran Perangkat Lebar (dalam pixel) Tinggi (dalam pixel)
38mm  272 340
42mm 312 390

Navigasi 

Di aplikasi WatchKit Anda akan menemukan dua pola navigasi yang benar-benar berbeda:

Hierarki

Hierarchal navigation on the Apple Watch by AppleHierarchal navigation on the Apple Watch by AppleHierarchal navigation on the Apple Watch by Apple

"Hirarki" adalah pola navigasi yang melibatkan daftar gulir vertikal untuk memungkinkan pengguna membuat satu pilihan (dengan mengetuk) per layar hingga mencapai tujuan yang diinginkan.

Halaman Berbasis

Page Based navigation on the Apple Watch by ApplePage Based navigation on the Apple Watch by ApplePage Based navigation on the Apple Watch by Apple

"Halaman berbasis" adalah gaya navigasi gulir horizontal yang menunjukkan halaman saat ini oleh serangkaian titik di sepanjang bagian bawah layar jam.

Anda tidak dapat menggabungkan kedua sistem ini ke dalam aplikasi yang sama tetapi Anda dapat menampilkan “lembaran modal” terlepas dari jenis navigasi Anda.

Modal Lembar

Anda dapat menganggap lembar modal sebagai kartu yang memberikan pengguna cara untuk menyelesaikan tugas. Modal lembar berisi satu layar atau beberapa layar yang ditampilkan dalam tata letak halaman berbasis. Satu-satunya perbedaan antara keduanya adalah penambahan indikator dot di bagian bawah antarmuka berbasis halaman.

Apple Watch Modal SheetsApple Watch Modal SheetsApple Watch Modal Sheets
Perhatikan titik navigasi pada gambar kedua

Jangan tambahkan tombol tutup ke lembar modal Anda, karena ada satu di kiri atas layar secara default. Itu selalu putih, meskipun Anda dapat mengubah teks dari dekat untuk membatalkan atau sesuatu yang lain untuk menambahkan lebih banyak makna. Pengguna juga dapat menutup lembar modal dengan menggesekkan dari kiri layar.

Tombol apa pun yang Anda tambahkan pada lembar modal Anda harus melakukan tindakan yang dirancang untuk dan menutup lembar modal, sehingga pengguna tidak harus melakukan langkah tambahan itu. Apple menyarankan Anda tidak menambahkan antarmuka modal kedua dari yang awal - jika Anda melakukannya, itu bisa menjadi penyebab penolakan pada pengiriman aplikasi. Jika Apple memperingatkan terhadap sesuatu, biasanya sebaiknya Anda mendengarkan kecuali Anda memiliki alasan kuat untuk tidak melakukannya.

Interaksi

Mungkin ada lebih banyak cara bagi pengguna untuk berinteraksi dengan aplikasi Anda di generasi mendatang (seperti multi sentuhan dan isyarat baru), tetapi untuk saat ini ini adalah satu-satunya cara.

  • Single Tap - Digunakan untuk hal-hal seperti menekan tombol dan membuat pilihan.
  • Gesture Terbatas - Gesekan vertikal untuk menavigasi layar hiearchial, gesekan horizontal untuk menavigasi melalui layar berbasis halaman, geser horizontal tepi kiri untuk kembali ke layar sebelumnya. Tidak ada cara untuk membuat pekerjaan menggesek di luar navigasi antara halaman atau di meja vertikal.
  • Force Touch - Tekan keras pada tampilan jam untuk mengakses menu yang terkait dengan layar saat ini.
  • Digital Crown - Roda di sisi jam dapat digunakan di aplikasi Anda untuk memungkinkan gulir vertikal saja.

Glances

The Glance Interface dijelaskan oleh Apple sebagai "cara tambahan bagi pengguna untuk melihat informasi penting dari aplikasi Anda". Pikirkan informasi yang mungkin Anda butuhkan dengan cepat di satu layar, seperti waktu. Apakah aplikasi Anda memiliki informasi yang ingin sering dilihat pengguna? Pertimbangkan membangun "pandangan" untuk menampilkan informasi itu.

Glance dibangun dari serangkaian template yang telah ditentukan untuk bagian atas dan bawah layar. Glances tidak dapat digulir oleh pengguna dan akan membuka aplikasi ke layar yang sesuai saat pengguna mengetuk salah satu. Glances opsional dan tidak diperlukan.

Grup adalah wadah untuk objek di aplikasi Anda, Anda dapat menganggapnya sebagai sedikit seperti div di html. Grup memiliki padding default yang dapat Anda ubah atau hapus jika Anda mau. Mereka tidak memiliki tampilan default, tetapi memiliki atribut untuk pengaturan posisi, radius sudut, ukuran, margin dan background. Anda dapat mengatur grup ke item tata letak secara horizontal atau vertikal dan Anda dapat mengumpulkan grup di dalam grup lain untuk membuat tata letak yang lebih canggih.

Berikut adalah beberapa templat grup atas dan bawah untuk layar sekilas:

Upper group templatesUpper group templatesUpper group templates
Template grup atas
Just some of the many lower group templatesJust some of the many lower group templatesJust some of the many lower group templates
Hanya beberapa dari banyak template kelompok yang lebih rendah

Pemberitahuan

Pemberitahuan ditampilkan kepada pengguna dalam dua cara berbeda: tampilan-pendek dan tampilan panjang.

Pemberitahuan Singkat

Ini memberi tahu pengguna aplikasi mana yang memberi tahu mereka dan memberikan informasi utama. Jika pengguna menurunkan pergelangan tangan mereka dengan cepat atau tidak mengetuk, notifikasi akan ditutup. Pengguna tidak perlu secara manual berinteraksi dengan pemberitahuan untuk menghapusnya. Desain pemberitahuan singkat ini berbasis template dan berisi ikon aplikasi, nama aplikasi, dan string judul. Jaga string judul Anda sesingkat dan bermakna mungkin.

Long-Look Pemberitahuan

Ini memberikan lebih detail tentang pemberitahuan dan lebih dapat disesuaikan dalam penampilan mereka. Struktur dasarnya sama untuk semua aplikasi dan menyertakan selempang di bagian atas yang menampilkan ikon dan nama aplikasi, konten khusus aplikasi Anda, hingga empat tombol tindakan dan, akhirnya, tombol tutup di bagian bawah.

Elemen UI

Dengan dasar-dasar ini yang dipegang teguh dalam pikiran Anda, mari kita menjelajahi berbagai elemen Antarmuka Pengguna Apple Watch.

"Seperti yang Anda desain elemen grafis app Anda, ingat bahwa setiap elemen kustom harus terlihat baik dan berfungsi baik dengan sendirinya, tetapi juga harus terlihat seperti itu milik dengan unsur-unsur lain dalam app, apakah mereka sedang kustom atau standar."-Apple Watch Human Interface Pedoman

Animasi

Animasi dinamis harus ditransfer dari iPhone mengarah ke penundaan yang tak terelakkan. Aplikasi jam tangan mungkin ditolak karena sangat mengandalkan animasi, jadi gunakan itu hanya untuk menyampaikan status dan memberikan umpan balik kepada pengguna. Penggunaan animasi yang tidak beralasan tidak disarankan (bahkan jika animasi itu seperti bayi menari yang lucu dan hidup). Simpan animasi yang telah dirender sebelumnya menggunakan urutan gambar statis dalam bundel aplikasi WatchKit Anda sehingga dapat disajikan dengan cepat kepada pengguna, bukan ditransfer dari ponsel.

Hilarious and inappropriate animation on the Apple Watch circa 1990Hilarious and inappropriate animation on the Apple Watch circa 1990Hilarious and inappropriate animation on the Apple Watch circa 1990

Tombol

Gunakan ikon alih-alih teks untuk tombol yang ditempatkan berdampingan dan tidak pernah memiliki lebih dari tiga di samping satu sama lain (Apple mengatakan dalam satu contoh untuk tidak menggunakan lebih dari dua tombol di samping satu sama lain, dan dalam contoh lain tidak menggunakan lebih dari tiga.)

Ini mungkin terdengar jelas, tetapi ingat Watch screens kecil sehingga tetap menjaga tombol Anda seluas mungkin - jangan mempersulit pengguna untuk mengetuk tombol. Tombol dapat memiliki gambar atau warna yang disetel untuk latar belakang, serta warna yang berbeda untuk teks. Mereka dapat berisi label atau objek grup dan akan memiliki sudut membulat (radius sudut default menjadi 6 poin).

Force Touch Menu

Menu sentuhan gaya menampilkan menu konteks opsional layar saat ini (jika ada yang diatur) dengan hingga empat tindakan. Ini akan menampilkan tindakan dari atas ke bawah, kiri ke kanan, tergantung pada pesanan yang ditambahkan ke menu. Mereka tidak bergulir.

Tindakan menu (tombol) membutuhkan gambar dan label. Gambar harus garis seni dan satu warna dengan latar belakang transparan. Gunakan garis yang sesuai untuk ukuran perangkat dan kompleksitas ikon, antara 4px dan 9px menurut Apple.

Ingat menu konteks sentuhan kekuatan, karena ini adalah cara baru dan menarik untuk berinteraksi dengan perangkat. Alih-alih menambahkan tombol tambahan ke antarmuka Anda, pertimbangkan untuk menggunakan menu konteks sentuh kekuatan.

Ikon 

Ikon adalah lingkaran png. Anda dapat membuatnya sebagai warna yang diindeks untuk menghemat ruang, 24 bit dan tanpa transparansi. Ikon tidak memiliki teks pada mereka di layar beranda jam.

Unduh template ikon Apple Watch ini untuk digunakan dalam proyek Anda sendiri.

Ukuran ikon untuk aplikasi WatchKit di Apple Watch:

Aset 38mm Watch (dalam piksel)  42mm Watch (dalam piksel)
Ikon Pusat Pemberitahuan
48 x 48 55 x 55
Long-Look ikon pemberitahuan
80 x 80 88 x 88
Home Screen icon
80 x 80 80 x 80
Short-Look ikon
172 x 172 196 x 196

Ukuran ikon untuk digunakan oleh aplikasi Apple Watch di iPhone:

Aset @2 x @3 x
Ikon Apl 58 x 58 87 x 87

Gambar

Menggunakan satu gambar untuk semua ukuran layar. Kecepatan dan efisiensi sangat penting, jadi kompres gambar Anda sebanyak mungkin. Coba simpan pngs Anda dengan warna terindeks pada latar belakang hitam yang solid, bukan pada latar belakang transparan. Buat semua aset gambar sebagai sumber @ 2x; tidak perlu membuat gambar non-Retina.

Kompres pngs Anda dengan alat seperti tinypng, pngout dan pngcrush. ImageOptim adalah utilitas gratis yang besar untuk pengguna mac.

Peta

Peta statis screenshot dari lokasi dan tidak interaktif. Tapping on map membawa pengguna ke aplikasi peta.

Label

Label adalah cara mewah untuk mengatakan "string teks statis". Ini tidak memungkinkan interaksi pengguna langsung, meskipun dapat diperbarui secara terprogram dan dapat menjangkau beberapa baris.

Separator

Separator merupakan elemen UI sederhana, namun berharga: garis untuk memisahkan konten.

Slider

Slider memungkinkan pengguna membuat penyesuaian dengan menekan gambar ke kiri dan kanan. Jika Anda tidak menyediakan gambar default adalah plus (+) dan minus (-)

Switch

Switch memberikan pengguna Anda suatu cara untuk menentukan salah satu dari dua pilihan. Aktif atau nonaktif, ya atau tidak, dsb. Secara gaya mereka akan terbiasa dengan Anda dari iOS, dan mereka selalu menyertakan label.

Tabel

Sebuah tabel menyajikan barisan data dalam satu kolom yang pengguna dapat menggulir secara vertikal. Buat tabel lebih kecil dari 20 baris, karena lebih dari itu sulit untuk menggulir. Jika Anda memiliki lebih dari 20 baris, Anda dapat memberikan opsi kepada pengguna untuk memuat lebih banyak. Tabel ukuran secara dinamis berdasarkan jumlah baris yang dikandungnya. Akibatnya, tabel mengabaikan setiap ketinggian pembatasan oleh kelompok. Apple menyarankan bahwa Anda tidak menanamkan tabel di dalam kelompok.

Kesimpulan

Apple Watch adalah platform baru yang menarik yang akan terus berkembang saat desainer dan developers bermain dengannya dan membangun pengalaman baru yang menakjubkan. Ide-ide yang terlibat dengan perangkat yang melekat pada pengguna dan dapat mengumpulkan denyut jantung dan informasi lainnya akan terus berkembang. Jika Anda memiliki ide baru tentang cara terbaik untuk bekerja dan menciptakan interaksi baru yang menarik dengan sistem ini, beri tahu kami!

Sumber daya tambahan

Apple Watch Flat UI TemplateApple Watch Flat UI TemplateApple Watch Flat UI Template

Apple Watch App Icon TemplateApple Watch App Icon TemplateApple Watch App Icon Template

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.