設計系統規範與決策
設計系統規範與決策
設計系統規範與決策
從實際產品問題出發，建立可被團隊長期使用的系統規範
從實際產品問題出發，建立可被團隊長期使用的系統規範
從實際產品問題出發，建立可被團隊長期使用的系統規範
專案背景
專案背景
專案背景
隨著產品功能與使用情境持續擴張，團隊逐漸面臨設計語言在不同頁面使用不一致、關鍵互動行為缺乏跨情境判斷依據，以及多語系、動態字級與裝置差異進一步放大既有設計缺口等問題。
隨著產品功能與使用情境持續擴張，團隊逐漸面臨設計語言在不同頁面使用不一致、關鍵互動行為缺乏跨情境判斷依據，以及多語系、動態字級與裝置差異進一步放大既有設計缺口等問題。
我的角色
除了根據產品專案負責建立、整理、優化組件以外，我也負責:
除了根據產品專案負責建立、整理、優化組件以外，我也負責:
1
1
盤點產品中長期累積的體驗或組件應用不一致問題
盤點產品中長期累積的體驗或組件應用不一致問題
2
2
制定可被設計、產品與工程共同使用的設計系統規範
制定可被設計、產品與工程共同使用的設計系統規範
3
3
發起設計系統調整需求，推動開發與確保落地品質穩定性
發起設計系統調整需求，推動開發與確保落地品質穩定性
案例 01
案例 01
案例 01
視覺層級：陰影使用規範
視覺層級：陰影使用規範
在新版視覺風格中，陰影被大量引入作為層級表現工具，但團隊並未定義清楚「何時應使用陰影」。結果導致產品中出現以下混亂情境：
在新版視覺風格中，陰影被大量引入作為層級表現工具，但團隊並未定義清楚「何時應使用陰影」。結果導致產品中出現以下混亂情境：
同一類型頁面，陰影使用方式不一致
同一類型頁面，陰影使用方式不一致
有些頁面完全未使用陰影，有些則過度使用
有些頁面完全未使用陰影，有些則過度使用
陰影逐漸被當作裝飾，而非層級語言
陰影逐漸被當作裝飾，而非層級語言
無套用陰影
部分套用陰影
全部套用陰影
頁面盤點
頁面盤點
盤點並分析產品中陰影的實際應用頁面，整理其對應情境與使用理由，作為後續建立一致性規範的參考依據
盤點並分析產品中陰影的實際應用頁面，整理其對應情境與使用理由，作為後續建立一致性規範的參考依據
陰影 Tokens 收斂
精簡既有陰影 token，同步定義各陰影層級的應用情境與使用規則，以降低誤用風險、提升視覺一致性
陰影 Tokens 收斂
精簡既有陰影 token，同步定義各陰影層級的應用情境與使用規則，以降低誤用風險、提升視覺一致性
陰影 Tokens 收斂
精簡既有陰影 token，同步定義各陰影層級的應用情境與使用規則，以降低誤用風險、提升視覺一致性
設計決策流程
設計決策流程
建立明確的設計決策流程，降低設計師在陰影使用上的判斷成本，同時穩定產品的視覺層級結構與一致性
建立明確的設計決策流程，降低設計師在陰影使用上的判斷成本，同時穩定產品的視覺層級結構與一致性
陰影規範
建立清楚的陰影應用規範，讓設計師在交付設計時能直接引用與參考，降低誤用風險與設計判斷上的不確定性
陰影規範
建立清楚的陰影應用規範，讓設計師在交付設計時能直接引用與參考，降低誤用風險與設計判斷上的不確定性
陰影規範
建立清楚的陰影應用規範，讓設計師在交付設計時能直接引用與參考，降低誤用風險與設計判斷上的不確定性
成果
成果
創造視覺層級的一致性
創造視覺層級的一致性
設計師：
設計師：
不再各自解讀陰影用途，而是以同一套規則呈現資訊層級
不再各自解讀陰影用途，而是以同一套規則呈現資訊層級
使用者：
使用者：
在跨頁操作時能快速理解重點與結構，降低認知負擔
在跨頁操作時能快速理解重點與結構，降低認知負擔
可驗證的系統判斷
可驗證的系統判斷
團隊從圍繞在個人偏好討論是否加陰影，轉為基於系統邏輯的共識判斷，提升設計品質的一致性
團隊從圍繞在個人偏好討論是否加陰影，轉為基於系統邏輯的共識判斷，提升設計品質的一致性
提升跨職能協作效率
提升跨職能協作效率
我將 Shadow token 的整理與規範同步給工程團隊，讓他們能理解 token 背後的適用時機，減少實作時的誤用與來回調整
我將 Shadow token 的整理與規範同步給工程團隊，讓他們能理解 token 背後的適用時機，減少實作時的誤用與來回調整
案例 02
案例 02
案例 02
行為一致性：鍵盤互動樣式規範
行為一致性：鍵盤互動樣式規範
在輸入相關流程中，鍵盤拉起時的互動行為缺乏系統性定義：
在輸入相關流程中，鍵盤拉起時的互動行為缺乏系統性定義：
Fixed Button 有時會隨鍵盤浮起，有時不會
Fixed Button 有時會隨鍵盤浮起，有時不會
多輸入欄位情境下，畫面被壓縮、遮擋視線
多輸入欄位情境下，畫面被壓縮、遮擋視線
多欄位數入的情境下，鍵盤交互會阻礙輸入的順暢度
多欄位數入的情境下，鍵盤交互會阻礙輸入的順暢度
Screen Audit & Analysis
Screen Audit & Analysis
透過盤點與分類產品中既有的按鈕與鍵盤交互樣式，釐清不同情境下的設計邏輯與隱含規則，作為優化各類輸入流程 UX 體驗的依據
透過盤點與分類產品中既有的按鈕與鍵盤交互樣式，釐清不同情境下的設計邏輯與隱含規則，作為優化各類輸入流程 UX 體驗的依據
組件研究
參考並比較多個產品與設計系統在鍵盤交互上的設計策略，解析其設計決策脈絡，並轉化為可被團隊實際採用的規範指引
組件研究
參考並比較多個產品與設計系統在鍵盤交互上的設計策略，解析其設計決策脈絡，並轉化為可被團隊實際採用的規範指引
組件研究
參考並比較多個產品與設計系統在鍵盤交互上的設計策略，解析其設計決策脈絡，並轉化為可被團隊實際採用的規範指引
設計決策流程
設計決策流程
透過建立清楚的設計決策流程，讓設計師在面對不同輸入情境時能快速做出一致的交互選擇，降低試錯成本並提升設計效率
透過建立清楚的設計決策流程，讓設計師在面對不同輸入情境時能快速做出一致的交互選擇，降低試錯成本並提升設計效率
鍵盤交互規範
建立鍵盤使用原則與交互情境設計準則，讓設計師在交付設計時能直接引用，提升設計交付的一致性與跨團隊溝通效率
鍵盤交互規範
建立鍵盤使用原則與交互情境設計準則，讓設計師在交付設計時能直接引用，提升設計交付的一致性與跨團隊溝通效率
鍵盤交互規範
建立鍵盤使用原則與交互情境設計準則，讓設計師在交付設計時能直接引用，提升設計交付的一致性與跨團隊溝通效率
成果
成果
輸入體驗在不同情境下的一致性
輸入體驗在不同情境下的一致性
透過明確定義鍵盤拉起與 Fixed Button 的互動規則，讓單一與多欄位輸入流程皆具備清楚且一致的邏輯，並進一步提升輸入效率與操作便利性
透過明確定義鍵盤拉起與 Fixed Button 的互動規則，讓單一與多欄位輸入流程皆具備清楚且一致的邏輯，並進一步提升輸入效率與操作便利性
提升設計品質與效率
提升設計品質與效率
設計師可直接依循既有規範與判斷流程處理 fixed button 和鍵盤互動情境，並直接於專案中引用文件，已提高交付效率
設計師可直接依循既有規範與判斷流程處理 fixed button 和鍵盤互動情境，並直接於專案中引用文件，已提高交付效率
提升設計交付溝通和協作效率
提升設計交付溝通和協作效率
透過清楚的 Spec 與行為定義，工程師能依規範直接實作，降低溝通與修正成本，提升跨團隊合作效率
透過清楚的 Spec 與行為定義，工程師能依規範直接實作，降低溝通與修正成本，提升跨團隊合作效率
案例 03
案例 03
案例 03
多國語言：Button 文案規範
多國語言：Button 文案規範
在產品轉換多語的過程中，有發現按鈕明顯出現：
在產品轉換多語的過程中，有發現按鈕明顯出現：
文案過長、且在開啟動態字級或是小裝置下易讀性下降
文案過長、且在開啟動態字級或是小裝置下易讀性下降
左右並排按鈕在部分頁面情境下爆版
左右並排按鈕在部分頁面情境下爆版
不同頁面的按鈕文案敘述方式不一致
不同頁面的按鈕文案敘述方式不一致
問題拆解
組件未定義 Fixed Button 多文案顯示規則
PM 缺乏 UX Writing 指引，文案多為直譯句子
關鍵操作文案被截斷，增加誤操作風險
問題拆解
組件未定義 Fixed Button 多文案顯示規則
PM 缺乏 UX Writing 指引，文案多為直譯句子
關鍵操作文案被截斷，增加誤操作風險
問題頁面盤點＆研究
問題頁面盤點＆研究
透過實機測試盤點目前存在按鈕顯示問題的頁面，並於不同裝置尺寸與動態字級設定下進行交叉驗證，以確認多情境下的實際呈現狀況與潛在風險
透過實機測試盤點目前存在按鈕顯示問題的頁面，並於不同裝置尺寸與動態字級設定下進行交叉驗證，以確認多情境下的實際呈現狀況與潛在風險
設計系統研究
參考多個主流設計系統與產品案例，分析其對長文案按鈕的設計原則與取捨邏輯，並依據團隊現行產品情境與限制，整理出最適合的設計策略
設計系統研究
參考多個主流設計系統與產品案例，分析其對長文案按鈕的設計原則與取捨邏輯，並依據團隊現行產品情境與限制，整理出最適合的設計策略
按鈕文案指南
按鈕文案指南
協助設計師與 PM 建立一致的按鈕撰寫原則與判斷基準，確保文案在符合 UX 操作語意的同時，也能降低多語系情境下發生爆版與易讀性風險
協助設計師與 PM 建立一致的按鈕撰寫原則與判斷基準，確保文案在符合 UX 操作語意的同時，也能降低多語系情境下發生爆版與易讀性風險
按鈕規範
針對不同按鈕類型制定多文案情境下的設計規範，作為設計與工程共同參考的依據，確保實作時的顯示行為與互動邏輯一致
按鈕規範
針對不同按鈕類型制定多文案情境下的設計規範，作為設計與工程共同參考的依據，確保實作時的顯示行為與互動邏輯一致
按鈕規範
針對不同按鈕類型制定多文案情境下的設計規範，作為設計與工程共同參考的依據，確保實作時的顯示行為與互動邏輯一致
成果
成果
多語系與不同字級下的按鈕體驗更一致
多語系與不同字級下的按鈕體驗更一致
透過規範，確保不同語言與字級設定下，按鈕文案皆能被完整且清楚地理解，提升整體使用體驗的一致性
透過規範，確保不同語言與字級設定下，按鈕文案皆能被完整且清楚地理解，提升整體使用體驗的一致性
建立 PM 與設計共用的文案判斷基準
建立 PM 與設計共用的文案判斷基準
將 Button 規範結合 UX Writing Guideline，讓 PM 在文案撰寫與翻譯階段即有明確參考依據，降低爆版的風險
將 Button 規範結合 UX Writing Guideline，讓 PM 在文案撰寫與翻譯階段即有明確參考依據，降低爆版的風險
將多文案風險前移至規劃階段
將多文案風險前移至規劃階段
產品團隊能在功能規劃與文案確認階段即避開高風險寫法，減少後續爆版、重工與開發修正，提升專案執行效率與設計品質
產品團隊能在功能規劃與文案確認階段即避開高風險寫法，減少後續爆版、重工與開發修正，提升專案執行效率與設計品質
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
( OTHER PROJECTS )
( OTHER PROJECTS )