2020设计语言整理合集

blog4@outlook.com (堃埜) — Tue, 09 Jun 2020 20:56:15 +0000

内容涵盖了产品、设计、前端和交互等方面的指南及规范

大厂

谷歌 Google

苹果 Apple

Apple Design - Apple Human Interface Guidelines

阿里支付宝蚂蚁金服

Ant Design
Ant Design Mobile 一个基于 Preact / React / React Native 的 UI 组件库
Ant Design illustration
Ant Design Charts
Kitchen 提升工作效率的 Sketch 工具集
Ant Design Landing 针对产品首页的解决方案,快速搭建出你想要的首页
AntV 数据可视化解决方案，让数据栩栩如生
ChartCube 图表魔方 AntV 在线图表制作工具拖拽之间快速搞定图表制作
Ant Motion Design 快速在 React 框架中使用动画。提供了单项，组合动画，以及整套解决方案。

Salesforce “防雷"闪电设计系统

Salesforce Lightning Design System

饿了么

Element 基于 Vue 2.0 的桌面端组件库，为开发、设计和产品而来
Element 的 Axure & Sketch 模板文件下载

Airbnb

Airbnb design
Lottie Airbnb design 一个iOS，Android和React Native库，可实时渲染After Effects动画，轻松将高质量动画添加到任何App，

有赞

Zan Design
Zent Zan UI 有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件
Vant 轻量、可靠的移动端 Vue 组件库
Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本

微软

Metro UI 4
Fluent UI 提供Sketch、Figma、XD等文件资源，超多图标

腾讯

Teambition

Firefox 火狐

Firefox Brand + Design Assets

Facebook

IBM

IBM Design Language

视图更新

视图更新 View UI 一套基于 Vue.js 的高质量 UI 组件库

阔知

Codeages Design system 一个让团队协作规范、高效的全栈式设计体系。

让IE5、6、7、8也兼容响应式网页设计

blog4@outlook.com (堃埜) — Tue, 04 Mar 2014 01:03:04 +0000

响应式网页设计（RWD）

2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。采用 RWD 设计的网站使用CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。（摘自维基百科）

因为IE8及更低版本不兼容css3，所以如此强大且人性化的响应式网页设计在ie8及其以下浏览器下渲染出非常恐怖。

但是网友的智慧是无穷的，CSS3-mediaqueries.js的诞生让IE8及其谷歌、火狐陈久版本也可以让RWD发挥淋漓尽致。

CSS3-mediaqueries.js说IE也可以承载响应式网页设计

1

<!--[if lt IE 9]><script src="css3-mediaqueries.js"></script><![endif]—>

if lt ie 9 留或者不留

if lt ie 9 表示IE9以下版本才显示，因为css3-mediaqueries.js还兼容 Firefox 1+和Safari 2，使用if lt ie 9 的好处就是只有ie9以下版本加载，那么ie9和其它高版本浏览器就不再加载可以提速但是就意味着放弃firefox和safari旧版。或许你知道，但是还是像css3-mediaqueries.js那样重声一遍把css3-mediaqueries.js放在 </body> 前面可以提升页面加载速度，所以还是别 </head>前面。

怎样获取css3-mediaqueries.js

https://code.google.com/p/css3-mediaqueries-js/（这个好像很久没更新了） https://github.com/livingston/css3-mediaqueries-js（似乎现在很多项目都在github上维护了）

css3-mediaqueries.js注意事项

不支持@import,对于<link>还有<style>标签内的media无效。

扩展阅读：《自适应网页设计（Responsive Web Design）》阮一峰 https://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

响应式网页设计 on 一极乐