跳過導覽
A conceptual illustration showing a 3D version of Sketch
學習設計

深入探討:使用連結資料快速建立井然有序的資料集並將其應用於您的設計

使用連結資料將結構化的 JSON 資料集新增至您的設計,使您的作品更具代表性和包容性。

無論您是在製作新的元件還是在建立整個網站,使用真實資料一直都是良好設計的核心。它不僅可以幫助團隊測試版面的彈性,還可以幫助設計師考慮更廣泛的使用者,並創造出適合每個人的作品。

井然有序的資料在設計中有哪些好處?

使用資料可以輕鬆地將各種內容(例如大頭貼和名稱)新增至您的文件中。但您也可以在 Sketch 中使用自己的資料,方法是新增純文字檔或影像資料夾作為資料來源。最近,我們新增了連結資料功能,它支援 JSON 檔案,可幫助您更進一步。

例如,您不希望紐約市的天際線照片與「東京」的位置相符。這不僅在您的設計中看起來像是一個錯誤,還可能會分散觀看您的模型或測試您的原型的人的注意力,使他們無法專注於您真正想從他們那裡學到的東西。

使用 JSON 檔案的連結資料支援解決了這些問題。它允許您以有組織的群組應用資料,因此屬於一起的資料在您的設計中始終保持在一起。

建立您自己的井然有序的 JSON 資料集

以上述使用世界各地城市資訊的範例來說,資料集可能如下所示:

[
  {
    "City": "Tokyo",
    "Country": "Japan",
    "Image": "/Skylines/Tokyo.jpg",
    "Population": "37,400,068",
    "Description": "Tokyo, Japan's busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples."
  },
  {
    "City": "New York City",
    "Country": "United States",
    "Image": "/Skylines/NewYorkCity.jpg",
    "Population": "18,819,000",
    "Description": "New York City sits where the Hudson River meets the Atlantic Ocean. Its iconic sites include the Empire State Building and sprawling Central Park."
  },
]

想用這個平面資料集建立一些東西嗎?下載完整的 JSON 檔案和相關影像,並將其新增至您的 Sketch 文件。

像這樣格式化資料可以確保無論您在設計中何處使用相同的結構,所有資料都會一起管理和替換。因此,「東京」這個名稱將始終與其天際線和人口的照片相符。

將連結資料應用於文件中圖層

您可以將連結資料應用於群組以更新其文字和影像圖層,以及覆寫群組和符號實例中的值 — 就像您可以將文字資料應用於文字圖層和文字覆寫一樣。

但請記住:Sketch 需要知道它應該與您的群組匹配的項目(CityCountry 等)。Mac 應用程式將使用圖層名稱來進行匹配,因此您的圖層名稱和結構應與 JSON 檔案中的鍵和結構相同。

A screenshot showing how to organize a group within a Sketch document when applying a specific set of JSON data.

即使它們在 JSON 檔案中沒有直接對應的項目,您也可以建立中間群組來組織您的圖層。例如,在此文件中有一個「Skyline」群組,它沒有出現在 JSON 中。

當您要應用資料時,會出現一個工具提示,顯示 Sketch 正在尋找匹配的圖層名稱 — 讓您更容易記住資料集包含的內容。

An image showing the Data menu in Sketch, with a cursor hovering over one of the Linked Data sets. A tooltip shows the different attributes within the JSON data file.

在側邊欄中按住 Control 鍵並點選您的群組,然後從選單中選擇「資料」以查看您的資料集。將滑鼠懸停在您想要使用的資料集上,工具提示會顯示您需要的圖層名稱。

從「插入」選單快速新增預先組織好的連結資料

我們知道,正確命名群組中的每個圖層可能會很繁瑣。因此,您可以直接使用「插入」選單從您的資料來源插入群組,而不必建立每個所需的文字圖層,然後再將資料套用至這些圖層。

這適用於個別資料點,但連結資料更能突顯此功能的優勢。您的群組將充滿正確命名的圖層,並且每個圖層都會自動與 JSON 中的項目匹配。接下來,您只需套用所需的樣式即可。

從選單插入資料後,您可以任意格式化資料,並隨時使用新資料更新。

僅套用資料集中選取的資料

