iWatch 界面设计教程来了,3步掌握!

发布时间:2023-01-05 20:25:21

设计 iWatch 上的运动监测类 UI 界面时,需要综合考虑以下几点,并且尽量让界面的设计与苹果的设计理念保持一致,才能设计出更好的界面。设计 iWatch 上的运动监测类 UI 界面时,需要考虑以下几点:

 iWatch 界面设计

1、设计规范

2、功能界面

使用【矩形工具】绘制一个 448px ^ 528px 的矩形,并设置圆角为 90,填充颜色 #000000;按快捷键「option+command+G / Alt+Ctrl+G」创建画板,取消画板的填充;再绘制一个 368px ^ 448px 的矩形,圆角为 66,填充任意颜色,这个矩形就是视图的显示区域。

创建文本,标题的属性:苹方-简、常规体、颜色 #7948EA、字号 34;时间的属性:SF Pro Text、Bold、颜色 #FFFFFF、字号 34;

绘制矩形,尺寸为:330px ^ 88px,圆角为:20,设置填充:#392D48;

绘制圆形,尺寸为:56px ^ 56px,设置填充:#4D71F1;创建文本,文本属性:苹方-简、常规体、颜色 #FFFFFF、字号 28;再绘制图标,或选择「插件」中的「iconPark」 、「 iconfont」中的图标,选中图标和文本创建「自动布局」设置属性为:横向、垂直居中对齐、固定间距 16;使文案内容到矩形的边距都为16;

再复制两个列表项,更换颜色和图标信息;选中所有列表项创建「自动布局」,设置属性为:纵向、左对齐、固定间距 20;

把灰色矩形颜色修改为黑色,功能页面就做好了;

3、训练界面

把刚才做好的视图画板复制一份,修标题信息;

绘制圆形,尺寸为:228px ^ 228px,填充颜色:#000000,描边:居中、颜色 #26254D、大小 3.6;

绘制矩形,尺寸为:230px ^ 230px,取消填充,添加15的居中描边;双击圆环进入「编辑模式」,选择「剪刀」工具,在圆环中中增加一个锚点并剪开;

在「描边」的「更多设置」中选择「圆头端点」;

为圆环添加线性渐变,颜色可自选;

再添加文本信息和暂停图标;

绘制两个功能按钮,置于圆环的下方,不要超出内容安全区域;

把灰色矩形颜色修改为黑色,训练页面就做好了;

以上就是全部的iWatch 界面设计教程,看完之后,可以使用即时设计,一起跟着教程自己做一个iWatch 界面设计吧!