DESAIN RESPONSIF

A.
CARA PROTOTIPE ELEMEN TATA LETAK CAIR UNTUK WEB ANDA DAN
PROTOTIPE APLIKASI SELULER
Dalam tutorial sebelumnya, kita melihat bagaimana prototipe

layout adaptif . Anda dapat menggabungkan fitur ini dengan layout
cair untuk membangun website responsif . Dalam tutorial ini, kita
akan melihat bagaimana membangun unsur cair, berguna ketika
Anda perlu elemen untuk beradaptasi lebar ke layar, dan bagaimana
bekerja dengan sifat tata letak kontainer seperti Panel Dinamis.
Jika Anda ingin memiliki sebuah elemen yang selalu memiliki

lebar relatif sama dengan layar, Anda perlu menentukan ini dengan
menggunakan peristiwa.
Anda perlu memilih elemen dan

menambahkan + acara 'Resize' an 'On Jendela Resize'. Tindakan
ini memungkinkan Anda menentukan tinggi dan lebar elemen dalam
empat cara yang berbeda:
Saat ini: daun tinggi / lebar karena pada saat itu eksekusi.
Tetap: mengubah tinggi / lebar dengan nilai piksel yang
ditunjukkan.
Dihitung: menentukan tinggi / lebar sebagai hasil dari ekspresi
dihitung. Anda dapat menggunakan ketinggian saat ini atau lebar
halaman dalam ekspresi itu.
Sehubungan dengan orangtua: mendefinisikan tinggi / lebar
sebagai persentase dari satu dalam wadah induknya. Seluruh
halaman, sel atau Panel Dinamis dapat berfungsi sebagai wadah
Induk.
Jika Anda ingin memiliki sebuah elemen yang selalu selebar

layar Anda dapat memilih 'Sehubungan dengan orang tua ->
100%'. Jika Anda ingin lebarnya untuk selalu proporsi yang sama
dari layar, Anda dapat memilih 'Menghitung' dan membangun
ekspresi menggunakan konstan 'Jendela lebar'.
Tutorial Justimind JAXmrp.blogspot.com 1

B. CARA MEMBUAT DESAIN WEB RESPONSIF DARI AWAL DI PROTOTIPE
Pelajari cara membuat dan mensimulasikan desain web

responsif sederhana dari awal dalam prototipe Anda dengan
bantuan tutorial ini. Kami memperkenalkan desain web responsif di
web dan aplikasi prototipe dalam tutorial ini . Baca terus untuk
panduan langkah demi langkah tentang bagaimana untuk membuat
desain web responsif dari awal.
Membuat desain web responsif dalam prototipe Anda
1. Buat prototipe web baru.
2. Gunakan widget Image untuk meniru tata letak desain yang telah
kita buat di layar Web kami dalam contoh download kami. Kami
telah meng-upload gambar yang sesuai dengan contoh kita
ke folder aset ini untuk kenyamanan Anda.
3. Bila Anda memiliki semua gambar di tempat, kelompok mereka

bersama-sama dengan memilih mereka semua, klik kanan dan
memilih opsi 'Grup'.
4. Selanjutnya, tambahkan widget Text dan menempatkannya di

bagian atas layar. Menulis 'WEB 1366px' dalam kotak
teks. 1366px adalah lebar layar Web Anda.
5. Kita akan membuat dua layar tambahan untuk mewakili tablet

dan mobile. Jadi untuk membedakan mereka, mengubah nama
layar ini '1366px- Web'.
6. Selanjutnya, buat layar kedua dengan mengklik tombol '+' di tab

Layar. Ubah nama layar ini '768px- Tablet'.
7. Pada tab Outline, pilih layar. Pada tab Properti di atas, mengubah
ukuran layar untuk 768 x 768px.
8. Gunakan widget Gambar untuk meniru tata letak desain yang

telah kita buat di layar Tablet kami, mengambil gambar dari
folder aset. Kelompok mereka bersama-sama.
9. Tambahkan widget Text dan menempatkannya di bagian atas

layar. Menulis 'TABLET 768px' dalam kotak teks. 768px adalah
lebar layar Tablet Anda.
10. Sekarang, menambahkan layar ketiga dan ganti namanya

'480px- Ponsel'.
11. Pada tab Outline, pilih layar. Pada tab Properti di atas,
mengubah ukuran layar untuk 480 x 768px.
12. Gunakan widget Gambar untuk meniru tata letak desain yang
telah kita buat di layar Ponsel kami, mengambil gambar dari
folder aset. Kelompok mereka bersama-sama
Bagaimana masing-masing gambar shoudld ditempatkan di setiap layar

