Flat Design: ทำไมการออกแบบถึงกลายเป็น Flat Design? ที่ซึ่งทุกอย่างเริ่มต้นขึ้น ฟอนต์ง่ายๆในสไตล์การออกแบบ

จากผู้เขียน:สวัสดีเพื่อนๆ! วันนี้เราจะมาพูดถึง Flat Design หรือการออกแบบเว็บไซต์แบบ Flat คำนี้ชนะใจนักออกแบบเว็บไซต์มายาวนานและยังคงได้รับความนิยมอย่างมั่นใจในปัจจุบัน บริษัทที่ใหญ่ที่สุด (Google, YouTube, Microsoft, Apple Inc. ฯลฯ) ใช้เพื่อออกแบบเว็บไซต์และแอปพลิเคชันของตน คุณยังไม่ได้อยู่ในนิกายของผู้สนับสนุนการออกแบบเว็บไซต์แบบแบนหรือไม่? แล้วเราจะมาหาคุณ!

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

ทุกอย่างเริ่มต้นจากสเควโอมอร์ฟิซึม

สำหรับผู้ที่ไม่ทราบว่า skeuomorphism ไม่ใช่คำสกปรก แต่เป็นการออกแบบเว็บไซต์อีกรูปแบบหนึ่ง การออกแบบที่เรียบเรียบมักถูกนำเสนอเป็นสิ่งที่ตรงกันข้ามกับ skeuomorphism ซึ่งในความคิดของฉันไม่ถูกต้องทั้งหมด นี่เป็นการทำให้เข้าใจง่ายมากกว่าการเป็นปรปักษ์กัน

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

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

“การออกแบบที่ดีที่สุดคือการออกแบบให้น้อยที่สุด”

วิธีที่ Dieter Rams มองลงไปในน้ำ - นักออกแบบอุตสาหกรรมชื่อดังที่ต่อต้านการออกแบบที่ล่วงล้ำ เอฟเฟกต์แอนิเมชั่น ฯลฯ ในเดือนมิถุนายน 2013 Apple Inc. เปิดตัว iOS 7 ที่ปฏิวัติวงการซึ่งได้รับคุณสมบัติทั้งหมดของสไตล์การออกแบบเว็บแบบเรียบ อย่างไรก็ตาม เครื่องบินไม่ได้ "เอาชนะ" ความสมจริงและปริมาตรได้ในทันที

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

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

ข้อดีและข้อเสียของการออกแบบแบน

ข้อดีของการใช้สไตล์นี้ ได้แก่ :

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

เน้นการพิมพ์ที่ดี เนื้อหาต้องมาก่อน ซึ่งมีความสำคัญอย่างยิ่งต่อข้อมูลที่มีอยู่มากมายในปัจจุบัน

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

การออกแบบเว็บแบบเรียบก็มีข้อเสียเช่นกัน:

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

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

ขาดกฎตายตัวเฉพาะ

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

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

แนวโน้มและแนวทางสมัยใหม่ในการพัฒนาเว็บไซต์

เรียนรู้อัลกอริทึมสำหรับการเติบโตอย่างรวดเร็วตั้งแต่เริ่มต้นในการสร้างเว็บไซต์

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

ใช้ไอคอนแบนๆ ที่มีโครงร่างที่ชัดเจนเพื่อเพิ่มความสะดวกและฟังก์ชันการทำงาน

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

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

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

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

ดังนั้นในช่วงหลายปีที่ผ่านมา เว็บไซต์ดีไซน์เรียบๆ จึงกลายเป็นมาตรฐานที่ทุกคนยอมรับ ดูเว็บไซต์ที่ทันสมัยที่สุด - เว็บไซต์เหล่านั้นมีเนื้อหาเรียบๆ จนถึงแก่นกลาง

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

1. เว็บไซต์ http://dunked.com

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

2. อินเทอร์เฟซของไมโครซอฟต์

Microsoft เป็นหนึ่งในบริษัทที่ทำให้สไตล์เรียบๆ เป็นที่นิยม บางทีคุณอาจจำเครื่องเล่น Zune ซึ่งเป็นคู่แข่งของ iPod ที่ Microsoft เปิดตัวในช่วงกลางปี ​​​​2000 ได้? ดังนั้น การออกแบบผลิตภัณฑ์นี้จึงแตกต่างอย่างมากจากการใช้งานส่วนใหญ่ในยุคนั้น สาเหตุหลักมาจากตัวพิมพ์ขนาดใหญ่ ไอคอนแบน รูปทรงขนาดใหญ่และสว่าง

