Flat 2.0 และวิธีแก้ไขปัญหาการใช้งานของ Flat Design

การออกแบบแนวราบนั้นมีมาตั้งแต่ต้นทศวรรษ 1950 เมื่อมีการพัฒนารูปแบบตัวอักษรสากล ในช่วงไม่นานมานี้ได้รับความนิยมอย่างกว้างขวางนับตั้งแต่เปิดตัว Microsoft ใหม่ การออกแบบเมโทรที่เน้นรูปทรงเรขาคณิตและการพิมพ์ ภาษาเป็นครั้งแรกใน Windows Phone ใหม่ในปี 2010 และใน Windows 8 ในปี 2012.

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

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

ปัญหาการใช้งานของการออกแบบแบน

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

ไม่มีตัวบ่งชี้ที่มองเห็นได้ของการคลิกได้

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

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

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

ทำไมนี่เป็นปัญหา มาลองทำการทดลองกัน.

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

การค้นพบที่ลดลงเนื่องจากไม่มีแกน Z

ผู้คนในชีวิตจริงค้นหาวัตถุและเคลื่อนไหวไปในสามมิติ: แกน x-, y- และ z เมื่อพวกเขาพบกับเว็บไซต์ที่มีการออกแบบที่เรียบง่ายและเรียบง่ายโดยไม่มีเอฟเฟกต์ 3D พวกเขาจะได้รับประสบการณ์ที่แตกต่างจากสิ่งที่พวกเขาคุ้นเคย.

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

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

ความหนาแน่นของข้อมูลต่ำ

การออกแบบที่เรียบถูกวิพากษ์วิจารณ์ว่ามีความเสี่ยงต่อความหนาแน่นของข้อมูลต่ำโดยผู้เชี่ยวชาญของ UX Nielsen-Norman Group.

ในการวิจารณ์การใช้งาน Windows 8 พวกเขาใช้ตัวอย่างของแอพ Windows Store และเว็บไซต์ของ Los Angeles Times เพื่อแสดงปัญหาที่ ความหนาแน่นของข้อมูลต่ำ (มีเรื่องราวไม่กี่เรื่องบนหน้าจอเริ่มต้นพาดหัวที่ไม่มีบทสรุปการจัดกลุ่มที่ไม่สามารถจดจำได้ ฯลฯ ) อาจเกิดจากมุมมองของการใช้งาน.

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

Rise of Flat 2.0

เมื่อผู้ออกแบบมากขึ้นตระหนักถึงข้อบกพร่องในการใช้งานของการออกแบบแบบแบนใหม่รุ่นที่เป็นผู้ใหญ่มากขึ้นของมันได้เด้งแล้วเรียกว่า “แบน 2.0” หรือ “เกือบแบนแล้ว” ออกแบบ. ในขณะที่การเปลี่ยนแปลงจาก skeuomorphism ไปเป็นแนวร่วม แต่วิวัฒนาการของการออกแบบแนวราบนั้นเข้าใจยากกว่านี้มาก.

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

การออกแบบวัสดุ

ภาษาการออกแบบใหม่ของ Google ที่เรียกว่า Material Design อาจเป็นตัวอย่างที่เด่นชัดที่สุดของสไตล์ Flat 2.0 Google เปิดตัวการออกแบบวัสดุด้วย Android L ในปี 2014 ในขณะที่การออกแบบวัสดุยังคงรักษาคุณสมบัติหลักของการออกแบบแนวราบ แต่ก็ใช้คำอุปมาอุปมัยจากฟิสิกส์เพื่อช่วยให้ผู้ใช้สามารถค้นหาการเปรียบเทียบระหว่างโลกแห่งความจริงและโลกดิจิตอลได้อย่างรวดเร็ว.

การออกแบบวัสดุใช้แกน z ที่ได้รับ ความลึกที่ลึกซึ้ง เพื่อการออกแบบและใช้เลเยอร์อย่างชาญฉลาด แยกพวกเขาด้วยเงาวาง และ ภาพเคลื่อนไหว. Google มีคำอธิบาย supercool เกี่ยวกับการทำงานและควรอ่านให้เข้าใจหลักการและกฎหลักของมัน.

ข้อสรุป

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

Flat 2.0 ให้คำตอบกับปัญหาการรับรู้ของ Flat Design. มันเป็นการประนีประนอมอย่างชาญฉลาดระหว่างฟังก์ชั่นความสวยงามและการใช้งาน แน่นอนว่าเราไม่จำเป็นต้องใช้ชุดเครื่องมือ Material UI ทุกที่, แต่การเข้าใจปรัชญาเบื้องหลังมันทำให้เรามีพื้นฐานที่มั่นคงเกี่ยวกับ วิธีการพัฒนาสไตล์ของเราเอง สอดคล้องกับการค้นพบล่าสุดในการออกแบบประสบการณ์การใช้งาน.