及時(shí)雨！這18個(gè)網(wǎng)站幫你打通設(shè)計(jì)規(guī)范的任督二脈

時(shí)間：2023-06-05 15:27:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-05 15:27:01 來源：網(wǎng)站運(yùn)營(yíng)

及時(shí)雨！這18個(gè)網(wǎng)站幫你打通設(shè)計(jì)規(guī)范的任督二脈：

最近一些小伙伴說公司要出一套產(chǎn)品設(shè)計(jì)規(guī)范，用來統(tǒng)一產(chǎn)品視覺，離職時(shí)方便同事對(duì)接，然后跑來問良心哥有沒有這方面參考可以看看？其實(shí)這些資料網(wǎng)上很多，只要我們稍微用心一點(diǎn)就可以找到很多一堆，今天用一篇文章幫大家打通設(shè)計(jì)規(guī)范的任督二脈，讓你不再為此流眼淚！

目錄

一、什么是設(shè)計(jì)規(guī)范？

二、國(guó)內(nèi)優(yōu)秀規(guī)范推薦

三、國(guó)際知名規(guī)范推薦

四、終極設(shè)計(jì)規(guī)范神器推薦

一、什么是設(shè)計(jì)規(guī)范？

設(shè)計(jì)規(guī)范對(duì)于一些設(shè)計(jì)師來說已經(jīng)耳朵聽出老繭了，其實(shí)有時(shí)就這么一個(gè)熟悉不過的東西，對(duì)于很多初學(xué)者來說得花很多時(shí)間去研究學(xué)習(xí)，那么簡(jiǎn)而言之設(shè)計(jì)規(guī)范就是項(xiàng)目產(chǎn)品設(shè)計(jì)的文檔，里面包含很多很多細(xì)小的規(guī)范，不僅僅是圖標(biāo)色彩字體等，還有組件按鈕、代碼段、設(shè)計(jì)指南、設(shè)計(jì)資源文件等等一個(gè)龐大的知識(shí)庫(kù)！它通常作為網(wǎng)站（公共或內(nèi)部）在線托管，單獨(dú)存在，方便一些相關(guān)人士調(diào)用。

二、國(guó)內(nèi)優(yōu)秀規(guī)范推薦

相比國(guó)際設(shè)計(jì)規(guī)范，我相信很多人可能更想?yún)⒖紝W(xué)習(xí)國(guó)內(nèi)一些大廠的設(shè)計(jì)規(guī)范吧，因?yàn)榭赡芨?b>接地氣”！

1、微信官方文檔

有關(guān)微信平臺(tái)所有的設(shè)計(jì)開發(fā)文檔規(guī)范

不僅僅是微信小程序，這里是微信官方推出的有關(guān)微信其他平臺(tái)的設(shè)計(jì)&開發(fā)文檔，對(duì)我們這批互聯(lián)網(wǎng)從業(yè)者非常友好，提供了非常詳細(xì)的說明，不管是學(xué)習(xí)研究，還是調(diào)入接口說明都非常方便。


當(dāng)然這里面微信其他平臺(tái)的設(shè)計(jì)規(guī)范都提供免費(fèi)下載，包含各種常見的格式！

2、支付寶小程序設(shè)計(jì)規(guī)范

標(biāo)題已經(jīng)寫的很明白了，為構(gòu)建支付寶生態(tài)體系友好一致的用戶體驗(yàn)，支付寶擬定了 支付寶小程序設(shè)計(jì)體驗(yàn)白皮書，幫助小程序合作伙伴快速了解設(shè)計(jì)核心關(guān)注點(diǎn)。不管是研究別人設(shè)計(jì)規(guī)范還是我們?nèi)ブЦ秾氶_發(fā)小程序都非常有用！

3、百度小程序設(shè)計(jì)規(guī)范

百度發(fā)布的智能小程序設(shè)計(jì)規(guī)范十分完善，提供的 500+ 組件基本覆蓋了小程序設(shè)計(jì)和使用的絕大多數(shù)場(chǎng)景，和 WeUI 一樣，只要從資源庫(kù)里拖拖拽拽，就可以輕松搞定各種頁(yè)面！




同時(shí)，還提供了一套精致的插畫庫(kù)和一套圖標(biāo)庫(kù)，素材豐富，不僅能用來創(chuàng)作小程序的頁(yè)面內(nèi)容，用在其他海報(bào)、封面等設(shè)計(jì)中

4、Ant Design 相關(guān)設(shè)計(jì)規(guī)范

Ant Design是螞蟻集團(tuán)基于大量的項(xiàng)目實(shí)踐和總結(jié)，研發(fā)的服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系。

里面提供了豐富的基礎(chǔ) UI 組件，以及各個(gè)組件的使用方法以及還有各種表單、列表、導(dǎo)航、落地頁(yè)、按鈕等組件庫(kù)，非常多參考模板。下面推薦4個(gè)螞蟻金服不同方向的設(shè)計(jì)規(guī)范參考




