Bagaimana untuk membuat prototaip dalam Axure RP jika anda tidak faham apa-apa

Axure RP adalah perisian prototaip yang paling terkenal dan popular untuk laman web dan aplikasi. Cukup mendalam untuk membuat elemen yang rumit, sambil cukup terang sehingga setelah sepuluh minit tinkering di antara muka menyediakan tata letak. Sudah tentu, ia jauh dari satu-satunya - terdapat banyak cara lain untuk membuat prototaip.

Salah satu ciri utama Axure (berbanding pesaing) adalah keupayaan untuk memprogram kelakuan butang, bekas, widget. Berdasarkan ini, prototaip yang dihasilkan boleh dibuat supaya ia berfungsi sebagai laman web / aplikasi penuh.

Penafian: ini adalah artikel pertama saya. Saya tidak tahu bagaimana menulis, tetapi ada pengalaman terkumpul. Oleh itu, berdasarkan artikel ini. Saya harap bahan itu berguna. Hyde tidak menuntut kebenaran mutlak - sesetengah keputusan dan pemikiran adalah subjektif, walaupun mereka diuji pada banyak projek.

Dari segi struktur panduan, ia akan seperti berikut:

Artikel ini dilampirkan pada prototipe yang dianggap dalam format .rp, yang dapat dimuat turun sebagai contoh. Perpustakaan yang digunakan dengan ikon, widget siap sedia disertakan pada prototaip.

Prototaip yang dipertimbangkan akan berada di pautan //fys0bf.axshare.com.

Untuk setiap contoh dipertimbangkan, arahan video dilampirkan. Oleh itu, anda sepatutnya tidak mempunyai masalah, seperti dalam beberapa buku teks reka bentuk.

Sedikit mengenai UX / UI

Singkatnya, UX (Pengalaman Pengguna) adalah pengalaman, bagaimana pengguna melihat antara muka, emosi yang mereka alami ketika berinteraksi dengannya. UI (Antara muka pengguna) - inilah yang dia lihat, apa yang berinteraksi dengannya.

Antara muka boleh menjadi apa-apa: tukul, tang, peti sejuk, papan pemuka pesawat, periuk perlahan, dan sebagainya. juruterbang profesional.

Jika anda melukis selari dengan tukul, maka UI tukul adalah pemegang, tukul dan kaus kaki. UX tukul adalah apa yang dirasakan seseorang ketika memalu kuku.

Apabila mereka bentuk antara muka, seseorang harus berusaha untuk menjadikannya mudah seperti antara muka tukul atau penggali kayu. Apa-apa komplikasi akan menyebabkan pengguna memukul kepala mereka, dan mereka tidak menyukainya.

Antara muka yang terbaik ialah apabila pengguna tidak menyedarinya, tetapi hanya mendapat apa yang mereka perlukan tanpa rasa tidak selesa - membuat pesanan, membaca artikel, membeli tiket, dan sebagainya.

Seperti yang dikatakan oleh Steve Jobs: "Reka bentuk bukan bagaimana peranti kelihatan, tetapi bagaimana ia berfungsi." Oleh itu, matlamat utama adalah untuk menjadikannya berfungsi supaya pengguna tidak teragak-agak dalam proses tersebut. Mengenai kehadiran antara muka biasanya dikenang dalam dua kes:

- Dia tidak selesa. Butang kecil, anda perlu "bertujuan" untuk klik. Barisan jarak terlalu pendek, anda perlu rakan sebaya. Terdapat banyak maklumat berguna pada halaman pendaratan, dan elemen penukaran juga mesti dijumpai. Nah, anda faham.

- Profesional. Siapa yang bekerja dengan antara muka atau berminat dalam topik itu, akan memberi perhatian kepada sejauh mana ia dibuat.

Bagi mereka yang berada dalam tangki: di mana prototaip kedai dalam talian dan tanggapan yang tinggi tentang "apa yang pengguna rasa"? Dan selain itu. Kemudahan antaramuka masa depan perlu dipertimbangkan pada tahap rangka, laluan laluan seseorang melalui laman web (Pemetaan perjalanan pelanggan). Sememangnya, di peringkat reka bentuk, banyak perkara akan disesuaikan, warna ditambah, imej. Tetapi pangkalan itu dipelihara, dan ia diletakkan tepat pada tahap penciptaan prototaip.

Secara umum, "benefactors" berikut boleh dirumuskan:

- Kesederhanaan Jangan cuba menjadikannya lebih terperinci, lebih sukar. Memudahkan, memendekkan.

- Templat Jangan cuba memikirkan basikal, elemen antara muka baru, ciri khas yang tidak dijumpai di mana-mana sahaja. Unsur-unsur yang lebih tipikal di laman web ini di tempat mereka, semakin besar kemungkinan pengguna memahami apa yang mereka inginkan. Peraturan ini sesuai, tentu saja, apabila membuat sesuatu yang tipikal. Jika anda sedang mengembangkan perkhidmatan baru, atau antara muka pada platform baru (katakan, untuk gelas realiti maya), anda perlu percubaan.

- Penonton sasaran. Tidak peduli betapa tritinya ia boleh dibunyikan, anda perlu memahami yang mana antara muka Asia Tengah yang dimaksudkan. Umur, jantina, pendidikan, skop, tahap kekayaan. Semua ini perlu diambil kira semasa membentuk prototaip. Sebagai contoh, jika halaman pendaratan anda tertumpu kepada jualan jam tangan yang sangat mahal, maka anda tidak boleh menggunakan slogan berteriak tentang diskaun, butang CTA yang besar pada setiap skrin atau kaunter berkelip, 10 minit untuk memesan pada harga yang berpatutan. Sekiranya LP mewakili perolehan di Internet dalam sistem pemasaran rangkaian (suplemen makanan ajaib yang membolehkan anda bercakap dengan nenek mati), maka elemen tersebut akan lebih sesuai. Saya akan mengatakan lebih banyak lagi: penggunaan mereka akan membantu merawat rawatan sasaran di peringkat antara muka.

- Pesaing. Beberapa orang yang terkenal berkata: "Seniman yang baik menyalin, seniman hebat mencuri." Sebenarnya mencuri idea apabila mereka bentuk antara muka dari pesaing. Peserta boleh menjadi langsung dan tidak langsung. Saya juga mengesyorkan untuk mengintip penyelesaian yang baik di laman web asing.

Tujuan bahan ini adalah untuk menunjukkan cara untuk membuat prototaip di Axure RP. Oleh itu, tidak akan ada lagi persoalan-persoalan yang diajukan tentang mengapa elemen ini diletakkan begitu berbeza.

Prinsip dan ciri prototaip dalam Axure

Sebelum anda memulakan reka bentuk antara muka, adalah penting untuk memahami untuk tujuan anda merancang untuk menggunakannya. Ia akan bergantung kepada sejauh mana panduan ini harus digunakan sebagai arahan langsung:

- Jika anda membuat prototaip laman web, untuk kemudian memberikan kepada reka bentuk dan kemudian lampirkan kepada tugas teknikal - ia adalah untuk skim sedemikian yang panduan dikira.

- Jika anda seorang pereka, pelanggan (dan anda mempunyai penglihatan produk dan perlu menyampaikannya) atau anda perlu menyediakan skim kerja untuk demonstrasi - anda boleh menambah lebih banyak imej, mengganggu pengaturcaraan unsur-unsur dalam, bermain dengan warna. Ia juga disyorkan untuk membuat versi penyesuaian dalam satu halaman.

