Trik, Tips dan Teknik Design Adobe Experience

01 dari 07

Trik, Tips dan Teknik Design Adobe Experience

Apabila Adobe memperkenalkan Reka Bentuk Pengalaman sebagai Pratonton Umum , syarikat itu telah mencapai dua kejayaan yang luar biasa pada masa yang sama. Pertama, mereka menimbulkan ruang dalam pasaran perisian prototaip yang muncul. Kedua, mereka mencipta peluang bagi pengguna untuk bermain dengan "kerja dalam pelaksanaan" dan membiarkan pengguna mempengaruhi kemajuan tersebut. Sekarang bahawa aplikasi telah tersedia selama beberapa bulan, saya fikir ia akan menjadi masa yang baik untuk berkongsi beberapa teknik, tip dan teknik Pengalaman Pengalaman.

Tetapi pertama, anda mungkin tertanya-tanya apa yang dimaksudkan dengan Perisian Prototyping. Antara pemain utama dalam ruang ini ialah Proto.io, Prinsip, UXPin, Atomic.io , Reka Bentuk Pengalaman dan InVision. Tidak seperti aplikasi seperti Sketch 3, Photoshop dan Illustrator di mana reka bentuk statik dihasilkan, editor grafik ini memperkenalkan interaktiviti, gerakan dan ciri-ciri lain yang biasa digunakan dalam ruang reka bentuk mudah alih dan laman web hari ini.

Dengan munculnya tumpuan laser seperti mudah alih dan tidak dapat dielakkan, Pengguna tidak lagi mencukupi untuk pereka untuk mencampurkan beberapa lakaran, tarik bersama beberapa pemampat dan kemudian melepaskan projek atau memuat naiknya ke pelayan web. Aliran kerja UI / UX telah mengubah keadaan secara asasnya. Setiap langkah proses, dari mengenal pasti pengguna, sketsa, wireframe, mockups, dan prototaip kini tertakluk kepada ujian pengguna yang luas.

Ia adalah tahap terakhir - prototaip - di mana titik kesakitan ditemui dan ditetapkan sebelum projek bergerak ke dalam pengeluaran akhir. Di sinilah interaktiviti, gerakan, peralihan skrin dan penempatan segala-galanya di skrin sangat kritikal. Masalah dan masalah tidak semestinya ditunjukkan sebagai imej statik atau dijelaskan secara lisan. Lagipun, produk ini adalah untuk manusia sebenar. Daripada memindahkan semua itu kepada kod, proses prototyping semakin banyak dilakukan oleh perisian grafik yang direka untuk tujuan itu. Adalah lebih mudah untuk membetulkan kesilapan, menggantikan imej, menulis semula teks, mengalihkan butang dan sebagainya menggunakan editor visual berbanding kod penulisan semula dan penyahsaman secara berterusan.

Malah, perisian ini telah menjadi komponen penting dalam persekitaran Rekaan dan Pembangunan "Rapid Prototyping" hari ini.

Dengan itu, mari kita berseronok dengan Reka Bentuk Pengalaman.

02 dari 07

Buat Pin Destinasi Dengan Lingkaran Mudah dalam Rekabentuk Pengalaman Adobe

Satu aspek kemas XD ialah penggunaan alat lukisan vektor. Tidak dapat mencari ikon? Tiada masalah. Roll sendiri. Ini caranya:

1. Pilih Alat Ellipse dan, dengan kekunci Opsyen / Alt-Shift ditekan, lukiskan bulatan.
2. Dengan bulatan yang dipilih, tetapkan warna Isi ke FF0000 dan Sempadan ke "tiada" dalam sifat.
3. Klik dua kali lingkaran untuk menunjukkan titik anchor. Seret penahan bawah ke bawah.
4. Klik dua kali Point Anchor yang dipilih dan lengkung digantikan dengan baris.
5. Lukis satu lagi lingkaran kecil dengan mengisi putih dan tiada stok. Pindah ke kedudukan dan pilih pin dan bulatan. Dalam panel Align di bahagian atas Hartanah klik butang Pusat Mendatar dan Pin dibuat.

03 dari 07

Buat Blur Latar Belakang dalam Rekabentuk Pengalaman Adobe

