คำแนะนำนี้จะอธิบายวิธีสร้างหน้าปัด เพิ่มองค์ประกอบตามเวลา และ รวมการรองรับรูปภาพที่ผู้ใช้เลือก รวมถึงแกลเลอรีแบบหลายรูปภาพ ดูฟีเจอร์เพิ่มเติมได้ในคู่มือขั้นสูง
สร้างหน้าปัด
หากต้องการสร้างหน้าปัด ให้วาดเฟรมใน Figma แล้วกำหนดค่า ดังนี้
ตั้งค่าขนาดเป็น 450 หน่วยกว้างและ 450 หน่วยสูง
รูปที่ 1: แผงเลย์เอาต์เฟรมของ Figma แสดงหน้าปัดนาฬิกาขนาด 450x450 ขนาดอื่นๆ ก็ใช้ได้เช่นกัน แต่เราขอแนะนำให้ใช้ขนาด 450x450 สำหรับหน้าปัด Wear OS และ จำเป็นต้องใช้สำหรับการส่งออกไปยัง Watch Face Studio
หากต้องการหน้าปัดนาฬิกาที่ประหยัดแบตเตอรี่ ให้ตั้งค่าสีเติมของเฟรมเป็นสีดำโดยทำดังนี้
รูปที่ 2: แผงการเติมเฟรมที่แสดง สีเติมสีดำ ตั้งชื่อกรอบเป็นชื่อที่คุณต้องการให้เรียกหน้าปัด ข้อความนี้จะปรากฏบนนาฬิกาของผู้ใช้
หลังจากสร้างและกำหนดค่าเฟรมแล้ว ให้เปิดปลั๊กอิน Watch Face Designer แล้วเลือกเฟรมที่เพิ่งสร้าง ตัวอย่างแบบเรียลไทม์ จะปรากฏในหน้าต่าง Watch Face Designer
เพิ่มองค์ประกอบไปยังหน้าปัด
เพิ่มองค์ประกอบบางอย่างลงในหน้าปัดเพื่อให้ผู้ใช้ดูเวลาได้
เวลาแอนะล็อก
วาดสี่เหลี่ยมผืนผ้าซึ่งจะทำหน้าที่เป็นเข็มวินาทีบนนาฬิกา
ตรวจสอบว่าเมื่อแสดงจุดเริ่มต้นของนาทีใหม่ สี่เหลี่ยมผืนผ้าจะอยู่ตรงกลางในแนวนอนและขอบด้านล่างจะอยู่ตรงกลางของหน้าปัด เหมือนกับเข็มนาฬิกาจริง โดยค่าเริ่มต้น Figma จะเปิดใช้สแนปกับรูปทรงเรขาคณิต ซึ่งจะแสดงเส้นบอกแนวสีแดงเพื่อช่วยในการจัดแนวสี่เหลี่ยมผืนผ้านี้
จากนั้นแจ้ง Watch Face Designer ว่าเลเยอร์นี้ไม่ได้มีไว้เพื่อการตกแต่งเท่านั้น เลือกสี่เหลี่ยมผืนผ้าที่คุณวาดในขั้นตอนก่อนหน้า จากนั้นไปที่หน้าต่าง Watch Face Designer แล้วเปลี่ยนลักษณะการทำงานจาก "คงที่" เป็น "เข็มวินาที"
สังเกตว่าเข็มจะเริ่มเคลื่อนที่ทุกๆ วินาที ซึ่งจำลองการเดินของนาฬิกา คุณปรับวิธีหมุนได้หากต้องการ และสร้างเข็มนาทีและเข็มชั่วโมงได้ในลักษณะเดียวกับที่สร้างเข็มนี้
ดูคำแนะนำเกี่ยวกับหน้าปัดย่อยได้ในคู่มือการใช้งานขั้นสูง
เวลาแบบดิจิทัล
นอกจากนี้ เรายังแสดงเวลาในรูปแบบดิจิทัลได้ด้วย โดยสร้างเลเยอร์ข้อความ
ใน Figma ตอนนี้ให้ป้อน Hh:Mm:Ss เป็นเนื้อหาข้อความ
ของเลเยอร์
ในหน้าต่าง Watch Face Designer ให้เปลี่ยนลักษณะการทำงานของข้อความจาก "คงที่" เป็น "เวลาดิจิทัล" ตัวอย่างแสดงลักษณะที่ฟีเจอร์นี้จะปรากฏบนอุปกรณ์จริง
หากต้องการดูชุดอักขระที่ใช้ได้ โปรดดูคำแนะนำเกี่ยวกับเทมเพลต
ที่แสดงในแถบด้านข้างของหน้าต่าง Watch Face Designer เช่น a แสดงว่าเวลาปัจจุบันเป็น "AM" หรือ "PM" ซึ่งคุณใช้กับ "รูปแบบชั่วโมง" เพื่อแสดงเวลาแบบ 12 ชั่วโมงได้
คุณเลือกแบบอักษรใดก็ได้ใน Figma รวมถึงแบบอักษรที่ไม่มีใน Wear OS โดยระบบจะส่งออกและรวมแบบอักษรนั้นไว้ในหน้าปัดโดยอัตโนมัติ โปรดทราบว่าแบบอักษรแต่ละแบบมีข้อกำหนดในการอนุญาตให้ใช้สิทธิสำหรับการแจกจ่ายต่อของตัวเอง
ดูตัวอย่างเวลาต่างๆ
หากต้องการดูหน้าปัดนาฬิกาในช่วงเวลาต่างๆ ของวัน คุณสามารถปรับเวลาที่แสดงตัวอย่างได้โดยการลากแถบเลื่อนที่ด้านล่างของหน้าต่าง Watch Face Designer
เมื่อดูตัวอย่างเวลาต่างๆ เสร็จแล้ว คุณจะรีเซ็ตเวลาเป็นเวลาปัจจุบันได้โดยเลือกปุ่มรีเซ็ตที่มุมซ้ายล่าง
รวมรูปภาพที่ได้จากผู้ใช้
หน้าปัดสามารถมีช่องสำหรับรูปภาพที่กำหนดเองได้ ซึ่งจะช่วยให้ผู้ใช้เพิ่ม รูปภาพส่วนตัวเป็นฉากหลังได้ ขณะที่ยังคงแสดงเวลาและ องค์ประกอบอื่นๆ ที่คุณรวมไว้ในการออกแบบ
หากต้องการรองรับรูปภาพที่กำหนดเอง ให้เพิ่มเลเยอร์ลงในหน้าปัด แล้วตั้งค่าลักษณะการทำงานเป็น "รูปภาพที่ผู้ใช้ระบุ" สำหรับตัวอย่างนี้ เราใช้ภาพถ่ายตัวอย่าง ของดอกไม้สำหรับเลเยอร์นี้เป็นรูปภาพเริ่มต้น ระบบจะใช้รูปภาพนี้เป็นรูปภาพสำรองก่อนที่ผู้ใช้จะกำหนดรูปภาพของตนเอง หรือเมื่อผู้ใช้เลือกที่จะไม่ใช้รูปภาพของตนเอง
รองรับการเลือกรูปภาพหลายรายการ
หน้าปัดรองรับการเลือกรูปภาพหลายรายการ Watch Face Designer เรียกแกลเลอรีนี้ว่า
เมื่อตั้งค่าการเลือกรูปภาพเป็น "แกลเลอรี" ผู้ใช้จะเลือกรูปภาพหลายรูปสำหรับช่องนี้ได้ และนาฬิกาจะแสดงรูปภาพเหล่านั้นสลับกันไปในเวลาต่างๆ โดยขึ้นอยู่กับสิ่งที่คุณเลือกในส่วน "เปลี่ยนรูปภาพ"
- เมื่อเลือก "เมื่อแตะ" รูปภาพจะเปลี่ยนเมื่อผู้ใช้แตะเลเยอร์ของคุณ
- เมื่อเลือก "เมื่อยกข้อมือ" การเปลี่ยนแปลงจะเกิดขึ้นทุกครั้งที่ 3 ที่ผู้ใช้
ยกข้อมือ ปัจจุบันคุณปรับค่านี้โดยใช้ Watch Face
Designer ไม่ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่รูปแบบหน้าปัดนาฬิกาให้การรองรับขั้นสูงยิ่งขึ้น
โดยใช้แอตทริบิวต์
changeAfterEvery
ดูข้อมูลเพิ่มเติม
หากต้องการดูตัวอย่างหน้าปัดในอุปกรณ์จริง โปรดดูคู่มือการส่งออก
ดูตัวเลือกและฟีเจอร์เพิ่มเติมได้ในคู่มือการใช้งานขั้นสูง