8pt ตัวเลขมหัศจรรย์ที่นักออกแบบ UI ใช้กัน

ใครที่เป็นนักออกแบบ UI หรือ User Experience Designer คงคุ้นเคยกับดีกับกฏการใช้ 8pt Layout Grid System เพราะสิ่งเหล้านี้สามารถช่วยให้นักออกแบบสามารถจัดวางโครงสร้างได้ดีขึ้น เป็นระบบระเบียบ ด้วยการเว้นระยะห่าง

อะไรคือ 8pt Layout Grid System?

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

ทำให้นักออกแบบต้องจัดการองประกอบต่างๆ ให้ดีๆ การใช้ระบบการออกแบบ 8pt จะช่วยให้นักออกแบบทำงานง่ายขึ้น เพราะขนาดหน้าจอส่วนใหญ่นั้นจะสามารถหารด้วย 8 ลงตัว ซึ่งทำให้มันง่ายขึ้นหากเราใช้หลักการของ 8pt Grid คือการใช้ผลคูณของ 8 (8, 16, 24, 32, 40, 48, 56, ฯลฯ) ในการจัดวาง ขนาด การเว้นช่องว่าง และส่วนอื่นๆขององค์ประกอบ

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

ทำการเว้นระยะห่าง (Spacing Space) ถึงสำคัญ?

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

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

ขนาด (Sizing)

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

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

ช่องว่างระหว่างเส้นขอบและความหนา (Padding)

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

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

ระยะห่างตัวหนังสือ

เปรียบเทียบสองภาพด้านล่าง ทางด้านซ้ายใช้ระยะห่างเท่ากันทุกที่ ส่วนทางขวาใช้แบบ 8pt Layout Grid System การเว้นวรรค ช่องว่างภายในคอนเทนเนอร์ และการเว้นวรรคระหว่างไอคอน ข้อความ และปุ่มนั้นแตกต่างกันทั้งหมด

ลองสังเกตว่าภาพด้านซ้ายดูลอยและยุ่งเหยิง? แต่ภาพทางขวาดูสมดุลและเรียบร้อย

ระยะพื้นที่กับไอคอน

ออกแบบไอคอนตามกฎ 8px แบบเดียวกัน ตรวจสอบให้แน่ใจว่าไอคอนที่เราวางในงานออกแบบถูกจัดกรอบไว้ภายในคอนเทนเนอร์ที่ใช้ค่า 8 (เช่น 24×24) วิธีนี้จะช่วยให้วางไอคอนได้อย่างสม่ำเสมอภายในการออกแบบของคุณ ขนาดไอคอนมาตรฐานคือ 24px x 24px แต่เราสามารถใช้ขนาดที่เล็กกว่าหรือใหญ่กว่าได้

หากใครที่สนใจข้อมูลเพิ่มเติมหรือตัวอย่างการใช้งานสามารถไปดูเพิ่มเติมที่นี่ได้: https://spectrum.adobe.com/page/responsive-grid/

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

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

อย่าลืมกดติดตามช่องทางต่างๆ ของเราเพื่อรับข้อมูลข่าวสารเพิ่มเติมกันนะ
บริการของเรา >> บริการ Astra studio 
Medium: Medium Astra Studio
Website: Astra Studio