如题所述
第1个回答 2022-06-11
一、规范概要
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.控件和列表类型
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.控件和列表类型