组件(component)就是可复用的,由一些元素按照一定的顺序和空间排列、归纳、重组后构成的元素组合
比如电商瀑布流中商品块可以是由图片,标题,标签,价格,组成的一个组件简单拆分一下就是这种...
使用组件的优势:一、统一,组件的复用可以保证使用同一组件模块的样式一致,减少拖拽所形成的偏差,在不同页面使用使整体风格统一;二、高效,可以全局修改内容;三、灵活、可以快速自由组合;四、复用,不仅在一个项目中可以使用,在其他关联项目同样可以使用;五、便捷,对于团队来说有统一的组件库避免了多人多风格的现象,有助于提升整个产品的视觉统一与交互规则的统一,同时也方便后期的修改,更新迭代等工作的进行。当然组件不仅局限于UI设计中样式 也可以用于运营banner,h5等 例如一键更换图片与文字内容形成新的所需要的图片等。
常用组件库:
apple UI design resource ---------- https://developer.apple.com/design/resources/
蚂蚁金服设计规范 ----------- https://ant.design/docs/spec/introduce-cn
we UI微信组件库 ---------- https://developers.weixin.qq.com/miniprogram/design/
vant 有赞组件库 ---------- https://youzan.github.io/vant/#/zh-cn/design/ ( https://vant-ui.github.io/vant/#/zh-CN/design#se-cai-gui-fan)
element 饿了么(B端)--------- https://element.eleme.cn/#/zh-CN (https://element.eleme.cn/#/zh-CN/component/installation)
京东taro UI组件库 --------- https://taro-ui.jd.com/#/docs/introduction
阿里Clarity design --------- https://design.teambition.com/resource/design-resource
组件的整理与归类:可以把页面栅格化处理,根据栅格的宽度搭建页面
组件的命名:可参考 xx类别/xx模块/xx组件/xx状态 ,要耐心分类 不要偷懒
sketch组件解析: