หลักการออกแบบ – บทนำสู่ลำดับชั้นภาพ

เผยแพร่แล้ว: 2022-03-11

เมื่อเทคโนโลยีและอินเทอร์เฟซผู้ใช้เปลี่ยนไป ความต้องการทักษะการออกแบบในการออกแบบภาพก็เพิ่มขึ้นอย่างต่อเนื่อง ด้วยตัวอย่างใหม่ของอินเทอร์เฟซผู้ใช้ทั่วไปที่เกิดขึ้นทุกปี ความเข้าใจพื้นฐานของเราเกี่ยวกับลำดับชั้นของภาพ การรับรู้ และองค์ประกอบเปลี่ยนไปหรือไม่

แนวคิดสมัยใหม่ของการรับรู้ภาพมีรากฐานไม่เพียง แต่ในวิทยาศาสตร์เท่านั้น แต่ยังรวมถึงจิตวิทยาด้วย ดังนั้น ไม่ว่าอินเทอร์เฟซผู้ใช้จะเปลี่ยนแปลงอย่างต่อเนื่อง วิธีที่เราเห็นและรับรู้ข้อมูลภาพจะยังคงเหมือนเดิม เมื่อพิจารณาถึงสิ่งนี้ เป็นไปได้ไหมที่การออกแบบการโต้ตอบร่วมสมัยจะปรับปรุงบนพื้นฐานขององค์ประกอบกราฟิกและลำดับชั้นของภาพ

กฎพื้นฐานของการรับรู้ทางสายตามีความสำคัญต่อการออกแบบภาพใดๆ เนื่องจากจะสอนวิธีการถ่ายทอดข้อมูลที่มีความหมายที่ฝังอยู่ให้เร็วที่สุด อย่างไรก็ตาม เนื่องจากการออกแบบภาพเป็นลูกพี่ลูกน้องที่ใกล้ชิดกับการออกแบบกราฟิก มาตรฐานเหล่านี้จึงถูกกำหนดขึ้นสำหรับสื่อสิ่งพิมพ์ และยังไม่ได้กำหนดนิยามใหม่สำหรับดิจิทัล

บางอย่างเช่น "โรงเรียน Bauhaus ดิจิทัล" ที่อาจสร้างหลักการออกแบบใหม่ยังไม่เกิดขึ้น เนื่องจากผู้คนประสบกับ UI ในรูปแบบที่ต่างไปจากเดิมอย่างสิ้นเชิง กฎของลำดับชั้นและองค์ประกอบภาพไม่เพียงแต่ล้าสมัยเท่านั้น แต่ยังยุบลงในอินเทอร์เฟซผู้ใช้อีกด้วย

โดยส่วนใหญ่ นักออกแบบยังคงมองว่าหน้าจอเป็นวัตถุสองมิติแบบคงที่ และความท้าทายสำหรับนักออกแบบเชิงโต้ตอบคือการสร้างสรรค์สิ่งใหม่ๆ ที่นอกเหนือไปจากการนำรูปแบบการพิมพ์ไปใช้กับโครงการสื่อดิจิทัลของตน แต่ก่อนที่การออกแบบใหม่จะก้าวหน้า จำเป็นต้องทบทวนความเข้าใจพื้นฐานเกี่ยวกับลำดับชั้นของภาพ การรับรู้ และองค์ประกอบภาพ

ลำดับชั้นภาพในหลักการออกแบบ
ลำดับชั้นการออกแบบส่วนใหญ่บนเว็บเริ่มต้นมาจากการออกแบบตามการพิมพ์ เช่น เลย์เอาต์ของหนังสือพิมพ์

ลำดับชั้นของภาพ: ความเข้าใจใหม่เกี่ยวกับองค์ประกอบภาพสำหรับอินเทอร์เฟซแบบโต้ตอบ

ลำดับชั้นของภาพคืออะไร และเหตุใดจึงสำคัญ ลำดับชั้นของภาพคือการจัดวางเนื้อหาในองค์ประกอบเพื่อสื่อสารข้อมูลและถ่ายทอดความหมายอย่างมีประสิทธิภาพ ลำดับชั้นของภาพนำผู้ดูไปยังข้อมูลที่สำคัญที่สุดก่อน จากนั้นจึงไปที่เนื้อหารอง

