超实用的APPLE WATCH设计入门

   这个月晚些时候,众望所归的Apple Watch会带来成千上万的手表应用,冲击应用市场,吸引你的注意。由于屏幕尺寸更小,又始终戴在手腕上,交互方式也有所不同。要在Apple Watch上创造一个美观、舒适的体验,需要新的设计方式。本文将带你入门 >>>

  本文中,你将学习如何通过一些基础理论和准则,为Apple Watch设计应用,借此初探可穿戴设备设计。

  应用结构

  Apple Watch应用有3部分:WatchKit App、Glance界面和通知。每种都有不同的目的,面临不同的设计挑战。

  WatchKit App


  WatchKit App是查看应用数据或与之交互的主要手段。它通常从手表主屏进入,但也可以从Glance或通知进入。

  很重要的一点,要知道WatchKit App*只有两种类型的导航——层级式和页面式*。虽然iOS应用可以编写出自定义导航,但WatchKit App限制很严格,目前并不支持。


  层级式非常适合相对复杂的应用,类似很多现存iPhone应用,用户在其中需要进行一系列的选择,然后到达结束界面。牢记Apple预期用户在10秒内突击使用手表,所以别在手表上照搬现成应用,应该将它升华。


  页面式通过横向滑动,让用户在多个页面间穿梭。如果各页数据并不依赖其他页面,这种导航方式更佳。

  开始设计时,想清楚什么数据对用户最重要,相互关系如何,然后选择最适于体现数据的导航结构。

  Glance


  Glance是一系列可浏览的内容,基于时间或环境,穿戴者从最喜欢的应用中挑选而出。在Apple Watch上上滑可以触发Glance,然后可以水平滑动。Glance不是必须的,所以并非所有应用都具有,或者需要。

  Glance被限制在无法滚动的一屏中,所以你得把最有用、最重要的信息展现在屏幕上,可以通过颜色、不同字号和图片来在视觉上区别你的Glance。在Glance上点击任何地方,会打开手表应用。所以要避免在其中包含按钮、滑块和菜单这样的操作项。


  最后,Glance基于一些模版。所以你的设计要选择一种最能体现数据意义的形式。Apple提供了一系列模版,适用于上半屏和下半屏。

  通知


  Apple Watch应用有两种通知状态,分别叫做short-look和long-look界面。用户首次收到通知时,short-look通知会出现,持续较短一段时间。用户可以降低手腕忽略通知,也可以抬起手腕或点击short-look通知,进入long-look查看详细信息和功能。

  由于手表始终戴在手腕上,你得对通知有所限制,只推送最有用的信息。如果你持续被不重要的消息打断,那是很令人厌烦的。最好的通知会使用用户的环境信息——比如位置、时间或活动——来提供实时、相关的信息。


  short-look界面包含应用图标、应用名称和通知的标题。由于标题是你唯一能控制的东西,它需要为通知的内容提供简短的提示。


  所有应用的long-look界面结构都是一样的。顶部显示应用图标和名称(也可以自定义这一条的颜色),底部是忽略按钮。中间是定制内容,至多4个自定义操作按钮。

  交互方式

  除了手机上那些我们熟悉的日常手势——点击和滑动,Apple Watch提供了两种新的交互方式:

  滚轮


  应用可以通过滚轮来滚动,不会像手指滑动那样挡住屏幕。滚轮尤其适用于长页面的滚动。

  按压


  Apple Watch的屏幕可以区分点击和按压。就像鼠标的右键单击一样,按下可以显示当前界面的菜单,其中包含至多4项相关内容。

  双指缩放这样的多点触控手势在手表上是没有的。

  布局


  Apple Watch有两种尺寸——33mm和43mm。小屏幕尺寸是340×272像素,大屏幕是390×312像素。手表的一大特点是retina屏,就像iPhone那样,你要提供两倍分辨率大小的图片。

  你不必提供不同尺寸的图片(虽然可以这么做),也不必设计两套不同的布局。因为Apple使用相对尺寸和距离,图片和组件会缩放充满可用空间。


  设计应用时,Apple建议用黑色背景来配合外框。相比浅色,深色与亮色的搭配更好。由于外框提供了额外的边距,占满可用空间、按满屏宽度设计非常重要。

  至于按钮,Apple也建议满屏宽。不过,如果你有并列按钮,应该用图标代替文字。一行中不建议包含3个及以上按钮,因为屏幕太小。同一屏中的按钮应该高度相同,以保持视觉一致性。

  颜色

  由于是在深色背景上设计,你得在应用中使用明亮、高对比度的颜色。颜色也可以作为你应用品牌的一部分。


  每个应用可以定义一个“主色”,它会显示在状态栏的标题和通知的应用名称上。还可以自定义long-look通知的顶栏颜色。

  动画


  美观、细致的动画可以提升用户体验,使应用更迷人、更具诱惑力,令人过目不忘。设计手表上的动画时,要确保它足够迅速,而且确有其目的。如果动画阻滞了用户获取他们所需的信息,则会损害用户体验。

  在Apple Watch上创作动画时,你可不能给工程师一张GIF图,然后让他动态实现。你得提供每一帧的独立静态图片,来制作更快速和流畅的动画集成。最佳方式是将你的动画文件导入After Effects或Photoshop,提取出独立的每一帧。

  Context menu


  Context menu至多显示4个操作项,它表现为一个带有标签的圆形图片。点击某个操作项或屏幕上的任意位置,菜单收起。设计Context menu时无需考虑颜色。就像iOS应用的标签栏图标一样,Context menu的图标是模版内置图片,颜色仅仅定义了图标的形状。


  对于Context menu,你得给每个图标提供两种大小的图片。在42mm的手表上,图标的线宽通常比38mm版多1像素。

  字体


  Apple开发了一套无衬线字体,叫做San Francisco ,为Apple Watch的易读性做过专门处理,包含23种变化。虽然你也可以用自定义字体,Apple建议使用内置文字样式,因为它们是专为小屏幕设计的。

  使用Apple系统字体的另一项好处,是标签过长时文字会自动缩放。随着字号增大,字间距会减少。如果要指定字号,那么San Francisco字体建议使用19点或更小字号。San Francisco的Display字体应该用于20点或更大的字号。

  应用图标


  像iOS主屏图标一样,Apple Watch也需要一个应用图标。和iPhone不同,iPhone以方形显示应用图标和名称,Apple Watch是圆的,不包含标签。这就使你的图标必须比iOS应用图标更容易辨识和熟悉,同时表达出它的作用。

  为这么小的屏幕设计应用图标时,简洁为先。在炫目的应用图标海洋中,图标是用户打开应用前首先看到的东西,所以你得通过优美的图标设计留下良好的第一印象。


  设计不同尺寸的图标,来适配两种手表尺寸和各个展现图标的界面。系统会自动为图标加上圆形蒙版,所以图标应该依据Apple提供的指南做成方形图片。

  可以下载这个好用的Apple Watch图标模版来生成图标。

  基础之外

  Apple Watch为用户提供了一种不唐突的数据获取方式,这对他们至关重要。通过理解一款应用的结构、交互方式和最佳设计原则,我们可以在Apple Watch上打造更加美观、讨人喜爱的体验。

  要深入学习入门,请看Apple Watch人机交互指南,并且下载Apple Watch设计资源,里面有一系列模型、参考、模版和字体。

  关于讨人喜爱的可穿戴设备体验设计,更多细节、窍门和资源请看为可穿戴设备而设计。这是一门免费课程,让你一步一步经历Apple Watch的应用设计。