อินเทอร์เฟซนี้ซึ่งเรียกว่า Metro ต่อมาได้ย้ายไปยังคอมพิวเตอร์ส่วนบุคคล (ระบบปฏิบัติการ Windows 8) อินเทอร์เฟซ Xbox 360 และผลิตภัณฑ์ซอฟต์แวร์ Mircosoft อื่น ๆ

3. เว็บไซต์ http://www.vox.com

คุณได้รับแรงบันดาลใจไหม? ลงด้วยสุนทรียศาสตร์ 3 มิติที่สมจริงหลอกๆ!

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

แนวโน้มและแนวทางสมัยใหม่ในการพัฒนาเว็บไซต์

เรียนรู้อัลกอริทึมสำหรับการเติบโตอย่างรวดเร็วตั้งแต่เริ่มต้นในการสร้างเว็บไซต์

เมื่อเร็ว ๆ นี้สไตล์เฉพาะในการออกแบบเว็บไซต์และส่วนต่อประสานกับผู้ใช้ได้รับความนิยมอย่างมากซึ่งเนื่องจากองค์ประกอบที่มีสไตล์จึงเรียกว่า Flat

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

ทุกวันนี้นักออกแบบจำนวนมากขึ้นเรื่อยๆ ใช้เทรนด์นี้ในงานของพวกเขา แต่สไตล์ Flat ได้รับความนิยมเป็นพิเศษจากการแพร่กระจายของระบบปฏิบัติการมือถือสมัยใหม่ Windows Phone และ iOS 7 เนื่องจากพวกเขาเป็นผู้ตามเทรนด์นี้แม้ว่าพวกเขาจะไม่ปฏิบัติตามก็ตาม มันสมบูรณ์

บริษัทของเรามีประสบการณ์ในการสร้างเว็บไซต์แบบ Flat อยู่แล้ว และเรายินดีที่จะช่วยคุณสร้างเว็บไซต์แบบ Flat!

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

ด้านล่างนี้เราจะวิเคราะห์และยกตัวอย่างบางเว็บไซต์ที่ใช้รูปแบบเรียบๆ

1. ลบเอฟเฟกต์ทั้งหมด

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

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

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

2. ใช้องค์ประกอบที่เรียบง่าย

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

3. มาเน้นที่การพิมพ์กันดีกว่า

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

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

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

4. มาดึงดูดความสนใจด้วยสีสันกันเถอะ

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

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

5. ความเรียบง่าย

การออกแบบแบบเรียบๆ นั้นมีลักษณะที่เรียบง่ายและเข้ากันได้ดีกับแนวทางแบบมินิมอลลิสต์

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

ควรสังเกตว่าภาพถ่ายบางภาพมีความลึกที่เป็นธรรมชาติ แต่โดยทั่วไปแล้วภาพจะพอดีกับระนาบการออกแบบโดยรวม

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

วิธีที่จะไม่วาดไอคอนแบบแบน

การออกแบบเว็บไซต์แบบ "เรียบ" ได้กลายเป็นแฟชั่นพร้อมกับอินเทอร์เฟซ Windows ใหม่ ความนิยมที่เพิ่มขึ้นของสไตล์นี้ในรัสเซียได้รับการอำนวยความสะดวกโดยการเพิ่มจำนวนนักออกแบบเว็บไซต์ที่เรียนรู้ด้วยตนเองซึ่งไม่รู้ว่าอินเทอร์เฟซเว็บไซต์และอินเทอร์เฟซ "นิ้ว" (สมาร์ทโฟน) ไม่เหมือนกัน (เลื่อนได้ง่าย ใช้นิ้วของคุณลงหน้า - และในทางกลับกันคุณจะต้องใช้ความอดทนและความสนใจอย่างแท้จริงในการหมุนล้อเลื่อนของเมาส์ลง 3-4 หน้าจอ) บนเว็บไซต์แฟลตของรัสเซีย คุณมักจะพบไอคอนต่อไปนี้:

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

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

ตัวอย่างของไอคอนแบนที่ดี:

สีและไอคอนไม่ควรรวมเข้าด้วยกันเท่านั้น แต่ยังรวมเป็นหนึ่งเดียวด้วย

ปัญหาการออกแบบแบนคุณภาพต่ำ

1. การนำทางและการใช้งาน

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

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

2. ผ้าพันเท้าแบนยาว

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

3. ปุ่มที่สับสน

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

4. ไอคอนที่วาดไม่ดี

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

