บทความ IT เจ๋งๆ

ปัจจุบัน การใช้งานผ่าน Mobile Devices ไม่ว่าจะเป็น โทรศัพท์มือถือ หรือ Tablet เพิ่มขึ้นอย่างมาก ทำให้ Applications ต่าง ๆ เกิดขึ้นมากมาย ดังนั้น Developers จึงต้องให้ความสำคัญกับการออกแบบ App UI ให้ Users ใช้งานได้สะดวกและกลับมาใช้งานเรื่อย ๆ ในบทความนี้จะกล่าวถึง 5 เคล็ดลับ ที่ช่วยให้คุณสร้าง App UI ที่ทันสมัยยิ่งขึ้น

1. Space Space Space

จงให้ความสำคัญกับ Space รวมทั้ง ความสูงของ Line, Padding, Margins โดยเฉพาะ Horizontal Margins มี Designers ที่ไม่ค่อยมีความมั่นใจเป็นพื้นฐานอยู่แล้ว มักจะต่อต้านการเพิ่ม Space เป็นพิเศษ โดยส่วนใหญ่แล้วเป้าหมายหลักก็คือ การใส่ Content ให้พอดีที่สุด สำหรับพื้นที่ที่ User สามารถเห็นได้

กว่า 87% ของประชากรอินเดีย เป็นเจ้าของ Devices ที่สูงกว่า 720 pixels คุณสามารถอ่านข้อมูลเพิ่มเติมได้ที่นี่

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

Spaced out Vs Cramped up

2. Invisible Headers

Solid Headers คือสิ่งที่ใช้กันในช่วงปี 2010’s วิธีที่เร็วที่สุดในการทำให้ App ของคุณดูทันสมัยยิ่งขึ้นก็คือ การตัดส่วน Header ที่เป็นสีทึบออก (ต่างจากสีของ Background) ในทางกลับกัน Header สามารถถูกใส่เข้ามาได้เพื่อใส่รายละเอียดเพิ่มขึ้นหรือเพื่อให้ทำ Quick Actions บางอย่าง เมื่อ User ทำการ Scrolls Down Page ลง สิ่งนี้จะทำการเพิ่ม White Space ที่จำเป็นมากใน Design ของคุณโดยอัตโนมัติ เพื่อทำให้รู้สึกว่า ไม่อัดอัดหรือแน่นจนเกินไป

Eventbrite: ส่วนของ Header มีการเพิ่มข้อความ 'Singapore' เข้าไป ซึ่งจะเป็นการบอก User ให้ทราบว่า พวกเขาอยู่ใน Page ไหน และช่วยให้ User เข้าถึงส่วนที่จะสามารถ 'Change' Location ได้ง่ายขึ้นอีกด้วย

3. Flaunt Them Curves

Google: Material you

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

หลีกเลี่ยงการใช้ขอบมุมที่ดูแหลม เว้นแต่ว่าคุณต้องการความแข็งกร้าว ตัวอย่างที่ดีในการใช้ขอบมุมที่ดูแหลม ก็คือ Action Games

Call of Duty on mobile

4. Use Images

มนุษย์เป็นสิ่งมีชีวิตที่สามารถมองเห็นได้ รูปภาพในการออกแบบ UX สามารถแบ่งออกเป็น 2 ประเภทคือ รูปภาพ (Photographs) และภาพประกอบ (Illustrations) หากคุณคิดว่าสามารถสื่อข้อความผ่านภาพประกอบได้ ก็ให้ทำแบบนั้นต่อไป แต่หากคุณเชื่อว่า รูปภาพจะช่วยเพิ่ม Context ได้ ก็ให้เพิ่มเข้าไป คุณสามารถลองทำดูและ Break การ Scroll เนื้อหายาว ๆ ด้วยการแทรกรูปภาพที่เกี่ยวข้องเข้าไป

จากการวิจัยของ 3M Corporation สรุปว่า คนเราสามารถประมวลผล “รูปภาพ” ได้เร็วกว่า “ข้อความ” ถึง 60,000 เท่า

Airbnb ใช้การแบ่ง Page ด้วย รูปภาพและภาพประกอบ

5. Motion

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

Honk App บน iOS

Google: Material you

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบในส่วนของการเคลื่อนไหว อยากให้ลองอ่านบทความนี้ ซึ่งเป็นของ Issara Willenskomer

จากเคล็ดลับที่กล่าวข้างต้น น่าจะทำให้คุณมี UI ที่ดูดีขึ้นในทันที แต่ยังมีปัจจัยอื่น ๆ อีกมาก เช่น Typography, Colors, Iconography และ Shadows ซึ่งมีบทบาทสำคัญในการปรับปรุง End Product ของคุณ วิธีเดียวในการพัฒนาสิ่งเหล่านั้น ก็คือ การพัฒนารสนิยมของคุณ ด้วยการดูและสร้าง Designs ใหม่ ๆ จาก App ที่คุณชื่นชอบ

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

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

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

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

• 10 สุดยอด Website ที่น่าทึ่งและมีประโยชน์กับ Developer ทุกคน
• 6 Code Patterns ของ TypeScript ที่ช่วยให้ Code ของคุณมีประสิทธิภาพยิ่งขึ้น
• แนะนำ Python Package ที่ใช้สร้าง GUI เจ๋ง ๆ ได้