13. Tambahkan widget Text dan menempatkannya di bagian atas
layar. Menulis 'MOBILE 480px' dalam kotak teks. 480px adalah lebar layar
Ponsel Anda.
Tata letak akhir dari tata letak layar responsif kami
Sekarang mari kita menambahkan acara untuk menghubungkan layar
bersama-sama
Acara layar web
Dari tab Layar, pilih layar Web.
Pada tab Outline, pilih layar dan pergi ke tab peristiwa.
Tambahkan 'On Jendela Resize' + acara 'Link Ke', memilih layar
Tablet dari opsi di bawah. Klik OK.

Kembali tab Events, klik pada 'menambahkan kondisi' pilihan di
sebelah kiri acara baru Anda buat dan menambahkan ekspresi
berikut:
Tarik Lebar Jendela konstan diikuti oleh Kurang atau Sama dengan
fungsi, dan kemudian menulis '1366' dalam kotak teks berikut. Klik
OK.
Kondisi ini akan memastikan bahwa setelah menyusut jendela selama

simulasi, layar Tablet akan ditampilkan. Mari kita sekarang
menambahkan interaksi responsif dua layar lainnya.
Peristiwa layar tablet

Dari tab Layar, pilih layar Tablet.
Tambahkan 'On Jendela Resize' + acara 'Link Ke', memilih layar Web
dari opsi di bawah. Klik OK.
berikut:
Tarik konstan Jendela Lebar diikuti oleh Greater atau Sama dengan
fungsi, dan kemudian menulis '1366' dalam kotak teks berikut. Klik OK.
Kondisi ini akan memastikan bahwa setelah memperluas jendela

selama simulasi, layar Web akan ditampilkan. Sekarang, kita akan
membuat sebuah acara yang akan menampilkan layar Ponsel pada
menyusut layar Tablet.
Kembali tab Events, tambahkan + acara 'Link Ke' lain 'On Jendela
Resize', memilih layar Ponsel dari opsi di bawah. Klik OK.

berikut:
Tarik Lebar Jendela konstan diikuti oleh Kurang atau Sama dengan
fungsi, dan kemudian menulis '768' di kotak teks berikut. Klik OK.
Akhirnya, mari kita tambahkan sebuah acara yang akan memastikan

bahwa setelah memperluas layar Mobile, layar Tablet akan
ditampilkan.
Ponsel acara layar

Dari tab Layar, pilih layar Mobile.
Tambahkan 'On Jendela Resize' + acara 'Link Ke', memilih layar
Tablet dari opsi di bawah. Klik OK.
berikut:
Tarik Lebar Jendela konstan diikuti oleh Greater atau Sama dengan
fungsi, dan kemudian menulis '768' di kotak teks berikut. Klik OK.
Catatan: Anda dapat menambahkan sebanyak layar dengan ukuran

yang berbeda seperti yang Anda inginkan. Hanya memastikan
bahwa 'tengah' layar (yaitu semua di antara yang terkecil dan
terbesar) memiliki acara menyusut dan memperluas.

C. TUTORIAL PARALLAX DENGAN JUSTINMIND
Dengan Justinmind, Anda dapat membangun web yang unik dan

prototipe mobile menggunakanparallax scrolling dan efek
parallax lainnya, dan melihat dan menguji mereka di browser atau
pada perangkat yang sebenarnya. Untuk gagasan tentang apa yang
dapat Anda buat dalam Justinmind kita lihat contoh ini . Lihat di
sini untuk menciptakan efek parallax scrolling di prototipe Anda.
Ketika Anda memilih sebuah kanvas web sebagai titik awal, panel
widget secara otomatis akan memuatParallax elemen
perpustakaan, terbuat dari siap menggunakan widget parallax
bahwa Anda dapat drag-and-drop ke dalam desain Anda
dan menggabungkan dengan elemen desain lainnya. Jika Anda
membuat prototipe untuk perangkat yang berbeda, Anda dapat
memuat perpustakaan dengan mengklik "Add / Remove
perpustakaan" icon di panel Widgets.
Unsur-unsur Parallax perpustakaan widget termasuk mengikuti widget

bekerja pre-built, dan Anda dapat belajar bagaimana
menggunakannya dengan mengklik di sini dan mendownload
contoh :
Mengambang menu : ini akan membiarkan Anda membuat

menu posisi tetap di web atau prototipe ponsel. Menu akan tetap
terlihat di atas layar ketika bergulir, menyediakan navigasi yang
lebih mudah bagi pengguna.
Slide-in lapisan : menambahkan Slide-In di efek Geser ke desain

prototipe Anda memungkinkan Anda untuk meluncur di elemen
dari tepi halaman ke dalam viewport visual, seperti yang Anda
gulir ke bawah.