ฉันคิดว่างานสร้างไอคอนมีลักษณะดังนี้: ตามข้อกำหนดทางเทคนิค ไอคอน "การเข้าถึงลูกค้ารายบุคคล" เป็นสิ่งจำเป็น โดยส่วนตัวแล้ว ฉันมีรูปภาพของผู้จัดการและลูกค้าสองคน ซึ่งแต่ละคนนำโดยลูกศรที่มีสีต่างกัน (ลูกศรสีน้ำเงินนำไปสู่ลูกค้าสีน้ำเงิน ลูกศรสีแดงนำไปสู่ลูกค้าสีแดง) หากนักออกแบบไม่ทราบวิธีวาดเขาจะมองหาไอคอนในชุดสำเร็จรูป (ในกรณีที่ดีที่สุดเขาจะซื้อจากคลังภาพในกรณีที่เลวร้ายที่สุดเขาจะดาวน์โหลดจากอินเทอร์เน็ต) และ ใช้อันที่เหมาะสมที่สุดในความหมาย เป็นไปได้มากว่ามันจะเป็นไอคอนของผู้ชายที่ผูกเน็คไทหรือกระเป๋าเดินทาง โดยทั่วไปเขาไม่ได้ไปไกลมากนัก แต่ยังอยู่ในการออกแบบไซต์จะชัดเจนว่ากระเป๋าเดินทางสำหรับ "แนวทางส่วนบุคคลสำหรับทุกคน" และนาฬิกาสำหรับ "10 ปีในตลาด" (โดยวิธีการที่ฉันเห็นจริง ๆ มัน!) – นักออกแบบโกง

5. การมุ่งเน้นเนื้อหาที่เป็นเท็จ

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

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

Flat Design จำเป็นสำหรับเว็บไซต์เลยเหรอ?

ทุกอย่างชัดเจนด้วยการออกแบบอินเทอร์เฟซสำหรับสมาร์ทโฟน - เบา ไม่โหลด ใช้งานง่าย แต่ด้วยการออกแบบเว็บไซต์แบบ Flat Style ส่วนตัวผมมีคำถามใหญ่ว่า มันได้ผลจริงไหม?

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

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

ตัวอย่างของการออกแบบแฟลตคุณภาพสูง:

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

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

นี่ไม่ใช่ 3ดี- กราฟิก 3 มิติช่วยให้คุณได้ภาพที่สมจริงมาก แต่ในขณะเดียวกันก็ภาพสองมิติ การออกแบบเรียบไม่เหมือนกับ 3D ตรงที่ไม่สนใจรายละเอียดที่สร้างความลึกและมิติ เช่น เงา ไฮไลต์ และพื้นผิว

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

ผู้คนเริ่มพูดถึงการออกแบบแฟลตดีไซน์เป็นครั้งแรกในปี 2555-2556 ซึ่งเป็นช่วงที่สไตล์นี้ปรากฏตัวครั้งแรก แนวโน้มดังกล่าวเห็นได้ชัดเจนมากและทำให้เกิดเสียงดังมากเนื่องจาก Microsoft เป็นหนึ่งในคนกลุ่มแรก ๆ ที่พัฒนาทิศทางนี้ การเปิดตัว Windows 8 พร้อมอินเทอร์เฟซใหม่ได้เปลี่ยนแปลงการออกแบบไปตลอดกาลและได้กำหนดเวกเตอร์การพัฒนาเว็บไว้ล่วงหน้าเป็นส่วนใหญ่ อย่างน้อยก็องค์ประกอบด้านภาพ

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

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

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

เข้ากันได้กับการออกแบบที่ปรับเปลี่ยนได้

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

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

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

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

แพลตฟอร์มที่ยืดหยุ่น

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

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

รูปแบบที่อ่านได้

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

การออกแบบเรียบๆ นั้นโดดเด่นด้วยการใช้ฟอนต์ sans-serif อย่างกว้างขวาง อย่างไรก็ตาม นี่ไม่ใช่ akisoma และ serif ก็ดูดีเมื่อใช้ร่วมกับองค์ประกอบแบบแบนได้เช่นกัน แบบอักษร Serif จะค่อนข้างเหมาะสมสำหรับส่วนหัว และยังสามารถใช้ในข้อความเนื้อหาได้หากตัวพิมพ์ไม่ละเมิดความสามัคคีในการเรียบเรียง

ข้อเสีย

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

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

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

การสูญเสียความเป็นปัจเจกบุคคล

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

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

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

ไล่ตามแฟชั่น

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

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

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

ตัวเลือกแบบอักษรที่ไม่ดี

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

