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

การออกแบบบนพื้นสีดํา
การออกแบบบนพื้นหลังสีดําสําคัญอย่างยิ่งสําหรับ Wear OS เนื่องด้วยเหตุผลหลัก 2 ข้อต่อไปนี้
- ประสิทธิภาพแบตเตอรี่: พิกเซลแต่ละพิกเซลที่สว่างบนหน้าจอจะใช้พลังงาน การใช้พื้นหลังสีดำจะลดจำนวนพิกเซลที่ทำงานอยู่ ซึ่งจะช่วยยืดอายุการใช้งานแบตเตอรี่
- รูปลักษณ์ที่ไร้รอยต่อ: พื้นหลังสีดําช่วยทำให้ขอบนาฬิกาดูเล็กลง สร้างภาพลวงตาให้ดูเหมือนเป็นพื้นผิวที่ต่อเนื่องไปจนถึงขอบของอุปกรณ์ การมีองค์ประกอบ UI ภายในพื้นที่นี้จะช่วยเพิ่มผลลัพธ์นี้ให้ดียิ่งขึ้น
check_circle
จัดการ
ตั้งค่าสีพื้นหลังเป็นสีดําเสมอ
cancel
อย่าทำเช่นนี้
อย่าตั้งค่าพื้นหลังเป็นภาพแบบไม่มีขอบหรือสีบล็อก
รวมเฉพาะองค์ประกอบที่จำเป็น
เมื่อเลือกใช้ (เช่น การใช้ ProtoLayout Material3 PrimaryLayout) Wear OS จะแสดงไอคอนแอปถาวรโดยอัตโนมัติ ซึ่งจะแสดงขึ้นโดยอัตโนมัติเมื่อผู้ใช้เลื่อนดูภาพสไลด์ของการ์ด ไม่ควรออกแบบและเพิ่มไอคอนแอปเป็นส่วนหนึ่งของการ์ด
ตรวจสอบว่าไอคอนแอปที่ระบุเป็นแบบโมโนโครมหากคุณใช้ธีมแบบไดนามิกในการ์ด ดูหลักเกณฑ์ไอคอนผลิตภัณฑ์ Android เกี่ยวกับวิธีสร้างไอคอนแอปสำหรับแบรนด์
check_circle
จัดการ
Wear OS อาจแสดงไอคอนแอปโดยอัตโนมัติเมื่อผู้ใช้เลื่อนดูภาพสไลด์ของการ์ด คุณไม่จำเป็นต้องใส่ไอคอนแอปในการออกแบบการ์ด
cancel
อย่าทำเช่นนี้
อย่าเพิ่มไอคอนแอปในการออกแบบการ์ด เนื่องจากอาจปรากฏ 2 ครั้ง/ซ้อนทับกันหากแสดงที่ระดับระบบด้วย
ซ่อนชื่อแอปเพื่อให้มีเป้าหมายการแตะขั้นต่ำ
ระบบอาจซ่อนชื่อแอปเมื่อการ์ดใช้ 2 แถว (และส่วนด้านล่าง) เพื่อให้มีพื้นที่เพียงพอสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟบนหน้าจอขนาดเล็ก วิธีนี้ช่วยให้แถวมีความสูงเพียงพอ (อย่างน้อย 48dp) ชื่อจะปรากฏขึ้นอีกครั้งบนหน้าจอขนาดใหญ่ขึ้น (225 DP ขึ้นไป)
check_circle
จัดการ
ในหน้าจอขนาดเล็ก ระบบจะซ่อนชื่อแอปเพื่อให้แถว 2 แถวมีความสูงและเป้าหมายการแตะขั้นต่ำ 48dp
cancel
อย่าทำเช่นนี้
หากคุณไม่ซ่อนชื่อแอปในหน้าจอขนาดเล็กและมี 2 แถว ความสูงของคอมโพเนนต์จะไม่เป็นไปตามมาตรฐานการช่วยเหลือพิเศษของเราและน้อยกว่าขนาดเป้าหมายการแตะขั้นต่ำ
ในตัวอย่างนี้ พื้นที่สำหรับปุ่มมีขนาดเล็กกว่า 48dp จึงมีการตัด
เลือก Use Case หลักรายการเดียวเพื่อไฮไลต์
เราต้องการตรวจสอบว่าผู้ใช้ทราบสิ่งที่ต้องทํากับการ์ดแต่ละใบ ไม่ว่าจะเป็นการเปิดแอป การเริ่มกิจกรรม หรือดูข้อมูลเพิ่มเติม เราจึงต้องการให้การ์ดมีองค์ประกอบแบบอินเทอร์แอกทีฟอย่างน้อย 1 รายการในเลย์เอาต์
check_circle
จัดการ
การ์ดนี้มีประสิทธิภาพเนื่องจากมีตัวเลือกเพียงไม่กี่รายการและสามารถดูตัวเลือกเพิ่มเติมได้
cancel
อย่าทำเช่นนี้
โซลูชันนี้ไม่ค่อยมีประโยชน์ต่อผู้ใช้ เนื่องจากทำให้ผู้ใช้ตัดสินใจไม่ได้เนื่องจากมีตัวเลือกมากเกินไป
รวมคอนเทนเนอร์อย่างน้อย 1 รายการ
แต่ละการ์ดในแอปต้องมีองค์ประกอบคอนเทนเนอร์อย่างน้อย 1 รายการและสามารถแตะได้ทั้งหมด โดยลิงก์ไปยังหน้าจอที่เกี่ยวข้องภายในแอป ข้อมูลของการ์ดไม่ว่าจะอยู่ในคอนเทนเนอร์หรือแสดงแยกต่างหาก จะต้องสื่อถึงเนื้อหาที่ลิงก์หรือการดำเนินการที่ใช้ได้อย่างชัดเจน
หากมีการใช้ปุ่ม ปุ่มเหล่านั้นควรเป็นไปตามแบบแผนการออกแบบมาตรฐานและระบุฟังก์ชันการทำงานอย่างชัดเจน
check_circle
จัดการ
การ์ดนี้ทํางานได้ดีเนื่องจากผู้ใช้ดําเนินการกับความสามารถแต่ละอย่างที่มีให้ได้โดยง่าย
cancel
อย่าทำเช่นนี้
การ์ดนี้มีประสิทธิภาพน้อยกว่าเนื่องจากไม่ได้แสดงให้เห็นอย่างชัดเจนว่าผู้ใช้แตะเนื้อหาเพื่อดูข้อมูลเพิ่มเติมได้
ทําให้เข้าใจการดำเนินการได้ทันที
ประสบการณ์การใช้งานบนนาฬิกาไม่มีพื้นที่เพียงพอที่จะสื่อความหมายได้ ดังนั้นการ์ดที่มีประสิทธิภาพสูงสุดจึงมีองค์ประกอบแบบอินเทอร์แอกทีฟที่คาดเดาได้ง่าย
check_circle
จัดการ
ไทล์ที่ประสบความสําเร็จใช้ประโยชน์จากพื้นที่ที่มีอยู่อย่างเต็มที่เพื่อสื่อสารผลลัพธ์ของการดำเนินการแต่ละรายการอย่างชัดเจน
cancel
อย่าทำเช่นนี้
การดําเนินการในการ์ดนี้ไม่ชัดเจน คอนเทนเนอร์ที่มีอาร์ตเวิร์กอัลบั้มจะนําผู้ใช้ไปยังที่ใด และแตกต่างจากปุ่ม "เล่น" ไหม
จัดลำดับความสำคัญของการดำเนินการด้วยภาพ
ควรจัดลำดับความสำคัญของคอนเทนเนอร์แบบอินเทอร์แอกทีฟให้มองเห็นได้ชัดเจนเพื่อช่วยให้ผู้ใช้ได้เข้าใจการดำเนินการที่สำคัญที่สุดบนการ์ด
- ใช้สีหลักบนปุ่มการดําเนินการหลัก
- ใช้สีรอง/สีที่ 3 กับการกระทำรอง
check_circle
จัดการ
การ์ดนี้ใช้การผสมผสานระหว่างการ์ดแบบมีพื้นหลัง (มีบทบาทสีหลักและรอง) กับบทบาทปุ่มด้านล่างลำดับที่ 3 ที่ชัดเจน โดยใช้สไตล์การเติมโทนสี
cancel
อย่าทำเช่นนี้
ไทล์นี้มีการใช้ปุ่มสไตล์แบบทึบมากเกินไป และทั้งหมดใช้บทบาทสีหลัก
ลดความซับซ้อนให้มีคอนเทนเนอร์น้อยลง
ไม่ควรใช้คอมโพเนนต์แบบอินเทอร์แอกทีฟมากกว่า 1 รายการเพื่อเรียกให้ดำเนินการหนึ่งๆ และพยายามลดความซับซ้อนของเลย์เอาต์โดยรวมให้เหลือคอนเทนเนอร์น้อยลง
check_circle
จัดการ
การ์ดนี้ใช้คอนเทนเนอร์หลายรายการ และแต่ละคอนเทนเนอร์จะทำหน้าที่เป็นปุ่มเพื่อดำเนินการบางอย่าง เช่น เริ่มจับเวลาหรือสร้างการจับเวลาใหม่
cancel
อย่าทำเช่นนี้
การใช้คอนเทนเนอร์ 4 รายการที่นี่ไม่จําเป็น เนื่องจากข้อมูลทั้งหมดจะนําไปยังตําแหน่งเดียวกัน
ใช้คอนเทนเนอร์เพื่อวัตถุประสงค์ด้านฟังก์ชันการทำงาน
เราขอแนะนำว่าอย่าใช้คอนเทนเนอร์เพื่อวัตถุประสงค์ด้านการตกแต่งหรือโครงสร้างเพื่อหลีกเลี่ยงการแตะที่ไม่ทําอะไรเลย เพื่อให้ผู้ใช้คาดการณ์ได้ว่าคอมโพเนนต์แต่ละรายการในการ์ดจะทําอะไร
check_circle
จัดการ
โซลูชันนี้ได้ผลเนื่องจากการดำเนินการเพียงอย่างเดียวของการ์ดคือขั้นตอนการสร้าง และเนื้อหาอื่นๆ ทั้งหมดจะลอยอยู่บนพื้นหลังสีดํา
cancel
อย่าทำเช่นนี้
การ์ดนี้สร้างความสับสนมากกว่า เนื่องจากดูเหมือนว่าผู้ใช้จะโต้ตอบกับคอนเทนเนอร์ทั้งหมดได้
แสดงกราฟและแผนภูมิที่มองเห็นได้อย่างรวดเร็ว
ความสามารถในการดูข้อมูลได้อย่างรวดเร็วคือหัวใจสำคัญของการออกแบบ Wear OS เนื่องจากมีเวลาบนหน้าจอจํากัด (ประมาณ 7 วินาที) ให้ให้ความสําคัญกับข้อมูลสําคัญในรูปแบบที่ชัดเจนและเข้าใจได้อย่างรวดเร็ว
อย่าลืมว่านาฬิกาช่วยเสริมประสบการณ์การใช้งานโทรศัพท์ด้วยการเข้าถึงรายละเอียดสำคัญได้อย่างรวดเร็ว
check_circle
จัดการ
แสดงข้อมูลตัวเลขหรือข้อมูลสถิติที่อ่านได้อย่างรวดเร็วและเข้าใจง่าย และอนุญาตให้ผู้ใช้แตะเพื่อดูข้อมูลเพิ่มเติมในแอปได้หากจำเป็น
cancel
อย่าทำเช่นนี้
แสดงข้อมูลตัวเลขหรือสถิติโดยละเอียดในการ์ด
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา 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,["# Best practices for tiles\n\nDesign on black\n---------------\n\nDesigning on a black background is crucial for Wear OS for two key reasons:\n\n- **Battery efficiency:** Each pixel illuminated on the screen consumes power. By using a black background, you minimize the number of active pixels, extending battery life.\n- **Seamless aesthetics:** A black background helps to visually minimize the watch bezel, creating the illusion of a continuous surface that extends to the edge of the device. Containing UI elements within this space further enhances this effect.\n\n\u003cbr /\u003e\n\ncheck_circle\n\n### Do this\n\nAlways set the background color to black. \ncancel\n\n### Don't do this\n\nDon't set the background as a full bleed image or block color.\n\nInclude only necessary elements\n-------------------------------\n\nWhen opt-ed in (for example, using ProtoLayout Material3 PrimaryLayout), Wear OS will automatically display the permanent app icon, which will automatically display as the user scrolls through the Tile carousel. The app icon should not be designed and added as part of the Tile.\n\nEnsure the app icon provided is monochrome if you are having dynamic theming on your tile. Check Android product icon guidelines about how to create the app icon for your brand. \ncheck_circle\n\n### Do this\n\nWear OS may display the app icon automatically as the user scrolls through the Tile carousel. There is no need to put the app icon in the Tile design. \ncancel\n\n### Don't do this\n\nDo not add the app icon in the Tile design as it may appear twice/overlapped if also displayed at the system level.\n\nHide app titles to ensure minimum tap targets\n---------------------------------------------\n\nTo ensure enough space for interactive elements on smaller screens, the app title can be hidden when a Tile uses two rows (and a bottom section). This ensures the rows are tall enough (at least 48dp). The title can reappear on larger screens (225dp+). \ncheck_circle\n\n### Do this\n\nOn small screens, the app title is hidden to ensure the two rows have a minimum height and tap target of 48dp. \ncancel\n\n### Don't do this\n\nIf you do not hide the app title on small screen, and have two rows, the height of the components will not adhere to our accessibility standards, and be less than the minimum tap target size. In this example the space for the buttons is smaller than 48dp, so it clips.\n\nChoose a single primary use-case to highlight\n---------------------------------------------\n\nTo make sure users know what to do with each Tile - whether it's opening an app, starting an activity, or learning more - we need them to include at least one interactive element in their layout. \ncheck_circle\n\n### Do this\n\nThis specific Tile is effective because it provides a small collection of options, and then the ability to see more \ncancel\n\n### Don't do this\n\nThis solution is less helpful to user because it introduces decision paralysis because of too many provided options\n\nInclude (at least) one container\n--------------------------------\n\nEach tile in the app must contain at least one container element and be fully tappable, linking to a corresponding screen within the app. The Tile's information, whether contained within the container or presented separately, must clearly communicate the linked content or available action.\n\nIf buttons are used, they should adhere to standard design conventions and provide a clear indication of their function. \ncheck_circle\n\n### Do this\n\nThis Tile works well because the user can take action on each of the provided capabilities since they have clear tap affordances \ncancel\n\n### Don't do this\n\nThis Tile is less effective because it doesn't make it clear that the user can tap on the content to see additional information\n\nMake actions instantly understandable\n-------------------------------------\n\nExperiences on the watch don't have the luxury of having ample space to communicate their meaning, so the most effective Tiles have easily predictable interactive components. \ncheck_circle\n\n### Do this\n\nA successful TIle takes full advantage the space available to clearly communicate the outcome of each action \ncancel\n\n### Don't do this\n\nThe actions in this Tile are unclear---where does the container with the album art take the user, and is that different from the \"Play\" button?\n\nVisually prioritize actions\n---------------------------\n\nTo help users understand the most important action on a Tile, interactive containers should be visually prioritized.\n\n- Use primary colors on primary action buttons.\n- Use secondary/tertiary colors on secondary actions\n\ncheck_circle\n\n### Do this\n\nThis Tile uses a combination of filled (with primary and secondary color roles) with a clear tertiary bottom button role, using the tonal-fill style \ncancel\n\n### Don't do this\n\nThis Tile contains too many uses of filled style buttons, additionally all using the primary color role\n\nSimplify into fewer containers\n------------------------------\n\nTiles should seek to refrain from using more than one interactive component to trigger a specific action, and instead attempt to simplify the overall layout into fewer containers. \ncheck_circle\n\n### Do this\n\nThis tile is using several containers and each container acts as a button to perform a specific action like starting a timer or creating a new one \ncancel\n\n### Don't do this\n\nThe use of 4 containers here is unnecessary since all the information will navigate to the same location\n\nUse containers for functional purposes\n--------------------------------------\n\nTo ensure users can anticipate what each component within a Tile will do, we don't recommend using containers for decorative or structural purposes to avoid taps that don't do anything. \ncheck_circle\n\n### Do this\n\nThis solution works because the sole action of the Tile is a creation flow, and all other content is floating on the black background \ncancel\n\n### Don't do this\n\nThis Tile is more confusing because it seems like the user would be able to interact with all the containers\n\nShow glanceable representations of graphs and charts\n----------------------------------------------------\n\nGlanceability is key for Wear OS design. With limited screen time (around 7 seconds), prioritize essential information in a clear format, that's easy to understand at a glance.\n\nRemember, the watch complements the phone experience, providing quick access to key details. \ncheck_circle\n\n### Do this\n\nShow quick, glanceable representations of numerical or statistical information and allow the user to tap to see more in an app if needed \ncancel\n\n### Don't do this\n\nShow detailed numerical or statistical information on the Tile"]]