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

Merancang Aplikasi Kebugaran iOS dengan Kompatibilitas Apple Watch 

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

Dalam tutorial ini, saya akan mengajarkan Anda cara mendesain aplikasi kebugaran iOS yang sederhana dan mudah digunakan untuk melacak lari dan bersepeda di luar ruangan. Selain aplikasi iOS, saya akan memberi Anda contoh desain untuk antarmuka Apple Watch juga.

Di akhir tutorial ini Anda akan dapat merancang aplikasi iOS dengan berbagai layar dan tampilan dalam Sketch. Kita akan menggunakan beberapa teknik dasar dan menengah dalam Sketsa, jadi mari kita mulai!

Aset Tutorial 

Anda akan membutuhkan aset ini untuk diikuti: 

Quick Disclaimer 

Sebelum kita mulai, saya harus menunjukkan bahwa konsep ini sepenuhnya teoritis. Dalam kasus proyek dunia nyata, diperlukan analisis pasar dan perilaku pengguna yang jauh lebih mendalam, sebelum kita dapat mengubahnya menjadi aplikasi seluler yang sebenarnya dapat digunakan. Saya telah berlari dan bersepeda secara teratur selama empat tahun sekarang, jadi saya membuat konsep ini untuk menunjukkan bagaimana aplikasi kebugaran akan terlihat dari perspektif saya.

Pengaturan Artboards

Kita menggunakan Sketsa, aplikasi desain yang awalnya dibuat untuk mendesain antarmuka dan saat ini merupakan cara tercepat dan termudah untuk mendesain iOS.

Langkah 1

Setelah kita membuka sketsa, mari kita pilih opsi Artboard (A) dalam waktu Masukkan menu.

Setting up the Artboards

Sketsa Mirror

Di panel sisi kiri, saya sarankan memilih dimensi iPhone 6, tetapi jika Anda memiliki iPhone yang berbeda, Anda akan merasa lebih baik untuk memilih yang satu itu. Hal ini penting, karena dengan bantuan Sketsa Mirror kita dapat langsung melihat pekerjaan kita, secara real time pada perangkat iOS kita, tanpa mengekspor atau mentransfer gambar. Sketsa Mirror adalah bagian penting dari alur kerja Desain, karena hal itu memungkinkan saya untuk melihat dan merasakan hasil akhir dari pekerjaan saya dalam hitungan detik.

Choose iPhone 6 size

Untuk mengaktifkan Sketch Mirror, Anda harus mengunduh aplikasi Sketch Mirror dari App Store, lalu klik ikon Mirror dalam Sketsa (pastikan perangkat Anda berada di jaringan Wi-Fi yang sama atau terhubung melalui kabel USB).

Using Sketch Mirror

Menciptakan Tab Bar

Sejak diperkenalkannya iPhone 6 dan 6 Plus, hampir tidak mungkin untuk menggunakan tombol navigasi tersembunyi di sudut kiri atas, karena sebagian besar pengguna tidak dapat menjangkaunya dengan satu tangan. Untuk alasan ini saya sudah menempatkan navigasi utama di bagian bawah layar; selalu terlihat dan mudah dijangkau.

Langkah 1

Mari kita buat 100px tinggi persegi panjang, lebar penuh, di bagian bawah layar.

Creating the Tab bar

Sekarang, mari kita membagi persegi ini sehingga kita memiliki lima persegi yang sama, di mana kita dapat menempatkan ikon navigasi kemudian. Saya sarankan Anda memberikan setiap persegi panjang warna sedikit berbeda untuk melihat dengan jelas batas-batas masing-masing.

Langkah 2

Mari kita membuat persegi 50x50px lain untuk ikon. Di bawah ini kita dapat menambahkan label layar yang berbeda: Activities, Challenges, GO, Friends and Profile. Untuk label-label ini, saya menetapkan Avenir Next Regular dengan ukuran font 24px dan 24px tinggi baris.

Tab bar guidelines

Langkah 3

Sekarang kita dapat menempatkan ikon kita ke dalam kotak kecil ini. Pastikan bahwa setiap ikon memiliki tinggi 50px atau 50px lebar. Untuk ikon profil kita, mari kita membuat lingkaran 50x50px dengan Oval Tool (O) dan pilih image fill pada panel Fiils.

Profile picture

Langkah 4

Sembunyikan persegi panjang panduan dengan mengklik ikon mata kecil di sebelah lapisan.

