Dalam proses mengerjakan desain ui versi mobile dari situs atau aplikasi mobile, saya mencoba berbagai cara untuk menyajikannya kepada klien. Sejauh ini saya telah memilih Invision, tetapi ada sejumlah poin.



Pertama, biaya. Bagi para profesional, ini bukan masalah, tetapi bagi banyak perancang pemula, minimum $ 13 per bulan adalah jumlah yang lumayan.

Kedua, untuk beberapa alasan, masalah dengan menggesekkan mouse di atas tombol aktif masih belum teratasi. Sederhananya - menggulir ke bawah tombol aktif berfungsi seperti klik. Dan ini sangat merepotkan pada antarmuka yang cukup kompleks.

Pilihan lain - Figma - belum dikuasai, dan fakta bahwa itu akan berkembang menjadi standar industri. Karena itu, beberapa desainer juga akan memotongnya.

Membuat presentasi desain aplikasi seluler di Axure

Opsi paling sederhana dan paling terjangkau tetap Axure bersama dengan Axshare. Dan di sini Invision mulai kekurangan ketajaman - pelanggan tidak selalu dapat menyajikan secara detail pekerjaan dengan aplikasi dalam pikiran mereka.

Jadi mari kita mulai mengembangkan alat kita sendiri. Dan langkah pertama adalah membuat template untuk Axure dengan bingkai ponsel bersyarat. Untuk melakukan ini, kita memerlukan bingkai ponsel di PNG dengan "lubang" di layar, dan struktur layar.

Pada awalnya - semuanya sederhana: kami meletakkan gambar ponsel ke bawah, di atas meletakkan Bingkai Inline dalam ukuran lubang layar. Tetapi ada satu momen yang tidak menyenangkan. Ini terkait dengan fitur elemen Frame Inline.
Elemen ini menciptakan jendela dalam prototipe untuk mengunggah berbagai informasi - sebuah bingkai. Di dalamnya, Anda dapat mengatur output dari layar lain dari struktur atau menyisipkan tautan ke situs.

Masalah muncul di bilah gulir. Mereka dapat ditampilkan atau disembunyikan. Tetapi dengan bilah gulir tersembunyi, rewinding dimatikan - sehingga layar panjang aplikasi tidak muncul dalam dinamika. Bukan pesanan.

Untuk mengatasi masalah, kami menggunakan teknik topeng (terima kasih crackjack ).

1. Konversi Bingkai Inline ke Panel Dinamis. Nyalakan tampilan scrollbar (jika dimatikan).
2. Kami menerjemahkan bingkai dan bingkai telepon sekali lagi ke panel dinamis, di mana kami mematikan scrollbar. Kami juga mengubah ukuran topeng kami ke 360x640 sehingga bilah gulir dari bingkai tidak memunculkan.

Selebihnya sudah lebih mudah - di layar utama kita masih memiliki bingkai telepon dalam bingkai dan boneka. Dalam bingkai, kami memuat output dari layar berikutnya pada daftar, kami membuat navigasi dan hanya itu. Jangan lupa untuk menggabungkan elemen-elemen layar pertama menjadi grup dan membuat panel dinamis darinya.

Panel itu sendiri dapat disejajarkan di tengah browser. Dalam pengaturan Pin to Browser, tandai parameter Tengah dan Atas. Kami mempublikasikan semuanya di Axshare dan mengirimkan tautan ke klien.

Jalan pintas. Template siap untuk Axure

Saya mengunggah hasilnya sebagai file yang sudah jadi. Anda dapat mengunduh template untuk Axure secara gratis di sini .

Poin penting

Template dirancang untuk 360 tata letak dengan lebar. Ini dilakukan dengan sengaja. Layout dalam lebar 320 terlihat terlalu kecil untuk dilihat di layar komputer desktop, dan layout dalam ukuran asli - 1080 (dan bahkan 640), sebaliknya - terlalu besar.

PS Saya tidak akan menulis instruksi standar apa dan di mana. Saya ingin memberikan hal-hal yang lebih praktis untuk meningkatkan karya desainer ux / ui.

Saya akan senang menjawab pertanyaan dan akan senang dengan saran untuk optimasi!