低成本,高颜值建站 - 万家云网      热门搜索: 响应式 简洁 大气 商城 科技 自适应 时尚 精品 炫酷

10种出色的设计系统以及如何从中学习

设计系统风靡一时,尽管大多数文章都在谈论它们是什么以及如何创建它们的最佳实践,但在DesignerUp上,我们一直与产品设计专业的学生一起将其视为一种教学工具,以帮助他们更好地理解,探索和学习哲学。 ,UI设计,UX和产品设计的最佳做法和原则。
闻数起舞 2020-06-17 14:14:55 设计 系统
0
10种出色的设计系统以及如何从中学习

> Helpscout Design System

设计系统风靡一时,尽管大多数文章都在谈论它们是什么以及如何创建它们的最佳实践,但在DesignerUp上,我们一直与产品设计专业的学生一起将其视为一种教学工具,以帮助他们更好地理解,探索和学习哲学。 ,UI设计,UX和产品设计的最佳做法和原则。

除了将设计系统实施到您的工作流中之外,设计系统还是一个巨大的未开发资源,用于学习如何通过研究它们来创建更好的用户体验和界面! 有什么比Shopify更好的方法来理解如何设计电子商务用户流程? 这些就是我们所说的设计模式,聪明的设计师知道如何使用它们来指导他们自己的设计决策。 如果世界上最好的公司已经铺平了道路,并与实际用户进行了测试,并在线发布了他们的UI / UX和产品设计方法,则无需重新设计UX轮子!

"有时候,我认为我绘制的所有内容只是我所看到的数以百万计的所有图纸的组合。"

—让·卢克·戈达德

什么是设计系统?

简而言之,设计系统是产品设计公司的文档,文章,示例,代码段,屏幕截图,设计指南,组件,理念和其他数字资产的集合。 它通常作为网站(公共或内部)在线托管。 可以将其视为一个庞大的知识库,它是UI套件,带有说明,语言和编码指南的部分文档一起包装而成。

10种出色的设计系统以及如何从中学习

> Shopify Design System

公司为什么要创建它们?

与整个产品团队(程序员,工程师,设计师,产品经理,高级管理人员团队等)协作创建设计系统。理想情况下,他们作为一个委员会聚集在一起进行工作; 盘点其当前所有数字产品资产(颜色,徽标,页眉,页脚,表单,代码等),并就如何设计,编码,呈现和讨论事物达成共识。

这是他们的总体规划,是所有事实的源泉,也是确保所有从事其产品工作的人始终在同一页上,保持一致并与应有的方式保持一致的参考。

在实现级别,当编码人员需要在新页面上重复一段代码时,可重复使用的组件就在那里供他们复制和粘贴。 当设计人员需要刷新新的登录页面时,所有预先设计的UI符号元素都准备就绪,可以进行非破坏性的编辑。 当营销人员需要发送时事通讯时,毫无疑问,该副本应采用哪种色调或标题图像应为哪种形式。 一切就绪,布局清晰,而且由于每个人都进行了讨论,做出了贡献并达成了共识,因此毫无疑问需要做什么以及如何做。

你可以从他们那里学到什么

为了本文的目的,而不是讨论如何创建设计系统,我们将从另一个角度看待设计系统,并向您展示如何使用它们,并作为了解UI / UX和产品设计实践的学习指南。 和实施。

大多数设计系统的设置方式几乎相同。 显示系统主要类别的顶层导航; 通常是诸如品牌,设计,组件,代码等之类的东西。在每个类别中,通常都有一个子导航或侧栏导航,可以将这些类别进一步细分为颜色,版式,组件,形式,准则等区域。 这就像是设计方面的硕士课程!

10种出色的设计系统以及如何从中学习

> Atlassian Design System

那么,您如何从中学到呢? 假设您正在设计一个电子商务网站,并且该菜单需要一个类别下拉菜单。 不确定下拉菜单上的箭头应该是什么大小,或者要放置的文本距离它有多远,或者完全展开后的样子? 好吧,您可以找Shopify之类的购物系统先驱,看看他们是如何做到的!

这是我们列出的十大伟人(排名不分先后),它们的设计系统包括哪些,以及如何使用它们来学习和启发自己的设计。

1. Google Material Design系统

https://material.io/

10种出色的设计系统以及如何从中学习

> Google Material Design System

他们是谁:

我们都知道和使用的Google是一家专门从事与互联网相关的服务和产品的美国技术公司的庞然大物。 包括在线广告技术,搜索引擎,云计算,软件和硬件。 它被认为是四大科技公司之一,与亚马逊,苹果和微软一样

他们的设计理念:

