新功能:智慧動畫 — 讓您的原型動起來。 瞭解詳情

跳過導覽

資料

上次更新日期:2023 年 9 月 20 日
閱讀時間:6 分鐘

使用「資料」工具,您可以在設計中新增不同的影像和文字,以建立逼真的模型和原型。

Sketch 預設提供幾種類型的資料來源,包括:

  • 文字資料:姓名和城市。
  • 影像資料:適用於大頭貼和拼貼的各種個人資料圖片。
  • 連結資料:包含圖片和簡短個人簡介的一組使用者個人資料。

Unsplash 外掛程式已預先安裝在 Sketch 中,您可以使用它來搜尋並插入 Unsplash 圖庫中的影像或隨機影像。您也可以使用第三方資料外掛程式來使用資料來源。

將資料新增至圖層

若要將資料快速新增至畫布作為新圖層,請在工具列中開啟「插入」 + 選單,然後選取「資料」 dataset,或從選單列中選擇「插入」>「資料」。然後,選取您要新增的文字、影像或連結資料。

若要將資料直接新增至現有圖層,請先選取您的圖層,在選單列中開啟「圖層」>「資料」,然後選擇「文字」或「影像」資料類型(Sketch 會始終將「連結」資料插入為它自己的圖層群組)。

請記住,您只能將影像資料新增至現有的形狀或影像圖層。同樣地,您只能將文字資料新增至現有的文字圖層。

您可以使用「資料」工具快速新增或更新影像和文字資料

預設情況下,我們會從您的資料來源顯示隨機資料。但是,您可以取消勾選「資料」選單中的「隨機插入資料」核取方塊,以按照資料來源中的相同順序顯示資料。

An image showing the Insert Data at Random checkbox

取消勾選「隨機插入資料」核取方塊,即可按照資料來源中的相同順序插入資料。

重新整理和斷開資料

要從資料來源重新整理圖片或文字,請選取一個或多個資料圖層,開啟工具列中的「插入+ 選單,然後選擇「資料」>「重新整理資料」。或者,在選單列中選擇「圖層」>「資料」>「重新整理資料」,或按下 D(87 版及更早版本:>D)。

要斷開資料來源的連線,請選取一個或多個資料圖層,開啟工具列中的「插入+ 選單,選擇「資料」>「斷開資料來源連線」。或者,在選單列中選擇「圖層」>「資料」>「斷開資料來源連線」。

請記住,斷開圖層與資料來源的連線並不會恢復其原始內容。

將資料與符號搭配使用

您可以在符號中的不同圖層新增多個資料來源。

要重新整理符號中已有的所有圖片或文字資料,請選取該符號,然後在選單列中前往「圖層」、「資料」,然後選擇「圖片」或「文字」。

您也可以使用檢查器中每個符號覆蓋中的「資料圓形資料按鈕 按鈕,在符號中新增或重新整理文字資料。

如果符號中有多張圖片,但只想重新整理其中一張圖片,請在圖層列表中展開符號並選取該圖片(或按住 Command 鍵並點選它),然後點選檢查器中「覆蓋」面板中的「資料資料集 圖示。或者,在符號中選取圖片,然後在選單列中前往「圖層」>「資料」>「從符號來源重新整理資料」。

如果符號中有多張圖片,您可以透過檢查器中的「覆蓋」一次全部重新整理它們,但*不能*一次重新整理一張。要重新整理單張圖片,請在圖層列表中選取它(或按住 Command 鍵點選該圖片),然後在選單列中前往「圖層」>「資料」>「從符號來源重新整理資料」。

您可以透過符號覆蓋輕鬆新增或重新整理資料

新增資料來源

您可以建立自己的資料來源,並透過「Sketch」>「設定」> 資料 將它們新增至 Sketch。

如何透過「設定」新增新的資料來源

建立新的資料來源

要建立您自己的文字資料來源,請建立一個純文字 (.txt) 檔案,每個資料值都位於新的一行,例如:

Afghanistan
Albania
Algeria
Andorra
Angola
...

若要新增圖片資料來源,您只需建立一個包含所有要使用之不同圖片的資料夾,然後透過「設定」中的「資料」索引標籤將其新增即可。設定

您可以使用 JPG、PNG、TIFF、GIF 和(從 v90 版開始)WebP 檔案格式作為圖片資料。

將您的資料來源儲存在不會變更的位置。如果您將資料來源移至其他位置,則需要使用更新的位置將其再次新增至 Sketch。

使用連結資料

對於連結資料,您可以使用以有意義的方式組合不同資料集的 JSON 檔案,讓更實際地進行壓力測試設計變得更容易。

使用連結資料一次更新不同類型的資料

使用連結資料建立 JSON 檔案

首先,您需要一個包含如下格式資料的 JSON 檔案

[
   {
    "Photo": "baobab.jpeg",
    "Location": "Menabe, Madagascar",
    "Title": "Avenue of the Baobabs",
    "Trees": "20 trees",
   },
   {
    "Photo": "laurel.jpeg",
    "Location": "Madeira, Portugal",
    "Title": "Laurel Forest",
    "Trees": "300 trees",
   },
   {
    "Photo": "bamboo.jpeg",
    "Location": "Kyoto, Japan",
    "Title": "Sagano Bamboo Forest",
    "Trees": "2000 trees",
   }
 ]

您也可以在 JSON 檔案中包含巢狀資料結構,並在符號和群組中使用它們。使用群組的名稱作為 JSON 結構中的巢狀群組。巢狀資料將會顯示在每組資料內的群組中。

[
    {
        "name": "Anje Keizer",
        "avatar": "/Faces/109.jpg",
        "location": "Bangkok",
        "bio": "Dog lover 🐕, mahjong champion 🀄️, and traveler 🗺 ",
        "social": {
          "handle": "@akeizer01",
          "bio": "Loving life and living in Dallas, go Mavs!"
        }
    },
  ]

如同新增其他資料來源一樣,透過 Sketch > 偏好設定 > 資料 > 新增資料 來新增您的 JSON 檔案。

將您的 JSON 檔案儲存在 Mac 電腦的本地端,並將 JSON 檔案和圖片放在同一個資料夾中。我們也建議您調整圖片大小以獲得更好的效能。

在現有設計中使用連結資料

在圖層列表中,將群組或符號中的圖層命名為與 JSON 資料檔案中使用的名稱完全相同。完成後,選取您的群組或符號,並從工具列中的資料 dataset 或透過按住 Control 鍵並點擊選取項的快捷選單,選擇新的 JSON 資料來源。

如果您選取一組圖層或多個符號,您將無法從檢查器套用連結資料。請改用工具列中的資料或快捷選單(按住 Control 鍵並點擊)套用連結資料。

如何將連結資料新增到現有設計

在空白畫布上使用連結資料

您也可以使用連結資料將新的圖層組直接新增到畫布。從插入選單中,選擇資料,然後選取您要使用的連結資料來源。然後,您可以將連結資料排列成網格以新增更多項目,並選擇重新整理資料以使用新資訊重新整理每個圖層。

如何將連結資料新增到空白畫布

使用資料外掛程式連結

您也可以像安裝一般的外掛程式一樣安裝資料外掛程式,這將會開啟一系列全新的資料來源供您使用。

如果您有興趣建立資料外掛程式,請查看這份實用指南以及我們的開發人員文件