Lapisan Pinned : dengan menggunakan elemen lengket di
scroll, Anda akan dapat untuk pin elemen ke lokasi tertentu di
web atau prototipe mobile, sehingga selalu terlihat seperti yang
Anda gulir ke bawah.
Disematkan panel : panel p inning ke posisi tertentu di web

Anda dan prototipe ponsel memungkinkan Anda untuk membuat
elemen tetap yang tinggal di tempat dan selalu terlihat ketika
bergulir, misalnya header, footer, sidebar.
Memudar dalam lapisan: panel dinamis awalnya terlihat akan

menjadi terlihat dengan efek transisi ketika titik didefinisikan
telah dicapai oleh bergulir.
Bergulir kecepatan : menggunakan kecepatan scroll yang

berbeda untuk unsur yang berbeda, dalam rangka memberikan
efek tambahan untuk bergulir Parallax Anda.
Parallax dari awal : belajar cara membuat menu scroll tetap

sederhana dengan tutorial ini.

D. BAGAIMANA MERANCANG MENU POSISI TETAP DI WIREFRAME
Dalam tutorial ini, Anda akan belajar cara membuat menu

posisi tetap di web atau gambar rangka mobile, menggunakan
menu widget mengambang Justinmind ini Parallax Elements. Dengan
cara ini, menu akan tetap selalu terlihat di atas layar ketika bergulir,
menyediakan navigasi yang lebih mudah bagi pengguna. Berikut ini
adalah contoh dari menu mengambang .
Tambahkan Parallax Terapung Menu untuk web atau gambar
rangka seluler
Ketika Anda membuka editor desktop Anda dan menciptakan

kanvas web kosong untuk prototipe web baru Anda, Justinmind
otomatis akan memuat "Parallax Elements" widget perpustakaan, yang
akan terlihat di bawah panel "Widget". Jika Anda membuat gambar
rangka untuk perangkat yang berbeda, Anda dapat memuat
perpustakaan dengan mengklik "Add / Remove perpustakaan" icon di
panel Widgets.
Untuk memulai, cukup tarik menu widget

mengambang dan menjatuhkannya ke layar Anda. Dalam hal ini,
kita akan menciptakan tetap menu bar atas, maka menu
mengambang akan ditempatkan di atas layar.

Setelah ditempatkan, fungsi menu mengambang akan siap
untuk digunakan. Anda dapatmenambahkan sebanyak
elemen yang Anda ingin layar, memungkinkan untuk cukup
halaman bergulir. Bahkan, Menu hanya akan terlihat ketika Anda
mencapai posisi tertentu dalam acara pre-loaded, sementara
bergulir (yaitu salah satu yang telah ditetapkan "posisi awal" label
yang datang dengan widget). Oleh karena itu, dalam rangka untuk
melihat menu kerja mengambang, Anda perlu menambahkan
elemen yang cukup di bagian bawah kanvas untuk memungkinkan
bergulir.
Tip: Anda dapat menggunakan panel Navigator di sisi kiri

kanvas Anda untuk memvisualisasikan seluruh halaman yang
sedang Anda kerjakan. Dan ingat Anda dapat membiarkannya
mengambang dan mengubah ukurannya .
Klik pada menu mengambang di layar dan pilih opsi "Selalu di

atas" di tab Properties. Sekarang klik pada 'Simulasikan': Anda
akan melihat bahwa menu atas akan tetap tetap ketika bergulir.

Parallax Mengambang peristiwa menu standar
Dalam rangka untuk memahami perilaku yang widget ini akan

memiliki dalam simulasi, mari kita lihatperistiwa yang pra-
dimasukkan dalam widget: Anda dapat melihat mereka
ditampilkan di tab acara di bagian bawah layar
Anda akan melihat dua peristiwa: sebuah 'Pada buka

halaman' dan 'On scroll'.
Ketika beban layar, nilai Y koordinat posisi menu akan

disimpan untuk menentukan posisi awal. Ini adalah fungsi
dari 'pada Load Halaman' + 'Set nilai' acara, di mana nilai
ditentukan oleh nilai Expression.
Setelah bergulir dimulai, acara kedua akan aktif: menu

akan ditampilkan ( 'Show') hanya jika posisi gulir saat ini lebih
besar dari yang awal. Tergantung pada kondisi yang sama, menu
akan bergerak ( 'Pindah') dari posisi awal untuk mencocokkan
bagian atas jendela, sebagaimana ditentukan oleh Y konstan. Apa
yang kita miliki di sini adalah "On Scroll" + "Tampilkan" & "Move"

acara. Jika pada setiap titik titik gulir horizontal kembali ke posisi
awal, 'Sembunyikan' tindakan akan dipicu.
Penting untuk dicatat bahwa label posisi awal yang telah

