技术干货:Applewatch APP设计规范

一、规范概要

1. 导航形式

层级式,通过当前页面点击跳转到另外页面的形式。适合应用于复杂产品,需要层层递进。

页面式,页面切换,滑动,类似轮播

Apple Watch导航形式任选其一,不得同时存在。

2. 交互方式

轻触:列表、按钮、切换等控件的操作

手势:纵向轻扫,界面滚动;横向轻扫,界面导航之间的查看;从屏幕左侧边缘向右轻扫,返回父级界面。

压力触控:唤出当前页面情景菜单

实体控件(手表旋钮):长页面浏览,避免手指长时间轻扫界面何遮挡界面

3. 色彩

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

高对比度的颜色使用于文字、图标、界面

4文字

SF和苹方

5. 图标

通知图标、首屏图标和长看图标、短看图标

情景图标(App内功能图标)

6. 布局

并排放置的图标一行不要超过三个

布局优先采用左对齐

二、设计尺寸

1.1屏幕尺寸

38mm(272*340px)

42mm(312*390px)

技术干货:Applewatch APP设计规范_第1张图片


技术干货:Applewatch APP设计规范_第2张图片


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)

技术干货:Applewatch APP设计规范_第3张图片


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

技术干货:Applewatch APP设计规范_第4张图片


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

技术干货:Applewatch APP设计规范_第5张图片


2.字体和文字

2.1字体

SF和苹方

2.2文字(字号,常见字号单位是PT和PX,PT是开发单位,PX是设计单位,在@2X下换算关系1PT=2PX)

标题headline 18PT

正文标题caption 15PT

正文body 15PT

备注、脚注、辅助文字footnote 12PT、13PT

3. 颜色

高对比度的颜色使用于文字、图标、界面

1.主色,如下图所示

技术干货:Applewatch APP设计规范_第6张图片


2.辅助色、点睛色(控件、按钮)

技术干货:Applewatch APP设计规范_第7张图片


按钮控件在设计中通常带有透明度

3.字体颜色和透明度

技术干货:Applewatch APP设计规范_第8张图片


4. 布局

1状态栏和下方图片和列表布局间距



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

技术干货:Applewatch APP设计规范_第9张图片


技术干货:Applewatch APP设计规范_第10张图片


2状态栏和列表按钮布局间距

技术干货:Applewatch APP设计规范_第11张图片


技术干货:Applewatch APP设计规范_第12张图片


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

技术干货:Applewatch APP设计规范_第13张图片


技术干货:Applewatch APP设计规范_第14张图片


3状态栏和下方文本布局间距

技术干货:Applewatch APP设计规范_第15张图片


技术干货:Applewatch APP设计规范_第16张图片


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

技术干货:Applewatch APP设计规范_第17张图片


技术干货:Applewatch APP设计规范_第18张图片


4文字边距和分割线按钮列表图片边距

技术干货:Applewatch APP设计规范_第19张图片


技术干货:Applewatch APP设计规范_第20张图片


38mm和42mm边距相同

5.图片和按钮到屏幕两边距离

技术干货:Applewatch APP设计规范_第21张图片


38mm和42mm边距相同

5.控件和列表

1单行控件和列表布局尺寸

38mm

技术干货:Applewatch APP设计规范_第22张图片


42mm

技术干货:Applewatch APP设计规范_第23张图片


2.双行控件和列表布局尺寸

2.1正文+备注

38mm

技术干货:Applewatch APP设计规范_第24张图片


42mm

技术干货:Applewatch APP设计规范_第25张图片


2.2双行正文

38mm

技术干货:Applewatch APP设计规范_第26张图片


42mm

技术干货:Applewatch APP设计规范_第27张图片


3.三行控件和列表布局尺寸

38mm

技术干货:Applewatch APP设计规范_第28张图片


42mm

技术干货:Applewatch APP设计规范_第29张图片


4. 多行控件和列表布局尺寸

38mm

技术干货:Applewatch APP设计规范_第30张图片


42mm

技术干货:Applewatch APP设计规范_第31张图片


5.控件和列表类型

技术干货:Applewatch APP设计规范_第32张图片

你可能感兴趣的:(技术干货:Applewatch APP设计规范)