交互设计&用户体验

设计导航:设计体系 / 设计规范 / 组件库

2018-10-28  本文已影响0人  天真啊

✧ 站点

Design Systems Repo

设计系统相关案例、文章、工具、演讲的合集,资源非常全面!

Figma ∙ Design Systems

Figma 创建的网站,发布了很多设计系统相关的文章,包含设计、开发方法等等。

Jun ∙ DesignSystem.cc

产品设计师 Jun 设计开发的网站,收集了设计系统相关的教程、文章、书籍和案例。


✧ 演讲

Jina AnneClarity Conf

Jina Anne 发起的设计系统主题大会,有很多嘉宾分享来关于设计系统的方方面面。

UXPin ∙ UXPin Virtual Summit

UXPin 主办的设计系统主题峰会,有 IBM Carbon、Salesforce Lightning 等很多知名设计系统背后的故事。


✧ 工具

zeroheight

用于记录设计系统,包括创建在线 styleguide、管理组件代码、存放设计资源等等。


✧ 文章、书籍

​Brad Frost ∙ 《Atomic Design》

原子化设计,构建设计系统的核心指导理论,由 Brad Frost 提出。

​Alla Kholmatova ∙ 《Design Systems》

作者 ​Alla Kholmatova,向我们介绍了设计体系的基础构成和创建方法等等。

​C7210 ∙ 设计体系相关文章

UX 设计师 C7210 发布的系列文章,包含设计体系、Sketch Library 功能等方面的内容。

​Airbnb Design ∙ Building a Visual Language

来自 Airbnb Design 官方博客,介绍了设计系统的价值、创建思路等等方面的内容。

Alibaba Fusion Design ∙ 如何为 UX 团队挑选一个适合的设计系统

文中主要介绍了设计系统的发展历程(Design Guideline - DPL - Design System)、设计系统的类型及适用场景。

孙浩 ∙ Scope Lane

设计师孙浩的知乎专栏,翻译了国外一些设计系统相关的文章,介绍了创建设计系统的技巧、方法。

阅文 YUX ∙ 视觉工作流优化 —— 如何构建组件库

阅文 YUX 的文章,分享了构建产品组件库的思路和方法,很受用!

Rojcyk ∙ 我们如何使用 Figma 处理 Kiwi.com 设计体系

作者 Rojcyk 介绍了他在加入 Kiwi.com 的移动端设计团队之后,是怎么使用 Figma 来构建设计体系的。


✧ 在线设计系统、设计规范、组件库

Apple ∙ Human Interface Guidelines

Apple 官方的人机交互指南,除提供 Apple 平台相关 UI 资源外,还包含了一系列的设计原则、设计建议等等。

Google ∙ Material Design

Google 的 Material Design 设计系统,包含设计指南、设计与开发组件等等。

Microsoft ∙ Fluent Design System

Microsoft 的 Fluent 设计系统,包含用于在 Windows 10 上创建应用体验的设计准则与 UI 代码示例。

Microsoft ∙ Office UI Fabric

Office 的官方前端框架,提供了使用 React 构建的组件,以及用 Adobe XD 创建的控件、布局模板等等。

SAP ∙ Fiori Design Guidelines

SAP 公司提供的一套 Web 应用程序的用户界面设计指南,其中的 UI 元素使用指南真是相当详尽了。

Salesforce ∙ Lightning Design System

Salesforce 公司的 Lightning 设计系统,包含了用于创建符合 Salesforce Lightning 原则、设计语言和最佳实践的用户界面的资源。

IBM ∙ Carbon Design System

IBM 的开源设计系统,以 IBM Design Language 为基础,包括开源代码、设计工具和资源、人机界面指南等内容。

Atlassian ∙ Atlassian Design

Atlassian 依据 Atlassian Design Guidelines 构建的一套 UI 组件库。

Sipgate ∙ Unser Design

Sipgate 模式库建立于 2015 年,但一年之后,团队发现由于产品团队之间缺乏沟通而导致加入了太多的组件。最近,他们正在开发一个新的模式库,以实现在多个产品网站上统一设计语言的目标。

TED ∙ TED Swatches

TED 的设计系统,由几个 UX 设计师和前端开发人员组成的小团队负责。基于对他们的 patterns 的理解的共识,他们将这些模式 patterns 以一种简单的方式整理了出来。

Eurostar ∙ GLU

由 Eurostar 的一个专门小组负责,系统中的组件是真的按「原子化设计(Atomic Design)」进行组织的,包括 Atoms 原子、Molecules 分子、Organisms 有机体、Templates 模板、Pages 页面。

Yahoo! ∙ PURE

雅虎公司出品的一组轻量级、响应式纯 CSS 模块,适用于任何 Web 项目。

Intuit ∙ QuickBooks Design System

Intuit 的设计系统,包含了各种组件和设计原则说明,但是其中部分资源只有 Intuit 内部员工才能访问、下载。

GitHub ∙ Primer

Github 的在线设计系统 Primer,包含各种设计与代码资源、工具以及设计指南。

蚂蚁金服 ∙ Ant Design

服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

阿里巴巴 ∙ ICE Design

