diff --git a/src/content/post/how-to-organize-your-digital-product/index.mdx b/src/content/post/how-to-organize-your-digital-product/index.mdx index 4860c09d..b97e220d 100644 --- a/src/content/post/how-to-organize-your-digital-product/index.mdx +++ b/src/content/post/how-to-organize-your-digital-product/index.mdx @@ -15,11 +15,11 @@ publishDate: 2024-07-05 先說痛點，先前專案並沒有具體的規範應該如何定義 UI 當中的數值，導致魔法數字（沒有規範與描述的值）流竄於整個產品當中，造成了非常大的的困擾。 -我會解釋得盡量具體明白如果要重新設計一款數位產品會怎麼管理其中的數值，這些想法很大程度啟發自 [Figma 文件](https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles)。 +我會解釋得盡量具體明白如果要重新設計一款數位產品會怎麼管理其中的數值，這些想法很大程度啟發自 [Figma 關於 Design Token 相關文件](https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles)。 ## 什麼是 UI 變數 -就是**存在於使用者介面上的變數**，有的地方叫它設計令牌（Design Tokens），有的地方叫它變數（Variables），總之就是一個名稱指向一個值，可以想像一個箱子裝載某種應用於 UI 的數值。 +UI 變數就是**存在於使用者介面上的變數**，有的地方叫它設計令牌（Design Tokens），有的地方則稱呼變數（Variables），總之就是一個名稱指向一個值，可以想像一個箱子裝載某種應用於 UI 的數值。 UI 數值有很多種，可以是代表顏色、大小尺度、圓角尺度、透明度、特效尺度……等，具體的例子如下： @@ -39,7 +39,7 @@ UI 數值有很多種，可以是代表顏色、大小尺度、圓角尺度、 > 目的：達成全局通用且可被管理的「數值」 -既然被稱呼為原始值，這個階段的命名應當直白單純的描述「值」本身，例如：它是黃色的、綠色的、洋紅色的，並且與其他顏色的明暗關係是介於百分之三十左右，未來整套系統**只會也只需要有這樣一種顏色避免混亂**：`yellow-300`。 +既然被稱呼為原始值，這個階段的命名應當直白單純的描述「值」本身，例如：它是黃色的、綠色的、洋紅色的，並且與其他顏色的明暗關係是介於百分之三十，未來整套系統**只會也只需要有這樣一種顏色避免混亂**：`yellow-300`。 透過建立一系列變數來代表某種色階區段的顏色： @@ -54,7 +54,7 @@ UI 數值有很多種，可以是代表顏色、大小尺度、圓角尺度、 > 目的：達成全局通用且可被管理的「意義」 -語意化就代表在這個階段應當賦予值一個具體的意義，例如先前提到的黃色系列顏色本身並沒有具體的意涵，可以在任何地方被使用，於是可以ㄎ骰創立新的變數指向這些原始值，例如： +語意化就代表在這個階段應當賦予值一個具體的意義，例如先前提到的黃色系列顏色本身並沒有具體的意涵，可以在任何地方被使用，可能會導致讓特定的顏色與意義綁定在一起，在中大型系統中我們必然會需要將重複的 Pattern 給抽離出來管理，例如： - `accent-100` = `yellow-100` - `accent-200` = `yellow-200` @@ -62,7 +62,7 @@ UI 數值有很多種，可以是代表顏色、大小尺度、圓角尺度、 這樣就創建了一個具備意涵的顏色：`accent`（強調色），未來只要產品中有需要強調顏色的時候，由於先前已經定義好整套現成可用的強調顏色，任何會需要強調顏色的 UI 都能受益，增進了設計的一致性與維護性。 -同時製作語意化變數也能動態的的替換特定語意化變數背後的數值，最好的例子就是[深色模式](https://www.webdong.dev/post/build-theme-the-right-way/)，可以以下情境…… +同時製作語意化變數也能動態的的替換特定語意化變數背後的數值，最好的例子就是[深色模式](https://www.webdong.dev/post/build-theme-the-right-way/)，舉例情境…… 1. 未來強調色要微調，只要重新指向語意化數值就能一次搞定。（我不喜歡強調色是黃色，所以改指向紅色） 2. 要製作不同風格系統，只要重新指向語意化數值就能一次搞定。（我要製作一套深色風格介面，所以改指向深色系列的原始值） @@ -71,10 +71,13 @@ UI 數值有很多種，可以是代表顏色、大小尺度、圓角尺度、 ### 第三步：元件變數 Component Variable -現今 UI 多少具備某種性質的可重複擴充性，就像積木一樣，而**元件變數就是針對這些元件的數值所打造的語意化變數**，例如 `button-hover`、`button-active`、`button-disabled`，定義好這些元件變數就像是在為元件建立可替換的介面，透過指定不同數值給元件變數以達成相同元件但不同的外貌。 +現今 UI 多少具備某種性質的可重複擴充性，就像積木一樣，而**元件變數就是針對這些元件的數值所打造的語意化變數**，例如 `button-hover`、`button-active`、`button-disabled`，定義好這些元件變數就像是在為元件建立可替換的介面，透過指定不同數值給元件變數以達成相同元件但不同的外貌，舉例情境…… + +1. 相同的元件但在橫跨不同產品時，由於每個產品對應品牌顏色皆不相同，因此可以透過指定顏色給事先定義好的元件變數達成相同元件但不同產品品牌的外貌。 +2. 定義元件變數將會讓我們強制思考元件對外的關係，要求公開接口的描述必須清晰。 ## 總結 -還在撰寫，預計這幾天打算再補充些如何自動化同步變數、建立單一真相來源 (single source of truth) 的設計系統的概念。 +> 以上都是用最具體的方式描述如何管理 UI 變數的大概念 -https://www.youtube.com/watch?v=KA2WwX7qlYA +實際上你可以根據自己的喜好去制定細節，像是統一常見的元件接口名稱、語意化變數的命名規則、原始值的階度……等，重點是要讓整個系統具備一致性與可維護性。