portaldacalheta.pt
  • หลัก
  • การทำกำไรและประสิทธิภาพ
  • การออกแบบ Ux
  • เทคโนโลยี
  • การออกแบบตราสินค้า
การออกแบบ Ui

สเปกตรัมของความเป็นไปได้: คู่มือ Go-to UI Color



ไม่มีทางหลีกเลี่ยง: สีเป็นองค์ประกอบสร้างสรรค์ที่มีผลกระทบมากที่สุดใน การออกแบบภาพ . ตั้งแต่ฉากหลังที่สวยงามน่าหลงใหลของการออกแบบฉากไปจนถึงการจัดองค์ประกอบภาพที่ซับซ้อนของงานศิลปะพิกเซลความเข้าใจสีอย่างชัดเจนคือกุญแจสำคัญในการสื่อสารที่น่าสนใจ ต้องการหลักฐาน?

เมื่อผู้เข้าร่วมในการศึกษาเกี่ยวกับแบรนด์เมื่อเร็ว ๆ นี้ถูกท้าทายให้วาดโลโก้ของ บริษัท สัญลักษณ์ 10 แห่งมีเพียง 16% เท่านั้นที่จำรูปทรงและคุณสมบัติการออกแบบที่ถูกต้องได้ อย่างไรก็ตามเมื่อถูกขอให้ระบุจานสีของแบรนด์จำนวนการตอบกลับที่ถูกต้อง ยิงได้ถึง 80% .



สียังเล่นไฟล์ บทบาทที่มีอิทธิพล ในโลกของการออกแบบส่วนต่อประสานผู้ใช้ ผลิตภัณฑ์ดิจิทัลที่เราโต้ตอบกันในแต่ละวันต้องอาศัยการใช้สีอย่างมีกลยุทธ์เพื่อสื่อสารข้อมูลสำคัญดังนั้นจึงเป็นเรื่องสำคัญ นักออกแบบ UX และ UI เข้าใจวิธีการใช้สีอย่างชาญฉลาด



ในคู่มือนี้เราจะ:



  • ทำให้เข้าใจพื้นฐานของทฤษฎีสี
  • ให้หลักการที่แข็งแกร่งสำหรับการทำงานกับสีในอินเทอร์เฟซดิจิทัล
  • แบ่งปันแหล่งข้อมูลที่เป็นประโยชน์ในการสร้างความตระหนักรู้เรื่องสีและ
  • เสริมพลัง นักออกแบบ UI เพื่อสร้างโทนสีที่โดดเด่นของตัวเอง

เป้าหมายของคู่มือนี้คือความสามารถด้านสีตามด้วยความมั่นใจในสีทั้งหมดนี้เพื่อประโยชน์ในการใช้สีที่น่าทึ่งในอินเทอร์เฟซผู้ใช้ที่เราพบอยู่ทุกวัน

จานสี UI อาจเป็นสีรุ้ง



Crash Course: ทฤษฎีสีสำหรับนักออกแบบ UI

ทฤษฎีสีเป็นสาขาการศึกษาที่กว้างขวางโดยมีคำศัพท์วิธีการและรากฐานทางวิทยาศาสตร์ของตัวเอง อาจเป็นเรื่องซับซ้อน แต่นั่นไม่ใช่สิ่งที่เราต้องการ สิ่งที่เราต้องการคือความเข้าใจในสีที่สามารถใช้กับความแม่นยำที่รวดเร็วปานสายฟ้า เราต้องการใช้สีในแบบที่เราใช้รูปทรงอย่างง่ายดายกล้าหาญและมีประสิทธิภาพ

ในการใช้สีด้วยวิธีนี้นักออกแบบ UI ต้องมีความเข้าใจอย่างมั่นคงเกี่ยวกับแนวคิดทฤษฎีสีหลักเหล่านี้:



  • สีเป็นญาติ
  • ความอิ่มตัวเกินพิกัดจะฆ่าความสั่นสะเทือนของสี
  • ความคมชัดพร้อมกันมีข้อดีและข้อเสีย
  • โทนสีพื้นฐานดีที่สุด
  • เว้ส่งผลต่อมูลค่าเสมอ

มาดูกัน

สีเป็นญาติ

สีไม่เคยโดดเด่น เมื่อตาและสมองของมนุษย์ทำงานร่วมกันเพื่อดูสีพวกเขามักจะได้รับอิทธิพลจาก:



  • แสงส่องกระทบสี
  • สีอื่น ๆ ที่อยู่รอบ ๆ สี

