ออกแบบ UI ที่ดีเริ่มต้นได้ที่ Design System: Part II
สวัสดีค่า 😊 ต่อจากบทความครั้งที่แล้ว ออกแบบ UI ที่ดีเริ่มต้นได้ที่ Design System: Part I ที่ได้ทำความรู้จักกับ Design System และพูดถึงเกี่ยวกับ Space, Grids และ Layout กันไปแล้ว โดยบทความ Part II นี้จะมาพูดถึงเรื่องของ Color (สี) และ Typography (การจัดวางตัวอักษร) ที่ใช้ใน Design System กัน
Color (สี)
แน่นอนว่าสิ่งสำคัญที่จะขาดไปไม่ได้เลยในทุกๆ งานออกแบบ นั่นก็คือ “สี” ซึ่งนอกจากเรื่องของความสวยงามแล้ว ถ้าเรานำสีมาใช้ในการสื่อความหมายที่ถูกต้องและชัดเจน สียังสามารถทำให้เกิด UX (User Experience) ที่ดีได้อีกด้วย
Colors are very powerful and when being used correctly and makes the experience much more pleasant for the user.
โดยเราจะมาสร้าง Color Palette หรือชุดสีกันก่อน เพื่อกำหนดสีที่จะใช้ในการออกแบบ UI (User Interface) ของ Product ให้เป็นไปในทิศทางเดียวกัน ซึ่งแต่ละ ชุดสีจะประกอบไปด้วย
- Brand — สีของ Brand ที่จะทำให้ผู้ใช้จดจำ Brand ได้จากสีที่เป็นเอกลักษณ์
- Primary color — สีหลัก ใช้กับ Components (องค์ประกอบ) ที่ผู้ใช้ Interact ด้วยมากที่สุด เช่น ลิงค์และปุ่ม ซึ่งส่วนใหญ่จะใช้สีเดียวกับสีของ Brand
- Secondary color — สีรอง เป็นสีที่จะช่วยให้เกิดความแตกต่างใน Product ซึ่งหาได้จากสีหลักโดยอิงทฤษฎีสี สามารถใช้เครื่องมือ Adobe Color เป็นตัวช่วยในการหาคู่สีที่เหมาะสมและเข้ากัน
- Functional and Text — สีที่ใช้ในการบอก State (สถานะ) ต่างๆ ซึ่งโดยทั่วไปแล้วจะใช้ Error สีแดง, Success สีเขียว, Warning สีเหลือง และ Information สีฟ้า ส่วนสีของ Text (ตัวหนังสือ) รวมถึง Background (พื้นหลัง) นั้นจะใช้ชุดสีดำและสีขาว ไล่ระดับความเข้มของสีจากเข้มสุดไปอ่อนสุด
เมื่อเลือกสีได้ครบแล้ว จะมาเริ่มสร้าง Color Palette เพื่อทำเป็น Style Guide กัน โดยใน Figma หลังจากที่เราสร้าง Palette สีเสร็จแล้ว ให้เราทำการเพิ่มแต่ละสีเข้าไปใน “Color Styles” ด้วย ซึ่งสามารถเพิ่มและดูทั้งหมดได้ที่แถบเมนูฝั่งขวามือ และระบุชื่อสี รวมถึง Hex Code เช่น Pink #F784AD (ตามรูปภาพตัวอย่างด้านล่าง) เพื่อความถูกต้องในการใช้สี สะดวกต่อการใช้งานในอนาคต และยังช่วยให้การสื่อสารในทีมตรงกันอีกด้วย
เพียงเท่านี้เราก็จะได้ชุดสีที่สามารถนำไปใช้สำหรับสร้าง UI Components เพื่อใช้ในการออกแบบ UI และพัฒนา Product ต่อไป
นอกจากนี้ เรายังใช้สีเพื่อบอกถึงสถานะต่างๆ ที่เปลี่ยนไปเมื่อผู้ใช้ Interact กับ UI Components นั้นๆ เช่น Hover, Active, Focus โดยจะใช้เฉดสีจากเข้มไปอ่อนของสี Primary และ Secondary แนะนำเครื่องมือ Tint and Shade Generator ที่จะช่วย Generate เฉดสีได้ ตัวอย่างเช่น ถ้าผู้ใช้นำเมาส์ไปชี้ที่ปุ่มจะมีสีเข้มขึ้นจากเดิม แต่ถ้าหากปุ่มนั้นกดไม่ได้หรือ Disabled อยู่ ก็จะใช้สีที่อ่อนลงไป เพื่อบอกสถานะให้ผู้ใช้ทราบและเข้าใจได้
ตัวอย่าง Color Palette ใน Material Design
Typography (การจัดวางตัวอักษร)
Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
Typography เป็นอีกหนึ่งสิ่งสำคัญในการออกแบบ ที่จะช่วยลำดับความสำคัญและจัดระเบียบเนื้อหาให้กับผู้ใช้ที่เข้ามาหน้า Website หรือใช้งาน Product นั้น สามารถอ่านได้ง่ายขึ้น
Typeface & Font
อันดับแรก จะมาเริ่มจากการเลือก Typeface และ Font ที่จะใช้กับงานออกแบบ UI กันก่อน ซึ่งควรเลือกให้เหมาะสมและเข้ากับ Brand รวมถึงเอกลักษณ์ที่ต้องการสื่อ โดยสามารถเลือกได้มากกว่า 1 Typeface สำหรับแต่ละภาษา
ความแตกต่างระหว่าง Typeface กับ Font ก็คือ Typeface เป็นชุดของรูปแบบตัวอักษร ประกอบไปด้วยตัวอักษร ตัวเลข และเครื่องหมายต่างๆ เช่น Helvetica, Roboto, Montserrat ส่วน Font จะเป็นลักษณะหนึ่งของกลุ่ม Typeface ที่มีความหนา ความกว้าง และความเอียง แตกต่างกัน ตัวอย่างเช่น “Helvetica” เป็น Typeface ที่มี Font “Helvetica Regular”, “Helvetica Bold”, “Helvetica Oblique” และ “Helvetica Light” เป็นต้น
Scale & Size
เมื่อเราเลือก Font เรียบร้อยแล้ว ขั้นตอนต่อไปเราจะมากำหนดขนาดของ Font ที่จะใช้สำหรับ Headings (หัวข้อ) ตั้งแต่ H1-H6 และส่วนของ Body (เนื้อหา) ซึ่งขนาดของตัวอักษรจะเพิ่มขึ้นตามการคำนวณของ Modular Scale โดยเริ่มจากตั้งค่า Base Font Size (ขนาดเดียวกันกับ body) ซึ่งโดยทั่วไปจะใช้ขนาด 16px คูณด้วย Scale Ratio เช่น 1.25 หรือ 1.5 เป็นต้น ซึ่งสามารถใช้ Scale ตาม Material Design ได้เลย หรือถ้าหากต้องการกำหนดเองก็จะมีเครื่องมือ Archetype เข้ามาช่วยในการ Generate ขนาดของ Font
เมื่อเราสร้าง Typography ใน Figma โดยกำหนดทั้ง Font, ขนาด, ความหนา, Line Height และ Letter Spacing เรียบร้อยแล้ว ให้เพิ่มแต่ละ Text เข้าไปใน “Text Styles” ซึ่งจะอยู่ที่แถบข้างขวาเช่นเดียวกันกับ Color Styles และตั้งชื่อตามลำดับ เพื่อให้ง่ายต่อการเรียกใช้งานและการแก้ไข ซึ่งสามารถแก้ไขเพียงที่เดียว แต่เปลี่ยนแปลงทั้งหมดได้ ไม่ต้องแก้หลายๆ จุด ซึ่งจะช่วยประหยัดเวลา
ส่งท้าย
จากที่ได้เล่าถึงความหมาย, ส่วนประกอบหลักๆ และขั้นตอนการทำ Design System ทั้ง 2 Part ไปแล้วนั้น จะเห็นได้ว่าในช่วงแรกๆ ค่อนข้างที่จะใช้เวลาในการลงรายละเอียด โดยเฉพาะขั้นตอนการเลือกสี เพื่อนำมาสร้างชุดสี และ Typography การเลือก Font กำหนดค่าต่างๆ ที่เกี่ยวข้อง ซึ่งเป็นจุดเริ่มต้นเพื่อนำไปใช้สำหรับออกแบบ UI Component อื่นๆ ต่อไป และเพื่อเป็น Guideline ให้กับ Developer สามารถนำไปตั้งค่า CSS รวมถึงสร้าง Components ในการพัฒนา Product ต่อไปได้ ซึ่งการทำ Design System นี้เองจะช่วยลดเวลาในการทำงาน ทำให้งานมีความเป็นระเบียบเรียบร้อยและเป็นมาตรฐานเดียวกันทั้งหมด
สามารถ Download Design Systems Starter Template โดย Figma สำหรับใช้เป็นตัวอย่าง ในการทำ Style Guide และ UI Components ต่างๆ เพื่อนำองค์ประกอบเหล่านี้ไปใช้ในการออกแบบ UI ที่สวยงาม นำไปสู่ UX ที่ดี 👍