Secara umum, keperluan untuk reka bentuk prototaip telah dirumuskan sejak lama, dalam bahan ini. Saya akan memindahkan yang paling penting dan relevan, ditambah saya akan menambah dari amalan:

  • Semua melalui elemen (topi, ruang bawah tanah) dibuat melalui tuan.
  • Jangan membuat lompat dengan gaya, fon. Ini mengenai tajuk utama, teks utama.
  • Semua elemen di mana interaktiviti akan menjadi (gelangsar, sepanduk, senarai juntai bawah, dan sebagainya) akan dilaksanakan melalui Interaksi. Ini adalah perlu untuk memahami secara visual unsur-unsur yang statik dan yang tidak.
  • Prototaip yang ideal mesti dikaitkan untuk membuat jelas di mana peralihan berlaku ketika mengklik pada elemen. Pautan teks digariskan, pautan pseudo ditunjukkan oleh garis putus-putus.
  • Prototaip dibuat di bawah halaman biasa. Sebagai contoh, kedai dalam talian ialah: rumah, katalog, kad produk, kenalan, halaman teks biasa (pembayaran, penghantaran, mengenai syarikat), akaun peribadi, langkah pembayaran. Bergantung pada jumlah dan keperluan, FAQ, artikel, kenalan di bandar-bandar yang berbeza, dan sebagainya boleh ditambah.
  • Prototaip harus dibuat pada grid dimensi.
  • Jika sudah ada teks siap untuk prototaip, anda perlu menggunakannya. Ia dibenarkan untuk menggunakan teks ikan (Lorem Ipsum), tetapi anda perlu memahami kira-kira berapa banyak teks teks akan ada pada akhirnya.
  • Tajuk, teks dalam tetingkap pop timbul, item menu - perlu bermakna. Walaupun ia kemudian berubah semasa fasa pengeditan, anda boleh menulis tajuk "kerja" yang menyampaikan maksudnya.
  • Semuanya harus sangat skematik, tanpa unsur pewarna. Tetapi ada pengecualian. Untuk menunjukkan hasil yang dekat dengan jenis akhir kepada pelanggan (pengurusan, rakan sekerja, penguji), kadang-kadang masuk akal untuk menambah imej warna, logo dan penyelesaian warna.
  • Semua unsur interaktif, muka surat, tuan, beberapa objek harus dinamakan secara bermakna.
  • Adalah disyorkan untuk menutup prototaip dengan kata laluan. Secara lalai, mereka boleh didapati hanya dengan pautan langsung dari borang 23oh42.axshare.com.
  • Adalah perlu untuk mengurus hierarki di peringkat halaman, supaya bersarang dapat dilihat.
  • Untuk setiap resolusi, adalah disyorkan untuk membuat halaman yang berasingan: ini akan membantu untuk mengelakkan kekeliruan apabila membuat semua peringkat seterusnya: merancang, membuat TK, susun atur, pengaturcaraan. Setiap kebenaran untuk memisahkan folder.
  • Anda boleh menggunakan skrin permulaan di mana ia akan ditulis untuk projek, versi projek, yang membuat prototaip dan pautan ke kebenaran asas. Item ini adalah pilihan.

Axure mempunyai "cip" tersendiri, yang membezakannya daripada pesaing, di sini adalah set yang tidak lengkap:

  • Prototaip dibina berdasarkan unsur-unsur asas, seperti dalam pembina. Elemen pula digabungkan menjadi perpustakaan. Ini boleh menjadi ikon, kotak teks, butang, fon terpilih, serta objek kompleks dengan banyak panel dinamik.
  • Unsur-unsur yang paling asas ialah bekas segi empat tepat. Malah teks ikan atau tajuk kelihatan seperti bekas dengan latar belakang telus dengan sempadan tertarik. Dengan cara yang sama, dalam mana-mana bekas anda boleh meletakkan teks dan memformatkannya dalam apa cara sekalipun.
  • Panel dinamik. Untuk membuat elemen interaktif kompleks, anda perlu menggunakan panel dinamik. Ini adalah objek atau sekumpulan objek yang dipindahkan ke kawasan tak terhingga yang berasingan, di mana anda juga boleh membuat jumlah kerja yang tidak terhingga, negeri (Negeri) kedua-duanya pada tahap yang sama dan pada peringkat seterusnya bersarang. Skim ini digambarkan paling baik oleh mimpi di dalam mimpi dari filem "The Beginning". Panel dinamik sendiri boleh disembunyikan, berpindah, menukar kandungan pada halaman. Dengan bantuan mereka, tab, pop-up modal, kesan hover kompleks, beban halaman, dan lain-lain dilaksanakan.
  • Sarjana. Seperti yang disebutkan di atas, tuan bukan sahaja ciri yang menarik, tetapi juga keadaan yang penting. Dengan itu, anda boleh melaksanakan melalui elemen yang tidak berubah pada semua halaman: header, ruang bawah tanah, borang langganan, kad produk dalam senarai. Tuannya pada dasarnya adalah panel dinamik, hanya mempunyai ruang kerja yang berasingan (secara lalai di penjuru kiri bawah) dan fungsinya "menambah / mengeluarkan pada semua laman". Persoalannya timbul, apakah kesukaran hanya menyalin elemen ke setiap halaman baru? Oleh itu, jika prototaip terdiri daripada 2-3 muka surat dan anda tidak boleh mengganggu dengan tuan. Tetapi jika halaman 20, dan dalam proses kerja, anda perlu membuat perubahan kepada elemen akhir-ke-akhir, anda perlu membuat perubahan pada semua halaman, yang sangat menyusahkan.

Carta saiz

Grid dimensi direka untuk membuat sesetengah organisasi. Ia seperti membandingkan lembaran album A4 dan kertas graf: anda boleh melukis lukisan pada helaian kosong, tetapi ia lebih mudah untuk dilaksanakan menggunakan markup.

Prototaip akan menggunakan grid 16-kolom untuk lebar skrin 1280 piksel.

Apabila mengira saiz grid disyorkan untuk menggunakan gridcalculator.dk perkhidmatan.

Dokumen lalai hilang raslinovka dan panduan. Oleh itu, sebelum memulakan kerja pada prototaip, anda perlu menciptanya. Untuk ini anda perlukan:

  • Klik butang kanan tetikus di ruang kosong di ruang kerja.
  • Pilih Grid dan Panduan à Buat Panduan.
  • Kemudian anda boleh memilih daripada pratetap atau menetapkan sendiri.

Adalah disyorkan untuk mengikat panduan supaya mereka tidak bergerak secara tidak sengaja semasa bekerja. Untuk melakukan ini, klik kanan pada tempat kosong dan pilih Panduan Grid dan Panduan à Lock. Anda juga boleh membuat grid titik: Grid dan Panduan à Tunjukkan Grid.

Topik grid untuk reka bentuk responsif dinyatakan dalam artikel ini mengenai Habré.

Tinjauan antara muka

