設計系統 | JoeyToday

分類

🔨

打造你的 Notion（Build Your Own）

狀態

Last edited by

負責編輯人

最後更新

一個設計系統可以確保你的品牌始終如一地（漂亮地）呈現給受眾。Notion 的多功能使之成為定義系統，並與公司內外的設計師共享資源的強大場所。

我們一起構建一個壯觀的設計系統。

在這份指南中，你將看到：

1. 建立新資料庫 2. 設定屬性 3. 搭建設計系統支柱構成支柱內容排版顏色標識基調&聲音圖示可訪問性 4. 定制視圖顯示藝廊建立狀態看板形成簡單的列表 5. 共享設計系統

1. 建立新資料庫

你的設計系統會是一個 Notion 資料庫，其中的項目是系統的核心支柱，比如 Typography（排版）和 Logos（標識）。

將新頁面新增到工作區。從灰度選單中選擇 Table（表格） 。

命名資料庫。如果需要，可以將游標停在標題上，新增圖示。

2. 設定屬性

新增屬性，可以幫你管理設計系統支柱，並使其保持更新。在本例中包括以下屬性：

支柱（Title（標題））

建立時間（Created Time(建立時間)）

最後更新時間（Last Edited Time（最後編輯時間））

所屬人（Person（人員））

狀態（Select（選擇））

新增或編輯屬性

點選表格頂部的 Properties（屬性） 。

點選現有屬性的名稱以對其進行編輯，要麼是點選 + Add a property（新增屬性） ，建立新屬性。

命名屬性。

在 Property Type（屬性類型） 下，選擇要包含的資訊類型。

對每個屬性重複此操作。

按需定義屬性值

對於 Select（選擇） 和 Multi-Select（多項選擇） 屬性，例如本例設計系統中的 Status（狀態），當新增新支柱時，你可以建立下拉選項。只需要輸入屬性值，並點選 enter 。如果需要，你可以選擇與每個選項含義相對應的顏色，比如綠色代表 Current。

對於 Person（人員） 屬性，你可以在工作區的成員中選擇。每當你把他們計入在內，他們都會收到通知。

Created Time（建立時間） 和 Last Edited Time（最後編輯時間） 會自動生成。

3. 搭建設計系統支柱

建立新支柱

支柱的內容會有所不同，但建立的方法都是一樣的：

將游標停在空白行的 Title（標題） 屬性上，然後點選 OPEN（打開） ，或者用資料庫右上方的 New（新建） 按鈕建立一個新項目。

給你的支柱命名。

在沒有自動值的情況下填寫屬性。

新增一個頁面封面。將游標停在標題上，點選 Add Cover（新增封面） 。封面將成為藝廊視圖中的卡片預覽。

構成支柱內容

排版

展示品牌字體，並提供檔案、嵌入程式和授權資訊。對於每一種字體系列：

通過輸入 /h1 新增名稱作為標題1。

新增一個展示字體系列的圖片：貼上、從電腦上拖動或輸入 /image 。

通過輸入 /h2 ，將新增 "下載 "作為標題2。

從你的電腦檔案夾中拖動字體檔案，或者輸入 /file來選擇它們。

通過輸入 / h2 ，將「 Web Embed（網絡嵌入）」新增為標題2。

輸入一個使用嵌入程式的簡短指令。

通過輸入 / code 新增程式區塊。在底部，選擇 HTML作為語言。

將嵌入程式貼上到程式區塊中。

通過將完整的程式包裝在塊中來顯示完整的程式：將游標停在程式區塊上，然後點選右上角的•• 。切換到 Wrap Code（自動換行程式） 。

你可能也想在 "許可證 "標題(/h1)下面加入許可資訊。

顏色

Notion 藝廊提供了一個完美的格式，可以展示色板，其中包含了每種顏色的有用資訊。請按照以下步驟對每一個色板進行操作。

準備好圖片

為了在藝廊中漂亮地顯示你的顏色，你需要將每種顏色保存為圖片。使用 Color Saver 或你喜歡的設計工具。尺寸並不重要，我們的尺寸是 500 x 300 像素。請看下面這個例子：

建立新藝廊

輸入 /gallery（藝廊） ，並選擇 Gallery - Inline（藝廊-內聯） 。

給色板取一個它所代表的板塊名稱，如 "主要色板"。

配置屬性

對於每種顏色，你要包含識別規格。我們的例子使用了 Hex、RGB 和 SASS 變量。對於你想包含的規格，建立一個 Text（文本） 屬性。

將游標停在你的圖庫上，然後點選右上角的 •• 。

點選 Properties（屬性） 。

點選現有的屬性來重命名和改變其類型。你要建立一個新的屬性，需要點選 + Add a property（新增屬性）。

切換到你想在藝廊卡上顯示的屬性。

設定卡片預覽

將游標停在藝廊上，並點選右上角的••。

點選 Properties（屬性）。

對於 Card Preview（卡片預覽），選擇 Page Cover（頁面封面）。

新增彩色圖片

打開新增顏色的頁面：點選一個佔位符或選擇 + New（新建）。

給它命名。

將圖片檔案設為封面：

把游標停在標題上，點選 Add Cover（新增封面）。
把游標停在封面上，選擇 Change Cover（更改封面）。
選擇 Upload（下載）選項，然後點選 Choose a File（選擇檔案），就可以瀏覽到你的彩色圖片。

填寫屬性。

標識

指定何時使用您的標識變化，並提供各種格式的下載。

輸入/h1，為每個標識類別建立一個標題1，如 "主要標誌"、"次要標誌 "和 "社會品牌"。對每一個類別，簡要解釋一下何時使用這些變化。

每個類別包括：

輸入/image，新增每個變化的圖片。使用拖放將這些圖片排列在一起。

用說明文字標記變化：將游標停在圖片上，點選 ••，然後選擇 Caption（說明文字）。

包括要下載的各種檔案類型，比如圖 PNG 和 SVG：對於每種檔案，輸入 /file，並選擇檔案。

基調&聲音

品牌保持個性化，激勵公司文化，確保一致的聲音。在本節中，你還可以指定書面交流的視覺和語法指導。

簡要概述品牌宣傳的總體方法。請參考以下段落：

在 Acme公司，我們一直是以能反映品牌和價值觀的方式發言。我們所選擇的語言總是把使用者放在第一位，幫助他們更好地理解、引導並找到產品的價值。

輸入 /table of contents（目錄），新增可點選的內容快照。

你可以用標題、文本和專案列表來編寫內容。使用 Heading 1（輸入 /h1 ）來指定章節，Heading 2和 Heading 3 ( /h2 和 /h3 )來指定小節。你可以在每個 Heading 1中加入一個表情符號來幫助區分章節。該模板包括這些核心部分：指導原則、使用者界面指南和語法。