iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

Design System Research系列 第 9

2.3 Design System - Design Token

在學習一個新東西的最初階段
撞的牆一定是最多的,撐過去就好了!

Design token 其實原本看完頁面第一時間我是沒有完全理解的
不過還好跟一位資深的朋友一起討論後有比較理解了

checklist的說明是:構成設計系統最基礎的變數,比如說:顏色、字體,所以如果改變最基礎的變數影響是會擴及整個設計系統的
就好像昨天 Audi 網頁的 Basic 部分:色彩、字體規範、排版等等

它可以是色彩的 RGB 色碼、不透明度的百分比數值或是動畫的座標位置

在 Adobe spectrum 的說明則比 Audi 再多了Token 不同命名方式、不同裝置情況下的最小尺寸定義。
Token 命名方式有好幾種,主要依照畫面用途來選用
Global(整體):可以直接被應用在元件上,ex:顏色-尺寸
Alias(別名):有特定用途,可在不同位置重複使用,ex:CTA-背景-顏色
Component-specific(元件用途)標記:特定元件上做使用,ex:按鈕-CTA-背景-顏色

在整體尺寸標記上,桌機或行動裝置對最小尺寸的定義會有一點差異,比如說桌機的尺寸基本數值定義為 8px, 行動裝置的則定義為 10px
不過目前還沒有釐清 size token & static size token 在應用上的差異,希望有人理解的話可以跟我分享

Adobe 也列出了一些 Do & Don't的範例


實務上的工作經驗小故事

雖然不是我自己遇到的但覺得每個有一定經驗的工作者都可以做為借鏡

有個朋友跟我分享他以前實習的跟同事合作上偶爾會遇到
他基於經驗跟所學提出解決問題比較好的方式
私下跟同事提出時,同事會比較堅持己見或是要跟主管確認後才會採用
朋友就會有因為是實習而不被信任的感受
好像要花很多時間跟精力來回溝通才能夠說服對方
這個情況和感受偶爾也會發生在跟客戶應對的我身上
起初會覺得「我講的是事實,為什麼不信任我」
但後期就釋懷了,有時候可能因為年紀、資歷或其他等等原因
在剛入職場的階段,可能本來就要花很多時間去溝通或讓同事、客戶相信你的專業
但時間拉長來看,這個好像就是必經的路程,但有前面的積累、後期就會比較輕鬆了!
我們能做得好像就只有,當自己經驗累積後,不會因為別人資歷淺就不輕易採信他的建議

Day 9 End


上一篇
2.2 Design System - 設計語言 (9/24 updated)
下一篇
2.4.1 Design System - Avatar元件
系列文
Design System Research30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言