Ia adalah perkara biasa untuk mempunyai teks atau kandungan lain melalui imej latar belakang. Masalahnya di sini adalah imej, lebih kerap daripada tidak, mengatasi kandungan di atasnya. Salah satu cara untuk menyelesaikan isu ini adalah untuk mengaburkan imej latar belakang. Anda boleh mengaburkan imej dalam Photoshop atau perisian penyuntingan imej lain, tetapi ini agak tidak cekap, terutamanya kerana XD kini boleh mengendalikan tugas ini untuk anda. Ini caranya:

1. Buat artboard baru dan tambahkan imej latar belakang anda.
2. Pilih Alat Rectangle dan lukis segi empat tepat ke atas imej. Dengan Rektangle dipilih, tetapkan Isi ke Putih dan Stroke ke Tiada.
3. Dengan Rectangle yang dipilih, pilih Latar Belakang Blur dalam panel sifat. Tiga slider ialah Blur Amount, Brightness and Opacity. Inilah yang mereka lakukan:

• Blur Amount: Melaraskan kelembapan imej di bawah bentuknya. Nilai maksima ialah +50.
• Kecerahan: Laraskan kemuncak dan bayang-bayang dalam imej. Nilai Minimum ialah -50 dan Nilai maksimum ialah +50.
• Kelegakan: Memengaruhi ketelusan bentuk dan keterlihatan imej di bawah bentuknya. Nilai-nilai ini berkisar dari 0% hingga 100%.

Jika anda benar-benar mahu "menghidupkan perkara", tukar warna bentuk dan bermain dengan nilai Opacity untuk menukar "melihat" imej.

04 dari 07

Buat Scrim dalam Rekaan Pengalaman Adobe

Masalah reka bentuk yang biasa adalah unsur-unsur unsur antaramuka harus menjadi warna biasa tetapi, hilang apabila diletakkan di atas imej latar belakang atau warna pepejal. Penyelesaiannya adalah scrim. Skim adalah kecerunan yang agak kabur diletakkan di antara unsur antara muka dan latar belakang. Ini mudah dicapai dalam XD. Ini caranya:

1. Buat artboard anda di XD, tambahkan imej dan salin dan tampal elemen antara muka dari Kit UI yang bersesuaian - Fail> Kit UI Terbuka ... - masuk ke artboard. Dalam imej di atas foto itu menjadikan bar Status dan Bar App sukar dilihat.
2. Pilih Rectangle Tool dan tarik persegi panjang. Di Panel Properties pilih Isi dan pilih Kecerunan dari pop turun di Pemilih Warna. Tetapkan warna kecerunan kepada Hitam dan Putih. Tetapkan nilai A - Opacity - hingga 60% dan Nilai Putih kepada 0%.
3. Dengan Rektangle dipilih, pilih Objek> Susun> Hantar Ke belakang . Unsur-unsur antara muka kini dapat dilihat melalui imej.

05 dari 07

Buat Avatar Imej dalam Rekaan Pengalaman Adobe

Corak Rekaan yang biasa terdapat dalam aplikasi Chat di mana orang bercakap antara satu sama lain dan gambar pembesar suara muncul di skrin. Avatar ini biasanya imej yang telah bertopeng. Ia mati mudah dicapai dalam XD ini. Ini caranya:

1. Anda bermula dengan imej dan bulatan atau bentuk lain pada artboard. Anda boleh mengisi bulatan dengan warna apa pun. Apa yang anda tidak perlu lakukan ialah menambah warna strok. Ia akan hilang apabila anda membuat kesan, jadi mengapa mengganggu. Sekiranya anda perlu mencungkil bulatan, salin ke papan klip.
2. Gerakkan bulatan ke imej dan pilih kedua-dua imej dan bulatan. Dengan objek bot yang dipilih, pilih Objek> Topeng dengan Bentuk . Apabila anda melepaskan tetikus, Avatar dicipta. Dari sana anda boleh mengubah saiznya.
3. Sekiranya anda perlu menambah strok, tampalkan bulatan yang duduk di papan klip ke papan art. Dengan salinan yang dipilih matikan isi Properties dan tambahkan warna dan lebar strok. Untuk menyusunnya, pilih kedua-dua objek dan klik butang Pusat Align dalam pilihan Align di bahagian atas panel sifat.
4. Jika anda ingin memindahkan foto di dalam topeng, klik dua kali topeng. Ini akan menunjukkan imej dan bentuk topeng. Klik pada imej dan seret ke kedudukan. Apabila anda melepaskan tetikus, imej akan berada dalam kedudukan barunya di dalam topeng.

