每年,都会出现越来越多的工具和流程来优化设计人员和开发人员的工作。设计系统已成为解决该领域问题的新工具。设计系统最近通过更快地构建数字产品而广受欢迎。使用它们时,您不仅可以访问图标、排版、深度效果、调色板,还可以访问可在移动和Web开发过程中使用的组织规则。它们带有许多工具和组件,并且还使您不必完全自己创建设计。只需按照详细指南为您的品牌定制并获得即用型解决方案,即可节省时间、降低成本并简化项目实施流程,这些都是您将获得的好处。去年,Sparkbox进行了一项调查,向受访者询问了他们推荐的设计语言。您可以在下面看到可以解决的谜题和选择答案的百分比。图片来源:SparkboxDesignSystemsSurvey2019让我们回顾一下2020年将占据主导地位的10个设计系统。看看它们的功能、特性和成就。1.GoogleMaterialDesignMaterialDesign可能是最流行的设计系统,它包含用于构建漂亮的移动设备(iOS、Android)和Web解决方案的说明、工具和组件。它由Google于2014年发布,支持最佳UI/UX实践,帮助开发团队更快、更轻松地创建现代产品。MaterialDesign的第一个版本有一个缺点,这对于想要使其适应自己风格的品牌来说非常重要。所有MaterialDesign应用程序都非常相似。因此,谷歌在2018年发布了MaterialDesign2.0,这个版本是对上述批评的回应。凭借多种样式、布局、深度效果、炫酷的动画,它们有能力打造真正独特的品牌主题。我们非常了解这个设计系统,因为我们日常生活中使用的所有应用程序都是用MaterialDesign制作的:YouTube、Gmail、GoogleDrive、Docs、Slideshow等。2.Akveo的Eva设计系统Eva设计系统于2019年推出。其主要优势在于其强大的品牌适配灵活性。Eva由Akveo团队发明,基于AtomicDesignPrinciples(原子设计原则)。目前有两种实现方式,两种是针对移动设备的UIKitten(ReactNativeUI库)和针对网络的Nebular(AngularUI库)。这两种解决方案都是开源的并且可以免费获得。Eva包括258种图层样式、约400种文本样式、480多个图标、800多个符号,它使品牌移动和网络产品具有高度的可用性和引人入胜的用户体验。重要的是,Eva可用于Sketch和Figma,并具有明暗模式。它允许公司通过确保所有平台的一致性和消除重复工作来极大地自动化软件开发。结果,您将获得高质量的应用程序/网站或节省时间和精力。尽管Eva还很年轻,但它已被证明是一个强大而可靠的数字产品解决方案。例如,Eva用于UIBakery的核心,这是一个用于原型设计和创建应用程序的低代码平台。它还内置了先进的EvaColors深度学习算法,因此可以在几秒钟内生成定制设计系统。截至2020年1月,Eva在Gumroad上的下载量为15,000次,在UIKitten和NebularGithub存储库中的星数超过5,700颗。3.Carbon来自IBMIBM推出的Carbon是一个流行的开源设计系统,它提供了一套用于创建高质量数字解决方案的规则、标准和教程。遵循视觉、用户界面和代码指南,开发团队能够轻松制作引人入胜的设计。使用大量元素(表单、按钮、图标、表格、选项卡、滑块等)将帮助您定制您的品牌并确保出色的用户体验。Carbon还提供许多其他很酷的功能,包括图表类型、图表剖析、基本图表、轴、标签等。因此非常适合构建不支持数据分析和数据可视化功能的软件。截至2019年12月,CarbonDesignSystem在GitHub上拥有2,400颗星。4.LiquidLiquid为UX/UI专家和非技术人员提供了一套用于制作出色技术产品的工具、指南和元素。包含多种颜色、插图、排版、网格和组件,确保在所有设备上具有一致的UI和高质量外观。如今,Liquid包含1,500多个UI资产、42个元素、18个组件、14个模块和9个模板。借助设计和开发套件,您可以更快地构建完全适合您的品牌的令人惊叹的数字解决方案。5.Shopify的NorthStarPolaris北极星是跨国电子商务公司Shopify几年前推出的一款软件设计系统。该解决方案允许UI/UX设计师和工程师为Shopify商家创建用户友好的应用程序。它为团队提供了大量工具、样式和元素,帮助他们构建引人入胜的用户体验,适用于每台设备、每一种操作系统和每一种语言。Polaris的一大优势是它提供了非常详细的指导,说明构建优质应用程序的内容、原因和方式。在产品的官方网站上,您可以找到有关内容(语音和语气)、排版、组件、插图等的详细章节。截至2020年1月,Polaris在Github6上拥有3,100颗星。AdobeSpectrumSpectrum是一个Adob??e项目,其中包含创建Adob??e应用程序和服务所需的所有必要工具、组件和指南。与其他领先的软件设计系统一样,它还使开发团队能够确保在所有屏幕和平台上呈现自然的外观。使用Spectrum,您可以访问各种资源(UI工具包、字体、图标)、组件(数据可视化元素、按钮、排版、导航等)、模式(卡片、标题、表格)和其他使一个非常有用的产品。Spectrum设计语言有一个CSS实现——SpectrumCSS,供Adob??e平台内部或第三方使用。它是一个开源的、可定制的解决方案,具有强大的文档和生成完全交互组件的能力。截至2019年12月,SpectrumCSS在GitHub上的星数约为500颗。7.MicrosoftFluentFluentDesignSystem是Microsoft于2017年发明的一种开放式设计语言。Fluent代表了对MicrosoftDesignLanguage2的重新思考,包括针对为所有支持Windows10的设备创建的软件中使用的视觉、效果和交互的说明和平台。值得注意的是,该系统正在根据客户实际需求进行完善。基于5个主要组件-光照、比例、深度、运动和材质-Fluent允许为Web、Windows、iOS和Android构建应用程序。用它制作的产品看起来自然,并确保在每个设备和平台上的一致性。截至2020年1月,它在Github8上拥有6,600颗星。AtlassianAtlassian是一种软件设计语言,它在Sketch中提供了设计原则、代码元素和UI资产的库。有了明确的指导方针(例如关于印刷品、活动)、预建模板和演示套件,您可以更快地设计产品。Atlassian由各种组件组成,包括图标、字体、按钮、徽章、横幅、分页、选项卡、标签、表格、微调框等,有助于打造出色的体验。值得注意的是,《财富》500强公司中有83%使用Atlassian产品,在190多个国家/地区拥有150,000名Atlassian客户2017年9月12日,Atlassian成为ProductHunt产品的当日第二名和本周第五名产品。到目前为止,它已获得2,301票赞成票。9.ClarityClarity是一个开源设计系统,于2016年首次发布,由UX指南、HTML/CSS框架、Angular和Web组件组成。它还提供详细的文档、模式(应用程序布局、调色板、主题、排版、导航、国际化)和组件(例如警报、徽章、按钮、复选框、卡片、表单、网格、列表、标签、进度条、表单).创建产品时,您可以从Clarity下载图标而不是自己制作。该系统正在不断完善和更新。2019年5月23日,Clarity2.0发布。新版本包括许多新功能、错误修复和对Angular8的支持。添加了垂直选项卡、手风琴组件、步进器组件和对键盘交互的支持。目前,Clarity在GitHub10上拥有超过5,400颗星。AntDesign作为一种设计语言,Ant为UI/UX专家和开发人员提供了构建出色产品所需的所有必要资源(Sketch和Axure)。该系统主要用于内部桌面应用程序,旨在增强用户体验并确保不同设备之间的一致性。Ant包括许多开箱即用的很酷的功能:一组React组件、可预测的静态类型、国际化支持、主题定制等等。到目前为止,Ant在GitHub上有大约54,500颗星。最后的想法设计系统提供了许多有用的东西,使企业和个人能够自动化软件开发,更快地发布应用程序,并启动品牌应用程序和网站。为了实际执行和完成所有这些事情,设计系统必须包含一定的功能列表。根据2019年设计系统调查,最重要的功能是:调色板排版表单组件导航组件CSS代码HTML代码使用指南您认为最重要的功能是什么?本文翻译自AlexeiMalashkevich的文章《Top 10 best Design Systems for 2020》。
