ระบบออกแบบการ์ด
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ทำความเข้าใจองค์ประกอบพื้นฐานของไทล์ ใช้เทมเพลต เลย์เอาต์ และคอมโพเนนต์ของการ์ดเพื่อออกแบบและสร้างการ์ดที่ไม่เหมือนใครสำหรับแอป
องค์ประกอบพื้นฐาน
เปอร์เซ็นต์ระยะห่างจากขอบ
ขอบบน ล่าง และด้านข้างทั้งหมดใช้เปอร์เซ็นต์แทนจำนวนอัตรากำไรคงที่ เพื่อปรับสัดส่วนให้เหมาะสม
พื้นที่การออกแบบ
เทมเพลตชิ้นส่วนแต่ละประเภทมีกฎของตนเองภายในพื้นที่เนื้อหาหลัก โปรดดูคำแนะนำการจัดวางสำหรับข้อมูลเพิ่มเติม
ชิปด้านล่างแบบกะทัดรัด
สำคัญสำหรับการเปิดใช้การดำเนินการรองบนการ์ด วางด้านบนด้านล่างให้สม่ำเสมอ 6.3%
ชิปด้านล่างกะทัดรัด
ภายในปุ่ม ให้ใช้คำสั้นๆ แต่เฉพาะเจาะจงสำหรับการกระทำหรือปลายทางที่เจาะจง การแปลข้อความกระตุ้นการตัดสินใจนี้ต้องรองรับจำนวนอักขระสูงสุด คุณจะใช้ "เพิ่มเติม" เป็นค่าเริ่มต้นหรือค่าเริ่มต้นได้ เป็นข้อความคำกระตุ้นให้ดำเนินการ
ตำแหน่งโฆษณา
- ขอบ: 2.1% จากด้านล่าง
- ระยะห่างจากขอบภายใน: ด้านบนและต่ำกว่า 8 dp
ข้อกำหนดของปุ่ม
- ระยะห่างจากขอบภายใน: 12 dp ทั้ง 2 ด้าน
ระยะห่างจากขอบ/ขอบด้านใน
จำนวนอักขระสูงสุดที่แนะนำ < 225 dp
- จำนวนบรรทัดสูงสุด: 1
- จำนวนอักขระสูงสุด: 8
- จำนวนอักขระสูงสุดที่แนะนำ: 6 ตัว
- การตัดข้อความ: ไม่
ขีดจำกัดของเครื่องมือที่แนะนำ > 225 dp
- จำนวนบรรทัดสูงสุด: 1
- จำนวนอักขระสูงสุด: 9
- จำนวนอักขระสูงสุดที่แนะนำ: 7
- การตัดข้อความ: ไม่
สี
ใช้ธีมของแบรนด์
มีสีของแบรนด์หลายสีให้เลือก นอกจากนี้ยังสามารถปรับแต่งและเปลี่ยนให้เข้ากับรูปลักษณ์ของแอป
ใช้เครื่องมือและคำแนะนำของธีมวัสดุเพื่อสร้างสีที่มีระดับคอนทราสต์ของสีที่เพียงพอ โดยใช้สีหลักเป็นสีแหล่งที่มา ใช้ชุดสีที่สร้างขึ้นเพื่อแทนที่สีหลัก สีหลัก สีหลัก สีพื้นผิว และสีบนพื้นผิวในพาเล็ตใน Figma เพื่อกำหนดธีมให้ชิ้นส่วนอย่างถูกต้อง สีอื่นๆ ทั้งหมดไม่สามารถปรับแต่งได้เพื่อความสอดคล้องกันในชิ้นส่วนต่างๆ
เครื่องมือสร้างธีม Material อื่นๆ
การใช้สี
ตั้งค่าสีพื้นหลังเป็นสีดำเสมอ
อย่าตั้งค่าพื้นหลังเป็นรูปภาพที่ไม่มีขอบหรือสีบล็อก
การพิมพ์
Roboto เป็นแบบอักษรหลักที่ใช้ใน Wear OS ขอแนะนำให้ใช้เนื้อหา 2 เป็นค่าเริ่มต้นและใช้ขนาดแบบอักษรที่เล็กที่สุด ส่วน Display 2 เป็นรูปแบบที่ใหญ่ที่สุดที่พร้อมใช้งานสําหรับการ์ด
ป้ายกำกับหลัก
ข้อความของป้ายกำกับหลักจะเป็น 16.64% จากขอบด้านบนเสมอและมีระยะห่างจากขอบภายใน 6.3% สีและแบบอักษรจะมีความสม่ำเสมอตลอดทั้งองค์ประกอบ
ระยะห่างจากขอบภายใน
ระยะขอบด้านบน: 16.64%
ระยะขอบด้านข้าง: 6.3%
สี
ตัวแปรบนพื้นหลัง (สีเทา 300)
ประเภท
Tiles3P (Roboto) / ปุ่ม - 15S ตัวหนา
ดูข้อมูลเพิ่มเติมเกี่ยวกับแบบอักษร น้ำหนัก และการปรับขนาดได้ที่การพิมพ์
ส่วนประกอบ
การสร้างการ์ดของแอปมีคอมโพเนนต์หลายรายการ องค์ประกอบเหล่านี้สอดคล้องกับดีไซน์ Material
ตัวเลือก: ปุ่มหรือปุ่มสลับ
ขนาด: มาตรฐาน, XS, S, L
ประเภท: เติมสี เติมโทนสี และรูปภาพ
ระบุตัวเลือกสูงสุด 7 รายการ
ปุ่มข้อความ
ตัวเลือก: ปุ่มหรือปุ่มเปิด/ปิด
ขนาด: มาตรฐาน, XS, S, L
ประเภท: เติมสีและโทนสี
ระบุตัวเลือกสูงสุด 7 รายการ
ชิปมาตรฐาน
ตัวเลือก: ไอคอน ป้ายกำกับรอง และการจัดข้อความ
ระบุตัวเลือกสูงสุด 2 รายการ
ชิปชื่อ (เฉพาะคำสั่งหลักเท่านั้น)
ข้อความที่จัดกึ่งกลาง
สร้าง CTA เดียวที่โดดเด่น
ชิปแบบกะทัดรัด
ประเภท: เติมสีและเติมโทน
ตัวเลือก: ไอคอนหรือไม่มีไอคอน
ใช้ในช่องปุ่มด้านล่าง
ตัวบอกสถานะความคืบหน้า
ประเภท: ความกว้างของเส้นโครงร่างที่ปรับแต่งได้
(ขนาดเริ่มต้น: 8 dp และ 5 dp)
ตัวเลือก: มีช่องว่างที่ด้านล่างหรือแบบเต็ม
ระบุความคืบหน้าและงานที่เสร็จสมบูรณ์
ชุดออกแบบ Figma
ดาวน์โหลดชุดการออกแบบการ์ดใน Wear OS เพื่อเริ่มใช้เลย์เอาต์การออกแบบการ์ดที่มีคอมโพเนนต์ในตัว ตัวเลือก และคำแนะนำเพื่อสร้างเลย์เอาต์แบบต่างๆ ที่เหมาะกับความต้องการ พร้อมกับทำตามหลักเกณฑ์ในเทมเพลต ProtoLayout
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# Tiles design system\n\nUnderstand tile fundamental elements. Use tile templates, layouts, and components to design and build unique tiles for your apps.\n\n**Fundamental elements**\n------------------------\n\n**Percentage padding**\n\nTop, bottom, and side margins all use percentages, rather than fixed margin amounts, to achieve proportional scaling. \n\n**Design areas**\n\nEach type of tile template has its own rules within the primary content area. Refer to the [layout guidance](/design/ui/wear/guides/surfaces/tiles-layouts) for more information. \n\n**Bottom compact chip**\n\nImportant for enabling secondary actions on the tile. Consistently placed 6.3% above the bottom.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nBottom compact chip\n-------------------\n\nWithin the button, use a word that's short but specific to a particular action or destination. The translation of this call-to-action text must accommodate the character count limits. As a default or fallback value, you can use \"More\" as the call-to-action text. \n\n**Placement**\n\n- Margin: 2.1% from the bottom\n- Internal padding: 8 dp above and below \n\n**Button spec**\n\n- Internal padding: 12 dp on both sides \n\n**Side internal padding/margins**\n\n- 16.64%\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Recommended character limit \\\u003c 225 dp**\n\n- Max lines: 1\n- Max character limit: 8\n- Recommended character limit: 6\n- Truncation: No \n**Recommended c** **haracter limits \\\u003e 225 dp**\n\n- Max lines: 1\n- Max character limit: 9\n- Recommended character limit: 7\n- Truncation: No\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nColor\n-----\n\n### **Apply your brand's theme**\n\nThere are several brand colors to choose from. They can also be customized and changed to fit your app's look and feel. \n\nUse the [Material theme tools and guidance](https://m3.material.io/styles/color/system/overview) to generate colors that have adequate color contrast levels, using your primary color as a source color Use the generated palette to replace the primary, primary-variant, on-primary, surface, and on-surface colors in your palette in Figma to theme your tile correctly. All other colors are not customizable to create consistency across tiles.\n\n**Other Material theme building tools:**\n\n- [Material Theme Builder Web](https://material-foundation.github.io/material-theme-builder/)\n- [Material Theme Builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder)\n\n### **Color application**\n\nAlways set the background color to black. \ncheck_circle\n\n### Do\n\nDon't set the background as a full bleed image or block color. \ncancel\n\n### Don't\n\nTypography\n----------\n\nRoboto is the primary font used in Wear OS. Body 2 is recommended as the default and the smallest font size, while Display 2 is the largest type style that's available for tiles.\n\n### **Primary label**\n\nPrimary label text is always 16.64% from the top edge and have an internal padding of 6.3%. Color and font also remain consistent throughout. \n\n**Internal padding**\n\nTop margins: 16.64% \nSide margin: 6.3% \n\n**Color**\n\nOn-Background-Variant (Gray 300) \n\n**Type**\n\nTiles3P (Roboto) / Button - 15S Bold\n\nFor more information about font, weight, and sizing, see [Typography](/design/ui/wear/guides/styles/typography).\n\n**Components**\n--------------\n\nThere are several components available to build your app's tiles. These components are aligned with Material Design.\n\n### Icon button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled, tonal-filled, and image\n\nList up to 7 options.\n\n### Text button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled and tonal-filled\n\nList up to 7 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Standard chip\n\nOptions: Icon, secondary label, and text alignment\n\nList up to 2 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Title chip (primary-fill only)\n\nCenter-aligned text \n\n\nCreate a single, prominent CTA.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Compact chip\n\nTypes: Filled and tonal-filled \nOptions: Icon or no icon \n\nUse in the bottom button slot.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Progress indicator\n\nTypes: Customizable stroke width \n(Default sizes: 8 dp and 5 dp) \nOptions: Gap at the bottom or full\n\nIndicate progress and task completion.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nFigma design kit\n----------------\n\n[Download the Tiles on Wear OS design kit](/design/ui/wear/guides/foundations/download#tiles-design-kit) to start using the tile design layouts with built-in components, options, and recommendations to create different layouts that suit your needs, while following the guidelines in the ProtoLayout templates."]]
