规范综合

关于样式规范、设计系统、组件库你所需要知道的一切
https://www.figmacn.com/article/style-guides-component-libraries-design-systems

如何从0到1简历设计规范https://www.yuque.com/xibao-4kkra/rfmink/32c708f1-ab9b-4820-96c4-afffb8898465

How We Build Our Design System
https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833

设计规范不会做，看看外国人全套商业规范：https://framesforsketch.com/
设计规范制作网站：https://untitled-team-573zs.zeroheight.com/landing
https://colors.eva.design

网格网站 http://grid.guide
网格系统https://www.uisdc.com/grid-system
栅格计算工具：灰大栅格计算工具：https://www.pslkzs.com/nav/column.php
grid.guide：http://grid.guide/
网页栅格系统到底应该怎么用：https://mp.weixin.qq.com/s/VJNHJ_WDttc0PwB0LQZ6fA

设计系统-色板：[https://colors.eva.design

](https://colors.eva.design)B端跨端设计：[https://www.yuque.com/liuzishuai/notes/fqx6ls
untitledui：https://www.untitledui.com/](https://www.untitledui.com/)
大厂组件库源文件
Apple UI Design Resources：https://developer.apple.com/design/resources/
Google Material Design：https://material.io/resources
Ant Design：https://ant.design/docs/resources
Salesforce Lightning Design System：https://www.lightningdesignsystem.com/resources/downloads/
阿里teambition-Clarity Design：https://design.teambition.com/overview
饿了么 Element：https://element.eleme.cn/#/zh-CN/resource
微信主站+微信小程序WeUI：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
滴滴Mand Mobile：https://didi.github.io/mand-mobile/#/zh-CN/design/other/resource
京东Taro UI：https://taro-ui.jd.com/#/docs/resource
有赞 Zan Design：https://design.youzan.com/resource/resource.html
AT-UI：https://at-ui.github.io/at-ui/#/zh
https://www.iviewui.com/components/color

B端学习资源汇总（部分网站需要科学上网）：
超实用B端及可视化产品设计师平台：https://tob.design/#/home/
B端设计规范：https://www.pslkzs.com/ui/index.html
B端LED发光字体下载（字体不可商用）: https://pan.baidu.com/s/1IX31ca4rO9VnEjymfdn4lw 密码: jjwm

国外炫酷网站设计和技术都一流：http://www.espn.com/espn/feature/story/_/id/19045647/we-fans-doc
日本科技感网站，纯炫技，可视化学习很不错资料：http://www.newstech.jp/
国外非常好看的B端高质量设计模板，里面有很多在线演示的示例：http://eliteadmin.themedesig/
基于BootStarp高质量模板：https://wrapbootstrap.com/
国外B端学习整套B端高质量模板：Angle - Bootstrap Admin Template
B端模板：http://themicon.co/theme/angle/v3.2/backend-jquery/app/dashboard.html
国外高质量B端模板，点击livepreview有具体示例：https://coreui.io/?affChecked=1
一整套前端框架，值得UI设计师学习的规范：https://semantic-ui.com/
很多在线出售的模板，代码都写好了，学习借鉴的好去处：https://themeforest.net/category/site-templates/admin-templates
[

](https://www.pushing-pixels.org/fui/)
体验设计手册，涵盖所有B端设计流程中用到的用研、产品、交互、视觉、协作知识：https://www.yuque.com/meifangmia/zwcdgs
B端产品必备常识：https://www.yuque.com/lianjiaxiansheng/ggtpzd/wf41…

灰大设计内容板块 ：https://www.pslkzs.com/ui/ui.php

后台网站
https://themehunt.com/
https://echarts.apache.org/zh/index.html
https://themeforest.net/category/site-templates/ad…

后台页面参考网站
https://huaban.com/boards/291013/
https://preview.pro.ant.design/dashboard/analysis
https://ant.design/docs/react/introduce-cn
https://ant.design/index-cn
http://www.10oa.com/v8/function.htm

适用B端图表、表格、地图、文本数据插件：
PS拉框助手：https://www.pslkzs.com/index.html
Adobe XD拉框助手：https://www.pslkzs.com/xd/index.php
Sketch拉框助手：https://www.pslkzs.com/sketch/index.php
PS内容填充助手：https://www.pslkzs.com/text/index.php
XD内容填充助手：https://www.pslkzs.com/xdText/index.php
Figma内容填充助手：https://www.pslkzs.com/figmaText/index.php
Sketch内容填充助手：https://www.pslkzs.com/sketchText/index.php
附：Figma标注切图插件：https://www.mockplus.cn/download/figma-intergratio…

B端设计系统官方地址：1、Ant Design：https://ant.design/index-cn
2、Element UI：https://element.eleme.cn/#/zh-CN
3、View UI：http://v1.iviewui.com/
4、Zan Design：https://design.youzan.com/index.html
5、Ke Design：http://design.ke.com/page/home
6、HiUI：https://xiaomi.github.io/hiui/zh-CN
6、LEGAO Design：https://legao.jd.com/B端设计系统官方地址：1、Ant Design：https://ant.design/index-cn
2、Element UI：https://element.eleme.cn/#/zh-CN
3、View UI：http://v1.iviewui.com/
4、Zan Design：https://design.youzan.com/index.html
5、Ke Design：http://design.ke.com/page/home
6、HiUI：https://xiaomi.github.io/hiui/zh-CN
6、LEGAO Design：https://legao.jd.com/
Eva design：https://eva.design
zeroheight：https://zeroheight.com

某设计师的B端规范样本https://www.pslkzs.com/ui/index.html
https://zeroheight.com/529427e0a/p/946595-abyss-10
https://www.pslkzs.com/ui/index.html
作品：https://www.pslkzs.com

制作设计系统协作网站https://zeroheight.com
eva颜色规范制作https://colors.eva.design

Set Product
高质量的桌面和移动项目的组件和设计系统模版
https://setproduct.com/

Material Design Kit
高质量且响应式的 Material Design UI Kit
https://ui-kit.co/

iOS Design Kit
适用于 iPhone XS 和 iPhone 8 的 iOS 12 的组件
https://iosdesignkit.io/ios-12-gui/

Adele：设计系统/规范库，收集了⽬前各⼤公司公开的设计系统。
https://adele.uxpin.com
全世界著名公司的设计规范https://adele.uxpin.com/
http://www.yunque8.com/archives/category/guifan
17组设计规范https://www.jianshu.com/p/4461c8a7a856
https://atomizecode.com/
总设计系统http://repository.design/
https://designsystem.cc/
https://www.designsystems.com/
http://styleguides.io/
http://findguidelin.es/
https://saijogeorge.com/brand-style-guide-examples/

https://ravenyu.com/design-systems
设计系统https://fusion.design/pc/design/doc/11?themeid=2
高效设计体系https://www.yuque.com/jingwhale/spec
web设计规范https://www.yuque.com/jingwhale/spec/gig810
手机端设计规范https://www.yuque.com/jingwhale/spec/ifccff
微信小程序设计规范https://www.yuque.com/jingwhale/spec/fom05c
语音交互规范https://www.yuque.com/jingwhale/spec/isf4p6
交互自查https://www.yuque.com/jingwhale/selfchecking

知名公司设计语言https://www.25xt.com/guidelines/20625.html

开发者规范https://www.learnstorybook.com/design-systems-for-developers/
https://atomizecode.com/

各大平台设计指南

https://cheungkingwei.github.io/guidelines/index.html
coredesignsystem：https://www.coredesignsystem.com/
https://www.coredesignsystem.com/core-elements/

小程序设计规范

微信小程序https://developers.weixin.qq.com/miniprogram/design/
支付宝小程序https://opendocs.alipay.com/mini/design
百度小程序https://smartprogram.baidu.com/docs/design/overview/introduction/

苹果规范

Apple https://developer.apple.com/design/
苹果iosUI：https://developer.apple.com/design/resources/
https://developer.apple.com/design/human-interface-guidelines/
Iphone的尺寸规范http://www.tuyiyi.com/cc/
设备规范指南https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

谷歌规范

https://www.mdui.org/design/style/icons.html#icons-product-icons
谷歌材料设计https://material.io/design/
Material Design 中文指南https://www.mdui.org/design/
类md网站-MDUI 官网：mdui.org
谷歌md：https://material.io/archive/guidelines/resources/sticker-sheets-icons.html#
安卓设计规范https://material.io/design/motion/#principles
Google material： https://material.io/design/

微软规范

微软UI：https://docs.microsoft.com/zh-cn/windows/uwp/design/downloads/index
微软https://www.microsoft.com/design/fluent/#/

腾讯规范

腾讯各产品设计规范https://isux.tencent.com/brands/
https://cloud.tencent.com/developer/article/1384608
https://cloud.tencent.com/developer/article/1440442
腾讯云 https://cloud.tencent.com/developer/article/1387544
微信小程序
https://developers.weixin.qq.com/miniprogram/design/#%E5%AD%97%E4%BD%93
https://cloud.tencent.com/developer/article/1113856
Q设计语言https://qq.design/design/QLanguage/Concept/

阿里巴巴规范

饿了么：https://element.eleme.cn/#/zh-CN/component/icon
https://element-plus.org/en-US/
蚂蚁https://ant.design/index-cn
https://antdtheme.com/?theme=aliyun#1
Ant资源https://ant.design/docs/spec/download-cn

华为鸿蒙系统规范

https://developer.harmonyos.com/cn/design
https://developer.harmonyos.com/cn/docs/design/font-0000001157868583
华为折叠屏规范https://developer.huawei.com/consumer/cn/doc/90101

字节跳动规范

飞书设计规范https://open.feishu.cn/document/uYjL24iN/ukjNzUjL5YzM14SO2MTN
企业级产品设计系统Arco：https://arco.design
中后台解决方案-抖音团队出品：http://semi.design/zh-CN

ArcoDesign - 字节跳动企业级设计系统开源啦
ArcoDesign支撑多款亿万级用户产品，包括今日头条、西瓜视频、火山引擎 ToB 平台业务等。
这次超多高质量设计资源也同步放出，包含67个组件的源文件已经在 figma 发布，设计师和开发同学都可以使用。
ArcoDesign 官网：https://arco.design
Github 仓库：
https://github.com/arco-design/arco-design
Figma UIKit ：
https://www.figma.com/file/M66cTiLXHa4SVyZIlfY5Pb/arco-Design-System?node-id=8253%3A44145

Adobe设计系统

https://spectrum.adobe.com/

figma设计规范

https://www.saasdesign.io/figma-design-system/
https://www.saasdesign.io/figma-wireframe-ui-kit/

IBM 设计规范

IBM 设计规范https://www.carbondesignsystem.com/
IBM [https://www.ibm.com/design/v1/language/

](https://www.ibm.com/design/v1/language/)

Github设计规范

GitHub’s design system

其他公司规范

Salesforce 设计规范https://www.lightningdesignsystem.com/downloads/
https://lightningdesignsystem.com/
teambition. https://design.teambition.com/
Airbnb 设计https://airbnb.design/building-a-visual-language/
https://airbnb.design/
Shopify https://polaris.shopify.com/
https://polaris.shopify.com/design/colors#navigation
trello.design trello.design
Aslassian： https://www.atlassian.design/
火狐https://design.firefox.com/
https://design.firefox.com/photon/
block shttps://blocks.cbrebuild.com/
Clarity https://clarity.design/
Tetrisly设计系统https://tetrisly.com/figma/?ref=prototyprio
Comet https://comet.discoveryeducation.com/
Duethttps://www.duetds.com/
[

](https://www.carbondesignsystem.com/)
ADG https://atlassian.design/
MongoDB Design：https://www.mongodb.design/#/
Base - Uber 的设计系统https://baseweb.design/
workdayhttps://design.workday.com/
有赞https://design.youzan.com/
https://design.youzan.com/index.html
iView https://www.iviewui.com/
飞冰https://ice.work/
https://ice.work/docs/guide/about
One Designhttps://github.com/ecomfe/veui
百度云设计规范了解下http://yunshe.design/
其他https://theblog.adobe.com/additional-ui-kits-adobe-xd/
奥迪品牌设计规范https://www.audi.com/ci/en/renewed-brand.html#
奥迪官方设计规范https://www.audi.com/ci/en/guides/user-interface/introduction.html
morningstarhttps://designsystem.morningstar.com/index.html
Radius规范https://rangle.io/radius/
thumbprinthttps://thumbprint.design/
Designcode：https://designcode.io/design-system
手机QQweb设计规范：http://frozenui.github.io/
阿里中后台设计解决方案https://fusion.design
whale designhttps://jing-whale.gitbook.io/whale-design/she-ji-xi-tong
flamingo design https://flamingo.heetch-eng.now.sh/?path=/story/alert—all-states

组件库

从0开始建立组件库：https://zhuanlan.zhihu.com/p/79034123
组件库创建：https://www.yuque.com/xibao-4kkra/rfmink/3180a4e2-74e4-4e46-b333-a0cbba9167cf
微信小程序（手机端）https://developers.weixin.qq.com/miniprogram/design/
支付宝小程序（手机端）https://opendocs.alipay.com/mini/design
百度小程序（手机端）https://smartprogram.baidu.com/docs/design/overview/introduction/
滴滴Mand-mobile组件（手机端）https://didi.github.io/mand-mobile/#/zh-CN/docs/introduce
https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
有赞Vant组件（手机端）https://youzan.github.io/vant/#/zh-CN/home
京东风格的组件库https://nutui.jd.com/#/index
AT-凹凸实验室开源组件库：https://at-ui.github.io/at-ui/#/zh
ViewUI组件库（web端）https://www.iviewui.com/docs/introduce
ViewUI组件库（web端）https://adminpro.iviewui.com/dashboard/console
饿了么element组件（web端）https://element.eleme.cn/#/zh-CN/.component/table
https://element.eleme.cn/#/zh-CN/component/layout
Ant design pro（web端）https://preview.pro.ant.design/
Ant design：https://ant-design.gitee.io/index-cn
腾讯云layui组件（web端）https://www.layui.com/doc/element/nav.html
layui模板（web端）https://www.layui.com/demo/admin.html
Antv 可视化组件（web端）
https://antv.vision/zh/docs/specification/principles/basic
Vant Weapp - 轻量、可靠的小程序 UI 组件库 https://youzan.github.io/vant-weapp/#/intro
iView Weapp - 一套高质量的微信小程序 UI 组件库https://weapp.iviewui.com/
Taro UI | JD 出品小程序 UI 库https://taro-ui.aotu.io/#/
组件规范https://www.yuque.com/rkxin9/aaqwdv

移动端组件库https://nutui.jd.com/#/index

平台组件库示例：
iview http://iview.talkingdata.com/#/components/guide/install
inmap http://inmap.talkingdata.com/?from=iview#/docs/v2/Map
fusionchart https://www.fusioncharts.com/vue-js-charts?framework=vue
https://youzan.github.io/vant-weapp/#/intro
https://weapp.iviewui.com/
https://taro-ui.aotu.io/#/
Ui组件库https://www.iviewui.com/
组件库https://ui.flawwwless.com/
https://mp.weixin.qq.com/s/us6dat0hYoPSJktK1AHssA
https://taro.aotu.io/
https://fusion.design/
https://www.jianshu.com/p/4461c8a7a856

https://fusion.design/design/doc/16
https://www.iviewui.com/components/color
https://ant.design/docs/spec/colors-cn
https://ui.flawwwless.com/documentation/intro

制作规范

募客https://www.mockplus.cn/ds
一键生成设计规范模版https://ds.mockplus.cn/lib/5b59654b0bc6a51a743ea814
创建属于自己的设计规范https://ds.mockplus.cn/user/signin

暗黑模式规范

暗黑模式教程https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

Apple WWDC 介绍如何设计黑暗模式
https://developer.apple.com/videos/play/wwdc2018/210/

— 安卓暗黑模式在线规范官网(需外网) —
https://material.io/design/color/dark-theme.html

— iOS暗黑模式在线规范官网 —
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

暗黑模式网站https://darkmodedesign.xyz/
暗黑模式集合https://www.darkmodedesign.com/?ref=evernote.design

其他规范

为什么要有设计规范
https://cloud.tencent.com/developer/article/1154231
弹窗规范https://www.zcool.com.cn/article/ZMzkyOTQ0.html
Iphone尺寸规范http://www.tuyiyi.com/cc/
切图命名规范http://www.qijishow.com/down/cutname.html
屏幕尺寸http://www.qijishow.com/down/standard.html
设计尺寸规范
http://www.tuyiyi.com/cc/
设计规范
http://www.tuyiyi.com/t-960-1.html
移动屏幕尺寸http://screensiz.es
尺寸规范http://www.uigreat.com/page/guifan
iphone设计尺寸查询 http://www.tuyiyi.com/cc/
iPhone 2018 全面屏适配规范详解(XS、Max、MR)https://www.ubuuk.com/article/323.html
老姜尺寸网 http://www.chicun.vc/
http://www.qijishow.com/down/standard.html
手机屏幕尺寸https://www.25xt.com/screen/phone.html
UI规范网站http://element-cn.eleme.io/#/zh-CN/component/icon
http://www.qijishow.com/down/ios.html
http://element-cn.eleme.io/#/zh-CN/component/button
视觉设计自查表https://mp.weixin.qq.com/s/pwdY1wboAG0nAUjgzpkTHA
移动应⽤图标⽣成⼯具，⼀键⽣成所有尺⼨的应⽤图标
https://icon.wuruihong.com/
iOS和安卓设计规范 https://www.25xt.com/screen/ios.html安卓设计规范https://material.io/design/motion/#principles
MD设计：https://material.io
弹窗规范http://www.zcool.com.cn/article/ZMzkyOTQ0.html
切图命名规范http://www.qijishow.com/down/cutname.html
iOS12官方套件下载及设计规范更新https://www.25xt.com/appdesign/19142.html
https://developer.apple.com/design/resources/
各种尺寸规范（小程序、ipad）
http://www.xueui.cn/design/rule
尺寸规范.png

规范样例：

苹果iOS13暗黑https://cloud.tencent.com/developer/article/1449096
B端产品设计规范https://cloud.tencent.com/developer/article/1538630
移动端设计规范https://cloud.tencent.com/developer/article/1183348
后台产品设计规范：antdesign
https://www.myhuahuo.com/index.php?mod=article&id=2036
栅格系统概念https://www.uisdc.com/responsive-grids-design
规范https://cloud.tencent.com/developer/section/1489924
资料https://cloud.tencent.com/developer/doc/1271
弹窗规范https://www.zcool.com.cn/article/ZMzkyOTQ0.html
切图命名规范http://www.qijishow.com/down/cutname.html