06Sep, 2021
Language blog :
Thai
Share blog : 
06 September, 2021
Thai

Colors in Design System : สี สิ่งที่ต้องคำนึงก่อนขึ้น UI

By

1 mins read
Colors in Design System : สี สิ่งที่ต้องคำนึงก่อนขึ้น UI

เชื่อว่าเวลาเริ่มต้นโปรเจกต์ใหม่ ๆ ก็จะมีความวุ่นวายเรื่องของการวาง Design System หรือ Guideline ของงานเพื่อให้ออกแบบได้เรียบร้อยและดูเป็นระเบียบเวลาส่งงานต่อให้กับดีไซเนอร์คนอื่น ๆ หรือแม้แต่ Developer เวลาต้องมาศึกษางานก่อนนำไปพัฒนา

สิ่งหนึ่งที่สำคัญก็คือเรื่องสีที่บางทีเป็นงงว่า สรุปแล้วสีดำมีกี่เฉด? สีไหนสีหลัก? ม่วงตรงนี้เข้มกว่าหรือเปล่า? ซึ่งจะทำให้เสียเวลาต่อการทำงานและต้องมีสื่อสารที่ใช้เวลากันอีกแน่นอน จึงอยากให้ทุกคนเริ่มต้นจากการทำ Design System กันก่อน ซึ่งแบ่งออกได้หลายส่วนแต่ในบทความนี้เราจะมาว่ากันด้วยเรื่องของสีกัน เริ่ม !

Primary Color

สีหลักหรือสีของแบรนด์ที่เราต้องใช้เป็นส่วนหลักของการออกแบบ 60-70% ของโปรเจกต์ ซึ่งสีหลักนี้เองจะเป็นตัวที่แสดงให้เห็นถึงประเภทของแบรนด์และโปรเจกต์ที่คุณกำลังออกแบบอยู่ว่าต้องการให้ภาพลักษณ์ไปในทิศทางไหน เมื่อผู้ใช้หรือกลุ่มเป้าหมายเข้ามาใช้งานบนเว็บหรือแอปพลิเคชันก็ตาม โดยที่สีใด ๆ ที่มีความหมายทางจิตวิทยาที่แตกต่างกันโดยสามารถหาอ่านเพิ่มเติมได้ในบทความ Colors in Business: สีเปลี่ยนธุรกิจ

Primary Color

Secondary Color

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

Secondary Color

Color Overlays

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

Color Overlays

Gradients

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

Gradients

Status Colors

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

Status Colors

Neutral Colors

สีกลาง เป็นอีกหนึ่งชุดสีหนึ่งที่สำคัญสำหรับการทำงานด้าน UX/UI Design เพราะว่าสีเหล่านี้ส่วนใหญ่แล้วจะใช้เป็นสีพื้นหลัง สีข้อความ ตัวคั่น โมเดล ฯลฯ การทำให้สีแท้ที่มีความเข้มของสีนั้นหม่นลง โดยการผสมสีตรงข้ามซึ่งจะทำให้สีกลางของคุณเย็นลงเล็กน้อย โดยการเพิ่มสีน้ำเงินเล็กน้อย หรืออุ่นขึ้น

ด้วยวิธีนี้จะทำให้การออกแบบของคุณรู้สึกเป็นธรรมชาติและช่วยให้ภาพรวมของงานจะดูกลมกลืนมากยิ่งขึ้น ซึ่งจะเป็นตัวกลางในการสื่อความหมายต่างๆ ตั้งแต่สีเข้มไล่เฉดระดับความเข้มของสีไปเรื่อย ๆ ไปจนเป็นสีอ่อนนั้นเอง แนะนำ Tool ที่จะช่วยไล่ระดับสีให้ง่าย ๆ ชื่อ Make Tint and Shade Generator ที่เหมาะจะช่วยให้ชีวิตสบายขึ้น

Neutral Colors

ทีนี้ทุกคนก็พอจะรู้แล้วว่า Design System ในส่วน Color ว่ามีอะไรกันบ้างที่ควรกำหนดเอาไว้ ในบางประเภทอาจจะมี ชื่อเรียกอื่นๆ แล้วแต่บุคคลไป ซึ่งสามารถไปศึกษาเพิ่มเติมได้จาก บริษัทใหญ่ ๆ /แบรนด์ดังอื่นๆ ที่เขาได้มีการลงไว้ในเว็บไซต์ เช่น IBM , Apple , Airbnb , Google , Microsoft , Uber เป็นต้น แล้วไว้จะมาสรุปและขยายความต่อกันต่อในบทความถัด ๆ ไป หวังว่าพอได้เข้ามาอ่านกันแล้วจะได้ความรู้ ความเข้าใจเกี่ยวกับเรื่องสีกันมากขึ้น 

ต่อไปพอจะเริ่มทำการออกแบบอย่าลืมทำ Design System กำหนดค่าสีส่วนต่าง ๆ กันก่อนจะได้ง่ายต่อฝ่ายอื่น ๆ ที่ทำงานร่วมกับเราหรือทำงานต่อจากเรานั้นเอง หรือแม้กระทั่งลูกค้าเวลาอธิบายก็จะได้เข้าใจตรงกันว่านี้เราหมายถึงสีส่วนไหนกัน

เจอกันบทความหน้าจะมาแนะนำ Tools ที่จะช่วยให้เรื่องสีเป็นเรื่องง่ายขึ้นเร็ว ๆ นี้

 

Ref

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

By

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

By

4 mins read
Thai
24
June, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
24 June, 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.