ลองดูตัวอย่างนี้จากธรรมชาติ:

สัมพัทธภาพสีในการออกแบบ UI และธรรมชาติ

การสังเกตเงาและไฮไลต์ในธรรมชาติเป็นวิธีง่ายๆในการดูสัมพัทธภาพสีในที่ทำงาน



ถึง: สมองและตาทำงานร่วมกันเพื่อช่วยให้เราเข้าใจว่าดอกไม้โดยรวมมีสีแดงสดจริงๆ

B & C: สีน้ำตาลเข้มของเงาของดอกไม้ (B) ทำให้ไฮไลต์บนสันของกลีบดอกไม้ (C) ดูสว่างกว่าสีแดงเข้มที่เป็นจริงมาก โดยพื้นฐานแล้วแสงที่ส่องบนสันกลีบดอกไม้และสีของเงาจะทำงานควบคู่กันไปเพื่อหลอกตาและทำให้ไฮไลต์เข้มขึ้น



นี่คืออีกตัวอย่างหนึ่งที่แสดงให้เห็นว่าสีที่หลอกลวงมีได้อย่างไร:

สัมพัทธภาพสีและการออกแบบส่วนต่อประสานผู้ใช้

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

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

ข้อผิดพลาดสีของการออกแบบส่วนต่อประสานแอป

สีที่ดูดีเป็นตัวอย่างแยกไม่ได้ทำงานร่วมกันภายในอินเทอร์เฟซผู้ใช้เสมอไป การทดสอบสีซึ่งกันและกันโดยเฉพาะอย่างยิ่งสำหรับความเปรียบต่างเป็นขั้นตอนที่เรียบง่าย แต่สำคัญในกระบวนการออกแบบ UI

Takeaway ใหญ่? อย่าเข้ารหัสแนวคิดสีของคุณ หากแถบสีเหลืองที่เน้นเสียงดูเขียวชอุ่มเมื่อล้อมรอบด้วยช่องว่างใน Sketch แต่ขัดแย้งกับโทนสีที่โดดเด่นของ UI ให้หาวิธีแก้ปัญหาอื่น

ความอิ่มตัวเกินพิกัดฆ่าความสั่นสะเทือนของสี

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

ความอิ่มตัวและความสว่างของจานสีที่สวยงาม

ซ้าย: สีในการจัดกลุ่มนี้อยู่ที่ความอิ่มตัวและความสว่าง 100% แต่ไม่มีสีใดโดดเด่นเท่ากับสีที่สดใสกว่าสีอื่น ๆ และโทนสีโดยรวมก็ดูหรูหรา ขวา: สีส้มด้านซ้ายบนและสีม่วงด้านขวาบนไม่มีการเปลี่ยนแปลง แต่ทั้งคู่ดูสดใสขึ้นและโทนสีมีความกลมกลืนกันมากขึ้นเนื่องจากสีโดยรอบมีความอิ่มตัวน้อยกว่า

คอนทราสต์พร้อมกันมีข้อดีและข้อเสีย

คอนทราสต์พร้อมกันเกิดขึ้นเมื่อการเติมสีของค่าเดียวกันทั้งหมดถูกวางไว้ติดกัน เอฟเฟกต์รุนแรงมากจนทำให้จุดที่ทั้งสองสีมาบรรจบกันสั่นหรือชีพจร

การผสมสี UI คอนทราสต์พร้อมกัน

สังเกตความตึงเครียดของภาพที่สีน้ำเงินและสีส้มบรรจบกัน นี่คือคอนทราสต์พร้อมกันซึ่งเป็นเอฟเฟกต์สีแบบไดนามิกที่นักออกแบบ UI สามารถใช้เพื่อประโยชน์อย่างมาก

สำหรับนักออกแบบ UI คอนทราสต์พร้อมกันอาจมีผลลัพธ์ในเชิงบวกและเชิงลบดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องเข้าใจวิธีควบคุมความแรงของปรากฏการณ์ภาพนี้

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

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

คอนทราสต์พร้อมกันในการออกแบบ UI สมัยใหม่: จานสี UI ไม่ดี

คอนทราสต์พร้อมกันไม่เหมาะสำหรับทุกการตัดสินใจออกแบบ UI โดยเฉพาะอย่างยิ่งในกรณีที่เกี่ยวข้องกับข้อความ

รูปแบบสีพื้นฐานดีที่สุด

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

