跳过导航
An image of an iPhone and an iPad on a grey background, each with the LookUp app on the screen
#MadeWithSketch

用我们的语言:Vidit Bhargava 如何在 Sketch 中设计 LookUp

我们与这位屡获殊荣的设计师谈论了他广受欢迎的词典应用、他的创作过程,以及为什么 Sketch 是他的首选工具

为你们提供创造出色作品所需的工具,是我们每天努力改进 Sketch 的动力。当我们看到你们用 Sketch 创作的东西时,它激励我们做得更好。我们的目标之一是突出优秀的设计,因此本周我们与 Vidit Bhargava 进行了交流—— LookUp的设计师和开发者,他于 2015 年入选苹果“20 位 20 岁以下”开发者名单。

LookUp 是一款屡获殊荣的 iOS、Mac 和 Apple Watch 词典应用,鼓励你每天学习一个新单词。它使用精美、插画式的卡片来帮助解释含义——而 Vidit 在 Sketch 中设计了从 UI 到每张卡片的所有内容。


你能告诉我们一些你在应用设计方面的起点,以及你是什么时候开始使用 Sketch 的吗?

我从高中就开始设计了。我设计并维护了一个供学生了解科技新闻和了解琐事的电子杂志,并且参加了几次校际网页设计比赛。我真的很享受组织内容、创建精美图形和制作易于浏览的网页背后的创作过程。

我同时也是一位长期的苹果粉丝,所以当 iPhone 首次发布时我非常兴奋。它的设计是我对苹果产品的所有喜爱。简洁、美观且易于使用。我瞬间成为了这款设备及其应用的粉丝。

当 iPhone SDK 发布时,我非常鼓励自己能够构建并向全球数千人发布一些东西。我对网页设计的热情很快转化为应用设计。

在 LookUp 发布前几周,我在 Twitter 上发现了 Sketch。从那以后,我想我从未使用过任何其他工具来创建界面。

我开始在 Xcode 中使用 Interface Builder 来创建不同的布局,但逐渐开始使用其他设计工具来更快地迭代我的设计并更多地处理细节。我会花费数小时精心设计我想要付诸实践的应用的不同屏幕。当时我还没有编程,但我的哥哥是计算机科学专业,所以我经常通过为他大学的项目创建模型和资源来帮助他。

当时,我用于 UI 设计的首选工具是 Photoshop,虽然 Photoshop 在很多方面都很棒,但它并不是真正为 UI 设计而设计的。我开始觉得需要一些更专注的东西,并在 LookUp 发布前几周通过 Twitter 发现了 Sketch。从那以后,我想我从未使用过任何其他工具来创建界面。

谁(或什么)是你最大的设计灵感来源?

我最大的灵感来源一直是 iPhone 及其 UI 设计师。设计的简洁性使任何人都可以拿起设备并开始使用它。iPhone 的“滑动解锁”界面非常直观,我两岁的侄子都能使用它。作为一名设计师,我努力追求这种易用性。

Imran Chaudhri,这位在 iPhone 和 Mac 上设计了“滑动解锁”和其他数百个界面的设计师,也是一位其作品深深激励我的人。我仍然对这些界面是如何诞生的感到惊叹。还有 Mark Kawano。他的(现已停产的)应用,Storehouse,正当我开始进行应用设计时发布,界面的流畅性和应用的简洁性非常鼓舞人心。

Three iPhones, each one showing LookUp in a different way, including home screen widgets.

Vidit 努力使他的应用界面尽可能简单,并保持接近苹果自身的高标准。他最新的版本为 iPhone 和 iPad 添加了 Widget 功能。

目前,我只是喜欢使用 Moleskine 应用。它们由 Bonobo Labs 设计,其设计简直太棒了。声音设计、触觉反馈和交互都非常出色——他们创造了真正现代的 iOS 应用体验。

你是如何开始使用 LookUp 的?你是否曾经想过它会像现在一样受欢迎和成功?

我和我哥哥在 2012 年共享一个 8GB 的 iPod Touch。我当时是高三,正在准备期末考试。学习时,我经常使用词典来学习和理解各种单词的含义,但当时的词典应用占用超过 200MB 的存储空间,并且充满了许多我不需要的功能。然后我最终会使用 Google,因为我经常想查看图片以更好地理解单词。

在 iPod 上查找单词的体验与使用我的 iPod 的体验背道而驰。我想要一个像 iPod 和 iOS 本身一样令人愉悦且易于使用的词典应用。我希望在一个搜索中包含所有内容——没有很多垃圾功能。所以 LookUp 的想法诞生了。

过去几年肯定比我所希望的 LookUp 更加成功,这是一个迭代的过程,并伴随了很多边走边学的经验。如果你告诉 18 岁的我,几年后我会全职做这件事,我一定会嘲笑这个想法!

是什么让你多年来一直坚持使用 Sketch?

Sketch 与其用户一样注重细节和设计。它是原生的、快速的,并且一直在改进。并且它在平台上的其他应用中感觉很自然。我认为这是生产力应用中一个被严重低估的特性。

几年前,当我重新设计应用时,Sketch 在创建一致的体验方面发挥了重要作用。我依靠符号、图层样式和文本样式来做到这一点。重复使用组件也意味着更快的迭代。我能够构建一个系统,我仍然使用它来帮助我快速设计 LookUp。

