Ant Design

image.png

Ant Design是蚂蚁金服体验技术部经过大量的项目实践和总结,逐步打磨出的一个企业级产品的设计体系。
它的第一个版本从2015年上线,到现在为止已经迭代了好几个版本。最新版本的设计理念是自然,它的颜色取自大自然,字号行高也进行了细致的研究,选取了自然生活中最规律的秩序。
整个设计体系包含了视觉,模式,可视化,动效,组件等几大模块,非常全面。还附带了sketch模板和工具,Axure组件库等资源下载,设计师可以迅速上手搭建一个体验良好的中后台的系统。

Fusion Design

设计语言 - 图2
Alibaba Fusion Design是阿里巴巴设计团队今年推出的颠覆性的中后台设计体系,它旨在系统化的解决企业级产品的用户体验。
不同于Ant Design,它的设计理念来自于万物皆有引力,通过对界面元素进行拆分,分成一个个很小的粒子,之后再通过不同方式组合起来,形成一个统一的视觉方案。
Fusion Design从组件,到模块,到模版,整个设计体系层层递进,也提供了自己的sketch插件。

Clarity Design

image.png
Teambition公司的设计团队打造的设计体系。Teambition是国内知名的团队协作工具,拥有者丰富的企业级产品设计经验。
Clarity Design将清晰,灵活,干净,亲切作为设计理念,注重用户操作中的高效。整个设计体系较为完善,组件相对全面一些。

Element

设计语言 - 图4
Element是饿了么的用户体验团队打造的一款服务于中后台的设计体系。它将一致,效率,反馈,可控作为设计原则。
相较于上边介绍的几个设计系统,Element并没有色彩,布局,文字,模式等方面的内容,主要包含了日常用到的设计组件。官方也提供了sketch和Axrue的资源可供下载。

Bootstrap

设计语言 - 图5
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包,是一个 CSS/HTML 框架,目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。
很多设计师在学前端的时候,都会接触到这个框架,甚至培训机构有专门的课程,所以重要性可见一斑。

Taro UI

设计语言 - 图6
Taro UI,一套基于 Taro 框架开发的多端UI组件库,可以在微信小程序/H5/ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。
现在一个产品要求在 iOS、安卓、小程序、h5 等多端运行,针对不同的客户端开发不同的代码会产生巨大的成本,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro,就可以只写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码,节约成本。

iView

设计语言 - 图7
一套基于 Vue.js 的高质量 UI组件库。Vue.js 是一个 JavaScriptMVVM 库,是一套构建用户界面的渐进式框架。
在网站中可以看到数量众多的 UI组件和对应代码,本质上和我们制作 UI规范是一样的。

React Suite

一套React组件,明智的UI设计和友好的开发经验。

LuLu UI

设计语言 - 图8
LuLu UI,是一个基于 jQuery,针对 PC 网站,兼容 ie8、ie7 的前端 UI 框架,包含很多静态或动态 UI 组件。对设计师非常友好,只需要简单的 html、css 知识就能快速上手使用。
区别于 Ant design 面向中后台开发,LuLu UI 非常适合面向外部用户的网站开发。会简单的 HTML 和 jQuery 就可以上手了,不像一些流行框架,需要较多的学习成本。

QMUI

设计语言 - 图9
QMUI,腾讯出品,分为 Web、iOS、安卓三个端,都有相应的 dome 下载安装,设计师可以下载安卓和 iOS 应用,经常看看里面的组件,熟悉后,和技术的协作会更有效率。

WeUI

设计语言 - 图10
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
这个小巧的框架提供了微信页面常用的组件,我们在设计微信风格的项目时,可以参考使用。

Atlassian Design

image.png
Atlassian Design是美国有名的SaaS企业Atlassian发布的设计体系。Atlassian公司作为一家专业的企业级软件提供商,旗下拥有Jira,Confluence,Trello等知名产品。为了保持所有产品拥有一致的良好体验,Atlassian Design发挥了至关重要的作用。
Atlassian Design分为品牌,运营,产品几个部分。在品牌部分定义了品牌的文案风格,配色,插画,logo以及文字等内容,营销部分则规范了运营时用到的插画,图标,色彩和文字的风格,产品部分对产品设计原则,配色,栅格,图标,文字,组件等部分进行了详细的说明。
整体来看,Atlassian Design的设计体系非常完善,还提供了强大的Sketch Libraries设计资源,可以迅速将其设计体系运用到实际的项目中去。

Carbon Design

image.png
Carbon Design System是IBM推出的针对中后台系统的开源设计体系,它沿用了IBM的设计语言,并且结合到中后台的操作环境中不断优化。
作为IBM官方的设计语言,Carbon Design的目标在于提高整个中后台界面的一致性和质量,使得用户在操作中更加专注。它分为风格指南,组件,实验性组件,组件状态,模式,数据可视化等几个大的章节。相对于其他设计体系,多了数据可视化的部分,可以提供大屏的dashboard解决方案。
同样的,Carbon Design也提供了相关的Sketch文件,除此之外,还额外提供了大量的演示demo,不同颜色的设计主题以及色彩对比度检查器等贴心的小工具。

Lightning Design

image.png
Lightning Design System是美国老牌企业软件服务商Salesforce推出的一套中后台设计体系。Salesforce创建于1993年,初期主要提供客户关系管理系统(CRM),现在已经成为企业软件领域的巨头。
Lightning Design旨在打造一个符合整个Salesforce气质的设计语言,高效,一致,便捷。整个系统分为风格指南,可用性指南,组件,图标等几个部分。风格指南部分对动效,颜色,布局,导航,空状态等内容进行了规范,却将图标单独列为一部分,结构稍显混乱。
Lightning Design也有相关的Sketch文件可供下载,另外还将所有的SVG格式图标进行打包提供下载,比较实用。

总结

此外还有很多其他的前端框架,以上框架不需要设计师非常深入去了解,最基本的要求是设计师对其内容、样式、组件有个大致的认知即可。在和技术协作的过程中,知道哪些组件不需要额外设计,哪些组件可以进行样式扩展。就比如设计师去学习前端,并不是去代替前端的工作,而是对 UI 界面有个更深层次的认知,设计的同时会考虑到界面的交互性、扩展性、可用性。犹如庖丁解牛,透过表象看到结构本质,提高自己的界面把控能力。