ditetapkan - yang datang dengan menu widget mengambang -
tidak harus dihapus selama kustomisasi, karena merupakan
bagian integral dari fungsi tersebut. Namun, semua elemen lain
dalam widget dapat disesuaikan untuk memenuhi preferensi
individu.
Menyesuaikan menu mengambang dan menambahkan interaksi
Setelah menu ditempatkan dengan benar, grafis, gaya dan

perilaku dapat disesuaikan sesuai dengan preferensi Anda. Anda juga
dapat menambahkan acara untuk menavigasi melalui halaman, dan
menambahkan lebih banyak pilihan untuk menu dan mengubah nama
mereka. Perhatikan bahwa semua elemen yang membentuk menu
mengambang dikelompokkan.
Untuk menerapkan menu real-bekerja, Anda dapat mengatur 'On

klik' 'Link ke' + acara, menghubungkan setiap pilihan menu dengan
layar yang sesuai. Anda kemudian dapat menyalin menu mengambang
untuk masing-masing layar dan menyesuaikan parameter. Jika
diinginkan, gaya font dapat diubah untuk menyoroti halaman aktif.

E. PROTOTYPING LEBIH LANJUT DENGAN PARALLAX
Tutorial ini mencakup mengambang menu parallax widget,

tapi prototipe dengan paralaks memiliki banyak fungsi lain yang dapat
dikombinasikan untuk membuat web yang luar biasa dan wireframes
ponsel:
1. Slide-in lapisan: slide dalam unsur-unsur dari luar halaman ke
dalam viewport visual Anda gulir ke bawah.
2. Disematkan lapisan: pin elemen lengket ke lokasi tertentu di

web atau prototipe mobile, sehingga selalu terlihat seperti yang
Anda gulir ke bawah.
3. Panel disematkan: menyematkan panel untuk posisi tertentu

memungkinkan Anda untuk membuat elemen tetap / lengket yang
tinggal di tempat dan selalu terlihat ketika bergulir.
4. Memudar dalam lapisan: memberikan unsur awalnya tak

terlihat yang muncul dengan efek transisi ketika titik didefinisikan
telah dicapai oleh bergulir.
5. Bergulir kecepatan: menggunakan kecepatan scroll yang

efek tambahan untuk bergulir Parallax Anda

F. CARA PROTOTIPE ELEMEN LENGKET DI SCROLL
Dengan menggunakan elemen lengket di scroll,

Anda akan dapat pin elemen ke lokasi tertentu di web atau
prototipe mobile, sehingga selalu terlihat seperti yang Anda gulir
ke bawah.
Tutorial ini akan menunjukkan Anda cara

menambahkan elemen lengket di gulir untuk prototipe Anda
menggunakan Parallax widget Justinmind ini.
Tambahkan Sticky Elemen untuk web atau gambar rangka seluler
Untuk membuat elemen lengket hanya tarik "lapisan

Pinned" widget dari elemen perpustakaan Parallax ke kanvas.
Setelah ditempatkan, elemen lengket akan siap untuk

digunakan. Ini adalah panel dinamis, sehingga Anda dapat mengedit
isinya yang Anda inginkan.
Untuk melihat pekerjaan lapisan Pinned Anda selama simulasi,

tambahkan setidaknya unsur lain, dan menempatkannya di bagian
bawah kanvas sehingga memungkinkan untuk cukup bergulir.

Sekarang klik pada 'Simulasikan': Anda akan melihat bahwa
unsur lengket akan tetap tetap ketika bergulir.
Tip: Gunakan panel Navigator di sebelah kiri kanvas Anda

untuk memvisualisasikan seluruh halaman yang sedang Anda
kerjakan. Dan ingat Anda dapat membiarkannya
mengambang dan mengubah ukurannya.
Menjelajahi peristiwa default di widget elemen lengket
Dalam rangka untuk lebih memahami fungsi dari unsur-unsur,

mari kita lihat lebih dekat peristiwa yang telah ditetapkan mereka.
Tiga set peristiwa berada di tempat untuk memberikan interaksi:
dua 'Pada buka halaman' + 'Set nilai'dan 'On scroll' 'Move' +.
The 'Pada buka halaman' + 'Set nilai' peristiwa diterapkan untuk
dua posisi label awal (y dan x koordinat) yang datang dengan
widget, karena keduanya akan diganti dengan nilai posisi
awal mereka ketika beban halaman. Nilai-nilai ini posisi awal
disimpan untuk digunakan kemudian untuk menentukan kondisi
bergulir. Ketika bergulir dimulai, panel akan 'bergerak' ke titik yang
terlihat saat ini.

Untuk elemen yang tetap statis sepanjang waktu,
yang "Move" tindakan putus nilai posisi awal untuk xdan y yang
sebelumnya disimpan dan nilai titik bergulir saat ini (Jendela
Geser). Hasilnya memberikan nilai baru yang dibutuhkan untuk
elemen untuk tetap pada titik yang terlihat saat ini.
Jika Anda ingin pergi lebih jauh dan mengedit ekspresi, Anda
dapat melakukannya dengan mengklik ikon pengaturan di samping
setiap ekspresi.