แผนป้องกันการเข้าใจผิดสองแผนสำหรับการสร้างโครงร่างสี UI พื้นฐาน:

1. โครงร่างสี UI แบบอะนาล็อก

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

การออกแบบ UI มีสีที่คล้ายคลึงกัน

การสร้าง“ อารมณ์ภาพ” ในรูปแบบที่คล้ายคลึงกันทำได้ง่ายโดยการเลือกระหว่างสีโทนร้อนและสีเย็นและการทดลองด้วยความอิ่มตัว

2. โครงร่างสี UI เสริม

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

สีของการออกแบบ UI เสริม

สีแดงและสีเขียวเป็นสีเสริมและการเลือกรูปแบบที่อิ่มตัวน้อยกว่าจะผูกโครงร่างเข้าด้วยกัน

เว้ส่งผลต่อมูลค่าเสมอ

อาจฟังดูแปลก แต่สีมีค่าสีเทาที่สอดคล้องกัน นี่คือหลักฐาน:

การออกแบบ UI ทฤษฎีสี

ในภาพด้านบนเรามีช่วงของเฉดสีที่ความสว่างและความอิ่มตัว 100% แต่ดูว่าจะเกิดอะไรขึ้นเมื่อสีเหล่านี้ถูกแปลงเป็นโทนสีเทา:

เปลี่ยนสีเป็นการออกแบบ UI ระดับสีเทา

แม้ว่าสีในแถวบนสุดจะมีความสว่างและความอิ่มตัว 100% แต่ค่าระดับสีเทาที่สอดคล้องกันจะแตกต่างกันไปอย่างมาก

ตูม! ค่าสีเทาทั้งหมดจะถูกเปิดเผย เหตุใดสิ่งนี้จึงสำคัญสำหรับนักออกแบบ UI คำเดียว: ความคมชัด .

เปลี่ยนความคิดของคุณเป็นโทนสีเทาสักครู่ หากคุณต้องการสร้างคอนทราสต์คุณเคยใช้ค่าสีเทา 40% กับ 50% หรือไม่ ไม่แน่นอน แต่นี่คือสิ่งที่เสี่ยงเมื่อสีไม่อยู่ในสมการความคมชัดของสี

อย่าลืมว่าสีสันส่งผลต่อมูลค่าเสมอ

นักออกแบบ UI อิสระเต็มเวลาในสหรัฐอเมริกาต้องการ

หลักการสีที่จำเป็น 4 ประการสำหรับอินเทอร์เฟซดิจิทัล

ตอนนี้เราได้ทำให้ทฤษฎีสีง่ายขึ้นและเชื่อมโยงแนวคิดหลักกับการออกแบบ UI แล้วก็ถึงเวลาพิจารณาสีของบทบาทในอินเทอร์เฟซดิจิทัลที่เน้นมากขึ้น นี่คือหลักการสี่สีที่ต้องพิจารณาตั้งแต่ความพยายามแรกสุดของทุกโครงการออกแบบ UI

  1. ความสัมพันธ์ระหว่างข้อความและสีเป็นสิ่งสำคัญ
  2. การเข้าถึงสีไม่สามารถละเลยได้
  3. คอนทราสต์เป็นสิ่งสำคัญ แต่ไม่ใช่วิธีแก้ปัญหาด้วยดีไซน์ทั้งหมด
  4. สีจะทำงานได้ดีที่สุดเมื่อใช้ตามสัดส่วน

ความสัมพันธ์ระหว่างข้อความและสีเป็นสิ่งสำคัญ

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

รักษาความสัมพันธ์ของข้อความ / สีให้ดีโดยปฏิบัติตามคำแนะนำง่ายๆเหล่านี้:

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

UI ที่สวยงามพร้อมความคมชัดของสีที่ไม่ดี

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

การเข้าถึงสีไม่สามารถละเลยได้

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

ตัวอย่างเช่นผู้ที่มีอาการตาบอดสีอาจไม่สามารถบอกได้ว่าเมื่อใดที่ไอคอนผลิตภัณฑ์อยู่ในสถานะ 'กด' หากความแตกต่างเพียงอย่างเดียวในไอคอนคือการเปลี่ยนสี

ตัวอย่างการออกแบบการเข้าถึงสี

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

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

กวดวิชา powerpivot ทีละขั้นตอน

คอนทราสต์เป็นสิ่งสำคัญ แต่มันไม่ใช่การออกแบบทั้งหมด

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

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

