01 dari 09
Cara Dapatkan Diri Anda Bermula Dengan UXPin
Apabila kita bergerak ke dalam bidang reka bentuk mudah alih, reka bentuk aplikasi dan reka bentuk responsif terdapat tumpuan yang semakin meningkat pada UX (Pengalaman Pengguna) dan wireframing , prototaip interaktif dan mockups. Terdapat satu tan alat di luar sana yang bertujuan untuk niche ini dan mereka menjalankan gamut penuh dari kompleks, ciri-ciri behemoth sarat dengan jarang dan hampir tidak berguna. Salah satu alat yang menarik perhatian saya adalah UXPin semata-mata kerana ia telah dibangunkan oleh pereka untuk pereka.
Sebelum kita bergerak maju ... sebuah kaveat. Jika anda adalah organisasi yang lebih suka memiliki perisian itu, UXPin bukan untuk anda. Semua kerja yang dilakukan dalam aplikasi ini dilakukan dalam penyemak imbas dan projek yang anda simpan akan disimpan ke akaun anda.
Untuk memulakan UXPin anda melancarkan pelayar dan menuju ke UXPin. Dari sini, anda boleh mendaftar untuk Percubaan Percuma atau mengatur pelan bulanan berdasarkan keperluan yang anda jangkakan. Proses pendaftaran adalah agak mudah dan sebaik sahaja anda menetapkan Nama Pengguna dan Kata Laluan, anda sudah bersedia untuk memulakan.
02 dari 09
Cara Memulakan Projek di UXPin
Apabila anda log masuk anda tiba di Papan Pemuka dan, dari sini anda boleh membuat keputusan untuk membuat wireframe baru, projek mudah alih baharu atau projek Reka Bentuk Web Responsif. Terdapat juga pemalam untuk UXPin yang akan membolehkan anda membawa projek Photoshop atau Sketch anda. Untuk ini Bagaimana saya akan membuat spanduk dengan beberapa teks dan menambah butang e-mel kepada spanduk. Untuk mencapai ini saya pilih Buat wireframe baru.
03 dari 09
Cara Menggunakan Antara Muka UXPin
Surface Design dibahagikan kepada empat kawasan. Di kawasan hitam di sebelah kiri adalah satu siri alat yang membolehkan anda kembali ke papan pemuka, buka Elemen yang akan anda gunakan, buka panel Elemen Pintar, cari elemen, tambahkan nota ke halaman dan tambahkan ahli pasukan. Di bahagian bawah adalah butang yang membuka tutorial pendek, yang membolehkan anda mengakses akaun anda dan yang lain yang mengakses FAQ, mari anda bertanya dan memberi maklum balas.
Di kawasan biru di sepanjang bahagian atas adalah satu siri alat dan sifat. Butang yang lebih gelap di sebelah kanan membolehkan anda melepaskan reka bentuk anda, menyesuaikan tetapan projek, berkongsi halaman dan melakukan simulasi dalam halaman penyemak imbas.
Panel Unsur adalah tempat anda merebut potongan dan potongan untuk Permukaan Reka Bentuk, namakan projek anda dan tambahkan atau alih keluar halaman.
Perpustakaan Elemen adalah kejutan yang menyenangkan bagi pereka UX. Pop turun ini membolehkan anda memilih dari anon 30 perpustakaan dari iOS hingga Android Lolipop Anda juga mempunyai akses kepada elemen Bootstrap dan Foundation bersama dengan ikon Font Awesome, ikon Gesture untuk mudah alih dan koleksi Widget Sosial.
04 dari 09
Cara Tambah Unsur Ke Halaman UXPin
Untuk memulakan saya menyeret elemen Kotak ke permukaan reka bentuk dan, apabila saya melepaskan tetikus, panel Properties dibuka. Butang Properties membolehkan anda menamakan elemen dan menetapkan ketinggian lebar elemen dan nilai kedudukan. Anda juga boleh menambah padding ke elemen, melengkapkan sudut dan menyesuaikan kelegapannya. Mengklik butang Warna Latar membuka pemetik warna RGBA.
Anda juga boleh menetapkan font, sempadan dan corak ke elemen yang dipilih. Bolt Kilat memberikan anda keupayaan untuk menambahkan interaktiviti ke elemen yang dipilih.
05 dari 09
Bagaimana Untuk Menambah Dan Memformat Teks Dalam UXPin
Untuk menambah teks, seret elemen teks ke permukaan reka bentuk dan masukkan teks anda. Klik butang Property Text untuk membuka sifat Fon dan format teks anda. Jika anda memerlukan blok teks dummy, tambahkan elemen teks dan klik butang IPSUM GENERATE LOREM dalam sifat Font.
06 dari 09
Cara Tambah Imej Ke Halaman UXPin
Ada beberapa cara untuk menyelesaikan tugas ini. Anda boleh menggunakan Alat Imej dalam bar alat, menambah elemen Imej dari Perpustakaan atau hanya seret dan lepaskan imej dari desktop anda ke elemen pada permukaan reka bentuk seperti yang ditunjukkan di atas.
07 dari 09
Cara Tambah Butang A Untuk Halaman UXPin
Walaupun terdapat unsur Butang, masukkan " Butang " ke dalam kawasan Carian , seperti yang ditunjukkan di atas, membuka semua butang yang terdapat di semua Perpustakaan. Seret satu yang berfungsi untuk anda ke permukaan reka bentuk dan gunakan Properties untuk menukar warna, fon, dan juga jejari Sempadan. Untuk menukar teks di dalam butang, klik sekali pada teks dan masukkan teks baru.
08 dari 09
Cara Tambah Interaktiviti Ke Laman UXPin
Ini tidak rumit kerana ia mula-mula muncul. Untuk input e-mel, saya menambah elemen input, mengubah saiznya, memasuki teks dan memformat teks. Dengan elemen Input yang dipilih klik butang Properties dan, apabila sifat Unsur muncul klik butang Keterlihatan - bola mata - di sudut kanan atas panel.
Pilih butang dan klik butang Interaksi - Bolt Kilat - dalam sifat. Apabila panel Interaksi dibuka, pilih Interaksi Baru. Pilih Klik dari Trigger pop down. Di kawasan Tindakan pilih Tunjukkan Elemen. Anda kini akan ditanya Elemen untuk dipaparkan. Klik sekali pada tapak api dan klik pada elemen Input. Dengan elemen yang dikenalpasti, anda kini boleh menentukan sama ada untuk menghidupkan elemen tersebut atau tidak. Dalam kes ini saya memutuskan untuk menunjukkan kotak input dengan mudah dan pergi dengan nilai durasi lalai 300ms.
Saya juga mahu mempunyai butang bergerak kira-kira 65 piksel di sebelah kanan apabila ia diklik. Saya memilih butang tersebut, membuka panel Interaksi dan Interaksi Baru dipilih. Saya menggunakan tetapan ini:
- Pencetus : Klik
- Tindakan: Pindah Oleh
- Arah Pindah : 65 px pada paksi x
- Animasi : Linear
- Tempoh: 300 ms
Untuk mengalih keluar interaksi pilih elemen dan buka panel Interaksi. Pilih interaksi dalam panel dan klik Trash Can untuk memadamkannya.
09 dari 09
Cara Uji Halaman Anda Di UXPin
Oleh kerana fakta yang anda sedang lakukan dalam penyemak imbas, ujian adalah mudah mati. Klik butang Reka Bentuk Simulasi . Halaman ini akan dibuka dalam penyemak imbas dan anda boleh menguji cara. Terdapat juga panel yang ditambahkan di sebelah kiri halaman yang membolehkan Komen, Peta Laman jika terdapat banyak halaman, Pengujian Kebolehgunaan, Perkongsian Langsung, Penyuntingan dan kembali ke Papan Pemuka.
Di bahagian bawah halaman adalah panel kecil lain yang membolehkan anda menunjukkan elemen Interaktif, tunjukkan atau sembunyikan komen dan berkongsi pautan projek dengan orang lain.