介面設計常見的「設計」詞彙 - UI Club

而設計價值觀會激發出設計原則（Design Principle）和設計模式（ Design Pattern）。

如果沒有設計價值觀，代表沒有評斷設計好壞的標準，那你的設計就 ... 跳至內容區 這篇文章主要是來介紹在介面設計文件中常見的設計詞彙，這些詞彙常見於各種規範文件；其實多數的設計詞彙並沒有正確或是一致的定義，通常都是各自習慣使用，這些詞彙大多是一些組合名詞，像是「設計原則」就是由「設計」與「原則」組合而成，通常不難理解，但使用上可以多思考這些詞彙背後的含意，在做設計時會更清楚到底在做什麼。

這篇文章除了整理一些詞彙外，還會附上一些參考資源，這些資源也是設計師常會參考的重點資料來源。

同時，想透過這次的內容，讓大家能用更宏觀的角度來思考設計系統，其實產品設計須要與公司的發展緊密結合，結合的方式就是明確的定義下面這些會提到的設計詞彙。

許多設計師常常會覺得設計總是孤單的事，但事實是，好的設計必須與產品開發流程及公司發展策略緊密結合，才能發揮設計的價值，仔細思考下面的設計詞彙或許會帶來一些不錯的靈感。

設計價值觀（DesignValues） 在了解設計價值觀前，我們先了解價值觀的定義： 價值觀（Values）是一種處理事情判斷對錯、做選擇時取捨的標準。

來源：wiki 價值觀是我們主觀判斷是非的一般標準，套用在公司上，常見的價值觀會來自於公司的使命或是願景，所以套用在設計上，我們可以這樣定義： 設計價值觀是評價設計好壞的一般標準，通常這個標準會與公司產品的使命、願景緊密連結。

UIClub 而設計價值觀會激發出設計原則（DesignPrinciple）和設計模式（DesignPattern）。

如果沒有設計價值觀，代表沒有評斷設計好壞的標準，那你的設計就難以決擇；比較大的公司都會有自己價值觀，另外公司的價值觀也會隨著經營者不同有所改變，例如Apple的StevenJobs與TimCooker價值觀就不太一樣，最終帶給用戶的感受也會呈現在最終的產品或服務上。

通常我們可以在公司的招募網頁找到官方說法的價值觀，但真實的價值觀，可能要從產品或服務的體驗上去感受它，而大部份的公司通常也不會有太清楚的設計價值觀陳述，有時會將這樣價值觀陳述寫在產品的設計原則上，但最終都要與公司的價值觀有所共嗚。

參考資料： AppleShareValues：https://www.apple.com/careers/us/life-at-apple.htmlAntDesignValues：https://ant.design/docs/spec/valuesSpotifycoreValues：https://hrblog.spotify.com/2016/09/02/spotifys-core-values/ 設計語言（DesignLanguage） 設計語言比較少見，但會出現在比較大量級的公司，像是IBM、微軟、Google…等等這種等級的公司，設計語言（DesignLanguage）根據wiki的定義： Adesignlanguageordesignvocabularyisanoverarchingschemeorstylethatguidesthedesignofacomplementofproductsorarchitecturalsettings,creatingacoherentdesignsystemforstyling.來源：wiki 所以我們可以知道，設計語言包含了許多建構產品的視覺元素，它有點像是針對「視覺」定義的視覺系統，能夠成為「語言」也就代表它足以作為溝通的工具。

例如IBM的DesignLanguage，其中包含了設計哲學（philosophy）及相關的視覺元素：字體、icon、顏色、logo、圖片、動畫…等等都有定義明確的使用建議與規範，而自身的設計系統CarbonDesignSystem也是從視覺語言所發展出來的。

另外，做為溝通工具，更多的時候是希望透過視覺語言與用戶溝通，讓用戶對產品有鮮明的品牌認知，像是當我們一想到Google的「MaterialDesign」就能聯想到「扁平化」的視覺特徵，而前一陣子很流行的MacBigSur，就會想到扁平但又帶有一點立體及漸層的風格，而這些風格也都是產品想帶給用戶的一種形象與感受，因此設計語言也會賦予產品個性，也是公司形象的一種延申。

