• เทคนิคการจัดชุดสีแบบ Matterial Design


    24/11/2017 12:23

    จำนวนครั้งที่เปิดอ่าน : 1,091

  • งานออกแบบที่ดูดี เริ่มต้นจาก การเลือกชุดสี ที่เหมาะสม การเลือกใช้สี เป็นกระบวนการหนึ่ง ที่มีความซับซ้อน และ น่าปวดหัว เนื่องจากมีเฉดสี ให้เลือกใช้งาน อย่างมากมาย แล้วจะรู้ได้อย่างไรว่า สีไหน คือ สีที่ใช่ สำหรับงานออกแบบ ของคุณ ? เพื่อแก้ปัญหาดังกล่าว Google จึงกำหนดชุดสี ที่เรียบง่าย แต่มีประสิทธิภาพ ภายใต้แนวคิด ในการออกแบบ ที่เรียกว่า Matterial Design ขึ้นมา โดยแทน ความเข้มของสี ด้วยตัวเลข เริ่มต้นที่ 500 และ ปรับให้เข้มขึ้น หรือ อ่อนลง โดยมี scale ที่แน่นอน ซึ่งการอ้างอิงระดับสี ด้วยตัวเลข จะช่วยให้ เลือกใช้ชุดสี สะดวก รวดเร็ว และ เป็นระบบ

    หลักการพื้นฐานในการจัดชุดสี


    งานออกแบบ ในระบบของ Matterial Design นิยมเลือกใช้ 2 สี ประกอบกัน ดังนี้
    • Primary Color คือ สีหลัก ใช้คุมโทนสี ของงานออกแบบ
    • Secondary Color คือ สีรอง ใช้สำหรับเน้น Element ที่สำคัญ
    Matterial Design แทนระดับความเข้มของสี ด้วย ตัวเลข
    การใช้งานโดยทั่วไป จะนิยมเลือกสี ในระดับ 500 มาใช้เป็น Primary Color (สีหลัก) และ 700 (เข้มขึ้น) สำหรับแสดง แถบเมนู และ ระดับสี 300 (อ่อนลง) สำหรับใช้แสดง ข้อมูลเพิ่มเติม ส่วน Secondary Color มักเลือกใช้สี ที่สว่าง สดใส และ ดูโดดเด่น เพื่อเน้น บริเวณที่เป็น Action หลัก ของ User Interface อย่างเช่น ปุ่ม, switch หรือ slider ซึ่งจะช่วยกระตุ้นให้เกิด การตอบสนองของ User ได้เป็นอย่างดี

    เครื่องมือสำหรับช่วยจัดชุดสี

    ที่กล่าวมาข้างต้น เป็นเพียงหลักการ เพื่อให้คุณเข้าใจ วิิธีการเลือกใช้สี ตามหลักของ Matterial Design ซึ่งการใช้งานจริง คุณไม่จำเป็น ต้องเลือกสีเอง ทีละสี เพราะปัจจุบัน มีเครื่องมือ online ที่ช่วยให้คุณจัดชุดสี ได้อย่างเหมาะสม และ ถูกต้อง ตามหลักการ รวมถึงประหยัดเวลา อาทิเช่น
    • material.io สำหรับเว็บไซต์นี้ เป็นของ Google เอง โดยจะให้คุณ เลือกสีที่ต้องการได้เอง ทั้ง Primary Color และ Secondary Color พร้อมแสดง ระดับสีเข้ม และ อ่อน ที่เหมาะสม ตามสีที่คุณเลือก ได้อีกด้วย
    • materialpalette.com สำหรับเว็บไซต์นี้ จะให้คุณเลือก Primary Color และ Secondary Color จากนั้น ระบบจะแสดง Preview ในแบบ Matterial Design ให้คุณดู ซึ่งค่อนข้างใช้งานง่าย และ สะดวก
    การเลือกชุดสี อย่างเหมาะสม ช่วยเพิ่มความน่าสนใจ ให้กับงานออกแบบของคุณ การเลือกใช้สี ตามหลัก Matterial Design เป็นวิธีที่มีประสิทธิภาพ นำไปประยุกต์ใช้งาน ได้หลากหลาย ซึ่งหากศึกษา และ นำมาปรับใช้ จะช่วยให้งาน Design ครั้งต่อไปของคุณ ดูดีขึ้นกว่าเดิม อย่างอย่างแน่นอน

8columns ให้บริการ เว็บไซต์ แบบ Responsive พร้อม ระบบแก้ไขข้อมูล ที่ใช้งานง่าย แก้ไขได้จริง! เหมาะสำหรับ บริษัท และ ธุรกิจทั่วไป ที่ต้องการเว็บไซต์ ขนาดเล็ก แบบ Custom Made ที่ดูน่าเชื่อถือ, มีคุณภาพ และ ราคา ไม่แพง สอบถาม เพิ่มเติม หรือ ขอรับการสาธิต ฟรี! ผ่านอินเตอร์เน็ต ไม่ต้องเดินทาง ใช้เวลาเพียง 20 นาที โทร. 080-597-9990 LINE: 8columns