สีทำงานได้ดีที่สุดเมื่อนำไปใช้ตามสัดส่วน

ลองนึกภาพแอปข่าวที่มีการตั้งค่าข้อความทุกรายการในตัวพิมพ์ใหญ่หรือไฟล์ เว็บไซต์อีคอมเมิร์ซ ออกแบบบนตารางภาพขนาด 9x9 ทั้งคู่คงจะแย่มาก!

ตัวอย่างที่ไม่ดีของลำดับชั้นการออกแบบ

เนื่องจากชื่อวันที่ผู้แต่งและข้อความเนื้อหามีขนาดตัวอักษรเท่ากันทั้งหมดประสบการณ์การอ่านจึงถูกขัดขวางและไม่มีข้อมูลแม้แต่ชิ้นเดียวที่โดดเด่น ปัญหาที่คล้ายกันนี้เกิดขึ้นเมื่อนักออกแบบ UI มีการเชื่อมต่อกับสีมากเกินไป

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

แหล่งข้อมูลสีเพื่อความก้าวหน้าอย่างต่อเนื่อง

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

เพื่อให้เชี่ยวชาญสีอย่างแท้จริงและเห็นผลกระทบอย่างเต็มที่ต่อการออกแบบ UI นักออกแบบต้องฝึกฝน โชคดีที่มีแหล่งข้อมูลมากมายที่จะช่วยในการเรียนรู้สีและสร้างทักษะอย่างต่อเนื่อง

Ctrl + ระบายสี

หากคุณเป็นนักออกแบบ UI ที่ต้องการเพิ่มความมั่นใจในสีทันทีให้เริ่มต้นด้วย ctrlpaint.com เว็บไซต์เฉพาะสำหรับการเรียนการสอนการวาดภาพดิจิทัล ภาพวาดดิจิตอล? จริงๆ?

อย่างแน่นอน Matt Kohr ศิลปินแนวความคิดมืออาชีพสอนการใช้สีดิจิทัลผ่านวิดีโอแนะนำสั้น ๆ และแบบฝึกหัดลงมือปฏิบัติ หลักสูตรนี้เรียบง่ายอย่างน่าอัศจรรย์และเน้นที่ 'การวาดภาพสิ่งที่คุณเห็น' ทั้งในโลกทางกายภาพและจินตนาการ

เริ่มต้นด้วย ห้องสมุดวิดีโอฟรี (ส่วนที่ 11) ก่อนที่จะย้ายไปยังแบบฝึกหัดที่เข้มข้นขึ้นใน ชุดเริ่มต้นสี .

บทเรียนทฤษฎีสีดิจิทัล

Matt Kohr ภาพวาดแนวคิดดิจิทัลแสดงให้เห็นถึงความเชี่ยวชาญด้านทฤษฎีสีและวิดีโอการสอนของเขานั้นสนุกและง่ายต่อการติดตาม

Josef Albers และปฏิสัมพันธ์ของแอปสี

ความเข้าใจร่วมสมัยเกี่ยวกับสัมพัทธภาพสีได้รับการสำรวจอย่างหนักและก้าวหน้าโดย การปฏิบัติ - ก่อน -ทฤษฎี แนวทางของศิลปิน / นักการศึกษา Josef Albers

Albers เสนอว่าสีเดียวสามารถมี 'หลายใบหน้า' และสนับสนุนการเล่นและการทดลองอย่างกว้างขวางในหมู่นักเรียนของเขาโดยหวังว่า 'ดวงตาจะถูกเปิด' เพื่อให้เห็นสีตามที่มีพฤติกรรมอย่างแท้จริงในโลกแห่งความเป็นจริง (ซึ่งตรงข้ามกับสีสัญลักษณ์ที่เราจินตนาการไว้ ในจิตใจของเรา).

ในปี 1963 Albers ประพันธ์ ปฏิสัมพันธ์ของสี หนังสือเรียนที่ยังคงมีอิทธิพลอย่างสูงต่อการศึกษาด้านศิลปะและการออกแบบของโลก เพื่อเป็นการเฉลิมฉลองครบรอบ 50 ปีของการตีพิมพ์หนังสือมหาวิทยาลัยเยลได้เปิดตัว แอพ iPad แบบโต้ตอบ ที่มีข้อความเต็ม แต่ยังช่วยให้ผู้ใช้สามารถเล่นและทดลองกับจานสีของ Albers ได้

แอพโครงร่างสีออกแบบ UI

