UI设计组件|临摹学习的必备

一、组件介绍

1. 什么叫组件?

组件是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成的规范化模块。它就像组成完整框架的单元体(比如按钮、导航栏、tab栏等),具有标准规范和可复用场景的基本模块。

素描数据表组件

SimpleBee - 高级米加100+布局和组件的包

设计系统组件 - 选中复选框UI

FIGMA组件 - 头

从字面上理解:

「组」:多种设计元素组合在一起。

「件」:由不同的个体元件组合而成。它们作为一个独立个体存在,可进行自由组合和替换。

2. 组件的命名

组件命名规范化,我们在给组件命名时要遵循一定的命名规范,一个好的命名规范可以方便开发和设计师查找且使用相应的组件。

微笑瑜伽UI套件 - 组件免费搭乘

出租车预订 - UI组件

乘坐预定UI组件

组件设计

二、组件化设计的优势

在一个项目页面里,设计师有时候会将文字或者图片不经意的左右移动1px-2px而不知,从而导致设计元素间距不一致。又或者是,大量重复的手动化导致细节的疏忽。组件化设计就能很好的避免这个问题。 在日常设计中,我们常常会将同一个模块的内容应用到不同地方,如果我们每次都重新设计,每一个设计都有差异,这样会让整个项目的样式都不同。如果我们应用到了组件,在不同页面中,我们就调用组件,这样每个页面就不会出现差异化,有利于项目的设计风格统一。

基于组件的iOS 8 UI套件

Web UI套件

整套APP UI套件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

awayaya1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值