ก่อตั้งขึ้นโดยใช้ ขนาด สี รูปร่าง ระยะทาง สัดส่วน และทิศทาง ที่เหมาะสม ความหมาย แนวคิด และอารมณ์ขององค์ประกอบนั้นถ่ายทอดผ่านการใช้องค์ประกอบกราฟิกที่สร้างสรรค์ซึ่งกำหนดลำดับชั้นของภาพ

ความสำคัญของลำดับชั้นภาพในการออกแบบ UX บนมือถือ
นักออกแบบใช้ขนาด สี รูปร่าง และทิศทางในการสื่อความหมายและอารมณ์ในการออกแบบอย่างไร

ลำดับชั้นของภาพเป็นสิ่งสำคัญสำหรับการออกแบบภาพทุกประเภท ไม่ว่าจะเป็นหน้า Landing Page ที่ต้องชี้นำสายตาของผู้เข้าชมหรือการนำทางของ UI บนมือถือ ความเข้าใจของผู้ใช้ในทุกองค์ประกอบได้รับการระบุในองค์ประกอบอื่นๆ ในองค์ประกอบและบริบท องค์ประกอบองค์ประกอบจะได้รับการปฏิบัติตามลำดับเพื่อสร้างความสัมพันธ์ที่มองเห็นได้ และด้วยเหตุนี้จึงสร้างลำดับชั้นของภาพในการออกแบบ

ต้องการนักออกแบบ UI อิสระที่ทำงานเต็มเวลาในสหรัฐอเมริกา

สีในลำดับชั้นภาพ

กฎของลำดับชั้นของภาพหลายกฎอาจดูค่อนข้างเรียบง่ายและซ้ำซาก แต่ก็เป็นพื้นฐานที่สำคัญสำหรับการออกแบบภาพที่ดี ตัวอย่างเช่น สีเป็นองค์ประกอบสร้างสรรค์ที่สร้างผลกระทบมากที่สุดในการออกแบบภาพ

พิจารณาความหมายแฝงของกาชาดและกาชาดแบบโมโนโครม เครื่องหมายกาชาดหมายถึงความเป็นกลางและการป้องกันในระดับสากล นั่นคือศักยภาพในการสื่อสารทันทีด้วยการใช้สี มักใช้สีเพื่อระบุกลุ่ม เนื่องจากเมื่อกากบาทสีแดงหนึ่งอันในบรรดาสีเดียวสามสีมีความโดดเด่นกว่า

สีสันที่สดใสและสมบูรณ์นั้นโดดเด่นกว่าสีที่ปิดเสียง ดังนั้นจึงมีผลกับภาพมากกว่า ในอินเทอร์เฟซ สามารถใช้สีเพื่อแสดงความรู้สึกของโครงสร้างและชี้ไปที่การโต้ตอบที่มีอยู่ สีเดียวภายในอินเทอร์เฟซแบบสีเดียวสามารถแยกแยะการเลือกได้ และแม้กระทั่งแนะนำสิ่งที่อยู่เหนือปุ่มที่ผู้ใช้วางเมาส์ไว้

ออกแบบลำดับชั้นในการพิมพ์ด้วยสี
สีหรือส่วนที่ขาดหายไปในองค์ประกอบการออกแบบขาวดำสามารถใช้เพื่อร่างองค์ประกอบ UI และดึงดูดผู้ใช้ในระดับจิตใต้สำนึก

สียังเต็มไปด้วยความหมายและอารมณ์ที่สามารถส่งข้อมูลที่ชัดเจนไปยังจิตใต้สำนึกของผู้ดู ในการสร้างแบรนด์ มีการวิจัยทางจิตวิทยามากมายเกี่ยวกับสี เนื่องจากจะสร้างการตอบสนองภายในของผู้บริโภคก่อนที่จะมีปฏิสัมพันธ์ที่มีความหมายกับแบรนด์ ตัวอย่างเช่น บลูส์มักถูกมองว่าเชื่อถือได้ ปลอดภัย และสงบ ในขณะที่สีแดงนั้นกระตุ้นและเป็นที่ทราบกันดีว่าช่วยเพิ่มอัตราการเต้นของหัวใจของผู้คน อย่างไรก็ตาม สีอาจมีความสำคัญแตกต่างกันไปขึ้นอยู่กับวัฒนธรรม

