Desain antarmuka pengguna, terutama aplikasi obrolan, dapat menjadi tugas yang menantang, tetapi juga kreatif. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana cara mendesain pengontrol obrolan secara efektif menggunakan Sketch. Kita akan bekerja terutama dengan lapisan elemen untuk menghemat waktu dan mengembangkan desain yang bersih.
Temuan Terpenting
- Elemen lapisan dalam Sketch membantu menjaga visibilitas dan menerapkan perubahan desain dengan cepat.
- Pemanfaatan gaya yang dapat digunakan kembali menghemat waktu dan menjamin konsistensi dalam desain.
- Integrasi pedoman desain memberikan penampilan yang menarik dan profesional.
Panduan Langkah-demi-Langkah
Pertama, kita akan mulai dengan membuat pengontrol obrolan. Anda seharusnya sudah familiar dengan antarmuka pengguna Sketch, jadi mari kita langsung masuk ke desain.
Langkah 1: Membuat Pengontrol Obrolan Buka proyek Anda yang sedang berjalan di Sketch dan pilih papan seni baru untuk pengontrol obrolan. Pastikan untuk memilih iPhone 8 sebagai perangkat untuk mendapatkan ukuran layar yang sesuai. Namai papan seni "Chat" untuk memudahkan pengelompokkan.
Langkah 2: Menyalin Bilah Navigasi Untuk mencapai desain yang konsisten, salin bilah navigasi dari pengontrol beranda Anda. Tempatkan ini dalam tata letak yang sama seperti sebelumnya untuk menjaga konsistensi. Bilah status dan bilah navigasi harus identik.
Langkah 3: Menyesuaikan Tata Letak Terapkan panduan bantuan pada jarak 16 piksel untuk memastikan semua elemen teratur dan rapi. Pastikan tidak ada "gangguan" dalam penempatan dengan menyesuaikan nilai melalui tampilan inspektor.
Langkah 4: Mentransfer Gaya Jika Anda ingin menggunakan gaya dari pustaka eksternal, buka dokumen asli untuk melakukan perubahan. Anda dapat menyesuaikan warna dan font yang akan digunakan di seluruh proyek. Ini memungkinkan Anda untuk cepat menerapkan perubahan ke semua elemen terkait.
Langkah 5: Membuat Balon Obrolan Untuk menampilkan pesan, buat bentuk baru di pengontrol obrolan. Pilih warna latar belakang untuk balon obrolan baru. Kita akan membuat varian biru dan hijau untuk pesan masuk dan keluar.
Langkah 6: Menambahkan Teks Buat kotak teks di dalam balon obrolan dan masukkan pesan sambutan, seperti "Halo, senang melihat Anda di sini!" Pastikan untuk menyesuaikan warna dan gaya font agar teks menonjol dan mudah dibaca.
Langkah 7: Membuat Beberapa Pilihan Balasan Untuk memberikan pengguna beberapa pilihan balasan, Anda dapat menggunakan salinan balon obrolan. Pastikan jarak antar elemen tetap konsisten. Anda dapat menambahkan kotak teks lainnya dengan saran balasan, misalnya, "Apa tujuan Anda?".
Langkah 8: Menyesuaikan Elemen Pastikan semua elemen memiliki tinggi yang sama dan salin elemen tersebut untuk menyelesaikan desain dengan lebih cepat. Saat menyesuaikan, Anda dapat menggunakan grup dan simbol yang telah Anda buat untuk menjaga konsistensi dan kemudahan perubahan.
Langkah 9: Penyesuaian Akhir dan Pengelompokan Kelompokkan semua elemen untuk meningkatkan keterbacaan. Anda bisa memberi nama grup sehingga mudah diidentifikasi, seperti "Chat_Bubble" atau "Pilihan Balasan".
Ringkasan - Desain Obrolan dengan Lapisan di Sketch: Panduan Langkah-demi-Langkah
Anda telah belajar bagaimana cara mendesain pengontrol obrolan dengan Sketch. Dari pemilihan papan seni yang tepat hingga pembuatan balon obrolan dan penerapan gaya, Anda telah mempelajari teknik efektif untuk menghemat waktu dan menciptakan desain yang konsisten.
Pertanyaan yang Sering Diajukan
Bagaimana cara membuat gaya yang dapat digunakan kembali di Sketch?Anda dapat membuat gaya dengan membuat gaya teks atau latar belakang dan kemudian menerapkannya pada elemen lain.
Apa keuntungan menggunakan lapisan di Sketch?Lapisan membantu mengorganisir elemen desain yang berbeda dan mempermudah perubahan serta pengelolaan desain.
Bagaimana bisa menjaga jarak antar elemen tetap konsisten di Sketch?Gunakan panduan bantuan dan alat penyelarasan untuk memeriksa dan memastikan jarak antar elemen desain Anda.
Apa pendekatan yang baik untuk mempertimbangkan privasi dalam obrolan?Pastikan desain Anda menyertakan petunjuk yang jelas tentang kebijakan privasi yang terlihat bagi pengguna.
Apa peran pemilihan warna dalam desain obrolan?Warna dapat membangkitkan emosi dan mempengaruhi pengalaman pengguna. Pilih warna yang sesuai dengan identitas aplikasi Anda dan mendukung keterbacaan.