Antara muka Axure agak mudah dibaca dan mempunyai ambang masuk yang rendah. Pada masa yang sama, ia cukup kompleks untuk membolehkan semua fungsinya. Skrin kerja boleh dibahagikan kepada elemen berikut:

  1. Toolbar Utama, Toolbar dan Menu Utama.
  2. Halaman-halaman.
  3. Perpustakaan.
  4. Sarjana.
  5. Ruang kerja.
  6. Interactor.
  7. Garis Besar.

Butiran lanjut tentang setiap.

Toolbar Utama, Toolbar dan Menu Utama

Toolbar Utama adalah bar alat yang, dalam satu cara atau yang lain, mempengaruhi pergerakan widget atau sekumpulan widget di sekitar skrin. Pindah dimaksudkan oleh ruang kerja ketika bekerja dengan objek, dan bukan interaktivitasnya bagi pengguna. Dalam bar alat ini anda boleh:

Tukar cara widget dipilih (sama ada sama sekali atau sebahagiannya). Sambungkan Alat Segera - untuk menyambungkan widget, anda boleh menggunakan apabila menyusun peta minda (Mind map).

Alat pen - pen seperti dalam Photoshop. Anda boleh memotong elemen yang tidak diingini dari widget.

Lebih banyak - satu set elemen dari mana anda akan menggunakan hanya pemangkasan (Tanaman). Tetapi ia akan lebih mudah digunakan menerusi menu konteks (klik kanan pada elemen).

Zum. Perubahan skala. Mudah untuk melihat apa skala semasa untuk kawasan kerja. Untuk mengezum masuk, saya cadangkan menggunakan fungsi klasik: Ctrl + menatal dengan roda tetikus.

Depan / Kembali. Untuk menyesuaikan lapisan widget. Selalunya, widget berlapis satu sama lain, dengan menggunakan butang ini, anda boleh menyesuaikan tahap mereka.

Kumpulan / Ungroup. Untuk kumpulan widget dan keluarkannya. Ia sering digunakan jika satu kumpulan elemen perlu diselaraskan dengan sekumpulan unsur lain. Kekunci panas cukup mudah untuk menggunakan satu kiri - Ctrl + G ke objek kumpulan, Ctrl + Shift + G untuk mengalih keluar kumpulan.

Align / Distribute. Untuk menyelaraskan objek: di tengah, sepanjang tepi, objek kedudukan merata berturut-turut. Jelas sekali ini boleh dilihat di pautan. Dari pautan ini, anda dapat melihat bagaimana pengelompokan dan penyelarasan kumpulan elemen berfungsi.

Kunci / Buka kunci. Kunci item Diperlukan untuk membetulkan elemen, supaya tidak bergerak secara tidak sengaja.

Kiri / Kanan. Anda boleh mengeluarkan kawasan kiri dan kanan dengan alat untuk memperuntukkan lebih banyak ruang di bawah kawasan kerja.

Pratonton / Kongsi / Terbitkan. Lihat apa yang kelihatan prototaip dalam pelayar. Pratonton membolehkan anda menjana projek dalam penyemak imbas tempatan. Tetapi tekan F5 lebih cepat. Terbitkan - boleh dihantar ke pelayan Axure, di mana ia akan dapat diakses oleh sesiapa sahaja (kecuali kata laluan dilindungi).

Style Toolbar adalah bar alat yang bertanggungjawab untuk penampilan, saiz, pemformatan.

  • Pemformatan fon, jenis, saiz, warna, penjajaran teks - semuanya cukup standard.
  • Juga, blok sendiri boleh mengubah saiz sempadan, menambah bayangan, menukar warna blok, warna sempadan. Adalah mungkin untuk menetapkan tahap ketelusan yang berbeza atau kecerunan linear.
  • Keupayaan untuk menukar kedudukan objek sepanjang paksi x dan y, saiz panjang dan ketinggian (dengan keupayaan untuk menukar saiz secara proporsional).
  • Keupayaan untuk membuat objek tidak kelihatan (Tersembunyi).

Interaksi dengan Toolbar Gaya boleh dilihat dalam pautan video.

Halaman-halaman

Dalam blok ini, hierarki prototaip terbentuk, halamannya sendiri. Anda juga boleh membuat folder untuk pecahan halaman yang mudah. Untuk membuat halaman dengan pantas, anda boleh menekan Ctrl + Enter. Untuk membetulkan hierarki, sama ada anak panah di antara muka, atau Ctrl + anak panah pada papan kekunci.

Perpustakaan

Widget diri dengan keupayaan memilih perpustakaan. Perpustakaan Widget adalah standard yang datang dengan program ini. Internet penuh dengan pustaka pengguna (google dengan pertanyaan "muat turun perpustakaan Axure"). Anda juga boleh membuat perpustakaan sendiri untuk kemudahan - contohnya, perpustakaan ikon khusus, bar alat, tab, dll. Bersama prototaip siap sedia, seperti yang disebutkan di awal, perpustakaan yang luas akan dilampirkan, gunakannya untuk kesihatan anda.

Bar alat itu sendiri agak mudah digunakan - hanya seret widget yang dikehendaki ke ruang kerja.

Sarjana

Blok dengan tuan, seperti yang dinyatakan di atas. Penyihir pada halaman boleh ditambah secara manual dengan menyeret ke ruang kerja sebagai widget, atau melalui Tambah Halaman (butang kanan tetikus di wizard). Membuat, menambah dan bekerjasama dengan tuan boleh dilihat pada video. Tuan boleh dibuat dari dua jenis: terkunci di satu tempat dan dengan keupayaan untuk bergerak. Tajuk tapak boleh dibuat tetap pada tempat itu (Kunci ke Lokasi Induk) di mana ia dicipta, dan selebihnya boleh dilakukan dengan lebih baik tanpa (Tempat Di Mana Mana).

Ruang kerja

Ruang kerja adalah tempat prototaip dibina. Halaman yang digunakan, ahli sihir, panel dinamik disusun dalam tab di atas kawasan kerja.

Interactor

Secara ringkas, dengan bantuan bar alat ini, keseluruhan tindakan diprogramkan. Ia terdiri daripada tiga tab: Properties, Notes, Style.

Hartanah

Набор событий, которые можно задействовать для определенного взаимодействия элемента или группы элементов. Их всего около 30, но обычно используются в штук 5 из них:

  • OnClick - как понятно из названия, срабатывание по клику. Например, нужно сделать так, чтобы при клику по кнопке появлялось модальное окно. Самое часто используемое событие.
  • OnMouseEnter/OnMouseOut - действие, которое будет происходить при наведении на элемент, снятие наведения.
  • OnSwipeLeft/OnSwipeRIght - свайп, прокрутка пальцем на мобильных устройствах.

Помимо программирования элементов при взаимодействии с ними можно также задавать поведение элементов просто при загрузке страницы или скролле. Для этого не должно быть выделено ни одного элемента, тогда в этом блоке появятся следующие свойства:

  • OnPageLoad - действие, которое запустится, как только загрузится страница. Пример - пролистывания у слайдера, анимация элементов.
  • OnWindowScroll - событие, которые сработает как только пользователь доскроллит до определенного маркера. Пример - анимация в лендингах, появление кнопки "наверх".

Примеры использования этих событий будут рассмотрены дальше в прототипе.

Shape

Позволяет изменить форму виджета используя готовые пресеты, а также с возможностью сделать свою форму.

Interaction styles