วิธีที่ดีที่สุดวิธีหนึ่งในการทำงานกับสีให้ดีขึ้นคือการทดลอง แอป Interaction of Color เป็นวิธีที่ง่ายและใช้งานง่ายสำหรับนักออกแบบ UI ในการสร้างจานสีที่กำหนดเองและดูว่าสีเกี่ยวข้องกันอย่างไร

สำหรับนักออกแบบ UI ไฟล์ ปฏิสัมพันธ์ของสี แอปให้โอกาสในการสัมผัสกับแบบฝึกหัดสีอะนาล็อกในสภาพแวดล้อมดิจิทัลและดูโดยตรงว่าสัมพัทธภาพสีมีผลต่ออินเทอร์เฟซผู้ใช้อย่างไร

Andrew Loomis

ในช่วงครึ่งแรกของศตวรรษที่ 20 Andrew Loomis มีความโดดเด่น นักวาดภาพประกอบ และเป็นอาจารย์สอนที่ American Academy of Art ในชิคาโก แต่มรดกที่ยั่งยืนของเขาคือของผู้เขียน Loomis เขียนหนังสือ 6 เล่มเกี่ยวกับศิลปะเชิงพาณิชย์และการออกแบบและครอบคลุมหัวข้อต่างๆตั้งแต่การวาดรูปไปจนถึงการจัดวางผลิตภัณฑ์

UI ออกแบบสีจากภาพวาดแบบดั้งเดิม

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

ในหนังสือของเขา ภาพประกอบสร้างสรรค์ และ ตาของจิตรกร (ใช้ได้ทั้งบน archive.org ) Loomis ทิ้งไลน์ที่คงทนซึ่งยังคงเกี่ยวข้องกับการออกแบบ UI ยุคใหม่:

ความผิดพลาดที่ยิ่งใหญ่ที่สุดในเรื่องสีและสิ่งที่ทำให้ขาดความสามัคคีและความสามัคคีคือการมีสีมากเกินไปในจานสี

สองสีใด ๆ จะกลมกลืนกันเมื่อสีหนึ่งหรือทั้งสองสีมีสีอื่น ๆ

สียืมตัวเองไปทดลองมากกว่าองค์ประกอบอื่น ๆ ของความงาม

อินเทอร์เฟซของนักออกแบบคนอื่น ๆ

เมื่อบรรลุความสามารถด้านสีในระดับพื้นฐานแล้วการสร้างโทนสีจะเบ่งบานกลายเป็นสิ่งที่น่าหลงใหล ทุกอินเทอร์เฟซที่พบจะกลายเป็นโอกาสสำหรับการเรียนรู้และการวิพากษ์วิจารณ์และการสังเกตมีมากมาย

นี่เป็นขั้นตอนของการพัฒนาของนักออกแบบ UI เมื่อการอ้างอิงผลงานของนักออกแบบคนอื่น ๆ กลายเป็นการเพิ่มขีดความสามารถ ยังไง? เนื่องจากการอ้างอิงจะเปลี่ยนจากปลายทางไปสู่การเดินทางจากจุดสิ้นสุดไปจนถึงแรงบันดาลใจ

ตัวอย่างโครงร่างสี UI

กำลังมองหาแรงบันดาลใจสีอินเทอร์เฟซ? ลองใช้ไฟล์ รางวัล Webby เว็บไซต์. เต็มไปด้วยตัวอย่างที่น่าทึ่งซึ่งจัดเป็นหมวดหมู่เฉพาะอุตสาหกรรม

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

สีมีความสำคัญเกินกว่าที่จะละเลย

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

สิ่งสำคัญคือนักออกแบบ UI ต้องมีความสามารถในการสร้างและใช้โทนสีดั้งเดิม การอ้างอิงผลงานของนักออกแบบและผลิตภัณฑ์ดิจิทัลคนอื่น ๆ ถือเป็นแนวทางปฏิบัติที่คุ้มค่า แต่จะมีข้อ จำกัด เมื่อเป็นวิธีเดียวในการสำรวจสีที่ดำเนินการระหว่างขั้นตอนการออกแบบ มีคุณค่ามหาศาลในการจับคู่สีที่เห็นในโลกแห่งความจริงหรือสายตาของจิตใจ