飞冰是一套基于 React 的中后台应用解决方案,由淘宝前端团队发起,与淘宝 UED 及后端开发同学共同打造,旨在「提高中后台系统的开发效率」。

阿里巴巴 ∙ Fusion Design

Alibaba Fusion Design 是一套旨在全面提升设计、开发效率的工作方式。 通过协助企业构建设计系统,提供系统化工具协助设计师、前端使用设计系统,提供一站式设计项目协助平台,打通互联网产品从设计到开发的工作流。

滴滴出行 ∙ Cube-UI

滴滴出行从内部组件库精简提炼而来的移动端组件库,基于 Vue.js 实现。

微信 ∙ WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

Google ∙ Flutter

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。Flutter 兼容现有的代码,免费并且开源,在全球开发者中广泛被使用。

WeWork ∙ Plasma

WeWork 为他们的内部数字产品创建的设计系统,用以满足他们的业务需求。其创建过程对我们相当有参考意义。

饿了么 ∙ Element

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

Adobe ∙ Spectrum

Adobe 的设计系统 Spectrum。

Teambition ∙ Clarity Design

Teambition 的设计系统 Clarity Design。

TalkingData ∙ iView

一套基于 Vue.js 的高质量 UI 组件库。

UX Power Tools

UX Power Tools 同时包含 Web 与移动端的设计系统,Sketch 组件比较全面、完整,且包含共享样式、支持内容自适应等,还有 Style Guide。但是,收费,可在 Gumroad 上购买。

Buninux ∙ Frames | Buninux ∙ Plaster

Frames 和 Plaster 分别是针对 Web 和移动端的设计系统,这 2 个设计系统最大的特点是,提供了大量的模板页面,且支持内容自适应。但也是收费的。

Rojcyk ∙ iOS Blueprint

iOS Blueprint 是一个专注于 iOS 的设计系统,业界知名度相当高。除了基本的 Library 之外,也提供了一些通用模板。这个也是收费的,可在 Gumroad 上购买。

janlosert ∙ Nested Symbols & Auto-Updating Styleguides

累了,不写了。

GE Digital ∙ Predix

主要针对 Web 应用的设计系统,组件库也不是很全,Sketch 中也没有共享样式等,相对而言,比较粗糙。

有赞 ∙ Zan Design

Zent 是有赞的 PC 端组件库,基于 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件,这些组件都已经在有赞的各类 PC 业务中使用。
Vant 是有赞的移动端 Vue 组件库,Vant Weapp 是 Vant 的小程序版本,这两者基于相同的视觉规范,提供一致的 API 接口。

Semantic ∙ Semantic UI

一个具有响应性的 UI 组件框架,支持网站在多个设备上的扩展。

Liferay ∙ Lexicon | Liferay ∙ Clay

Lexicon 是 Liferay 提出的一种设计语言 ,包含用户界面组件、模式和用例等指南。Clay 是以 Lexicon 为基础实践的一套 Web 应用组件库 Clay,包含大量代码示例。

GOV.UK ∙ GOV.UK Design System

英国内阁办公室的 GDS 做的一套设计系统,UI 样式看起来有点乱,但其中一些组件的使用方法也可以看一看。

Material-UI

基于 Material Design 的 React UI 框架。

上海畅控 ∙ Admui

企业级通用管理系统的快速开发框架,注册登录后可进行在线体验。

MDUI

一套用于开发 Material Design 网页的前端框架。

云适配 ∙ Amaze UI

一个轻量级、Mobile first 的前端框架, 基于开源社区流行前端框架编写。

新浪 UED 的 HIG

新浪 UED 为新浪产品编写的人机交互指南,包括 PC、iOS、Android、HTML5 等各个平台的设计原则,还有新浪的 VI 体系介绍,相当全面了,推荐阅读、学习(但有些内容没有更新,可能现在已经不适用了)。

饿了么 ∙ Mint UI

基于 Vue.js 的移动端组件库, CSS 和 JS 组件等。

Layui ∙ layuiAdmin

由 layui 自建的一套前端架构实现而成的通用型后台管理模板系统。

[Akveo ∙ Eva Design System](https://eva.design/](https://eva.design/)

Akveo 设计的移动端和 PC 端的组件库,提供了 Sketch 和 Figma 的组件库资源,Figma 组件库和 Sketch 暗黑模式组件库需要购买使用。

[Julien Rioux ∙ Flawwwless ui](https://eva.design/](https://eva.design/)

全栈开发工程师 Julien Rioux 设计开发的 UI 组件库。

Progress ∙ Kendo UI

JavaScript UI 组件的最终集合,包含用于 jQuery、Angular、React 和 Vue 的库,用于快速构建响应式 Web 应用。



附:​以下是网页设计资源相关网站推荐

​Website Style Guide Resources

​网站设计指南合集,包括组件库示例,关于设计指南的文章、书籍以及工具等等。

​Envato ∙ HTML Admin Website Templates

​Envato 的 envatomarket 上的网站设计模板合集。



以上内容整理自网络,仅作为个人学习笔记使用。感谢这些设计团队和所有分享想法与经验的人~



上一篇下一篇

猜你喜欢

热点阅读