Имеет 4 значения:

  • MouseOver - ubah objek apabila anda melayang. Digunakan untuk menyerlahkan pautan, sempadan elemen.
  • MouseDown - klik pada item tersebut. Pada masa yang sama, elemen itu sendiri menyokong perubahan ini sementara butang tetikus ditekan.
  • Dipilih - perubahan untuk nilai yang dipilih. Ia berfungsi bersamaan dengan menukar nilai dalam Interaksi.
  • Dinyahaktif - sama dalam mekanik untuk dipilih, hanya makna semantik yang "dilumpuhkan".

Nota

Membolehkan anda meninggalkan ulasan pada setiap item. Ini boleh berguna apabila anda perlu menerangkan kerja widget, tetapi tidak ada kemungkinan untuk memprogramnya, atau ia tidak begitu visual dan perlu menjelaskannya dengan teks.

Gaya

Sebahagiannya menggandakan fungsi Toolbar Gaya, dengan hanya beberapa ciri. Dengan elemen yang dipilih, anda boleh mengedit jarak baris, serta inden dalaman untuk teks dalam bekas. Jika tiada item dipilih, pilihan berikut dipaparkan:

  • Tetapkan warna untuk semua halaman.
  • Tuang imej di latar belakang.
  • Buat prototaip hitam dan putih.
  • Sapukan lakaran tangan ke prototaip.
  • Keupayaan untuk menetapkan kedudukan (Page Alignment) prototaip di tengah halaman, dan bukan secara lalai ke kiri.

Garis Besar

Bar alat ini mengandungi semua widget yang digunakan pada halaman ini. Apabila anda mengklik pada item dalam senarai, ia akan diserlahkan di ruang kerja. Selalunya, kawasan ini akan digunakan untuk mencari panel dinamik dan negeri mereka (Negeri).

Kunci Kekunci dan LifeHacks

Terdapat hotkeys untuk banyak tindakan di Axure. Tetapi jauh dari mereka semua mudah untuk menekan, kerana anda perlu menggunakan dua tangan, yang kadang-kadang tidak dibenarkan dan mudah untuk mengklik mouse. Oleh itu, senarai akan sekurang-kurangnya kecil, tetapi diuji dan disyorkan untuk digunakan. Di sini saya juga akan menyertakan beberapa teknik yang membantu mempercepat aliran kerja.

  1. Ruang yang dikunci membolehkan anda menggerakkan ruang kerja dan bukannya skrol menegak atau mendatar.
  2. Ctrl + A, Ctrl + Z, Ctrl + X, Ctrl + C, Ctrl + V, Ctrl + B, F2 - fungsi standard, disyorkan untuk digunakan.
  3. Dengan cipher yang diapit, anda boleh memindahkan widget di sepanjang kawasan kerja tepat di sepanjang paksi x dan y.
  4. Menekan Ctrl sementara objek yang dipilih akan menyalin widget. Sekiranya anda memegang Shift semasa memegang objek yang disalin, ia akan tetap selari dengan yang asal.
  5. Ctrl + G - kumpulankan widget. Ctrl + Shift + G - pengelasan keluarkan.
  6. F5 - mod pratonton penyemak imbas. Di masa hadapan, anda boleh mengemas kini tab dalam pelayar untuk melihat perubahan.
  7. F6 - membuka tingkap untuk menerbitkan prototaip ke pelayan Axure.
  8. Malangnya, dalam Axure tidak ada keupayaan terbina dalam untuk menganggarkan jarak antara objek, seperti yang dilaksanakan dalam Sket dan dalam Adobe XD baru. Tetapi anda boleh menggunakan "kruk" dalam bentuk segi empat tetap biasa. Prosedur ini mudah, tetapi bagi setiap ahli bomba terdapat video.
  9. Axure menyediakan panduan pintar. Ini adalah perlu bagi kedudukan yang tepat bagi objek berbanding satu sama lain. Apabila anda menyeret mereka, sempadan dan pusat objek lain ditunjukkan (secara lalai, dalam bentuk garis biru). Oleh itu, apabila menyeret, disarankan untuk menavigasi mereka supaya prototaip itu lancar dan jelas.
  1. Adalah disyorkan untuk menetapkan kedudukan di tengah halaman. Titiknya bukan sahaja kelihatan lebih menyenangkan untuk mata, tetapi juga dalam kedudukan objek. Jika panel dinamik disematkan pada tempat tertentu pada skrin, satu offset akan berlaku jika kandungan halaman secara lalai (kiri).
  2. Panel dinamik atau objek yang kemudiannya akan digunakan dalam pengaturcaraan interaksi harus dinamakan secara bermakna. Jika tidak, objek yang dikehendaki akan sukar dicari dalam senarai.

Prototaip kedai dalam talian utama (desktop).

Kemasukan berakhir, dan perbincangan prototaip bermula. Sebuah kedai dalam talian telah dipilih, kerana ia mempunyai cip berfungsi yang paling pelbagai yang boleh ditunjukkan, serta halaman pendaratan, unsur-unsur yang akan dipaparkan di halaman utama. Adalah penting untuk diperhatikan bahawa prototaip ini adalah penting terutamanya untuk menunjukkan fungsi, bagaimana ia berfungsi, dan bukan sebagai produk siap. Oleh itu, untuk memaksimumkan diri saya dari aplikasi akhir, saya memilih topik menjual bonsai, menambah sampah kecil. Oleh itu, ambil utama sebagai satu set elemen tertentu untuk digunakan, dan bukan sebagai arahan akhir pada projek anda.

Tujuan prototaip adalah untuk menunjukkan fungsi, oleh itu ia akan kehilangan halaman seperti "Kenalan", "Berita", "Artikel", kerana laman-laman ini dari segi fungsi tidak dapat menunjukkan sesuatu yang baru.

Topi

Cap tersebut dilaksanakan menggunakan wizard. Bagaimana untuk mencipta tuan telah diterangkan lebih awal. Dalam topi adalah beberapa elemen yang bernilai lebih terperinci.

Logo

Tidak ada kesukaran dalam hal ini, tetapi satu hack hayat dikaitkan dengannya. Jika elemen yang perlu aktif (pautan ke halaman atau tindakan hover tertentu, klik), tetapi ia sendiri terdiri daripada beberapa unsur, anda boleh memasukkan bekas telus di atasnya. Oleh itu, prototaip menerapkan logo, kad dengan artikel yang berkaitan.

Menu

Undur bawah bawah dilaksanakan menggunakan Inspektor -> Properties -> Gaya Interaksi -> MouseOver toolbar. Dalam tetingkap yang muncul, letakkan tanda di Underline.

Menu pop timbul boleh dilaksanakan dengan cara yang berbeza. Sekiranya ia mudah (tanpa pop timbul tambahan), anda boleh menggunakan widget siap sedia.