ตัวอย่างที่ดีของการใช้สีที่มีโครงสร้างและมีความหมายในการออกแบบเว็บคือไซต์ The Names for Change เว็บไซต์สื่อสารโครงสร้างทันทีผ่านการใช้สี องค์กรจะกระจัดกระจายตามค่าเริ่มต้น แต่สามารถจัดเรียงใหม่ตามหัวข้อและ/หรือสีได้

อย่างไรก็ตาม โทนเสียงที่เลือกช่วยเอาชนะหนึ่งในปัญหาที่อาจเกิดขึ้นสำหรับความหมายของไซต์ การระดมทุนสำหรับของใช้ประจำวัน เช่น ถุงเท้าหรือผ้าอนามัยแบบสอดนั้นไม่น่าตื่นเต้นพอที่จะขายตัวเองได้ ดังนั้นโทนกราฟิกที่รุนแรงของไซต์จะเพิ่มมูลค่าการรับรู้ของสิ่งของในชีวิตประจำวันในขณะที่สร้างโครงสร้างองค์กรที่จำเป็น

ลำดับชั้นของภาพสามารถกำหนดได้ด้วยการใช้สีในการออกแบบเว็บ
ลำดับชั้นและโครงสร้างภาพได้รับการสนับสนุนโดยการใช้สีบนไซต์ The Names for Change

ขนาดในลำดับชั้นภาพ

ลองนึกภาพภาพประกอบของนกตัวใหญ่ตัวหนึ่งนั่งถัดจากนกตัวเล็กสามตัว หากไม่มีข้อมูลเพิ่มเติม ภาพกราฟิกที่เรียบง่ายนี้จะสื่อถึงความสัมพันธ์ระหว่างองค์ประกอบต่างๆ ในทันที นั่นคือ พ่อแม่และลูก ซึ่งสื่อสารถึงครอบครัวร่วมกัน

ในการออกแบบกราฟิกแบบดั้งเดิม กลยุทธ์ทั่วไปคือการทำให้องค์ประกอบที่สำคัญที่สุดมีขนาดใหญ่ที่สุด จากนั้นจึงลดขนาดองค์ประกอบตามลำดับชั้น ขนาดกำหนดลำดับชั้นของภาพเนื่องจากองค์ประกอบที่ใหญ่ที่สุดดึงดูดความสนใจเป็นอันดับแรก ดังนั้นจึงดูเหมือนจะมีความสำคัญที่สุด

ขนาดฟอนต์ต่างๆ มักจะใช้ในเนื้อความของข้อความเพื่อระบุความแตกต่างที่มีนัยสำคัญ เช่น ส่วนหัว ส่วนต่างๆ และเครื่องหมายคำพูด เนื้อหารอง เช่น คำบรรยายภาพ มักจะมีขนาดเล็กกว่าเพื่อไม่ให้แข่งขันกับเนื้อหาหลักของข้อความ

ลำดับชั้นการออกแบบนั้นชัดเจนในการออกแบบ UI เช่น Instagram

พิจารณาอินเทอร์เฟซภาพที่ใช้กันอย่างแพร่หลาย เช่น Instagram ไม่มีสิ่งใดบนหน้าจอที่จะแข่งขันกับรูปภาพและวิดีโอ—ซึ่งกินพื้นที่มากกว่า 60 เปอร์เซ็นต์ของหน้าจอส่วนใหญ่ วัตถุประสงค์ของ UI เป็นไปโดยทันที

ตัวอย่างการปรับโครงสร้างทั่วไปของลำดับชั้นภาพในการออกแบบเว็บคือไซต์ผลงานสำหรับสตูดิโอศิลปะ/การออกแบบ Ro/Lu ไซต์ที่ผิดปกติของพวกเขาอาจไม่ได้ใช้งานง่ายที่สุด แต่ท้าทายการจัดวางภาพของพอร์ตโฟลิโอโฆษณาออนไลน์ทั่วไป เนื่องจากการสุ่มโดยเจตนาของโปรเจ็กต์ที่หลากหลาย โปรเจ็กต์ที่แตกต่างกันจึงปรากฏเด่นชัดทุกครั้งที่ผู้เยี่ยมชมมาที่ไซต์ ซึ่งทำให้การเยี่ยมชมแต่ละครั้งมีเอกลักษณ์และน่าสนใจ

