คู่มือสัญลักษณ์วัสดุ

สัญลักษณ์วัสดุคืออะไร

สัญลักษณ์ Material เป็นไอคอนใหม่ล่าสุดของเรา ซึ่งรวมสัญลักษณ์กว่า 2,500 รูปไว้ในไฟล์แบบอักษรเดียวและมีรูปแบบการออกแบบที่หลากหลาย สัญลักษณ์มี 3 รูปแบบและแกนแบบอักษรที่ปรับเปลี่ยนได้ 4 แกน (เติม น้ำหนัก เกรด และขนาดออปติคัล) ดูสัญลักษณ์วัสดุทั้งหมดได้ในไลบรารีสัญลักษณ์วัสดุ

FILL แกน

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

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

wght แกน

น้ำหนักจะกำหนดน้ำหนักเส้นโครงร่างของสัญลักษณ์ โดยมีช่วงน้ำหนักระหว่างบาง (100) ถึงหนา (700) น้ำหนักอาจส่งผลต่อขนาดโดยรวมของสัญลักษณ์ได้ด้วย

GRAD แกน

การแสดงภาพแกนคะแนน

น้ำหนักและเกรดมีผลต่อความหนาของสัญลักษณ์ การปรับเปลี่ยนให้คะแนนจะละเอียดกว่าการปรับน้ำหนัก และมีผลกระทบเล็กน้อยต่อขนาดของสัญลักษณ์

นอกจากนี้ยังมีคะแนนในแบบอักษรข้อความบางรายการอีกด้วย คุณสามารถจับคู่ระดับเกรดระหว่างข้อความ กับสัญลักษณ์เพื่อสร้างเอฟเฟ็กต์ภาพที่กลมกลืนกัน เช่น ถ้าแบบอักษรข้อความมีค่าระดับ -25 สัญลักษณ์จะจับคู่กับค่าที่เหมาะสมได้ เช่น -25

คุณจะใช้คะแนนสำหรับความต้องการที่แตกต่างกันได้ ดังนี้

เน้นต่ำ (เช่น -25): หากต้องการลดแสงสะท้อนสำหรับสัญลักษณ์ของแสงบนพื้นหลังสีเข้ม ให้ใช้ระดับต่ำ

เน้นสูง (เช่น 200 คะแนน): หากต้องการไฮไลต์สัญลักษณ์ ให้เพิ่มคะแนนเป็นบวก

opsz แกน

ขนาดออปติคัลมีตั้งแต่ 20dp ถึง 48dp

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

การรับสัญลักษณ์วัสดุ

Material Symbols มีให้บริการในหลายรูปแบบและเหมาะสำหรับโครงการและแพลตฟอร์มประเภทต่างๆ ทั้งสำหรับนักพัฒนาในแอปและสำหรับนักออกแบบในการจำลองหรือต้นแบบ

การอนุญาตให้ใช้สิทธิ

สัญลักษณ์ Material มีให้ใช้งานภายใต้ใบอนุญาตของ Apache เวอร์ชัน 2.0

เรียกดูและดาวน์โหลดแต่ละไอคอน

ชุดสัญลักษณ์ Material ทั้งหมดมีอยู่ในไลบรารีสัญลักษณ์วัสดุในรูปแบบ SVG หรือ PNG ซึ่งเหมาะสำหรับเว็บ, Android และ iOS หรือเครื่องมือสำหรับนักออกแบบ

ที่เก็บ Git

ที่เก็บ Git มีชุดสัญลักษณ์วัสดุในรูปแบบ SVG

$ git clone https://github.com/google/material-design-icons

การใช้สัญลักษณ์วัสดุ

ใช้ในเว็บ

แบบอักษรของสัญลักษณ์ Material เป็นวิธีที่ง่ายที่สุดในการใส่สัญลักษณ์ Material ไว้ในโปรเจ็กต์บนเว็บ

ไอคอนต่างๆ มีการจัดแพ็กเกจเป็นแบบอักษรเดียวเพื่อให้นักพัฒนาเว็บรวมไอคอนเหล่านี้เข้าด้วยกันได้ง่ายๆ โดยใช้โค้ดเพียงไม่กี่บรรทัด

