技術乾貨：Applewatch APP設計規範

一、規範概要

1. 導航形式

層級式，通過當前頁面點選跳轉到另外頁面的形式。適合應用於複雜產品，需要層層遞進。

頁面式，頁面切換，滑動，類似輪播

Apple Watch導航形式任選其一，不得同時存在。

2. 互動方式

輕觸：列表、按鈕、切換等控制元件的操作

手勢：縱向輕掃，介面滾動；橫向輕掃，介面導航之間的檢視；從螢幕左側邊緣向右輕掃，返回父級介面。

壓力觸控:喚出當前頁面情景選單

實體控制元件（手錶旋鈕）：長頁面瀏覽，避免手指長時間輕掃介面何遮擋介面

3. 色彩

使用黑色作為APP的背景色，或者深色且高斯模糊的圖片作為背景

高對比度的顏色使用於文字、圖示、介面

4文字

SF和蘋方

5. 圖示

通知圖示、首屏圖示和長看圖示、短看圖示

情景圖示（App內功能圖示）

6. 佈局

並排放置的圖示一行不要超過三個

佈局優先採用左對齊

二、設計尺寸

1.1螢幕尺寸

38mm(272*340px)

42mm(312*390px)

1.2圖示尺寸

通知圖示48PX（38mm）55px（42mm）

首屏圖示和常看圖示80px（38mm）88px（42mm）

短看圖示172px（38mm）196px（42mm）

選單情景圖示（App內的功能圖示）

圖示大小70px，實際圖示大小46px。（38mm）

圖示大小80px，實際圖示大小54px。（42mm）

圖示線寬不得小於4px

1.3圖示

1.3.1

通知圖示，系統通知彈出的圖示

1.3.2

首屏圖示，如下圖所示。首屏圖示80px（38mm）88px（42mm）

1.3.3長看圖示，如下所示，左上角圖示。常看圖示80px（38mm）88px（42mm）

1.3.4短看圖示，如下圖所示。短看圖示172px（38mm）196px（42mm）

2.字型和文字

2.1字型

SF和蘋方

2.2文字（字號，常見字號單位是PT和PX，PT是開發單位，PX是設計單位，在@2X下換算關係1PT=2PX）

標題headline 18PT

正文標題caption 15PT

正文body 15PT

備註、腳註、輔助文字footnote 12PT、13PT

3. 顏色

高對比度的顏色使用於文字、圖示、介面

1.主色，如下圖所示

2.輔助色、點睛色（控制元件、按鈕）

按鈕控制元件在設計中通常帶有透明度

3.字型顏色和透明度

4. 佈局

1狀態列和下方圖片和列表佈局間距

38mm(30px),42mm(32px)

2狀態列和列表按鈕佈局間距

38mm(11px),42mm(13px)

3狀態列和下方文字佈局間距

38mm(46px),42mm(50px)

4文字邊距和分割線按鈕列表圖片邊距

38mm和42mm邊距相同

5.圖片和按鈕到螢幕兩邊距離

38mm和42mm邊距相同

5.控制元件和列表

1單行控制元件和列表佈局尺寸

38mm

42mm

2.雙行控制元件和列表佈局尺寸

2.1正文+備註

38mm

42mm

2.2雙行正文

38mm

42mm

3.三行控制元件和列表佈局尺寸

38mm

42mm

4. 多行控制元件和列表佈局尺寸

38mm

42mm

5.控制元件和列表型別

​