在设计方面,Google公开共享的"材料设计"系统为许多人铺平了道路。 绝对疯狂地关注细节分类和分类的组件,这是设计界从未有过的简洁见识。 他们犯了错误,所以您不必这么做,并赋予所有设计系统今天都基于的原子设计原则以顺序和含义。 他们的设计系统目标:

· 创建一种视觉语言,将优秀设计的经典原理与技术和科学的创新与可能性相结合。

· 开发单个基础系统,以统一跨平台,设备和输入法的用户体验。

· 扩展Material的视觉语言,并为创新和品牌表达提供灵活的基础。

设计系统功能:

· 布局

· 颜色

· 版式

· 组件

· 物质主题

· 设计源文件

· 行动指南

· 入门套件

如何将其应用到您的工作中:

材料设计系统使您可以直接下载最流行的设计软件(例如Sketch和Figma)的设计组件源文件。 它们还包括材料研究,这些研究证明了如何使用组件和主题来创建美观,可用的应用程序。

2.苹果人机界面指南

https://developer.apple.com/design/

10种出色的设计系统以及如何从中学习

> Apple Human Interface Guidelines

他们是谁:

无需介绍,优雅而故意的设计就已经存在于Apple的心中。 Apple的人机界面指南不仅是设计系统,而且是令人难以置信的资源,其中包含可下载的模板以及可在自己的项目中使用的其他指南。

他们的设计理念

著名的史蒂夫·乔布斯(Steve Jobs)设计哲学包括6个支柱:

  1. 最重要的是要精打细算-对细节和精确度的关注
  2. Empathy——强调同情用户需求并与客户的感觉紧密联系的过程
  3. 专注-消除所有不重要的机会
  4. 估算-人们根据其传达的信号对公司或产品发表意见
  5. 友好性–认识到高科技设备可能友好且易接近,并且对新手和高级用户都具有吸引力
  6. 从过去的隐喻中寻找未来的简单性-设计简单性应与使产品易于使用有关

设计系统功能:

Apple面向外部的设计系统为macOS,iOS,watchOS和vOS的开发人员,设计人员和发行商提供了最佳实践,准则和资源

· 主题

· 视觉指数

· 应用架构

· 用户互动

· 系统功能

· 视觉设计

· 图标和图像

· 视窗与检视

· 选单

· 纽扣

· 字段和标签

· 选择器

· 指标

· 触控条

· 扩展名

如何将其应用到您的工作中:

您可以下载并直接使用工作中的各种开发人员和设计人员资源和工具(例如设计文件,设备模型,Swift代码),还可以参考其最佳实践指南以及如何实现数字愿景。

3. Microsoft Fluent设计系统

https://www.microsoft.com/design/fluent/#/‌

10种出色的设计系统以及如何从中学习

> Microsoft Fluent Design System

他们是谁:

从我们深爱微软的制造者那里,我们都知道他们拥有无处不在的计算机操作系统Windows,计算机软件Office和Internet浏览器Internet Explorer。

他们的设计理念:

微软的Inclusive Design方法论源于数字环境。 它启用并利用了人类的全部多样性。 最重要的是,这意味着包括具有多种观点的人并向他们学习。 他们相信,当我们使用自己的偏见解决问题时,就会发生排斥。 作为Microsoft设计师,他们寻求这些排除,并将它们用作创造新想法和包容性设计的机会:

· 认识排斥

· 解决一个,扩展到很多

· 向多元化学习

设计系统功能:

· 色彩

· 海拔

· 影像学

· 布局

· 运动

· 版式

· 本土化

· 主题化

如何将其应用到您的工作中:

Microsoft的设计工具和开源组件生态系统可以帮助您快速轻松地获得与其产品相同的外观,从而可以在Web,Windows,iOS和Android平台上创建一致的愿景,并了解Microsoft产品的逻辑和外观。 对于如何使自己的UI / UX设计尽可能地具有包容性,它也是一个很好的案例研究参考。

4. Atlassian设计系统

https://atlassian.design/

10种出色的设计系统以及如何从中学习

> Atlassian Design System

他们是谁:

曾经是我个人最喜欢的设计系统,Atlassian制作了诸如Jira和Trello之类的协作工具,该工具已在全球范围内成千上万的团队使用。 他们的重点是为敏捷团队提供敏捷工具,帮助他们在计划,开发和交付产品时保持步调一致。

他们的设计理念

Atlassian的设计理念反映并巩固了数字体验如何释放任何团队的潜力。 他们的信条旨在帮助人们和团队更加有效。

· 在每次互动中建立信任

· 连接人们以更好地协作

