Apple on Victor42

苹果旧金山字体的秘密

hi@victor42.work (Victor42) — Sun, 27 Sep 2015 12:42:00 +0000

[国外设计第104期]

iOS 9如今已公开发布。带来了一些细微的变化，但iOS 9的系统字体变成了苹果新推出的旧金山字体，代替了之前用的Helvetica Neue。

Helvetica（左），旧金山字体（右）

旧金山字体之前已经用于Apple Watch中，如今则成为苹果全平台的统一字体：Apple Watch、iPhone、iPad和Mac。

Apple Watch

从第一台iPhone起，苹果就将Helvetica当作系统字体。而且从10.10 Yosemite开始，Mac OS X系统的字体也从Lucida Grande改为了Helvetica。苹果为何抛弃Helvetica？它是全世界最著名最受欢迎的字体。

小字号Helvetica太纤弱

据说Helvetica不适合小字号使用。当Mac OS X Yosemite系统字体改为Helvetica，许多设计师声称Helvetica并不合适。

“Helvetica糟糕透了”，Erik Spiekermann说

如果你输入小字号的Helvetica文字，你会发现易读性很低，显得模糊。有些文字交叠在一起，难以辨识。据说苹果设计出旧金山字体正是为了让小号文字在Apple Watch上更易读。

小号字母交叠在一起

但如今，小屏幕设备分辨率比印刷品还高，iPhone中的文字并不像Apple Watch那么小。为什么苹果把iOS、Mac OS X的系统字体都改了，而不是只用于Apple Watch？

旧金山字体不仅仅是一款字体

旧金山字体拥有许多高度易读的特征。实际上Apple Watch和iOS/Mac上的旧金山字体并不相同。

字体族“SF”用于iOS/Mac，而“SF Compact”用于Apple Watch。在“o”、“e”这类圆形字母上可以看出区别。SF compact的竖线比SF更平坦。

SF与SF Compact

这点差异使得SF Compact的文字有更大的字距，从而使Apple Watch这样的小设备有较高的易读性。

而且，SF与SF Compact被划分为两套子字体族，分别称作“Text”和“Display”。这就是苹果所谓的“视觉尺寸”。Text字体用于更小的文字，Display字体更大。

旧金山字体族

正如我之前提过的，Helvetica这种非自然（或者说无衬线）字体，两个邻近字母会“交叠”在一起，像“a”、“e”、“s”这种字母在小字号时看起来很相似。

Display与Text字体

用于小号字的旧金山Text字体，被设计成比Display字体有着更大的字距。Text字体的字怀也更大，为了小屏幕的易读性。

旧金山字体是动态的

旧金山字体的一大特点是它动态组织文字。系统会随着字号自动切换Display/Text字体。明确地说，20pt正是这个界限。

设计师与开发者不用操心该用哪种字体。比如给UILabel设置系统默认字体，系统就会为你选择合适的文字。

旧金山字体有一点让我印象很深，就是它的冒号（:）的显示方式。一般情况，冒号会刚好放置在基线上，所以放在数字之间时，它并非垂直居中的。而旧金山字体中，会自动将它垂直居中对齐。

垂直居中的冒号

旧金山字体是为数字时代而生的字体

如你所见，旧金山字体经过了精心的设计，为了使任何字号、任何设备都易于阅读。

被旧金山字体所替代的Helvetica，1957年诞生于瑞士，那时尚没有电子设备。即使今天，Helvetica也被许多公司作为企业字体广泛运用，毫无疑问，未来它会被当作一款伟大的经典字体使用。

另一方面，旧金山字体是一款现代字体。它会根据环境动态改变文字。这是数字时代的一种“数字原住民”字体。

→ 字体 —苹果开发者中心

原文链接：https://medium.com/@mach/the-secret-of-san-francisco-fonts-4b5295d9a745

作者信息： Akinori Machino traveling around the world, seeking next challenge

有目的地为Apple Watch而设计

hi@victor42.work (Victor42) — Sun, 06 Sep 2015 10:40:00 +0000

[国外设计第102期]

几周前，我在纽约参加一个会议。这是我第二天使用Apple Watch，于是我想应该用它来查找从会场回程的路线。在以前，我会想掏出手机，输入地址，设置成步行导航，并且在步行途中视线来回游移于手机与街道之间，避开时代广场的出租车、自行车和穿着各异的人物。

现在，我只需要说“带我去时代广场的W Hotel”，按下开始然后步行——从来不用操心手表，除非我感受到振动，告诉我该拐弯了。

它从根本上改变了我与城市的互动方式。不再拘泥于屏幕，我可以眼观六路耳听八方，给予手表充分信任，让它告诉我接下来怎么走。除非在我确实需要的时间或地点，我都没有看过我的移动设备，它被解放出来了。

我意识到我从没有真的想要操作我的手机——只是觉得我需要这么做。如果移动技术能足够融入环境，我就会忘了它，那些充实我生活的时刻除外。

举个例子

有个盛行的食谱应用，我觉得它就是个反面教材。在iPhone上，它非常有用：少量点击就能查找、收集和分享食谱，还能看到查看营养成分、创建购物清单等等。

