及时雨！这18个网站帮你打通设计规范的任督二脉

时间：2023-06-05 15:27:01 | 来源：网站运营

时间：2023-06-05 15:27:01 来源：网站运营

及时雨！这18个网站帮你打通设计规范的任督二脉：

最近一些小伙伴说公司要出一套产品设计规范，用来统一产品视觉，离职时方便同事对接，然后跑来问良心哥有没有这方面参考可以看看？其实这些资料网上很多，只要我们稍微用心一点就可以找到很多一堆，今天用一篇文章帮大家打通设计规范的任督二脉，让你不再为此流眼泪！

目录

一、什么是设计规范？

二、国内优秀规范推荐

三、国际知名规范推荐

四、终极设计规范神器推荐

一、什么是设计规范？

设计规范对于一些设计师来说已经耳朵听出老茧了，其实有时就这么一个熟悉不过的东西，对于很多初学者来说得花很多时间去研究学习，那么简而言之设计规范就是项目产品设计的文档，里面包含很多很多细小的规范，不仅仅是图标色彩字体等，还有组件按钮、代码段、设计指南、设计资源文件等等一个庞大的知识库！它通常作为网站（公共或内部）在线托管，单独存在，方便一些相关人士调用。

二、国内优秀规范推荐

相比国际设计规范，我相信很多人可能更想参考学习国内一些大厂的设计规范吧，因为可能更“接地气”！

1、微信官方文档

有关微信平台所有的设计开发文档规范

不仅仅是微信小程序，这里是微信官方推出的有关微信其他平台的设计&开发文档，对我们这批互联网从业者非常友好，提供了非常详细的说明，不管是学习研究，还是调入接口说明都非常方便。


当然这里面微信其他平台的设计规范都提供免费下载，包含各种常见的格式！

2、支付宝小程序设计规范

标题已经写的很明白了，为构建支付宝生态体系友好一致的用户体验，支付宝拟定了 支付宝小程序设计体验白皮书，帮助小程序合作伙伴快速了解设计核心关注点。不管是研究别人设计规范还是我们去支付宝开发小程序都非常有用！

3、百度小程序设计规范

百度发布的智能小程序设计规范十分完善，提供的 500+ 组件基本覆盖了小程序设计和使用的绝大多数场景，和 WeUI 一样，只要从资源库里拖拖拽拽，就可以轻松搞定各种页面！




同时，还提供了一套精致的插画库和一套图标库，素材丰富，不仅能用来创作小程序的页面内容，用在其他海报、封面等设计中

4、Ant Design 相关设计规范

Ant Design是蚂蚁集团基于大量的项目实践和总结，研发的服务于企业级产品的设计体系。

里面提供了丰富的基础 UI 组件，以及各个组件的使用方法以及还有各种表单、列表、导航、落地页、按钮等组件库，非常多参考模板。下面推荐4个蚂蚁金服不同方向的设计规范参考




蚂蚁金服移动端







蚂蚁金服PC端







蚂蚁金服动效规范







蚂蚁金服可视化规范

5、Element Plus

饿了么官方设计规范

Element-Ul是国内饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，他们也推出了对应的手机端框架Mint UI，前端们爱不释手！很多公司程序都用的这套框架，我们可以在基于Element规范下设计话，方便对接很多，当然设计规范文档资源也是有的，自己可在官方下载！

6、TDesign

腾讯官方设计规范体系




TDesign 是腾讯内部团队联合开发者一起打造的企业级设计体系。汇集了腾讯众多优秀组件库能力和设计研发经验，包含桌面端、移动端、小程序等组件库源文件资源下载。

7、Semi Design

抖音设计规范

Semi Design是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。包含了设计语言、React 组件、主题等开箱即用的中后台解决方案，可用于快速搭建美观的 React 应用。现已已持续稳定维护了两年多，它高质量组件和强大的主题定制特性也获得一众用户的青睐。

8、ArcoDesign

字节跳动官方设计规范

ArcoDesign 字节跳动旗下中后台产品的体验设计和技术实现规范文档，极具参考价值！













9、HarmonyOS Developer

华为鸿蒙设计规范




HarmonyOS 回归本源设计，从浩瀚宇宙中抽象出动态语言，模拟真实世界中的物理动力学，将万有引力融入到动效设计中。