งานไม่ได้จัดเป็นลำดับชั้นในพอร์ตโฟลิโอของสตูดิโอออกแบบสร้างสรรค์ส่วนใหญ่ เนื่องจากแต่ละโครงการมีเอกลักษณ์เฉพาะตัวและถือว่ามีความสำคัญเท่าเทียมกัน การออกแบบไซต์ Ro/Lu สร้างองค์ประกอบแบบไดนามิกที่มีระดับความสนใจที่แตกต่างกันในการเข้าชมแต่ละครั้ง และกระตุ้นให้ผู้ชมตรวจสอบผลงานที่กว้างขวางของสตูดิโอ ดังนั้นลักษณะแบบผสมผสานและแบบสหวิทยาการของสตูดิโอออกแบบจึงถูกแสดงโดยการแสดงเนื้อหาแบบสุ่ม

พื้นฐานการออกแบบสามารถเปลี่ยนแปลงได้ด้วยลำดับชั้นภาพที่ผิดปกติ
ไซต์สำหรับสตูดิโอศิลปะ/การออกแบบ Ro/Lu ยกระดับลำดับชั้นการออกแบบให้ได้ผลดีเยี่ยม

การจัดตำแหน่งใน Visual Hierarchy

การจัดตำแหน่งในลำดับชั้นที่มองเห็นได้สื่อถึงความรู้สึกเป็นระเบียบโดยการเชื่อมต่อองค์ประกอบในเชิงพื้นที่ เช่นเดียวกับบทต่างๆ ในนวนิยายที่ไม่ใช่เชิงเส้น ลองนึกภาพสี่เหลี่ยมจัตุรัสที่โดดเด่นไม่เหมือนใครในองค์ประกอบกราฟิก เมื่อองค์ประกอบเดียวแตกโครงสร้างที่จัดตั้งขึ้น มันจะโดดเด่นจากองค์ประกอบและด้วยเหตุนี้จึงบรรลุความหมายที่สัมพันธ์กับส่วนที่เหลือ

องค์ประกอบที่เข้มงวดอาจดูนิ่งและไม่น่าสนใจทางสายตา เว้นแต่องค์ประกอบจะโดดเด่นจากตารางที่มองเห็นได้ กล่าวคือ จากความรู้สึกเป็นระเบียบ การไม่ตรงแนวหรือ "การแตกหักของเส้นตาราง" เป็นโอกาสที่จะทำให้องค์ประกอบกราฟิกมีน้ำหนักในการมองเห็นมากขึ้น แนวคิดนี้เป็นพื้นฐานของลำดับชั้นภาพในการออกแบบ

ตามหลักการในการออกแบบภาพแบบดั้งเดิม องค์ประกอบที่วางอยู่ตรงกลางเฟรมจะมีความสำคัญมากกว่า ตัวอย่างเช่น เนื้อหาหลักหรือองค์ประกอบอินเทอร์เฟซอาจวางไว้ตรงกลาง ในขณะที่การนำทาง เมนู และเนื้อหารองอื่นๆ มักจะถูกเก็บไว้ที่ด้านข้าง

แต่นักออกแบบผู้บุกเบิกชอบท้าทายสภาพที่เป็นอยู่ เมื่อการออกแบบเชิงโต้ตอบใช้หลักการลำดับชั้นของภาพพื้นฐานแล้วขยายขอบเขตไปสู่องค์ประกอบภาพที่เป็นนวัตกรรมใหม่ ประสบการณ์ใหม่ที่น่าสนใจจะถูกสร้างขึ้น โดยใช้การจัดตำแหน่งที่แตกต่างกัน การเชื่อมโยงและความหมายใหม่ระหว่างองค์ประกอบต่างๆ

ตัวอย่างเช่น โปรเจ็กต์ DNA เป็นไซต์ที่ใช้ชุดของลำดับชั้นที่ไม่ปะติดปะต่อกันเพื่อสื่อสารถึงโครงสร้างที่สร้างสรรค์ของอัลบั้มของนักดนตรี โครงสร้างของเว็บไซต์มีความซับซ้อน เช่นเดียวกับการสร้างอัลบั้ม

