แนวทางปฏิบัติแนะนำสำหรับการ์ด

การออกแบบบนพื้นสีดํา

การออกแบบบนพื้นหลังสีดําสําคัญอย่างยิ่งสําหรับ Wear OS เนื่องด้วยเหตุผลหลัก 2 ข้อต่อไปนี้

  • ประสิทธิภาพแบตเตอรี่: พิกเซลแต่ละพิกเซลที่สว่างบนหน้าจอจะใช้พลังงาน การใช้พื้นหลังสีดำจะลดจำนวนพิกเซลที่ทำงานอยู่ ซึ่งจะช่วยยืดอายุการใช้งานแบตเตอรี่
  • รูปลักษณ์ที่ไร้รอยต่อ: พื้นหลังสีดําช่วยทำให้ขอบนาฬิกาดูเล็กลง สร้างภาพลวงตาให้ดูเหมือนเป็นพื้นผิวที่ต่อเนื่องไปจนถึงขอบของอุปกรณ์ การมีองค์ประกอบ UI ภายในพื้นที่นี้จะช่วยเพิ่มผลลัพธ์นี้ให้ดียิ่งขึ้น

จัดการ

ตั้งค่าสีพื้นหลังเป็นสีดําเสมอ

อย่าทำเช่นนี้

อย่าตั้งค่าพื้นหลังเป็นภาพแบบไม่มีขอบหรือสีบล็อก

รวมเฉพาะองค์ประกอบที่จำเป็น

เมื่อเลือกใช้ (เช่น การใช้ ProtoLayout Material3 PrimaryLayout) Wear OS จะแสดงไอคอนแอปถาวรโดยอัตโนมัติ ซึ่งจะแสดงขึ้นโดยอัตโนมัติเมื่อผู้ใช้เลื่อนดูภาพสไลด์ของการ์ด ไม่ควรออกแบบและเพิ่มไอคอนแอปเป็นส่วนหนึ่งของการ์ด

ตรวจสอบว่าไอคอนแอปที่ระบุเป็นแบบโมโนโครมหากคุณใช้ธีมแบบไดนามิกในการ์ด ดูหลักเกณฑ์ไอคอนผลิตภัณฑ์ Android เกี่ยวกับวิธีสร้างไอคอนแอปสำหรับแบรนด์

จัดการ

Wear OS อาจแสดงไอคอนแอปโดยอัตโนมัติเมื่อผู้ใช้เลื่อนดูภาพสไลด์ของการ์ด คุณไม่จำเป็นต้องใส่ไอคอนแอปในการออกแบบการ์ด

อย่าทำเช่นนี้

อย่าเพิ่มไอคอนแอปในการออกแบบการ์ด เนื่องจากอาจปรากฏ 2 ครั้ง/ซ้อนทับกันหากแสดงที่ระดับระบบด้วย

ซ่อนชื่อแอปเพื่อให้มีเป้าหมายการแตะขั้นต่ำ

ระบบอาจซ่อนชื่อแอปเมื่อการ์ดใช้ 2 แถว (และส่วนด้านล่าง) เพื่อให้มีพื้นที่เพียงพอสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟบนหน้าจอขนาดเล็ก วิธีนี้ช่วยให้แถวมีความสูงเพียงพอ (อย่างน้อย 48dp) ชื่อจะปรากฏขึ้นอีกครั้งบนหน้าจอขนาดใหญ่ขึ้น (225 DP ขึ้นไป)

จัดการ

ในหน้าจอขนาดเล็ก ระบบจะซ่อนชื่อแอปเพื่อให้แถว 2 แถวมีความสูงและเป้าหมายการแตะขั้นต่ำ 48dp

อย่าทำเช่นนี้

หากคุณไม่ซ่อนชื่อแอปในหน้าจอขนาดเล็กและมี 2 แถว ความสูงของคอมโพเนนต์จะไม่เป็นไปตามมาตรฐานการช่วยเหลือพิเศษของเราและน้อยกว่าขนาดเป้าหมายการแตะขั้นต่ำ ในตัวอย่างนี้ พื้นที่สำหรับปุ่มมีขนาดเล็กกว่า 48dp จึงมีการตัด

เลือก Use Case หลักรายการเดียวเพื่อไฮไลต์

เราต้องการตรวจสอบว่าผู้ใช้ทราบสิ่งที่ต้องทํากับการ์ดแต่ละใบ ไม่ว่าจะเป็นการเปิดแอป การเริ่มกิจกรรม หรือดูข้อมูลเพิ่มเติม เราจึงต้องการให้การ์ดมีองค์ประกอบแบบอินเทอร์แอกทีฟอย่างน้อย 1 รายการในเลย์เอาต์

จัดการ

การ์ดนี้มีประสิทธิภาพเนื่องจากมีตัวเลือกเพียงไม่กี่รายการและสามารถดูตัวเลือกเพิ่มเติมได้

อย่าทำเช่นนี้

โซลูชันนี้ไม่ค่อยมีประโยชน์ต่อผู้ใช้ เนื่องจากทำให้ผู้ใช้ตัดสินใจไม่ได้เนื่องจากมีตัวเลือกมากเกินไป