螞蟻金服移動(dòng)端







螞蟻金服PC端







螞蟻金服動(dòng)效規(guī)范







螞蟻金服可視化規(guī)范

5、Element Plus

餓了么官方設(shè)計(jì)規(guī)范

Element-Ul是國(guó)內(nèi)餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)，他們也推出了對(duì)應(yīng)的手機(jī)端框架Mint UI，前端們愛不釋手！很多公司程序都用的這套框架，我們可以在基于Element規(guī)范下設(shè)計(jì)話，方便對(duì)接很多，當(dāng)然設(shè)計(jì)規(guī)范文檔資源也是有的，自己可在官方下載！

6、TDesign

騰訊官方設(shè)計(jì)規(guī)范體系




TDesign 是騰訊內(nèi)部團(tuán)隊(duì)聯(lián)合開發(fā)者一起打造的企業(yè)級(jí)設(shè)計(jì)體系。匯集了騰訊眾多優(yōu)秀組件庫(kù)能力和設(shè)計(jì)研發(fā)經(jīng)驗(yàn)，包含桌面端、移動(dòng)端、小程序等組件庫(kù)源文件資源下載。

7、Semi Design

抖音設(shè)計(jì)規(guī)范

Semi Design是由抖音前端團(tuán)隊(duì)，MED 產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)、開發(fā)并維護(hù)的設(shè)計(jì)系統(tǒng)。包含了設(shè)計(jì)語(yǔ)言、React 組件、主題等開箱即用的中后臺(tái)解決方案，可用于快速搭建美觀的 React 應(yīng)用?，F(xiàn)已已持續(xù)穩(wěn)定維護(hù)了兩年多，它高質(zhì)量組件和強(qiáng)大的主題定制特性也獲得一眾用戶的青睞。

8、ArcoDesign

字節(jié)跳動(dòng)官方設(shè)計(jì)規(guī)范

ArcoDesign 字節(jié)跳動(dòng)旗下中后臺(tái)產(chǎn)品的體驗(yàn)設(shè)計(jì)和技術(shù)實(shí)現(xiàn)規(guī)范文檔，極具參考價(jià)值！













9、HarmonyOS Developer

華為鴻蒙設(shè)計(jì)規(guī)范




HarmonyOS 回歸本源設(shè)計(jì)，從浩瀚宇宙中抽象出動(dòng)態(tài)語(yǔ)言，模擬真實(shí)世界中的物理動(dòng)力學(xué)，將萬有引力融入到動(dòng)效設(shè)計(jì)中。




支持官方圖標(biāo)、字體等素材資源下載







10、Zan Design

有贊官方設(shè)計(jì)規(guī)范




有贊團(tuán)隊(duì)打造的服務(wù)于Saas產(chǎn)品的設(shè)計(jì)系統(tǒng)，規(guī)范主要包括產(chǎn)品原則、設(shè)計(jì)原則、內(nèi)容策略、布局與模式、視覺、動(dòng)效、資源、組件等幾大部分組成










11、Mand Mobile

滴滴金融官方設(shè)計(jì)規(guī)范

滴滴金融團(tuán)隊(duì)發(fā)布的面向金融場(chǎng)景金融行業(yè)設(shè)計(jì)的組件庫(kù)，他們希望通過組件化的解決方案，快速拉齊標(biāo)準(zhǔn)，降低生產(chǎn)成本，讓設(shè)計(jì)師能更好的專注于效率之外的增長(zhǎng)創(chuàng)新設(shè)計(jì)體驗(yàn)中。










12、Ding UI

釘釘官方設(shè)計(jì)規(guī)范

釘釘團(tuán)隊(duì)發(fā)布的Ding UI 4.0，組件類型全面豐富，支持素材資源下載！







小結(jié)

以上便是今天國(guó)內(nèi)一些大廠優(yōu)秀設(shè)計(jì)規(guī)范網(wǎng)站了，排名不分先后，除此之外還有很多很多這邊就不一一列舉，只要你想得到的公司基本都有自己設(shè)計(jì)規(guī)范系統(tǒng)，這里沒列舉別不代表沒有，不信你去搜搜華為、快手、京東、美團(tuán)....都有的，感興趣可自行百度，這邊只是拋磚引玉，下面我們一起看看國(guó)際一些不錯(cuò)的規(guī)范網(wǎng)站~







三、國(guó)際知名規(guī)范推薦

1、Human Interface Guidelines

蘋果官方設(shè)計(jì)規(guī)范




蘋果官方設(shè)計(jì)規(guī)范是我們每個(gè)互聯(lián)網(wǎng)人經(jīng)常要去翻的一個(gè)專業(yè)設(shè)計(jì)網(wǎng)站，里面包含各種視覺、交互、產(chǎn)品及數(shù)據(jù)架構(gòu)規(guī)范Apple面向外部的設(shè)計(jì)系統(tǒng)為macOS，iOS，watchOS，vOS的開發(fā)人員，設(shè)計(jì)人員和發(fā)行商提供了最佳實(shí)踐，準(zhǔn)則和資源。





