Anthony Kan與 AI 一起實作
所有實作筆記

讓設計,在一次次修改後仍然連得起來

設計變數、語意化元件和自動檢查,各自負責不同事情。

做下去,遇上新難題閱讀時間約 2 分鐘

一處變好了,另一處卻可能開始不同

一顆新按鈕,單獨看可能合理,間距、字重或操作反應卻與其他地方不同。幾段對話,可以留下幾套視覺習慣。再修好一個個別畫面,也未必會令它們連起來。

不同的響應式斷點,不一定是錯。導覽列與寫作空間,可能需要在不同寬度改變。要看這個分別,是為了清楚的排版需要,還是修改時無意留下的變化。

讓每一層,有清楚責任

My Next Step 結合了設計規範文件、共用元件管理,以及畫面規則檢查。設計變數(design tokens)負責為重複使用的數值命名;語意化元件(semantic components)用來標明主操作、次操作等用途;排版規則則處理不同區域怎樣分配畫面空間。

自動檢查可以守住已定下的結構規則,例如設計變數放在哪個檔案、共用元件必須透過哪個入口引用。但它不能替人判斷每個構圖、每個對比問題,或某個操作放在那裏是否仍然合理。寫下來的設計系統與實際打開畫面檢視,需要互相配合。

有意識地改共用語言

加新顏色或按鈕樣式前,先看現有角色是否合用。真的需要新角色,就定義一次,再看哪些地方會用到。避免只為眼前截圖加一行覆蓋,另一種寬度卻跟着壞掉。

要試共用元件的不同狀態,也看幾個有代表性的使用頁面,在手機與電腦寬度怎樣呈現。一致性應減少意外,也要容得下不同工作的需要。

相關專案

My Next Step