Dalam hal kedai online yang menjual bonsai, sukar. Mekanik adalah seperti berikut:

  • Di peringkat pertama terdapat satu panel dinamik dengan dua negeri (Negeri). Dalam keadaan pertama - widget teks "Direktori". Dalam keadaan kedua, widget yang sama, hanya dengan semua item menu. Melintasi elemen (OnMouseOver) mencetuskan suis ke keadaan kedua (Set Panel Negeri -> pilih panel dinamik -> State2 dan "Ok"). Sekiranya pemilihan dari panel dinamik dipilih (OnMouseOut), ia beralih ke keadaan pertama (Set Panel Negeri -> pilih panel dinamik -> State2 dan "OK").
  • Dalam keadaan kedua, panel dinamik lain dicipta, yang tersembunyi (Tersembunyi). Di dalamnya kita membuat dua negeri dalam bentuk dua kad produk dengan harga, nama dan imej. Melayang atas nama (OnMouseOver) akan menyebabkan peralihan ke keadaan seterusnya (SetPanelState -> pilih panel dinamik -> pilih Seterusnya). Anda boleh membuat peralihan kepada keadaan tertentu, masing-masing, setiap nama untuk mengikat kad anda. Untuk melakukan ini, bukannya Seterusnya, anda mesti memilih keadaan yang sesuai. Pastikan tanda "Tunjukkan panel jika Tersembunyi".
Sekiranya anda perlu memprogram beberapa interaksi tipikal (sebagai contoh, kesan pada hover), disarankan agar anda pertama kali melaraskan satu objek sepenuhnya, dan kemudian kalikan. Ini akan mempercepatkan kerja.

Perintah Panggil Balik

Perintah panggilan belakang terdiri daripada pencetus, dalam kes kami, butang dan tetingkap pesanan panggil balik model yang paling.

Butang dibuat melalui bekas biasa, yang mana kami menggunakan Gaya Interaksi MouseOver. Kesan hover boleh ditunjukkan dalam apa jua cara, bergantung kepada kemahiran pereka anda. Sekiranya tidak mencukupi, anda hanya boleh menukar warna kelabu pada butang. Contohnya menukar warna, warna fon dan warna sempadan bekas.

Kami membuat tetingkap modal menggunakan panel dinamik dengan satu keadaan dan segera menyembunyikannya (Tersembunyi). Sebelum meneruskan kandungan, perlu menyediakan penempatan tetingkap modal tepat di tengah-tengah skrin. Anda tentu boleh menyelaraskan secara manual, tetapi disebabkan oleh hakikat bahawa pengguna yang berbeza mempunyai ketinggian dan lebar yang berbeza dari skrin, mereka mungkin tidak muncul di tengah. Oleh itu, kami melakukan perkara-perkara berikut:

  • Klik kanan pada panel dinamik.
  • Pilih Pin ke Penyemak Imbas.
  • Masukkan tanda "Pin ke tetingkap penyemak imbas".
  • Pilih Pusat dan Tengah, kemudian klik "OK".

Apa yang bagus, selepas itu panel dinamik boleh dialihkan di mana-mana sahaja, dan ia masih akan kelihatan tepat di tengah-tengah.

Kemunculan jendela modal dilakukan seperti berikut:

  • Pilih butang pencetus.
  • Dalam Interaksi pilih OnClick.
  • Dalam blok Widget pilih Tunjukkan / Sembunyikan.
  • Cari widget yang dikehendaki.
  • Keterlihatan Parameter diterjemahkan ke Tunjuk.
  • Dalam lebih banyak Pilihan, pilih merawat sebagai peti cahaya dan pilih sesuatu yang berwarna kelabu dan lut sinar sebagai latar belakang.

Tingkap modal terdiri daripada dua widget Bidang Input (dipanggil Field Input (dipilih)), butang "Pesanan", salib untuk menutup tetingkap, dan dua label yang akan muncul apabila borang dihantar dengan betul dan tidak betul.

Salib adalah ikon biasa dari set Ikon. Tindakan - sembunyikan tetingkap modal apabila mengklik pada salib. Ia dilakukan dengan cara yang sama seperti kemunculan tingkap modal, hanya dalam parameter Visibility kami menterjemahkan butang radio ke posisi Hide.

Pengesahan mudah untuk pengisian diprogramkan dalam bentuk pesanan balik panggilan balik. Jika tiada aksara yang dimasukkan dalam medan "telefon", mesej akan muncul: "Jangan lupa tentukan nombor telefon!". Jika mana-mana watak dimasukkan, mesej "Permohonan itu telah berjaya dihantar! Pakar kami akan menghubungi anda tidak lama lagi!"

Untuk medan input, anda boleh menetapkan teks teks - petunjuk dengan petunjuk apa yang harus dimasukkan dalam medan ini.

Pengesahan diprogramkan seperti berikut:

  • Kami membuat dua blok dengan teks penghantaran yang berjaya dan tidak berjaya. Terjemahkan ke dalam kedudukan Tersembunyi.
  • Pada butang pencetus tetapkan OnClick tindakan.
  • Di bahagian atas tetingkap, pilih Edit Keadaan.
  • Dalam tetingkap yang muncul, ketik: teks pada widget, widget medan input dengan telefon, sama, nilai, nilai kosong. Dalam medan Penerangan berikut harus ditulis: "jika teks pada" Nama widget medan input dengan telefon "sama dengan" "". Klik Ok.
  • Pilih Tunjuk. Anda boleh menambah animasi, contohnya, hanya pudar (penampilan) selama 1 milisaat.
  • Tambah Tunggu di blok kiri, anda boleh meletakkan 2 saat. Digunakan untuk mengira, sebagai contoh, menunggu antara tindakan.
  • Letakkan Sembunyikan dan pilih widget dengan amaran yang anda perlukan untuk mengisi data.

Oleh itu, jika medan input dengan nombor telefon kosong, apabila anda mengklik pada butang "Pesanan", amaran akan muncul bahawa anda perlu mengisinya. Hilang dalam 2 saat.

Mesej kejayaan dikonfigurasikan melalui keadaan kedua (Kes):

  • Dalam Interaksi butang "Pesanan" klik pada OnClick, Kes 2 dibuat secara automatik.
  • Kami memaparkan teks dengan berjaya menghantar melalui Show.
  • Seterusnya, tunggu (Tunggu), sebagai contoh, saat 3.
  • Dan sembunyikan (Sembunyi) tetingkap modal.

Ternyata jika keadaan pertama tidak puas (iaitu, ada beberapa nilai dalam medan input dengan nombor telefon), maka keadaan kedua dipenuhi. Mesej muncul bahawa pakar akan menghubungi segera, dan selepas 3 saat tetingkap modal akan hilang.

Butang atas

Butang "naik" digunakan untuk tatal ke skrin pertama. Biarkan saya mengingatkan anda bahawa kita masih berada di dalam wizard "Cap". Kami melaksanakannya seperti berikut:

  • Tambah ikon dalam bentuk anak panah ke ruang kerja, atau, sebagai contoh, gunakan segitiga kontena.
  • Kami menterjemah ke dalam panel dinamik dan menyembunyikannya (ia adalah panel, bukan elemen itu sendiri).
  • Seterusnya, kami membetulkan panel di satu tempat dalam penyemak imbas. Klik kanan pada panel -> Pin ke penyemak imbas. Dalam tetingkap pilih sebelah mana untuk melampirkannya. Contohnya digunakan di sebelah kanan dan bawah (Kanan dan Bawah) dengan indent 30 piksel.

