Panduan Pemula untuk Pengembangan iOS Antarmuka - Bagian I
Apple telah menjadi industri terkemuka di dunia ponsel selama bertahun-tahun dengan seri iPhone dan iPad-nya. Terlepas dari hype yang dapat dibuat dengan setiap rilis resmi, itu juga memegang sebagian besar pangsa pasar di platform mobile, dan ini mungkin alasan mengapa sebagian besar klien ingin aplikasi mereka ada di app store Apple; dengan demikian menjadi alasan bagi pengembang untuk belajar dan membangun aplikasi iPhone.
Berita baiknya adalah, pengembangan aplikasi iPhone tidak sesulit yang Anda bayangkan, dan postingan ini ada sebagai panduan komprehensif untuk memandu Anda melalui proses lengkap membangun aplikasi untuk iPhone.
Kami akan membahas alasan, fase, dan alat untuk mengembangkan aplikasi, dan pada akhirnya Anda akan mengikuti tutorial mudah untuk merancang aplikasi iPhone dasar menggunakan Xcode.
Jadi apakah Anda sedang belajar untuk bisnis atau Anda hanya memiliki ide aplikasi luar biasa yang mungkin membuat Anda seorang jutawan, mari mulai membangun aplikasi iPhone pertama Anda!
Catatan: Anda akan memerlukan komputer dengan Sistem Operasi Macintosh (Mac OS) untuk instalasi Xcode, pengembangan aplikasi dan pengiriman aplikasi, tidak mungkin Anda dapat melakukannya di Windows secara legal.
Mengapa Dikembangkan untuk Apple?
Saya melihat pertanyaan ini sering ditanyakan jadi saya ingin menjelaskan mengapa Anda harus tertarik dengan pengembangan iPhone. Seperti yang sudah saya nyatakan di bagian pendahuluan, iPhone saat ini memegang sebagian besar pangsa pasar di platform seluler.
Saya pikir alasan ini seharusnya cukup bagi Anda untuk belajar mengembangkan aplikasi iPhone sebagai apakah Anda sedang mengembangkan untuk diri sendiri atau klien, kebanyakan orang mungkin berharap aplikasi mereka dapat diakses oleh banyak orang di dunia.
Dari sudut pandang pengembangan, Apple suka hal-hal sederhana, dan ini berlaku untuk produk dan kerangka kerja mereka. iOS adalah sistem operasi yang mendukung semua perangkat seluler Apple. Ini termasuk iPod Touch, iPhone, dan iPad. Jadi perlu diingat ketika Anda sedang mengembangkan aplikasi untuk iPhone, Anda bisa saja mengembangkan untuk semua perangkat lain dengan iOS!
Selain itu, apa yang membuat fitur di atas lebih besar adalah seberapa banyak pekerjaan pengkodean dapat disimpan. Saat Anda menulis kode untuk aplikasi iPhone, Anda menggunakan bahasa pemrograman yang sama untuk semua perangkat komputasi Apple. Itu berarti ketika Anda sedang mengembangkan aplikasi iPhone, aplikasi tersebut nantinya dapat diintegrasikan ke dalam iPad dan bahkan Mac.
Objektif-C adalah bahasa pemrograman inti yang mendukung semua kerangka kerja mereka. Seiring dengan Objective-C, Anda juga akan mengembangkan aplikasi iPhone dengan Sentuhan Kakao, kerangka pemrograman yang mendorong interaksi pengguna di iOS.
Ini semua hanya sedikit informasi untuk membantu Anda memulai pengembangan aplikasi iPhone. Pengembangannya merupakan proses yang cukup rumit tapi santai, tenanglah. Jadi alasannya ada di sini, dan keputusan ada di tangan Anda. Apakah jawabannya ya atau tidak, Anda selalu dapat langsung masuk ke topik berikutnya: merancang aplikasi untuk iPhone.
Merencanakan Struktur Aplikasi iPhone Anda
Dalam ideologi standar membuat aplikasi iPhone yang Anda inginkan melalui beberapa fase. Fase pertama meliputi perencanaan dan sketsa.
Pertama-tama, Anda perlu memiliki ide apa yang akan dilakukan aplikasi Anda. Mengapa orang ingin mengunduhnya?? Dan fitur apa yang ingin Anda sertakan? Ini adalah fase paling penting seolah-olah Anda melakukannya dengan benar, Anda akan melakukannya menyimpan banyak kebingungan dan masalah dalam fase coding.
Terburuk, itu membuat Anda kembali ke papan gambar.
Saya rekomendasikan untuk buat sketsa beberapa ide kasar untuk beberapa halaman (atau tampilan) aplikasi Anda. Hanya menggambar bentuk persegi panjang, mungkin 5 atau 6 bentuk di selembar kertas, lalu gambar fitur yang Anda inginkan pada setiap tampilan aplikasi Anda.
Anda dapat memikirkan tampilan seperti halaman berbeda di situs web. Setiap tampilan akan menawarkan fungsionalitas yang berbeda seperti formulir login, daftar kontak, atau tabel data.
Di bawah ini saya telah membuat koleksi singkat berbagai elemen bar UI:
- Status bar - Menampilkan level baterai saat ini, koneksi 3G, bar penerimaan, operator telepon, dan banyak lagi lainnya. Disarankan agar Anda selalu menyertakan elemen-elemen ini.
- Bilah Navigasi - Memberi pengguna Anda opsi untuk bernavigasi di antara hierarki halaman. Ini sering kali menyertakan tombol di sisi kiri bilah untuk memungkinkan pengguna kembali ke tampilan aplikasi sebelumnya.
- Bilah Alat - Muncul di bagian bawah aplikasi iPhone. Ini akan menahan beberapa ikon yang diikat ke beberapa fungsi seperti Bagikan, Unduh, Menghapus, dll.
- Tab Bar - Sangat mirip dengan bilah alat, kecuali sekarang Anda bekerja dengan tab. Ketika seorang pengguna mengklik ikon tab itu akan secara otomatis disorot, dan itu akan menampilkan status hover yang mengkilap. Bilah ini digunakan untuk beralih antar tampilan alih-alih menawarkan fungsionalitas langsung.
Daftar ini hanya berisi bilah alat yang dapat Anda temukan di sebagian besar aplikasi. Ada beberapa pandangan dan gaya lain untuk dipertimbangkan, yang dapat Anda temukan di Pedoman Penggunaan Elemen UI iOS Apple. Saya sangat merekomendasikan untuk merujuk ke dokumentasi ini ketika Anda memiliki keraguan tentang elemen UI iPhone.
Untuk kepentingan waktu saya tidak akan menjelaskan setiap elemen UI. Ada terlalu banyak elemen untuk dipertimbangkan, dan Anda tidak akan menggunakan semuanya dalam aplikasi tunggal Anda. Tetapi ketika Anda membuat sketsa pandangan Anda, Anda bisa menarik inspirasi dari pedoman yang disarankan di atas, dan aplikasi iPhone lainnya Anda menikmati menggunakannya.
Merancang Photoshop Mockups
Saya berasumsi sebagian besar dari Anda cukup nyaman bekerja dengan Adobe Photoshop. Ini adalah perangkat lunak utama untuk membuat grafik untuk situs web, spanduk, logo, dan mockup seluler. Mendesain grafis untuk web adalah proses yang cukup mudah, tetapi sedikit lebih rumit dalam hal desain aplikasi iPhone.
Jika Anda ingin membangun aplikasi, Anda harus melakukannya buat desain mockup pixel-sempurna dari awal.
Untuk memulai, kita harus mendiskusikan pengaturan Photoshop. Karena kami sedang merancang untuk iPhone, kami perlu mempertimbangkan 2 gaya desain yang berbeda. Itu tampilan iPhone biasa adalah 320 x 480 piksel. Namun iPhone 4 termasuk a tampilan retina yang menggandakan jumlah piksel dalam ukuran layar yang sama. Jadi kamu harus gandakan resolusi menjadi 640 x 960 piksel dan desain tata ruang Anda dengan standar ini.
Ini berarti Anda juga perlu melakukannya buat 2 set ikon untuk maketmu. Ikon awalnya adalah setel ke 163ppi tetapi Anda harus melakukannya termasuk ikon dengan 326ppi untuk iPhone 4. Ikon ditandai dengan tradisional @ 2x di akhir nama file mereka, seperti “[email protected]“.
Sekarang mari kita mengoptimalkan pengaturan dokumen baru kami. Pertama kita perlu mengedit beberapa preferensi, jadi akses ke Photoshop> Edit> Preferences> Panduan, Kotak, dan Irisan. Kami akan mengatur Gridline kami setiap 20px dengan subdivisi pada 2. Saat mendesain untuk tampilan retina Baris 2px akan menampilkan 1 poin di layar. Ini adalah aturan penting yang perlu Anda ingat untuk mengurangi aplikasi Anda.
Saya cenderung merasa lebih mudah untuk membangun desain saya dengan resolusi lebih tinggi kemudian menurunkannya, tetapi Anda bisa coba kedua metode dan lihat apa yang paling cocok untuk Anda. Kami menggunakan 640 x 960 piksel pada 326ppi - simpan ini sebagai prasetel khusus jika Anda pikir Anda akan sering menggunakannya.
Bangunan dengan Elemen Templat
Sekarang Anda dapat menggunakan Photoshop untuk membuat tata letak pixel-sempurna sendiri, tetapi ini terbukti menjadi pekerjaan yang sangat melelahkan dan membosankan..
Ini adalah file besar dengan terlalu banyak elemen. Untuk mempermudah, Anda dapat menekan v untuk mengaktifkan Pindahkan Alat dan klik pada “Pilih Otomatis” pada bilah opsinya, lalu pilih “Lapisan” daripada “Kelompok”. Dengan pengaturan, Anda dapat mengklik elemen apa saja dan Photoshop akan membawa Anda ke lapisan yang sesuai!
Jangan ragu untuk bermain-main dengan mockup, atau Anda bahkan dapat membuat prototipe aplikasi Anda dari mockup. Bergantung pada aplikasi Anda, Anda dapat menyertakan banyak fitur dalam area inti, banyak di antaranya dapat Anda temukan di file PSD ini. Dimungkinkan juga untuk membuka lapisan elemen-elemen ini dan mengedit font, warna gradien, dan gaya desain lainnya juga. Hanya pastikan Anda tidak mengubah ukuran apa pun karena semua bilah dan elemen UI diatur ke ukuran standar standar.
Mengembangkan Aplikasi dalam Xcode
Alat pengembang untuk pemrograman iOS dan Mac OS X dinamai Xcode. Jika Anda menjalankan OS X Lion, Anda dapat menemukan Xcode dan semua paket yang berlaku secara gratis di Mac App Store.
Setelah instalasi selesai, luncurkan Xcode dan layar sambutannya akan muncul. Dari sini Anda dapat memuat proyek yang lebih lama atau memilih untuk membuat yang baru. Untuk saat ini Anda perlu mengklik “Buat proyek Xcode baru“, maka jendela templat akan muncul dengan beberapa opsi. Di bawah iOS> Aplikasi, klik “Aplikasi Tampilan Tunggal” dan tekan “Berikutnya”. Kamu bisa beri nama aplikasi baru, seperti Uji (lebih disukai tidak ada spasi), lalu pada Pengenal Perusahaan, ketikkan kata apa saja seperti perusahaanku, dan akhirnya pilih direktori dan tekan “Menyimpan”.
Xcode akan membangun direktori file dan mengirim Anda ke jendela baru untuk bekerja. Anda seharusnya melihat banyak opsi file terdaftar, tetapi folder yang diberi nama setelah aplikasi Anda adalah fokus utama.
Dengan Xcode Anda memiliki dua opsi untuk mendesain elemen ujung depan. Klasik xib / nib format standar untuk aplikasi Mac OS X dan iOS, yang mengharuskan Anda untuk merancang tampilan halaman baru setiap kali. Namun, karena Anda membuat lebih banyak tampilan dalam satu aplikasi, jumlah file nib bisa menjadi terlalu besar, jadi baru papan cerita File menyimpan semua tampilan nib Anda dalam panel editor tunggal. Dari sini Anda dapat menghapus dan menambahkan elemen dan fitur UI dengan mudah.
Selain itu Anda akan menemukan .h dan .m file dalam grup folder yang sama. Ini adalah nama file pendek untuk tajuk dan pelaksanaan kode. File-file ini adalah tempat Anda menulis semua fungsi dan variabel Objective-C yang diperlukan untuk menjalankan aplikasi Anda. Mungkin ide yang bagus untuk menjelaskan cara kerja Xcode MVC (Model, View, Controller), itulah sebabnya kami membutuhkan 2 file untuk setiap kontroler.
Hierarki Pemrograman MVC
Untuk memahami cara kerja aplikasi, Anda harus memahami arsitektur pemrogramannya. Dengan Model, View, Controller (MVC) sebagai fondasi, Xcode dapat memisahkan semua tampilan dan kode antarmuka dari logika dan fungsi pemrosesan Anda, dan sebenarnya tidak ada pilihan lain untuk dipilih. MVC mungkin tampak membingungkan pada awalnya, tetapi jika Anda mencoba memahaminya dan mulai membangun beberapa aplikasi dasar, Anda akan menyukai struktur ini.
Untuk membuatnya lebih mudah dipahami, saya telah mempresentasikan setiap objek dalam daftar di bawah ini:
- Model - Menyimpan semua logika dan data inti Anda. Ini termasuk variabel, koneksi ke umpan RSS eksternal atau gambar, fungsi terperinci, dan angka-angka. Lapisan ini sepenuhnya terlepas dari tampilan Anda sehingga Anda dapat dengan mudah mengubah tampilan dan masih memiliki data yang sama.
- Melihat - Layar atau gaya tampilan di aplikasi Anda. Daftar tabel, halaman profil, halaman ringkasan artikel, pemutar audio, pemutar video, ini semua adalah contoh tampilan. Anda dapat mengubah gaya mereka dan menghapus elemen tetapi Anda masih akan bekerja dengan data yang sama di Model Anda.
- Pengendali - Bertindak sebagai perantara antara dua lainnya. Anda menghubungkan objek di tampilan Anda ke ViewController yang meneruskan informasi ke dan dari Model Anda. Jadi dengan cara ini mungkin ada pengguna yang mengetuk tombol dan mendaftarkannya di model Anda. Kemudian jalankan fungsi logout dan melalui pengontrol yang sama berikan pesan “berhasil keluar!”.
Jadi pada dasarnya Anda model menampung semua informasi dan fungsi Anda harus menampilkan sesuatu di layar. Tapi model tidak dapat berinteraksi dengan layar, hanya pandangan yang bisa. Tampilan sebagian besar semua visual, dan hanya dapat menarik data melalui ViewController. Itu Pengontrol sebenarnya adalah cara yang jauh lebih halus untuk menyembunyikan data ujung belakang Anda dari desain ujung depan. Dengan cara ini Anda dapat merenovasi desain beberapa kali tanpa kehilangan fungsionalitas apa pun.
Dengan pengetahuan ini seharusnya tidak sulit untuk mulai membangun beberapa aplikasi pertama Anda. Seperti yang disebutkan sebelumnya, Objektif-C adalah bahasa pemrograman inti yang akan Anda gunakan untuk mengembangkan aplikasi. Itu dibangun di atas bahasa C dengan sintaks yang diperbarui dan beberapa paradigma tambahan. Anda akan membutuhkan banyak waktu untuk mengenal bahasa ini, tetapi untuk pelajaran pemula saya merekomendasikan seri tutorial dari Mobiletuts+.
Tampilan Desain dengan Storyboards
Sekarang kita telah melihat ke dalam aspek teknis dari suatu aplikasi, kita harus meluangkan sedikit waktu merancang antarmuka. Saya berasumsi bahwa Anda telah menyimpan “Storyboard” pilihan dicentang saat membuat proyek, yang berarti Anda dapat menemukan satu MainStoryboard_iPhone.storyboard file di suatu tempat di grup folder yang terletak di sisi kiri jendela. Klik pada file untuk memilihnya dan buka tampilan.
Bilah sisi baru akan muncul langsung di sebelah kanan grup folder. Ini disebut Garis Besar Dokumen dan ini semacam metode pratinjau cepat untuk memeriksa semua tampilan yang tersedia di storyboard ini.
Kami ingin memulai dengan menambahkan hanya beberapa elemen halaman ke pengontrol tampilan kami. Kita membutuhkan dua elemen berbeda: a Bilah Navigasi dan a Tab Bar. Sebelum kita ambil, akses ke Inspektur Atribut (Lihat> Utilitas> Tampilkan Inspektur Atribut) di sisi kanan jendela, lalu cari Status bar label. Secara default diatur ke Disimpulkan yang menggunakan warna status iPhone standar, tetapi Anda juga dapat memilih Hitam atau Hitam Tembus jika desain aplikasi Anda lebih cocok dengan warna.
Perpustakaan Objek
Jika Utilitas panel di sisi kanan jendela tidak terlihat, Anda dapat mengaktifkannya dengan akses ke View> Utilities> Show Utilities. Pada panel Utilitas, lihat bagian bawah untuk panel yang disebut Perpustakaan Objek. Itu mendapat menu drop-down dengan menu “Benda” sebagai item pertama dari daftar. Jika Anda tidak dapat menemukannya, Anda dapat memilih Lihat> Utilitas> Tampilkan Perpustakaan Objek.
Dari menu tarik-turun dari Perpustakaan Objek, temukan dan pilih Windows & Bar. Sekarang klik pada Bilah Navigasi, seret ke jendela tampilan dan posisikan langsung di bawah hitam Status bar (dengan ikon baterai). Kami dapat menyesuaikan deskripsi judul bilah sekarang. Klik dua kali pada teks yang sedang dibaca “Judul“, dan Anda akan melihat label bernama “Judul” pada panel Utilities, yang Anda dapat mengubah deskripsi judul “Uji” dari sana. Memukul “Memasukkan” untuk menyaksikan perubahan.
Lagi di panel Windows & Bars, gulir ke bawah untuk menemukan Tab Bar, lalu seret ke jendela tampilan dan letakkan di bagian paling bawah aplikasi Anda. Secara default 2 elemen ini terlihat fantastis.
Sekarang mungkin Anda ingin gradien Bilah Navigasi cocok dengan bilah tab di bagian bawah, dan untuk melakukan ini Anda dapat mengklik pada Bilah Navigasi dan melihat ke kanan di Atribut panel di panel Utilities. Opsi pertama disebut Gaya, yang diatur ke Default. Ubah Gaya dari Default ke Buram hitam dan kami akan memiliki set warna yang cocok!
Mari kita juga menambahkan tombol tab lain di bilah bawah aplikasi. Pindahkan kursor mouse Anda ke panel Windows & Bars lagi dan gulir ke bawah ke Item Bar Tab, tepat di bawah Tab Bar. Seret ini ke jendela aplikasi Anda dan letakkan di tengah 2 tombol Tab Bar yang ada. Jika Anda mengklik dua kali pada tombol baru ini Anda dapat melihat beberapa opsi tambahan di panel Utilities, Anda mengubah item gambar dan judul dari sana. Misalnya, saya telah mengubah judul menjadi “Bookmark” untuk item Tab Bar yang baru ditambahkan.
Jadi ini adalah tutorial singkat tentang mendesain tampilan dalam Xcode. Ini bukan proses yang sangat sulit, tetapi akan membutuhkan sedikit lebih banyak waktu untuk terbiasa dengan antarmuka. Bermain dengan beberapa elemen lagi jika Anda merasa nyaman, Anda juga dapat menuju ke Sumber Pengembangan iOS Apple untuk sumber belajar yang lebih banyak, itu tidak pernah merupakan hal yang buruk untuk menemukan lebih banyak!
Tetap disini untuk Bagian II
Ini menyimpulkan bagian pertama panduan kami untuk desain & pengembangan aplikasi iPhone. Pada bagian selanjutnya kita akan mempelajari sedikit lebih dalam tentang Objective-C dan Cocoa Touch, dan pada akhirnya Anda akan belajar untuk membangun aplikasi iPhone yang berfungsi, tetap disini!
Galeri Desain iOS
Untuk desainer di luar sana, saya juga berharap dapat memberi Anda beberapa inspirasi, jadi saya telah menyertakan daftar tampilan aplikasi iPhone yang luar biasa di bawah ini. Daftar ini menampilkan berbagai macam elemen aplikasi inspiratif yang mungkin belum pernah Anda perhatikan sebelumnya. Jangan ragu untuk membagikan ide, tampilan aplikasi atau pertanyaan Anda di bagian komentar di bawah, terima kasih!
Race Splitter
Kepuasan Remote
Tweetbot untuk iPhone
Reeder
Empat persegi
MailChimp
Joystiq
Piictu
Kegelapan
