01 dari 07
Apakah Aliran Visual?
Aliran visual membawa mata penonton melalui dokumen dengan cara yang semua unsur penting mendapat ketinggian, dan tidak ada yang mengejutkan penglihatan atau menyebabkan penonton kehilangan sentuhan. Menggunakan elemen aliran yang jelas seperti anak panah atau nombor adalah cara yang paling biasa pereka Web menggunakan aliran, tetapi terdapat unsur-unsur lain yang boleh digunakan dan salah digunakan untuk mengarahkan pembaca anda bergerak di sepanjang jalan tertentu. Langkah-langkah dalam tutorial ini akan menunjukkan contoh aliran yang baik dan buruk dan membantu anda mempelajari perbendaharaan kata aliran visual dalam reka bentuk.
Aliran visual dapat dicapai dalam banyak cara:
- Anak panah
- Imej-imej atau unsur-unsur teks yang sepatutnya
- Perspektif
- Gradien
- Perubahan saiz
- Lengkung
- Gerak dalam imej
- Wajah - terutamanya mata
Imej berikut akan menunjukkan kepada anda beberapa kesilapan yang lazim dalam aliran di laman web dan cara membetulkannya.
02 dari 07
Aliran Teks Barat dari Kiri ke Kanan
Jika anda membesar membaca bahasa Barat, anda selalu berfikir bahawa teks harus bergerak dari kiri ke kanan. Jadi, apabila mata bergerak merentasi garis teks, ia bergerak dari kiri ke kanan.
Dalam gambar di atas, air terjun mengalir ke arah kanan ke arah kiri, dan teks mengalir air terjun. Oleh kerana kita semua tahu bahawa air terjun jatuh, terdapat sambungan ke arah aliran air dengan aliran teks. Mata penonton bergerak ke arah yang salah untuk membaca teks.
03 dari 07
Teks Anda Harus Aliran dengan Imej
Dalam kes ini, imej telah dibalikkan supaya teks mengalir ke arah yang sama seperti air. Semua elemen membawa mata penonton ke bawah dengan aliran air dan aliran teks.
04 dari 07
Kiri ke kanan sejajar dengan cepat
Kuda dalam foto ini berjalan dari kanan ke kiri, tetapi teks itu adalah bahasa Inggeris dan dibiarkan ke kanan. Impak visual perlumbaan kuda satu arah melambatkan kadar keseluruhan dokumen kerana ia akan menjadi arah yang berbeza daripada teks.
Dalam budaya Barat, kerana bahasa-bahasa kami berpindah dari kiri ke kanan, kami telah mengaitkan arah visual kiri ke kanan sebagai ke hadapan dan pantas, sementara kanan ke kiri lebih mundur dan lambat. Apabila anda membuat susun atur dengan konotasi kelajuan, anda harus ingat ini - dan pastikan imej anda bergerak ke arah yang sama seperti teks.
05 dari 07
Jangan Pegang Mata Penonton untuk Melambatkan
Apabila kuda dan teks kedua-duanya pergi arah yang sama, kelajuan tersirat meningkat.
06 dari 07
Tonton Mata di Foto Web
Banyak laman web dengan foto membuat kesilapan ini - mereka meletakkan foto seseorang di halaman, dan orang itu menjauhkan diri dari kandungan. Ini juga boleh dilihat di laman web Reka Bentuk About.com dalam reka bentuk lama.
Seperti yang anda dapat lihat, foto saya diletakkan di sebelah beberapa teks. Tetapi saya melihat jauh dari teks itu, saya hampir berpaling ke belakang. Jika anda melihat bahasa tubuh antara dua orang dalam satu kumpulan, mudah untuk menganggap bahawa saya tidak menyukai orang yang saya bersebelahan (dalam hal ini blok teks).
Banyak kajian penjejakan mata telah menunjukkan bahawa orang melihat muka pada laman web. Dan kajian yang berkaitan telah menunjukkan bahawa apabila melihat gambar, orang akan secara tidak sedar mengikuti mata untuk melihat gambar yang dilihat. Sekiranya foto di laman web anda melihat dari tepi pelayar, itulah di mana pelanggan anda akan melihat, dan kemudian tekan butang belakang.
07 dari 07
Mata dalam Mana-mana Foto Sekiranya Menghadapi Kandungan
Dalam reka bentuk baru untuk About.com, foto itu lebih baik. Sekarang mata saya kelihatan lebih maju, dan ada sedikit petunjuk yang saya cari ke kiri saya - di mana teks itu.
Foto yang lebih baik untuk kedudukan itu akan menjadi satu di mana bahu saya juga bersebelahan dengan teks. Tetapi ini adalah penyelesaian yang lebih baik daripada foto pertama. Dan, untuk situasi di mana imej akan berada di sebelah kanan kandungan serta kiri, ini boleh menjadi kompromi yang baik.
Ingat juga, walaupun imej muka manusia menarik perhatian yang paling, sama seperti gambar haiwan. Sebagai contoh, dalam susun atur sampel ini, saya mempunyai anjing saya yang melihat kiri, tetapi imej itu betul-betul siram. Jadi mereka melihat dari halaman. Susun atur ini akan bertambah baik jika saya mengubah orientasi anjing supaya mereka melihat ke tengah-tengah skrin.