พิกโตแกรม

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

Hero Image

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



ประเภท

พิกโตแกรมของ Spaceship มีอยู่สองประเภท: regular และ comp โดยประเภท comp จะผสานพิกโตแกรม regular เข้ากับไอคอนจาก Iconography Library ของ Spaceship ทำให้เราสามารถสื่อแนวคิดที่ซับซ้อนและเฉพาะเจาะจงมากขึ้นได้










เวอร์ชัน

พิกโตแกรมทั้งหมดของ Spaceship มีให้ใช้งานสองเวอร์ชัน: filled (หลัก) และ outlined (รอง) ควรใช้เวอร์ชัน outlined เฉพาะเมื่อพิกโตแกรมนั้นต้องการน้ำหนักทางสายตาน้อยกว่าพิกโตแกรม ข้อความ หรือองค์ประกอบ UI ที่อยู่ใกล้เคียง วิธีนี้ช่วยสร้างลำดับชั้นทางสายตาในเลย์เอาต์ที่ซับซ้อน










โครงสร้าง

พิกโตแกรมสร้างขึ้นจากชุดกฎ ตั้งแต่กริดพื้นฐานไปจนถึงพารามิเตอร์ของไล่ระดับสีและเส้นขีด เพื่อให้ได้ผลลัพธ์ที่สอดคล้องและสมดุล










ขนาด

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










สี

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









สีเริ่มต้น

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






สีแบรนด์

SPS Blue, SPS Dark Gray หรือสีขาว อาจใช้แทนสีเริ่มต้นได้เช่นกัน เมื่อต้องการผลลัพธ์ด้านภาพที่โดดเด่นยิ่งขึ้น หรือเพื่อเสริมอัตลักษณ์ของ Spaceship ดูรายละเอียดเพิ่มเติมได้ที่หน้าสี






สีผลิตภัณฑ์

ควรใช้สีหลักของผลิตภัณฑ์กับพิกโตแกรมในบริบทที่เฉพาะเจาะจงกับผลิตภัณฑ์นั้น ๆ (หน้าผลิตภัณฑ์ การ์ดผลิตภัณฑ์ ฯลฯ) สำหรับผลิตภัณฑ์ทั้งหมดทั้งในปัจจุบันและที่จะเปิดตัวในอนาคต






สีการแจ้งเตือน

ควรใช้สีเหล่านี้เพื่อเน้นย้ำข้อความแจ้งเตือน เวอร์ชัน comp ควรใช้เฉพาะในข้อความระบบทั่วไปเท่านั้น และไม่ควรใช้ในสถานะคำเตือน







แนวทาง

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



อย่าปล่อยให้องค์ประกอบสำคัญของพิกโตแกรม regular ไปอยู่ที่มุมล่างขวา

อย่าใช้ไล่ระดับสีที่ซับซ้อนหรือหลายสีในเวอร์ชันแบบเติมสี


อย่าผสมองค์ประกอบแบบเติมสีกับแบบเส้นขอบในประเภท comp

อย่าใช้สีอื่นในเวอร์ชันแบบเติมสีนอกเหนือจากสีที่ระบุไว้ข้างต้น

อย่าใช้สีใด ๆ กับเวอร์ชันแบบเส้นขอบนอกเหนือจากสีเริ่มต้น

อย่ารวมสีเริ่มต้นเข้ากับสีใด ๆ นอกเหนือจากสีหลักของแบรนด์ Spaceship และสีการแจ้งเตือน