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

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

By

1 mins read
Thai
24
June, 2024
Pace สตาร์ตอัปรายใหม่เปิดตัว Virtual Group Therapy
24 June, 2024
Pace สตาร์ตอัปรายใหม่เปิดตัว Virtual Group Therapy
จากสถิติ National Institutes of Health ของสหรัฐฯ บ่งชี้ว่าชาวอเมริกันจำนวน 1 ใน 5 ของคนประสบปัญหาด้านสุขภาพจิต (51.5 ล้านคนในปี 2019)บริษัทสตาร์ตอัปน้องใหม่อย่าง Pace ที่ก่อตั้งโดยผู้บริหารของ Pinterest และ Affirm จึงต้องการให้ความสำคัญกับเรื่องนี้ “ไม่มีใครที่จะมีสุขภาพจิตสมบูรณ์ดีตลอดเวลา”Jack Chou ผู้ร่วมก่อตั้ง Pace กล่าว เขาเชื่อว่าทุกคนจะอยู่ระหว่างการมีสุขภาพจิตแข็งแรงและไม่แข็งแรง ในขณะที่บางคนได้ผ่านการวินิฉัยภาวะสุขภาพจิต ซึ่งอาจได้รับการรักษาด้วยยา หรือการบำบัดรายเป็นบุคคล แต่ผู้ที่อยู่ในพื้นที่สีเทาที่ไม่อาจทราบได้ว่าตัวเองนั้นมีปัญหาหรือไม่ และอาจต้องการรักษาบางอย่างเพื่อให้สามารถดำเนินชีวิตต่อไปได้ ซึ่งหลังจากที่

By

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

By

3 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.