Skip to main content
เทคโนโลยี

ทำให้ UI ดูดีขึ้นง่าย ๆ ด้วยเทคนิค Spacing

By กุมภาพันธ์ 14th, 2022No Comments

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

เขียนโดย
Nattawanee Srikoseat – Internship @ borntoDev

ทำไม Spacing ถึงสำคัญ?

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

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

 

ระยะอะไรบ้างที่ต้องเว้น?

องค์ประกอบที่ต้องออกแบบการเว้นระยะมีอยู่ 3 กลุ่ม เรียกว่า Three Cs คือ Component, Container และ Content

  1. Container อย่าง Card, Modal รวมถึงระยะจากขอบหน้า Page ด้วย ส่วนนี้ควรมีระยะห่างให้มากที่สุด

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

  3. Component เช่น ปุ่ม, input field ไอคอน เป็นองค์ประกอบที่มีขนาดเล็กที่ต้องคิดถึง ระยะห่างกับองค์ประกอบรอบ ๆ และระยะห่างของ Element ด้านใน

 

แล้วต้องเว้นระยะห่างเท่าไร?

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

จากรูปส่วนของช่องว่าง (ไฮไลท์สีฟ้า) ยิ่ง 2 Element มีความสัมพันธ์กันมากอย่างในกล่องสี่เหลี่ยมด้านในจะมีระยะเว้นที่น้อย ในขณะเดียวกันพอขึ้น Section ใหม่ก็จะเว้นระยะกว้างมาก ๆ ให้เห็นอย่างชัดเจน อย่าลืม ว่าถ้าเลือกระยะห่างระหว่าง 2 Element แล้ว Element อื่นที่มีความสัมพันธ์ในแบบเดียวกัน ก็ควรเว้นระยะให้เท่ากันด้วยเพื่อความสม่ำเสมอ

ระบุชัดลงไปอีกเป็นหน่วย Pixel เพื่อนำไปออกแบบเลย ตัวเลขที่ใช้กันส่วนใหญ่จะเป็นเลขกำลัง 4 คือ 4 8 16 24 32 64 128… แต่หลาย ๆ ครั้งจะมีเลข 12 และ 72 มาด้วยระหว่างกลางเพราะตัวเลขห่างกันเกินไป

 

สรุปสุดท้ายสิ่งที่ผู้อ่านจะได้รับ

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

 

อ้างอิงจาก

  1. Tess Gadd. UI cheat sheet: Spacing friendships, สืบค้นเมื่อ 7 ก.พ. 2565 จาก: https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407
  2. UIBLOGAZINER. UI พื้นที่ว่าง (White Space), สืบค้นเมื่อ 7 ก.พ. 2565 จาก: http://www.uiblogazine.com/ui-พื้นที่ว่าง-white-space/

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

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

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า