參考連結： IBMDesignLanguageMicrosoftfluentDesign 設計系統 設計系統（DesignSystem），這個詞最近在社群中很常被提及，但什麼是設計系統，各家的解釋或是用法各有不同，翻開國外一些具指標性的文章，對於設計系統的解釋也不太一樣，NNGroup是這麼解釋設計系統的： 「Adesignsystemisasetofstandardstomanagedesignatscalebyreducingredundancywhilecreatingasharedlanguageandvisualconsistencyacrossdifferentpagesandchannels」來源：https://www.nngroup.com/articles/design-systems-101/ 大致上是說，設計系統是建立一組可以在不同頁面或channels裡規模化管理並分享的設計標準。

再看由SmashingMagzine所推出的DesignSystemBook裡的解釋： 「Adesignsystemisasetofinterconnectedpatternsandsharedpracticescoherentlyorganizedtoservethepurposeofadigitalproduct.」摘錄自:AllaKholmatova.「DesignSystems」。

指出設計系統是一個用在數位產品的內在聯結模式與共享的實踐方式。

以上這兩個解釋，我認為前者比較偏向「產品」或是「功能」來定義設計系統，以「管理」的角度來建構設計系統；後者則比較偏向「組織」、「部門」的合作方式來定義設計系統，這也是我們最近常聽到的「DesignOps（設計營運）」的設計系統邏輯，兩種定義都是為了產生出一致且可規模化的設計結果。

設計系統有很多好處，像是提高工作效率、降低溝通成本、維持品牌的一致性…等等，但仔細想想除了好處，高度系統化的設計，其實也伴隨著一些問題與風險，這邊開放給大家思考，之後會再寫一篇文章專門聊聊設計系統。

參考連結 DesignSystemBook 設計原則（DesignPrinciple） 設計原則，應該也是許多設計師常聽到的詞彙，原則通常就是代表一些不易改變且很重要的事情，而根據InteractionDesignFoundation對於設計原則的定義是： Designprinciplesarewidelyapplicablelaws,guidelines,biasesanddesignconsiderationswhichdesignersapplywithdiscretion.來源：https://www.interaction-design.org/literature/topics/design-principles 設計原則就是一些我們在進行設計時考量到的規則。

這些規則會幫助你完成設計目標，在設計的領域，我們常常看到許多設計原則，這些原則可能是一些視覺理論，或是某些設計大師的設計哲學，像我就喜歡DieterRams’s的提出的十個好設計原則（Tenprinciplesforgooddesign），這些原則也會被設計師引用在不同的領域。

而在介面設計看到的原則，泛指的產品介面設計原則，例如AppleiOS系統的HumanInterfaceGuildeline（HIG）裡面，針對iOS的系統就有定義一些「原則」，以產品的角度來看，我們可以說是設計iOS產品介面的「大原則」，而iOS所例出來的產品設計原則有六項：AestheticIntegrity、Consistency、DirectManipulation、Feedback、Metaphors、UserControl，每個原則都值得我們在做設計時反覆審視，再細看每個操作元件，都會附上該元件使用的一些「小原則」，也就是元件在使用的一些重點注意事項，這些小原則是以大原則作為設計目標，彼此串聯起來，就是要符合前面提到的設計價值觀，讓用戶能真實感到受到產品價值。

另外，在介面設計領域，也有一些通用的設計原則，會成為通用的設計原則都是因為的大家對於提出者的建議有高度的認同，介面設計最常見的原則就是JakobNielsen提出來的10UsabilityHeuristics，可以作產品易用性評估的大原則。

再回到產品思考，如果可以建立或引用明確的設計原則，在做設計時也比較容易達成明確的設計目標。

參考連結： 10UsabilityHeuristics十個好設計的原則 設計規範（DesignGuideline） 相信許多人都知道或聽過設計規範（DesignGuideline），定義參考InteractionDesignFoundation： Designguidelinesaresetsofrecommendationsonhowtoapplydesignprinciplestoprovideapositiveuserexperience.來源：https://www.interaction-design.org/literature/topics/design-guidelines 設計規範其實就是一份文件，說明了一些建議的做法與設計原則，是用來溝通的文件，關於撰寫方式可以參考我寫的文章：介面設計規範（UIDesignGuideline）的撰寫方式 那怎麼理解設計規範？作為「規範」，我們可以將它理解成「內部標準」，它是由公司內部的團隊制定的規格文件，像是Apple的iOSHumanInterfaceguideline，是Apple內部團隊所撰寫的一份標準文件，除了自家的產品外，在蘋果生態內的開發者也會依據這份文件做為設計或開發標準，但對其他公司的產品來說，Apple的規範文件會更像是一個外在標準文件，設計師或開發者都會盡可能的去遵循這些標準，蘋果公司也會計對這些標準來進行產品上架審核，目的也是為了讓使用Apple裝置的用戶能夠有更一致的用戶體驗。