那相应的Apple Watch应用可以用来做什么呢？几乎一样。

这就是问题所在。他们实际上什么也没改变，除了使你在iPhone上的常用操作变得单调乏味。

“想清楚一点，你的智能手表应用为何存在，既然有iPhone应用。”

应该想象成一个手腕上的更加智能的应用——它不该被视作相应工具的复制品，而是烹饪助手。

或许它应该追踪你的购物清单，在你接近喜爱的食品店时，提醒你要买什么。或许它应该指导你的整个烹饪过程，告诉你接下来用什么配料、需要多少量（甚至使用加速度计或其他传感器来检验你是否搅拌均匀），为你设定时间，晚些时候提示你评价这份菜谱-Food（并且将评价作为推荐新食谱的参考）。

当你本周想要探索新方式或做一道新菜，你应该使用iPhone应用，手表应用这时应该有个截然不同的存在理由。应用很少能接近这一点，这就是史蒂夫·乔布斯所说的，魔法。

开发者还没有权限使用所有传感器和控制器（即将开放），其中多数人在创建第一批软件时甚至都没有一台硬件设备，所以我们不必对他们过于苛责。但如今可用的多数应用，只是把口袋里的通知中心移到了手腕上，或是创造了一个烦人的袖珍iPhone应用。这个问题，并不值得专门创建一个新的$350-$17,000的产品类别。

摄影师：Kārlis Dambrāns。Creative Commons Attribution 2.0 Generic.

Apple在他们的人机交互指南中暗示了它的潜力，但他们自己也并没有完全挖掘出来。公平地说，他们知道的可能比开放出来的更多，给出了产品的早期形态。

“设计师：理解用户的体验，精确把握介入时机。”

当然，设计一个真正有意义的应用需要Apple Watch和传感器更加智能。设计师也需要更加明智，理解用户当下的体验，精确把握介入时机。

真正的机会

如果多数手表应用所做的，本质上只是把手机绑到我们手腕上，并且移除了其中多数功能——或者更糟的是保留了这些功能——那我们就是在错失良机。我们需要重新思考智能手表意义所在。

归根结底：iPhone替代现实，而Apple Watch是现实的扩展。

换句话说，iPhone是终点站，是个移动中心，将你所需的一切信息虚拟化。它不断召唤你去探索它、用它学习和创作。它是庞大内容世界的一扇窗。不论喜欢与否，它与现实世界是有所冲突的。

在手机上，很少有通知是只展示而没有进一步操作的——既然打开了，为什么不看看Twitter呢？作为一个平台，它往往是被动的。设计师尝试预测你想做什么，为这个目的而设计界面，但是否开始第一步、告诉应用你要做什么，这仍取决于你。

相反，Apple Watch不会（至少不应该）吸引你进行更深的探索。需要它时，它会激活。它会感知你的动作，为你展示一点点特定的有用信息，然后默默退下。这是与环境高度融合的暗示，作为你现实生活的通知与补充——此地，此时。

本质上说，这是移动技术更加有利的位置。

摄影师：Shinya Suzuki。Creative Commons Attribution-NoDerivs 2.0.

为Apple Watch设计时需要牢记的一些诀窍

确保你真的了解使用场景——不仅仅是人们如何操作应用本身，还有他们这些时刻“在现实生活中”在做什么，你什么时候可以带着信息介入。如果你只能描述你所设计的功能，而不是相对应的时刻，那你还有很多事情要做。

“如果你只能描述你所设计的功能，而不是相对应的时刻，那你还有很多事情要做。”

**要想着增强现实，不要取代现实。**目的不是让人花更多时间看着屏幕——而是将人从观看屏幕中解放出来，让他们更加聪明、聚精会神地融入周围环境。

**不要试图打造迷你版iPhone应用。**Apple Watch擅长一些事情，也有很多无法完成的事情。善用它的长处，想清楚一点，你的智能手表应用为何存在，既然有iPhone或iPad应用。

摆正位置，Apple Watch并非把通知中心向左移动1、2英尺。Apple Watch的意义在于移动设备扮演的角色的演化，退居二线，为人类活动让道，成为一个真正辅助的背景角色。而不是与人们生活的现实世界作对。它让你更好的生活，聚精会神地做自己。

那样的愿景——至少以一种成熟的形式体现——就是我从中领悟到的。

焦点图摄影师：LWYang。Creative Commons Attribution 2.0 Generic

原文链接：http://blog.invisionapp.com/meaningful-design-apple-watch/

作者信息： Peter Lewis, Product Designer at Capital One Peter Lewis is a Creative Director, Design Strategist, and Product Designer at Capital One, working in the Washington, DC area to design new experiences that help people manage their financial lives. On the side, he writes and makes videos. Follow me on Twitter

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.

新iPhone6与Apple watch给设计师带来的影响

hi@victor42.work (Victor42) — Sun, 28 Sep 2014 19:12:31 +0000

国外设计第59期

九月9日，苹果发布了一些很棒的新产品。但它对设计师而言意味着什么呢？不论发布会主题是否令你影响深刻，我们都能领教它所要表达的东西。

