พื้นฐาน
สี ตัวอักษร ระยะ รูปทรง และการเคลื่อนไหวที่ทุกหน้าจอใช้ร่วมกัน ค่าทุกตัวในหน้านี้คำนวณสดจากสูตรเดียวกับที่ตัวอย่างใช้ สลับสว่างและมืดได้ที่ปุ่มขวาบน
สีของฉาก
ฉากคือทุกอย่างที่ไม่ใช่กิจกรรม: พื้น แผ่น เส้น และตัวอักษร มีสองชุด สว่างกับมืด สีไม่เปลี่ยนตามเวลาของวัน เป็นโทนเย็นเกือบเป็นกลาง สีสดบนจอจึงมีแค่สีของกิจกรรม กับสีของ “ตอนนี้” เริ่มจากค่าตั้งต้นแล้วสีตัวอักษรแต่ละตัวถูก แก้ค่า ไล่เข้มทีละ 4% ใน OKLab จนผ่านเกณฑ์บนทั้งพื้นและแผ่น
ตั้งค่า > ธีม มีสองแบบ: สว่าง และ มืด ครั้งแรกที่เปิดแอปใช้ตามธีมของระบบ สลับดูได้ที่ปุ่มขวาบนของหน้านี้
Token ของฉาก
contrast คือค่าต่ำสุดเมื่อวางบนพื้น (canvas) และแผ่น (sheet) ของโหมดนั้น
สีฟ้า 24 ชั่วโมง
ใช้เฉพาะในแถบเวลาเพื่อบอกกลางวันกลางคืน (แถบฟ้าใน drawer หัวไทม์ไลน์ แกนของแบบตั้งโต๊ะ และหน้ารายละเอียด) ไม่ใช้กับพื้นหรือตัวอักษรของแอป
โทนของสีกิจกรรม
สีของกิจกรรม (11 สีของ Google หรือสีของฉัน) ไม่ถูกใช้เป็นพื้นทึบอีกแล้ว ใช้เป็นเครื่องหมาย (จุด ขีดหัว ราง) ส่วนพื้นเป็นสีนั้นผสมลงบนฉากแค่ 5–32% ทุกโทนมีคู่ “ผ่านไปแล้ว” ที่ผสมน้อยลง นี่คือที่มาของ “สีคือเวลาที่เหลือ” ตัวอักษรบนพื้นสีถูกแก้ค่าแบบเดียวกับฉาก จึงได้ 4.5:1 ทุกสี ทั้งสองโหมด รวมสีกล้วยที่สว่างที่สุด
canvas ผสม 20% / 8% (มืด 32% / 14%)sheet 13% / 5% (มืด 26% / 10%) งานเดียวกันจึงเป็นสีเดียวกันทั้งบนเดือนและในรายการตัวอักษร
สองฟอนต์ หน้าที่ไม่ทับกัน Anuphan สำหรับคำทุกคำ ไทยและอังกฤษ หัวกลม อ่านง่ายที่ 10.5 sp ซึ่งเป็นขนาดของป้ายบนเดือน
Instrument Sans สำหรับข้อความที่เป็นตัวเลขล้วน (เลขวัน เวลา ระยะเวลา นับถอยหลัง) เปิด tabular figures ตัวเลขจึงไม่กระตุกเวลาเปลี่ยน
ทั้งสองเป็น OFL ใส่ใน res/font ได้ สลับฟอนต์ที่เดียวที่ AxyraFontFamily และ AxyraNumeralFamily
ตั้งค่า > ฟอนต์ มีสองแบบ: Axyra (สองฟอนต์ข้างบน เป็นค่าเริ่มต้น) และ ฟอนต์ของเครื่อง ซึ่งใช้ฟอนต์ระบบทั้งคำและตัวเลข
เปลี่ยนแค่ตระกูลฟอนต์ ขนาด น้ำหนัก ระยะบรรทัด และ tabular figures ยังเป็นตามตารางนี้ (AxyraFonts, FontMode)
ข้อความบนวิดเจ็ตเป็นฟอนต์ของเครื่องอยู่แล้ว ส่วนเวลาบนวิดเจ็ตนาฬิกาเปลี่ยนตามที่เลือก
ขนาดเป็น sp ทุกตัวขยายตามขนาดตัวอักษรของเครื่อง ยกเว้นตัวที่เป็นส่วนของไอคอน (ป้าย “วันนี้” บนเลขวัน) ระยะบรรทัดของภาษาไทยตั้งไว้ไม่ต่ำกว่า 1.45 เท่า เพื่อไม่ให้สระบนและวรรณยุกต์ชนขอบป้าย
ระยะและรูปทรง
ตาราง 4 dp ใช้ 2 และ 3 dp เฉพาะในช่องของเดือน ที่ทุก dp มีผลต่อจำนวนแถว รัศมีมุมบอกลำดับชั้น: ยิ่งชิ้นใหญ่และอยู่บนสุด มุมยิ่งมน ชิ้นที่ต่อกันข้ามวันใช้มุมเหลี่ยมตรงรอยต่อ
รัศมีมุม
ระยะหลัก
การเคลื่อนไหว
ทุกอย่างที่เคลื่อนที่เป็น spring เพื่อรับความเร็วจากนิ้วต่อได้ ไม่มี easing แบบกำหนดเวลาสำหรับการเคลื่อนที่ เส้นกราฟคือการตอบสนองต่อการกระโดดหนึ่งหน่วย คำนวณจากค่าจริงในโค้ด สิ่งที่ “โผล่” เพราะพื้นที่พอ (ป้ายบนเดือน) ไม่ผูกกับเวลา แต่ผูกกับระยะที่ลาก จึงหยุดกลางทางได้และย้อนกลับได้
- ป้ายบนเดือน แถวป้ายใหม่ค่อย ๆ ชัดขึ้นในช่วง 0.3 แถวสุดท้ายของการลาก (opacity = (ความจุ − n) ÷ 0.3) แถวจุดจางออกพร้อมกัน ระหว่างลากไม่มีอะไรกระโดด
- เวลาที่ไหล ขอบ “ตอนนี้” ในแถว แถบ และเส้นเวลา ขยับทุกนาทีแบบไม่มี animation ประหยัดแบต และไม่ดึงสายตา
- ลดการเคลื่อนไหว ถ้าเปิด “นำภาพเคลื่อนไหวออก” ในระบบ spring ที่เป็นการเคลื่อนที่กลายเป็นการตัดไปที่ปลายทาง เหลือแค่ fade
ความลึกและไอคอน
ไม่มีเงา ไม่มีเบลอ ไม่มีแสงสะท้อน ชั้นของหน้าจอบอกด้วยขั้นของสี: พื้น (canvas) อยู่ล่างสุด แผ่น (sheet) ยกขึ้นมาหนึ่งขั้น พื้นสีของกิจกรรมเป็นชั้นบนสุด เส้นบาง (hairline) ใช้เฉพาะตรงที่สองพื้นสีเดียวกันชนกัน เช่นระหว่างสัปดาห์ในเดือน ไอคอนเป็น vector drawable จาก Material ขนาด 20 และ 24 dp เติมทึบ สีตามตัวอักษรที่อยู่ข้าง ๆ