IOS on Victor42

Apple Watch设计入门

hi@victor42.work (Victor42) — Sun, 05 Apr 2015 12:32:00 +0000

[国外设计第81期]

这个月晚些时候，众望所归的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。小屏幕尺寸是340x272像素，大屏幕是390x312像素。手表的一大特点是retina屏，就像iPhone那样，你要提供两倍分辨率大小的图片。

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

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

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

颜色

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

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

动画

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

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

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的应用设计。

原文链接

作者信息： Kenny Chen Kenny Chen is a UX Designer from Los Angeles passionate about creating better experiences through thoughtful design. He curates UX Design Weekly, a hand-picked list of the best user experience design links each week. Follow him on Twitter at @kennycheny.

iOS系统默认字体对照表

hi@victor42.work (Victor42) — Sat, 19 Apr 2014 20:17:00 +0000

工作中需要对比iOS系统默认字体，于是拖着开发同学写了一段代码逐个输出，再自己稍作调整修饰，在此分享出来。

轻松打造iOS7风格图标

hi@victor42.work (Victor42) — Sun, 24 Nov 2013 10:29:38 +0000

[国外设计第19期]

随着近年来iOS7的发布，很多网站和APP都忙于改头换面，来适配这套全新的扁平纤细的iOS设计风格。设计好图标是件棘手的事情，尤其当你要设计一整套时，而设计线条式图标本身又是另一项挑战。

下面，我为你准备了一系列指南，能帮你通过简单的步骤打造iOS7风格的图标。

目标是什么？

凡事分轻重缓急，你设计的图标或图标集是用于你的APP吗（这里的APP也指网站）？对于这部指南来说，都无所谓。因为无论如何你都应当遵循下面这些步骤。既然对这一点明确无疑，我们来关注首要任务——研究。

研究别人是怎么做的

研究是一项需要预先完成的基本任务。这很明显，也相对沉闷，你的每项工作都应该从研究开始。不过，在图标设计中，还有些特别的东西需要了解。

首先，看看别人怎么做。有助于了解当下潮流趋势，还有相关的设计守则。最重要的是，这能给你灵感！观察各种神奇的图标作品能助你发现其中的创意闪光，当你准备画手稿时，就能产生好点子。

既然这个指南是针对iOS7的，研究苹果的做法也不失为一个好主意。观察它的图标，无论是主屏图标（比如信息），还是app中的图标（比如时钟应用中的）。看看苹果的iOS7设计准则，你就知道他们建议你怎么做。

着手画点什么

既然你已经充分了解别人的做法，也深受启发，是时候将你的想法付诸于纸上了。在创作过程中，手稿也是一项基本步骤，因为它让你仔细思考各个创意，使大脑快速进行头脑风暴产生新想法。当你画了一些简单的手稿，并将它们都罗列在眼前，正确的方向立刻就显现出来。

手绘草稿最关键的一点，不求数量多，而是要多样化。你画了上百个相同的东西一点用也没有。如果你有三个不同概念，那就有用和深刻得多。只要你保持手绘稿千变万化，就会有好结果。广泛收集灵感有助于找到合适类型的图标，并确定应该朝哪个方向前进。除此之外，看看这些各式各样的草稿，能帮你更容易找出残次品。当你无法确定正确方向，却能肯定其中哪些不会再深入下去时，这个办法相当于管用。

绘制实际图标

我可以肯定，在完成了这些手绘稿之后，你或你的团队已经有所偏好了。无论你选出了其中具体某一个，还是几个不同方案来竞争，该把它们绘制出来了。首先要建立你的栅格系统。如果是创建主屏图标，那你应该遵循苹果提供的新iOS7设计准则。这类PSD模版网上随处可见。

我的建议是尽你所能把这些不同图标都应用于栅格系统，不过先用常规做法来绘制图标。以后再回来修改细节和做统一化处理，反正你收工前还得再做调整。对我而言这很有效。全部绘制完成后，回头来确保它们都吻合栅格，并具有统一的风格——比如它们采用尖角还是圆角？同时，你也希望确认这个图标是否符合整体设计的风格，图标与app搭配吗？主屏图标能体现app的设计吗？

修饰图标

对于iOS7风格图标设计，我有几句话说。我知道iOS7提倡纤细线条的图标设计。但这也不是必须的，尤其对于主屏图标来说。不采用细线条，而采用饱满图形的大有人在，但它们和iOS7的整体风格也相当吻合。我不觉得细线条是唯一准则，你不用也没问题，尤其当你的产品设计不适合甚至根本就不采用它们时。别管它就好。

结论

创作iOS7图标不是什么难事。就此而言，我设计它们时，就像做其他类型的设计和图标一样。关于iOS7最重要的一方面就是风格，循着苹果的脚步，你也能轻松做到。关于这套新设计风格，有一点值得一提：为iOS7设计比拟物化设计要容易多了。

原文链接