06 dari 07

Main Dengan Artcoards Rekaan Adobe Pengalaman

Artistik Reka Bentuk Pengalaman bukan hanya untuk anda menempatkan kandungan. Mereka juga boleh dimanipulasi. Berikut adalah beberapa perkara yang boleh anda lakukan:

1. Sekiranya anda memerlukan versi Landskap dan Potret artboard, duplikat artboard dan, dengan pendua yang dipilih, klik butang landskap di panel Properties. Artboard akan berubah kepada orientasi Lanskap. Jika Artboard mempunyai kandungan di atasnya, klik nama Artboard dan sifat Artboard akan muncul di Panel Properties.
2. Untuk menambah warna tersuai pada Artboard, dan projek untuk perkara itu, pilih Artboard dan klik cincakan warna Isi dalam bahagian Rupa Panel Properties. Masukkan nilai heksadesimal untuk warna dan klik tanda +. Warna akan ditambah sebagai Warna Tersuai. Untuk memohon warna itu di tempat lain, pilih objek dan klik cip Warna Custom untuk memohon warna.
3. Seni boleh dibuat secara menegak. Untuk melakukan ini, pilih papan iklan dan tukar ketinggian sama ada pada Panel Properties atau dengan menyeret bahagian bawah papan arti ke bawah. Di kawasan Skrolen panel sifat, pilih menegak dari menu pop turun dan masukkan ketinggian paparan skrin untuk skrin. Itu baris biru yang menunjukkan anda bahagian bawah viewport. Untuk mengujinya, klik butang Main dan tatal ke kiri. Untuk mematikan menatal, pilih Tiada dalam Skrol turun pop.

07 dari 07

Edit Kit UI Mudah Alih dalam Reka Bentuk Pengalaman Adobe

Reka Bentuk Pengalaman mengandungi Kit UI untuk membangunkan iOS, Android dan Windows UI. Apabila anda mula-mula membukanya, anda mungkin berfikir mereka cukup baik. Tidak cukup-setiap bit dan kepingan dalam kit tersebut boleh disunting sepenuhnya. Mari kita ketahui dengan membina terowong Android.

1. Anda bermula dengan memilih alat Artboard dan memilih Android Mobile di bahagian Google Panel Properties .
2. Pilih Fail> Buka Kit UI> Bahan Google . Ini membuka Kit Bahan Reka Bentuk Bahan. Pilih Magnifying Glass dan marquee t he Panduan Papan Skrin . Saya suka untuk memulakan dengan ini kerana ia memberi saya panduan untuk penempatan pada skrin yang sesuai dengan unsur-unsur antara muka. Jika anda klik pada salah satu bar Biru, anda akan melihat ia terkunci. Klik kunci yang dilekatkan pada setiap mereka untuk membuka kuncinya . Marquee artboard dan salin pilihan ke clipboard. Kembali ke dokumen anda dan tampal skrin ke dalam artboard anda.
3. Klik sekali pada bar App yang di atas papan arti. Perhatikan bagaimana anda boleh memilihnya. Pilih Objek> Susun> Bawa ke Hadapan. Pilihan anda kini berada di atas Panduan Skrin. Ini harus memberitahu anda setiap elemen di skrin dapat diedit.
4. Klik dua Bar Status di bahagian atas dan, pada Panel Properties s et warna Isi ke 455A64 . Klik dua kali Bar App dan tetapkan isian kepada 607D8B. Ini harus memberitahu anda setiap elemen dalam kit UI boleh diedit untuk memenuhi spesifikasi warna projek.
5. Bagaimana dengan ikon? Inilah cara menukar warna mereka. Klik dua kali hati untuk memilihnya. Sekiranya anda melihat Panel Hartanah, anda mungkin menganggap anda tidak boleh mengedit pilihan. Tidak cukup. Double klik jantung sekali lagi . Properties terbuka dan anda menukar warna isi ke FF0000. Ulangi trik klik dua kali ini untuk ikon yang tersisa dan teks.