Skip to main content
Version: v3

Watchface Specification

Watchface is the core experience element of smart wearable devices and the most commonly used function of users. The Watchface not only has the time display ability of traditional watches, but also has the function of displaying different kinds of data. The design of the Watchface needs to meet the individual needs of users and match different scenes.

Watchface example

Compose​

Time​

Hour, minute and second

  • Numbers, pointers.
  • The display order of the hands is the second hand at the top, the minute hand at the middle layer and the hour hand at the bottom layer.

Hour, minute and second

Morning and Afternoon

  • Words

Week

  • Picture, pointer, progress.

Week

Day, Month, Year

  • Picture, pointer, progress.
  • For example, the Watchface displays the year, the year/month/day must be displayed together, and the display does not support separate display of the year.

date

Lunar

  • Text
  • Can be configured separately festival/solar coordinates

Lunar

Sports​

Step number

  • Icons, pictures, numbers, pointers, progress.
  • Step number display: the maximum 5 digits are "00000".
  • Target step number display: the maximum number of 5 digits is "00000".

sports

Distance

  • Icons, numbers.
  • Distance display: the maximum 4 digits are "0.00" and "00.0".

distance

Calorie

  • Icons, pictures, numbers, pointers, progress.
  • Calorie number display: the maximum 4 digits are "0000".

calorie

Stand

  • Icons, pictures, numbers, pointers, progress.
  • Current standing display: Maximum 2 digits "00".
  • Standing target display: 12 hours (fixed)

Stand

Health​

Heart rate

  • It consists of icons, pictures, numbers, pointers and progress.
  • Number display of heart rate: the maximum 3 digits are "000".

heart rate

PAI

  • Icons, pictures, numbers, pointers, progress.
  • PAI digital display (maximum 3 digits "000").

PAI

Weather​

Temperature

  • Icons, pictures, numbers, pointers, progress.
  • Real-time temperature display: maximum 5 digits "-000".
  • Minimum temperature display: maximum 5 digits "-000".
  • Maximum temperature display: maximum 5 digits "-000".

temperature

Ultraviolet ray

  • Icons, pictures, numbers, pointers, progress.
  • Ultraviolet digital display: maximum 2 digits "00".

ultraviolet ray

Humidity

  • Icons, pictures, numbers, pointers, progress.
  • Digital display of humidity: maximum 4 digits "000%".

humidity

Air quality

  • Icons, pictures, numbers, pointers, progress.
  • Air quality digital display: the maximum 3 digits are "000".
  • Air quality cannot be displayed in non-Chinese areas. Replace with humidity.

air quality

Sunrise and sunset

  • Icons, pictures, numbers, pointers, progress.
  • Current time display: maximum 5 digits "00:00".
  • Sunrise time display: maximum 5 digits "00:00".
  • Sunset time display: maximum 5 digits "00:00"

sunrise and sunset

Moon phase

  • Picture
  • 7/13/30 pictures of moon phases

Moon phase

Air pressure

  • Icons, pictures, numbers, pointers, progress.
  • Air pressure display: maximum 5 digits "00000".

Air pressure

System​

Battery

  • Icons, pictures, numbers, pointers, progress.
  • Number display: the maximum 4 digits are "100%".

battery

System state

  • Icon.
  • Do not disturb, Bluetooth, lock screen, alarm clock (switch state must be designed).

system state

Safe area​

Leave a safe distance of 2px at the edge. And the display areas of status points and offline voice are reserved at the top and bottom, and no important information is placed.

safe area

Screen-rest mode​

screen-rest mode

The screen-rest mode refers to that the Watchface can display important information such as time in a limited manner in the screen-rest state, which helps users to obtain information without lifting their wrists. It is an essential mode of a Watchface.

The display of interest screen mode is divided into two categories, which follow the interest screen of the current Watchface and the Watchface that users can choose to set independently; The screen following the current Watchface needs to be designed separately by the Watchface designer. Please refer to the design specification.

