技術乾貨: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.控制元件和列表型別
相關文章
- 乾貨分享!懸浮按鈕設計規範和經典實踐
- 技術乾貨 | Flutter線上程式設計實踐總結Flutter程式設計
- App設計的基本原則和規範APP
- 【乾貨】MySQL資料庫開發規範MySql資料庫
- 技術乾貨 | WebRTC 技術解析之 Android VDMWebAndroid
- UI設計培訓分享:APP圖示設計規範介紹UIAPP
- MySQL資料庫規範 (設計規範+開發規範+操作規範)MySql資料庫
- [乾貨分享]1000篇乾貨好文!量子技術——進階篇
- [乾貨分享]1000篇乾貨好文!量子技術——資訊篇
- 名片設計規範
- 阿里技術精華乾貨整理阿里
- 乾貨 | APP介面設計的色彩注意細節,有哪些?APP
- 【技術乾貨】XSS攻擊、CSRF攻擊基本概念及防範方法
- MySQL 規範 (資料庫表設計規範)MySql資料庫
- 【Mongo】MongoDB乾貨系列-Variety與Document Validation規範欄位MongoDB
- 5500字乾貨:低程式碼/無程式碼技術程式設計為何而生?程式設計
- 乾貨 | 餘額寶大規模服務化的技術創新
- 技術乾貨| MongoDB時間序列集合MongoDB
- 技術乾貨 | 漫遊Linux塊IOLinux
- 2020文章合集 技術乾貨
- JS程式設計規範JS程式設計
- API 介面設計規範API
- RESETful API 設計規範API
- RESTful API 設計規範RESTAPI
- PCB Stack設計規範
- React程式設計規範React程式設計
- Rest Framework設計規範RESTFramework
- python程式設計規範Python程式設計
- [乾貨分享]1000篇乾貨好文!量子技術——專家觀點篇
- GBase XDM 支援的核心技術規範
- 技術乾貨:RabbitMQ面試題及答案MQ面試題
- 技術乾貨:ActiveMQ面試題及答案MQ面試題
- 技術乾貨:Hadoop面試題及答案Hadoop面試題
- 技術乾貨 | WebRTC ADM 原始碼流程分析Web原始碼
- 乾貨!天翼雲DPU技術解碼
- 程式設計小記-程式設計規範程式設計
- Greenplum索引設計的規範索引
- ios12設計規範iOS