时间: 2024-07-29 21:38:31

超实用的APPLE WATCH设计入门的相关文章

超实用的动效设计入门小手册

  这篇小册子的目的不是手把手教你如何做出一个动效,而是从基础动效.动效曲线.动效软件等方面从头梳理相关的知识点,串成一片,帮助你从整体轮廓上认识动效,适合零基础及新手阅读. 最近几年UI设计领域最大的变化便是越来越强调用户体验设计,而在Web或者App中使用动效也就成了一大趋势.这种趋势是如此强烈,以至于我看到越来越多的应用中所使用的那些动效已经不再是为了提升用户体验,而更多是为了强调动效本身了. 设计师 Pasquale D'Silva 在 Web Direction South 大会上曾这

Apple的设计魅力:浪漫主义与理性主义

说到Apple的产品,相信大家脑袋上都会浮现出这样的一些关键词:"简洁,精致,高端,酷-".很多人还没有使用Apple产品,就已经被它的产品设计所吸引了,这就是Apple的设计魅力. Apple的工业设计一直都是走在业界的最前端. 它的产品设计到底经历了怎样的一个过程呢?ID公社 曾指出Apple的设计可以分为"浪漫主义"和"后浪漫主义".按我的理解,"后浪漫主义"如果用"理性主义"来描述可能会更加容易理解

Apple的设计魅力:简洁,精致,高端,酷