ขั้นแรก ผู้เข้าชมจะได้รับเชิญให้ฟังเพลงโดยคลิกผ่านแทร็กของอัลบั้ม ซึ่งจัดอยู่ในรูปแบบอัลบั้มตามธรรมเนียม อย่างไรก็ตาม โดยการอนุญาตให้ผู้เข้าชมจัดองค์ประกอบ DNA ของไซต์ แนวคิดของอัลบั้มได้รับการสื่อสาร ไม่ใช่แค่เป็นชุดของแทร็ก แต่เป็นการสร้างองค์ประกอบที่กระจัดกระจายไม่เชิงเส้นตามกาลเวลา

ตัวอย่างเว็บไซต์ของลำดับชั้นในหลักการออกแบบ
ไซต์สำหรับโครงการดีเอ็นเอที่มีลำดับชั้นภาพที่ชัดเจน

รูปร่างใน Visual Hierarchy

เมื่อพูดถึงรูปร่าง ให้พิจารณาว่ารูปหัวใจธรรมดาสื่อสารถึงศักยภาพในการใช้ 'ชอบ' ใน UI ของโซเชียลเน็ตเวิร์กส่วนใหญ่ได้อย่างไร ในการสร้างความสำคัญหรือกลุ่ม ให้พิจารณาหนึ่งใจในสี่แวดวง รูปแบบทางเรขาคณิตเป็นเหมือนสีในรูปทรงที่มีความหมายบางอย่างที่ทำให้องค์ประกอบมีบุคลิกหรือความหมาย

ในการออกแบบเชิงโต้ตอบ รูปทรงเรขาคณิตเป็นสิ่งจำเป็นสำหรับการสื่อสารที่มีประสิทธิภาพ เนื่องจากสามารถสื่อความหมายได้รวดเร็วและเป็นสากลมากกว่าข้อความ แทนที่จะเป็นข้อความ ไอคอน (สัญลักษณ์) ซึ่งมักจะเป็นรูปทรงเรขาคณิตที่เรียบง่าย กลับกลายเป็นไอคอนแอนะล็อกสำหรับระบบการนำทางและ UI ส่วนใหญ่

วัตถุประสงค์เบื้องหลัง 'ชอบ' รูปภาพ การดาวน์โหลดไฟล์ โทรออก หรือตรวจสอบข้อความนั้นถ่ายทอดอย่างเรียบง่ายและตรงไปตรงมาด้วยไอคอน (รูปทรงเรขาคณิต) รูปแบบของการสื่อสารด้วยภาพที่มีประสิทธิภาพนี้มีความสำคัญมากขึ้นเรื่อยๆ ในตลาดโลก ซึ่งผลิตภัณฑ์ดิจิทัลมักจะให้บริการผู้ชมจากต่างประเทศจำนวนมากด้วยภาษาต่างๆ

ลำดับชั้นการออกแบบภาพสำหรับสื่อออนไลน์
หนังสือพิมพ์ต้องปรับเปลี่ยนการออกแบบอย่างรวดเร็วสำหรับเทคโนโลยีใหม่ ส่วนที่เหลือของอุตสาหกรรมเนื้อหาได้ดำเนินการตามความเหมาะสม

หากต้องการเน้นโหมดต่างๆ ของการโต้ตอบระหว่างการพิมพ์แบบดั้งเดิมและสื่อดิจิทัล ให้พิจารณาความแตกต่างระหว่างการค้นหาผ่านหนังสือพิมพ์จริงสำหรับหมวดศิลปะและการใช้ไอคอนค้นหาในแอปส่วนใหญ่ จนกระทั่งเมื่อไม่นานนี้ เว็บไซต์หนังสือพิมพ์ส่วนใหญ่จัดวางหน้าของพวกเขาเหมือนกับว่าอยู่ในสิ่งพิมพ์ และประสบการณ์ในการกลั่นกรองเนื้อหาก็เงอะงะและสับสน

