01 09
Cara Memulai Sendiri Dengan UXPin
Ketika kita memasuki ranah desain ponsel, desain aplikasi dan desain responsif, ada peningkatan fokus pada UX (Pengalaman Pengguna) dan wireframing , pembuatan prototipe dan maket interaktif. Ada satu ton alat di luar sana yang ditujukan untuk ceruk ini dan mereka menjalankan keseluruhan penuh dari kompleks, fitur yang memiliki raksasa hingga jarang dan hampir tidak berguna. Salah satu alat yang menarik perhatian saya adalah UXPin hanya karena dikembangkan oleh desainer untuk desainer.
Sebelum kita bergerak maju ... sebuah peringatan. Jika milik Anda adalah organisasi yang lebih suka memiliki perangkat lunak maka UXPin bukan untuk Anda. Semua pekerjaan yang dilakukan dalam aplikasi ini dilakukan di browser dan proyek yang Anda simpan disimpan ke akun Anda.
Untuk memulai dengan UXPin, Anda meluncurkan browser dan menuju ke UXPin. Dari sini Anda dapat mendaftar untuk Uji Coba Gratis atau mengatur rencana bulanan berdasarkan kebutuhan yang Anda antisipasi. Proses pendaftaran cukup mudah dan setelah Anda mengatur Nama Pengguna dan Kata Sandi Anda, Anda siap untuk memulai.
02 09
Cara Memulai Proyek di UXPin
Saat Anda masuk, Anda tiba di Dasbor dan, dari sini Anda dapat memutuskan untuk membuat wireframe baru, proyek seluler baru, atau proyek Desain Web Responsif. Ada juga plug-in untuk UXPin yang akan memungkinkan Anda untuk membawa proyek Photoshop atau Sketsa Anda. Untuk ini, Cara Saya akan membuat spanduk dengan beberapa teks dan menambahkan tombol email ke spanduk. Untuk mencapai ini saya memilih Buat wireframe baru.
03 09
Bagaimana Cara Menggunakan Antarmuka UXPin
Permukaan Desain dibagi menjadi empat area. Di area hitam di sebelah kiri adalah serangkaian alat yang memungkinkan Anda kembali ke dasbor, buka Elemen yang akan Anda gunakan, buka panel Elemen Cerdas, cari elemen, tambahkan catatan ke halaman dan tambahkan anggota tim. Di bagian bawah adalah tombol yang membuka tutorial singkat, yang lain yang memungkinkan Anda untuk mengakses akun Anda dan orang lain yang mengakses FAQ, mari Anda mengajukan pertanyaan dan bahkan memberikan umpan balik.
Di area biru di bagian atas adalah serangkaian alat dan properti. Tombol yang lebih gelap di sisi kanan memungkinkan Anda untuk mengulang desain Anda, menyesuaikan pengaturan proyek, berbagi halaman dan melakukan simulasi di-browser halaman.
Elemen panel adalah tempat Anda mengambil bit dan potongan untuk Permukaan Desain, beri nama proyek Anda dan tambahkan atau hapus halaman.
Perpustakaan Elemen adalah kejutan yang menyenangkan bagi para desainer UX. Pop down ini memungkinkan Anda memilih dari 30 perpustakaan mulai dari iOS hingga Android Lolipop Selain itu Anda memiliki akses ke elemen Bootstrap dan Foundation bersama dengan ikon Font Awesome, ikon isyarat untuk seluler dan koleksi Widget Sosial.
04 09
Cara Menambahkan Elemen Ke Halaman UXPin
Untuk memulai, saya menyeret elemen Box ke permukaan desain dan, ketika saya melepaskan mouse, panel Properties terbuka. Tombol Properties memungkinkan Anda menamai elemen dan mengatur tinggi lebar elemen dan nilai posisi. Anda juga dapat menambahkan padding ke elemen, membulatkan sudut dan menyesuaikan opacitynya. Mengeklik tombol Warna Latar Belakang membuka pemilih warna RGBA.
Anda juga dapat menetapkan font, perbatasan, dan pola ke elemen yang dipilih. Lightning Bolt memberi Anda kemampuan untuk menambah interaktivitas ke elemen yang dipilih.
05 09
Cara Menambahkan Dan Memformat Teks Di UXPin
Untuk menambahkan teks, seret elemen teks ke permukaan desain dan masukkan teks Anda. Klik tombol Properti Teks untuk membuka properti Font dan memformat teks Anda. Jika Anda membutuhkan blok teks dummy, tambahkan elemen teks dan klik tombol GENERATE LOREM IPSUM di properti Font.
06 09
Cara Menambahkan Gambar Ke Halaman UXPin
Ada beberapa cara untuk menyelesaikan tugas ini. Anda dapat menggunakan Alat Gambar di bilah alat, menambahkan elemen Gambar dari Perpustakaan atau cukup seret dan lepas gambar dari desktop Anda ke elemen di permukaan desain seperti yang ditunjukkan di atas.
07 09
Cara Menambah Tombol ke Halaman UXPin
Meskipun ada elemen Button, memasukkan " Button " ke dalam area Pencarian , seperti yang ditunjukkan di atas, membuka semua tombol yang ditemukan di semua Perpustakaan. Seret salah satu yang bekerja untuk Anda ke permukaan desain dan gunakan Properties untuk mengubah warna, font, dan bahkan radius Perbatasan. Untuk mengubah teks di dalam tombol, klik sekali pada teks dan masukkan teks baru.
08 09
Cara Menambahkan Interaktivitas ke halaman UXPin
Ini tidak serumit yang mungkin pertama kali muncul. Untuk input email, saya menambahkan elemen input, mengubah ukurannya, memasukkan teks dan memformat teks. Dengan elemen Input dipilih klik tombol Properties dan, ketika properti Elemen muncul klik tombol Visibilitas- bola mata - di sudut kanan atas panel.
Pilih tombol dan klik tombol Interaksi - Lightning Bolt- pada properti. Saat panel Interaksi terbuka, pilih Interaksi Baru. Pilih Klik dari Trigger pop down. Di area Action pilih Show Element. Anda sekarang akan ditanya Elemen mana yang akan ditampilkan. Klik sekali pada gunsite dan klik pada elemen Input. Dengan elemen yang diidentifikasi, Anda sekarang dapat menentukan apakah akan menganimasikan elemen atau tidak. Dalam hal ini saya memutuskan untuk menampilkan kotak Input dengan mudah masuk dan pergi dengan nilai durasi default 300ms.
Saya juga ingin memiliki tombol bergerak sekitar 65 piksel ke kanan ketika diklik. Saya memilih tombol, membuka panel Interactions dan memilih New Interaction . Saya menggunakan pengaturan ini:
- Trigger : Klik
- Tindakan: Pindah
- Pindahkan Arah : 65 px pada sumbu x
- Animasi : Linear
- Durasi: 300 ms
Untuk menghapus interaksi, pilih elemen dan buka panel Interaksi. Pilih interaksi di panel dan klik Tong Sampah untuk menghapusnya.
09 09
Bagaimana Menguji Halaman Anda Di UXPin
Karena Anda bekerja di browser, pengujiannya sangat sederhana. Klik tombol Simulasikan Desain . Halaman akan terbuka di browser dan Anda dapat menguji cara. Juga akan ada panel ditambahkan ke sisi kiri halaman yang memungkinkan untuk Komentar, Peta Situs jika ada beberapa halaman, Pengujian Usability, Live Sharing, Editing dan kembali ke Dashboard.
Di bagian bawah halaman adalah panel kecil lain yang memungkinkan Anda menampilkan elemen Interaktif, menampilkan atau menyembunyikan komentar dan membagikan tautan proyek dengan yang lain.