บางครั้งการเลือกฟอนต์แบบบางก็สมเหตุสมผล - ตัวอย่างเช่นเพื่อใช้ในส่วนหัว แต่เมื่อพิมพ์ข้อความหลักด้วยฟอนต์เดียวกันก็มักจะอ่านไม่ได้ ข้อผิดพลาดดังกล่าวจะสังเกตเห็นได้ชัดเจนเป็นพิเศษบนอุปกรณ์พกพา - ขนาดหน้าจอขนาดเล็กช่วยลดความสามารถในการอ่านเนื้อหาลงอย่างมาก

แบน 2.0

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

ในตอนเช้าของการปรากฏตัวของมัน แฟลตมีความโดดเด่นด้วยความเรียบง่ายของการมองเห็นที่เข้มงวด ไม่มีเงาหรือโครงสร้างใดๆ แม้แต่การไล่ระดับสีก็ไม่ได้รับการยกย่องอย่างสูง แม้ว่าจะไม่ขัดแย้งกับหลักการของการออกแบบแนวเรียบก็ตาม

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

Google ได้ทำอะไรมากมายเพื่อโปรโมต Flat 2.0 หลักเกณฑ์การออกแบบวัสดุเป็นความพยายามที่จะสร้างภาษาภาพใหม่ที่ผสมผสานองค์ประกอบการออกแบบแบบแบนและสามมิติ คำแนะนำของ Google มีรายละเอียดมากและปฏิบัติตามได้ง่าย ในเวลาเดียวกัน Google ไม่ยืนกรานที่จะปฏิบัติตามกฎทั้งหมดที่กำหนดไว้ในแนวทางอย่างเคร่งครัด - นักออกแบบสามารถทดลองโดยสร้างโครงการดั้งเดิมของตนเองซึ่งสามารถรวมองค์ประกอบที่หลากหลายได้

บทสรุป

วันนี้ Flat 2.0 อยู่ในขั้นตอนการก่อตัว แต่ทิศทางที่สไตล์นี้จะพัฒนาไปนั้นค่อนข้างชัดเจนแล้ว คาดว่าจะไม่มีการเปลี่ยนแปลงที่สำคัญ - ผู้นำเทรนด์ Google, Apple และ Microsoft จะไม่ยอมแพ้ หากมีการเปลี่ยนแปลงจะไม่มีนัยสำคัญ - แนวทางใหม่จะปรากฏขึ้น บางคนจะเกิด "เคล็ดลับ" ที่น่าสนใจ ความพยายามจะยังคงใช้สิ่งที่ดีที่สุดจาก skeuomorphism แต่ในระดับโลก ไม่จำเป็นต้องคาดหวังอะไรใหม่อย่างแท้จริง - การออกแบบเรียบๆ เป็นเทรนด์ระยะยาว และเฉพาะสไตล์ที่เหมาะสมกับเทคโนโลยีใหม่ที่ยังไม่มีอยู่มากที่สุดเท่านั้นที่จะเข้ามาแทนที่มันจากตำแหน่งที่ยึดครองได้

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

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

เราขอให้พวกเขาตอบคำถามหลักสามข้อ:

• เหตุใดโลกจึงเริ่มมุ่งสู่การออกแบบแนวเรียบบนเว็บและมือถือ และมันคืออะไร
• สิ่งนี้จะมอบให้กับ Apple และ iOS 7;
• สิ่งนี้จะส่งผลต่อนักออกแบบในด้านหนึ่งและผู้ใช้ในอีกด้านหนึ่งอย่างไร

เดนิส ซูดิลคอฟสกี้ เคียฟ
ผู้เชี่ยวชาญด้านการออกแบบปฏิสัมพันธ์ โปรดิวเซอร์ Prodesign.in.ua

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

Apple จะได้อะไรจากเรื่องนี้? มันจะยังคงรักษาตำแหน่งในเทรนด์และความคิดเห็นนับแสนที่ iOS ของพวกเขามีความคล้ายคลึงกับ Android มาก

นักออกแบบจะต้องพัฒนา (และอย่าล้อเล่นว่าเมื่อใดการออกแบบแบบเรียบจะมาในวิศวกรรมเครื่องกลและทำให้เรามีรถยนต์แบบเรียบ :) เมื่อไม่มีการตกแต่งงานทั้งหมดประกอบด้วยการสร้างอารมณ์พร้อมเนื้อหาสำหรับสถานการณ์เฉพาะกับผู้ใช้ อาชีพนี้จะมีความเหมือนกันกับผู้อำนวยการมากกว่าศิลปินมากขึ้นเรื่อยๆ ในทางกลับกันผู้ใช้จะได้รับประสบการณ์ใหม่และความประทับใจใหม่ๆ โดยส่วนตัวแล้วฉันเป็นแฟนตัวยงของ iPhone มา 4 ปีแล้ว แต่ฤดูใบไม้ผลินี้ฉันเปลี่ยนโทรศัพท์เป็น Android ด้วยเหตุผลเดียว - ฉันเบื่อกับอุดมคติที่น่าเบื่อหน่ายของอินเทอร์เฟซของ Apple

