02Nov, 2021
Language blog :
Thai
Share blog : 
02 November, 2021
Thai

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

By

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

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

1. ออกแบบ Call to action รองใหม่ (Secondary CTA)

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

การออกแบบ Call to action รองใหม่ (Secondary CTA)

2. ลดการใช้กรอบและเส้นลงบ้าง (Border-less)

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

การลดการใช้กรอบและเส้นลงบ้าง (Border-less)

3. การจัดหน้าข้อความและไอคอน (Icon & Text Alignment)

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

การจัดหน้าข้อความและไอคอน (Icon & Text Alignment)

4. ความเข้มของข้อความ (Saturated Text)

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

ความเข้มของข้อความ (Saturated Text)

5. ใช้เงาบาง ๆ (Subtle Shadow)

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

การใช้เงาบาง ๆ (Subtle Shadow)

6. การใส่สไตล์ให้ไอคอน (Icon styling)

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

การใส่สไตล์ให้ไอคอน (Icon styling)

7. เทคนิคการใช้สีเทาในงานออกแบบ (Grey but not grey)

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

เทคนิคการใช้สีเทาในงานออกแบบ (Grey but not grey)

8. ข้อความ ขนาด น้ำหนัก (Text -size-weight)

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

การออกแบบข้อความ ขนาด น้ำหนัก (Text -size-weight)

9. จัดการแบนเนอร์ใหญ่ (Hero Banner)

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

การจัดการแบนเนอร์ใหญ่ (Hero Banner)

หน้า Homepage ของ Senna Labs

10. ซ้อนทับ เพิ่มมิติ (Overlapping element)

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

การซ้อนทับ เพิ่มมิติ (Overlapping element)

Image: Carbonbeauty.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

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

By

1 mins read
Thai
01
March, 2024
Pace สตาร์ตอัปรายใหม่เปิดตัว Virtual Group Therapy
1 March, 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
01
March, 2024
Microsoft ได้ยื่นจดสิทธิบัตร ให้คนเกิดใหม่เป็น Chatbot ได้
1 March, 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.