ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง

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

เช่นเดียวกันกับการออกแบบ UI เราจะเริ่มออกแบบแอปฯ หรือเว็บไซต์ จากองค์ประกอบที่เล็กที่สุดก่อน กำหนด Identity เช่น สี, Text และไอคอนต่างๆ จากนั้นก็เอามาประกอบกัน เอา Text มาประกอบกับกล่อง เอาไอคอนมาทำเป็นปุ่มต่างๆ นั่นคือ Element

จากนั้นก็เอารูป เอากล่อง และ Text ต่างๆ มารวมกันเป็น Component ใส่คอนเทนต์ต่างๆ ลงไปได้ และเอามาเรียงกันเป็น Composition

จากนั้นก็นำมาจัดวางเป็น Layout และกลายเป็น Page หรือหน้าเว็บในที่สุด

เพื่อจะให้เห็นตัวอย่างมากขึ้น เราจะลองมาแยกองค์ประกอบจากหน้าเว็บของ Airbnb กันดูให้เห็นชัดๆ

เริ่มต้นที่ภาพหน้าเว็บของ Airbnb เรามองรวมๆ จะเห็นเป็นหน้าเว็บหนึ่งหน้า (Page)

ลองมองแยกส่วนประกอบดูเราจะเห็น Layout ของเว็บ

ลองโฟกัสแยกไปที่ section ต่างๆ จะเห็น Composition

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

มองละเอียดลงมาอีกใน Element จะเห็นส่วนย่อยๆ เป็นรูป Text และกล่องสี่เหลี่ยม

จากนั้นก็มาดูในส่วนที่ละเอียดที่สุด เราจะรู้กระทั่งว่า Text ที่ใช้อยู่นั้นคือ Font อะไร ขนาดเท่าไหร่

การมองแยกองค์ประกอบแบบนี้มีประโยชน์มากเมื่อต้องออกแบบ Responsive Design และจะเอาดีไซน์ไปบนหน้าจอหรือระบบปฏิบัติการที่แตกต่างกันก็จะทำได้ง่าย ไม่ว่าจะเป็น iOS, Android หรือ เว็บ เป็นต้น

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

.
🚩 ดูรายละเอียดคอร์สได้ที่ 👉 https://to.skooldio.com/FIwOp5oZjkb