Sekarang anda perlu menyediakan butang itu sendiri untuk muncul apabila menatal ke titik tertentu pada halaman. Klik pada tempat kosong di ruang kerja -> dalam Interaksi pilih OnWindowScroll -> di bahagian atas tetingkap klik pada Edit Keadaan -> Dalam keadaan pilih nilai -> klik pada fx -> di tetingkap yang muncul klik pada Masukkan Variabel Fungsi -> pilih fungsi dalam Tetingkap Window.scrollY dan klik "Ok" -> nilai berikut harus lebih besar daripada dan nilai -> Dalam medan input terakhir, tentukan bilangan piksel yang menatal sehingga butang muncul. Contohnya menggunakan 600 px. Akibatnya, perkara berikut harus ditulis dalam medan Penerangan: jika "[[Window.scrollY]]" lebih besar daripada "600". Kini anda perlu memilih tindakan itu sendiri. Dalam Widgets, pilih Show / Hide -> klik dalam senarai pada panel dinamik; butang ke atas -> dalam pilihan, pilih Bawa ke depan.

Butang muncul, kini kita perlu menghilangkannya apabila kita dipindahkan ke skrin pertama. Untuk melakukan ini, sekali lagi klik dalam Interaksi pada OnWindowScroll -> Kes 2 akan muncul, dengan keadaan Yang Lain Jika Benar -> dalam Widget pilih Tunjukkan / Sembunyikan -> cari butang atas dan pilih hide.

Opsyenal, anda boleh membuat kesan apabila anda menghidupkan butang ke atas, menggunakan dua negeri (Negeri), OnMouseEnter dan OnMouseOver.

Lebar lebar penuh

Ramai elemen di laman web ini meregangkan lebar keseluruhan skrin, termasuk topi. Ini boleh dilakukan dalam dua cara: melalui bekas biasa dan OnPageLoad dan dengan bantuan panel dinamik. Untuk topi, pilih pilihan kedua.

  • Kami menterjemahkan sebarang bekas ke dalam panel dinamik, meninggalkannya kosong (mengeluarkan bekas atau menjadikannya telus).
  • Dalam Sifat panel dinamik kita dapati rekod 100% Wide (penyemak imbas sahaja) dan meletakkan tanda semak.
  • Dalam Gaya dalam warna belakang kita menetapkan warna, dalam kes prototaip kita putih atau #FFFFFF.

Sekarang panel akan secara automatik menghulurkan kepada sebarang resolusi.

Menu tetap

Menu tetap ialah apabila, apabila tatal ke bawah, sebahagian daripada elemen navigasi dari tajuk kekal di bahagian paling atas skrin.

Ini dilakukan seperti berikut:

  • Untuk memulakan, kami menentukan elemen mana yang akan berada dalam topi tetap. Dalam contoh, ini adalah versi logo yang lebih kecil, menu tanpa unsur pop timbul, dan butang pesanan panggilan.
  • Seterusnya, salin elemen terpilih dan terjemahkan ke dalam panel dinamik yang berasingan.
  • Panel tersembunyi (dinamik).
  • Kapas kedua substrat melakukan lebar keseluruhan, seperti dalam contoh terdahulu.
  • Klik kanan pada panel -> Pin ke penyemak imbas -> Di Pin Horisontal, pilih Pusat, dalam Pin Vertikal - Atas. Dan OK.
  • Sekarang anda perlu menetapkan penampilan topi tetap. Ini dilakukan dengan analogi dengan butang itu. Untuk melakukan ini, dalam halaman Interaksi di OnWindowScroll kita buat kes ketiga (klik kanan pada OnWindowScroll -> Add Case).
  • Tambah keadaan. Dalam keadaan, pilih nilai -> klik pada fx -> dalam tetingkap yang muncul, klik pada Masukkan Variabel Fungsi -> Pilih fungsi Window.scrollY dalam Tetingkap dan klik "OK" -> nilai berikut harus lebih besar daripada dan nilai -> Di bidang terakhir input yang kami tetapkan menerusi bilangan bilangan piksel tetikus yang skrol tetap muncul. Tentukan ketinggian cap - 120px. Akibatnya, perkara berikut harus ditulis dalam medan Penerangan: jika "[[Window.scrollY]]" lebih besar daripada "120". Kini anda perlu memilih tindakan itu sendiri. Dalam Widgets, pilih Show / Hide -> klik dalam senarai pada panel dinamik header tetap -> dalam pilihan, pilih Bawa ke depan. Untuk penampilan yang lancar dari topi, anda boleh menentukan animasi slaid ke bawah.
  • Ia juga penting untuk menukar keadaan mencetuskan kes ketiga, kerana lalai adalah Lain jika benar, sebelum itu, Jika syarat telah ditetapkan untuk butang naik. Oleh itu, sekarang anda perlu klik kanan pada kes 3 dan pilih Togol jika / jika lain.
  • Seterusnya, tentukan keadaan 4 Kes (Tambah Kes), di mana tajuk yang tetap akan disembunyikan jika kami menatal dan menyeberangi sempadan sebanyak 120 piksel. Dalam kes ini, cukup untuk menyembunyikan tajuk tetap (Sembunyikan).

Skrin pertama atau cara membuat paralaks dan meregangkan imej ke lebar.

Sebagai tambahan kepada imej utama, yang mana kita mahu memohon kesan paralaks dan meregangnya, terdapat anak panah, apabila diklik, ia skrol ke skrin kedua. Ia melakukan ini dengan analogi dengan butang itu.

  • Namakan elemen tersebut (anda boleh membuat titik telus yang dibuat terlebih dahulu) yang mana tatal tersebut harus dilakukan.
  • Pilih anak panah, dalam Properties klik pada OnClick.
  • Dalam senarai Tindakan, pilih Tatal ke Widget (pautan Anchor), kemudian cari elemen kami, tandakan Tatal secara menegak sahaja. Anda juga boleh memilih animasi, seperti Swing.

Meregangkan imej dengan lebar

Sebelum ini, kami membentangkan panel dinamik merentas keseluruhan lebar skrin, hanya menggunakan pengisi. Biarkan saya menunjukkan kepada anda bagaimana untuk meregangkan imej. Untuk ini:

  • Buat panel yang dinamik berdasarkan unsur mana-mana, kemudian hapuskan dan edarkan panel ke saiz yang dianggarkan ketinggian imej.
  • Dalam Sifat panel dinamik kita dapati rekod 100% Wide (penyemak imbas sahaja) dan meletakkan tanda semak.
  • Dalam Gaya kita dapati imej Kembali -> klik import dan pilih imej pada komputer anda.
  • Dalam menu lungsur, di mana Tiada ulangan dipilih, pilih Regangkan untuk Tutup.

Contohnya menunjukkan bahawa panel dinamik itu sendiri mempunyai lebar 300 px, sambil meregangkan ke seluruh lebar skrin.

Bagaimana untuk membuat kesan paralaks

Kesan paralaks (misalnya, menegak) dicipta dengan memperlahankan penggiliran beberapa elemen terhadap latar belakang orang lain. Ia ditetapkan seperti berikut:

  • Dalam halaman Interaksi (iaitu ketika tiada elemen dipilih) menggunakan fungsi OnWindowScroll.
  • Dalam Widget, pilih Pindah -> klik pada elemen yang dikehendaki (dalam kes kami, ini adalah panel dinamik dengan imej bonsai) -> dalam sifat, Pindah ke harus dipilih, dan dalam medan input klik y pada fx.
  • Seperti pada contoh sebelumnya dengan butang atas, pilih Window.scrollY -> maka anda perlu menyesuaikan formula dengan tangan anda, menambah dalam medan input untuk mendapatkan nilai berikut: [[Window.scrollY * 0.25]]. Nilai 0.25 bermaksud kelewatan yang mana elemen akan bergerak. Ia boleh disesuaikan dengan citarasa anda.

