美文网首页交互设计&用户体验
设计导航:设计体系 / 设计规范 / 组件库

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

作者: 天真啊 | 来源:发表于2018-10-28 18:12 被阅读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 上的网站设计模板合集。



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



    相关文章

      网友评论

        本文标题:设计导航:设计体系 / 设计规范 / 组件库

        本文链接:https://www.haomeiwen.com/subject/qangzftx.html