· 符合目的并感到熟悉

· 不断推动动力

· 指导精通以获得更大的价值

设计系统功能:

· 品牌准则

· 设计原则

· 插图

· 产品

· 个性

· 原型制作

· 营销学

如何将其应用到您的工作中:

这种设计系统的风格可以启发您正在使用的其他类似协作和管理工具,例如团队协作,产品管理工具,项目管理工具,团队聊天,服务台,知识库

5. Uber设计系统

https://brand.uber.com/guide

10种出色的设计系统以及如何从中学习

> Uber Design System

他们是谁:

Uber是Gig经济的一部分(为乘客和自由职业者提供服务)的乘车服务,提供的服务包括点对点乘车共享,乘车服务服务,食品配送(Uber Eats)以及带有以下功能的微动系统: 电动自行车和踏板车。

他们的设计理念

从子品牌到内部团队,再到产品再到程序,Uber致力于将人们带到他们想要的地方。 在他们的生活中,在他们的生活中,在当下,他们相信运动会点燃机遇。

设计系统功能:

· 商标

· 品牌架构

· 颜色

· 组成

· 影像学

· 插图

· 运动

· 摄影

· 说话的语气

· 版式

如何将其应用到您的工作中:

如果您在旅行或运输,零工经济或外太空工作; 无论是通过踏板车,职业鸽还是子弹头列车,Uber都是一个出色的例子,它说明了如何解决与从A点到达另一个点无关的问题,无论您要去哪里。

6. Shopify设计系统

https://polaris.shopify.com/

10种出色的设计系统以及如何从中学习

> Polaris Shopify's Design System

他们是谁:

Shopify是用于启动,运营和发展业务的多合一电子商务平台。 它为全球超过1,000,000家企业提供支持。

他们的设计理念

Shopify相信,可以使每个人都更好,更容易获得商务机会。 他们的目标是通过使人们更容易地开始,运营和发展业务来帮助人们实现独立性。 Shopify的共同价值观是他们建立的体验的核心:

· 体贴-最重要的是,我们对使用我们的工具和产品的人员表示关怀

· 授权-我们希望人们觉得自己可以完成自己想做的任何事情。

· 精心制作-Shopify体验应该像是他们以最高水平的手工艺创造的

· 高效-Shopify体验应帮助人们快速,准确且省力地实现目标

· 值得信赖-我们一直在努力为用户的信任电池充电。

· 熟悉-无论是初次使用还是百分百的使用,我们都希望人们能放心使用我们的产品

设计系统功能:

· 色彩

· 辅助功能

· 资源资源

· 版式

· 插图

· 声音

· 图示

· 互动状态

· 间距

· 数据可视化

如何将其应用到您的工作中:

利用Shopify设计系统的最明显方法是作为实用指南,以帮助您了解如何为Shopify平台进行设计。 在另一个层面上,它为如何使用语言,设计中的内容,视觉元素和UI组件提供了丰富的知识和启发,可为任何与电子商务相关的项目提供更好的产品体验。 该设计系统本身设计精美,请注意。

10种出色的设计系统以及如何从中学习

7. IBM Carbon设计系统

https://www.carbondesignsystem.com/

10种出色的设计系统以及如何从中学习

> IBM Carbon Design System

他们是谁:

尽管IBM曾经与Apple和Microsoft一起参与个人计算游戏,但此后他们将重点转移到了大型企业IT需求上。 他们提供从商务咨询到软件开发服务再到IT托管和管理,再到软件产品再到硬件(服务器,大型机,存储)甚至融资的一切服务。

他们的设计理念

IBM员工坚信进步–通过运用智慧,理性和科学,他们可以改善业务,社会和人类状况。 考虑到他们的规模和范围,他们认为良好的设计不仅是一项要求,而且对他们所服务的人员和所建立的关系负有更深的责任。

设计系统功能:

Carbon工具和资源包括Sketch,Axure和Adobe XD的设计文件以及开发人员的资源。

· 讲解

· 指导方针

· 组件

· 模式

· 数据可视化

如何将其应用到您的工作中:

如果您在企业系统或大型公司产品(内部或外部)上工作,Carbon就是成功完成该任务的一个很好的例子。 您可以以此为指导,了解如何以简洁易懂的方式处理大量数据,并通过引人注目的可视化效果进行呈现。

8. Mailchimp设计系统

https://ux.mailchimp.com/patterns/color

10种出色的设计系统以及如何从中学习

> Mailchimp Design System

他们是谁:

Mailchimp最近更新了其品牌和标识系统,在用户友好型电子邮件营销领域长期处于领先地位,并且已从电子邮件扩展为小型企业的多合一营销平台。