Skrin kedua atau mengatasi faedah

Seterusnya, kami melaksanakan kesan lain apabila menatal, iaitu penampilan cantik kelebihan. Unsur kreativiti ini tidak mencukupi, jadi saya memanggil mereka mengikut kedudukan mereka. Ia hanya dua widget teks dengan tajuk dan teks ikan, serta ikon. Jika pada penciptaan prototaip adalah perlu untuk menyediakan kandungan ini, maka kami melakukannya dengan lebih sengaja, bukan dengan contoh.

Algoritma penampilan adalah hampir sama dengan butang menaik. Perkara utama di sini adalah untuk meneka apabila mereka mencapai jarak. Penampilan itu sendiri boleh direalisasikan melalui Pindah, tetapi contohnya memudahkannya. Unsur-unsur itu sendiri tidak bergerak di mana-mana, mereka muncul (Tunjuk) dengan animasi (Animate) yang meluncur ke kiri (slaid kiri), naik (slaid ke atas) dan ke kanan (slaid kanan).

Skrin ketiga atau jenis barang yang ketiga

Цель данного блока показать, какую можно сделать анимацию при наведении на карточку товара или категорию, как на примере. Для этого, как ранее говорилось достаточно создать один элемент, заранее подогнанным по размеру. На примере, его ширина составляет 300 px, т. е. на экране уместиться ровно 4 элемента.

Итак, цель анимации сделать так, чтобы при наведении на элемент выдвигалась полупрозрачная плашка с информацией, а при снятии выделения она отъезжала. Untuk ini:

  • Берем контейнер заданного размера (или подходящее изображение, как на примере) и переводим в динамическую панель (назовем ее "Бонсай в сортах").
  • Внутри динамической панели с изображением создаем контейнер с прозрачностью (29 на примере), добавляем текстовые блоки с описанием (белого цвета для контрастности). Потом все это переводим в динамическую панель (назовем "Бонсай в сортах слайд"). Расположим его сразу после основного изображения. Таким образом, через окошко динамической панели "Бонсай в сортах" в 300 на 300 пикселей, динамическая панель ("Бонсай в сортах слайд"), которая находится внутри, не будет видна.
  • Далее, делаем так, что при наведении на динамическую панель "Бонсай в сортах" передвигалась панель "Бонсай в сортах слайд". Untuk melakukan ini, pilih panel "Bonsai dalam jenis", pilih dalam Interaksi OnMouseEnter.
  • Dalam Widgets, pilih Pindah, pilih "Bonsai dalam jenis slaid" dalam senarai elemen dan dalam keadaan di mana y kami menetapkan -300 (pergerakan sepanjang paksi y dengan tolak 300 piksel, iaitu). Pada langkah itu hendaklah nilai oleh. Anda boleh menambah animasi, sebagai contoh, Swing.
  • Agar panelnya hilang, prosedurnya sama, hanya anda perlu memilih OnMouseOut, dan nilai itu mestilah positif.

Apabila satu elemen sudah siap, ia boleh didarabkan dengan empat. Dan di sana, jika perlu, dalam setiap perubahan imej dan keterangan.

Skrin keempat atau tindakan stok

Di blok ini terdapat beberapa hooliganisme dan hiasan yang tidak masuk akal.

Laporan Songsang

Dengan unsur-unsur ini, ia biasanya tidak patut diganggu, cukup kadang-kadang menunjuk gambar atau blok. Tetapi jika ada keinginan, anda boleh melaksanakan perubahan minit dan saat. Satu-satunya perkara yang negatif adalah bahawa ia tidak maju secara teknologi kerana ia mungkin kelihatan (jika tuan-tuan Axure membaca artikel ini dan siapa yang tahu bagaimana melakukannya dengan rumit pendek - menulis, kerana pengetahuan ini tidak dijumpai dalam borjuasi).

  • Kami membuat beberapa bekas untuk setiap digit, yang kami panggil untuk tidak keliru (contohnya, "Unit, saat", "Puluhan saat").
  • Dalam halaman Interaksi (ingat, keluarkan pemilihan dari elemen) klik pada OnPageLoad.
  • Dalam Widget, ambil Set Teks dan dalam elemen pilih "Unit saat" dan tetapkan nilai kepada 8.
  • Dalam Widget, kami mengambil Tunggu dan tetapkan nilai kepada 1000 ms (iaitu, 1 saat).
  • Dalam Widget, ambil Set Teks dan dalam elemen pilih "Unit saat" dan tetapkan nilai kepada 7.
  • Dalam Widgets, kami mengambil Tunggu. Kami menetapkan nilai kepada 1000 ms.

Ulangi sebanyak yang anda tidak puas dengan hasilnya. Sekali dikira hingga 10, kita menukar puluhan detik, dan telah dikira sehingga 60 minit. Pada masa yang sama, tidak perlu memilih elemen dalam Widget setiap kali dengan pen. Dalam bidang tindakan Organisasikan, anda boleh menyalin dan menyisipkannya.

Elemen mencondong

Untuk memutar elemen, alihkan kursor ke sudutnya dan tahan kekunci Ctrl. Selanjutnya, matikan tetikus. Pemaju tidak mencipta basikal dan melaksanakannya seperti dalam semua editor grafik.

Sejurus selepas kaunter terdapat unsur yang sentiasa mengubah kedudukannya. Pelaksanaannya adalah sama dengan contoh sebelumnya dengan pemasa, dengan satu-satunya perbezaan pelaksanaannya lebih mudah:

  • Ambil widget teks, tetapkan nilai kepada "1000 rubel", condong ke satu arah.
  • Kami menterjemahkannya ke dalam panel dinamik dan menyalin negeri pertama (Negeri).
  • Keadaan kedua adalah condong ke arah yang lain.
  • Dalam halaman Interaksi, pilih OnPageLoad.
  • Dalam Widget, pilih Set Panel Negeri dan dalam lajur Pilih negeri, pilih seterusnya. Kami semak bungkus dari yang terakhir ke pertama (menggunakan ini kita gelung proses). Juga, tandakan di Ulang setiap. Nombor dalam milisaat menunjukkan kelajuan yang mana keadaan akan menggantikan satu sama lain. Anda juga boleh menambah animasi. Dan klik "OK".

Dengan cara ini, anda boleh melaksanakan sebarang animasi. Sebagai contoh, saya melakukan animasi arnab, dan, lebih tepat untuk bekerja, animasi loading.

Kesan Potong

Satu lagi hack hayat ialah pengenaan bekas lalai pada objek lain, seperti imej. Untuk melakukan ini, ambil bekas, dalam Properties -> Pilih bentuk -> Tukar ke bentuk tersuai. Dan kemudian mengklik pada unsur-unsur atau menambah yang baru akan memberikan apa-apa bentuk.

Skrin kelima atau bagaimana untuk memuat naik video Youtube ke prototaip

Anda hanya boleh membuat video dalam prototaip. Dalam perpustakaan lalai, anda perlu mencari widget Frame Inline. Siarkan di ruang kerja seperti yang anda mahu video itu berada. Kemudian klik pada item ini. Dalam pautan pilih muncul pada url luaran atau fail dan dalam medan input masukkan url borang //www.youtube.com/embed/b5dexpeO-l4. Anda boleh mendapatkannya di YouTube dengan mengklik butang "saham" di bawah video dan memilih kod html. Kami mengabaikan kod itu sendiri, hanya menyalin URL dari contoh di atas.