เว็บไซต์ Signes du Quotidien ทำลายเค้าโครงเว็บแบบเดิมๆ ใช้รูปทรงสี่เหลี่ยมจัตุรัสและวงกลมแบบพื้นฐานในวิธีที่ละเอียดอ่อนเพื่อนำเสนอลำดับชั้นภาพที่ไม่เหมือนใครซึ่งจะนำทางผู้เยี่ยมชมผ่านเนื้อหา เมนูอยู่ตรงกลางของหน้า และเมื่อผู้เยี่ยมชมคลิกที่เมนูนั้น จุดสีสี่จุดที่แสดงถึงสี่ส่วนของไซต์จะปรากฏขึ้น ผู้เข้าชมจะลากจุดหนึ่งจุดลงในช่องสี่เหลี่ยมเพื่อไปยังส่วนนั้น

การนำทางที่ไม่ซ้ำโดยใช้ลำดับชั้นภาพ
เว็บไซต์สัญญาณชีวิตประจำวัน

การเคลื่อนไหวในลำดับชั้นภาพ

องค์ประกอบที่เคลื่อนไหวจะมีน้ำหนักการมองเห็นมากขึ้นในกลุ่มขององค์ประกอบที่หยุดนิ่ง และการเคลื่อนไหวในลำดับชั้นของภาพเป็นหลักการที่ไม่สามารถนำมาใช้ในการพิมพ์ได้ แต่สามารถรวมไว้ในชุดเครื่องมือของนักออกแบบภาพได้อย่างแน่นอน

การเคลื่อนไหวสามารถสื่อสารอะไรได้นอกจากการแปลตามตัวอักษรของตัวเอง? การเคลื่อนไหวมักใช้ใน UI เพื่อเป็นเบาะแสว่าองค์ประกอบสามารถโต้ตอบได้ สามารถใช้การเคลื่อนไหวต่อไปและใช้เป็นวิธีการสื่อสารบางอย่างที่ไม่เหมือนใครได้หรือไม่? หากลำดับชั้นของภาพไม่เพียงเกี่ยวกับประสิทธิภาพของการสื่อสารเท่านั้น แต่ยังเกี่ยวกับความหมายที่ฝังอยู่ด้วย การเคลื่อนไหวจะถูกใช้เป็นเครื่องมือสื่อสารด้วยภาพที่จำเป็นได้อย่างไร

สำหรับไซต์ I Remember อินเทอร์เฟซหลัก (ซึ่งเป็นภาพเคลื่อนไหว) โดดเด่นขึ้นมาทันทีเมื่อเชิญชวนให้มีปฏิสัมพันธ์ แม้ว่าการเคลื่อนไหวและอินเทอร์เฟซเป็นเครื่องมือในการนำทางที่ใช้งานได้ แต่นักออกแบบภาพก็ใช้การสูญเสียองค์ประกอบเหล่านี้ที่อาจเกิดขึ้นเพื่อสื่อสารภารกิจพื้นฐานของเว็บไซต์: โรคอัลไซเมอร์ เช่นเดียวกับความทรงจำที่เลือนลางของผู้ป่วยที่องค์กรระดมทุน เว็บไซต์จะค่อยๆ หายไปโดยปราศจากการโต้ตอบ

ลำดับชั้นการออกแบบพร้อมการเคลื่อนไหวที่ใช้ในการออกแบบเว็บ

เสียงในลำดับชั้นของข้อมูล

เสียงเป็นอีกเครื่องมือหนึ่งที่ไม่สามารถใช้ได้ในสื่อสิ่งพิมพ์ แต่ยังต้องพัฒนาภายใต้หลักการของลำดับชั้น เนื่องจากเสียงไม่ใช่ภาพทั้งหมด จึงไม่มีกฎเกณฑ์ใดที่ต้องอ้างอิง แต่เสียงยังสามารถเป็นเครื่องมือออกแบบที่สื่อสารเนื้อหาได้อย่างมีประสิทธิภาพ เช่นเดียวกับอารมณ์หรือความหมาย องค์ประกอบการออกแบบที่มีเสียงบางอย่างอาจถูกจัดกลุ่มโดยสัมพันธ์กัน และองค์ประกอบที่เด่นชัดที่สุดอาจดูเหมือนสำคัญที่สุดหรืออาจหมายถึงการแยกตัวออกจากกลุ่ม

