辛辛苦苦完成的界面發(fā)給老板勒庄，老板怒懟：時(shí)間一樣串前、標(biāo)題一樣、頭像一樣实蔽、文字也一樣荡碾，還沒(méi)做完就發(fā)出來(lái)，怎么給客戶看局装，趕緊去改坛吁。
上面這個(gè)狀況很多UI新手都遇到過(guò)，工作過(guò)幾年的UI老手也會(huì)忽略贼邓。界面設(shè)計(jì)再好阶冈，里面的數(shù)據(jù)沒(méi)有填充，同樣會(huì)掉價(jià)塑径。但是一個(gè)個(gè)去填充圖文既費(fèi)時(shí)又麻煩女坑，有沒(méi)有快捷的方法呢？Sketch52新增的數(shù)據(jù)源功能就是專門來(lái)解決這個(gè)問(wèn)題的统舀。
雖然有其他第三方插件也可以實(shí)現(xiàn)數(shù)據(jù)填充匆骗，但都是默認(rèn)設(shè)置好的數(shù)據(jù)，實(shí)際工作中誉简，不同行業(yè)的設(shè)計(jì)師會(huì)需要不同的圖文數(shù)據(jù)碉就，Sketch的數(shù)據(jù)源自定義功能就非常好地解決了我們的痛點(diǎn)。
Sketch Data功能介紹
用一句話概括介紹數(shù)據(jù)源就是：可以一鍵把圖文數(shù)據(jù)填充到你的設(shè)計(jì)稿對(duì)應(yīng)位置中闷串，不用再去傻傻地一個(gè)一個(gè)填充了瓮钥。
Data數(shù)據(jù)源功能需要Sketch52.1及以上版本才可以使用，默認(rèn)在工具欄的左上角烹吵。
數(shù)據(jù)源包含文字和圖片兩個(gè)種類碉熄，也是最基本的數(shù)據(jù)類型。Sketch在每個(gè)類別里面給我們默認(rèn)添加了幾種示例數(shù)據(jù)肋拔。
圖片：人物頭像锈津、紋理、unsplash的隨機(jī)圖片和搜索圖片
文本：英文人名凉蜂、英文城市名
其中琼梆，unsplash是一個(gè)非常知名的免費(fèi)可商用的高清大圖網(wǎng)站性誉，https://unsplash.com/
Sketch Data使用方法
數(shù)據(jù)源的使用方法很簡(jiǎn)單，選中對(duì)象茎杂，然后填充即可错览。如果對(duì)隨機(jī)的內(nèi)容不滿意，可以通過(guò)refresh data來(lái)再次填充蛉顽。
填充圖片
填充文字
其中unsplash里面的search photo可以輸入關(guān)鍵字來(lái)填充圖片
圖片填充也不是必須選中形狀才可以蝗砾，單獨(dú)的一個(gè)圖片也可以直接填充替換
需要注意的是默認(rèn)填充的圖片都是正方形的。如果我們用一個(gè)長(zhǎng)條形來(lái)填充携冤，默認(rèn)填充方式是fill，通過(guò)裁剪確保圖片不被拉伸闲勺，當(dāng)然了曾棕，我們也可以根據(jù)需求改變圖片的填充方式。
symbol組件使用數(shù)據(jù)源
這么方便的方法怎么少的了symbol呢菜循。在數(shù)據(jù)源的配合下翘地，symbol的填充也可以瞬間完成。含有圖片和文本數(shù)據(jù)的symbol會(huì)在右側(cè)overdids中顯示替換數(shù)據(jù)的icon癌幕，點(diǎn)擊即可更換衙耕。
下面是一個(gè)例子，symbol里面同時(shí)有圖片勺远、文本多種數(shù)據(jù)橙喘，通過(guò)全選symbol即可完成整體的數(shù)據(jù)填充。填充完數(shù)據(jù)后胶逢，右側(cè)會(huì)新增刷新按鈕厅瞎，可以把填充的數(shù)據(jù)還原成最初開始的。
自定義數(shù)據(jù)源
Sketch默認(rèn)的圖文數(shù)據(jù)其實(shí)不符合我們實(shí)際的工作需求初坠，設(shè)計(jì)師可以通過(guò)自身所在的行業(yè)特點(diǎn)來(lái)給自己自定義數(shù)據(jù)源和簸。
旅游類的地名、風(fēng)景照片比較多碟刺，電商類的商品名锁保、商品圖、價(jià)格比較多等等半沽。比如我所在的是教育行業(yè)爽柒，老師名字、老師頭像抄囚、課程名稱等頻繁要使用霉赡，所以就可以自己做數(shù)據(jù)源。
我們打開設(shè)置里面的Data幔托，可以看到默認(rèn)的數(shù)據(jù)穴亏。
點(diǎn)擊左下角的Add Data蜂挪，就可以選擇你想要的圖文數(shù)據(jù)。
需要注意的是嗓化，圖片數(shù)據(jù)是以文件夾為選擇目標(biāo)棠涮，文本數(shù)據(jù)是以一個(gè)txt文件為選擇目標(biāo)。數(shù)據(jù)所在的文件位置不能改變刺覆，否則會(huì)失效严肪，需要再次添加。
txt文本數(shù)據(jù)需要按照“每行一個(gè)數(shù)據(jù)”這樣的格式來(lái)填寫谦屑，由于Mac無(wú)法右鍵新建txt文本驳糯，這里提供一個(gè)demo，大家下載后直接按格式填充即可氢橙。
鏈接:https://pan.baidu.com/s/1IfMZkoyVUut0JPUapl2A
密碼:8bg6
配置和自定義好需要的文本和圖片數(shù)據(jù)后酝枢，再遇到界面中的圖文填充，就可以快速一鍵完成了悍手，極大地提高了我們的設(shè)計(jì)效率帘睦。
