hand tlhand crfog b
03Nov, 2021
Language blog :
Thai
Share blog : 
03 November, 2021
Thai

10 เทคนิคการออกแบบ UX/UI ยังไงให้ดูดีขึ้น #2

By

1 mins read
10 เทคนิคการออกแบบ UX/UI ยังไงให้ดูดีขึ้น #2

บทความนี้เป็นบทความตอนยาวต่อจากบทความที่แล้ว : 10 เทคนิคการออกแบบ UX/UI ยังไงให้ดูดีขึ้น #1

11. ใส่เงาให้ดูธรรมชาติขึ้น

การออกแบบโดยการใส่เงา บางครั้งผู้ออกแบบอาจจะแค่ใส่เงาลงไปเฉย ๆ แต่การเพิ่มระยะห่างของเงาลงด้านล่าง (Vertical offset) เพียงเล็กน้อย และเลือกใช้เงาที่อ่อนลงสักหน่อยจะทำให้งานออกแบบดูธรรมชาติ และดูดีขึ้น

การออกแบบโดยการใส่เงา UX/UI

 

12. ใช้สีเน้นไอคอน

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

การออกแบบให้ไอคอนให้สีสว่างกว่าข้อความหรือตัวหนังสือ UX/UI

 

13. ใช้ไอคอนแทน bullet หัวข้อ

การใช้ไอคอน หรือแม้แต่สัญลักษณ์ที่เป็นเครื่องหมายถูก แสดงหัวข้อย่อย แทนเครื่องหมายขีด (-) หรือ bullet (•) ธรรมดา จะเพิ่มความน่าสนใจทางสายตาให้กับเนื้อหาขึ้นมาได้มาก

การใช้ไอคอนแทน bullet หัวข้อ UX/UI

 

14. เติมแถบสี

บางครั้งที่เราเข้าใช้เว็บไซต์หรือระบบที่ดูเรียบง่าย แต่ดูมีชีวิตชีวานั้น นักออกแบบหลายคน มักใช้เทคนิดการเพิ่มแถบสียาวทั้งหน้าจอ (ความหนา 4px - 6px) เพื่อทำให้เนื้อหา และการออกแบบดูมีสีสันมากขึ้น โดยไม่ทำให้รบกวนสายตา และ Call to action หลักได้

การเติมแถบสี UX/UI

 

15. เพิ่ม Contrast แทนการแบ่งเส้น (Keyline)

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

การเพิ่ม Contrast แทนการแบ่งเส้น (Keyline) UX/UI

 

16. ใช้ Gradient สีฉูดฉาดขึ้น

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

การใช้ Gradient สีฉูดฉาดขึ้น UX/UI

 

17. หลักการ x 1.5

ในการออกแบบ จะเริ่มต้นขนาดฟอนต์อยู่ที่ 16 px และใช้สูตรคำนวณความสูงของบรรทัดตัวหนังสือ (Line height) 1.5 เท่าของขนาดฟอนต์ที่ใช้ (ขนาดฟอนต์ x 1.5 = Line height ที่กำลังพอดี) ก็จะได้ผลลัพท์ออกมาพอดี กับการใช้งาน อ่านง่าย และดูสวยงาม แต่ทั้งนี้ มันไม่ใช้กฏตายตัว นักออกแบบสามมรารถเล่น ปรับได้ตามความเหมาะสม

หลักการ x 1.5 UX/UI

 

18. เพิ่มระยะห่างตัวอักษรในตัวพิมพ์ใหญ่

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

เพิ่มระยะห่างตัวอักษรในตัวพิมพ์ใหญ่ UX/UI

 

19. เล่นกับพื้นที่ให้หลากหลาย

แน่นอนว่าการออกแบบ Design system ที่ใช้ระยะห่างที่สม่ำเสมอกันนั้น เป็นการจัดการระบบการออกแบบที่ดีและง่าย แต่บางครั้งมันอาจทำให้น้ำหนักการจัดวางบางจุดไม่สมดุลตามมา การใช้ Spacing ที่หลากหลายอย่างเป็นระบบ อาจจะช่วยแก้ปัญหา และทำให้การออกแบบดูเป็นสัดส่วน และสวยงามมากขึ้นได้อย่างไม่ยากเย็น 

การใช้ spacing UX/UI

 

20. Dropdown ที่เป็นได้มากกว่านั้น

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

การออกแบบ dropdown UX/UI

Image: www.ducati.comwww.pomelofashion.com 

 

