上一章 基本色彩模式的认识

UI 设计中的原子理论

UX百科编辑部2023-12-14 发布
1149人在学·4条笔记
收藏

在界面设计中,对包含的元素进行分析就能发现,界面是由最基础的四个元素组成,分别是文字、几何、图标、图片。

但这些元素太底层,不利于对页面作用、内容的解释和构建,所以行业还需要搭建对层级更高的内容的解释。

国外的网页设计师 Brad Frost 受元素周期表的启发,原子结合可以形成分子,分子可以组成细胞,细胞可以组成组织,组织可以组成完整的生命体,这种组合的模式可以类比进 UI 设计的系统中,于是提出了原子设计理论(Atomic Design)。

这并不是一个非常严谨的科学理论,只是一个类比,所以为了便于理解,我们做了一定的优化。

简而言之,就是在 UI 设计中,包含最基础的4个元素,它们向上可以组成控件,控件和基础元素可以再组成组件,组件组成页面,页面组成整个应用。

基础元素已经说了,页面和应用大家日常也接触得不少无需解释,我们重点关注控件和组件两个元素。

控件

控件Controls是产生控制效果的元件,是UI界面中 最基础的交互元素。比如按钮、标签、进度条、输入框、下拉菜单等。

每个控件只完成一个交互目标,比如输入文本、提交确认指令、设置音量、展示可变的信息等等。

组件

组件有很多英文名,如 Elements、Components、Kits、Widgets 等,我们只要可以区分它和控件的区别即可。组件是由基础元素和控件共同组成更复杂的业务、信息、功能模块。

比如一个输入框控件,仅仅能输入一段信息,如用户名或密码,一个按钮,仅仅能发送确认指令,它们自身无法完整的作用和价值,所以要将它们组合起来。比如下面的登陆卡片,就是由两个输入框,两个按钮组成,形成一个用于登陆的完整的组件。

组件的类型非常丰富,且根据行业的发展产生了很多通用、标准的组件形式,比如快速入口、瓷片区、商品卡片、动态卡片等等。

页面都是由组件构成的,本质上页面的设计,就是通过设计不同的组件并将它们组装起来,由此也可以得出应用的设计,就是组件的设计过程。

了解这个概念,就可以帮助我们更有效的理解设计规范,并有针对性的系统的展开后续的学习。

1149人在学·4条笔记
收藏
已学会
49人已学会
下一篇iOS 的基本规范认识
iOS 的官方资源 iOS 是苹果的官方系统,iOS 设计规范是规范针对这套系统提出的一套规范解释和设计建议文档。 目前官方设计规范已经添加中文翻译,感兴趣的同学可以去阅读官方原文: 点击查看 需要注意的是,官方规范中集合了虚拟设备 VisionOS、电脑 MacOS、平板 iPadOS、电视 tv...
本章笔记
仅看自己
logo
上课困难户发布于 2024-06-26
关于界面
界面是由最基础的四个元素组成,分别是文字、几何、图标、图片。
回复
木可杨发布于 2024-05-13
页面的设计构成
页面都是由组件构成的,本质上页面的设计,就是通过设计不同的组件并将它们组装起来,由此也可以得出应用的设计,就是组件的设计过程。
回复
sumi发布于 2024-03-06
界面最基础的四要素
文字、几何、图标、图片
回复
凯尔队长发布于 2024-02-18
这句话总结的真是经典~~~
页面都是由组件构成的,本质上页面的设计,就是通过设计不同的组件并将它们组装起来,由此也可以得出应用的设计,就是组件的设计过程。
回复