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

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

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

FILL แกน

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

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

wght แกน

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

GRAD แกน

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

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

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

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

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

opsz แกน

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

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

การรับสัญลักษณ์ Material

สัญลักษณ์วัสดุมีในหลายรูปแบบและเหมาะสำหรับ ประเภทโปรเจ็กต์และแพลตฟอร์ม ทั้งสำหรับนักพัฒนาซอฟต์แวร์ในแอป ของนักออกแบบในแบบจำลอง หรือต้นแบบได้

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

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

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

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

ที่เก็บ Git

ที่เก็บ Git มีชุดสัญลักษณ์ Material ทั้งหมดในรูปแบบ 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');
}

หมายเหตุ: เราอาจใช้แบบอักษรหลายรูปแบบเพื่อมอบประสบการณ์ที่ดีที่สุดให้กับผู้ใช้ทุกคน ซึ่ง Google Fonts API มีให้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ "การโฮสต์ด้วยตนเอง" ในวันที่ ความรู้เกี่ยวกับ Google Fonts

หากต้องการแสดงแบบอักษรอย่างถูกต้อง ให้ประกาศกฎ 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

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

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

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

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

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

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

ใช้ใน Android

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

ใช้ใน iOS

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

ใช้ใน Flutter

การรองรับ Flutter สําหรับสัญลักษณ์ Material ตามแผนที่วางไว้ โปรดติดตามข้อมูลอัปเดต