สีคือเวลา
ที่เหลือ
ระบบดีไซน์ของ Axyra Calendar เวอร์ชัน 1.1 ฉากของแอปเรียบ มีแค่สว่างกับมืด สีของกิจกรรมเป็นสีสดอย่างเดียวบนจอ และค่อย ๆ จางลงเมื่อเวลาของมันผ่านไป เอกสารชุดนี้คือสเปกที่ใช้ทำจริง มีทั้ง token กติกา ขนาด และหน้าจอทุกแบบที่แอปต้องรองรับ ลากแถบเวลาด้านบนเพื่อดูว่าแต่ละช่วงของวันมีอะไรจางไปบ้าง
ใน 1.1
ใน 1.0
- ป้ายบนเดือนขึ้นเป็นชื่อก่อนเสมอทุกชนิดของงาน จำนวนแถวคิดจากความสูงจริงของแถว ไม่ตายตัวที่ 2 ลาก drawer ลงก็เห็นมากขึ้น ส่วนที่ไม่พอวางลงเป็นจุดแถวเดียว ลำดับคือ งานข้ามวัน แล้วงานทั้งวัน แล้วงานที่มีเวลา วันนี้ งานที่มีเวลาที่จบแล้วเป็นจุดเสมอ
- ป้ายสามแบบ สามรูปทรงงานข้ามวันเป็นแถบยาวมีขีดหัว งานทั้งวันวันเดียวเป็นก้อนไม่มีขีด งานที่มีเวลาเป็นแคปซูลพื้นอ่อน งานที่มีเวลาจริงมีขีดเวลาบนขอบล่าง ไม่มีพื้นสีเข้มทั้งก้อน
- แถวในรายการของวันใช้สีอ่อนของกิจกรรมแทนสีเทา งานที่กำลังเกิดจางลงจากซ้ายตามเวลาที่ผ่านไป ช่วงว่างระหว่างงานบอกเป็นเวลา
- ไทม์ไลน์แบบ Ganttงานหลายวันเป็นแถบเดียวกับบนเดือน มีงานย่อยเป็นขีด หมุดหมาย วันหยุด และงานทำซ้ำ ใช้ได้ทั้งมือถือและจอพับ
- จอพับกางเป็นหนังสือ: เดือนซ้าย วันขวา ตั้งบนโต๊ะ: เดือนบน วันไหลจากซ้ายไปขวาที่ครึ่งล่าง
- วิดเจ็ตกิจกรรมที่จะถึงภาษาเดียวกับ drawer แถบฟ้า 24 ชั่วโมงบอกรูปร่างของวัน แถวที่กำลังเกิดจางจากซ้าย งานหลายวันย่อเป็นชิปแถวเดียว
- วิดเจ็ตนาฬิกาแถบฟ้าดัดเป็นวงรอบตัวเลขเวลา กิจกรรมของวันนี้เป็นส่วนโค้ง เข็มคือเส้นตอนนี้ ครึ่งขวาเป็นรายการ
หลักที่ใช้ตัดสินทุกอย่าง
ถ้าเจอกรณีที่เอกสารไม่ได้เขียนไว้ ให้เลือกทางที่ตรงกับหกข้อนี้
สีคือเวลาที่เหลือ
อะไรที่ผ่านไปแล้วจางเป็นสีอ่อนของตัวเอง ไม่ใช้ความโปร่งใส แถบทั้งวัน แถวในรายการ แถบ Gantt และขีดบนแถบฟ้าใช้กติกาเดียวกัน งานที่จบแล้วเปลี่ยนจุดเป็นวงกลวง
ฉากเงียบ สีสดเป็นของกิจกรรม
พื้นกับตัวอักษรมีสองชุด สว่างกับมืด โทนเย็นเกือบเป็นกลาง ไม่เปลี่ยนตามเวลา สีสดบนจอมีแค่สีของกิจกรรม กับสีของ “ตอนนี้”
พื้นที่เป็นตัวกำหนดจำนวน
ไม่มีตัวเลขตายตัวว่าแสดงกี่ป้าย ทุกอย่างคิดจากความสูงจริงหลังรวมขนาดตัวอักษรของเครื่องแล้ว จอยาว dpi สูง หรือ drawer ต่ำ ก็เห็นมากขึ้นเอง
เรียบ ไม่มีเงา ไม่มีกระจก
ความลึกมาจากขั้นของสี พื้น แผ่น แล้วสีของกิจกรรม เส้นบางใช้เฉพาะตรงที่พื้นสีเดียวกันมาชนกัน
ตัวอักษรผ่านเกณฑ์ทั้งสองโหมด
สีตัวอักษรถูกแก้ให้ได้ 4.5:1 กับพื้นที่มันวางอยู่ ทั้งพื้น แผ่น และพื้นสีของกิจกรรมทุกสี ทั้งโหมดสว่างและโหมดมืด
พูดได้ในประโยคเดียว
ทุกช่องและทุกแถวอ่านออกเสียงเป็นประโยคเดียว ชื่อขึ้นก่อน ตามด้วยเวลาและสถานะ สิ่งที่ทำได้ด้วยการปัดอย่างเดียวมีปุ่มทางลัดให้
หน้าจอหลัก
Pixel 9 Pro (427×952 dp) ตอน drawer ต่ำ จอยาวกว่า S24 ด้านบนจึงวางชื่อได้ 5 แถวต่อวัน หัวของหน้ารายละเอียดเป็นสีอ่อนของกิจกรรมเหมือนแถว มีแถบเวลาบอกว่างานอยู่ตรงไหนของวัน และไทม์ไลน์ใช้ภาษาเดียวกับเดือน
โหมดมืด
ตั้งค่า > ธีม มีสองแบบ: สว่างและมืด ครั้งแรกที่เปิดแอปใช้ตามธีมของระบบ สีของฉากไม่เปลี่ยนตามเวลาของวัน โหมดมืดเป็นเทาเข้มอมฟ้านิด ๆ ไม่ใช่ดำสนิท พื้นของกิจกรรมผสมสีมากขึ้น (แถบ 32% แถว 26%) เพราะพื้นมืดกลืนสีอ่อน ตัวอักษรทุกตัวถูกแก้ค่าใหม่ให้ผ่านเกณฑ์เหมือนโหมดสว่าง สองเครื่องแรกคือหน้าเดียวกัน เวลาเดียวกัน ต่างกันแค่ธีม
จากเอกสารไปโค้ด
ชื่อในเอกสารตรงกับชื่อในโค้ด ส่วนที่ขึ้นว่าใหม่คือสิ่งที่ต้องเพิ่ม ส่วนที่ขึ้นว่าปรับคือเปลี่ยนกติกาในไฟล์เดิม
| ส่วน | ในโค้ด | งาน | หน้า |
|---|---|---|---|
| สีของฉาก | LightAxyraColors, DarkAxyraColors ใน core/designsystem/Color.kt | ปรับค่าเป็นโทนเย็น เลือกตามตั้งค่าธีม | พื้นฐาน |
| โทนของสีกิจกรรม | EventTones ใน core/designsystem/EventColors.kt | ใหม่ แทน contentColorOn() บนพื้นสีทึบ | พื้นฐาน |
| ตัวอักษร | AxyraFontFamily (Anuphan), AxyraNumeralFamily (Instrument Sans), AxyraTypography | ปรับ | พื้นฐาน |
| การเคลื่อนไหว | AxyraMotion | คงเดิม เพิ่มการโผล่ของป้าย | พื้นฐาน |
| จัดแถวกิจกรรมในสัปดาห์ | layoutWeek() ใน core/model/WeekLayout.kt | ปรับ: สามชั้น ข้ามวัน ทั้งวัน มีเวลา งานที่มีเวลาที่จบแล้ววันนี้ไม่ได้แถว | ป้ายบนเดือน |
| จำนวนป้ายและแถวจุด | laneCapacity(), WeekPainter ใน ui/month/MonthGrid.kt | ปรับ: เลิกสลับทั้งช่องเป็นจุดที่ 2 แถว วาดแคปซูลและขีดเวลา | ป้ายบนเดือน |
| รายการของวัน | DayDrawer.kt, DayAgenda.kt | ปรับแถวและช่วงว่าง | รายการของวัน |
| ไทม์ไลน์ | ui/timeline/ ใช้ layoutWeek() แบบหลายสัปดาห์ | ใหม่ | ไทม์ไลน์ |
| จอพับ | homePanes() ใน ui/home/HomePanes.kt | คงกติกา ปรับหน้าตา Tabletop | จอพับ |
| วิดเจ็ตกิจกรรมที่จะถึง | widget/, WidgetAgenda.of() | ปรับ: แถบฟ้า ชิป ถังความสูง 280 dp | วิดเจ็ต |
| วิดเจ็ตนาฬิกา | ใหม่ ใน widget/ | ใหม่: TextClock ใน AndroidRemoteViews กับหน้าปัดที่วาดลง bitmap | นาฬิกา |
| ฟ้า | ตารางแยกของบทฟ้า: SkyCalculator, skyEvents(), SkyRoute, Occasion | ใหม่ใน 1.1 | ภาพรวมฟ้า |