Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Panduan Permulaan untuk Pengendalian Wireframing

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Malay (Melayu) translation by Fatimah (you can also view the original English article)

Wireframing adalah langkah penting dalam mana-mana proses reka bentuk skrin.  Ini terutama membolehkan anda menentukan hierarki maklumat reka bentuk anda, menjadikannya lebih mudah bagi anda untuk merancang susun atur mengikut cara anda mahu pengguna memproses maklumat tersebut. Jika anda masih belum menggunakan wireframing, sudah tiba masanya untuk mendapatkan kaki anda basah.

A simple wireframe

Ia seperti pelan tindakan seni bina; anda perlu melihatnya dalam rajah hitam dan putih dua dimensi sebelum anda memahami bagaimana untuk membina rumah sebenar.  Begitu juga untuk reka bentuk skrin, anda tidak boleh mula membina lapisan pixel di photoshop, atau menulis blok kod, tanpa mengetahui di mana maklumat akan pergi.

Pada tahap yang lebih mendalam, ketiak juga sangat berguna dalam menentukan bagaimana pengguna berinteraksi dengan antara muka.  Sebagai contoh, wireframes boleh mengandungi pelbagai keadaan butang atau tingkah laku menu.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

Wireframing adalah penting kerana ia membolehkan perancang untuk merancang susun atur dan interaksi antara muka tanpa terganggu oleh warna, pilihan typeface atau bahkan menyalin.  Saya ingin menerangkan kepada pelanggan saya bahawa jika pengguna tidak dapat mengetahui di mana untuk meneruskan wireframe hitam dan putih, tidak kira apa warna yang akhirnya anda gunakan.  Butang mestilah jelas walaupun ia tidak berkilat atau berwarna terang.

Seperti asas bangunan, ia harus kukuh pada dasarnya sebelum anda membuat keputusan sama ada untuk memberikan kot mahal cat.


Langkah 1: Mendapatkan Inspirasi

Sebelum mendapat butiran lanjut, kerana gambar boleh melukis seribu perkataan, perhatikan I ♥ wirefames .  Anda boleh mendapatkan gambaran ringkas dan pemahaman visual bagaimana pereka lain sedang mengendalikan proses wireframing mereka.

I Heart Wireframes

Mungkin juga ambil bookmarklet penyemak imbas yang bagus ini, Wirify yang membolehkan anda melihat versi "wireframe-d" dari mana-mana tapak langsung.

cnncom with wirify

Sekiranya anda sentiasa memerhatikan apa pereka atau laman web lain yang dilakukan untuk wireframe mereka, anda akan perlahan-lahan mendapatkan gambar dalam fikiran anda tentang bagaimana wireframe membantu menyusun maklumat untuk skrin.


Langkah 2: Merangka Proses Anda

Reka bentuk adalah proses organik dan oleh itu pereka yang berbeza pendekatan wireframing dan terjemahannya kepada visual atau kod dengan cara yang berbeza.  Anda perlu mencari proses yang membawa kekuatan sendiri dan anda paling selesa. Berikut adalah gambar rajah yang menunjukkan beberapa proses biasa:

Wireframes Process

37signals terkenal kerana menyokong penggunaan lakaran dan pergi terus ke kod , walaupun kelihatannya beberapa pereka mereka melibatkan penglihatan visual dalam proses mereka juga.

Bagi saya, saya telah melalui kitaran reka bentuk-ke-kod yang cukup untuk mempunyai proses yang agak diperkemas.  Ini adalah langkah yang tidak difikirkan oleh orang, tetapi saya juga mempertimbangkan sebarang kerangka html / css yang akan saya gunakan dalam projek ini.

Sebagai contoh, saya digunakan untuk membina satu tan laman dalam Rangka Tindakan , oleh itu saya akan menetapkan kedua-dua wireframe dan Rangka Tindakan saya ke grid 12-kolom yang sama.  Ini mempercepat prototaip dan masa pembangunan dengan ketara, kerana bukannya perlu menulis setiap lebar elemen ke dalam lembaran gaya css saya, mereka kini telah ditentukan sebelumnya dari satu hingga dua belas tiang lebar. Saya kini menggunakan cssgrid bukannya untuk sokongan reka bentuk responsifnya, tetapi ia masih ditetapkan pada grid 12-kolom yang boleh anda muat turun sebagai template photoshop.