Hideunhide layers

Untuk background tab bar kita, saya memilih warna #FFFFFF putih penuh dengan opasitas 70% dan background blur 8px. Saya juga menambahkan garis #B4B4B4 1px dengan Line Tool (L) sebagai pemisah visual di bagian atas bilah tab.

Tab bar background

Untuk ikon dan label tab yang tidak aktif, saya sarankan warna abu-abu #666666 alih-alih hitam sederhana, dan untuk bagian aktif, mari tetapkan warna merah yang hidup seperti #FF3B30.

Active and inactive icons

Merancang GO Screen

Mayoritas pengguna kita akan membuka aplikasi tepat sebelum mereka siap untuk berlari atau bersepeda, jadi hal pertama yang ingin mereka lakukan dengan aplikasi ini adalah mulai melacak latihan mereka. Ini adalah alasan mengapa kita mulai merancang GO screen pertama, memungkinkan pengguna untuk memulai pelatihan mereka segera.

Sebelum setiap aktivitas, saya selalu memeriksa cuaca terlebih dahulu, hanya untuk tahu apa yang harus saya harapkan, termasuk kekuatan angin dan waktu matahari terbenam. Dalam pandangan saya, rincian ini benar-benar penting jika Anda berada di luar ruangan, jadi aku sudah merancang built-in cuaca bagian pada layar pergi. Dengan cara ini, pengguna tidak perlu memeriksa aplikasi cuaca setiap kali sebelum membuka aplikasi kebugaran kita.

Langkah 1

Pertama, kita memerlukan status iOS dan bilah navigasi berwarna putih dari template Desain UI Sketch iOS, yang dapat Anda temukan di bawah File > New From Template > Desain UI iOS.

Using iOS UI Design template
Copying the Navigation bar

Tip: karena Templat Desain UI Sketch iOS memberi kita aset 1x, kita perlu mengonversinya menjadi resolusi 2x. Ini dapat dengan mudah dilakukan dengan Scale Tool.

Using Scale in Sketch

Langkah 2

Untuk warna background bar navigasi kita, saya ingin memilih warna yang jelas dan vital, yang akan menginspirasi pengguna untuk bergerak dan bertindak segera. Jadi saya memilih datar, tetapi tetap merah terang, #FF3B30, yang dimaksudkan untuk menarik perhatian Anda saat pertama kali Anda melihatnya.

GPS indicator

Untuk indikator kekuatan GPS, saya menggunakan gradien sederhana dari #15FF00 ke #15FF00 dalam persegi panjang sudut membulat.

Di sisi yang berlawanan, saya menempatkan ikon sepeda, untuk dengan mudah beralih antara mode berlari dan bersepeda.

Langkah 3

Sekarang, mari buat ramalan cuaca kita di bagian atas layar. Karena sebagian besar latihan kita biasanya tidak akan bertahan lebih dari tiga jam, kita akan memberikan perkiraan tiga jam dengan informasi tambahan tentang kekuatan angin dan waktu matahari terbenam. Saya sarankan abu-abu terang seperti #ACACAC untuk jenis informasi, karena kita tidak ingin lebih menekankan ramalan cuaca.

Weather section

Langkah 4

Sebagai pemisah visual antara berbagai bagian antarmuka yang berbeda, mari gambar persegi panjang #ECECEC, dengan tinggi 54px dan lebar 100%.

Designing the weather section

Langkah 5

Sebelum memulai latihan, dapat memotivasi untuk menetapkan tujuan. Ini dapat berupa jarak, waktu atau rekor kecepatan rata-rata yang baru. Untuk menampilkan tujuan ini Mari kita buat dua lingkaran terpisah dengan dimensi berikut: 270x270px dan 230x230px.

Creating the goal circle

Setelah menempatkan lingkaran, yang pertama drag dan drop ke dalam yang kedua pada panel layer. Untuk membuat sebuah cincin bentuk memilih opsi 'Subtract'.

Subtract option

Untuk warna background cincin ini, buat gradien linier dari #AAFFA9 ke #11FFBD dan atur opacity menjadi 20%. Ini akan menjadi status cincin kita yang tidak aktif.

Inactive background

Untuk bagian aktif, mari gandakan bentuk kami dengan memilih bentuk pada panel layer > Klik kanan > Duplicate (sebagai alternatif kita dapat menggandakan dengan ⌘-C dan ⌘-V juga).

