從設計端建立設計系統 – part 1

設計系統(design system),我想許多從業的設計師多少都有聽過,或是也曾試著在自家產品導入設計系統,但大多設計師所想像的設計系統,大概僅是在軟體(figma)裡設計好組件(compoenents),讓其他設計師也可以共享這份已經做好的組件,嚴格來說這樣的做法僅是在設計端建立一個共享的資源庫(library),不能稱的上是設計系統。

掰掰,UI Club 社團

首先要感謝大家加入這個社團,UI Club 2015 成立至今也有 7 年了,這些年產業的變化很大,記得我剛入門介面設計時,一個人摸索著這個新的領域,使用的軟體是 illustrator、photoshop,當時光是標識文件、切圖、交付這件事情就費盡苦心,也寫了不少文章來分享個人經驗,如今時光飛逝,技術日新月異,我們有了更多更方便的軟體可以使用,介面設計這個領域,對於一般人來說,也逐漸不是那麼遙不可及,我很開心在這個過程中我能參與其中。

UI小知識 — State與Status有什麼不同?

不知道大家在做圖時,有沒有遇到命名的問題,到底說明組件的狀態要用 state 還是 status?這兩個名詞的翻譯都是「狀態」,但使用上好像有點不太一樣,很有趣的是,這個問題不是只有介面設計師會有,工程師也會有相同問題,應該說只要母語不是英文的人,都很容易混淆,所當你上網 google「state vs status」時,不同領域的人,就會給你不同的解釋與答案,而這篇文章就是要用介面設計的角度,來討論 state 跟 status 的差異。

用戶行為模式(3) — 需求與動機的關係

從上篇的討論我們可以知道動機 ≠ 需求,因為動機有分內、外在動機,這也驗證了一開始前面的那句話:「需求可能形成動機,但動機不一定就是需求」。所以,我們先給一個簡單的結論:「需求不是外在動機。」,看起來應該沒什麼問題(就目前看來),但有幾個問題我們可以繼續探討:需求就是內在動機嗎?外在動機會影響需求嗎?外在動機會變成內在動機嗎?

用戶行為模式(2) — 需求與動機

需求(Needs)與動機(Motivation),這兩個名詞很常見,但常常會被混在一起使用,我常常會問學生能理解需求跟動機的差異嗎?能完整回答出這兩個名詞差異的很少,大部份人都認為它們指的是相同的事情,而且都混在一起使用,但真的是如此嗎?

介面設計常見的「設計」詞彙

這篇文章主要是來介紹在介面設計文件中常見的設計詞彙,這些詞彙常見於各種規範文件;其實多數的設計詞彙並沒有正確或是一致的定義,通常都是各自習慣使用,這些詞彙大多是一些組合名詞,像是「設計原則」就是由「設計」與「原則」組合而成,通常不難理解,但使用上可以多思考這些詞彙背後的含意,在做設計時會更清楚到底在做什麼。

介面設計規範(UI Design Guideline)的撰寫方式

關於介面設設計規範(UI Design Guideline;以下通稱 Guideline)的撰寫方式,其實目前並沒有一致的規則與邏輯,每一間公司或產品可能撰寫的方式都會不一樣,而且 Guideline 不應該只是單純的「文件標識」,作為文件,最重要的就是用來紀錄與溝通,而Guideline的溝通對象為何?通常就是工程師、設計師或PM/UX,所以在撰寫這份文件時,要確保閱讀者能夠理解,並持續的運用到產品的維護與開發上。

設計的心理學(2) — 設計的基本原則

一個優良的設計要滿足兩個特點:可發現性 (Discoverbility)、易理解性 (Understanding)。從字面上的意思來看,可發現性是指,使用者能夠容易發現那些是可以做的動作 、怎麼做;易理解性是指使用者可以容易理解並知道該如何使用。

設計的心理學(1) — 行動的七個階段

這陣子看了一本設計心理相關的書《設計的心理學》,是 Donald A. Normand — 唐納.諾曼的大作,只要是從事介面或是使用者經驗的設計,應該多少都會看過他的著作 ,而這本書已經是第三版了,作者也不斷的修正及增加新的內容。這本書不太好閱讀,偏重認知心理學,理論與實務之間的結合,但為了把從書中學到的東西內化,我將裡面所提到的重要概念再透過自己理解的方式來進行說明與討論。

用戶行為模式(1) — 用戶行為的五個階段

個人投入ui/ux的教育領域有一段時間了,在數百次與學生互動過程中,累積了一些經驗,在反覆的聽取學生描述想法的過程中,我發現其實用戶的行為,應該有個穩定的模式,先稱這個模式為:「用戶行為模式(Model of User Behavior)」。