想要建立幾個不同的視圖和佈局,但仍然使用您的 JSON 資料嗎?沒問題。如果您不希望資料項目顯示在特定視圖中,只需將其從群組中排除即可。Sketch 會忽略無法與圖層名稱匹配的項目。

這表示您可以使用相同的 JSON 檔案為文件中不同的視圖提供資料。例如,您可以在同一個文件中建立僅顯示高階資訊的列表視圖,以及包含更詳細資訊的詳細資訊視圖。

An image showing two different Artboards in a Sketch document. One uses only a few parts of the JSON data set, while the other uses every attribute.

您可以使用同一組資料來建立列表視圖和詳細資訊視圖 — 只要略過包含您不需要的資料的任何圖層即可。

**快速提示:**將資料套用至群組後,您可以選擇「插入」>「資料」>「重新載入資料」或按下 D 以使用 JSON 檔案中的另一個隨機項目重新載入群組。

建立群組後,您可以將其轉換為符號以在整個設計中使用。該符號會記住建立它的資料集,因此您可以建立新的符號實例,並隨時使用 JSON 集中的新資料重新載入它們。

將複雜資料新增至巢狀符號

想要建立自己的連結資料嗎?Sketch 現在支援 JSON 檔案中的巢狀結構。這些巢狀項目將根據其名稱與巢狀群組或巢狀符號實例匹配。

這表示您可以在符號或由一組複雜的巢狀符號組成的群組中使用連結資料。我們知道很多人會在符號本身中包含文字圖層的處理方式 — 尤其是在您有支援內容的情況下,例如您每次插入標題時都想要保留的選用圖示或安全區域。在這種情況下,您的圖層結構可能如下所示

An image showing how to structure layers in a Sketch document in order to support nested data in a JSON file. There are several Symbols nested within another Symbol, and each one contains a text layer with the same name.

在此範例中,「城市」、「國家/地區」和「人口」都是同一個符號的實例,每個實例都包含一個名為「↳ 儲存格文字」的圖層。從 Sketch 72 開始,您可以編寫支援此結構的 JSON 字典

[
  {
    "City": {
      "↳ Cell Text": "Tokyo"
    },
    "Country": {
      "↳ Cell Text": "Japan"
    },
    "Skyline": "/Skylines/Tokyo.jpg",
    "Population": {
      "↳ Cell Text": "37,400,068"
    },
    "City Definition": {
      "↳ Cell Text": "Metropolis prefecture"
    },
    "City Population": {
      "↳ Cell Text": "13,515,271"
    }
  }
]

想要使用此巢狀資料集建立某些內容嗎?下載完整的 JSON 檔案和相關圖片,並將其新增至您的 Sketch 文件。

請記住,您在符號和資料檔案中引入的巢狀結構越多,兩者就需要越匹配。您可能需要考慮使用共享樣式、色調和顏色變數來處理您通常會包含在巢狀符號中的一些屬性。

選擇排序或隨機資料

您現在可以選擇以文字檔案或資料夾中定義的順序(依字母順序)套用資料,或繼續使用預設的隨機選項。只需在「資料」選單中取消勾選或勾選「隨機插入資料」方塊即可。

**快速提示:**您只需按一下檢查器,即可套用和重新載入圖片和文字圖層中的資料。無需再費心在選單中尋找正確的資料集!

如果您只是想要快速建立一個大頭貼或產生一個逼真的使用者名稱,那麼隨機套用資料會很方便。但如果您正在處理像是搜尋結果畫面之類的功能,您可能已經根據該佈局以特定方式組織了資料。同樣地,如果您希望設計的不同部分保持一致性,那麼隨機套用的資料可能會造成阻礙。

如果您取消勾選此選項,無論您重新整理多少次,您的資料將始終保持與資料集中的順序相同。


我們希望這些新增功能可以讓您更輕鬆地在 Sketch 中使用真實資料。您是否正在使用一套您認為其他人可能會覺得有用的資料集?請在我們的社群媒體上告訴我們,我們會分享最佳範例。如果您對資料設計有任何想法或回饋,請與我們聯繫

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 新手,還是回來查看新功能,我們都能讓您在幾分鐘內設定完成並準備好開始創作。

免費開始使用
免費開始使用