แบบเรียบๆอะไร.. Flat Design คืออะไรและหลักการพื้นฐานของมัน รองรับการออกแบบที่ตอบสนอง

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

ความรู้เบื้องต้นเกี่ยวกับการออกแบบแบบเรียบ

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

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

หลักการที่ 1: ไม่มีผลกระทบที่ไม่จำเป็น

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

หลักการ #2: ยิ่งง่ายยิ่งดี

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

หลักการ #3: การพิมพ์และความสำคัญของมัน

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

หลักการ #4: การเน้นสี

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

หลักการที่ 5: การเลือกความเรียบง่าย

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

แบนหรือเกือบแบน? เรากำลังมองหาการประนีประนอม!

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

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

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

วันนี้เราจะมาดูว่า Flat Design คืออะไร มีที่มาอย่างไร และสิ่งที่คุณต้องการเพื่อสร้างการออกแบบที่สะอาดตา สว่าง และตอบสนองได้ดี

คุณสามารถหา ตัวอย่างที่ดีการออกแบบแบนบนเว็บไซต์ http://market.envato.com/ มีเค้าโครง ไอคอน และเทมเพลตมากมายที่จะช่วยให้คุณเข้าใจได้อย่างชัดเจนว่าการออกแบบสมัยใหม่เป็นอย่างไร .

1. การออกแบบแฟลตคืออะไร?

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

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

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

2. ประวัติเล็กน้อย

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

Flat Design ในรูปแบบที่เราเห็นกันตอนนี้เริ่มได้รับความนิยมหลังจากที่ Microsoft เริ่มผลิตสินค้าที่เรียกว่า Metro Style Metro คือการออกแบบ UI จาก Microsoft ที่โดดเด่นในด้านสไตล์และความเรียบง่าย

ในปี 2010 ไมโครซอฟต์เปิดตัว วินโดว์โฟน 7 ซึ่งใช้ดีไซน์เรียบๆ ที่มีขอบคมและกราฟิกที่เรียบง่ายซึ่งสืบทอดมาจากผลิตภัณฑ์รุ่นก่อนๆไมโครซอฟต์ (ซูน). ต่อมาโดยได้รับแรงบันดาลใจจากความสำเร็จ Microsoft จึงเปิดตัว ระบบปฏิบัติการ Windows 8 ซึ่งมีพื้นฐานมาจากสไตล์ Metro แบบแบนเดียวกัน

ท้ายที่สุดแล้ว การออกแบบแบบเรียบก็ได้รับความนิยมสูงสุดในปี 2013 เมื่อ Apple เปิดตัว iOS 7 สาธิตพื้นฐาน การออกแบบใหม่ด้วยองค์ประกอบอินเทอร์เฟซผู้ใช้ที่ออกแบบใหม่ทั้งหมด รวมถึงไอคอนและแบบอักษร แอปเปิลได้สร้าง หลักการมองเห็นของ UI และการออกแบบไอคอน .

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

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

ดังนั้นจึงมีตัวอย่างการออกแบบแฟลตระดับโลกสามตัวอย่างจากบริษัทต่างๆ ที่ไม่สามารถจินตนาการได้ โลกสมัยใหม่เทคโนโลยี:

การออกแบบ Metro ของ Microsoft

การออกแบบแอปเปิ้ล iOS 7

การออกแบบวัสดุของ Google

3. อย่าลืมรักษาความสะอาด

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

นอกจากนี้ ในการออกแบบเรียบๆ วัตถุต่างๆ จะถูกนำเสนอด้วยวิธีที่เรียบง่ายและมีสไตล์

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

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

4. ทำให้มันสมบูรณ์แบบ

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

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

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

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

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

5. สี

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

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

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

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

เครื่องกำเนิดจานสีที่ง่ายและสะดวกอีกอย่างคือ Coolors เพียงกดแป้นเว้นวรรคแล้วโปรแกรมจะสร้างชุดสี คุณสามารถปรับสีได้ นอกจากนี้ยังมีฟังก์ชันส่งออกอีกด้วย

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

และคุณยังสามารถพบกับสีและจานสีที่หลากหลายมากขึ้นอีกด้วย คู่มือการออกแบบวัสดุของ Google.

6. เงายาว

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

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

เอฟเฟกต์นี้ทำให้วัตถุมีสามมิติมากขึ้น แต่ในขณะเดียวกันก็ทำให้วัตถุนั้นอยู่ในบริบทของการออกแบบแนวราบ

7. การทำงานกับแบบอักษร

การพิมพ์มีบทบาทสำคัญในการออกแบบแนวราบ บ่อยครั้งที่ข้อความกลายเป็นองค์ประกอบหลักขององค์ประกอบ

โดยทั่วไปแล้วการออกแบบเรียบๆ จะใช้รูปแบบตัวอักษรที่เรียบง่าย ทำให้การออกแบบโดยรวมดูสะอาดตาและอ่านง่าย คุณสามารถค้นหาแบบอักษรฟรีมากมายใน Adobe Typekit หากคุณใช้ผลิตภัณฑ์ Adobe นอกจากนี้คุณยังจะพบแบบอักษรฟรีดีๆ มากมายบน Font Squirrel แต่อย่าลืมอ่านใบอนุญาตหากคุณต้องการใช้แบบอักษรเพื่อวัตถุประสงค์ทางการค้า

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

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

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

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

ข้อดี

ความนิยม

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

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

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

ความสว่าง

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

ข้อบกพร่อง

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

การไม่ตอบสนอง

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

ปัญหาเกี่ยวกับการพิมพ์

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