他们的设计理念

Mailchimp使企业能够发展,同时忠于自己。 他们的品牌体现了对Mailchimp团队的重要意义-对工艺的热爱,对创意表达的热爱以及对质量的痴迷。

设计系统功能:

· 颜色

· 数据可视化

· 网格系统

· 版式

· 组件

如何将其应用到您的工作中:

如果您正在从事电子邮件,市场营销,业务,战略或广告领域的项目,Mailchimp可以提供一些有用的提示和示例,说明如何正确地做到这一点,同时仍能突破表达和创造力的界限。 有许多创新的设计思想可以用来执行复杂的任务(例如创建自动电子邮件活动和新闻通讯); 通常降级为高级用户,营销专家或精通技术的人员,可通过平易近人且直观的UX进行访问。

9. Salesforce闪电设计系统

https://www.lightningdesignsystem.com/

10种出色的设计系统以及如何从中学习

> Salesforce Lightning Design System

他们是谁:

Salesforce率先推出了基于云的CRM软件,已帮助超过15万家公司更有效地运行,他们通过集成的CRM可以为您的客户提供个性化的体验,从而增强营销,销售,商务,服务,IT等。

他们的设计理念

Ohana是夏威夷人的意向家庭一词,是推动他们的公司文化发展的原因。 它们的4个核心价值是其决策,行动和沟通的基础:

· 信任

· 客户成功

· 革新

· 平等

设计系统功能:

· 平台类

· 设计准则

· 辅助功能

· 组件(很多!)

如何将其应用到您的工作中:

如果您正在着重关注用户体验,交互和流程的内容管理系统,人工智能,销售,商务或分析平台,则明智的做法是向开拓者本身寻求灵感和指导原则。

10. Helpscout设计系统

https://style.helpscout.com/

10种出色的设计系统以及如何从中学习

> Helpscout Design System

他们是谁:

helpscout是最好的在线支持服务。 精心设计以提供出色的客户体验,不存在典型的帮助台障碍。 他们所有的努力都投入到了软件开发中,该软件可为团队提供帮助台的规模和效率,同时具有无缝的客户体验。

他们的设计理念

· 品牌价值

· 乐于助人

· 值得信赖

· 人与有机

· 精力充沛

· 好奇

设计系统功能:

较小但设计精美的系统之一HelpScout,它分为3个主要部分:

· 视觉元素

· 内容样式

· 产品设计

如何将其应用到您的工作中:

非常适合您进行的涉及服务台,票务提交系统,知识库,常见问题解答,Wiki和支持论坛的工作。

奖金11.美国网页设计政府设计系统

https://designsystem.digital.gov/

10种出色的设计系统以及如何从中学习

> US Web Design Government Design System

他们是谁:

不是最迷人的设计系统,但无论您是否相信,美国政府实际上都为他们的在线接触点制定了设计原则和准则! 不要低估或低估,政府网站(可能比其他任何网站都多)涉及到我们每个人,尽管许多网站在改善用户体验方面还有很长的路要走,但很高兴知道正在将一些重点放在开发上 在这个部门。

他们的设计理念

他们认为,真正的用户需求应该有助于产品决策。 无论受众是公众成员还是政府雇员,决策者必须从一开始就将真实的人纳入我们的设计流程,并测试他们所做的假设以及与真实人一起构建的产品和服务,以使他们专注于什么是真实的人。 最有用和最重要的。

· 从真实用户开始

· 获得信任

· 拥抱可及性

· 促进连续性

· 听

设计系统功能:

· 组件

· 设计令牌

· 实用工具

· 页面模板

如何将其应用到您的工作中:

如果您正在使用一个主要关注表单,字段,输入,表格白皮书和链接的系统,那么这就是要参考的系统!

"这里不是您从那里拿东西的地方,而是您将它们拿到那里的地方。"

—达什·肖

因此,这些是我们选择顶级设计系统的选择,您可以从中学到什么。 希望您能从新的角度看到它们; 作为学习工具和资源,可帮助您更好地理解UI,UX和产品设计,并在将其应用于自己的工作时给予启发。

如果您想学习如何真正成为高技能和高薪的UI / UX或产品设计师,请查看我们的产品设计大师课程。 Au奥斯汀·克莱恩(Austin Kleon)的《像艺术家一样偷窃》一书的语录

评论
暂时还没有任何用户评论

发表评论

用户名: 匿名用户
E-mail:
评价等级:
评论内容:
验证码: captcha
 

资讯分类

热文资讯

热门文章标签

点击这里给我发消息
嘿!有什么能帮到您的吗?