the 12-column cssgrid template

Seperti yang saya katakan, terpulang kepada anda untuk memutuskan proses mana yang anda selesa dengan, kadang-kadang anda mungkin mencuba beberapa kali sebelum menyedari yang mana prosesnya paling berkesan. Sesetengah orang mungkin benar-benar baik dalam membuat lakaran dan mereka mungkin lebih suka menggunakan alat penyahtampingan sama sekali.  Pereka lain mungkin ingin mempunyai banyak langkah yang mungkin untuk meminimumkan penyimpangan atau membolehkan mereka berfikir melalui setiap lelaran tunggal apabila reka bentuk mula mengambil bentuk dan bentuk.

Anda akhirnya akan mengembangkan proses pilihan anda sendiri tetapi demi tutorialnya saya akan menggunakan proses tipikal saya sebagai contoh:

Alasan mengapa saya menggunakan Biasanya Illustrator sebagai alat wireframing saya terutamanya kerana tiga sebab:

  1. Gaya - anda boleh menyimpan gaya jenis dan objek dan menggunakan semula mereka sepanjang, seperti CSS.
  2. Ia mudah untuk mengubah suai, bergerak atau skala pelbagai objek.
  3. Ia memberikan peralihan mudah ke Photoshop kemudian.

Walau bagaimanapun, saya menggunakan alat lain dan ia bergantung kepada senario projek. Saya akan menggariskan beberapa alat popular, kekuatan dan kelemahan mereka di bahagian seterusnya.


Langkah 3: Pilih Alat Anda

Berikut adalah beberapa alat popular tanpa pesanan tertentu:

Balsamiq

Balsamiq menjadi popular sebagai wireframes yang dihasilkan dengan Balsamiq menyerupai sketsa, menjadikannya segera jelas bahawa wireframe bukan produk siap tetapi kerja sedang berjalan.  Balsamiq juga mempunyai komponen besar komponen yang boleh diguna semula yang boleh diseret dan digugurkan dengan mudah untuk merancang wireframe anda.

Sample Balsamiq wireframe from the Balsamiq website

Anda juga boleh menggunakannya di hampir mana-mana platform, dengan versi desktop tersedia untuk Mac, Windows dan Linux, dan terdapat versi web jika anda lebih suka bekerja di awan.  Apl pihak ketiga seperti iMockups untuk iOS juga menyokong format eksport Balsamiq.

Omnigraffle

Kegemaran Mac yang lama, Omnigraffle juga mempunyai perpustakaan yang disokong oleh pengguna komponen yang dapat diguna semula; Graffletopia .

youll like omnigraffle if you enjoy using beautiful stencils like this one

Oleh kerana ia dibangunkan khusus sebagai aplikasi rajah, Omnigraffle juga mempunyai ciri - ciri kompleks seperti susun atur automatik, sokongan gaya objek tersuai, panduan pintar dan alat grafik.  Beberapa ciri ini juga tersedia dalam suite Adobe CS, tetapi jika anda tidak mempunyai suite CS, Omnigraffle adalah nilai yang baik (~ $ 100) untuk menghasilkan wireframes terperinci.

Keceriaan

Hampir seperti datuk alat wireframing , Axure adalah salah satu alat wireframing / prototyping kelas pertama yang profesional.  Sehingga baru-baru ini, ia hanya tersedia di Windows.  Saya secara peribadi tidak mempunyai banyak pengalaman dengannya, tetapi ia dikenali sebagai alat yang digunakan secara meluas di kalangan profesional industri.

Flairbuilder

Anak baru di blok, Flairbuilder mempunyai sokongan yang sangat kuat untuk interaksi.

from show hide to if-else interactions

Ia juga mempunyai perpustakaan komponen yang besar, menyokong halaman utama dan anda boleh mengeksport prototaip untuk dilihat dalam talian.

Aplikasi dalam talian

Jika perisian desktop bukan cawan teh anda, ada alat seperti mockflow , hotgloo dan mockingbird .

Keynote / Powerpoint

Keynotopia "mengubah aplikasi pembentangan kegemaran anda ke alat prototaip cepat yang pantas untuk mewujudkan mockups aplikasi mudah alih, web dan desktop".  Bagi pengguna bukan mac, jangan risau, Keynotopia juga menawarkan template powerpoint.