G. MEMBUAT PROTOTIPE WEB YANG UNIK
Tutorial ini mencakup "lengket elemen" widget parallax, yang

dapat Anda menggabungkan dengan elemen desain lainnya untuk
membuat prototipe web yang unik. Jika Anda membuat desain bergulir
web parallax kami sarankan Anda memeriksa ini berguna panduan 5
langkah untuk prototipe dengan parallax scrolling .
Dan jangan lupa untuk memeriksa lebih Parallax prototyping

tutorial:
Buat menu posisi tetap di web atau gambar rangka mobile.
Slide-in lapisan: slide dalam unsur-unsur dari luar halaman ke

Panel Pinned: menyematkan panel untuk posisi tertentu

memungkinkan Anda untuk membuat elemen tetap / lengket yang
tinggal di tempat dan selalu terlihat ketika bergulir.
Fade dalam lapisan: memberikan unsur awalnya tak terlihat

yang muncul dengan efek transisi ketika titik didefinisikan telah
dicapai oleh bergulir.

Kecepatan Scrolling: menggunakan kecepatan scroll yang

H. CARA MENGGUNAKAN MENJEPIT PANEL DALAM GAMBAR RANGKA
INTERAKTIF ANDA
Menjepit panel ke posisi tertentu di web Anda dan wireframes

ponsel memungkinkan Anda untukmembuat elemen tetap / lengket
yang tinggal di tempat dan selalu terlihat ketika
bergulir, misalnya header, footer, sidebar.
Tutorial ini akan menunjukkan cara untuk pin panel untuk posisi
tertentu dari layar Anda menggunakan salah satu widget yang berbeda
dari "unsur-unsur Parallax" UI perpustakaan: "Pinned top", "Pinned
bawah", "Pinned kiri", "Pinned benar", dan " Pinned lapisan ".
Menjepit lapisan untuk bagian atas dan bawah dari layar wireframe
Anda

"Atas Pinned" dan "Pinned bawah" widget paralaks yang prebuilt
kerja-widget yang siap untuk drag dan drop ke kanvas
Anda . Setelah Anda memiliki mereka di kanvas Anda, Anda hanya
perlu klik pada tombol 'Simulasikan' untuk melihat mereka melakukan
hal mereka!
Berikutnya, Anda akan menemukan petunjuk tentang cara

membuat widget ini dari awal sehingga Anda dapat mengedit
mereka dan menyesuaikan mereka untuk kebutuhan spesifik dari
gambar rangka interaktif Anda.
Menyiapkan "Pinned top" Acara
widget yang 'lapisan disematkan' adalah panel dinamis yang

mencakup dua peristiwa: 'on Load Halaman' event dan 'pada Scroll'
event. Cari di bawah petunjuk untuk pin lapisan ke bagian atas
layar selama bergulir. Mari kita mulai dengan memilih kanvas
kosong untuk perangkat pilihan Anda. Kemudian, tarik 'panel
dinamis' widget ke kanvas.
Pada Halaman Muat
loading halaman ( 'di Load Halaman') memicu tindakan

'Pindah' ke tempat panel dinamis pada akhir masing-
masing. Y koordinat layar akan disimpan sehingga selalu memiliki
nilai yang sama dengan panel dinamis.
1. Pilih opsi 'Add acara' di panel Acara

2. Pilih 'pada Load Halaman' dari menu dropdown

3. Menggabungkannya dengan aksi 'Move' tersedia dalam daftar
tindakan
Ingatlah untuk memilih 'panel dinamis' lapisan di garis besar
4. Memodifikasi 'Kiri' posisi untuk 'sekarang'
5. Mengubah posisi 'Top' ke 'Menghitung', ketika melakukan
sehingga Tambahkan Expression 'pilihan akan diaktifkan.
6. Buka 'Add Expression' dialog dan buka tab Konstanta. Pilih nilai
'Jendela Geser Y' dan tarik ke ekspresi. Klik ok dan tutup dialog.
Pada Scroll:
dimana bergulir dari halaman ( 'pada Scroll') memicu lain

tindakan 'Move' sehingga lapisan tetap terkunci ke atas jendela terlepas
dari kecepatan scroll.
1. Pilih opsi 'Add acara' lagi

2. Pilih 'pada Scroll' pilihan dari menu dropdown
tindakan
5. Mengubah posisi 'Top' ke 'Menghitung', ketika melakukan sehingga
Tambahkan Expression 'pilihan akan diaktifkan.
'Jendela Geser Y' dan tarik ke ekspresi. Klik ok dan tutup dialog.
Sekarang Anda siap untuk mensimulasikan!
Jangan lupa untuk menambahkan setidaknya satu unsur

