หน้านี้จะอธิบายกรณีการใช้งานขั้นสูงเพิ่มเติมสำหรับ Watch Face Designer ซึ่งรวมถึง วิธีเพิ่มการรองรับหน้าปัดย่อย ข้อมูลแทรก และธีมสี ดูข้อมูลเพิ่มเติมเกี่ยวกับการเริ่มต้นใช้งานได้ในคู่มือพื้นฐาน
หน้าปัดย่อย
คุณสร้างเข็มนาฬิกาแบบอนาล็อกที่หมุนภายในส่วนย่อยของหน้าปัดได้ เหมือนกับหน้าปัดย่อยในนาฬิกาข้อมือจริง
โดยทำตามขั้นตอนต่อไปนี้
สร้างเฟรมเปล่าที่ครอบคลุมพื้นที่ที่คุณวางหน้าปัดย่อยในการออกแบบ
รูปที่ 1: กรอบเปล่าครอบช่อง หน้าปัดย่อย ออกแบบเข็มวินาทีภายในกรอบนี้
รูปที่ 2: การออกแบบมือสอง อยู่ในกรอบ เลือกกรอบหน้าปัดย่อยที่มีเข็มวินาที จากนั้นใน Watch Face Designer ให้ตั้งค่าหมุนรอบเป็น "กึ่งกลางเลเยอร์"
รูปที่ 3: หลังจากเลือกเฟรมที่มี เข็มวินาที (ซ้าย) ให้เลือกลักษณะการหมุนของเข็มวินาที (ขวา)
ข้อมูลแทรก
หากต้องการเพิ่มช่องข้อมูลแทรก ให้เพิ่มเฟรมลงในหน้าปัด ภายในเฟรมนี้ ให้ออกแบบลักษณะของช่องแทรกข้อมูลเมื่อช่องนั้นว่าง เปล่า ซึ่งเป็นดีไซน์พื้นฐานสำหรับภาวะแทรกซ้อนประเภทอื่นๆ เช่น ไอคอนและข้อความ
โดยมีภาวะแทรกซ้อนหลายประเภท หน้าปัดนาฬิกามี เทมเพลตสำหรับแต่ละประเภท และแอปในนาฬิกาของผู้ใช้จะเป็นตัวกำหนดว่าควรใช้เทมเพลตใด และควรให้ข้อมูลใดสำหรับตัวเอง ผู้ใช้เลือกแอปที่จะแสดงใน ช่องข้อมูลแทรกใด
เลือกเฟรมที่มีการออกแบบสำหรับช่องแทรกข้อมูล จากนั้นใน Watch Face Designer ให้เปลี่ยนลักษณะการทำงานเป็น "ช่องแทรกข้อมูล" กระบวนการนี้จะสร้างคอมโพเนนต์ที่มีตัวแปร 1 รายการ (ดีไซน์ว่างเปล่า)
ใช้ประเภทช่องสำหรับข้อมูลแทรก
เนื่องจากช่องแทรกข้อมูลที่รองรับเฉพาะประเภท "ว่าง" นั้นไม่ค่อยมีประโยชน์ ให้เพิ่มประเภทอื่น ในหน้าต่าง Watch Face Designer ให้กด + รองรับประเภทใหม่ แล้วเลือก "ข้อความสั้น" ข้อความสั้นเป็นประเภทข้อมูลแทรก ที่แอปส่วนใหญ่รองรับ ซึ่งจะแสดงป้ายกำกับขนาดเล็ก 2 รายการข้างไอคอน
ขั้นตอนนี้จะสร้างตัวแปรอีกรายการเพื่อให้เราแสดงการออกแบบสำหรับ ประเภทความซับซ้อนนี้ เลือกแถว "ข้อความสั้น" เพื่อไปยังแถวนั้น
เมื่อแก้ไขเลเยอร์ภายในเทมเพลตแทรกข้อมูล ตัวเลือก "ลักษณะการทำงาน" จะปรากฏขึ้น ตัวเลือกนี้คล้ายกับตัวเลือกในหน้าปัด แต่ในที่นี้คุณสามารถเลือก ลักษณะการทำงานที่เฉพาะเจาะจงกับประเภทข้อมูลแทรกที่คุณกำลังแก้ไข
สำหรับตัวอย่างนี้ เลเยอร์ภายในภาวะแทรกซ้อนของข้อความสั้นอาจเป็นชื่อแอป ข้อความ หรือไอคอนสีเดียว สีเดียวหมายความว่า ไอคอนจะรับค่าสีที่คุณตั้งไว้ใน Figma
หลังจากสร้างสี่เหลี่ยมผืนผ้าในตำแหน่งที่ต้องการให้ไอคอนแอปปรากฏบนหน้าปัดแล้ว ให้ไปที่หน้าต่าง Watch Face Designer แล้วตั้งค่าลักษณะการทำงานเป็น "ไอคอนสีเดียว"
จากนั้นสร้างเลเยอร์ข้อความ 2 เลเยอร์ เลเยอร์เหล่านี้แสดงช่อง "ข้อความสั้น" อีก 2 ช่อง ได้แก่ ช่องสำหรับชื่อและช่องสำหรับข้อความ
ตัวอย่างจะแสดงลักษณะที่ข้อมูลแทรกมารวมกัน ตัวอย่างนี้แสดง ลักษณะของข้อมูลแทรกหากกำหนดแอปปฏิทินให้กับช่องนี้
หากต้องการแสดงข้อความเป็นอักขระตัวพิมพ์ใหญ่ทั้งหมด ดังที่แสดงในรูปภาพต่อไปนี้ ให้ใช้ฟีเจอร์ตัวพิมพ์ในเมนูการพิมพ์ของ Figma
โปรดทราบว่าข้อความแทรกจะไม่มีการส่งออกแบบอักษรโดยพลการ ซึ่งแตกต่างจากเวลาดิจิทัล โดยจะวาดภาวะแทรกซ้อนโดยใช้แบบอักษรของระบบในอุปกรณ์ Wear OS เสมอ ซึ่งอาจแตกต่างกันไป แต่โดยทั่วไปคือ Roboto
หากต้องการเพิ่มการรองรับข้อมูลแทรกประเภทอื่นๆ หรือปรับแต่งการตั้งค่าที่เกี่ยวข้อง เช่น แอปเริ่มต้น หรือเลือกว่าจะให้ช่องปรากฏเมื่อนาฬิกาอยู่ในโหมดแอมเบียนท์หรือไม่ ให้เลือกช่องข้อมูลแทรกภายในหน้าปัด
ชุดรูปแบบสี
คุณสามารถใส่ตัวเลือกธีมสีหลายรายการในหน้าปัด จากนั้นผู้ใช้จะเลือกธีมที่ต้องการได้โดยใช้เครื่องมือเลือกหน้าปัดในนาฬิกา
Watch Face Designer รองรับธีมสีโดยใช้สไตล์ Figma
พิจารณากรณีที่คุณต้องการให้ผู้ใช้ปรับแต่งสีของเข็มนาฬิกาและหน้าปัดเมื่อมีหน้าปัดต่อไปนี้
สร้างสไตล์แรก
หากต้องการสร้างรูปแบบสีที่ปรับแต่งได้บนนาฬิกา ให้สร้างรูปแบบใหม่โดยทำดังนี้
- ยกเลิกการเลือกทุกอย่างบน Canvas
- ในแถบด้านข้างทางขวา ให้เลือกปุ่ม + ข้างรูปแบบ
คุณต้องตั้งชื่อในลักษณะต่อไปนี้
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
ในกรณีนี้ ชื่อของหน้าปัดตัวอย่างคือ Bauhaus ดังนั้นสีจะเริ่มต้นด้วยชื่อดังกล่าว ตามด้วย Hands ซึ่งเป็นองค์ประกอบที่ผู้ใช้ปรับแต่งได้
จากนั้นตั้งชื่อสีที่สื่อความหมาย เช่น Charcoal และระบุองค์ประกอบที่ต้องการเปลี่ยนสี เช่น เข็มชั่วโมง
เมื่อนำข้อมูลทั้งหมดนี้มารวมกัน ชื่อสุดท้ายจะเป็นดังนี้ Bauhaus/Hands/Charcoal/Hours:
ทำตามขั้นตอนที่คล้ายกันเพื่อสร้างธีมสีที่กำหนดเองสำหรับเข็มนาที
สุดท้าย ให้กำหนดสีเหล่านี้ให้กับเข็มนาฬิกาจริงที่ปรากฏบนหน้าปัด
Bauhaus/Hands/Charcoal/Minutes ให้กับเข็มนาทีของหน้าปัดนาฬิกาเพิ่มสไตล์อื่น
สร้างสไตล์ใหม่โดยเปลี่ยนTheme Nameส่วนของสไตล์ ตัวอย่างต่อไปนี้
จะเพิ่มสไตล์ใหม่ชื่อ Rust (Bauhaus/Hands/Rust/Hours)
จากนั้นผู้ใช้จะสลับระหว่างธีมสี "ชาร์โคล" กับ "สนิม" ในอุปกรณ์ได้ และเข็มชั่วโมงและเข็มนาทีของหน้าปัดจะเปลี่ยนสีตามธีมสีที่เลือก
ใช้กับองค์ประกอบอื่นๆ
ทำตามขั้นตอนที่คล้ายกันเพื่อทำให้องค์ประกอบอื่นๆ ของหน้าปัดสามารถเปลี่ยนธีมได้ คุณสามารถนำธีมเหล่านี้มาผสมผสานกัน และใช้รูปแบบสีจำนวนเท่าใดก็ได้เพื่อสร้างธีมที่ซับซ้อนซึ่งสลับได้
เมื่อใช้ชุดรูปแบบก่อนหน้า คุณได้ระบุตัวเลือก 2 รายการสำหรับเข็มนาฬิกา ได้แก่ Rust และ Charcoal และตัวเลือก 3 รายการสำหรับหน้าปัด ได้แก่ Light, Dark และ Duotone
