9 เคล็ดลับ ที่ช่วยให้คุณออกแบบ UI ได้ดีขึ้นอย่างรวดเร็ว

27-พ.ค.-20

คัมภีร์เทพ IT

การจะสร้าง UI ให้สวยงาม, ใช้งานได้ดี และมีประสิทธิภาพนั้น โดยมากมักต้องใช้เวลา และต้องมีการปรับปรุงการออกแบบหลายครั้งจนกว่า ลูกค้า, Users หรือแม้แต่ตัวคุณเองรู้สึกพอใจกับมัน ซึ่งในบทความนี้จะมาเผยถึง 9 เคล็ดลับ ที่ช่วยให้คุณออกแบบ UI ได้ดีขึ้นอย่างรวดเร็ว

1. ทำให้องค์ประกอบของคุณดูชัดเจนยิ่งขึ้น

ใช้ Multiple Drop Shadows หรือเส้นขอบที่ชัดเจน (เพียงใช้เงาที่เข้มมากขึ้น) รอบ ๆ องค์ประกอบที่ต้องการ เพื่อให้องค์ประกอบเหล่านั้นดูคมชัด, ชัดเจนยิ่งขึ้น 

2. ใช้อักษรรูปแบบเดียวในการออกแบบของคุณ

การที่คุณใช้รูปแบบอักษรเพียงแบบเดียวใน Artwork ของคุณ ซึ่งโดยทั่วไปการทำแบบนี้จะช่วยให้คุณสามารถสร้างผลงานที่โดดเด่นและมีความสอดคล้องกันมากขึ้น

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

3. ถ้า Content ยาว ให้ลองใช้อักษรขนาด 20pt ในส่วนของ Body

สำหรับ Content ที่ค่อนข้างยาว (เช่น Blog Posts, Project Descriptions เป็นต้น) ให้คุณลองเลือกใช้อักษรที่มีขนาด 20pt (หรืออาจมากกว่านั้นได้เล็กน้อย) ในส่วนของ Body หรือตัวเนื้อหาหลักในบทความของคุณ

แน่นอนว่า สิ่งนี้ขึ้นอยู่กับรูปแบบอักษรที่คุณเลือกด้วย แต่ส่วนของเนื้อหาหลักที่นิยมใช้และดูเหมาะสมจะอยู่ที่ 20pt ซึ่งมันจะช่วยให้ประสบการณ์การอ่านของผู้อ่านดีขึ้น 

4. ปรับปรุงประสบการณ์ในส่วน Onboarding ของ Users

อนุญาตให้ Users สามารถข้าม (Skip) ในส่วนของ Onboarding ใน Mobile App ของคุณได้ตลอดเวลา และขอแนะนำให้วาง Link สำหรับการ Skip ไว้ในตำแหน่งที่สามารถคลิกได้ง่าย ๆ โดยใช้นิ้วโป้ง

5. จัดทิศทางของเงา (Shadow) ให้ไปในทางเดียวกัน

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

6. ปรับปรุงให้ข้อความและรูปภาพ ตัดกันให้เห็นชัดเจนขึ้น

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

7. จัดข้อความให้อยู่ตรงกึ่งกลาง และวางไว้ส่วนล่าง

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

8. Whitespace เป็นเพื่อนที่ดีของคุณ ใช้มันให้พอเหมาะ

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

9. ใช้ข้อความสีเข้มบน Background สีอ่อน

พยายามอย่าใช้ข้อความที่มีสีอ่อนจนเกินไปเมื่อต้องทำงานกับ Background ที่มีสีอ่อน นี่เป็นพื้นฐานของการออกแบบที่คุณสามารถทำได้ง่าย ๆ

ที่มา:  https://uxdesign.cc/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด