انطلق براد فروست في منهجية التصميم الذري من فكرة الجدول الدوري للعناصر الكيميائية والذي يحتوي على العناصر الأساسية التي تم اكتشافها والتي بدورها تكوّن باتحادها وفق صيغ معينة العديد من المواد التي نراها اليوم، حيث قام بإعادة عناصر واجهات المستخدم UI Elements إلى شكلها البدائي الذي لا يمكن تقسيمه، ومن ثم استخدم العناصر البدائية لبناء مكونات أكبر منها بطريقة هرمية تمنح قدرًا أكبر من التحكم بالعناصر المطلوبة.

ما هو التصميم الذري Atomic Design؟

التصميم الذري هو منهجية لتصميم مكتبة الأنماط Pattern Library تتكون من خمس مراحل منظمة بطريقة مدروسة وهرمية وهي:

• الذرات Atoms.
• الجزيئات Molecules.
• الكائنات Organisms.
• القوالب Templates.
• الصفحات Pages.

ويمكن فهم منهجية التصميم الذري Atomic Design بشكل أكبر من خلال المرور على مراحلها المختلفة ومعرفة كيفية تطبيق المرحلة على تصميم فعلي.

مكونات التصميم الذري

أولاً: الذرات Atoms

تُعتبر الذرات في التصميم الذري المكوّن الأول لعناصر واجهة المستخدم، ولشرح معناها لنفترض أن لدينا زرًا سنستخدمه في موقع ويب، فإن ما يمثل الذرة هنا هو وسم الزر من لغة Html <button> .
ويمكن أن تكون الذرة أيضًا مجرد أيقونة أو خط كتابة أو حقل إدخال وغير ذلك من العناصر البدائية في الويب أو الهواتف الذكية.

<button type="submit" class="btn"> بحث </button>

ثانيًا: الجزيئات Molecules

بعد أن تتحد أكثر من ذرة نحصل على الجزيء، وهنا يمكن أن نتصور الجزيء بأنه جزء ذو وظيفة واحدة مثل حقل البحث، حيث يتكون من مجموعة من الذرات Atoms وهي حقل النص <input>، زر الإرسال <button>، وربما وسمًا أو رسالة توضيحية <label>، ويمكن أن يكون الجزيء أيضًا القائمة الرئيسية والتي تحتوي على مجموعة من الأزرار .

<input type="text" class="search" name="search" placeholder="ابحث.."/>
<button type="submit" class="btn">بحث</button>

ثالثًا: الكائنات Organisms

تتحد الجزيئات المختلفة لتكوّن الكائن، والكائن هنا هو جزء من الصفحة يحتوي على عناصر معينة تشترك في صفة ما كالأهمية مثلاً، مثال ذلك رأس الصفحة أو الـ Header حيث يحتوي عادة على أهم عناصر الصفحة كالشعار والقائمة الرئيسية وحقل البحث.

تطبيق عملي

قبل أن نستكمل آخر قسمين من أقسام منهجية التصميم الذري سيكون من الجيد أن نأخذ فكرة عمليّة عن التقسيمات السابقة وكيفية تطبيقها من زاوية مصمم الواجهات UI Designer ومن زاوية مطور الواجهات Front-end Developer.

1- تصميم الواجهات

من خلال العمل على برنامج Sketch سنقوم ببناء رأس الصفحة أو الـ Header كما ظهرت في مثال الكائنات Organisms، ويمكن تنفيذها بأي برنامج مشابه كالـ Figma.

إنشاء قسم خاص بالذرات:

سنقوم بإنشاء صفحة خاصة بالذرات، تحتوي على ما نحتاجه لتصميم الذرات، وهنا في الملف وضعنا ما يتعلق بتصميم رأس الصفحة لتوضيح الفكرة ليس إلا، ففي الأوضاع العادية يحتوي ملف الذرات على عشرات العناصر، كالأزرار بأنواعها وحالاتها، قوالب الصور، الأيقونات، الخطوط بأحجامها المختلفة وأوزانها، بالإضافة إلى عناصر واجهات الهواتف الذكية في حال كان المشروع يتضمن العمل على تطبيقات الويب والهواتف.

