技術乾貨:Applewatch APP設計規範

weixin_34378969發表於2018-09-17

一、規範概要

1. 導航形式

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

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

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

2. 互動方式

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

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

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

實體控制元件(手錶旋鈕):長頁面瀏覽,避免手指長時間輕掃介面何遮擋介面

3. 色彩

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

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

4文字

SF和蘋方

5. 圖示

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

情景圖示(App內功能圖示)

6. 佈局

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

佈局優先採用左對齊

二、設計尺寸

1.1螢幕尺寸

38mm(272*340px)

42mm(312*390px)

13211021-effc753f17f6ae3c


13211021-34f45ca1b4dace2b


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)

13211021-b607ad43a1c2bb4c


1.3.3長看圖示,如下所示,左上角圖示。常看圖示80px(38mm)88px(42mm)

13211021-aaad7515706d4534


1.3.4短看圖示,如下圖所示。短看圖示172px(38mm)196px(42mm)

13211021-e2bab1791d270fce


2.字型和文字

2.1字型

SF和蘋方

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

標題headline 18PT

正文標題caption 15PT

正文body 15PT

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

3. 顏色

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

1.主色,如下圖所示

13211021-d515edbe73a27378


2.輔助色、點睛色(控制元件、按鈕)

13211021-02c208f43b4496b9


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

3.字型顏色和透明度

13211021-fded690db4e5c23b


4. 佈局

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

13211021-19c1adacaef667c7


13211021-bc2858fac056895c


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

13211021-888d3f3931801958


13211021-07807783d0de7dd8


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

13211021-11eea3ef438ffde0


13211021-7ef3ce0e8655b6c3


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

13211021-5963e9e05017737f


13211021-db90a3eb3b016c0b


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

13211021-9be4ba91c900954b


13211021-b994999112a3bac7


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

13211021-deee3a0b83ec5fb9


13211021-4907b671003bc162


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

13211021-2974275953df662b


13211021-302f9be78d17ef22


38mm和42mm邊距相同

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

13211021-40d694dbd2dd5f59


38mm和42mm邊距相同

5.控制元件和列表

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

38mm

13211021-db9f34abb378f342


42mm

13211021-8bb92d4ceaa84ca5


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

2.1正文+備註

38mm

13211021-8745944a52c47c03


42mm

13211021-d569fef8a804a434


2.2雙行正文

38mm

13211021-29b438630b894371


42mm

13211021-d10d5229ba2d8200


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

38mm

13211021-b0a99297eec46b96


42mm

13211021-3f8c78394554b651


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

38mm

13211021-3a9510b2b8b45383


42mm

13211021-702b9d5af22b8748


5.控制元件和列表型別

13211021-bf8a0b7e62afd461

相關文章