() translation by (you can also view the original English article)
Awal tahun ini, sketsa 49 dirilis, dan bersamaan dengan itu beberapa fitur lama dinantikan prototyping. Dalam walkthrough hari ini, aku akan pergi atas segala sesuatu yang Anda perlu tahu tentang prototyping di sketsa, dari harus-tahu cara pintas, semua jalan melalui untuk mendapatkan umpan balik dan berkolaborasi dengan tim Anda pada desain dan prototipe.
Ikon Prototyping baru
Dengan rilis dari protoyping fitur datang empat ikon baru di sketsa di toolbar. Mungkin yang paling penting adalah Hotspot yang, ketika dipilih, akan memungkinkan Anda untuk menjatuhkan hotspot interaktif di artboard. Berikut adalah Tautan ke Artboard yang memungkinkan Anda untuk menghubungkan dan terhubung hotspot ke tujuan artboard atau sasaran. Ikon Tampilkan Prototyping memungkinkan Anda untuk mengaktifkan / menonaktifkan UI prototipe kuning / oranye dalam Sketch. Ini bagus jika Anda masih mendesain dan tidak ingin melihat semua tautan dan hotspot dalam aplikasi. Terakhir adalah ikon tinjauan yang memungkinkan jendela pratinjau untuk membuka sehingga Anda dapat menggunakan prototipe Anda di sana di sketsa. Kita akan berbicara tentang yang jauh lebih rinci nanti.
Jalan pintas
Tentu saja, Sketsa menerapkan beberapa pintas keyboard dengan merilis fitur prototyping mereka. Secara pribadi, saya suka menggunakan pintasan – Saya harap Anda juga akan menemukan manfaatnya!
- Tekan H untuk memasukkan Hotspot
- Tekan W untuk menambahkan tautan
- Tekan Control + F untuk beralih untuk menyembunyikan / menampilkan overlaying prototipe UI kuning / oranye
- Tekan Command + P untuk membuka Preview
- Anda juga dapat menyalin dan menempel hotspot (dengan tautan jika ada) di antara artboards dengan cara yang sama dengan elemen desain lainnya.
Hotspot, Tautan, dan Tab Inspektur
Untuk mendapatkan pemahaman yang baik tentang bagaimana kedua hotspot dan tautan berfungsi, mari kita lihat properti mereka di Tab Inspektur. Jika Anda mengklik elemen apa pun, Anda akan melihat tab kecil untuk Prototyping dengan simbol plus (+) di sebelah kanannya (persis sama dengan Fill, Borders, dan Shadows). Jika Anda mengeklik +, itu akan mengubah elemen menjadi hotspot, dan secara otomatis Anda juga akan menambahkan tautan untuk hotspot itu. Jika Anda mengklik jauh dari elemnt Anda akan kehilangan hotspot. Tetapi jika Anda menambahkan tautan, Anda akan memiliki akses ke properti pembuatan prototipe untuk hotspot itu.
Properti prototyping relatif mudah, karena prototipe Sketch belum terlalu rumit atau ekstensif.
Pertama adalah dropdown Target. Di sinilah hotspot terhubung ke dan di mana mengetuk hotspot akan membawa Anda berikutnya. Defaultnya adalah apa yang sudah Anda pilih tetapi pada titik ini Anda dapat:
- mengubahnya ke kapal lain (mereka diatur oleh halaman)
- menghapus hotspot sama sekali dengan memilih None
- Pilih Artboard sebelumnya. Ini berarti bahwa dalam aliran prototipe, itu akan membawa Anda kembali ke artboard Anda berasal dari. Ini fantastis untuk "kembali" tombol.
Hal terakhir yang harus tahu tentang properti di Inspektur adalah animasi. Ini menentukan transisi yang terjadi ketika hotspot diklik. Anda memiliki beberapa pilihan berikut:
- ❇ tidak ada animasi
- ← Menghidupkan Artboard dari kanan
- ↑ Menghidupkan Artboard dari atas
- → Menghidupkan Artboard dari kiri
- ↓ Menghidupkan Artboard dari bawah
Bekerja dengan hotspot dan simbol
Hotspot dapat dibuat dalam dua cara. Anda secara manual dapat membuat persegi panjang pada artboard dengan cara yang sama Anda secara manual akan menggambar persegi panjang atau lapisan teks. Atau, Anda dapat memilih sebuah lapisan atau elemen. Setiap elemen desain dapat berubah menjadi hotspot, termasuk simbol!
Ketika datang untuk simbol khusus, hotspot dapat ditempatkan di dalam simbol, bukan menggunakan satu simbol contoh sebagai hotspot. Jika Anda memiliki hotspot di dalam simbol maka akan diulang dengan setiap contoh simbol, tetapi Anda dapat mengganti seperti properti simbol lainnya seperti mengubah gambar, ikon, atau teks. Anda dapat juga mengganti hotspot sama sekali, secara efektif menghapus dari simbol. Dengan cara ini Anda bisa menggunakan kembali simbol till cows datang rumah tanpa perlu khawatir tidak perlu hotspot.
Ikon dalam daftar lapisan
Salah satu detail kecil keren yang termasuk sketsa dengan prototyping adalah ikon dalam daftar lapisan. Ini adalah konsep yang sama mereka telah terjadi dengan simbol dan ekspor irisan. Kehadiran Hotspot ikon di antara lapisan membuat prototyping mengalami sedikit lebih mudah dipahami.
Menggulirkan Artboards
Fitur ini sangat berguna untuk halaman lagi untuk desain ponsel! Sketsa secara otomatis memungkinkan bergulir untuk artboards lagi. Dalam contoh video di bawah ini, Anda akan melihat tampilan artikel untuk UI tiruan yang saya gunakan untuk panduan ini. Anda tidak perlu khawatir tentang menyiapkan apa pun untuk mendapatkan laman untuk digulir.
Menyiapkan "Titik Awal"
Titik Awal adalah artboard default dari mana prototipe Anda dimulai. Secara default, tidak ada satu pun, yang berarti bahwa jika Anda memilih untuk melihat pratinjau, prototipe itu akan terbuka di artboard yang dipilih pada saat pratinjau.
Defining a start point is a lot more useful once you’re ready to share it with someone. To select one, navigate to the desired starting artboard and open it in Preview. Di bagian atas jendela pratinjau, pilih ikon Bendera kecil. Setiap kali Anda mempratinjau prototipe mulai sekarang, itu akan dimulai dari artboard titik awal.
Batalkan pilihan Ikon Bendera (mengubahnya menjadi abu-abu lagi) akan menghapusnya sebagai titik awal, namun Anda dapat memiliki lebih dari satu titik awal. Memilih ikon bendera di artboard lain tidak akan menghapusnya dari yang lain!
“Kemungkinan Anda ingin menentukan Titik Awal di awal alur, tetapi Anda juga dapat menentukan beberapa Titik Awal - sebuah fitur yang akan sangat berguna ketika Anda membangun prototipe yang lebih kompleks yang berisi banyak Artboards, atau jika Anda hanya ingin orang lain melihat bagian tertentu dari Prototype Anda. "- Dokumen sketsa
Mempratinjau dan Membagi Prototipe Anda
Saat ini, Anda dapat melihat pratinjau Anda prototipe di sketsa dengan bantuan fitur pratinjau. Kita telah membahas hal ini satu beberapa waktu sudah. Sebuah jendela akan muncul di atas app sketsa Anda, dan Anda dapat mengklik sekitar dan pastikan Anda memiliki hal-hal yang ditetapkan dengan benar.
Ada cara lain untuk melihat pratinjau prototipe Anda. Jika Anda secara khusus bekerja dengan desain ponsel, Anda dapat menggunakannya dalam sketsa cermin. Pada kedua iPhone dan iPad, Anda dapat menghubungkan perangkat Anda untuk sketsa. Anda kemudian dapat melihat prototipe lebih Native dan dalam suasana yang tepat. Hotspot secara otomatis akan ada, interaktif dan semua.
Mengekspor dan berkolaborasi
Sketsa cermin maupun jendela pratinjau, membuatnya mudah untuk berbagi prototipe Anda dengan orang lain. Jadi jika Anda mencari untuk mengirimkannya di sekitar ke tim Anda, atau untuk menjalankan tes kegunaan cepat, Anda harus melakukannya melalui awan sketsa. Prototipe dapat melihat dan digunakan melalui awan sketsa oleh siapa pun yang memiliki link. Anda tidak dapat mengekspor sebuah prototipe seperti Anda akan desain lainnya atau elemen dari dalam app.
Anda mengunggah prototipe secara default ketika Anda meng-upload dokumen saat ini sketsa Cloud. Itu hanya akan diekspor dengan dokumen.
Jika Anda telah menetapkan titik awal, prototipe akan ditempatkan di bawah bagian prototipe sendiri dalam dokumen di sketsa awan. Ini adalah langkah hanya tambahan yang perlu Anda ambil untuk memastikan prototipe Anda mudah diakses untuk Anda melalui sketsa awan. Setelah Anda klik pada prototipe Anda itu akan, tentu saja, mulai di titik awal dan akan interaktif, Semua siap untuk pergi!
Bagikan tautan ke prototipe agar siapa pun dapat mengakses dan menggunakannya.
Untuk membantu berkolaborasi, Anda dapat memiliki orang-orang yang meninggalkan komentar pada prototipe Anda (jika Anda memiliki komentar diaktifkan di sketsa awan). Mereka akan dapat meninggalkan komentar untuk Anda di artboards individu dalam prototipe.
Prototyping Template
Untuk bantuan lebih lanjut, lihatlah sketsa 's premade Prototyping Template.
Di bawah File > baru dari Template > Prototyping Template dan memiliki banyak catatan di dalamnya yang menjelaskan fitur.
Kesimpulan
Fitur prototyping Sketch baru belum sempurna (misalnya, hanya memiliki empat properti animasi). Namun, itu harus membuat prototipe cepat lebih mudah. Anda tidak lagi harus mengekspor desain Anda dan kemudian mengimpornya ke alat eksternal seperti UXPin atau bahkan Marvel.
Saya pikir itu dapat meningkatkan alur kerja untuk desainer yang tidak membutuhkan sesuatu yang mewah atau kuat. Ini harus pas dalam alur kerja mereka; terutama jika mereka sudah menggunakan Sketch Cloud. Jika Anda perlu dengan cepat dan cepat memasukkan sesuatu bersama untuk menunjukkan aliran pengguna desain Anda, ini pasti akan melakukan trik. Ini akan membantu tim Anda melakukan uji alur awal atau kegunaan juga. Pada titik ini, saya tidak berpikir itu mengubah hidup, tapi aku pasti bisa melihat diriku menggunakan prototyping sketsa yang berbagi dengan desain UI klien untuk proyek-proyek mendatang.
Apakah Anda menggunakan fitur prototyping sketsa sudah? Apa yang Anda pikirkan itu? Bagaimana itu cocok ke dalam alur kerja Anda? Berbagi dengan kami link ke sebuah prototipe Anda diekspor ke awan sketsa sehingga kita dapat memiliki pandangan yang terlalu!
