Gather user requirement quickly with SketchFlow

Sketchflow adalah salah satu fitur yang cukup menarik dalam Blend 3 yang saat ini telah mencapai tahap RC dan dapat anda download disini. Tujuan utama dari fitur ini adalah untuk membantu proses perancangan desain User Interface dari sebuah aplikasi. Seperti namanya yang jika diterjemahkan ke bahasa indonesia adalah alur dari sketsa, maka sketchflow ini pun dasarnya ditujukan untuk membuat sketsa dari aplikasi. Sketsa dari desain awal sebuah aplikasi tentunya sangat penting di tahap-tahap awal pembangunan sebuah aplikasi.

Baiklah tanpa perlu terlalu banyak basa-basi mari bersama-sama kita lakukan sebuah walkthrough singkat terhadap fitur terbaru di Expression Blend 3.0 ini.

1. Silahkan buka Expression Blend 3.0 anda, perhatikan bahwa sekarang muncul 4 buah pilihan seperti gambar dibawah ini :

image

2. Silahkan pilih Silverlight 3 Sketchflow Application karena kita akan membuat sketsa untuk aplikasi yang berbasiskan Silverlight dan beri nama proyek ini sesuka anda

3. Pada bagian bawah anda dapat perhatikan bahwa ada sebuah jendela yang mungkin terlihat asing yaitu SkecthFlow Map. Sesuai dengan namanya SkecthFlow Map ini adalah jendela dimana anda dapat mendesain peta yang mendeskripsikan alur dari aplikasi anda. Ketika anda pertama kali membuat sebuah proyek tentunya hanya ada satu buah layar saja yang bernama  Screen 1. Kita akan menambahkan sebuah layar lagi, silahkan klik kanan pada kotak biru tersebut dan pilih Create a Connected Screen.

image

4. Sebuah Layar baru akan secara otomatis dibuat dan perhatikan bahwa antara Screen 1 dan Screen 2 ada sebuah garis berwarna Biru. Garis tersebut menandakan bahwa kedua buah layar ini saling terhubung, bagaimana keterhubungan itu dapat dilakukan? mari kita buat sebuah textbox pada layar 1 dan layar 2 agar kita mudah mengidentifikan kedua layar tersebut. Silahkan pilih textbox yang bertema sketch dengan cara mengklik pada tombol Assets yang ada dibagian kiri.

image

5.   Buat sebuah Textblock baru pada Screen 1 dan isikan “Screen 1”, kemudian pada Screen 2 tambahkan juga sebuah Textblock pada Screen 2 dan isikan “Screen 2”.

6. Setelah kedua buah layar dapat mudah diidentifikasi sekarang adalah saatnya kita tambahkan sebuah tombol yang jika diklik akan melakukan navigasi ke layar selanjutnya. Silahkan pindah ke Screen 1 dan tambahkan sebuah button bertipe Sketch. hingga tampilannya kira-kira seperti dibawah ini :

image

7. Sekarang kita akan menambahkan sebuah “behaviour” (saya akan membahas behaviour pada postingan terpisah) agar jika tombol tersebut diclick maka layar akan segera pindah ke “Screen 2”. Silahkan klik kanan pada tombol yang baru saja dibuat di Screen 1 kemudian pilih Navigate to > Screen 2.

image

8. Secara otomatis blend akan menambahkan “behaviour” baru bertipe “NavigateToScreenAction” ke dalam tombol yang baru kita buat. Karena jika diperhatikan dibawah button sekarang ada sebuah elemen baru bertipe “NavigateToScreenAction”. kemudian jika ditelaah pada bagian properties maka nilai dari properti TargetScreen adalah “<namaproyekanda>.Screen_2”. hal ini berarti bahwa jika diclick maka secara otomatis layar akan berpindah ke layar Screen 2.

9. Silahkan tekan F5 untuk menjalankan sketsa anda ini dan sebuah browser akan secara otomatis dijalankan oleh expression blend.

image

10.Silahkan tekan tombol Button yang ditengah dan perhatikan bahwa layar telah berganti.

Dari 10 langkah singkat diatas kita telah melihat bahwa kita dapat dengan mudah mengembangkan sketsa dari aplikasi kita tanpa perlu membuat sebuah kode apapun (untuk pindah layar saja kita hanya perlu melakukan beberapa klik). Tentunya hal ini akan semakin memudahkan untuk desainer dalam mendesain interaksi dari aplikasi yang akan dibuat karena desainer tidak perlu merepotkan programmer jika dia menginginkan fitur yang aneh2x. Dalam posting selanjutnya saya akan sedikit membahas mengenai bagaimana animasi dapat dilakukan dalam skecthflow.

cheers..

Share this post: | | | |
Published Wednesday, July 22, 2009 6:01 PM by ronald

Comments

No Comments
Powered by Community Server (Commercial Edition), by Telligent Systems