Sekarang kita akan membutuhkan Vector tool (V) untuk membuat masker lingkaran aktif kita.

Using the vector tool

Tip: tekan tombol Shift sambil menggunakan Vector tool membantu kita untuk membuat garis lurus sempurna.

Mari kita bergerak lapisan ini di bawah lingkaran aktif, kemudian sebagai lapisan masker. Jangan lupa untuk mematikan batas tepi bentuk vector kita.

Masking layers

Untuk detail yang bagus, mari tambahkan dua lingkaran 20x20px tambahan ke bentuk topeng kita, memberi kita tepian bulat yang bagus di ujung lingkaran aktif.

Fine details

Pro tip: Untuk teks di bagian tengah lingkaran, mari tetapkan sedikit bayangan batin.

Text shadow

Sekarang, satu-satunya yang hilang dari GO screen kita adalah tombol GO, yang akan menjadi kotak dengan tinggi 120 piksel dengan warna merah #FF3B30.

Designing the GO button

Membuat Tampilan Kegiatan

Pada layar kegiatan kita dengan cepat dapat menelusuri melalui latihan dari teman-teman kita atau diri kita sendiri. Setelah menekan salah satu latihan ini, kita bisa melihat lebih rinci, termasuk grafik interaktif.

Di bagian bawah dari tampilan rinci ini, kita akan menampilkan hasil keseluruhan latihan dipilih, sementara di atas, Anda dapat melihat hasil tertentu tergantung pada mana kita menyentuh grafik (ditunjukkan dengan bar vertikal cahaya).

Langkah 1

Seperti sebelumnya, kita akan mulai dengan navigasi bar, menambahkan ikon tambahan ‘plus’ untuk memungkinkan pengguna menambahkan latihan secara manual.

Creating the Activities screen

Langkah 2

Untuk beralih antara latihan teman kita dan kita sendiri, kita perlu membuat navigasi bar sekunder. Mari kita memilih Rectangle tool (R) dan membuat 90px tinggi persegi panjang dengan mengisi warna gelap biru #1F2033.

Designing the secondary navigation bar

Sekarang membuat lain 22x22px square dan memutar dengan 45 derajat.

Secondary navigation bar details

Kita dapat mengelompokkan dua lapisan ini seperti yang kita lakukan dengan cincin tujuan kita. Pastikan Anda menggunakan opsi Subtract, bukan Union.

Using the Subtract option

Tip: melihat sedikit perubahan dalam hal opacity antara item menu sekunder yang aktif dan tidak aktif.

Langkah 3

Untuk tampilan rinci, kita akan membuat persegi panjang lain dengan sama latar belakang biru gelap. Namun kali ini, tingginya akan menjadi 387px. Untuk pedoman mari kita menggunakan Line tool (L).

Activities details

Langkah 4

Untuk menampilkan perbedaan ketinggian secara visual selama latihan, kita perlu membuat bentuk kustom dengan Vector Tool (V). Tidak ada teknik khusus untuk membuat grafik ini, jadi mari kita men-tweak kurva Bézier sampai kita merasa itu benar.

Displaying the altitude difference

Langkah 5

Selain perbedaan level, kita juga dapat menampilkan perubahan kecepatan selama latihan dengan kurva warna-warni, di mana area merah dan hijau menunjukkan kecepatan.

Displaying the pace difference

Metode ini sama seperti sebelumnya dengan Vector tool dan Bézier kurva. Untuk warna isian saya menggunakan #FF3B30 untuk merah dan #22EA05 untuk hijau (hijau berarti lebih cepat daripada kecepatan rata-rata, merah berarti lebih lambat.)

Pace curve colors

Langkah 6

Dengan bantuan plugin Sketch Generator Konten, kita dapat dengan mudah menambahkan gambar profil yang berbeda ke lingkaran avatar kita.

Using Content Generator Sketch plugin

Sekarang kita siap dengan layar Aktivitas juga!

Final Activities screen

Merancang Layar Tantangan 

Pada layar Tantangan, kita dapat melihat tantangan khusus yang kita ikuti. Selama desain layar ini, saya menggabungkan desain melingkar Apple Watch dengan desain jenis kartu, sehingga pengguna dapat mengatur ulang tantangan berdasarkan kepentingannya.

Langkah 1

Setelah merancang layar sebelumnya, akan jauh lebih mudah untuk membuat yang ini, karena kita sudah mendesain sebagian besar. Pertama, mari buat New Artboard (A) dan salin bilah navigasi dan bilah navigasi sekunder dari layar Aktivitas.