หากคุณเป็นนักออกแบบที่มีปัญหาในการใช้สีอย่างชำนาญหรือเคยคิดว่า“ ฉันไม่มีความสามารถด้านสีจริงๆ” อย่าท้อแท้ การออกแบบด้วยสีไม่ใช่รูปแบบของเวทมนตร์ที่สร้างสรรค์หรือการให้ของขวัญแบบพิเศษ เป็นวินัยในทางปฏิบัติที่เกิดจากเทคนิคง่ายๆที่สามารถทำซ้ำและปรับปรุงได้

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

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

  1. บทบาทของสีใน UX
  2. การสร้าง UI Style Guide สำหรับ Better UX
  3. UX และความสำคัญของการเข้าถึงเว็บ
  4. ศิลปะกับการออกแบบ - การถกเถียงที่เหนือกาลเวลา
  5. การออกแบบสำหรับสภาพแวดล้อมแบบโต้ตอบและพื้นที่อัจฉริยะ

ทำความเข้าใจพื้นฐาน

จานสีคืออะไร?

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

โทนสีคืออะไร?

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

อินเทอร์เฟซผู้ใช้มีฟังก์ชันอะไรบ้าง?

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

ทฤษฎีสีสำหรับนักออกแบบ - หลักสูตร Crash (พร้อม Infographic)

การออกแบบ Ui

ทฤษฎีสีสำหรับนักออกแบบ - หลักสูตร Crash (พร้อม Infographic)
คู่มือการแฮชที่สม่ำเสมอ

คู่มือการแฮชที่สม่ำเสมอ

วิทยาศาสตร์ข้อมูลและฐานข้อมูล

โพสต์ยอดนิยม
Ractive.js - เว็บแอพที่ทำได้ง่าย
Ractive.js - เว็บแอพที่ทำได้ง่าย
การสอน Mirror API: Google Glass สำหรับนักพัฒนาเว็บ
การสอน Mirror API: Google Glass สำหรับนักพัฒนาเว็บ
ตลาดล้านดอลลาร์ดีกว่าตลาดพันล้านดอลลาร์หรือไม่?
ตลาดล้านดอลลาร์ดีกว่าตลาดพันล้านดอลลาร์หรือไม่?
ทำไมฉันต้องใช้ Node.js การสอนเป็นกรณี ๆ ไป
ทำไมฉันต้องใช้ Node.js การสอนเป็นกรณี ๆ ไป
รองประธานองค์กร
รองประธานองค์กร
 
สงครามเย็นแห่งเทคโนโลยี: ยังคงอยู่ที่นี่และยังคงถูกใช้
สงครามเย็นแห่งเทคโนโลยี: ยังคงอยู่ที่นี่และยังคงถูกใช้
ปรับขนาดด้วยความเร็ว: อธิบายเครือข่ายสายฟ้าของ Bitcoin
ปรับขนาดด้วยความเร็ว: อธิบายเครือข่ายสายฟ้าของ Bitcoin
ส่วนประกอบของปฏิกิริยาที่มีประสิทธิภาพ: คำแนะนำในการเพิ่มประสิทธิภาพการตอบสนอง
ส่วนประกอบของปฏิกิริยาที่มีประสิทธิภาพ: คำแนะนำในการเพิ่มประสิทธิภาพการตอบสนอง
คำแนะนำสำหรับนักพัฒนา Android เกี่ยวกับรูปแบบการเรียกดูตัวอย่างข้อมูล
คำแนะนำสำหรับนักพัฒนา Android เกี่ยวกับรูปแบบการเรียกดูตัวอย่างข้อมูล
การรับรองและการประกันการรับประกัน: เครื่องมือการควบรวมกิจการที่ผู้ขายทุกคนควรทราบ
การรับรองและการประกันการรับประกัน: เครื่องมือการควบรวมกิจการที่ผู้ขายทุกคนควรทราบ
โพสต์ยอดนิยม
  • วิธีการเขียนโปรแกรม c++
  • ราสเบอร์รี่ pi 3 เซิร์ฟเวอร์ลินุกซ์
  • c++ จะเริ่มต้นที่ไหน
  • html5 index.html หลังจาก deviceread 'ไม่ได้กำหนดอุปกรณ์ผิดพลาด'
  • c corp กับ s corp ต่างกันอย่างไร
  • pmo ในการจัดการโครงการคืออะไร
หมวดหมู่
  • การทำกำไรและประสิทธิภาพ
  • การออกแบบ Ux
  • เทคโนโลยี
  • การออกแบบตราสินค้า
  • © 2022 | สงวนลิขสิทธิ์

    portaldacalheta.pt