這10個(gè)頂尖的設(shè)計(jì)規(guī)范，每個(gè)設(shè)計(jì)師都應(yīng)該收藏！

學(xué)習(xí) UI/體驗(yàn)設(shè)計(jì)，多看設(shè)計(jì)規(guī)范是必不可少的好方法。對(duì)于初學(xué)者來說，可以了解很好看又實(shí)用的設(shè)計(jì)稿，比那些中看不中用的飛機(jī)稿強(qiáng)多了。對(duì)于團(tuán)隊(duì)中的主力設(shè)計(jì)師來說，看設(shè)計(jì)規(guī)范不但可以反思自己的方案，還能學(xué)習(xí)怎么整理一套設(shè)計(jì)規(guī)范。

一般提到設(shè)計(jì)規(guī)范，大家說得最多的就是谷歌 Material Design、蘋果的人機(jī)界面指南、螞蟻集團(tuán) Ant.Design。其實(shí)除此之外，國際上還有很多優(yōu)秀的設(shè)計(jì)規(guī)范，值得大家參考借鑒。每個(gè)產(chǎn)品和項(xiàng)目的情況都不相同，生搬硬套任何一種規(guī)范往往都不太現(xiàn)實(shí)。建議大家可以多了解幾家設(shè)計(jì)規(guī)范，有選擇地參考學(xué)習(xí)。

目錄：

• 谷歌 Material Design
• 蘋果人機(jī)界面指南 Apple Human Interface Guidelines
• 微軟 Fluent 設(shè)計(jì)系統(tǒng)
• Atlassian 設(shè)計(jì)系統(tǒng)
• Shopify 設(shè)計(jì)系統(tǒng)
• IBM Carbon 設(shè)計(jì)系統(tǒng)
• Mailchimp 設(shè)計(jì)系統(tǒng)
• Salesforce Lightning 設(shè)計(jì)系統(tǒng)
• Helpscout 設(shè)計(jì)系統(tǒng)
• 美國政府網(wǎng)站設(shè)計(jì)系統(tǒng)

谷歌 Material Design

網(wǎng)站鏈接：https://material.io/

谷歌在互聯(lián)網(wǎng)行業(yè)的地位不言而喻，業(yè)界大咖都排隊(duì)去應(yīng)聘，不單技術(shù)世界頂尖，設(shè)計(jì)水平也相當(dāng)高。

不過，他們作為一家主要靠技術(shù)起家的公司，設(shè)計(jì)系統(tǒng)更注重邏輯性和系統(tǒng)性，學(xué)習(xí)和運(yùn)用起來比較容易理解。

然而由于這套設(shè)計(jì)系統(tǒng)不是以視覺為重點(diǎn)，所以更多地是參考交互而非視覺。

設(shè)計(jì)目標(biāo)：

• 創(chuàng)造一套視覺語言，將經(jīng)典的設(shè)計(jì)原則與技術(shù)創(chuàng)新、科學(xué)探索相結(jié)合。
• 開發(fā)一套統(tǒng)一的用戶體驗(yàn)系統(tǒng)，能夠跨越平臺(tái)、設(shè)備及輸入方式。
• 拓展其視覺語言，為品牌創(chuàng)新與表達(dá)提供基礎(chǔ)框架。

蘋果人機(jī)界面指南

網(wǎng)站鏈接：https://developer.apple.com/design/

用戶體驗(yàn)被視為蘋果產(chǎn)品的優(yōu)勢(shì)，所以他們的設(shè)計(jì)規(guī)范也有很多值得學(xué)習(xí)的地方。蘋果的設(shè)計(jì)規(guī)范包含了多種設(shè)備，包括 macOS、iOS、watchOS、vOS。

這套設(shè)計(jì)規(guī)范不像是 Material Design 那樣把各個(gè)規(guī)則和圖示表達(dá)得清清楚楚，而是更像是面向開發(fā)者的產(chǎn)品設(shè)計(jì)建議。

設(shè)計(jì)理念：

• 匠心高于一切：對(duì)于細(xì)節(jié)的極致追求
• 共情：了解用戶需求并在意客戶感受
• 聚焦：去除所有非必要的機(jī)會(huì)點(diǎn)
• 負(fù)責(zé)：人們對(duì)于一個(gè)公司或產(chǎn)品的觀點(diǎn)，全部歸咎于其傳遞的信息
• 友好：不論是小白用戶還是高級(jí)用戶，都能感受到高科技產(chǎn)品的平易近人
• 利用過去隱喻未來：簡潔的設(shè)計(jì)應(yīng)該讓用戶易于使用

微軟 Fluent 設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://www.microsoft.com/design/fluent/

微軟這個(gè)長盛不衰的 IT 界老大哥，雖然早些年沒那么重視體驗(yàn)設(shè)計(jì)，但這些年也搞出了自己的設(shè)計(jì)原則的。

而且這個(gè)設(shè)計(jì)原則不但包含 Web 和 Windows 平臺(tái)，甚至將 macOS、iOS 和 Android 都分別囊括在內(nèi)。

微軟的軟件產(chǎn)品全球覆蓋率極廣，為了滿足大量人群，他們將「包容性設(shè)計(jì) Inclusive Design」原則作為最重要的設(shè)計(jì)理念之一：

• 識(shí)別排他性
• 解決一個(gè)，并拓展至更多
• 從多樣性學(xué)習(xí)

Atlassian 設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://atlassian.design/

