因为研究 Design System,无意中发现了这本「Design Systems」。本来只是期望着看看别人的思路和想法,粗略的看了几个章节才发现自己错了。这本似乎并不太火的书可以说是目前市面上对整个 Design System、Language、Guidline 等概念思考得最为深入和全面的。

前段时间会员微信群里大家讨论起了这本书,大家似乎对这本书都非常感兴趣,但对这 200 多页的全英文又担心难以坚持。既然这是一本非常值得读的设计书,而大家又这么感兴趣,我决定花一段时间的周刊来和大家基于这本书聊 Design System。希望能给大家在阅读此书上提供一些帮助,也让自己有机会能够更深入的去进行学习研究。

一点声明:本系列周刊并非「Design Systems」的翻译,而是基于本书结构框架的读书笔记和经验总结。依然推荐大家阅读原书,周刊内容可以作为理解辅助。

书籍购买链接点这里>>

十年前互联网产品的设计大多没有 System 的概念,纯凭手工一页页的去做,整体的效率和一致性都难以保障。直到 Yahoo DPL(Design Pattern Library)的出现,大家才慢慢开始更多的开始关注到这个问题。

业务体量大小同样会影响到团队对于 System 投入力度的差异,也许大家没有接触到 Design System,但 Design Pattern、Design Component、Design Language、Design Guideline 等等这类词相信大家一定不会陌生。即使对于这些概念并不太清晰,但或多或少都会在设计的过程中受到一些影响。

如果我们用 Google Trends 搜索一下这些关键词,你会发现「Design System」的关注热度是最高的。大家都想搞清楚 Design System 是怎么回事,希望用它来提升自己产品的整体质量、效率。

对于 Design System 不同的团队依据自己的体量和业务述求都有着自己的定义,这也是为什么我们会发现各 System 所包含的内容有所差异。在我的理解来看既然叫做 System 它就应该是更为完整、体系化的,所以我会将它定义为解决数字产品生产的整体解决方案,包含设计、内容、工程等多个方面。

Google 对于 Material Design 的定义是「Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.」,正如你所看到它们官网所展示的,这是一个想法复杂的系统工程、一个完整的世界观。当然 Material Design 因为它的系统特殊性,和我们所需要做的 Design System 还不一样,我们会在后面详细说明。

想要了解、创建自己的 Design System,我们还需要先回过头弄清楚前面提及的那些概念它们之间的关系、差异。Design System 专题的第一期,我们将先从这些概念开始。

依照自己的理解,我将这些概念整理成了以下这张图。希望先给大家一个概念上的全貌,然后我们再来逐一分解。

Design Principles(设计原则)

所有的 System 的出现都是为了解决一些列的问题,它们可能是一种业务形态(比如在线购物),也可能是一种操作行为形态(比如数据管理)。它们背后有着共通的问题和述求,这也就为 Design System 提出了明确的要求。

所以我们可以将 Principles 理解为一系列的规则,它们是我们设计开发产品的核心思想,构建一套有效的 Design System 的起点。用于解决用户体验中的问题,引导业务、开发以及设计向既定(正确)的方向前进。

每一个公司(团队),由于其业务的特性将可能产出不同的 Principles。以 IBM 的 Carbon Design 为例,他们的 Design Principles 是:

  • Be essential (必要的)
  • Be inclusive(包容的)
  • Be consistent(一致的)
  • Be humanistic(人文的)
  • Be delightful(愉快的)

这是 IBM 对其云产品在整体产品体验上的定义与要求,也是它们想要传递给用户的感受。作为设计的基本原则,它将嵌入到其产品、设计、开发、文案等一系列场景中,成为产品的“灵魂”。

我们可以再来看看多次提及的 Lightning Design System,它服务于 Salesforce 的 SaaS 服务。对于他们的产品,Lightning 也提出了自己的 Design Principles:

  • Clarity (清晰的)
  • EFFICIENCY(高效的)
  • Consistency(一致的)
  • Beauty(优美的)

很明显,作为一款 SaaS 平台类产品,效率和一致性是他们产品核心竞争力之一。为了确保平台及第三方 ISV 能够为客户提供高效、高质的服务,他们将“清晰、高效、一致性”作为了产品最核心的 Principles。

对于互联网产品“清晰”“一致”一类的关键词几乎都会提到,这也是用户体验设计最为根本的目标之一。但随着市场对行业深度的述求不断加强,大家对行业特性的述求也越来越明显,甚至会像前面的两个案例一样写入 Design Principles,成为产品设计的理念基石。

当然,谈 Design System 我们无法不谈 Material Design 。相比较而言它的 Principles 更加的抽象,除了由于它自有的独特设计世界观之外,很重要一点在于它是一套更为底层的“服务”。