ภาพที่อ่อนแอ

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

9. แนวโน้มการออกแบบแฟลตในอนาคต

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

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

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

ดังนั้นแฟลตจะไม่สูญเสียคุณสมบัติ แต่จะมีความน่าสนใจและยืดหยุ่นมากขึ้น- เขาเริ่มดีขึ้นแล้วจริงๆ

ข้อสรุป

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

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

ท้ายที่สุดแล้ว มีอะไรอีกบ้างที่ต้องพูดถึงเกี่ยวกับการออกแบบแบบเรียบๆ?

หากคุณชอบแบนราบที่มีขอบคม สีสันสวยงาม และฟอนต์คมชัด ความสะอาดและความเรียบง่าย ลงมือเลย!

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

การออกแบบแบบแบนๆ- เทรนด์ที่ค่อนข้างใหม่ที่ชุมชนการออกแบบทั้งหมดพูดถึง

บางคนชอบมัน คนอื่นไม่ชินกับมันเลยและถึงกับเกลียดมันด้วยซ้ำ

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

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

หลักการพื้นฐานของการออกแบบแนวเรียบคือ:

1. ไม่มีผลกระทบ

2.องค์ประกอบง่ายๆ

3. มุ่งเน้นไปที่การพิมพ์

4. เน้นสี

5. วิธีการที่เรียบง่าย

6. การออกแบบเรียบๆ “เกือบ”

ตอนนี้เรามาดูหลักการของการออกแบบเรียบแต่ละข้อโดยละเอียด:

ไม่มีผลกระทบ

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

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

องค์ประกอบที่เรียบง่าย

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

แต่องค์ประกอบที่เรียบง่ายไม่ควรสับสนกับการออกแบบที่เรียบง่าย แนวคิดการออกแบบเรียบๆ อาจซับซ้อนพอๆ กับแนวคิดการออกแบบประเภทต่างๆ

มุ่งเน้นไปที่การพิมพ์

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

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

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

เน้นสี

สีเป็นส่วนสำคัญของการออกแบบ จานสีดีไซน์เรียบๆ มักจะสว่างและมีสีสันมากกว่าสไตล์การออกแบบอื่นๆ มาก เมื่อเทียบกับการออกแบบทั่วไปที่เน้น 2-3 สี การออกแบบเรียบๆ อาจประกอบด้วย 6 หรือ 8 เฉดสีก็ได้

คุณสามารถดูตัวอย่างดีๆ ของ Flat Design ได้ที่ http://market.envato.com/ มีเค้าโครง ไอคอน และเทมเพลตมากมายที่จะช่วยให้คุณเข้าใจได้อย่างชัดเจนว่าการออกแบบสมัยใหม่เป็นอย่างไร .

1. การออกแบบแฟลตคืออะไร?

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

2. ประวัติเล็กน้อย

ในปี 2010 Microsoft เปิดตัว Windows Phone 7 ซึ่งใช้ดีไซน์แบบแบนพร้อมขอบที่คมชัดและกราฟิกที่เรียบง่ายซึ่งสืบทอดมาจากผลิตภัณฑ์รุ่นก่อนๆไมโครซอฟต์ (ซูน). ต่อมาโดยได้รับแรงบันดาลใจจากความสำเร็จ Microsoft จึงเปิดตัวระบบปฏิบัติการ ระบบวินโดวส์ 8 ขึ้นอยู่กับสไตล์เมโทรแบนเดียวกัน

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

ดังนั้นจึงมีตัวอย่างระดับโลกสามประการของการออกแบบแบบเรียบๆ จากบริษัทต่างๆ ที่ไม่สามารถจินตนาการถึงโลกสมัยใหม่ของเทคโนโลยีได้:

การออกแบบ Metro ของ Microsoft

การออกแบบแอปเปิ้ล iOS 7

การออกแบบวัสดุของ Google

3. อย่าลืมรักษาความสะอาด

4. ทำให้มันสมบูรณ์แบบ

Adobe Photoshop มีความชัดเจนที่นี่: ใช้งานได้กับกราฟิกแรสเตอร์ซึ่งใช้พิกเซล

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

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

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

5. สี

6. เงายาว

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

7. การทำงานกับแบบอักษร

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

ข้อดี

ความนิยม

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

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

ความสว่าง

ข้อบกพร่อง

การไม่ตอบสนอง

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

ปัญหาเกี่ยวกับการพิมพ์

ภาพที่อ่อนแอ

9. แนวโน้มการออกแบบแฟลตในอนาคต

ข้อสรุป

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

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

เมื่อเร็ว ๆ นี้ทิศทางการออกแบบเช่นการออกแบบ FLAT หรือการออกแบบเรียบก็ได้รับความนิยม

ผู้ใช้ Windows 8 และรุ่นที่ใหม่กว่าคุ้นเคยกับการออกแบบ FLAT อยู่แล้ว เนื่องจากสิ่งแรกที่พวกเขาพบเมื่อโหลดระบบคือหน้าจอนี้

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

FLAT – การออกแบบมีคุณสมบัติดังต่อไปนี้:

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

การพิมพ์ เรขาคณิต มาก่อน โดยเฉพาะอย่างยิ่งเมื่อพูดถึงการออกแบบเว็บ

ความสามัคคีและ. การออกแบบใช้สีจำนวนจำกัด นี่คือตัวอย่างของชุดสีการออกแบบ FLAT ยอดนิยม

การใช้ไอคอนข้อมูลที่สร้างสรรค์

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

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

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

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

(เข้าชม 2,635 ครั้ง เข้าชม 1 ครั้งในวันนี้)