01 จาก 07
Visual Flow คืออะไร?
การไหลของภาพทำให้ตาของผู้ดูผ่านเอกสารในลักษณะที่องค์ประกอบที่สำคัญทั้งหมดได้รับความสำคัญและไม่มีอะไรที่ทำให้เห็นภาพหรือทำให้ผู้ชมสูญเสียความรู้สึกของชิ้นงาน การใช้องค์ประกอบของการไหลที่เห็นได้ชัดเช่นลูกศรหรือตัวเลขเป็นวิธีที่ใช้กันโดยทั่วไปนักออกแบบเว็บใช้การไหล แต่มีองค์ประกอบประเภทอื่น ๆ ที่สามารถนำมาใช้และนำมาใช้เพื่อนำทางผู้อ่านของคุณไปตามเส้นทางที่เฉพาะเจาะจงได้ ขั้นตอนในบทแนะนำนี้จะแสดงตัวอย่างการไหลที่ดีและไม่ดีและช่วยให้คุณเรียนรู้คำศัพท์เกี่ยวกับการไหลเวียนภาพในการออกแบบ
การไหลของภาพสามารถทำได้หลายวิธี:
- ลูกศร
- ภาพหรือองค์ประกอบข้อความที่ต่อเนื่อง
- มุมมอง
- การไล่ระดับสี
- เปลี่ยนขนาด
- เส้นโค้ง
- ภาพเคลื่อนไหว
- ใบหน้า - โดยเฉพาะตา
ภาพต่อไปนี้จะแสดงข้อผิดพลาดบางประการในการไหลเวียนของเว็บเพจและวิธีการแก้ไข
02 จาก 07
ข้อความแบบตะวันตกไหลจากซ้ายไปขวา
ถ้าคุณโตขึ้นอ่านภาษาตะวันตกคุณเคยคิดว่าควรย้ายข้อความจากซ้ายไปขวา ดังนั้นเมื่อตาเคลื่อนไปตามเส้นของข้อความจะเคลื่อนที่จากซ้ายไปขวา
ในภาพข้างต้นน้ำตกไหลไปทางขวาไปทางซ้ายและข้อความไหลลงสู่น้ำตก เนื่องจากเราทุกคนรู้ว่าน้ำตกตกลงมามีการตัดการเชื่อมต่อในทิศทางของการไหลของน้ำกับการไหลของข้อความ ตาของผู้ดูเคลื่อนที่ไปในทิศทางที่ไม่ถูกต้องเพื่ออ่านข้อความ
03 จาก 07
ข้อความของคุณควรไหลพร้อมรูปภาพ
ในกรณีนี้ภาพถูกย้อนกลับเพื่อให้ข้อความไหลไปในทิศทางเดียวกับน้ำ องค์ประกอบทั้งหมดนำทางผู้ชมด้วยสายตาของการไหลของน้ำและการไหลของข้อความ
04 จาก 07
จากซ้ายไปขวาเท่ากับ Fast
ม้าในภาพนี้กำลังวิ่งจากขวาไปซ้าย แต่ข้อความเป็นภาษาอังกฤษและจากซ้ายไปขวา ภาพผลกระทบของการแข่งม้าหนึ่งทิศทางช้าลงก้าวของเอกสารทั้งหมดเพราะเป็นไปในทิศทางที่แตกต่างจากข้อความ
ในวัฒนธรรมตะวันตกเนื่องจากภาษาของเราเคลื่อนจากซ้ายไปขวาเราจึงเชื่อมโยงทิศทางภาพจากซ้ายไปขวาขณะที่เดินไปข้างหน้าและเร็วในขณะที่ด้านขวาไปทางซ้ายจะถอยหลังและช้าลง เมื่อคุณสร้างเค้าโครงที่มีความหมายแฝงของความเร็วคุณควรจำสิ่งนี้ไว้และเก็บภาพของคุณเคลื่อนที่ไปในทิศทางเดียวกับข้อความ
05 จาก 07
อย่าบังคับให้ตาของผู้ดูช้าลง
เมื่อม้าและข้อความทั้งสองไปในทิศทางเดียวกันความเร็วโดยนัยจะเพิ่มขึ้น
06 จาก 07
ดูดวงตาในเว็บรูปภาพ
เว็บไซต์จำนวนมากที่มีรูปถ่ายทำให้เกิดข้อผิดพลาดนี้ทำให้พวกเขาวางรูปถ่ายของบุคคลบนหน้าเว็บและบุคคลนั้นมอง ออกไป จากเนื้อหา นี้สามารถแม้แต่จะมองเห็นได้ในเว็บไซต์ออกแบบเว็บไซต์ About.com ในการออกแบบเดิม
ดังที่คุณเห็นรูปภาพของฉันอยู่ถัดจากข้อความ แต่ฉันมองออกไปจากข้อความที่ฉันเกือบจะหันหลังให้กับฉัน ถ้าคุณเห็นภาษากายระหว่างคนสองคนในกลุ่มก็จะง่ายต่อการสมมติว่าฉันไม่ชอบคนที่ฉันอยู่ข้างหน้า (ในกรณีนี้ข้อความ)
การศึกษาเกี่ยวกับการติดตามตาจำนวนมากได้แสดงให้เห็นว่าผู้คนเห็นใบหน้าในเว็บเพจ และการศึกษาที่เกี่ยวข้องได้แสดงให้เห็นว่าเมื่อมองภาพคนจะมองตามภาพโดยไม่ได้ตั้งใจเพื่อมองเห็นภาพ หากรูปภาพในไซต์ของคุณกำลังมองนอกขอบของเบราว์เซอร์นั่นคือที่ที่ลูกค้าของคุณจะมองหาแล้วกดปุ่มย้อนกลับ
07 จาก 07
ตาในรูปใด ๆ ควรเผชิญกับเนื้อหา
ในการออกแบบใหม่สำหรับ About.com ภาพจะดูดีขึ้นเล็กน้อย ตอนนี้ตาของฉันกำลังมองไปข้างหน้ามากขึ้นและมีคำใบ้เล็กน้อยที่ฉันกำลังมองไปทางซ้ายของฉันซึ่งเป็นข้อความ
ภาพที่ดียิ่งขึ้นสำหรับตำแหน่งนั้นก็คือมุมหนึ่งที่ไหล่ของฉันยังมีมุมตรงกับข้อความ แต่นี่เป็นทางเลือกที่ดีกว่าภาพแรก และสำหรับสถานการณ์ที่ภาพจะอยู่ด้านขวาของเนื้อหาเช่นเดียวกับด้านซ้ายอาจเป็นการประนีประนอมได้ดี
โปรดจำไว้ว่าในขณะที่ภาพใบหน้าของผู้คนดึงดูดความสนใจมากที่สุดเช่นเดียวกับภาพถ่ายจากสัตว์ ตัวอย่างเช่นในรูปแบบตัวอย่างนี้ฉันมีสุนัขของฉันมองไปทางซ้าย แต่ภาพจะถูกล้างออกทางด้านขวา ดังนั้นพวกเขาจึงมองออกหน้า รูปแบบนี้จะดีขึ้นถ้าฉันเปลี่ยนทิศทางของสุนัขเพื่อให้พวกเขามองไปที่กึ่งกลางของหน้าจอ