如果这是您第一次设计可穿戴设备,则会注意到与为智能手机或台式机设计产品相比,存在一些关键差异。
在本快速提示中,我将介绍其中的一些差异,同时还将教您如何为Apple Watch设计。
开始之前
我们将为Apple Watch设计一眼。 提醒一下,扫视是没有交互元素的单个屏幕。 它仅显示信息,可以点击以打开相应的Apple Watch应用。
用户可以通过在表盘屏幕上向上滑动来浏览一目了然。 用户还可以选择希望在Apple Watch上看到的内容。 选择启用,这意味着用户必须明确选择他们想在其设备上看到的一览表。 这是显示其喜爱的应用程序信息的一种优雅而简单的方法。
扫视与应用程序本身的区别在于,扫视是一个屏幕,因此加载速度更快。 相较于相应的Apple Watch应用程序,Glances也更易于访问。
设计准则
为Apple Watch设计意味着您需要牢记某些准则。 这类似于为iOS或Android设计。 您可以在本系列的上一教程中了解有关设计准则的更多信息。
设计概览
想象一下一个Apple Watch应用程序,用户可以在其中轻松跟踪预算。 乍一看,我们希望显示每日预算,同时还显示用户到目前为止该月已存的钱数。 根据某人白天的消费方式,每日预算会减少。
步骤1:设定画板
打开素描并插入一个新的画板。 右侧的列表显示了可以选择的不同预设画板。 在iOS设备下,选择Apple Watch 42mm 。
单击图层列表中的画板,然后使用右面板选择背景色。 选择黑色( #000000 )作为背景色。 黑色是Apple 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上找到相关信息 。 感谢您的时间。