说到Apple的产品,相信大家脑袋上都会浮现出这样的一些关键词:"简洁,精致,高端,酷-".很多人还没有使用Apple产品,就已经被它的产品设计所吸引了,这就是Apple的设计魅力. Apple的工业设计一直都是走在业界的最前端. 它的产品设计到底经历了怎样的一个过程呢?ID公社 曾指出Apple的设计可以分为"浪漫主义"和"后浪漫主义".按我的理解,"后浪漫主义"如果用"理性主义"来描述可能会更加容易理解

《需求设计:构建用户想要和需要的产品》——第1章 情境驱动设计入门1.1 对需求进行设计

第1章 情境驱动设计入门 本书讲的是如何设计IT应用程序.笔者写这本书,是想建议大家采用与原来不同的办法去做设计,尤其是想进行下列三项变革: 要使人意识到自己并不是在收集IT应用程序的需求,而是在设计它们.对应用程序所做的设计工作,正是建立在这样一种认知之上. 要把程序的设计做得像工程学一样,特别是要在实现之前先对设计进行分析,并寻找其中的缺陷. 要确保当前所开发的应用程序能够与现有的或同时开发的其他应用程序协同运作,以创建出一套连贯的IT架构. 本书要谈论如何思考应用程序的设计,以及如何对设计

Win32下病毒设计入门_安全相关

   Win32下病毒设计入门  本文假定你对dos下的病毒和386PM有一定的了解.  1.感染任何一个病毒都需要有寄主,把病毒代码加入寄主程序中 (伴侣病毒除外).  以下说明如何将病毒代码嵌入PE文件中,有关PE文件的结构请看以前的文章. PE文件的典型结构: MZ Header DOS STUB CODE PE HEADER OPTIONAL HEADER SECTION TABLE SECTION 1 SECTION 2 ... IMPORT TABLE EXPORT TABLE 和D

实战后才能发现的10个APPLE WATCH设计技巧

  今天这篇的价值抵得上十篇理论性文章.作者的团队为自家的Todolist软件作Apple Watch做适配时总结了10个超实用的技巧,全都是从实战过程中得到的,每一点都值得学习 >>> Apple Watch发布之后,我们的团队立刻意识到这款新平台将和我们的Todoist形成绝妙组合.作为一款始终依附于用户腕上的设备,Apple Watch可以使我们即刻访问信息内容. 伴随着各种令人兴奋的可能性,巨大的设计挑战也随之而来.我们从头开始,时刻围绕着Watch的三个设计主体思想进行探索:

PhotoShop参考线的合用技巧设计入门教程

说真的,很多设计师做了几年网页设计,但依然把参考线没有玩转,甚至很少去使用它. 要知道,参考线是PS中很强大的工具,省时省力,效果极佳,能够帮助我们的内容"塑形". 虽然我们早前推荐过<PS 参考线插件GuideGuide下载及使用说明>,但是大家还是非常有必要自己来好好从实际的操作中总结出参考线的使用技巧. 那么这篇文章应运而生了:) 打开标尺 首先,要确保已经打开标尺,如果没有打开,那么视图>标尺(CTRL/CMD+R) 设置并调整参考线 打开标尺后,可以开始设置

《HTML5+CSS3网页设计入门必读》——1.8 了解在Web服务器上放置文件的位置

1.8 了解在Web服务器上放置文件的位置 维护Web内容的一个重要方面是确定将如何组织该内容--不仅便于用户查找,而且便于你维护服务器上的内容.把文件放在目录中有助于管理那些文件. 在Web服务器上命名和组织目录以及开发针对文件维护的规则完全取决于你自己.不过,在这个漫长的过程中,维护一个组织良好的服务器可以使其内容管理更高效. 1.8.1 基本的文件管理在你浏览Web时,可能注意到当你在Web站点中导航时URL会改变.例如,如果查看一家公司的Web站点,并且单击通往公司的产品或服务的图形导航

7条超实用的虚拟现实交互式设计原则

  谷歌又来造福人类了!今天@十萬個為什麽 这篇译文即使花流量看完也不觉可惜,因为它不仅提供了一个简单廉价的体验虚拟现实的方法,还给了一个「自己动手做VR眼镜」的文档.对设计师来说,里边阐述的7条设计原则都经过验证,VR大热也就这两年,不学就落伍咯! 虚拟现实,这种体验自从80年代中期就出现了,但似乎科技总是在拖后腿.终于,智能手机和相关科技的发展,使虚拟现实的惊人潜力触手可及.如今,我们正处于一场虚拟现实的革命当中. 从价值上千美元的高端平台,到可运行在智能手机上的系统,虚拟现实的设计仅仅展露