selain widget, dan menempatkannya sedemikian rupa
sehingga memungkinkan untuk cukup bergulir untuk melihat

Anda "lapisan disematkan" pekerjaan saat mengklik tombol
'Simulasikan'.
Menyiapkan "Pinned bawah" Acara
Untuk menambahkan "Pinned bawah" elemen, ikuti langkah-

langkah yang sama seperti di atas, hanya modifikasi berada di
ekspresi untuk menghitung nilai posisi 'Top' (langkah
6), untuk kedua 'di Load Halaman' dan 'di peristiwa gulir ', yang
harus sebagai berikut:
Pada Halaman Muat
1. Buka 'Add Expression' dialog dan buka tab Konstanta.

2. Pilih nilai 'Jendela Tinggi' dan tarik ke ekspresi.
3. Menemukan 'Minus' pilihan di tab Fungsi dan tarik ke ekspresi.
4. Tarik panel dari kanvas dialog dengan ekspresi, dan pilih nilai
'Tinggi' dari menu drop-nya down.
pada Scroll
1. Buka 'Add Expression' dialog dan buka tab Konstanta.

2. Pilih 'Jendela Geser Y', dan menambahkan nilai 'Jendela Tinggi'.
3. Akhirnya, sama seperti yang Anda lakukan di atas, kurangi panel
dinamis ini 'Tinggi'.

Menjepit lapisan ke kiri dan kanan layar wireframe Anda
Menyiapkan 'nilai awal' label
Pelaksanaan untuk pilihan kiri dan kanan sangat mirip, dengan

satu-satunya perbedaan dari acara tambahan yang ditambahkan 'di
halaman beban'. Tidak seperti rekan-rekan atas dan bawah
disematkan, kita harus melacak jarak layer dari atas untuk
memastikan tetap statis ketika bergulir.Mengetahui hal ini,
penting untuk dicatat 'posisi awal' label harus tetap di kedua
widget, seperti fungsinya sangat penting untuk pelaksanaan.
Berikut langkah-langkah untuk membuat 'posisi awal' label:
1. Tarik 'teks' widget ke kanvas dan nama itu posisi awal '
2. Pergi ke panel Acara dan menciptakan 'pada Load Halaman'
acara dikombinasikan dengan aksi 'Set Nilai', dan pilih 'posisi
awal' label di garis besar
3. Menetapkan nilai untuk 'dihitung' dan membuka dialog 'Add
ekspresi'
4. Tarik panel dinamis dari kanvas ke ekspresi dan pilih 'Pos.Y
relatif'. Klik Ok dan tutup dialog.
5. Akhirnya, menandai 'Hide komponen' kotak centang di
panel Properties label

Menyiapkan "Pinned kiri" acara
Pada Halaman Muat acara

2. Pilih 'pada Load Halaman' dari menu dropdown
tindakan
4. Memodifikasi 'Kiri' posisi untuk 'Menghitung', ketika melakukan
5. Buka dialog Tambahkan Expression ', klik dua kali field input dan
jenis' 0 '. Klik ok.
6. Mengubah posisi 'Top' ke 'sekarang' dan klik ok.
Pada acara Scroll

3. Menggabungkannya dengan aksi 'Move'
'Jendela Geser Y' dan menambahkan para 'awal posisi' nilai label
dengan menyeret label dari kanvas ke ekspresi dan memilih
'Nilai' dari menu dropdown nya. Klik ok dan menutup dialog.
Menyiapkan "Pinned benar" acara
Acara ini adalah panel dinamis yang mencakup 'pada Window

resize' event dan 'pada Scroll' event.Untuk acara ini penting untuk

hapus centang default "isi layar center" kotak centang di tab
'Screen' properti.
Pada jendela Resize
di mana mengubah ukuran jendela memicu aksi 'Pindah' ke

tempat panel dinamis di sisi masing-masing jendela, tidak peduli
ukuran jendela. Y koordinat layar akan disimpan sehingga selalu
memiliki nilai yang sama dengan panel dinamis.

2. Pilih 'pada Window Resize' pilihan dari menu dropdown
3. Menggabungkannya dengan aksi 'Move'
4. Memodifikasi 'Kiri' posisi untuk 'Menghitung', ketika melakukan
'Jendela Lebar dan tarik ke ekspresi dan kurangi panel dinamis ini
Lebar. Klik ok.
6. Mengubah posisi 'Top' ke 'sekarang' dan menutup dialog.
Pada Scroll
dimana bergulir dari halaman ( 'pada Scroll') memicu lain

tindakan 'Move' sehingga lapisan tetap terkunci di sebelah kanan
jendela dan itu terlihat kapan saja.