Langkah 2

Untuk membuat kartu, kita membutuhkan kotak 355x400px.

Challenges cards

Langkah 3

Sebagai warna background, saya menggunakan warna putih sederhana, tetapi untuk membedakan secara visual kartu dari background saya menambahkan sedikit bayangan hitam dengan 20% opacity.

Card details

Langkah 4

Agar konsisten dan koheren di seluruh aplikasi, penting untuk menunjukkan kepada pengguna jenis informasi yang sama dengan cara yang sama. Seperti yang Anda ingat, kita telah merancang lingkaran kecil untuk menunjukkan sasaran di layar GO, jadi sekarang kita dapat menggunakan teknik yang sama di sini.

Displaying our goals

Tip: jika Anda ingin mendapatkan lebih banyak inspirasi untuk bagus UI gradien, saya sarankan Anda memeriksa uigradients.com.

Langkah 5

Elemen terakhir yang masih hilang adalah tab bar di bagian bawah layar, jadi mari salin itu dari layar sebelumnya dan pastikan kita mengubah keadaan aktif tab.

Final Challenges screen

Membuat Bagian Tantangan Jelajah

Pada layar Browse Challenges, kita dapat dengan cepat menelusuri tantangan paling populer dan terbaru, di mana kita dapat melihat berapa hari yang tersisa untuk menyelesaikan tantangan tertentu dan berapa banyak anggota yang berpartisipasi di dalamnya.

Langkah 1

Seperti biasa, kita dapat menduplikasi elemen desain familiar dari layar sebelumnya, tetapi jangan lupa untuk mengubah panel navigasi sekunder.

Langkah 2

Mari kita buat informasi dasar tentang tantangan dan Tambahkan lencana kustom sebagai motivasi. Ini akan menjadi hadiah ketika seseorang menyelesaikan tantangan.

Catatan: Untuk tutorial ini, saya hanya membuat satu lencana sederhana, tetapi dalam proyek dunia nyata, saya akan menghabiskan lebih banyak waktu dengan merancang lencana berbeda lencana yang sangat halus.

Designing the Browse Challenges screen

Tip: Melihat perbedaan-perbedaan kecil dalam ukuran dan warna teks, membantu kita untuk menciptakan hirarki yang jelas.

Langkah 3

Visual menampilkan sisa waktu, mari kita buat timeline. Bar ini akan memiliki sudut 40px bulat dan warna background  #F5F5F5.

Designing the timeline

Langkah 4

Untuk bagian aktif bilah ini, mari salin persegi panjang kita sebelumnya, buat sedikit lebih pendek dan atur gradien linier dari #44FF30 ke #FFDA30.

Timeline colors

Langkah 5

Setelah menduplikasi bagian ini dan menyalin tab bar dari layar sebelumnya, kita siap dengan bagian Browse Challenges!

Browse Challenges final

Satu hal lagi: Apple Watch

Terakhir, tapi paling penting, saya membuat antarmuka Apple Watch untuk aplikasi kita. Konsep desain ini didasarkan pada Apple Watch Human Interface Guidelines. Panduan ini disediakan oleh Apple untuk developers dan desainer untuk memiliki pemahaman yang lebih baik tentang kemungkinan platform baru ini.

Saya telah membuat empat antarmuka jam yang berbeda untuk aplikasi kebugaran kita. Dalam kasus konsep pertama saya membuat layar yang sangat dapat disesuaikan, tempat Anda dapat mengatur ulang informasi berdasarkan minat Anda. Lebih jauh lagi, warna data yang paling penting (terbesar) selalu berubah tergantung pada seberapa jauh Anda dari tujuan awal Anda. Dalam hal ini warna hijau berarti Anda hampir mencapai tujuan jarak Anda.

Apple Watch interface design

Selamat!

Kita telah menyelesaikan desain aplikasi kebugaran iOS kita. Setelah mengikuti tutorial ini, saya berharap bahwa Anda lebih percaya diri dalam menggunakan sketsa untuk desain aplikasi mobile.

Jangan ragu untuk mengunduh file sketsa lengkap, untuk melihat lebih detail teknik desain yang kita gunakan. Saya ingin tahu bagaimana Anda menemukan prosesnya, jadi jangan ragu untuk memberi masukan dan pertanyaan di komentar.

Advertisement
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.