แดเนียล บรูซ จากสตอกโฮล์ม
สร้างสรรค์ดิจิทัลอาวุโส danielbruce.se

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

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

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

สิ่งที่ฉันเห็นจาก Apple เมื่อคืนเป็นเพียงสำเนาที่ไม่ดีของการออกแบบที่น่าสนใจหลายอย่างที่ปรากฏขึ้นบนเว็บไซต์อย่าง Dribbble และ Behance ในปีที่ผ่านมา ฉันไม่เห็นอะไรใหม่ - ยกเว้นว่านี่ยังห่างไกลจาก "Apple เก่า" แบบเดิมของ Steve Jobs บริษัทได้แสดงให้เห็นว่าไม่ได้อยู่ในระดับแนวหน้าของการออกแบบอินเทอร์เฟซบนมือถือ แน่นอนว่าเราจะได้เห็นแฟนๆ นำการออกแบบสีขาวและการไล่ระดับสีที่สร้างสรรค์เหล่านี้ไปใช้ในอีกไม่กี่เดือนข้างหน้า แต่ฉันไม่คิดว่าแง่มุมนั้นจะมีผลกระทบมากเท่ากับการปิดตัวของ Google เมื่อเร็ว ๆ นี้ แต่ในทางกลับกัน Apple เป็นผู้นำเทรนด์และเป็นแรงบันดาลใจให้กับผู้คนมากมายมาโดยตลอดรวมถึงฉันด้วย

สำหรับผู้ใช้ทั่วไปมักชอบสีสันสดใส

อีวาน คลิเมนโก, เคียฟ
นักออกแบบอินเทอร์เฟซมือถือ 5tak.com

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

ยุค Bauhaus ในยุค 20-30 มีส่วนช่วยอย่างมากในการออกแบบ แต่ถึงกระนั้นความรัดกุมของโทนสีและความประดิษฐ์ก็ไม่สามารถต้านทานความปรารถนาและแรงกระตุ้นภายในของผู้คนที่จะมีชีวิตอยู่ท่ามกลางสิ่งที่เป็นธรรมชาติมากขึ้น

จากนั้นในยุค 60 ทุกคนเริ่มชื่นชมพลาสติก

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

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

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

Olesya Grichina, เคียฟ
ผู้ออกแบบ UI ที่ Componentix, twitter: elendiel

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

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

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

พาเวล กรอเซียน, เคียฟ
Product Designer ที่ MacPaw, grozyan

"แอปเปิล! อ-ฮ่า-ฮ่า หยุดนะ! - นักออกแบบกำลังตะโกน - ไชโย มันง่ายขึ้น - ผู้ใช้ตะโกน" ฉันเข้าใจทั้งสองมุมมอง วันนี้ หลังจากการนำเสนอจาก WWDC2013 เพื่อนร่วมงานของฉันหลายคนยืนขึ้นและพูดว่า "อาชีพนี้ช่างเลวทราม! ใคร ๆ ก็สามารถวาดความโง่เขลาเช่นนี้ได้แล้ว และไอคอนเหล่านี้ในราคา $ 30!" และเมื่อมองแวบแรกมันก็ถูกต้อง แต่ถ้าคุณเจาะลึกลงไป คุณจะรู้ว่ามีวัตถุหลายพันชิ้นที่แตกต่างกันมาเป็นเวลานานเฉพาะในสถานการณ์การใช้งานเท่านั้นจากนั้นก็มีรูปร่างแล้วก็เป็นสีและเท่านั้น ในรายละเอียดทางศิลปะ ฉันจำช่วงเวลาที่คนเหล่านี้ในโปรไฟล์ LinkedIn ของพวกเขาในวันนี้พูดว่า UX, UI Designer, คัดลอกเอฟเฟกต์เงาสีขาวของตัวอักษรอย่างกังวลใจ . งานทั้งหมดของพวกเขาคือการคัดลอกเนื่องจากไม่มีแนวคิดการพัฒนาที่เป็นเอกภาพและเป็นหนึ่งเดียวและสะดวกสบายสำหรับทุกคนในปัจจุบัน ไม่ได้ประดิษฐ์มันขึ้นมาและก่อตั้งเมื่อสิบปีก่อนยุคดิจิทัลในด้านการพิมพ์

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