众所周知UI组件库指的是用户界面组件集合,作为产品设计系统的一部分,巧妙的用好UI组件库能够有效的节省时间成本,同时提升团队沟通效率和整个产研的生产力,让产品项目更快落地。
那新产品设计或者老产品重构的时候要如何去选择和识别各大厂的组件落地我们项目的时候是真的降本增效呢?
五大看点识别优秀的组件库
【一】看设计
能遵循用户习惯的语言和概念,在界面设计上,体现在所有的元素和结构需保持一致,比如设计样式、icon、文本以及元素的位置等。
设计的前瞻性并不是说设计一定要创新,它可以重复以前的风格(在新社会环境下),但是它一定要让客户感觉到这是最时尚的,在当今来说是最时髦的。同时也是符合行业特色属性的,并且可以随着行业的发展不断延伸迭代。
通过界面样式和交互动效让用户可以清晰地感知自己的操作,在用户做出操作后,通过页面元素的变化清晰地展现当前状态。
简洁直观,使操作流程快速便捷。界面中的语言表达清晰明确,让用户快速理解且做出决策。界面简单直白,帮助用户快速识别而非回忆,减少用户记忆负担。
【二】看根源
组件都是依赖业务而生的。大部分组件是在业务设计开发过程应用中反复出现,继而被抽象提取出来的。所以都会有一定的业务导向性质。当然如何识别组件是否复用还是需要产品设计高度抽象思维。结合自己的业务去判断。
【三】看调用
各大主流软件都可以覆盖,直接使用。简单的粗暴的理解,在项目研发落地过程中,可以很方便调用并使用。且能兼容各大项目。并且极大地减少开发者自己在花费大量时间去修改基础问题。能够有效地适应各种场景以及兼容各种设备。
【四】看用户量
一开始很多组件都是为了内部提升效率而搭建的,而后又开源到市面上。用户量的多少决定落地项目的实际运用情况。大量被使用的组件可多方面反映组件在市面上的效应。可以检测到该组件的设计水平、开发质量、适用性等等问题。一般认为,落地项目少的组件设计验证和研发验证都极其低,不在选择范围内,尽量避之。
【五】看维护情况
组件的复杂度会影响组件维护者的难易程度,也会影响使用者的使用效率。那么,究竟是把复杂留给自己还是留别人?答案可能也没有那么绝对,更多的时候需要我们自己平衡。一般在复杂项目中运用落地,会遇到很多实用性的问题及反馈。需要合理的迭代升级计划,用新的组件库来替换旧的。这就要求我们在不同的版本之间需要注意延续性。
互联网大厂组件精选推荐
8大大厂组件助力产品降本增效
B端必备组件:Ant Design
蚂蚁集团的企业级产品是一个庞大且复杂的系统,数量多且功能复杂,而且变动和并发频繁,常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标,我们(蚂蚁集团体验技术部)经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。
不得不提的是在Design 发展的过程中延伸生长出了更多的场景化解决方案:Ant Design MObile, AntV , Ant Design Charts、Ant Design PRO、ProComponent、Ant Design MiNi等等
安卓必备组件:Material Design
Google Material Design组件库是谷歌14年推出的一种全新的设计语言,其风格主要是扁平化设计,但并不单单是扁平设计,而是一种注重卡片式设计、纸张的模拟、动效比较突出、使用了强烈对比色彩的设计风格。安卓UI设计遵循UI设计组件库Material Design 3的设计和感觉,简化了设计过程。
产品桌面端组件:Element
Element,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库.
原子级组件:Arco Design
基于 Byte Design 升级而来,全面的企业级产品设计系统。ArcoDesign 的目标, 即通过通用的设计系统去解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题,同时它能够促进设计部门和研发部门之间协作, 成为开发者之间沟通的语言。ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现。生态组件群也比较丰富。
小程序必备组件:WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元素。
金融场景神器:Mand Mobile
造面向金融场景的 Vue 移动端 UI 组件库,灵活快速、丰富实用;用于敏捷搭建差异化的金融类产品,力求让复杂场景变得简单,辅助用户认知提效。
产品桌面端组件:Clarity Design
Clarity Design 是一套全面的设计语言,从设计原则到字体排版,从交互到文案,从动效到样式,从组件到设计工具…… 提供了各种解决方法和指导,设计师和工程师可以快速找到相关的指导内容,有效地帮助完善工作并且提高效率。
业务组件:Zan Design
多年来给来自不同行业的几百万商家提供着服务。这样足够丰富的客户和足够丰富的需求环境,让有赞沉淀了不少关于产品设计的经验和方法,我们愿意将这些经验完整地共享出来,希望可以帮助更多同行提高产品设计和研发效率。
我们将这些思考和沉淀,抽象形成了一些稳定且高复用性的内容,逐渐打磨出一套服务于产品设计的设计模式和实践方法:Zan Design。
相关文章