此外，我們常常會提到的設計標準（standard）跟設計規範很像，但能稱為「標準」也代表這份文件具有高度的共識，之於Apple或是Google所提供的設計規範文件外，文件背後其實還有引用更高的設計標準，這份標準就是WCAG（WebContentAccessibilityGuidelines），這份文件是由W3C（WorldWideWeb）組織所維護，它的內容是針對任何人（包含殘疾人士或是年長者），都能通用的Web易用性標準，被廣泛的應用在不同系統的開發上，對於設計、開發、測試都有給予一些明確的開發指引，可以說是規範中的規範，也是在Web領域公認的一致化標準。

參考連結： WCAG 設計模式（DesignPattern） 設計模式（DesignPattern），這裡的模式英文是Pattern，Pattern在中文也翻為「圖樣」，是一種重覆出現的圖案，因此設計模式我們可以這樣思考：一直重覆出現的元素或組件；使用在介面設計，指的就是介面設計模式（UIDesignPattern），定義參考InteractionDesignFoundation： Userinterface(UI)designpatternsarereusable/recurringcomponentswhichdesignersusetosolvecommonproblemsinuserinterfacedesign.來源：https://www.interaction-design.org/literature/topics/ui-design-patterns 根據它的定義，我們知道介面設計模式是一個重覆使用的組件（components），但重點不是「重覆使用」，重點是這個設計模式解決了用戶遇到的「重覆問題」，所以設計模式是針對特定問題的一般性解決方案。

舉個列來說，「按鈕」是一個常見的設計模式嗎？我們的確很常使用到「按鈕」，但不是因為它重覆出現，而是它解決了用戶「接下來我要做什麼？」的問題，按鈕的用途不是只是點擊，點擊只是它的預設用途（affordance）（關於預設用途可以參考這篇），有效的引導用戶完成任務才是我們的設計目的，因此我們要專注於「問題」來設計按鈕，將它變成設計模式，在這樣的思考下才有主按鈕（primarybutton）、次按鈕（secondarybutton）之分，再依據用戶情境或操作目的，來選用我們的按鈕組合，這才是「按鈕」的設計模式。

關於介面設計模式，可以參考《操作介面設計模式》這本書，裡面有介紹並整理常見的介面設計模式，也有詳細說明每個組件所解決的問題、使用情境、方式…等等，對於初學者來說，是理解介面設計不錯的途徑。

參考連結： 操作介面設計模式：https://www.books.com.tw/products/0010880011 結論 以上這些常見的設計詞彙，會出現在許多的設計文件裡，通常我們會從設計系統開始思考，如果我們要架構一個完整的設計系統，要如何開始？如果先不討論那些組件（component）的細節，或許可以從更大方向的方式著手，像是找出「設計價值觀」或是「設計語言」，並在建立設計系統之前，為它們做明確的定義，這也是我們常聽到的「設計策略」。

有了大方向，再從「設計規範」開始建立「設計原則」，定義問題並找到「設計模式」，接著才思考更具體的執行方式。

或許這樣的方式更能聚焦在「設計」而非「系統」，透過這篇文章給大家一個思考方向，有任何心得歡迎留言討論。

Sharethis:分享到Twitter(在新視窗中開啟)按一下以分享至Facebook(在新視窗中開啟)請按讚：喜歡正在載入... 發表者：Rei 介面設計師 檢視更多文章 文章分頁導航 舊文章上一篇文章：介面設計規範（UIDesignGuideline）的撰寫方式新文章下一篇文章：用戶行為模式（2）—需求與動機 留言取消回覆 在此輸入你的回應… 在下方填入你的資料或按右方圖示以社群網站登入： 電子郵件（電子郵件地址不會公開） 名稱 個人網站 您的留言將使用WordPress.com帳號。

( 登出 /  變更 ) 您的留言將使用Twitter帳號。

( 登出 /  變更 ) 您的留言將使用Facebook帳號。

( 登出 /  變更 ) 取消 連結到%s 透過電子郵件通知我後續回應。

有新文章時用Email通知我。

Δ 追蹤 已追蹤 UIClub 加入其他98位關注者 我要註冊 已經有WordPress.com帳號了？立即登入。

UIClub 自訂 追蹤 已追蹤 註冊 登入 複製短網址 回報此內容 以閱讀器檢視 管理訂閱 收合此列 %d位部落客按了讚：