WordPress divi主题

原子设计:炸毁你认为你对网页设计的了解

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

人们普遍认为,灵活性与无拘无束是一样的,要发挥创造力,你也必须放纵。 但是,要完成一个项目,尤其是像网页设计这样复杂的项目,创建结构实际上可以为您提供更大的灵活性。 你 需要 一个框架——它是不可协商的。 在您真正拥有自由的地方锻炼您的艺术、创意肌肉,将产生既实用又逼真的设计。 原子设计是一种合理的、有条理的网页设计方法,它仍然让您有机会在框架内进行试验。

google广告开户

设计系统

设计师不再只是简单地创建网页; 他们创建设计系统。 设计系统包括:

  • 颜色
  • 网格
  • 质地
  • 排版
  • 等等。

我喜欢 UX Planet 的 Jack Strachan 对设计系统的描述:“简而言之,设计系统是可重用组件的集合,以明确的标准为指导,可以组装在一起以构建任意数量的应用程序。 设计系统是一种在处理不同接触点时在产品中翻译一致体验和视觉语言的方法。”

设计元素可能是主观的,它们很快就会变得势不可挡和混乱。 为了对它们进行分类,必须以更有条理的方式看待设计。 这就是网页设计师 Brad Frost 所做的。

原子设计的诞生

布拉德是这样想出原子设计的:“在寻找灵感和相似之处时,我不断地回到化学。 这种想法是所有物质(无论是固体、液体、气体、简单的、复杂的等)都是由原子组成的。 这些原子单元结合在一起形成分子,这些分子又结合成更复杂的有机体,最终创造出我们宇宙中的所有物质。”

他继续解释说,接口是由可以分类为构建块的组件组成的。 以下是从小到大的顺序:

  • 原子
  • 分子
  • 有机体
  • 模板
  • 页面
原子设计

资料来源:BradFrost.com

原子设计的基石

原子设计的主要吸引力在于它促进了一致性。 您创建的许多元素都可以轻松复制、重用或缩放。 为了跟踪所有这些,设计师可以为自己构建一个库,他们可以在一个地方查看所有元素和样式。 也有一些定制的空间,但只有在构建块变得更加复杂和范围更大的情况下。 让我们进入五个构建块:

1. 原子

正如原子在自然界中很重要一样,HTML 标签对 Web 界面很重要。 含义:所有 Web 界面都以 HTML 标记或基本元素(动画、按钮、调色板、字体、表单标签等)开头。 虽然这些原子本身对 Web 设计没有好处,但它们是构建 Web 界面所必需的。

WordPress divi主题

原子设计

2. 分子

分子比原子更复杂,但它们总体上并不复杂。 当你将不那么有用的原子组合在一起时,你就有了更有用的分子: 搜索表单标签 + 输入 + 按钮(原子)= 完成的搜索表单(分子)

原子设计

3. 有机体

当你将分子组合在一起时,你会得到比它们的前辈更复杂的有机体: 徽标 + 导航 + 搜索表单 + 社交媒体图标(分子)= 已完成的标头广告(有机体)

原子设计

理想情况下,您将能够在网站上或跨不同网站重复使用有机体,保持总体布局并使用不同的文本和图像对其进行自定义。 例如,您可以在您设计的所有网站上使用相同类型的标头,或者您可以创建一个特定于产品的有机体(图片 + 标题 + 价格),然后在产品页面上重复。

这是 Web 界面真正开始以独特的、定制的方式形成的时候。 在此之前,您的界面只是普通元素的集合。 在有机体阶段,网站变得更加直观。

原子设计

如果您要与客户分享您的流程,这就是他们会说的部分,“哦,我明白了。” 现在是开始制作线框图或制作模型的时候了,这样客户就可以在您进一步了解之前给您反馈。

4. 模板

当您将有机体组合在一起时,您就有了模板。 这是实际页面布局结合在一起的时候。 虽然分子和有机体有自己的内部布局,但模板阶段是您开始了解它们如何相互补充和相互作用的时候; 它们相对于彼此的位置; 以及它们如何作为一个整体流动。 模板给出了分子和有机体的上下文。 请注意,模板具有占位符内容,而不是自定义或原始内容。

fiverr建站WordPress程序员
原子设计

资料来源:BradFrost.com

5. 页面

页面通过将占位符内容替换为实际内容,将模板提升到一个新的水平。 它可能不会是最终的内容,但它会更能代表最终的设计和内容。 此时添加高质量、永久的内容可能是一种浪费,因为网站仍然需要进行测试、审查和调整。 也就是说,你有可能 将要 插入最终确定的内容——这取决于您在该过程中所处的位置。

这是网站将受到最严格审查的阶段。 根据您获得的评论和反馈,可能需要更改分子、生物体和模板。 这也是测试设计变化的好时机。

最后的想法

原子设计的问题在于它不是新的——措辞是新的,但理论不是。 这就是网站长期以来的设计方式。 用原子设计术语说话不会自动使您成为出色的设计师或开发人员。 它不能代替扎实的工作。

独立站选品工具

以这种方式谈论它的一个好处是,在使用这种术语来阐明方法时,非开发人员更容易理解——您可以向客户解释您的流程。 对于有组织的开发人员来说,这是一种划分设计的方法。 您将能够深入研究一个组件或一小组不起作用的元素。 它可以帮助你只见树木不见森林,而不是说“这整件事都是有缺陷的”。

原子设计让您拥抱创造力而不会迷失在其中。 它以一种让您更快地开始项目的方式来处理基本元素和设计系统,以便将时间花在最需要您的艺术性和技能的地方——进行复杂的调整、解决问题、满足客户需求并最终创建一个可以运行的网站超出正常范围。

保持这种网页设计的势头,并查看每个网页设计项目都遵循的 10 条良好 UI 设计规则。

特色图片来自 ShadeDesign / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题