020-29815005
预约专线时间:09:00-23:59

熟悉B端组件库。

新闻来源:本站 日期:2021-05-09
对设计者来说,组件化对他们来说已经不陌生了,简单地说,组件化就是将产品中的一般模块进行元素分解、整理、重组,形成一整套“多维度”的解决方案,组件化可以应用于操作设计、UI、交互、动效、开发等各个方面,一个完整的组件库,无论对于产品、设计还是开发,无疑都会…
    熟悉B端组件库。

    对设计者来说,组件化对他们来说已经不陌生了,简单地说,组件化就是将产品中的一般模块进行元素分解、整理、重组,形成一整套“多维度”的解决方案,组件化可以应用于操作设计、UI、交互、动效、开发等各个方面,一个完整的组件库,无论对于产品、设计还是开发,无疑都会大大提高设计质量,提高工作效率,降低沟通成本。

    一、理解用户界面框架。

    在B端后台开发过程中,前端同学都是基于UI框架进行开发的,介绍了一些开放源码的UI框架,或者企业自建的UI框架,利用这些框架开发出一些通用模块,然后用代码封装,在项目中重复使用。

    所以在设计时就要求我们要掌握主流UI框架的设计规范,然后再根据这套框架的规范进行设计和扩展。像AntDesign,Element,iview,Layui这些前端常用的UI框架。


    像Antdesign这样的平台的这些组件仅仅覆盖了一些通用的场景,而对某些定制产品的需求是无法满足的,不管是单一产品还是产品线,由于品牌差异,在不断成熟的过程中,都会有自己的组件库(UIKIT)。

    下面是我根据不同的使用场景对组件分类的方法,每个产品对组件的应用都不相同,我们需要根据项目的实际情况增加或删除组件。它主要由7个部分组成:基本组件,布局,导航,数据输入,数据显示,反馈,数据可视化等。


    每一个组件都有它自己的应用场景,总而言之,不要盲目借鉴其他产品,要根据用户的使用场景来选择合适的组件,例如,提示设计:在界面设计中,我们什么时候需要一个强提示?


    二、建立用户界面组件库-原子设计原理。

    原子性设计理论,通常是用来构建一个统一的、层次丰富的设计体系的一套方法,它由原子、分子、组织、模板和页面这五个层次组成。

    基本元素在界面上不能再细分,如:颜色、文本、图标、分割线、阴影等;

    分子结构:由许多原子组成的简单的用户界面组件,如按钮,弹窗,标签条,搜索框等;

    组成结构:由(原子+分子)组成的模块,如:商品卡,流通卡等;

    模版:模版由一个与原型图相似的【原子+分子+组织】组合而成,例如:资讯列表原型,订单管理原型等等;

    网页:将实际内容(图片、文本等)放入特定的模板中,形成网页,即网页的视觉文本;


    下面是原子设计原理示例图,就是把界面上的元素、元件、模块、原型图、感性图等归纳、整理成通用规范。