在创建应用时,设计有多重要,Sketch 如何帮助你创造出你满意的作品?

从一开始,设计就是 LookUp 的核心重点。其理念是创建一个解决用户需求并在清晰、简单的界面中提供他们所需内容的应用。多年来,应用始终坚持这一理念。

每次要向应用添加主要的新功能时,我仍然会退一步,从新用户的角度看待应用。应用中是否有太多内容?首次启动时是否需要过多的解释?用户在不感到被屏幕上所有内容淹没的情况下,开始使用应用有多容易?

An iPhone and an iPad showing the same Lookup screen, to show the scaleable UI.

许多设计线索直接来自苹果——很容易理解为什么该应用在 App Store 上多次被推荐,并获得了如此多的奖项。

应用的每个新增内容都经过严格的设计和原型设计。设计过程包括大量迭代、设备预览、对功能的可使用版本进行编程以及收集反馈以对设计和功能进行进一步更改。

多年来,Sketch 在帮助我设计应用方面发挥了重要作用。它可以轻松快速地跳入并绘制界面,并在启动 Xcode 和编程某些内容之前对其进行迭代。

几年前,当我重新设计应用时,Sketch 在创建一致的体验方面发挥了重要作用。我依靠符号、图层样式和文本样式来做到这一点。重复使用组件也意味着更快的迭代。我能够构建一个系统,我仍然使用它来帮助我快速设计 LookUp。

每次为应用添加重大新功能时,我仍然会退一步,从新用户的角度看待应用。应用中是否存在过多的内容?首次启动时是否需要过多的解释?

多年来,我还设置了 Sketch 插件来收集更真实的虚拟数据,这些数据与应用的功能非常相似,而不是仅仅使用占位符文本。

Sketch 在另一个关键领域也极大地帮助了我,那就是 LookUp 的每日单词图片。Sketch 是一款用于此类插图的非常规工具,但是我可以在 Sketch 上快速构建矢量图形,以及重用形状和对象的能力,使其成为创建 LookUp 每日单词图片的完美工具。

你提到了插件,——在你的工作流程中你最常使用哪些插件?

我最喜欢的插件包括 precious design studio 的 Data Populator 插件,以及 RotatoVectory 插件,它们可以快速生成 3D 图形并在短视频中展示设计。

Data Populator 插件是快速使用真实数据填充模型的绝佳方法。它可以链接到 JSON 文件,并且只需稍微修改一下,你就可以使用现实世界的数据来创建模型,而不是使用随机图片和“lorem ipsum”。

你如何看待将 iOS 应用适配到其他设备的过程?

LookUp 最初是一款 iPhone 应用,专门为当时 iPhone 提供的单一屏幕尺寸而设计。多年来,随着屏幕尺寸数量的增加,以及 iPad 等设备采用多窗口和分屏界面,将应用视为更流畅和自适应的界面,而不是不同尺寸的静态屏幕,变得至关重要。

但布局只是故事的一部分。在为某个平台设计界面时,需要考虑每个平台的细微差别。

Four screenshots of LookUp, each from a different device, to show the differences between the Watch, iPhone, iPad and Mac versions.

Vidit 知道每个版本的应用都需要自己的考量——因为用户与设备的交互方式不同。

在 iPad 上,应用采用了多列布局,而不是小型设备上的单列布局。但它也超越了这一点,创建了一个真正适合 iPad 的界面。

例如,在 iPhone 上,LookUp 使用表单样式展示将单词添加到收藏集的操作。然而,在 iPad 上,该展示方式更改为弹出窗口。使交互同样快速,而无需让用户在一个大型表单上执行操作。

在为 Mac 设计时,面临的挑战有所不同。这是一种从触摸屏设备到点击式设备的范式转变。虽然应用的核心功能相同,但每个元素都进行了重新设计——记住人们将使用触控板或鼠标。

例如,iOS 应用依赖于点击、渐进式公开和从一个屏幕导航到另一个屏幕。在 Mac 上,使用分屏扁平导航更快,每次点击时都无需对屏幕进行大的更改。

人们对 Mac 应用也有强烈的思维模型。因此,拥有一个看起来像 Mac 应用并且像 Mac 应用一样工作的应用也很重要,而不是将 iOS 应用移植到 Mac 上。

Three Apple Watches, showing the different interactions you can have with LookUp on your wrist.

Watch 版本的应用旨在进行快速交互,尽可能减少干扰。

在 Apple Watch 上,LookUp 的优先级完全不同。它们都与易读性和超快速的交互有关。没有人喜欢抬起手腕超过几秒钟,更不用说在一个如此小的屏幕上进行复杂的交互了,所以我设计了 LookUp,使其成为一个可以在无干扰的环境中快速使用的应用。

你会给那些正在考虑进入应用开发和设计的年轻开发者什么建议?

在开始应用开发时,很容易因为最初的失败或无法满足首次发布的预期而失去动力。但我发现,应用的最初反响只是更长旅程中的一小部分。不断迭代、力求更好并保持好奇心,这才是使这个过程充满乐趣和回报的关键。


这是我们 #MadeWithSketch 系列的最新内容。如果您使用 Sketch 创建了一个项目并希望与我们分享,请在我们的社交渠道上告诉我们。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来查看新功能,我们都将在几分钟内让您准备好并开始完成最佳工作。

免费开始使用
免费开始使用