Design rule​

  • Minimize the number of Watchface elements, so that the illuminated pixels do not exceed 10% of the screen.
  • Don't use the second hand on the Watchface.
  • The background color of the Watchface must be black (#000000) and the main color of the pointer must be white (#FFFFFF).
  • Keep the pointer/digital cutting size consistent.
  • Because it is necessary to switch between the rest screen and the bright screen, the element movement should be minimized to avoid jumping during switching.
  • To ensure recognition, keep the basic time scale (not mandatory).
  • Except time, the priority of other elements is: steps > date > weather > electricity > heart rate > others (not mandatory but basically observed).

Pointer processing method​

Pointer silhouette/digital silhouette + outer edge black stroke

  • Remove the texture parameters such as gradient, highlight, shadow, etc., and keep the silhouette of the pointer/number.
  • The black stroke of 1~2px on the outer edge of the pointer is used to distinguish the relationship between the upper and lower layers of the pointer and the relationship between the pointer and the data.
  • According to the characteristics of the Watchface, the color of the pointer can be increased, but as little as possible.

pointer

White film + outer edge black stroke

  • The pointer retains part of the structural light and shadow, and the whole effect is "white film"
  • The black stroke of 1~2px on the outer edge of the pointer is used to distinguish the relationship between the upper and lower layers of the pointer and the relationship between the pointer and the data.

pointer

Digital processing method​

Font stroke or reduce font

  • Generally, the figure area of time is large, so the outer contour stroke is adopted, and the stroke width is not less than 2px.
  • Stroke color Select white or color with high lightness. When the lighting area is less than 10%, you can not use stroke processing.

digital processing method

Default data​

Preview Watchface chart and default data when making Watchface should be input according to the following specifications

time

  • Number/pointer time: 10:09:36 10:09:36 (the angle of the second hand can be chosen by yourself, avoiding the main elements and avoiding occlusion)
    Hour: 304 degrees (the hour hand follows the minute change, not the second hand)
    Minute: 54 degrees (minute hand does not follow the second change)
    Seconds: 216 degrees (as long as the second hand does not make a full turn, the angle can be adjusted at will, and the minute hand does not need to be changed)
  • Date: February/August

Health

  • Heat: 280kcal, 280 kcal
  • Heart rate: 86 beats/min, 86bpm
  • Number of steps: 8670steps, 8670 steps
  • Distance: 5.30

Weather

  • Weather: 22 C/-108 F (unit supports switching between Fahrenheit and Celsius)
  • Humidity: 42%
  • AQI (Air Quality Index): 26
  • UVI (ultraviolet): 4
  • Sunrise: 06:30 and sunset: 06:30

Setting

  • Electricity: 75%

Week and month abbreviation specification​

typeCaseAll capitalsThe first letter is capitalized and ends with a dot (.)Abbreviation 1Abbreviation 2
week1. Monday
2. Tuesday
3. Wednesday
4. Thursday
5. Friday
6. Saturday
7. Sunday		1. MONDAY
2. TUESDAY
3. WEDNESDAY
4. THURSDAY
5. FRIDAY
6. SATURDAY
7. SUNDAY		1. Mon.
2. Tue./Tues.
3. Wed.
4. Thu./Thur./Thurs.
5. Fri.
6. Sat.
7. Sun.		1. MON
2. TUE/TUES
3. WED
4. THU/THUR/THURS
5. FRI
6. SAT
7. SUN		1. Mo.
2. Tu.
3. We.
4. Th.
5. Fr.
6. Sa.
7. Su.
month1. January
2. February
3. March
4. April
5. May
6. June
7. July
8. August
9. September
10. October
11. November
12. December		1. JANUARY
2. FEBRUARY
3. MARCH
4. APRIL
5. MAY
6. JUNE
7. JULY
8. AUGUST
9. SEPTEMBER
10. OCTOBER
11. NOVEMBER
12. DECEMBER		1. Jan.
2. Feb.
3. Mar.
4. Apr.
5. May
6. Jun.
7. Jul.
8. Aug.
9. Sep./Sept.
10. Oct.
11. Nov.
12. Dec.		1. JAN
2. FEB
3. MAR
4. APR
5. MAY
6. JUN
7. JUL
8. AUG
9. SEP/SEPT
10. OCT
11. NOV
12. DEC		无

Naming rule​

Continuous elements must end with 0~9 to ensure correct reading and writing.

Basic data​

typenameexplain
timetime_# ( "#" 序列 0~9)When the digital font style of the time/minute/second is the same, it shall be named uniformly.
hour_#，minute_#，second_#When/min/sec digital font styles are different, they are named separately.
pointerhour，minute，secondWhen the time/minute/second is the pointer style, it is named separately.
numberfont_#_(0~9)E.g "font_power_1"，
empty data " - - "#_invalidE.g "heart_invalid"
separator " / "slashCommonly used for date and temperature division, E.g "12/04"
separator " - "negativeCommonly used for date division, temperature, E.g "12-04"
separator " : "colonCommonly used in time division,E.g "10:09"
separator " . "dotCommonly used in time record segmentation, fE.g "30.27"
separator " % "percentCommonly used percentage of electricity consumption, E.g "00%"
morningam_#
afternoonpm_#
monthmonth_#_（jan~dec）
yearyear_#
backgroundbg
linear progress#_line
circular progress#_circle
custom progress#stage(0~10)
application preview picturepreview_#"#" language classification, Simplified (sc), Traditional (tc), English (en)
watch previewpreview_#"#" language classification, Simplified (sc), Traditional (tc), English (en)

Type data​

typenameexplaincustom progressmaximum digit
heart rateheartSection 63 bits（000）
caloriecalorieSection 104 bits（0000）
paipaiSection 103 bits（000）
stepstepSection 105 bits（00000）
distancedistance5 bits（00000）
weatherCloudy: 0
Shower: 1
Snow shower: 2
Sunny: 3
Overcast: 4
Light rain: 5
Light snow: 6
Moderate rain: 7
Moderate snow: 8
Heavy snow: 9
Heavy rain: 10
Sandstorm: 11
Sleet: 12
Fog: 13
Haze: 14
Thundershower: 15
Snowstorm: 16
Dust: 17
Extraordinary rainstorm: 18
Rain with hail: 19
Thundershowers with hail: 20
Heavy rainstorm: 21
Sand blowing: 22
Strong sandstorm: 23
Rainstorm: 24
Unknown weather: 25
Cloudy at night: 26
Shower at night: 27
Clear night: 28		The picture must correspond to the number.
temperaturetemperatureSection 103 bits（000）
humidityhumiditySection 103 bits（000）
ultraviolet rayuviSection 102 bits（00）
air qualityaqiSection 103 bits（000）
sunrisesunrise
sunsetsunset
batterypowerSection 103 bits（000）
Bluetoothconnect/disconnect
lock Screenlock / unlock
alarm clockclock / unclock
dndDNDoff / DNDopen

Graph cutting specification​

Element​

  • The size of the tangent graph of the same kind of elements remains the same, and the safe distance is kept at least 2px.
  • Pointer: The width of pointer cutout must be odd and the height is unlimited. The width and height of the red color block is the rotation center point of the pointer.

pointer

Preview Picture​

Each Watchface must provide a preview Picture.

Device resolutionThumbnail size
480*480324*324
454*454306*306
416*416280*280
390*450266*306
402*476273*316
302*320202*214
306*354210*242