3. Menggabungkannya dengan aksi 'Move' Ingatlah untuk memilih
'panel dinamis' lapisan di garis besar

'Jendela Geser Y' dan menambahkan 'awal posisi' nilai. Klik ok
dan menutup dialog.
Anda siap untuk pergi! Sekarang hanya mensimulasikan

gambar rangka interaktif Anda baik dari browser
atau langsung pada perangkat Anda dan berbagi untuk
umpan balik .

I. PROTOTYPING LEBIH LANJUT DENGAN PARALLAX
Tutorial ini mencakup "panel Pinned" widget parallax, yang dapat

Anda menggabungkan dengan elemen desain lainnya untuk
membuat web dan mobile wireframes unik Prototyping dengan
paralaksmemiliki banyak fungsi lain yang dapat dikombinasikan
untuk menciptakan luar biasa aplikasi atau web wireframes:
Slide-in lapisan: slide dalam unsur-unsur dari luar halaman ke

Pinned lapisan: pin elemen lengket ke lokasi tertentu di web

atau prototipe mobile, sehingga selalu terlihat seperti yang Anda
gulir ke bawah.


Bagaimana gambar rangka elemen slide-in pada scroll
Menambahkan Slide-In di efek Geser ke desain gambar rangka

web Anda pada dasarnya memungkinkan Anda untuk meluncur di
elemen dari luar halaman ke tampilan pelabuhan visual,seperti
yang Anda gulir ke bawah. Anda dapat melihat contoh di sini .

Tutorial ini akan menunjukkan cara untuk geser-dalam
panel dinamis baik dari kiri atau dari kanan saat Anda
mencapai nilai bergulir tertentu.
Menambahkan lapisan Slide untuk web atau gambar rangka

seluler
Untuk membuat efek slide-in di gambar rangka Anda,

tarik Slide lapisan meninggalkan atau Slide lapisan tepat ke
kanvas Anda. Setelah Anda menempatkan baik lapisan (atau
keduanya) pada kanvas dan mensimulasikan gambar rangka web
Anda, widget tidak akan muncul pada buka halaman, tetapi akan
meluncur dari kiri dan / atau kanan ke kanvas ketika Anda mulai
bergulir dan spesifik nilai posisi bergulir tercapai.
Widget Parallax siap untuk Anda untuk hanya drag dan

drop ke kanvas Anda. Namun, jika Anda ingin mengedit widget
default, lihat bagian berikutnya untuk memahami bagaimana untuk
setup interaksi.
Tip: memungkinkan untuk cukup bergulir halaman untuk lapisan

untuk meluncur di saat simulasi

Peristiwa default di lapisan Slide
Setiap "lapisan slide" widget adalah panel dinamis yang

meliputi dua peristiwa secara default.
"Pada Halaman Load": acara ini berlaku untuk label "awal

posisi", yang akan menyimpan relatif nilai panel dinamis y-
koordinat sehingga Anda dapat menggunakannya kemudian
untuk menentukan kondisi bergulir.
"Pada Scroll": acara ini diterapkan pada panel dinamis secara