iOS三大設(shè)計(jì)原則：遵從、清晰、有深度

除此之外，蘋果官方也提供了他們的設(shè)計(jì)規(guī)范源文件供我們免費(fèi)下載，所以每次各群求大神要iOS15規(guī)范文檔，你還不如親自來下載

同樣也包含蘋果最新字體包、各種設(shè)備樣機(jī)、開發(fā)文檔等等







2、Material Design

傳說中的安卓MD谷歌設(shè)計(jì)規(guī)范










除了iOS規(guī)范外，最值得介紹的便是我們的Android設(shè)計(jì)規(guī)范，所謂的安卓規(guī)范其實(shí)就是谷歌設(shè)計(jì)規(guī)范，很多人在設(shè)計(jì)Android版本界面時(shí)候無從下手，那我們完全可以在谷歌規(guī)范下去做！







MD三大設(shè)計(jì)原則




3、Microsoft Fluent

微軟設(shè)計(jì)規(guī)范系統(tǒng)




Microsoft Fluent是微軟官方設(shè)計(jì)系統(tǒng)，早在2017年的時(shí)候發(fā)布全新的Fluent Design，屬于開源設(shè)計(jì)系統(tǒng)，同時(shí)可跨平臺(tái)設(shè)計(jì)，為設(shè)計(jì)人員和開發(fā)人員提供所需要的框架，并且提供組件共享代碼庫(kù)，用于創(chuàng)建一致性的UX集合、也配備了完整的使用指南。







4、IBM

IBM官方設(shè)計(jì)規(guī)范

Carbon 是 IBM 的開源產(chǎn)品和體驗(yàn)設(shè)計(jì)系統(tǒng)，以IBM設(shè)計(jì)系統(tǒng)語(yǔ)言為基礎(chǔ)，由設(shè)計(jì)資源、代碼、工具組成。用這套系統(tǒng)可以提高UI的一致性和質(zhì)量，也闡述了公司的設(shè)計(jì)理念，設(shè)計(jì)原則及其視覺語(yǔ)言準(zhǔn)則。

5、React Spectrum

Adobe爸爸的官方設(shè)計(jì)規(guī)范網(wǎng)站

這是一個(gè)由Adobe開發(fā)的組件庫(kù)和工具網(wǎng)站，可幫助你構(gòu)建自適應(yīng)，可訪問且健壯的用戶體驗(yàn)。幫助開發(fā)者使用React構(gòu)建功能豐富的應(yīng)用程序





他們的設(shè)計(jì)系統(tǒng)由三類構(gòu)件組成：

組件：設(shè)計(jì)師用于構(gòu)建體驗(yàn)的可重用元素（按鈕、導(dǎo)航和圖標(biāo)）。

資源：供設(shè)計(jì)師使用的顏色和字符樣式。

指南：調(diào)整和縮放細(xì)節(jié)、導(dǎo)航模式和其他框架（供設(shè)計(jì)師參考，以確保其準(zhǔn)確性）。




通過下面網(wǎng)址進(jìn)入即可看到官方XD文件下載

6、Design Systems

全球知名設(shè)計(jì)系統(tǒng)大全




簡(jiǎn)單來說這是一位國(guó)外大神自己整理的一些設(shè)計(jì)規(guī)范系統(tǒng)供自己平時(shí)工作使用，最后越來越多，越來越齊全，得到了很多人的喜歡和支持，后面索性開通了網(wǎng)站把所有放到站點(diǎn)上面，供全球設(shè)計(jì)師使用，非常NICE！







四、終極設(shè)計(jì)規(guī)范神器

終極神器便是我們的壹念視覺網(wǎng)址導(dǎo)航了，今天的規(guī)范內(nèi)容其實(shí)還有很多很多優(yōu)秀的網(wǎng)站沒有放上來，因?yàn)閾?dān)心篇幅過長(zhǎng)中途退出，所以良心哥將今天所有的大廠規(guī)范全部整理到我們?cè)O(shè)計(jì)網(wǎng)站導(dǎo)航里面（包含沒有放文章的以及后期新增都會(huì)直接放網(wǎng)站）不用大家一個(gè)個(gè)保存，點(diǎn)擊網(wǎng)站鏈接即可跳轉(zhuǎn)學(xué)習(xí)哦，優(yōu)秀的設(shè)計(jì)規(guī)范網(wǎng)站將會(huì)長(zhǎng)期更新，此篇文章可當(dāng)做拋轉(zhuǎn)引玉吧，同時(shí)歡迎各位舉薦，下期見家人們！




一網(wǎng)打盡所有規(guī)范，提高效率↓

http://navo.top/Ar6nIj