แบบอักษรแบบคงที่ที่ใช้ Google Fonts

วิธีที่ง่ายที่สุดในการตั้งค่าแบบอักษรของไอคอนเพื่อใช้ในหน้าเว็บต่างๆ คือการทำผ่าน Google Fonts รวม HTML บรรทัดเดียวนี้

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

ข้อมูลโค้ดด้านบนประกอบด้วยการกำหนดค่าเริ่มต้นสำหรับแต่ละแกน มีน้ำหนัก ที่ 400 ขนาดออปติคัล ที่ 48 เกรด ที่ 0 และ เติม (และ 0 ด้วยเช่นกัน)

ใช้ Fonts CSS API เพื่อกำหนดค่าแกนต่างๆ โปรดดูตัวอย่างต่อไปนี้

แบบอักษรที่ปรับแต่งโดยใช้ Google Fonts

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

หรือแม้แต่ทำให้เป็นภาพเคลื่อนไหว

การโฮสต์แบบอักษรด้วยตนเอง

โฮสต์แบบอักษรของไอคอนไว้ในตำแหน่งที่คุณควบคุม เพื่อตัดสินใจว่าจะอัปเดตเนื้อหาเมื่อใด ตัวอย่างเช่น หาก URL คือ https://example.com/material-symbols.woff ให้เพิ่มกฎ CSS ต่อไปนี้

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

หากต้องการแสดงแบบอักษรอย่างถูกต้อง ให้ประกาศกฎ CSS สำหรับการแสดงผลไอคอน ปกติแล้วกฎเหล่านี้จะทำหน้าที่เป็นส่วนหนึ่งของสไตล์ชีต Google Fonts API แต่คุณจะต้องใส่กฎเหล่านี้เองในโปรเจ็กต์ของคุณเมื่อโฮสต์ด้วยตนเอง

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

การใช้ไอคอนใน HTML

ตัวอย่างด้านบนใช้ฟีเจอร์การพิมพ์ที่เรียกว่า ligatures ซึ่งช่วยให้แสดงรูปอักขระไอคอนได้ง่ายๆ โดยใช้ชื่อข้อความ เว็บเบราว์เซอร์จะแทนที่การรวมข้อความด้วยเวกเตอร์ไอคอนโดยอัตโนมัติ และให้โค้ดที่อ่านง่ายกว่าการอ้างอิงอักขระที่เป็นตัวเลขที่เทียบเท่ากัน ตัวอย่างเช่น ใน HTML คุณจะมี arrow_forward เพื่อแสดงเป็นไอคอน แทนที่จะเป็น &#xE5C8; สำหรับไอคอนอื่นๆ ให้ใช้ตัวพิมพ์เล็ก/ใหญ่ของชื่อไอคอน (เช่น แทนที่ช่องว่างด้วยขีดล่าง)

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

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

ค้นหาทั้งชื่อไอคอนและจุดโค้ดในไลบรารีสัญลักษณ์สื่อโดยเลือกไอคอนใดก็ได้แล้วเปิดแผงแบบอักษรของไอคอน แบบอักษรของไอคอนแต่ละแบบจะมีดัชนี Codepoints ในที่เก็บ Git ของ Google Fonts ที่แสดงชื่อและรหัสอักขระครบชุด

การจัดรูปแบบไอคอนในดีไซน์ Material

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

ใช้ใน Android

ในไลบรารีสัญลักษณ์วัสดุ ไอคอนทั้งหมดจะอยู่ในรูปแบบ Vector Drawable ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ Android Vector Asset Studio

ใช้ใน iOS

ไอคอนดังกล่าวยังมีให้ใช้ในรูปแบบ Apple Symbols ด้วย หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสัญลักษณ์เหล่านี้ โปรดดูภาพรวมสัญลักษณ์ของ Apple อย่างเป็นทางการและคำแนะนำการใช้งาน

ใช้ใน Flutter

และมีแผนรองรับ Flutter สำหรับสัญลักษณ์ Material โปรดติดตามการอัปเดต