Skrin keenam atau bagaimana untuk membuat slider di Axure

Mencapai unsur biasa yang mungkin anda sudah tahu bagaimana untuk melakukannya. Tetapi jika anda tatal di sini hanya untuk ini saya akan ulangi dari awal:

  • Kami mengambil bekas atau mana-mana objek lain yang mungkin menunjukkan kandungan gelangsar.
  • Kami menerjemahkannya ke dalam panel dinamik.
  • Salin atau tambahkan keadaan (Negeri). Sebagai contoh, bekas biasa disalin, di mana ia ditulis "Slide 1".
  • Tambah item yang boleh menjadi pencetus untuk menukar gelangsar. Anda boleh menukarnya secara automatik, menggunakan contoh yang telah dibincangkan sebelum ini menggunakan halaman Interaksi dan OnPageLoad. Di sini kita menggunakan ikon anak panah, meletakkannya di sebelah kiri dan kanan.
  • Pada ikon di Properties yang kami gantung OnClick. Dalam Widgets di sebelah kiri, pilih Set Panel Negeri. Dalam senarai kami dapat mencari panel gelangsar dinamik yang diperlukan. Dalam keadaan Pilih, pada butang ke kanan, pilih Seterusnya, pada butang di sebelah kiri - Sebelum dan tandakan Bungkus dari pertama hingga terakhir. Animasi dilakukan masing-masing pada butang ke kiri slaid kiri, kanan slaid kanan.

Maklumat ketujuh atau kelapan atau maklumat syarikat dan artikel baru-baru ini

Objek tipikal yang boleh diletakkan seperti yang anda suka (secara semulajadi mengikuti grid logik dan dimensi). Blok "Bahan baru dalam blog kami" dilaksanakan melalui bekas telus yang dipaparkan ke hadapan (Barisan). Hover edge ditentukan melalui MouseOver.

Skrin kesembilan atau bagaimana untuk lulus

Kad boleh ditetapkan dengan beberapa cara:

  1. Sebuah bekas dengan menandatanganinya adalah kad.
  2. Tangkapan skrin dari Google Maps atau Yandex.Maps.
  3. Dengan memasukkan peta interaktif penuh ke dalam prototaip.

Bagaimana untuk melakukan yang pertama dalam dua kes pertama, anda sendiri boleh memikirkannya, tetapi bagaimana untuk melaksanakan pilihan ketiga, anda perlu mempertimbangkan dengan lebih terperinci.

Mula-mula anda perlu menggunakan widget lalai yang sama yang kami gunakan untuk memasukkan video dari YouTube - Inline Frame. Letakkannya di kawasan kerja, kerana ia akan menjadi mudah. Seterusnya, anda perlu mengambil dengan Yandex.Maps kod yang anda sudah perlu letakkan mengikut rujukan dalam widget itu sendiri:

  • Klik dua kali pada bingkai inline elemen
  • Sisipkan Pautan Pautan ke url atau fail luaran.

Sekarang mari lihat cara untuk mendapatkan kod dari Yandex.Maps:

  • Pergi ke //yandex.ru/maps/.
  • Kami memandu di alamat yang dikehendaki dari kenalan.
  • Di sudut kiri bawah sebelah cetakan dan maklum balas alat, kami dapati butang "kongsi" dan klik padanya.
  • Dari bidang "memasukkan kod ke laman web" kami menyalin sebahagian daripada URL yang kelihatan seperti ini: //yandex.ru/map-widget/v1/-/CBQX48GkdD

Sekarang kita perlu meregangkan peta ke lebar penuh skrin. Tidak mustahil untuk dilaksanakan melalui panel dinamik, anda perlu menggunakan kaedah kedua:

  • Dalam halaman Interaksi, pilih OnPageLoad.
  • Dalam Tindakan, pilih Tetapkan Saiz dan klik pada elemen Rangka Inline kami.
  • Di Lebar, klik pada fx.
  • Klik pada Sisip Variabel Fungsi.
  • Dari senarai, pilih Window.width dan klik pada "OK".
  • Dalam senarai juntai bawah Anchor, pilih Atas atau Pusat.

Ruang bawah tanah

Unsur-unsur di ruangan bawah tanah boleh dibahagikan kepada dua blok dengan syarat - bentuk langganan dan jenis maklumat tambahan itu sendiri. Yang terakhir ini tidak masuk akal untuk menggambarkan secara berasingan, tetapi pada bentuk langganan adalah berguna untuk berhenti secara lebih terperinci, kerana ia adalah versi yang sedikit rumit dari perintah panggilan balik.

Dalam borang panggil balik, kami menyatakan bahawa jika medan itu kosong, maka ia diisi dengan salah. Dengan borang langganan, anda boleh menunjukkan kehadiran simbol @.

  • Kami membuat dua blok dengan teks penghantaran yang berjaya dan tidak berjaya. Terjemahkan ke dalam kedudukan Tersembunyi.
  • Pada butang pencetus kami menetapkan tindakan OnClick.
  • Di bahagian atas tetingkap, pilih Edit Keadaan.
  • Dalam tetingkap yang muncul, ketik: teks pada widget, medan input widget dari e-mel, tidak mengandungi, nilai, @. Bidang Penerangan hendaklah menulis perkara berikut jika teks pada E-mel tidak mengandungi "@". Klik Ok.
  • Pilih Tunjuk. Anda boleh menambah animasi, contohnya, hanya pudar (penampilan) selama 1 milisaat.
  • Tambah Tunggu di blok kiri, anda boleh meletakkan 2 saat. Digunakan untuk mengira, sebagai contoh, menunggu antara tindakan.
  • Letakkan Sembunyikan dan pilih widget dengan amaran yang anda perlukan untuk mengisi data.
  • Tambah kes kedua (Kes).
  • Pilih Show / Hide.
  • Klik pada widget teks dengan reka bentuk yang berjaya.
  • Pilih Tunggu dan tetapkan nilai kepada 2,000.
  • Sembunyikan mesej tentang penghantaran berjaya melalui Sembunyikan.

Kesimpulannya

Seperti yang disebutkan di awal, ini hanya bahagian pertama. Dalam artikel masa depan akan terdapat katalog, kad produk, akaun peribadi dan kebenaran lain. Anda juga boleh meninggalkan soalan-soalan komen mengenai pelaksanaan unsur - mungkin saya akan membincangkannya dalam artikel berikut.

Seperti yang dijanjikan, saya menyediakan perpustakaan percuma elemen, serta prototaip siap sedia, yang kami pertimbangkan dalam artikel ini. Untuk ini kami menggunakan perkhidmatan yang akan memberikan pautan untuk perkongsian di rangkaian sosial.

Muat turun perpustakaan (elemen dan ikon) dan Axure prototaip selesai. kak-sdelat-prototip-v-axure-rp-esli-nichego-v-etom-ne-ponimaesh
#
UsabilityInstrumentsWeb Development

Tonton video itu: HEBOH !!!! Terkuak Cara Membuat Prototype Aplikasi Hanya Dalam 10 Menit Menggunakan Justinmind :- (November 2019).

Loading...

Tinggalkan Komen Anda