相较之下它的“业务”更为广泛,基于 Material Design 你可以开发一个电商应用,也可以是一个社交、理财产品。因此它的 Principles 也需要更有“深度”。

以上是本期会员周刊的节选内容,接下来我们将继续分别讲解 Design Component & Pattern、Language、Develop Library、Guideline,以及它们之间的差异、与 Design System 如何协作,成为产品进步、发展的超级发动机。

Design System 是 PinDesign 周刊的一个新系列,基于「Design Systems」这本书结构框架的读书笔记和经验总结。希望将自己的感受和经验分享给大家,辅助大家的阅读。

加入 PinDesign 会员,获取本期主题「什么是 Design System」的全文内容及前两期周刊的赠送。

点击领取 PinDesign 会员计划 50 元优惠券

什么是 Design System相关推荐

  1. Microsoft Fluent Design System

    转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluen ...

  2. sketch里的ios控件_使用Sketch建立Design System

    一. 有关Design System 之前的文章<使用Adobe XD建立Design System>中介绍了什么是Design System,它有什么用,在设计的哪个阶段使用以及如何用A ...

  3. Fluent Design System 设计语言元素

    Fluent Design System 设计语言共有元素,分别为光照(Light).深度(Depth).运动(Motion).材质(Material)和缩放(Scale),目前包括人脉.计算器和 G ...

  4. ADS(Advanced Design system)良率分析(Yield)、良率优化(YieldOptim)

    前言 先进设计系统 Advanced Design system(ADS)Agilent Technologies 是领先的电子设计自动化软件,适用于射频.微波和信号完整性应用. 原理分析 我们使用软 ...

  5. 将ADS(Advanced Design system)中的版图导入到AD(Altium Designer)中编辑

    前言 先进设计系统 Advanced Design system(ADS)Agilent Technologies 是领先的电子设计自动化软件,适用于射频.微波和信号完整性应用. AD全名Altium ...

  6. ADS(Advanced Design system)谐波平衡分析(HarmonicBalance)和参数扫描分析(ParamSweep)

    前言 先进设计系统 Advanced Design system(ADS)Agilent Technologies 是领先的电子设计自动化软件,适用于射频.微波和信号完整性应用. 在一些情况下,当我们 ...

  7. ADS(Advanced Design system)创建Symbol并放置

    前言 先进设计系统 Advanced Design system(ADS)Agilent Technologies 是领先的电子设计自动化软件,适用于射频.微波和信号完整性应用. 在很多时候,我们设计 ...

  8. 设计系统(Design System),设计和开发之间的“DevOps”

    最近,我们网站的上新增了几个新功能,比如通过导航栏的QR Code可以下载App:通过Carousel的方式,显示多条信息. 以往这样的功能可能需要2-3个Sprints完成,但是现在这些功能都是在一 ...

  9. [UWP]如何使用Fluent Design System (上)

    1. 前言 微软在Build 2017中公布了新的设计语言Fluent Design System(以下简称FDS),不过官网只是堆砌了各种华丽的词语以及一堆动画.至于在UWP中要做成怎么样,怎么做, ...

最新文章

  1. python函数基础和装饰器
  2. [ZZ]好的测试应该具备哪些特质?
  3. OpenCV 图像缩放
  4. Windows系统漏洞学习总结
  5. hdu 2563
  6. Java基础之static关键字的用法
  7. java 网络字节序转主机字节序_C语言高级编程——网络编程技术
  8. Maven是个什么鬼?,没办法起床排bug...
  9. node.js 处理 http 请求
  10. 【设计模式】03-抽象工厂模式
  11. GIS + 现代农业”,将会擦出怎样的火花?——智慧农业专题论坛侧记
  12. ps图标长投影如何做?
  13. jquery使用 validate 插件进行验证是否通过
  14. Tensorflow使用LSTM实现中文文本分类(1)
  15. Jump gameII
  16. C++ 中transform方法的疑惑和自己的感受
  17. 华为2019算法大赛CTR预估数据探索
  18. nested exception is org.apache.ibatis.builder.BuilderException: Error evaluating expression 异常
  19. mysql实验总结_数据库实验的心得体会.docx
  20. WIn11——超低延迟远程桌面Parsec

热门文章

  1. win 下squid的配置
  2. Windows 7运行命令大全
  3. Android基础之应用程序组件
  4. 《构建高可用Linux服务器》第一版勘误表(附脚本下载)
  5. 图文详解Silverlight访问MSSQL数据库
  6. GameObject 与gameObject的区别
  7. 从Google的PaaS平台说起,解析中美Docker生态圈
  8. http https
  9. Android第四十一天(3)
  10. 转 Hystrix入门指南 Introduction