利用原子设计体系构建自己的组件库设计语言

用户头像
成都/UI设计师/5年前/353浏览
利用原子设计体系构建自己的组件库设计语言

“我们不设计页面,我们设计构成元素的系统。”——Stephen Hay

原子设计理论并不是什么高大上的规则。


随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,它最早就是为了让网页设计师更容易理解网页的构成,后来才延伸到UI设计当中。


简单来说,当公司的业务产品逐渐扩大时,我们需要制定一套完整的设计系统,提升设计和开发的协作效率,统一所有设计师的输出物。 开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。因此,原子设计理论的出现就是为了帮助我们去搭建设计系统,这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。



  • 原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质,并且它们一旦被分解就会失去其意义。




  • 分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质,并且相较于原子来说,更具实际意义和可操作



  • 有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。



原子设计使我们可以将我们的界面UI细分为原子元素,并通过这些元素组合在一起形成最终的界面。

原子作为整个理论最基础的元素,当我们改变其中的原子时,整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙,当我们改变其中一个元素时,其他所有包含这个元素的页面都会发生变化,可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理,这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。


1
举报
|
7
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
钱包ui模板
【新年UI图标】影音icon
【新年UI图标】体育icon
新拟态风格 UI设计组件库
3D渐变流体抽象矢量UI背景图
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级感金属拟物 UI设计组件库
高级表盘系列UI源文件
拟物风质感写实UI卡片合集源文件
UI界面 组件
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】积分icon
【新年UI图标】珠宝icon
Security Camera UI kit
【新年UI图标】礼物/活动icon
【新年UI图标】活动icon
【新年UI图标】旅行icon
我的钱包-UI界面设计-app
科技医疗透明柜UI界面设计
手表表盘UI系列
APP/小程序商业项目UI模板|99个高保真UI+79个原型
你可能喜欢
相关收藏夹
大家都在看
登录注册