รวมคอนเทนเนอร์อย่างน้อย 1 รายการ

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

หากมีการใช้ปุ่ม ปุ่มเหล่านั้นควรเป็นไปตามแบบแผนการออกแบบมาตรฐานและระบุฟังก์ชันการทำงานอย่างชัดเจน

จัดการ

การ์ดนี้ทํางานได้ดีเนื่องจากผู้ใช้ดําเนินการกับความสามารถแต่ละอย่างที่มีให้ได้โดยง่าย

อย่าทำเช่นนี้

การ์ดนี้มีประสิทธิภาพน้อยกว่าเนื่องจากไม่ได้แสดงให้เห็นอย่างชัดเจนว่าผู้ใช้แตะเนื้อหาเพื่อดูข้อมูลเพิ่มเติมได้

ทําให้เข้าใจการดำเนินการได้ทันที

ประสบการณ์การใช้งานบนนาฬิกาไม่มีพื้นที่เพียงพอที่จะสื่อความหมายได้ ดังนั้นการ์ดที่มีประสิทธิภาพสูงสุดจึงมีองค์ประกอบแบบอินเทอร์แอกทีฟที่คาดเดาได้ง่าย

จัดการ

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

อย่าทำเช่นนี้

การดําเนินการในการ์ดนี้ไม่ชัดเจน คอนเทนเนอร์ที่มีอาร์ตเวิร์กอัลบั้มจะนําผู้ใช้ไปยังที่ใด และแตกต่างจากปุ่ม "เล่น" ไหม

จัดลำดับความสำคัญของการดำเนินการด้วยภาพ

ควรจัดลำดับความสำคัญของคอนเทนเนอร์แบบอินเทอร์แอกทีฟให้มองเห็นได้ชัดเจนเพื่อช่วยให้ผู้ใช้ได้เข้าใจการดำเนินการที่สำคัญที่สุดบนการ์ด

  • ใช้สีหลักบนปุ่มการดําเนินการหลัก
  • ใช้สีรอง/สีที่ 3 กับการกระทำรอง

จัดการ

การ์ดนี้ใช้การผสมผสานระหว่างการ์ดแบบมีพื้นหลัง (มีบทบาทสีหลักและรอง) กับบทบาทปุ่มด้านล่างลำดับที่ 3 ที่ชัดเจน โดยใช้สไตล์การเติมโทนสี

อย่าทำเช่นนี้

ไทล์นี้มีการใช้ปุ่มสไตล์แบบทึบมากเกินไป และทั้งหมดใช้บทบาทสีหลัก

ลดความซับซ้อนให้มีคอนเทนเนอร์น้อยลง

ไม่ควรใช้คอมโพเนนต์แบบอินเทอร์แอกทีฟมากกว่า 1 รายการเพื่อเรียกให้ดำเนินการหนึ่งๆ และพยายามลดความซับซ้อนของเลย์เอาต์โดยรวมให้เหลือคอนเทนเนอร์น้อยลง

จัดการ

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

อย่าทำเช่นนี้

การใช้คอนเทนเนอร์ 4 รายการที่นี่ไม่จําเป็น เนื่องจากข้อมูลทั้งหมดจะนําไปยังตําแหน่งเดียวกัน

ใช้คอนเทนเนอร์เพื่อวัตถุประสงค์ด้านฟังก์ชันการทำงาน

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

จัดการ

โซลูชันนี้ได้ผลเนื่องจากการดำเนินการเพียงอย่างเดียวของการ์ดคือขั้นตอนการสร้าง และเนื้อหาอื่นๆ ทั้งหมดจะลอยอยู่บนพื้นหลังสีดํา

อย่าทำเช่นนี้

การ์ดนี้สร้างความสับสนมากกว่า เนื่องจากดูเหมือนว่าผู้ใช้จะโต้ตอบกับคอนเทนเนอร์ทั้งหมดได้

แสดงกราฟและแผนภูมิที่มองเห็นได้อย่างรวดเร็ว

ความสามารถในการดูข้อมูลได้อย่างรวดเร็วคือหัวใจสำคัญของการออกแบบ Wear OS เนื่องจากมีเวลาบนหน้าจอจํากัด (ประมาณ 7 วินาที) ให้ให้ความสําคัญกับข้อมูลสําคัญในรูปแบบที่ชัดเจนและเข้าใจได้อย่างรวดเร็ว

อย่าลืมว่านาฬิกาช่วยเสริมประสบการณ์การใช้งานโทรศัพท์ด้วยการเข้าถึงรายละเอียดสำคัญได้อย่างรวดเร็ว

จัดการ

แสดงข้อมูลตัวเลขหรือข้อมูลสถิติที่อ่านได้อย่างรวดเร็วและเข้าใจง่าย และอนุญาตให้ผู้ใช้แตะเพื่อดูข้อมูลเพิ่มเติมในแอปได้หากจำเป็น

อย่าทำเช่นนี้

แสดงข้อมูลตัวเลขหรือสถิติโดยละเอียดในการ์ด