إنشاء قسم الجزيئات:

وهنا أيضًا وبنفس الطريقة سنقوم بإنشاء صفحة للجزئيات، وسيكون بناء الجزئيات أكثر سهولة من بناء الذرات، فالجزيئات هي مجرد ذرات مجتمعة!، أي أننا سنقوم بأخذ الذرات ذات العلاقة وجمعها لنكوّن الجزيء المطلوب.

وبنفس الطريقة يمكن الاستفادة من عناصر القسمين السابقين لإنشاء الكائنات:

2- تطوير الواجهات

والآن سنقوم بتحويل الكائن السابق (رأس الصفحة) إلى مكون برمجي Component وسنستخدم مكتبة React js لبناء المكون وفق منهجية التصميم الذري.

طريقة تقسيم المكونات:

نبدأ بصناعة مكون للأزرار Button.js بالطريقة التالية:

import React from "react";
import styled from "styled-components";

const ButtonStyle = styled.button`
  background: #ce3052;
  border: none;
  color: white;
  border-radius: 8px;
  height: 40px;
  width: 50px;
  font-size: 16px;
  font-family: "Markazi Text", serif;
`;

export default function Button(props) {
  return (
    <>
      <ButtonStyle type="submit">{props.title}</ButtonStyle>
    </>
  );
}

وبنفس الطريقة نقوم بعمل مكون لخانة الإدخال Input.js:

import React from "react";
import styled from "styled-components";

const InputStyle = styled.input`
  background: #f5d2d9;
  border: none;
  border-radius: 8px;
  height: 40px;
  width: 150px;
  margin-left: 5px;
  padding-right: 4px;
`;

export default function Input(props) {
  return (
    <>
      <InputStyle type="text" name="search" placeholder={props.placeholder} />
    </>
  );
}

الشعار Logo.js:

import React from "react";
import Brand from "../../images/logo.png";
import styled from "styled-components";

const LogoWrapper = styled.div`
  margin-left: 40px;
  @media screen and (max-width: 480px) {
    margin: auto;
  }
`;

export default function Logo() {
  return (
    <LogoWrapper>
      <img src={Brand} alt="logo" />
    </LogoWrapper>
  );
}

زر القائمة MenuLink.js:

import React from "react";
import styled from "styled-components";

const Li = styled.li.attrs((props) => ({
  className: props.className
}))`
  display: inline-block;
  margin-left: 20px;
  color: #6d6d6d;
  text-align: right;
  cursor: pointer;
  &:hover {
    color: #ce3052;
  }
  &:last-child {
    margin: 0;
  }
`;

export default function MenuLink(props) {
  return (
    <>
      <Li className={props.className}>{props.children}</Li>
    </>
  );
}

ما سبق كانت الأكواد البرمجية الخاصة بالذرات، وننتقل بعدها لبناء الجزيئات ابتداء بالقائمة الرئيسية Menu.js:

import React from "react";
import MenuLink from "../atoms/MenuLink";
import styled from "styled-components";

const Nav = styled.nav`
  margin: auto;
  flex: 1 1 auto;
  @media screen and (max-width: 480px) {
    flex: none;
  }
`;

export default function Menu() {
  return (
    <Nav>
      <ul style={{ padding: "0" }}>
        <MenuLink className="active">الرئيسية</MenuLink>
        <MenuLink>المتجر</MenuLink>
        <MenuLink>من نحن</MenuLink>
        <MenuLink>المدونة</MenuLink>
        <MenuLink>اتصل بنا</MenuLink>
      </ul>
    </Nav>
  );
}

ثم مكون البحث Search.js:

import React from "react";
import Button from "../atoms/Button";
import Input from "../atoms/Input";
import styled from "styled-components";

const SearchWrapper = styled.div`
  margin: auto;
  @media screen and (max-width: 480px) {
    margin-bottom: 20px;
  }
`;

export default function Search() {
  return (
    <>
      <SearchWrapper>
        <Input />
        <Button />
      </SearchWrapper>
    </>
  );
}