iOS7设计指南:轻松上手

hi@victor42.work (Victor42) — Sun, 13 Oct 2013 02:11:00 +0000

[国外设计第14期]

苹果的新iOS我们已经上手好几周了，准备好为它而设计吗？

如果你已经有一个运行于此平台的APP，你可能打算为新iOS而设计，或者在旧版上做一些必要调整

不论哪种，你都希望为新界面而设计，确保你的APP与用户在苹果设备上的体验相吻合

那么如何做到这点？

扁平，更加扁平

苹果的iOS7秉承着扁平的设计理念，尽管它不是完全的扁平化

那么就秉着“较扁平”来规划设计你APP或移动站点

所有的那些曾经辉煌的拟物化风格图标与效果，一去不复返了。如今的潮流是单色块、多色文字和大量留白

苹果为iOS7制订的设计准则鼓励简洁设计与易用性。但是设计准则并没有着重介绍我们即将讨论的关于扁平化设计的规范。我们能在这些新设计的APP（包括苹果自身样式）中看出一些与扁平设计特征相违背的东西

比如说颜色，iOS7包含了相当一部分柔和色调和半透明效果。扁平设计通常使用明亮、高对比度的颜色

你所见到的按键和按钮也没有设计成扁平样式。例如键盘，每个字母都包含在一个带阴影效果的按钮中。这些微妙的效果是新界面的显著特征

重视字体

字体是iOS7设计的关键

大多操作都是点击文字，而非按钮（有时是图标）

苹果的默认字体是Helvetica Nenu，一种纤细简单的文字。但那不是你的唯一选择

iOS7中的字号稍微加大了，主要由于它的用途。而且文字间的层级至关重要。利用颜色和不同粗细，来保持文字布局和UI元素清晰易懂

可是从哪入手？

选好并获得字体的使用许可后，将苹果的默认字体规格说明作为设计准则着手开始

导航栏标题：Medium, 34像
按钮和表头：Light, 34像
表格标签：Regular, 28像
Tab页图标标签：Regular, 20像素

无边界

关于iOS7中文字作为按钮，我们已经讨论了不少。不过还能再深入。多数界面设计是无边界的

看看日历——日期没有网格线。看看Safari中的可点击区域——没有明确的按钮。再看看时钟和内置天气app——网格线也消失了

取而代之的是留白。但不要误解。网格也仍然存在（并且很明确），只是划分“格子”的分隔线被去除了

像这样去掉线条，创造了更开阔的空间。极简风格和额外的留白能让用户看见并感觉到按钮和网格的存在，却不会让他们拘泥于其中

所以如果用到方块、按钮、边框，并决定何时使用它们——举棋不定时，去掉就好

考虑使用视差效果

iOS7设计中的一项重要的新特征就是动画。这个系统中使用到的动画效果，比苹果以往发布的任何系统都来得复杂

好好利用它

考虑新颖且与众不同的方式来让你APP中的物体移动，并与其他物体互动。视觉差滚动（垂直方向甚至水平方向）是一个你以前从未使用过的方案

记住，苹果这次发布所兜售的理念，大多都关乎用户体验。牢记它并将其贯穿整个项目

分层创造层次感

苹果给设计师们的最后一项工具，是一种在iOS7中创建和操纵层次感的方式。早期版本中，层次感通过拟物化效果来实现。iOS7中，层次感是分层的产物

以主屏幕作为例子。打开一个文件夹。它停留在屏幕中央，并没有占据全部空间

这层也包含了半透明效果。从你设备的底部滑出菜单。你的视线能够穿透它。你屏幕上的颜色和主风格就在那里，只不过带上了半透明的模糊效果（除非你在设置中选择了“增加对比度”选项）。通知中心、Siri、甚至主界面上的通话按钮处都一样

想想如何将这些效果用在你的APP设计中。对你选择的配色方案和基调有影响吗？制作按钮、图标和提示时它能起到作用吗？

如何创造出适当的模糊效果？在Adobe Photoshop中，10像素的高斯模糊大致可行

精心处理你的图标

设计APP图标和APP本身一样重要。它同样需要遵循苹果的iOS7设计准则

外形都很相似，但它有些新的特征，包括一套为图标本身的设计制订的特殊栅格系统

Pixelresort的Michael Flarup制作了一个非常棒的图标模板，迅速创建苹果标准图标变得信手拈来

谨记

为iOS7而设计时（全新设计或重新设计），苹果也有三条准则需要牢记

新APP需要遵循Appstore的这些规则

记得为现有APP更新图标以匹配新界面。规格：iPhone版120×120像素，iPad版152像
启动图要包含状态栏区
所有设计都要支持视网膜屏和iPhone5

结论

现在我们已经看过了为iOS7设计所需要准备的东西，可以着手开始了

如果你需要更多设计准则的说明，苹果为设计师和开发者提供了过渡指南和文档，来解释他们团队的设计理念

原文链接