hand tlhand crfog b
15Oct, 2021
Language blog :
Thai
Share blog : 
15 October, 2021
Thai

UX/UI Design Secret - EP 2 (Color-Shadow-Hue-Guiding)

By

1 mins read
UX/UI Design Secret - EP 2 (Color-Shadow-Hue-Guiding)

ในบทความ Episode 1 เราได้เปิดเผยความลับที่ถูกซ่อนไว้จากเหล่านักออกแบบที่คุณอาจไม่เคยรู้ว่ามันส่งผลการใช้งาน Website หรือ Application ของคุณยังไงไปบ้างแล้ว สำหรับใครที่ยังไม่เคยอ่านเราแนะนำให้คุณไปอ่านก่อน และถ้าพร้อมไปติดตามต่อใน Episode 2 นี้  ก็ลุยกันเลย

เนื้อหาในบทความ EP 2 เราจะมาพูดถึง

  • Present context to the user
  • Colour links for active breadcrumbs
  • Apply soft shadows
  • Same hue for neutrals solution
  • Guide user instead

 

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

 

Present context to the user

Present context to the user

รูปทั้งสองด้านบนดูคล้ายกันมาก ความแตกต่างเพียงอย่างเดียวคือ icon สถานะ icon ด้านซ้ายเป็นสัญลักษณ์แสดงข้อมูลเพิ่มเติมทั่วไป ส่วน icon ด้านขวาเป็นสัญลักษณ์สีเขียวที่มีความหมายเชิงบวกพร้อมเครื่องหมายติ๊กถูกนี้ แนะนํา User ให้รู้ว่าข้อความข้างล่างต้องมีความหายเชิงบวกแน่นอน แม้ว่าจะไม่ได้อ่านข้อความที่เหลือก็ตาม

 

Color links for active breadcrumbs

Color links for active breadcrumbs

แนวทางนี้ขึ้นอยู่กับบริบทและเป้าหมายของแนวทางการใช้งานเฉพาะเจาะจงเพื่อแก้ปัญหาตามแต่ละจุดประสงค์แตกต่างกันออกไป อย่างไรก็ตาม ถ้าคุณต้องการสื่อสารให้ User รับรู้ว่าหน้าที่เขาผ่านเข้ามามีหน้าอะไรแล้วบ้าง แล้วเขาสามารถกลับออกไปได้กี่ขั้น ควรใช้ state active ที่ ​​breadcrumbs ที่หน้าที่ผ่านมาแล้วเพื่อทำให้ User รับรู้ถึงหน้าที่เขากดเข้ามาและสามารถกดย้อนกลับไปหน้าก่อนนี้ได้เช่นกัน

 

Apply soft shadows

Apply soft shadows

ค่าเริ่มต้นที่ตั้งไว้ของ Shadow ในเครื่องมือออกแบบทั้งหมดไม่สามารถใช่ต่อได้ทันทีเท่าไหร่ เราแนะนำการสร้างเงาอ่อน ๆ โดยการ blur layer ด้านหลังแผงหรือใช้ layer เงาสองสามชั้นเพื่อสร้างเอฟเฟกต์ที่เบาบาง สบายตา ไม่แข็งกระด้างต่อความรู้สึกของ User

Developer ของคุณเคยบ่นถึงปัญหาการสร้างเงานี้กันหรือเปล่า? ถ้าเคยบ่นแสดงสิ่งนี้ให้พวกเขาเห็นถึงวิธีการทําเงาใน css เพื่อง่ายต่อการทำงานร่วมกัน

 

Same hue for neutrals solution

Same hue for neutrals solution

สีเทาอมฟ้าเป็นสีที่เป็นกลางช่วยสร้างความสมดุลให้ User เชื่อมต่อกับการใช้งานที่เป็น Public มากกว่าสีเทาที่บริสุทธิ์ สำหรับเหตุผลที่ทำให้สีเทาอมฟ้าเป็นสีที่สร้างสมดุลได้มากกว่าสีเทาบริสุทธิ์ เรามีคำตอบไว้ใน Episode 1 เรื่อง The bluish-grey tone 

อย่างไรก็ตาม มันเป็นเรื่องง่ายที่จะทําให้งานของคุณมีสีธรรมชาติเป็นกลางที่หลากหลายเฉดและผิดเพี้ยนกันมาก ส่งผลไปถึงการทำลายความเป็น Harmony ในงานของคุณ โดยคุณเปลี่ยนตัวเลือกสีในเครื่องมือออกแบบของคุณเป็น HSB เพื่อสร้าง palette สีธรรมชาตินี้ไว้ให้ง่ายต่อการควบคุมการใช้สี เคล็ดลับนี้จะช่วยสร้างความสมดุลของงาน - ทําให้น่าสนใจยิ่งขึ้น

 

Guide user instead

Guide user instead

เมื่อการสร้างรหัสผ่านของคุณมีกฎที่เข้มงวด การบอก User ให้รับรู้ว่าการสร้างรหัสผ่านของ User ไม่ถูกต้อง ดูจะไม่เพียงพอต่อการทำให้ User ทำถูกต้องได้ เราควรแจ้งให้ User รับรู้เกี่ยวกับข้อจํากัดและแสดงระดับขั้นตามกฎระเบียบ ด้วยวิธีนี้ User จะรู้สึกสะดวกสบายในการใช้แอปฯ ของคุณ

หลีกเลี่ยงการแสดง Error State ในงานของคุณให้ได้มากที่สุด กรณีเหล่านี้ไม่ใช่ความผิดของ User ที่พวกเขาไม่ทราบกฎที่เข้มงวดของเรามาก่อน!

 

Conclusion

นี่เป็นเพียง 5 เคล็ดลับการออกแบบ UX/UI จากมากมายที่จะมาถึง เคล็ดลับการออกแบบ UX/UI เหล่านี้จะช่วยให้คุณพัฒนาทักษะของคุณไปอีกระดับ คุณจะออกแบบด้วยความมั่นใจที่มากขึ้นและ ใช้เวลาน้อยลงในการพยายามหาจุดเล็ก ๆ น้อย ๆ ที่ดีกว่า

 

"I adore you, and your concept of living. Maybe we can work together."

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

10
October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
10 October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
10
October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
10 October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
10
October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
10 October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

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.