Saya secara peribadi mengesyorkannya jika anda perlu menggunakan aplikasi mudah alih atau protoype mudah alih dengan pantas. Satu lagi alternatif yang baik ialah Keynote Kungfu .

Adobe CS

Bagi orang-orang yang sudah biasa dengan suite Adobe, Fireworks, Illustrator dan Indesign adalah alat wireframing yang sangat mampu dengan kelebihan dan kelemahan masing-masing.

Fireworks

Anda boleh bekerja pada keseluruhan proses reka bentuk di Fireworks, dari wireframes asas hingga visual penuh.  Halaman-halaman induk sokongan bunga api (fikirkan mereka sebagai templat boleh diguna semula di mana setiap penyuntingan pada template induk boleh digunakan di seluruh halaman anak-anak anda), perpustakaan unsur dan anda boleh membuat prototaip interaktif dengan Fireworks dengan cepat.

Illustrator

Ini adalah salah satu alat kegemaran saya untuk digunakan kerana saya sudah sangat akrab dengan Illustrator dan saya yakin banyak pereka di sini akan mengenalinya juga.  Saya menggunakan Illustrator apabila saya cuba melakukan dengan cepat, tetapi wireframe kompleks, tanpa memerlukan interaktiviti.

Apa yang menjadikannya pemenang?  Keupayaan untuk mengeksport sebagai JPA dengan lapisan yang boleh diedit, salinan kuat dan tampal sokongan kepada Photoshop, dan kawalan tipografi yang kuat dengan gaya jenis yang anda boleh menyimpan, mengedit dan menggunakan semula, hampir seperti CSS.

Indesign

Kekuatan yang sama kepada Illustrator dengan kawalan gaya percetakan yang lebih kuat, sokongan halaman utama yang kuat dan kebolehan baru-baru ini untuk membuat prototaip interaktif.

Have you seen the interactive controls of InDesign

Saya memilih Indesign apabila saya perlu membuat prototaip multi-halaman kesetiaan tinggi interaktif. Satu-satunya kaveat bagi saya adalah sokongan eksport lemah untuk Photoshop untuk mereka bentuk visual.

ProtoShare

"Prototaip yang kuat dibuat Mudah."  Baru-baru ini dikeluarkan versi 9 dengan palet wysiwyg baru.  Perlu diperiksa .


Langkah 4: Menetapkan Grid

Terdapat banyak teori mengenai sistem grid, tetapi tanpa terlalu banyak ke dalamnya, saya akan menerangkannya sebagai "cara berstruktur dan mudah untuk elemen susun atur".

Saya menggunakan Illustrator untuk tutorial ini tetapi langkah-langkah boleh digunakan untuk mana-mana alat anda.

Pertama, tetapkan saiz dokumen.  Saya menggunakan 1280 x 900 kerana saya akan menggunakan cssgrid yang akan membolehkan laman web saya skala antara resolusi mudah alih dengan maksimum 1140 piksel dengan mudah.

Letakkan templat yang dimuat turun dari cssgrid ke dalam dokumen anda.

Petua:

Terdapat banyak template grid yang tersedia untuk dimuat turun, tetapi jika anda berminat untuk menyesuaikan diri anda, lihat responsify.it .


Langkah 5: Tentukan Layout Dengan Kotak

Mula dengan menarik kotak pada grid.  Pikirkan tentang maklumat yang anda ingin sampaikan kepada pelawat anda, ke atas adalah yang paling mudah, diikuti oleh kiri ke kanan.  Di bawah ini adalah contoh wireframe yang mempunyai susun atur yang biasa digunakan oleh syarikat perisian hari ini:

Kadang-kadang, bergantung kepada matlamat anda dan entiti yang anda buat, anda boleh menjadi kreatif dengan susun atur, walaupun masih menyimpan hierarki maklumat dalam fikiran. Ini adalah contoh dunia sebenar salah satu pelanggan saya di mana saya telah keluar dari susunan laman web syarikat teknologi konvensional:

Berikut adalah susun atur untuk blog, dengan bekas pengiklanan yang diposisikan dengan teliti dan arahan khusus untuk pelanggan:


Langkah 6: Tetapkan Hierarki Maklumat Dengan Tipografi

