设计界面时要考虑实际数据-在Sketch中使用数据

从Sketch V 52.0开始

在瑙克里(Naukri),我们承担着重大责任,向众多求职者提供有关其理想工作的清晰简明信息,并向招聘人员展示最适合其下一次招聘的应聘者。 这需要大量的专业知识来挑选最相关的数据点,同时向我们的用户提供不同的信息。 同样重要的是,精心设计以适应组成数据点的所有可能值(例如名称,经验,薪水,位置,职务等)。 尤其是在像印度这样的国家(来自不同地区和社会文化背景的人),这些数据值的波动更大。 我们的营业地点从“ 特里凡得琅”“果阿”一样小 实际上,名字有时确实很大。 人们并不总是上传拍摄精美的个人资料照片,或者根本不仅仅提供任何其他信息。
因此,至关重要的是,我们必须根据真实数据值,真实姓名,位置,配置文件图片以及几乎每个数据点来测试我们的设计。

我们过去通常通过自己键入这些详细信息来手动执行此任务。 尽管有某些插件,但它们效率都不足以成为我们主流工作流程的一部分。 直到现在,这都是一个痛苦,耗时且费力的过程。

最近,Sketch在其版本52中引入了Data。Sketch中的Data可让您从Mac或共享驱动器上的文件夹中添加图像和文本。

在创建我们的设计系统时,我们对不同的Naukri产品进行了视觉审核,这确实有助于我们识别各种问题,需求和机会,从而开始创建我们的系统。 在此过程中,我们甚至确定了几个数据点,这些数据点在整个系统甚至产品之间的不同组件中重复使用。 因此,我们决定使用Sketch Data将真实数据填充到我们的设计中,以便可以更高效地测试我们的设计。
使用数据层既简单又直接。

使用数据填充列表

但是我们将它向前迈了一步。 在我们的数据团队的帮助下,我们购买了包含大量真实用户数据列表(例如名称,个人资料图片,名称,公司名称,薪水,关键技能,位置等)的文本文件。 该数据与各种组件符号内的各种文本和图像层相关联,例如候选卡(显示在招聘人员的网站上),工作卡(显示在求职者的应用程序上),关键技能(显示候选人拥有的不同关键技能)和其他几个。

使用数据来人口关键技能云

在工作卡中使用数据点

通过在设计团队之间共享的草图库中进行所有这些设置,我们仅用手指即可填充我们的设计,这与Thanos😅的方式不完全相同,而是通过使用快捷键Cmd + Shift + D来基本上刷新所有符号中的数据点。 通过选择多个符号,我们可以使用此简单的快捷方式一次填充所有设计。

这只是一个新功能,但是我们很高兴它能帮助我们测试设计并快速迭代以创建像素完美和数据驱动的设计。

结论

一个好的设计过程具有多次迭代的特点。 与不同的利益相关者不断来回创建重复的任务。 如果这些可以自动化,那么可以节省很多时间。 这使我们有更多时间通过更多迭代来进行设计,从而获得更好的产品