怎么快速给界面填充图文数据？Sketch数据源轻松解决

2018-11-27 本文已影响4人 UI黑客

辛辛苦苦完成的界面发给老板，老板怒怼：时间一样、标题一样、头像一样、文字也一样，还没做完就发出来，怎么给客户看，赶紧去改。

上面这个状况很多UI新手都遇到过，工作过几年的UI老手也会忽略。界面设计再好，里面的数据没有填充，同样会掉价。但是一个个去填充图文既费时又麻烦，有没有快捷的方法呢？Sketch52新增的数据源功能就是专门来解决这个问题的。

虽然有其他第三方插件也可以实现数据填充，但都是默认设置好的数据，实际工作中，不同行业的设计师会需要不同的图文数据，Sketch的数据源自定义功能就非常好地解决了我们的痛点。

Sketch Data功能介绍

用一句话概括介绍数据源就是：可以一键把图文数据填充到你的设计稿对应位置中，不用再去傻傻地一个一个填充了。

Data数据源功能需要Sketch52.1及以上版本才可以使用，默认在工具栏的左上角。

数据源包含文字和图片两个种类，也是最基本的数据类型。Sketch在每个类别里面给我们默认添加了几种示例数据。

图片：人物头像、纹理、unsplash的随机图片和搜索图片

文本：英文人名、英文城市名

其中，unsplash是一个非常知名的免费可商用的高清大图网站，https://unsplash.com/

数据源的使用方法很简单，选中对象，然后填充即可。如果对随机的内容不满意，可以通过refresh data来再次填充。

填充图片

填充文字

其中unsplash里面的search photo可以输入关键字来填充图片

图片填充也不是必须选中形状才可以，单独的一个图片也可以直接填充替换

需要注意的是默认填充的图片都是正方形的。如果我们用一个长条形来填充，默认填充方式是fill，通过裁剪确保图片不被拉伸，当然了，我们也可以根据需求改变图片的填充方式。

这么方便的方法怎么少的了symbol呢。在数据源的配合下，symbol的填充也可以瞬间完成。含有图片和文本数据的symbol会在右侧overdids中显示替换数据的icon，点击即可更换。

下面是一个例子，symbol里面同时有图片、文本多种数据，通过全选symbol即可完成整体的数据填充。填充完数据后，右侧会新增刷新按钮，可以把填充的数据还原成最初开始的。

Sketch默认的图文数据其实不符合我们实际的工作需求，设计师可以通过自身所在的行业特点来给自己自定义数据源。

旅游类的地名、风景照片比较多，电商类的商品名、商品图、价格比较多等等。比如我所在的是教育行业，老师名字、老师头像、课程名称等频繁要使用，所以就可以自己做数据源。

我们打开设置里面的Data，可以看到默认的数据。

点击左下角的Add Data，就可以选择你想要的图文数据。

需要注意的是，图片数据是以文件夹为选择目标，文本数据是以一个txt文件为选择目标。数据所在的文件位置不能改变，否则会失效，需要再次添加。

txt文本数据需要按照“每行一个数据”这样的格式来填写，由于Mac无法右键新建txt文本，这里提供一个demo，大家下载后直接按格式填充即可。

密码:8bg6

配置和自定义好需要的文本和图片数据后，再遇到界面中的图文填充，就可以快速一键完成了，极大地提高了我们的设计效率。