這篇文章主要是來介紹在介面設計文件中常見的設計詞彙，這些詞彙常見於各種規範文件；其實多數的設計詞彙並沒有正確或是一致的定義，通常都是各自習慣使用，這些詞彙大多是一些組合名詞，像是「設計原則」就是由「設計」與「原則」組合而成，通常不難理解，但使用上可以多思考這些詞彙背後的含意，在做設計時會更清楚到底在做什麼。
這篇文章除了整理一些詞彙外，還會附上一些參考資源，這些資源也是設計師常會參考的重點資料來源。同時，想透過這次的內容，讓大家能用更宏觀的角度來思考設計系統，其實產品設計須要與公司的發展緊密結合，結合的方式就是明確的定義下面這些會提到的設計詞彙。
許多設計師常常會覺得設計總是孤單的事，但事實是，好的設計必須與產品開發流程及公司發展策略緊密結合，才能發揮設計的價值，仔細思考下面的設計詞彙或許會帶來一些不錯的靈感。
設計價值觀（Design Values）
在了解設計價值觀前，我們先了解價值觀的定義：
價值觀（Values）是一種處理事情判斷對錯、做選擇時取捨的標準。
來源：wiki
價值觀是我們主觀判斷是非的一般標準，套用在公司上，常見的價值觀會來自於公司的使命或是願景，所以套用在設計上，我們可以這樣定義：
設計價值觀是評價設計好壞的一般標準，通常這個標準會與公司產品的使命、願景緊密連結。
UI Club
而設計價值觀會激發出設計原則（Design Principle）和設計模式（ Design Pattern）。如果沒有設計價值觀，代表沒有評斷設計好壞的標準，那你的設計就難以決擇；比較大的公司都會有自己價值觀，另外公司的價值觀也會隨著經營者不同有所改變，例如 Apple 的 Steven Jobs 與 Tim Cooker 價值觀就不太一樣，最終帶給用戶的感受也會呈現在最終的產品或服務上 。
通常我們可以在公司的招募網頁找到官方說法的價值觀，但真實的價值觀，可能要從產品或服務的體驗上去感受它，而大部份的公司通常也不會有太清楚的設計價值觀陳述，有時會將這樣價值觀陳述寫在產品的設計原則上，但最終都要與公司的價值觀有所共嗚。
參考資料：
- Apple Share Values： https://www.apple.com/careers/us/life-at-apple.html
- Ant Design Values：https://ant.design/docs/spec/values
- Spotify core Values：https://hrblog.spotify.com/2016/09/02/spotifys-core-values/
設計語言（Design Language）
設計語言比較少見，但會出現在比較大量級的公司，像是 IBM、微軟、Google…等等這種等級的公司，設計語言（Design Language）根據wiki的定義：
A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.
來源：wiki
所以我們可以知道，設計語言包含了許多建構產品的視覺元素，它有點像是針對「視覺」定義的視覺系統，能夠成為「語言」也就代表它足以作為溝通的工具。例如 IBM 的 Design Language，其中包含了設計哲學（philosophy）及相關的視覺元素：字體、icon、顏色、logo、圖片、動畫…等等都有定義明確的使用建議與規範，而自身的設計系統 Carbon Design System 也是從視覺語言所發展出來的。
另外，做為溝通工具，更多的時候是希望透過視覺語言與用戶溝通，讓用戶對產品有鮮明的品牌認知，像是當我們一想到 Google 的「 Material Design」就能聯想到「扁平化」的視覺特徵，而前一陣子很流行的 Mac Big Sur ，就會想到扁平但又帶有一點立體及漸層的風格，而這些風格也都是產品想帶給用戶的一種形象與感受，因此設計語言也會賦予產品個性，也是公司形象的一種延申。
參考連結：
設計系統
設計系統（Design System），這個詞最近在社群中很常被提及，但什麼是設計系統，各家的解釋或是用法各有不同，翻開國外一些具指標性的文章，對於設計系統的解釋也不太一樣，NNGroup 是這麼解釋設計系統的：
「A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels」
來源：https://www.nngroup.com/articles/design-systems-101/
大致上是說，設計系統是建立一組可以在不同頁面或 channels 裡規模化管理並分享的設計標準。再看由 Smashing Magzine 所推出的 Design System Book 裡的解釋：
「A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product.」
摘錄自: Alla Kholmatova. 「Design Systems」。
指出設計系統是一個用在數位產品的內在聯結模式與共享的實踐方式。以上這兩個解釋，我認為前者比較偏向「產品」或是「功能」來定義設計系統，以「管理」的角度來建構設計系統；後者則比較偏向「組織」、「部門」的合作方式來定義設計系統，這也是我們最近常聽到的「Design Ops （設計營運）」的設計系統邏輯，兩種定義都是為了產生出一致且可規模化的設計結果。
設計系統有很多好處，像是提高工作效率、降低溝通成本、維持品牌的一致性…等等，但仔細想想除了好處，高度系統化的設計，其實也伴隨著一些問題與風險，這邊開放給大家思考，之後會再寫一篇文章專門聊聊設計系統。
參考連結
設計原則（Design Principle）
設計原則，應該也是許多設計師常聽到的詞彙，原則通常就是代表一些不易改變且很重要的事情，而根據 Interaction Design Foundation 對於設計原則的定義是：
Design principles are widely applicable laws, guidelines, biases and design considerations which designers apply with discretion.
來源：https://www.interaction-design.org/literature/topics/design-principles
設計原則就是一些我們在進行設計時考量到的規則。這些規則會幫助你完成設計目標，在設計的領域，我們常常看到許多設計原則，這些原則可能是一些視覺理論，或是某些設計大師的設計哲學，像我就喜歡 Dieter Rams’s 的提出的十個好設計原則（Ten principles for good design），這些原則也會被設計師引用在不同的領域。
而在介面設計看到的原則，泛指的產品介面設計原則，例如 Apple iOS 系統的 Human Interface Guildeline（HIG）裡面，針對iOS的系統就有定義一些「原則」，以產品的角度來看，我們可以說是設計 iOS 產品介面的「大原則」，而 iOS 所例出來的產品設計原則有六項：Aesthetic Integrity、Consistency、Direct Manipulation、Feedback、Metaphors、User Control，每個原則都值得我們在做設計時反覆審視，再細看每個操作元件，都會附上該元件使用的一些「小原則」，也就是元件在使用的一些重點注意事項，這些小原則是以大原則作為設計目標，彼此串聯起來，就是要符合前面提到的設計價值觀，讓用戶能真實感到受到產品價值。
另外，在介面設計領域，也有一些通用的設計原則，會成為通用的設計原則都是因為的大家對於提出者的建議有高度的認同，介面設計最常見的原則就是 Jakob Nielsen 提出來的 10 Usability Heuristics，可以作產品易用性評估的大原則。再回到產品思考，如果可以建立或引用明確的設計原則，在做設計時也比較容易達成明確的設計目標。
參考連結：
設計規範（Design Guideline）
相信許多人都知道或聽過設計規範（Design Guideline），定義參考 Interaction Design Foundation：
Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience.
來源：https://www.interaction-design.org/literature/topics/design-guidelines
設計規範其實就是一份文件，說明了一些建議的做法與設計原則，是用來溝通的文件，關於撰寫方式可以參考我寫的文章：介面設計規範（UI Design Guideline）的撰寫方式
那怎麼理解設計規範？作為「規範」，我們可以將它理解成「內部標準」，它是由公司內部的團隊制定的規格文件，像是 Apple 的 iOS Human Interface guideline，是 Apple 內部團隊所撰寫的一份標準文件，除了自家的產品外，在蘋果生態內的開發者也會依據這份文件做為設計或開發標準，但對其他公司的產品來說，Apple 的規範文件會更像是一個外在標準文件，設計師或開發者都會盡可能的去遵循這些標準，蘋果公司也會計對這些標準來進行產品上架審核，目的也是為了讓使用 Apple 裝置的用戶能夠有更一致的用戶體驗。
此外，我們常常會提到的設計標準（standard）跟設計規範很像，但能稱為「標準」也代表這份文件具有高度的共識，之於 Apple 或是 Google 所提供的設計規範文件外，文件背後其實還有引用更高的設計標準，這份標準就是 WCAG（Web Content Accessibility Guidelines），這份文件是由 W3C（World Wide Web）組織所維護，它的內容是針對任何人（包含殘疾人士或是年長者），都能通用的 Web 易用性標準，被廣泛的應用在不同系統的開發上，對於設計、開發、測試都有給予一些明確的開發指引，可以說是規範中的規範，也是在 Web 領域公認的一致化標準。
參考連結：
設計模式（Design Pattern）
設計模式（Design Pattern），這裡的模式英文是 Pattern，Pattern 在中文也翻為「圖樣」，是一種重覆出現的圖案，因此設計模式我們可以這樣思考：一直重覆出現的元素或組件；使用在介面設計，指的就是介面設計模式（UI Design Pattern），定義參考 Interaction Design Foundation：
User interface (UI) design patterns are reusable/recurring components which designers use to solve common problems in user interface design.
來源：https://www.interaction-design.org/literature/topics/ui-design-patterns
根據它的定義，我們知道介面設計模式是一個重覆使用的組件（components），但重點不是「重覆使用」，重點是這個設計模式解決了用戶遇到的「重覆問題」，所以設計模式是針對特定問題的一般性解決方案。舉個列來說，「按鈕」是一個常見的設計模式嗎？我們的確很常使用到「按鈕」，但不是因為它重覆出現，而是它解決了用戶「接下來我要做什麼？」的問題，按鈕的用途不是只是點擊，點擊只是它的預設用途（affordance）（關於預設用途可以參考這篇），有效的引導用戶完成任務才是我們的設計目的，因此我們要專注於「問題」來設計按鈕，將它變成設計模式，在這樣的思考下才有主按鈕（primary button）、次按鈕（secondary button）之分，再依據用戶情境或操作目的，來選用我們的按鈕組合，這才是「按鈕」的設計模式。
關於介面設計模式，可以參考《操作介面設計模式 》這本書，裡面有介紹並整理常見的介面設計模式，也有詳細說明每個組件所解決的問題、使用情境、方式…等等，對於初學者來說，是理解介面設計不錯的途徑。
參考連結：
操作介面設計模式：https://www.books.com.tw/products/0010880011
結論
以上這些常見的設計詞彙，會出現在許多的設計文件裡，通常我們會從設計系統開始思考，如果我們要架構一個完整的設計系統，要如何開始？如果先不討論那些組件（component）的細節，或許可以從更大方向的方式著手，像是找出「設計價值觀」或是「設計語言」，並在建立設計系統之前，為它們做明確的定義，這也是我們常聽到的「設計策略」。有了大方向，再從「設計規範」開始建立「設計原則」，定義問題並找到「設計模式」，接著才思考更具體的執行方式。
或許這樣的方式更能聚焦在「設計」而非「系統」，透過這篇文章給大家一個思考方向，有任何心得歡迎留言討論。
UI Club 