Selepas anda berpuas hati dengan cara kotak dibentangkan, mulailah menjatuhkan bit dan potongan kandungan anda untuk merasakan sama ada maklumat itu berstruktur dengan baik.  Peraturan praktikal adalah sama: maklumat yang anda ingin sampaikan kepada penonton anda harus jelas, bahkan dalam wireframe hitam dan putih.

Hanya menggunakan saiz fon yang berbeza sebagai permulaan adalah cara yang baik untuk membezakan antara tahap maklumat yang berbeza.

Jangan takut untuk mencuba pada peringkat ini.  Kadang-kadang, semasa anda mengisi lebih terperinci, anda mungkin menyadari tata letak asal tidak berfungsi dengan baik.  Itulah maksud keseluruhan proses wireframing; untuk membuat seberapa banyak lelaran yang mungkin untuk mempersempit cara terbaik untuk mewakili maklumat yang anda cuba berkomunikasi.

Dalam contoh di bawah, saya telah memutuskan bahawa saya mahukan tangkapan skrin mempunyai lebih banyak kesan dan saya juga mula menggunakan kotak hitam untuk menentukan yang mana bidang yang akan mengambil kepentingan visual untuk laman web ini:

Langkah 7: Fine-tuning Dengan Skala Kelabu

Menggunakan spektrum grayscale penuh dapat membantu anda menentukan kekuatan visual unsur anda tanpa perlu memilih palet warna.  Malah, ia boleh membantu anda semasa proses reka bentuk visual di kemudian hari.


Langkah 8: Wireframe definisi Hi

Ini adalah langkah pilihan, tetapi jika anda suka mengambil sesuatu dalam kenaikan yang anda mungkin ingin mencubanya.  Membuat definisi wireframe bermakna hanya menambah lebih banyak butiran, sebanyak mungkin, tanpa terlalu butiran ke dalam butiran visual.  Ini mungkin bermakna pengisian salinan sebenar ke dalam wireframe dan cuba menentukan ukuran font yang ideal:

Ia juga boleh melibatkan warna:

Idea umum ialah pada tahap visual / kod yang anda mahu berada dalam mod penggilap dan tidak lagi dalam mod penggubalan atau eksperimen. Lakukan kitaran lelaran (maklum balas <-> wireframing) secepat mungkin dalam aplikasi wireframing yang anda selesa gunakan, bukannya lapisan dan piksel bergerak di photoshop.

Bahwa dikatakan, dalam senario tertentu mungkin lebih ideal untuk melewatkan penentuan butiran terlalu banyak dan langsung masuk ke tahap prototipe interaktif (ala 37signals).  Hujah ini adalah bahawa butiran interaksi tertentu tidak dapat disampaikan sepenuhnya pada imej rata.

Jika anda bekerjasama dengan satu pasukan pemaju, anda mungkin mahu menyerahkan wireframes yang diluluskan kepada pemaju untuk mengodkan rangka asas semasa anda bekerja pada visual.


Langkah 9: Menerjemahkan Wireframe ke Visual

Disebutkan sebelumnya, alasan mengapa saya lebih suka menggunakan Illustrator untuk wireframing adalah kerana saya dapat mengekspor ke dalam .psd dengan sebagian besar jenis lapisan yang dapat diedit.  Pada saat saya di Photoshop saya tidak perlu mengeditnya terlalu banyak (Photoshop memiliki alat kontrol yang lebih rendah, meskipun banyak perbaikan di CS6): 

Photoshop Export Options

Berikut adalah contoh wireframe yang diterjemahkan ke dalam visual.  Tulang punggung dari wireframe ini cukup utuh, meski ada tweak yang dibuat secara visual.  Anda juga boleh melihat tapak langsungnya :

Webwise 2010

Kesimpulan

Kita sudah berada di akhir tutorial ini.  Saya harap telah menginspirasi anda untuk memulakan percubaan! Proses desain apa, jangan takut untuk mengulang dan ulangi lagi.

Juga, habiskan beberapa waktu bereksperimen dengan alat dan proses yang berbeda.  Anda akan mendapati masa yang layak pelaburan setelah anda menemukan aplikasi yang terasa intuitif untuk anda.

Jangan ragu untuk mengajukan pertanyaan di komentar, terima kasih telah membaca! 


Sumber Daya Tambahan

Jika anda ingin mengetahui lebih lanjut mengenai wireframing, anda mungkin ingin melihat sumber ini.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.