ui-design-Cover
Design

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

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

dot-line-plane-shape

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

ui-identity-element

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

ui-component-composition

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

UI-Layout-page

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

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

UI-Design-airbnb-page

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

UI-Design-airbnb-layout

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

UI-Design-airbnb-composition

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

UI-Design-airbnb-component

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

UI-Design-airbnb-element

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

Ui-Design-airbnb-identity

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

UI-Design-airbnb-all-platform

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

UI-Design-with-Figma

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

🔥 สมัครวันนี้ รับโค้ดส่วนลด 300 บาท! ดูวิธีรับโค้ดส่วนลดได้ที่ https://bit.ly/3mEZJmi
.
🚩 ดูรายละเอียดคอร์สได้ที่ 👉 https://to.skooldio.com/FIwOp5oZjkb

You may also like

psychology ux ui blog cover
Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...
Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...

More in:Design

Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน Skooldio Live ตอน The Power ...
Design

Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

Table of ContentsWhy Motion?ส่วนแรกคือประโยชน์ที่มีต่อสมองของ Userนอกจากจะทำงานกับสมองแล้ว Motion ยังทำงานกับจิตใจของมนุษย์อีกด้วย Why Motion? ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design ...
progress-indicator Design

รวมเทคนิคใช้ Progress Indicator ออกแบบ UX/UI จากแอปฯ ระดับโลก ไม่ให้ User รู้สึกว่าต้อง ‘รอ’ นานเกินไป ด้วย Motion Design

สิ่งหนึ่งที่ต้องใส่ใจในการออกแบบ UX/UI คือเราอยู่ในยุคที่ User หรือผู้ใช้งานมีความอดทนในการรอน้อยลงทุกวัน ตามกฏของ Doherty Threshold บ่งบอกไว้ว่าผู้ใช้งานจะยังคงจดจ่อและยังไม่ไปไหนถ้าต้องรอไม่เกิน 0.4 วินาที แต่หลายครั้งที่เราอาจมีข้อจำกัดในการทำตามกฏ 0.4 วินาที หากต้องใช้เวลาในการให้ ...

Comments are closed.