atomic-design - 使用原子设计的网页设计

Question

我需要使用原子设计创建一个网页。我没有在互联网上获得适当的教程来开始。

请分享一些演示项目，以便我了解如何使用原子设计来实现。

Answer 1

介绍

与传统的 Web 开发相比，您无需逐页设计您的网站，而是将您的网页/模型分解为不同的组件。

当您需要它们用于不同的页面时，您可以逐个添加这些模块以构建有用的组件。

快速开始

• 在 atom 文件夹中定义您的颜色和字体
• 将您的链接集合定义到分子文件夹中
• 将您的页眉/页脚定义到 Organism 文件夹中
• 按原子 -> 分子 -> 有机体顺序导入您的 CSS

/* Atom / links */
a {  
  color: #1EAEDB;
  text-decoration: none; 
}
a:hover { 
  color: #0FA0CE; 
  text-decoration: underline;
}

/* Molecules / header-links */
.header-links { 
  list-style-type: none; 
  padding: 0;
  margin: 0;
}
.header-link { display: inline-block; }

/* Organism / header */
header {
   width: 100%;
   background-color: #222;
   padding: 12px 20px;
}

<header class="header">
   <ul class="header-links">
    <li class="header-link">
      <a href="#">Home</a>
    </li>
    <li class="header-link">
      <a href="#">About</a>
    </li>
   </ul>
</header>

现在您header的网站上有一个正在使用atomic design模式的网站！您也可以尝试使用此方法分解其他组件。

---

资源：

1. http://bradfrost.com/blog/post/atomic-web-design/
2. https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e

Answer 2

首先我推荐 Brad Frost 的“原子设计”电子书，你可以在这里阅读：http: //atomicdesign.bradfrost.com/table-of-contents/

一般来说 - 原子设计更多的是一个想法，而不是一步一步的教程。这只是一种设计组件的方法，从原子（如标签或 throbber）到更复杂的分子（如搜索框）和整个有机体（如联系表格）。

请阅读上面的书。它应该回答你的大部分问题。如果没有，请提出更具体的问题。