Atlassian 不像上面幾個(gè)公司開發(fā)自己的平臺(tái)，而是為敏捷團(tuán)隊(duì)提供協(xié)作工具（如 Jira 和 Trallo）。雖然國內(nèi)沒有那么出名，但在全球被成千上萬的團(tuán)隊(duì)所使用。

所以他們的設(shè)計(jì)規(guī)范就是為了提高產(chǎn)品設(shè)計(jì)和開發(fā)效率而創(chuàng)造的，很接地氣且容易使用。

設(shè)計(jì)理念：

• 在每次交互中建立信任
• 連接以求更好的協(xié)作
• 匹配與熟悉
• 端到端推動(dòng)任務(wù)
• 引導(dǎo)用戶獲取更大價(jià)值

Shopify 設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://polaris.shopify.com/

Shopify 是來自加拿大的一站式 SaaS 模式的電商服務(wù)平臺(tái)。在以獨(dú)立電商網(wǎng)站為主流的國際市場，將啟動(dòng)、運(yùn)營和拓展業(yè)務(wù)等流程都集合起來，全球賦能超過百萬客戶。

這套設(shè)計(jì)系統(tǒng)可以說是為了自己的業(yè)務(wù)而開發(fā)的，實(shí)用性很強(qiáng)，不但提供了代碼供復(fù)制，而且還有 Web、Android 和 iOS 平臺(tái)的可交互實(shí)例。

設(shè)計(jì)理念：

• 體貼：對(duì)任何使用我們工具或產(chǎn)品的人表示關(guān)心
• 賦能：我們希望人們使用時(shí)能感覺隨心所欲無所不能
• 工藝：應(yīng)該讓人感覺到我們的產(chǎn)品是由一流的匠人精心雕琢而成
• 效率：應(yīng)該讓人快速、準(zhǔn)確而不費(fèi)力地達(dá)成目標(biāo)
• 信賴：我們?yōu)榱司S持用戶的信任值而不懈努力
• 熟悉：不論是第幾次，都希望人們使用產(chǎn)品時(shí)能夠感到舒適

IBM Carbon 設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://www.carbondesignsystem.com/

IBM 曾經(jīng)與微軟和蘋果同在個(gè)人電腦賽道競爭，而后轉(zhuǎn)為服務(wù)大型企業(yè)，業(yè)務(wù)涉及商務(wù)咨詢、軟件開發(fā)服務(wù)、IT 托管與管理，從軟件產(chǎn)品到硬件甚至融資等。

因此他們的這套設(shè)計(jì)規(guī)范，也帶有很濃重的大型 B 端產(chǎn)品的色彩。

設(shè)計(jì)原則：

他們相信智慧、邏輯和科學(xué)能夠幫助商業(yè)、社會(huì)和人類狀況得到提升。如果格局夠大，好的設(shè)計(jì)不僅僅是滿足客戶要求，更是一種深層次的責(zé)任感和關(guān)聯(lián)性。

Mailchimp 設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://ux.mailchimp.com/patterns/

在溝通都靠郵件的國際社會(huì)，Mailchimp 以用戶體驗(yàn)極佳的郵件系統(tǒng)起家，業(yè)務(wù)已經(jīng)拓展至綜合營銷平臺(tái)，所以他們的設(shè)計(jì)規(guī)范非常注重信息展示。

設(shè)計(jì)理念：

在助力業(yè)務(wù)增長的同時(shí)，也保持本心。品牌理念也反映出其團(tuán)隊(duì)核心——對(duì)匠心的誠摯、對(duì)創(chuàng)意表達(dá)的熱愛、對(duì)品質(zhì)的執(zhí)著。

Salesforce Ligtning 設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://www.lightningdesignsystem.com/

作為全球市占率第一的 CRM 客戶管理平臺(tái)，Salesforce 的系統(tǒng)必須能夠應(yīng)對(duì)各種不同的業(yè)務(wù)和功能，所以他們?cè)谠O(shè)計(jì)規(guī)范上也下了不少功夫。

尤其是為了移動(dòng)時(shí)代而更新的 Lightning 輕量化設(shè)計(jì)體系，與之前相比做了很大的革新。

設(shè)計(jì)理念：

• 信任
• 成就客戶
• 創(chuàng)新
• 平等

Helpscout 設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://style.helpscout.com/

Help Scout 是一站式客戶服務(wù)平臺(tái)，為網(wǎng)站提供聊天窗、郵件、客戶管理等服務(wù)，也類似于 SaaS 系統(tǒng)。

設(shè)計(jì)原則：

• 品牌價(jià)值
• 有幫助的
• 信賴
• 人性化
• 積極向上
• 好奇心

美國政府網(wǎng)站設(shè)計(jì)系統(tǒng)

網(wǎng)站鏈接：https://designsystem.digital.gov/

說來很神奇，美國政府?dāng)?shù)字化發(fā)展得比較早，現(xiàn)在甚至已經(jīng)搞出一套自己的設(shè)計(jì)系統(tǒng)來了。

雖然做得不能說特別出色，但能有一份就說明態(tài)度不錯(cuò)。

他們認(rèn)為，用戶需求應(yīng)該為產(chǎn)品決策提供依據(jù)。無論受眾是公眾還是政府雇員，決策者必須從一開始就將真實(shí)用戶納入設(shè)計(jì)流程，以幫助構(gòu)建出能夠真正滿足人們需求的服務(wù)和產(chǎn)品。

設(shè)計(jì)原則：

• 始于用戶
• 獲取信任
• 容易使用
• 不斷推廣
• 傾聽

歡迎關(guān)注作者的微信公眾號(hào)：「體驗(yàn)進(jìn)階」