Pengantar Coding Untuk Desainer UX Dan UI

Pengantar Coding Untuk Desainer UX Dan UI – Topik struktur data adalah topik yang sangat umum dan digunakan dalam setiap tugas pemrograman setelah Anda memahaminya, Anda akan dapat menerapkannya ke bahasa lain, baik itu Java, PHP, C++, Python, atau apa pun, terutama dengan apa yang disebut programmer Object Oriented Languages .

binaryjs

Pengantar Coding Untuk Desainer UX Dan UI

binaryjs – Jadi Anda dapat membayangkan objek Orang yang memiliki nama, nama keluarga, tanggal lahir, dll. dan metode yang memungkinkan Anda mendapatkan usia orang tersebut saat ini Di atas Anda dapat melihat sepotong kode yang ditulis dalam bahasa pemrograman.

Dan bahasa pemrograman pada dasarnya hanya itu: bahasa bagi orang untuk membuat objek untuk digunakan oleh programmer lain dan komputer untuk dieksekusi. Sama seperti Anda menggunakan bahasa desain khusus untuk wireframing untuk mengekspresikan beberapa hal dan berkomunikasi.

Mengapa ini sangat penting? Karena Anda menggunakan objek saat membuat desain di aplikasi Anda, baik itu Sketch, Adobe XD, atau lainnya. Artboard adalah objek, simbol adalah objek dan semuanya membentuk hierarki biasanya membentuk beberapa level item yang melingkupi item lainnya. Dan itu bagus karena apa yang Anda buat akan menjadi objek dalam kode.

Baca Juga : Mengenal Bahasa Coding Dan Urutan Pembelajaran Yang Logis

Karena Anda membuat UI, ini akan menjadi kode Tampilan dalam. Pemrogram sering menggunakan pola desain yang disebut Model-View-Controller (MVC) untuk memisahkan objek ke dalam grup (lebih mudah untuk mempertahankan kode dengan cara ini). Pola desain hanyalah solusi biasa pengembang hanya mengatakan: itu menggunakan MVC dan setiap pengembang lain akan mengerti apa artinya itu.

Jadi apa hal Model-View-Controller ini?

Pengembang ingin membagi kode menjadi grup terpisah. MVC adalah salah satu cara mereka dapat mencapai ini (ada banyak yang lain, tetapi yang ini adalah yang paling umum). Inilah yang dilakukan setiap kelompok:

Controller : adalah perekat antara dua bagian lainnya. Ini adalah objek yang menerima dan menangani input (pengguna menekan tombol ‘Hapus’), melakukan tindakan yang ditetapkan (menghapus kontak yang dipilih dari database) dan memberi tahu Tampilan untuk memperbarui (menghapus kontak yang dihapus dari daftar).

Model : merupakan representasi dari data yang digunakan oleh sistem. Jika Anda menyimpan data orang — objek Person yang baru saja Anda lihat akan menjadi Model. Pengontrol biasanya terhubung ke beberapa database dan meminta info — hasil dari permintaan itu akan menjadi daftar objek Person yang diisi dengan data.

View : adalah kode di balik antarmuka pengguna dengan semua komponen dimasukkan ke dalam hierarki — dimulai dengan layar di bagian bawah dan naik ke tingkat paling atas. Tombol adalah contoh objek yang digunakan di sini. Ini akan sering berisi beberapa objek lain — misalnya tombol memiliki objek yang mewakili label teks dengan semua data yang memberi tahu bagaimana label seharusnya terlihat.

Biasanya ada satu Controller per layar dan banyak jenis objek di dua grup lainnya. Biasanya setiap komponen UI yang Anda desain akan terdiri dari setidaknya satu objek — tetapi dapat berisi lebih banyak lagi.

Anda mungkin sekarang berpikir bahwa inilah yang Anda lakukan saat mendesain UI! Anda mulai dengan storyboard dan meletakkan bentuk dan label di atasnya, mengaturnya dalam hierarki kotak-dalam-kotak. Setiap bentuk dilengkapi dengan beberapa nilai yang menjelaskan propertinya — ukuran, warna latar belakang, batas, dll. Itu adalah struktur data di sana! Ketika Anda mengubahnya menjadi simbol Anda mengetahui sesuatu yang lain: apa artinya ketika objek dapat digunakan kembali !

Anda sudah melihat struct Person dalam contoh Swift. Ini berisi objek lain: dari jenis Tanggal untuk membawa informasi tentang tanggal lahir orang tersebut.

Itu adalah keputusan yang baik untuk meletakkan segala sesuatu yang berhubungan dengan penyimpanan tanggal menjadi sebuah objek yang dapat digunakan di banyak tempat yang berbeda. Dan juga, objek Date hadir dengan sistem operasi itu disediakan oleh Apple untuk digunakan oleh pengembang sesuai keinginan mereka, jadi mereka tidak harus membuat semuanya dari awal. Itu hanya di sana, menunggu untuk menyimpan tanggal apa pun. Pikirkan perpustakaan simbol yang Anda gunakan untuk membangun UI Anda. Itu adalah hal yang sama.

