使用原子设计的网页设计

Question

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

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

Answer 1

简介

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

​

​

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

​

​

快速入门

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

​

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

​

来源：

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

Answer 2

首先，我推荐布拉德·弗罗斯特的“原子设计”电子书，你可以在这里阅读它：http://atomicdesign.bradfrost.com/table-of-contents/

一般而言，原子设计与其说是一步一步的教程，不如说是一种想法。这只是一种设计组件的方式，从原子(如标签或脉搏)到更复杂的分子(如搜索框)和整个有机体(如接触形式)。

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