支持官方图标、字体等素材资源下载







10、Zan Design

有赞官方设计规范




有赞团队打造的服务于Saas产品的设计系统，规范主要包括产品原则、设计原则、内容策略、布局与模式、视觉、动效、资源、组件等几大部分组成










11、Mand Mobile

滴滴金融官方设计规范

滴滴金融团队发布的面向金融场景金融行业设计的组件库，他们希望通过组件化的解决方案，快速拉齐标准，降低生产成本，让设计师能更好的专注于效率之外的增长创新设计体验中。










12、Ding UI

钉钉官方设计规范

钉钉团队发布的Ding UI 4.0，组件类型全面丰富，支持素材资源下载！







小结

以上便是今天国内一些大厂优秀设计规范网站了，排名不分先后，除此之外还有很多很多这边就不一一列举，只要你想得到的公司基本都有自己设计规范系统，这里没列举别不代表没有，不信你去搜搜华为、快手、京东、美团....都有的，感兴趣可自行百度，这边只是抛砖引玉，下面我们一起看看国际一些不错的规范网站~







三、国际知名规范推荐

1、Human Interface Guidelines

苹果官方设计规范




苹果官方设计规范是我们每个互联网人经常要去翻的一个专业设计网站，里面包含各种视觉、交互、产品及数据架构规范Apple面向外部的设计系统为macOS，iOS，watchOS，vOS的开发人员，设计人员和发行商提供了最佳实践，准则和资源。





iOS三大设计原则：遵从、清晰、有深度

除此之外，苹果官方也提供了他们的设计规范源文件供我们免费下载，所以每次各群求大神要iOS15规范文档，你还不如亲自来下载

同样也包含苹果最新字体包、各种设备样机、开发文档等等







2、Material Design

传说中的安卓MD谷歌设计规范










除了iOS规范外，最值得介绍的便是我们的Android设计规范，所谓的安卓规范其实就是谷歌设计规范，很多人在设计Android版本界面时候无从下手，那我们完全可以在谷歌规范下去做！







MD三大设计原则




3、Microsoft Fluent

微软设计规范系统




Microsoft Fluent是微软官方设计系统，早在2017年的时候发布全新的Fluent Design，属于开源设计系统，同时可跨平台设计，为设计人员和开发人员提供所需要的框架，并且提供组件共享代码库，用于创建一致性的UX集合、也配备了完整的使用指南。







4、IBM

IBM官方设计规范

Carbon 是 IBM 的开源产品和体验设计系统，以IBM设计系统语言为基础，由设计资源、代码、工具组成。用这套系统可以提高UI的一致性和质量，也阐述了公司的设计理念，设计原则及其视觉语言准则。

5、React Spectrum

Adobe爸爸的官方设计规范网站

这是一个由Adobe开发的组件库和工具网站，可帮助你构建自适应，可访问且健壮的用户体验。帮助开发者使用React构建功能丰富的应用程序





他们的设计系统由三类构件组成：

组件：设计师用于构建体验的可重用元素（按钮、导航和图标）。

资源：供设计师使用的颜色和字符样式。

指南：调整和缩放细节、导航模式和其他框架（供设计师参考，以确保其准确性）。




通过下面网址进入即可看到官方XD文件下载

6、Design Systems

全球知名设计系统大全




简单来说这是一位国外大神自己整理的一些设计规范系统供自己平时工作使用，最后越来越多，越来越齐全，得到了很多人的喜欢和支持，后面索性开通了网站把所有放到站点上面，供全球设计师使用，非常NICE！







四、终极设计规范神器

终极神器便是我们的壹念视觉网址导航了，今天的规范内容其实还有很多很多优秀的网站没有放上来，因为担心篇幅过长中途退出，所以良心哥将今天所有的大厂规范全部整理到我们设计网站导航里面（包含没有放文章的以及后期新增都会直接放网站）不用大家一个个保存，点击网站链接即可跳转学习哦，优秀的设计规范网站将会长期更新，此篇文章可当做抛转引玉吧，同时欢迎各位举荐，下期见家人们！




一网打尽所有规范，提高效率↓

http://navo.top/Ar6nIj