怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

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

Sketch Data功能介绍

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

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

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

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

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

Sketch Data使用方法

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

填充图片

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

填充文字

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

symbol组件使用数据源

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

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

自定义数据源

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

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

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

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

怎么快速给界面填充图文数据?Sketch数据源轻松解决-UI黑客

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

链接:https://pan.baidu.com/s/1IfMZkoyVUut0JPUapl2A

密码:8bg6

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