ที่มา:

• Short, Useful Design Tips For UI/UX Designers, Steve Schoger. 

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

12
October, 2024
หน้ากากอนามัยสามารถปกป้องคุณจาก COVID-19 ได้จริงหรือ?
12 October, 2024
หน้ากากอนามัยสามารถปกป้องคุณจาก COVID-19 ได้จริงหรือ?
WHO ได้ออกมายืนยันว่าหน้ากากอนามัยธรรมดาเพียงอย่างเดียวไม่สามารถป้องกันคุณจากไวรัสโคโรน่าได้ ในขณะที่ผู้คนไม่สามารถครอบครองหน้ากากอนามัยได้มากเท่าจำนวนที่ต้องการเนื่องจากสาเหตุการแพร่ระบาดของ COVID-19 หรือ ไวรัสโคโรน่า ทำให้หน้ากากอนามัยขาดแคลนในหลายประเทศ แต่มีการยืนยันจากผู้เชี่ยวชาญว่าการใส่หน้ากากอนามัยเพียงอย่างเดียว ไม่สามารถช่วยป้องกันได้อย่างที่คาดไว้ Eric Toner นักวิทยาศาสตร์จากศูนย์สุขภาพของ Johns Hopkins กล่าวว่า "การใส่หน้ากากอนามัยเพียงอย่างเดียว ไม่สามารถช่วยป้องกันได้อย่างที่คาดไว้" รวมไปถึง ดร. William Schaffner ผู้เชี่ยวชาญด้านโรคติดเชื้อที่มหาวิทยาลัย Vanderbilt ในรัฐเทนเนสซียืนยันกับ Live Science ว่าหน้ากากอนามัยธรรมดาไม่สามารถป้องกันไวรัสโคโรนาได้ นอกจากนี้ ศูนย์ควบคุมและป้องกันโรคหรือ CDC ระบุว่า ทางป้องกันไวรัสโคโรนาที่ดีที่สุดคือการล้างมือบ่อย ๆ

By

1 mins read
Thai
12
October, 2024
Microsoft ได้ยื่นจดสิทธิบัตร ให้คนเกิดใหม่เป็น Chatbot ได้
12 October, 2024
Microsoft ได้ยื่นจดสิทธิบัตร ให้คนเกิดใหม่เป็น Chatbot ได้
จะดีไหม หากเราสามารถสื่อสารกับคนในครอบครัว คนรัก หรือแม้แต่เพื่อนของเราที่ได้จากไปจากโลกนี้แล้วได้ เพราะล่าสุด Microsoft ได้ยื่นจดสิทธิบัตร เพื่อเพิ่มความเป็นไปได้ในการให้คนที่เสียชีวิตไปแล้ว สามารถกลับมาเกิดใหม่เป็น Chatbot บนโลกดิจิทัลได้ ซึ่งในการสร้าง Chatbot นี้ แทนที่จะใช้วิธีการฝึกแบบเดิม ๆ โดยใช้การสนทนาและข้อมูลจากผู้ใช้กลุ่มตัวอย่าง ทาง Microsoft มีความคิดที่จะสร้าง Chatbot จากข้อมูลของบุคคลที่เสียชีวิต โดยระบบจะนำข้อมูลจาก Social media เช่น ข้อความ รูปภาพ ข้อมูลเสียง โพสต์ต่าง ๆ

By

3 mins read
Thai
12
October, 2024
QA (Quality Assurance) และ Tester ต่างกันอย่างไร
12 October, 2024
QA (Quality Assurance) และ Tester ต่างกันอย่างไร
Quality Assurance เลือกหรือหาวิธีที่ดีที่สุดมาทดสอบ product เลือกใช้กระบวนการเพื่อทดสอบคุณภาพของ Product ให้ออกมาได้ประสิทธิภาพมากที่สุด ส่งมอบ Product ที่มีคุณภาพมากที่สุด ป้องกันการเกิด Bug หรือ Defect หรือ Issue Tester ตรวจสอบและค้นหา Bug หรือ Defect หรือ Issue ให้ได้มากที่สุดเพื่อให้ Product มีคุณภาพมากที่สุด QA และ Tester ต้องรู้อะไรบ้าง จากการที่เราได้พอรู้ว่า QA และ Tester มีความแตกต่างกันอย่างไรแบบพอสังเขปแล้ว ทีนี้เรามาดูกันว่าการจะเป็น QA หรือ

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.