وأخيرًا يمكن عمل رأس الصفحة Header.js وهو الكائن المطلوب وذلك باستخدام ذرات الشعار + جزيء البحث + جزيء القائمة الرئيسية:

import React from "react";
import styled from "styled-components";
import Logo from "../atoms/Logo";
import Search from "../molecules/Search";
import Menu from "../molecules/Menu";

const HeaderWrapper = styled.header`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  direction: rtl;
  font-family: "Markazi Text", serif;
  border-bottom: 1px solid #bababa;
  flex-wrap: wrap;
`;

export default function Header() {
  return (
    <HeaderWrapper>
      <Logo />
      <Menu />
      <Search />
    </HeaderWrapper>
  );
}

للذهاب إلى صفحة الكود البرمجي كاملاً اضغط هنا أو اضغط هنا

رابعًا: القوالب Templates

نستكمل الآن آخر قسمين من أقسام منهجية التصميم الذري، بدءًا بالقسم الرابع وهو القالب، ويمثل القالب تخطيطًا لتوزيع الذرات والجزئيات والكائنات وكيفية بناء الصفحة بغض النظر عن المحتوى النهائي، ويدخل في هذا أي أشكال محتملة في التخطيط، كشكل الصفحة على شاشة الحاسوب أو الـ Desktop وشكلها على متصفح الهاتف الذكي.

خامسًا: الصفحات Pages

تختلف الصفحات عن القوالب في أنها تقدّم الصفحة بالمحتوى والشكل النهائي كما في المثال التالي:

توضيح الصفحة للحالات المحتملة:

إلى جانب تقديم الصفحة للشكل النهائي فهي تقدّم احتمالات الصفحة الواحدة من ناحية تغير المحتوى، وهذا ما لا يقدمه القالب، فعلى سبيل المثال في الصفحة الرئيسية لمتجر إلكتروني سيكون لديك احتمال أول بأن الزائر غير مسجل، وعليه ستكون أيقونات سلة الشراء أو الحساب الشخصي فارغة، في حين لو كان مسجلاً فسيكون الاحتمال الثاني بأن السلة فيها رقم يوضح عدد السلع، وتكون صورة الحساب الشخصي تحمل الصورة الفعلية لصاحب الحساب على النحو التالي:
الحالة الأولى: يظهر رأس الصفحة في حالة عدم تسجيل العضو الزائر، فلا تظهر أي منتجات محتملة في سلة الشراء.

الحالة الثانية: بعد أن قام العضو الزائر بالتسجيل في الموقع يظهر عدد المنتجات في السلة بالإضافة إلى صورته الشخصية في أيقونة حسابي.

فوائد التصميم الذري

1. إعطاء نظرة تحليلة أكثر عمقًا لمحتويات الصفحة ولطريقة بنائها.
2. إمكانية تعديل وتغيير مكونات واجهة المستخدم بطريقة أكثر سهولة سواء على مستوى التصميم أو على مستوى البرمجة.
3. إمكانية إعادة استخدام المكونات والتحكم بها لأي مشروع جديد.
4. إنجاز أي نماذج مستقبلية Prototypes لاختبارات المستخدم بسهولة.

أنا مصمم مستقل هل أحتاج لاستخدام منهجية التصميم الذري؟

بالتأكيد يمكن استخدام منهجية التصميم الذري سواء كنت مصممًا في شركة أو مصممًا مستقلاً، فالعمل بمثل هذه المنهجية سيساعد على تسريع وتيرة العمل أيًا كان حجم المشروع، وسيؤسس بدوره لبناء مكتبة أنماط أو مكتبة عناصر واجهة مستخدم UI Elements تمنح مرونة كبيرة في العمل على نفس المشروع أو أي مشاريع مستقبلية.

ختامًا..

لمنهجية التصميم الذري Atomic Design فوائد عدة تتلخص في العمل بمرونة وسرعة، وسواء كان الاختيار أثناء العمل على منهجية التصميم الذري أو أي منهجية أخرى فإن تحليل أجزاء الواجهات إلى عناصر بدائية صغيرة أمر جدير بالتجربة، وسيضيف الكثير للمصمم والمبرمج أثناء العمل على المشاريع المختلفة.