แถบสี '500' ของ Google คืออะไร

ฉันได้อ่านข้อมูลเกี่ยวกับการออกแบบวัสดุของ Google และเมื่อฉันอ่านสไตล์พวกเขายังคงพูดถึงสีหลัก 500 สี (เช่นเดียวกับตัวเลขอื่น ๆ ที่มีค่าตั้งแต่ 50 ซึ่งเกือบขาวถึง 900) แต่สิ่งที่ทำ นี่หมายความว่า?

ฉันชอบที่จะลองใช้มือของฉันในการสร้าง swatches สี "วัสดุแรงบันดาลใจ" ของฉันเอง แต่เนื่องจากการตั้งชื่อสีของพวกเขาทำให้ฉันสับสนฉันไม่แน่ใจว่าจะเริ่มตรงไหน ฉันลอง googling เพื่อหาคำตอบ (ซึ่งรู้สึกค่อนข้างน่าขันเล็กน้อย) แต่จนถึงตอนนี้ฉันยังไม่พบคำตอบที่แน่นอน ถ้าฉันต้องเดาดูเหมือนว่ามันเกี่ยวข้องกับความยาวคลื่นของสีใช่ไหม

นอกจากนี้ยังมีการกล่าวถึงสี A100 ถึง A700 ...

ฉันสงสัยว่าตัวเอง

ครั้งแรกที่ "500" ดูเหมือนจะไม่ได้ระบุว่ามีกี่สี แต่ระบบหมายเลขแปลก ๆ ที่พวกเขาใช้ 500 คือฐาน 400 เบากว่าฐาน 600 มืดกว่า มันค่อนข้างคล้ายกับวิธีที่น้ำหนักตัวอักษรถูกกำหนดหมายเลข ( ข้อมูล ) ดังนั้นอาจมีบางสิ่งที่เกี่ยวข้องกับมัน

ฉันพบว่าบางส่วนของตัวเลขที่น้อยกว่า 500 นั้นพบได้โดยการทำให้สีซีดจางลงในโหมดผสมสีขาว ("หน้าจอ" ใน Photoshop) หรือสีดำ ("คูณ")

• 900: 59% (ปิด)
• 600: 10% (เกือบแน่นอน)
• 500: ฐาน
• 400: 15% (แน่นอน)
• 300: 30% (แน่นอน)
• 200: 50% (แน่นอน)
• 100: 70% (ปิด)
• 50: 88% (แน่นอน)

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

ฉันจะออกจากที่นี่เพราะมันเป็นข้อมูลใหม่ในหัวข้อ

https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4

เผยแพร่เมื่อ 28 พฤษภาคม 2558

สนิมเล็กน้อยในทฤษฎีสีของคุณ? การออกแบบวัสดุทำให้สีง่ายขึ้น ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับสีและการออกแบบวัสดุที่ www.google.com/design

การทางพิเศษแห่งประเทศไทย: สีหลัก (500) เป็นสีที่ Google เลือกเป็น "สีหลัก" (หรือสี) ที่คุณใช้ในการออกแบบของคุณ คุณเริ่มต้นด้วย 500 หลักจากนั้นปรับขนาดจากแสงเป็นมืด สีเหล่านี้ใช้กับองค์ประกอบต่าง ๆ ใน UI

500s อธิบายชุดรูปแบบที่โดดเด่นในผลิตภัณฑ์ (และเหมาะสำหรับแถบเครื่องมือ) จากนั้นมีขนาดสูงถึง 700s สำหรับแถบสถานะหรือลงไปที่ 300 สำหรับข้อมูลทุติยภูมิสี A เป็นสีที่เน้นการเน้นมากขึ้น สิ่งเหล่านี้เหมาะสำหรับการเน้นปุ่มการกระทำหลักปุ่มมาตรฐานสวิตช์และตัวเลื่อน

สิ่งที่น่าสนใจคือข้อมูลในวิดีโอนี้ดูเหมือนจะขัดแย้งหรืออย่างน้อยก็ไม่ได้อธิบายอย่างชัดเจนข้อมูลที่ Google ให้ไว้ในหน้าจานสีที่กล่าวถึงข้างต้น ( http://www.google.com/design/spec/style/color .html # color-color-palette )

ในหน้าจานสีพวกเขาพูดว่า "Google แนะนำให้ใช้สี 500 สีเป็นสีหลักในแอปของคุณและสีอื่น ๆ เป็นสีที่เน้นเสียง " ในวิดีโอที่พวกเขาพูดว่า "สี A คือสีที่เน้นเสียง ... "

ได้รับความแตกต่างที่ลึกซึ้ง แต่ถ้า Google กำลังจะพัฒนาคู่มือสไตล์พวกเขาควรจะสอดคล้องกับการใช้คำว่า " เน้นเสียง "

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

สามารถอ่านคู่มือทั้งหมดได้ที่นี่ - http://www.google.com/design/spec/material-design/introduction.html#

โดยเฉพาะหน้านี้ทำให้ทุกสีที่พวกเขาชื่นชอบสามารถดาวน์โหลดได้ - http://www.google.com/design/spec/style/color.html#color-color-pal-

นี่คือคำตอบสำหรับคำถามของคุณ .. ลองดูวิดีโอนี้

500s เป็นสีหลักที่สมบูรณ์แบบที่อธิบายถึงรูปแบบที่โดดเด่นในผลิตภัณฑ์ของคุณและเป็นที่ดีสำหรับแถบเครื่องมือ

700sใช้สำหรับแถบสถานะ

และ300sใช้สำหรับข้อมูลรอง

ดังนั้นโดยทั่วไปตัวเลขเหล่านั้นแสดงถึงเฉดสีและสีอ่อนของสีหลักที่กำหนดไว้ล่วงหน้าสำหรับส่วน / ส่วนเฉพาะของการออกแบบ

ในความคิดของฉันอนุสัญญาการตั้งชื่อจะขึ้นอยู่กับการประชุมการตั้งชื่อน้ำหนักเว็บ:

• 500: ฐาน
• <500: ทินเนอร์ / เบา
• > 500: หนา / เข้มขึ้น

วิธีที่มีประโยชน์และมีเหตุผลในการตั้งชื่อบางอย่างที่มีพื้นฐานและรูปแบบต่าง ๆ

ลิงค์อ้างอิง: ลิงค์ไปยังหน้า GitHub ของฟอนต์ Inter

ตัวอย่างที่นี่เป็นภาพหน้าจอของตัวอักษร "Inter" ของ Mozilla ที่ใช้การตั้งชื่อตัวอักษรน้ำหนักดังกล่าว แต่ในกรณีของพวกเขาน้ำหนักปกติ / พื้นฐานจะมีหมายเลขเป็น 400 ตัวอักษรจำนวนมากใช้จริง ๆ ว่า 400 เป็น "ปกติ" หัวข้ออื่น