Pengembang hanya perlu membuat objek yang khusus untuk aplikasi yang sedang mereka kerjakan. Objek Person adalah contohnya. Itu dapat ditingkatkan sedikit, karena kami dapat menggabungkan nama dan nama keluarga dan menggunakan objek siap pakai lain yang diberikan Apple kepada pengembang: PersonNameComponents yang dapat berisi semua bagian yang membentuk nama seseorang (dan memungkinkan untuk menyimpan variasi budaya dari jenis ini data, seperti nama tengah dll).

Dalam pengembangan, objek dapat dibuat untuk mewarisi dari objek lain. Contoh umum yang digunakan untuk menjelaskan hal ini adalah dengan membuat objek bertipe Hewan dan objek bertipe Kucing yang diturunkan dari Hewan. Kemudian kita juga dapat menambahkan Anjing yang mewarisi dari Hewan.

Apa yang terjadi di sini adalah bahwa Kucing dan Anjing akan memiliki semua yang dimiliki Hewan, ditambah apa pun yang kami tambahkan secara spesifik. Cara yang menyenangkan untuk mendemonstrasikan ini adalah menambahkan metode purr() ke metode Cat dan bark() ke Dog. Jika Animal memiliki metode eat(), maka Cat dan Dog juga akan memiliki ini.

Bagaimana pewarisan objek diterjemahkan dalam hal desain UI?

Katakanlah Anda mendesain elemen UI khusus untuk aplikasi iPhone. Apa yang akan dilakukan pengembang, adalah mereka harus membuat kode elemen ini untuk membuatnya berfungsi.

Namun, mereka tidak akan memulai dari awal. Mereka akan membuat objek kustom baru yang akan mewarisi dari objek bernama UIView . UIView di iOS mengelola area persegi panjang dan memiliki semua metode yang diperlukan sistem operasi untuk menampilkannya di layar. Mereka juga dapat mewarisi dari UIControl . UIControl pada gilirannya mewarisi dari UIView, tetapi juga menambahkan fungsionalitas yang terkait dengan hal-hal yang dapat disentuh dan diubah pengguna. Misalnya, UIButton mewarisi dari UIControl dan menambahkan data dan fungsionalitas khusus untuk tombol.

Komunikasi antar objek

Objek dan struktur data berkomunikasi dengan mengirimkan pesan satu sama lain. Ingat metode ? Yang seperti getAge() di Person atau purr() di Cat. Itu adalah metode. Objek lain dapat memanggil metode tersebut untuk mendapatkan respons.

Bagaimana cara kerjanya dalam pola Model-View-Controller?

Katakanlah Anda mendesain UI untuk memiliki tombol yang menghapus pesan. Pengembang mengubah desain Anda menjadi kode. Mereka menetapkan Pengontrol ke layar yang mencantumkan pesan. Dan mereka mengonfigurasi tombol untuk mengirim pesan ke Pengendali saat pengguna menekannya. Mereka menghubungkan semuanya bersama-sama.

Anda mungkin telah memperhatikan bahwa tombol hanya ‘menembak’ pesan hapus #34 di Controller, tetapi tidak mendapat tanggapan apa pun tentangnya. Itu dengan desain. Itu hanya melakukan pekerjaan dan tidak peduli lagi. Pengendali bisa melakukan satu hal di sini: menonaktifkan tombol setelah menerima pesan dan meletakkan pemintal di layar (mis. menunjukkan yang tersembunyi) sehingga pengguna tahu bahwa pesan sedang dihapus itu UX yang bagus.

Ini akan memberi Anda gambaran umum tentang apa yang terjadi ketika desain Anda dipindahkan ke pengembangan. Anda belajar tentang:

  • Struktur dan objek data (yang merupakan wadah yang mengelompokkan data dan fungsi terkait yang beroperasi pada data ini)
  • Pola MVC ( pola desain yang digunakan untuk membagi objek menjadi ‘kamp’ berdasarkan perannya)
  • Komposisi (objek yang berisi objek lain, seperti hierarki di aplikasi desain Anda)
  • Pewarisan (yang memungkinkan pengembang untuk mengambil objek umum dan memperluasnya dengan menambahkan fungsionalitas khusus yang diperlukan dalam kasus penggunaan saat ini)
    dan komunikasi antar objek (dalam MVC ini menghubungkan semuanya sehingga semuanya ‘berfungsi’)

Saya pikir ini akan memberi Anda langkah awal saat berikutnya Anda berbicara dengan pengembang. Mereka akan menghargainya dan mereka juga akan dengan senang hati menunjukkan kepada Anda bagaimana mereka menerjemahkan proyek Anda ke dalam kode produksi — dan Anda seharusnya dapat memahami sebagian besar darinya, bahkan tanpa mengetahui bahasa pemrogramannya!