Ant Design
Ant Design是蚂蚁金服体验技术部经过大量的项目实践和总结,逐步打磨出的一个企业级产品的设计体系。
它的第一个版本从2015年上线,到现在为止已经迭代了好几个版本。最新版本的设计理念是自然,它的颜色取自大自然,字号行高也进行了细致的研究,选取了自然生活中最规律的秩序。
整个设计体系包含了视觉,模式,可视化,动效,组件等几大模块,非常全面。还附带了sketch模板和工具,Axure组件库等资源下载,设计师可以迅速上手搭建一个体验良好的中后台的系统。
Fusion Design
Alibaba Fusion Design是阿里巴巴设计团队今年推出的颠覆性的中后台设计体系,它旨在系统化的解决企业级产品的用户体验。
不同于Ant Design,它的设计理念来自于万物皆有引力,通过对界面元素进行拆分,分成一个个很小的粒子,之后再通过不同方式组合起来,形成一个统一的视觉方案。
Fusion Design从组件,到模块,到模版,整个设计体系层层递进,也提供了自己的sketch插件。
Clarity Design
Teambition公司的设计团队打造的设计体系。Teambition是国内知名的团队协作工具,拥有者丰富的企业级产品设计经验。
Clarity Design将清晰,灵活,干净,亲切作为设计理念,注重用户操作中的高效。整个设计体系较为完善,组件相对全面一些。
Element
Element是饿了么的用户体验团队打造的一款服务于中后台的设计体系。它将一致,效率,反馈,可控作为设计原则。
相较于上边介绍的几个设计系统,Element并没有色彩,布局,文字,模式等方面的内容,主要包含了日常用到的设计组件。官方也提供了sketch和Axrue的资源可供下载。
Bootstrap
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包,是一个 CSS/HTML 框架,目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。
很多设计师在学前端的时候,都会接触到这个框架,甚至培训机构有专门的课程,所以重要性可见一斑。
Taro UI
Taro UI,一套基于 Taro 框架开发的多端UI组件库,可以在微信小程序/H5/ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。
现在一个产品要求在 iOS、安卓、小程序、h5 等多端运行,针对不同的客户端开发不同的代码会产生巨大的成本,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro,就可以只写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码,节约成本。
iView
一套基于 Vue.js 的高质量 UI组件库。Vue.js 是一个 JavaScriptMVVM 库,是一套构建用户界面的渐进式框架。
在网站中可以看到数量众多的 UI组件和对应代码,本质上和我们制作 UI规范是一样的。
React Suite
一套React组件,明智的UI设计和友好的开发经验。
LuLu UI
LuLu UI,是一个基于 jQuery,针对 PC 网站,兼容 ie8、ie7 的前端 UI 框架,包含很多静态或动态 UI 组件。对设计师非常友好,只需要简单的 html、css 知识就能快速上手使用。
区别于 Ant design 面向中后台开发,LuLu UI 非常适合面向外部用户的网站开发。会简单的 HTML 和 jQuery 就可以上手了,不像一些流行框架,需要较多的学习成本。
QMUI
QMUI,腾讯出品,分为 Web、iOS、安卓三个端,都有相应的 dome 下载安装,设计师可以下载安卓和 iOS 应用,经常看看里面的组件,熟悉后,和技术的协作会更有效率。
WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
这个小巧的框架提供了微信页面常用的组件,我们在设计微信风格的项目时,可以参考使用。
Atlassian Design
Atlassian Design是美国有名的SaaS企业Atlassian发布的设计体系。Atlassian公司作为一家专业的企业级软件提供商,旗下拥有Jira,Confluence,Trello等知名产品。为了保持所有产品拥有一致的良好体验,Atlassian Design发挥了至关重要的作用。
Atlassian Design分为品牌,运营,产品几个部分。在品牌部分定义了品牌的文案风格,配色,插画,logo以及文字等内容,营销部分则规范了运营时用到的插画,图标,色彩和文字的风格,产品部分对产品设计原则,配色,栅格,图标,文字,组件等部分进行了详细的说明。
整体来看,Atlassian Design的设计体系非常完善,还提供了强大的Sketch Libraries设计资源,可以迅速将其设计体系运用到实际的项目中去。
Carbon Design
Carbon Design System是IBM推出的针对中后台系统的开源设计体系,它沿用了IBM的设计语言,并且结合到中后台的操作环境中不断优化。
作为IBM官方的设计语言,Carbon Design的目标在于提高整个中后台界面的一致性和质量,使得用户在操作中更加专注。它分为风格指南,组件,实验性组件,组件状态,模式,数据可视化等几个大的章节。相对于其他设计体系,多了数据可视化的部分,可以提供大屏的dashboard解决方案。
同样的,Carbon Design也提供了相关的Sketch文件,除此之外,还额外提供了大量的演示demo,不同颜色的设计主题以及色彩对比度检查器等贴心的小工具。
Lightning Design
Lightning Design System是美国老牌企业软件服务商Salesforce推出的一套中后台设计体系。Salesforce创建于1993年,初期主要提供客户关系管理系统(CRM),现在已经成为企业软件领域的巨头。
Lightning Design旨在打造一个符合整个Salesforce气质的设计语言,高效,一致,便捷。整个系统分为风格指南,可用性指南,组件,图标等几个部分。风格指南部分对动效,颜色,布局,导航,空状态等内容进行了规范,却将图标单独列为一部分,结构稍显混乱。
Lightning Design也有相关的Sketch文件可供下载,另外还将所有的SVG格式图标进行打包提供下载,比较实用。
总结
此外还有很多其他的前端框架,以上框架不需要设计师非常深入去了解,最基本的要求是设计师对其内容、样式、组件有个大致的认知即可。在和技术协作的过程中,知道哪些组件不需要额外设计,哪些组件可以进行样式扩展。就比如设计师去学习前端,并不是去代替前端的工作,而是对 UI 界面有个更深层次的认知,设计的同时会考虑到界面的交互性、扩展性、可用性。犹如庖丁解牛,透过表象看到结构本质,提高自己的界面把控能力。