คุณภาพของเสียงที่แนบกับองค์ประกอบควรระบุ กำหนดลักษณะ หรือช่วยจัดโครงสร้างเนื้อหาอย่างรวดเร็ว เสียงที่ตัดกับองค์ประกอบภาพที่เกี่ยวข้องจะสื่อความหมายใหม่ได้อย่างไร

ตัวเสียงเองอาจซับซ้อนมากจนสร้างอารมณ์ทั้งหมดหรือข้อความของการออกแบบก่อนที่จะมองเห็นสิ่งใดๆ เช่นเดียวกับฉากหลังที่มีสีสันสร้างอารมณ์ เสียงสามารถนั่งในพื้นหลังหรือให้ข้อเสนอแนะใน UI เช่นตอบสนองต่อการแตะปุ่มบนอุปกรณ์เคลื่อนที่ หลักการของเทคนิคนั้นเป็นพื้นฐาน แต่ความคิดสร้างสรรค์ที่สามารถนำมาใช้ได้คือที่ที่เวทมนตร์สามารถเกิดขึ้นได้

เนื่องจากมีความสำคัญในงานสร้างสรรค์ของกลุ่ม เว็บไซต์ที่สร้างขึ้นสำหรับนิทรรศการของกลุ่มศิลปินชาวเยอรมัน ZERO ที่ Guggenheim จึงใช้เสียงเป็นฉากหลังในบรรยากาศ และยังเป็นรูปแบบของข้อเสนอแนะเมื่อนำทางไปยังไซต์ เสียงเรียกเข้าที่เป็นตัวหนาสร้างส่วนต่างๆ ที่แสดงถึงจุดเริ่มต้นของธีม ในขณะที่โปรเจ็กต์ระดับอุดมศึกษาคลิกที่พื้นหลัง

เสียงที่ใช้ในองค์ประกอบและหลักการออกแบบ
ไซต์สำหรับกลุ่มศิลปิน ZERO ที่ Guggenheim ซึ่งเสียงมีบทบาทสำคัญ

แนวคิดของลำดับชั้นภาพ

ลำดับชั้นของภาพเป็นแนวคิดที่ตรงไปตรงมา และการทำความเข้าใจทฤษฎีนี้ทำได้ง่ายกว่าความสามารถในการใช้งานจริงของนักออกแบบในการจัดองค์ประกอบที่มีโครงสร้างอย่างดี อย่างไรก็ตาม การจะสร้างสรรค์ในสื่อใหม่โดยที่ยังคงการออกแบบที่ดีไว้นั้นเป็นเรื่องที่ท้าทาย

สื่อใหม่ปรากฏขึ้นตลอดเวลา และสถานการณ์ที่ท้าทายจะไม่ลดลง—ค่อนข้างตรงกันข้าม ปัจจุบันมีหน้าจอที่ใช้กันมากกว่า 200 ขนาด และนั่นเป็นเพียงสองมิติเท่านั้น อย่างแรกคืออินเทอร์เน็ต เบราว์เซอร์บนเดสก์ท็อป ต่อมาคือโทรศัพท์มือถือและแท็บเล็ต และตอนนี้เรากำลังก้าวไปสู่ดินแดนใหม่ด้วยเทคโนโลยี เช่น ทีวีแบบโต้ตอบ, IoT, อุปกรณ์สวมใส่, เสมือนจริง และความเป็นจริงเสริม

การออกแบบที่ก้าวข้ามขอบเขตของสื่อดิจิทัลอย่างแท้จริงนั้นยังอยู่ในช่วงเริ่มต้น หวังว่าหลักการของลำดับชั้นของภาพและการออกแบบที่ดีจะก้าวทันเทคโนโลยีที่ก้าวหน้าอย่างรวดเร็ว เพื่อให้ประสบการณ์ด้านสื่อดิจิทัลของเรายังคงเปี่ยมไปด้วยความหมายและความเพลิดเพลิน

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

  • เพิ่ม UX ของคุณด้วยลำดับชั้นภาพที่ชัดเจน
  • Design Foundations – A Guide to Visual Hierarchy (พร้อมอินโฟกราฟิก)
  • หลักการออกแบบ: บทนำสู่ลำดับชั้น
  • แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI เพื่อการสแกนที่ดีขึ้น
  • เพิ่ม UX ของคุณด้วยหลักการออกแบบการโต้ตอบที่ประสบความสำเร็จเหล่านี้