keseluruhan. Untuk panel dinamis untuk geser-in dari sisi
tertentu wireframe web Anda, kami telah menetapkan
suatu "pada Scroll" acara dengan "Show" tindakan yang
termasuk "slide kiri / kanan" efek, di mana scrolling ( "on
Scroll" ) memicu "Show" tindakan dari kedua sisi.

Sementara peristiwa yang disebutkan di atas membuat slide
lapisan muncul, kami juga harus menyiapkan kondisi untuk
membuat mereka melakukannya pada saat yang tepat.
Bagian pertama dari kondisi menetapkan bahwa panel hanya

harus menunjukkan ketika vertikal posisi gulir ( "Jendela Geser
Y") lebih besar dari y nilai panel dinamis ( "posisi awal"), yang

merupakan nilai yang sebelumnya disimpan oleh koordinat "pada
halaman load" acara yang disebutkan di atas.
Bagian kedua dari kondisi menetapkan bahwa ketika panel

dinamis sudah menunjukkan, slide-in efek tidak akan memicu lagi.
Anda dapat menyesuaikan hak / Slide lapisan kiri sesuai

dengan kebutuhan anda, dengan mengedit elemen dalam panel
dinamis dan "Show" efek tindakan dalam acara tersebut. Anda juga
dapat mengedit "awal posisi" bergulir nilai untuk setiap posisi
tertentu dengan mengganti kotak nilai dengan angka.

J. PROTOTYPING LEBIH LANJUT DENGAN PARALLAX
Tutorial ini mencakup "Geser kanan / kiri layer" widget parallax,

yang dapat Anda menggabungkan dengan elemen desain lainnya
untuk membuat web yang unik dan mobile wireframes. Prototyping
dengan paralaks memiliki banyak fungsi lain yang dapat
dikombinasikan untuk menciptakan luar biasa aplikasi atau web
wireframes :
Pinned lapisan: pin elemen lengket ke lokasi tertentu di web

atau prototipe mobile, sehingga selalu terlihat seperti yang Anda
gulir ke bawah.
Panel Pinned: menyematkan panel untuk posisi tertentu

memungkinkan Anda untuk membuat elemen tetap / lengket
yang tinggal di tempat dan selalu terlihat ketika bergulir.




DESAIN RESPONSIF

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

DESAIN RESPONSIF

Diunggah oleh

Hak Cipta:

Format Tersedia

A.

PROTOTIPE APLIKASI SELULER

Dalam tutorial sebelumnya, kita melihat bagaimana prototipe

Jika Anda ingin memiliki sebuah elemen yang selalu memiliki

Anda perlu memilih elemen dan

Jika Anda ingin memiliki sebuah elemen yang selalu selebar

Tutorial Justimind JAXmrp.blogspot.com 1

Pelajari cara membuat dan mensimulasikan desain web

Membuat desain web responsif dalam prototipe Anda

1. Buat prototipe web baru.

3. Bila Anda memiliki semua gambar di tempat, kelompok mereka

4. Selanjutnya, tambahkan widget Text dan menempatkannya di

5. Kita akan membuat dua layar tambahan untuk mewakili tablet

6. Selanjutnya, buat layar kedua dengan mengklik tombol '+' di tab

8. Gunakan widget Gambar untuk meniru tata letak desain yang

9. Tambahkan widget Text dan menempatkannya di bagian atas

10. Sekarang, menambahkan layar ketiga dan ganti namanya

Bagaimana masing-masing gambar shoudld ditempatkan di setiap layar

Tata letak akhir dari tata letak layar responsif kami

Sekarang mari kita menambahkan acara untuk menghubungkan layar

Tutorial Justimind JAXmrp.blogspot.com 4

Kondisi ini akan memastikan bahwa setelah menyusut jendela selama

Peristiwa layar tablet

Kondisi ini akan memastikan bahwa setelah memperluas jendela

Tutorial Justimind JAXmrp.blogspot.com 5

Akhirnya, mari kita tambahkan sebuah acara yang akan memastikan

Ponsel acara layar

Catatan: Anda dapat menambahkan sebanyak layar dengan ukuran

Tutorial Justimind JAXmrp.blogspot.com 6

Dengan Justinmind, Anda dapat membangun web yang unik dan

Unsur-unsur Parallax perpustakaan widget termasuk mengikuti widget

Mengambang menu : ini akan membiarkan Anda membuat

Slide-in lapisan : menambahkan Slide-In di efek Geser ke desain

Tutorial Justimind JAXmrp.blogspot.com 7

Disematkan panel : panel p inning ke posisi tertentu di web

Memudar dalam lapisan: panel dinamis awalnya terlihat akan

Bergulir kecepatan : menggunakan kecepatan scroll yang

Parallax dari awal : belajar cara membuat menu scroll tetap

Tutorial Justimind JAXmrp.blogspot.com 8

Dalam tutorial ini, Anda akan belajar cara membuat menu

Tambahkan Parallax Terapung Menu untuk web atau gambar

Ketika Anda membuka editor desktop Anda dan menciptakan

Untuk memulai, cukup tarik menu widget

Tutorial Justimind JAXmrp.blogspot.com 9

Tip: Anda dapat menggunakan panel Navigator di sisi kiri

Klik pada menu mengambang di layar dan pilih opsi "Selalu di

Tutorial Justimind JAXmrp.blogspot.com 10

Dalam rangka untuk memahami perilaku yang widget ini akan

Anda akan melihat dua peristiwa: sebuah 'Pada buka

Ketika beban layar, nilai Y koordinat posisi menu akan

Setelah bergulir dimulai, acara kedua akan aktif: menu

Tutorial Justimind JAXmrp.blogspot.com 11

Penting untuk dicatat bahwa label posisi awal yang telah

Menyesuaikan menu mengambang dan menambahkan interaksi

Setelah menu ditempatkan dengan benar, grafis, gaya dan

Untuk menerapkan menu real-bekerja, Anda dapat mengatur 'On

Tutorial Justimind JAXmrp.blogspot.com 12

Tutorial ini mencakup mengambang menu parallax widget,

2. Disematkan lapisan: pin elemen lengket ke lokasi tertentu di

3. Panel disematkan: menyematkan panel untuk posisi tertentu

4. Memudar dalam lapisan: memberikan unsur awalnya tak

5. Bergulir kecepatan: menggunakan kecepatan scroll yang