有更多的产品供人选择，于是也有更多的事物给设计师们带来影响。

##屏幕更多样化

显然，作为设计师，我们会担心或欣赏这两种新的iPhone带来的屏幕差异。设计师们总偏向于iPhone——看看Dribbble上有多少Android作品就知道了。iPhone曾经有固定的尺寸，设计起来很容易。如今则不然。随着新增的Retina HD，我们又得多应对一种分辨率。

###屏幕尺寸

更多信息请查看PDF that Lemonat Studio，聚合了4种iPhone的详细信息。

###带动响应式设计

更多种屏幕尺寸给我们机会拥抱响应式设计。响应式设计很灵活，我们应该尽可能利用我们的优势。由于这两种明显增大的iPhone，使我们有机会让响应式网页更富创造性。至少，我们会更擅长使用大屏手机测试响应式网页；这点对所有大屏Android手机也是有利的。谁知道呢，或许我们还会开始考虑平板，就这点而言，iPhone 6 Plus几乎和iPad Mini的尺寸相当了。

###横向App

苹果指出，iPhone 6 Plus的亮点之一是它的横屏尺寸。对横屏设计的强调令人耳目一新。我们要面对现实，不论在app还是响应式网页中，这都不是我们常做的设计。不管怎样，我们是时候也应该这么做了。拥抱更大的屏幕吧，打造支持横竖屏的美丽迷人的app，来挥洒你的创造性。

###重点

不论你喜欢与否，苹果推出的两种新iPhone尺寸会给设计带来深远影响。我们有两种选择，逃避式地将设计适当放大，或是拥抱它的挑战，让我们为那些屏幕打造崭新的、更优秀的设计。

###Android怎么办？

是的，我知道Android很早以前就开始出现大屏幕了。但是，出于某些原因，设计师们都还是偏向于iPhone。通常，客户也优先考虑iPhone app。这或许意味着，随着iPhone的尺寸如今与Android相同或相似，我们终于可以同时包含两种手机的设计了。

##Apple Watch是个新挑战

Apple Watch，苹果推出的新手表产品，和其他苹果设备都不一样。它是可定制的、个性化的，也很迷你。不像同样拥有小屏幕的iPod，Apple Watch可以安装app。这点很重要，因为我们将会设计那些app。Apple Watch有它的局限，比如它只是第一代，屏幕也很小。这意味着两件事。首先，我们要拥抱小屏幕，将它的局限当作一项光荣的创意挑战。或者索性避开这款手表。可穿戴设备才刚刚起步，让人难以拥抱它们，因为它还不是一个完美的设备。所以，第二个选择可能意味着Apple Watch会成为一个迷失的媒介，像iPad一样。

不过看到苹果在尝试探索可穿戴科技，总是件好事情。不论设计圈未来会如何对待Apple Watch，有一点可以肯定，当下Apple Watch是一款热门的激动人心的设备。

###无穷的可能性

这个动作引发了一个巨大的疑问：苹果下一步会做什么？我猜苹果未来会分化出其他产品和技术——包括可穿戴设备。更大的新iPhone使得这点尤其肯定。苹果开始走向多样化。

##苹果不再是从前那个苹果公司了

这次的主题显然令人大开眼界。苹果不再是曾经那个苹果了。指出Tim Cook和Steve Jobs之间的差别再容易不过，但远非这么简单。这家公司在以一种与以往不同的方式做事情，你可以认为更换CEO是件坏事，但如果意识到它已经是另一家公司，其实就是件好事。不论你如何诠释，苹果的变革就发生在我们身边。

###产品设计的多样性

如果你看看最新的iPhone、iPod、ipad，你会注意到他们显然不同。苹果的产品从前遵循着相似的设计信条。早先的Mac OS版本与更早的比较相似，比如iOS6和Maverick。iPad是照着iPhone的模子做的，iPod的设计也被修改以配合iPhone。如今，苹果的产品很多样化，最新一代iPod与时下的iPad完全不同，iPad和Apple Watch也不同，它又不同于……你明白的。这就意味着作为设计师，我们应该期望做出不同的设计和风格。

###可定制的Apple Watch

新苹果的一个显著特征，是推广可定制的、个性化的产品。Apple Watch是第一款能够让你自己定制的苹果产品。在这之前，苹果都在照着它的行事风格，为你打造完美无缺的产品——你要么爱上并购买它，要么不会。（当然，它允许一点点定制化。）

我选择iPhone而非Android手机，那是因为我信任苹果的设计师与工程师能够为我提供最佳的体验。我不需要定制化，我信任产品的体验，毕竟这些设计师都是专家。我知道这样的人不止我一个。这款手表尚不能完全定制，无法选择不同的造型——比如圆形或方形表盘——但它仍然走了一条与先前的苹果产品截然不同的路线。

###重点

作为设计师，摆在我们面前的是苹果式设计的多样化风格。它会改变我们为不同设备开发的方式，也会改变设备本身的设计如何激发我们前进。

你怎么看？你觉得苹果最近的发布会将给设计圈带来怎样的影响？

原文链接