为Apple Watch设计:素描设计

最终产品图片
您将要创造的

如果这是您第一次设计可穿戴设备,则会注意到与为智能手机或台式机设计产品相比,存在一些关键差异。

在本快速提示中,我将介绍其中的一些差异,同时还将教您如何为Apple Watch设计。

开始之前

我们将为Apple Watch设计一眼。 提醒一下,扫视是没有交互元素的单个屏幕。 它仅显示信息,可以点击以打开相应的Apple Watch应用。

用户可以通过在表盘屏幕上向上滑动来浏览一目了然。 用户还可以选择希望在Apple Watch上看到的内容。 选择启用,这意味着用户必须明确选择他们想在其设备上看到的一览表。 这是显示其喜爱的应用程序信息的一种优雅而简单的方法。

扫视与应用程序本身的区别在于,扫视是一个屏幕,因此加载速度更快。 相较于相应的Apple Watch应用程序,Glances也更易于访问。

设计准则

苹果手表设计指南

为Apple Watch设计意味着您需要牢记某些准则。 这类似于为iOS或Android设计。 您可以在本系列的上一教程中了解有关设计准则的更多信息。

设计概览

想象一下一个Apple Watch应用程序,用户可以在其中轻松跟踪预算。 乍一看,我们希望显示每日预算,同时还显示用户到目前为止该月已存的钱数。 根据某人白天的消费方式,每日预算会减少。

步骤1:设定画板

打开素描并插入一个新的画板。 右侧的列表显示了可以选择的不同预设画板。 在iOS设备下,选择Apple Watch 42mm

单击图层列表中的画板,然后使用右面板选择背景色。 选择黑色( #000000 )作为背景色。 黑色是App​​le Watch应用程序的默认背景色。

黑色背景的画板

步骤2:一览标题

由于Apple Watch的黑色边框,我们可以在设计中使用画板边缘。 与典型的应用程序或网页设计相比,不需要在设计的左侧或右侧添加边距。

添加标题“预算”,以便用户知道他们正在看的目光。 SF Compact是Apple Watch上使用的默认字体。 您可以在Apple开发人员网站上了解有关Apple Watch 字体的更多信息。 对于42mm的表盘,最好坚持32 pt(对于72 dpi设计)。 文本应在左上角对齐。

带有标题的画板

最后,将标题颜色更改为浅灰色( #a2a5ae ),以减少设计中黑白的对比度。 白色应该保留给我们想要突出的信息,例如剩余预算。

步骤3:每日预算

一目了然的最重要功能是显示用户的每日预算。 我们可以以文字形式呈现此内容,但让我们使设计更有趣。 我想设计一个圆形图,该圆形图随着用户花钱而减少。

首先,使用椭圆形工具制作一个尺寸为220 x 220的圆。在画板上将形状居中并将边框宽度设置为24。单击边框标题旁边的设置图标以打开边框设置菜单。 将“ 间隙”设置为1000,将“ 破折号”设置为138。最后,选择端。 做得好,您已经创建了一个边框。

边框
在边框设置菜单中,您可以创建边框。

禁用圆圈的填充颜色并更改 边框颜色到您选择的角度渐变。 您可以使用旋转功能在屏幕上四处移动形状,但这对于我们的扫视设计不是必需的。

彩色边框
角度渐变非常适合为边框着色。

右键单击图层列表中的椭圆,然后复制该元素。 打开重复形状的边框设置,然后将“ Dash”设置为690。将重复层移动到原始椭圆形层下方,并使用渐变颜色和不透明度进行操作以完成图形。 在下面的示例中,我使用了不透明的灰黑色渐变。

完成的边框

接下来,添加一个文本层,其副本为“剩余$ 14.00”。 将“ $ 14.00”的字体大小设置为38 pt,将“剩余”的字体大小设置为26 pt。 将文字在画板上居中。 我们的目光正慢慢汇聚在一起。

每日预算完成

步骤4:省钱

最后,我们需要显示用户到目前为止该月节省的金额。 我们将使用一览表的底部来添加该信息。 因为我们已经在概览中心处有了一个图形元素,所以我们将使用文本来显示用户已保存的数量。 这将产生一个很好的平衡和丰富的信息。

创建一个新的文本层,并使用SF Compact作为具有较小字体粗细的字体。 我们将创建一个页脚文本。 选择20磅的字体大小,然后将文本设置为“本月节省$ 265.00”。 在画板的左下方对齐文本。

设计一览表时重要的是,设计分页的底部会出现。 用户可以在不同应用程序的不同外观之间滑动。 让我们将页脚文本向上移动40点,以在底部添加一些边距。

由于我们将页脚文本向上移动,因此每日预算部分不会居中。 将包含文本和不同椭圆的组上移20点。 我们完成了。

节省预算

结论

通过一些简单的形状和技巧,我们创造了优雅的Apple Watch外观。 如果您想了解有关为Apple Watch构建产品的更多信息,建议阅读有关选择正确的产品策略的教程或了解有关Apple Watch设计准则的更多信息。

如果您对设计Apple Watch有任何疑问,请在评论中或在Twitter上找到相关信息 。 感谢您的时间。

翻译自: https://code.tutsplus.com/tutorials/designing-for-apple-watch-designing-a-glance-in-sketch--cms-26133

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值