برای سال‌ها سال دستورالعمل ها و سبک‌ها و استایل‌های متعددی با کمک ابزارهای متنوعی پیاده سازی شده اند که بتوان طرح‌های پیاده سازی شده، آسان‌تر و قابل فهم‌تر شوند. برای همین ابزار‌ها و کتابخانه‌های متعدد توسعه مانند bootstrap, semantic-ui, foundation و ... منتشر شده‌اند که کار توسعه و برنامه نویسی را آسان‌تر کنند.
حال با وجود این ابزار‌ها باید راهی یافت که ارتباط میان طراحان و برنامه نویسان آسان‌تر شود و کار‌ها تیم طراحی و تیم توسعه را روان‌تر و آسان‌تر کنیم.
دقیقا اینجاست که مفمومی به نام اتمیک دیزاین مطرح می‌شود که نتیحه این دیزاین، خلق سیستم یکپارچه با عناوین دیزاین سیستم یا uikit میباشد.
فرایندی، شامل ۵ مرحله مجزاست که هدفشان ایجاد سیستمی یکپارچه، متفکرانه با سلسله مراتب مرتب میباشد.
این سلسله مراتب مرتب دقیقا از مفاهیم شیمی استخراج شده است که برای ساخت همچین سیستم یکپارچه‌ایی کمک می‌رساند.
حالا به معرفی هر بخش می‌پردازیم:
در شیمی میدونیم که اتم به کوچکترین واحد سلول اشاره می‌کنه یا به عبارت دیگه اتم کوچکترین واحد ماده تشکیل دهنده یک عنصر شیمیایی است.
در طراحی نیز اتم‌ها اساسی و پایه ترین اجزا این سیستم یکپارچه هستند و معمولا شامل دکمه‌ها، لیبل‌ها و خطوط و نماد‌ها و فیلد‌ها و ... می‌باشند.
مولکول‌ها گروهی از اتم‌ها هستند و به یکدیگر متصل می‌شوند تا واحد منسجمی را ایجاد کنند.
با ترکیب مولکول‌ها با یکدیگر ارگان‌ها ساخته می‌شوند و طبیعتا اجزا و عناصر زنده‌ی بزرگتری را ایجاد می کنند مانند فرم ورود و ثبت نام در کنار‌هم.
قالب‌ها یا تمپلیت بخش‌هایی هستند که ارگان‌ها را به هم وصل می‌کنند و یک طرح کامل را ایجاد می‌کند. برای مثال به ترکیب ارگان فرم جستجو در سکشن ابتدای سایت به همراه ارگان هدر یا منوی اصلی، یک قالب یا تمپلیت در رابط کاربری ایجاد می‌شود .
صفحات، بالاترین سطح میزان وفاداری را دارند و قابل لمس ترین بخش سیستم یکپارچه را فراهم می‌کنند.
در این قسمت است که محقق کارایی سیستم پکپارچه طراحی شده را مورد بررسی و آزمایش قرار می‌دهد.
استفاده از طراحی اتمی در عین سادگی، دشواری های خود را نیز دارد . بصورت کلی این شاید داخل ذهنتان باشد که اجزا را به ترتیب باهم ترکیب می‌کنید و اون سلسله مراتب را برای طراحی صفحات اجرا می‌کنید ولی دشواری این سیستم، دریافت و استخراج نیازمندی‌هایی است که در مراحل اولیه ( اتم و مولکول) به انها در محصول/محصولات شما وجود دارد، میباشد که با طی کردن این سلسله مراتب ( از اتم به صفحه) تمامی نیازمندی‌های محصولی برای ساخت اون سیستم یکپارچه استخراج یا پیش بینی گردد.
مهمترین نکته در این سیستم، پیمودن این سلسله مراتب از اتم به صفحه است یعنی زمانی که در قسمت صفحه نیازمندی جدید کشف شد باید از ابتدای کار اتم ها را اپدیت کنید و سپس مولکول ها و تا ... انتها پیش روید.
در اصل به مزایای طراحی اتمی و ایجاد سیستم یکپارچه می‌پردازیم :
۱- یکبار طراحی کنید و همیشه از آن استفاده کنید :
با استخراج اتم و ترکیب انها باهم میتوانید یکبار کامپوننت‌های اساسی خود را طراحی کنید و هر جایی در طراحی خود به راحتی استفاده کنید.
۲- طراحی یک سیستم راهنمای طراحی - style guide:
وجود سیستم یکپارچه توسط سلسله مراتب طراحی اتمی، باعث میشه که شما اصول طراحی و استاندارهای خود را قبل از پیاده سازی استخراج و تعیین کنید و بعد از طراحی صفحات از سلایق شخصی دوری کنید و طبق استاندارهای تعریف شده در سیستم پیش روید.
۳- قابلیت درک پذیری توسط تیم توسعه:
یعنی تیم توسعه دهنده شما استوری طراحی صفحات یا تمپلیت‌های شمارا درک می‌کند و با چیدمان این سلسله مراتب می‌تواند چیدمان وب سایت شما را به آسانی هر چه تمام‌تر انجام دهد.
۴- به روزرسانی ساده :
یعنی با اپدیت یک اتم می‌توان ان را در کل سیستم تغییر داد و دیگر نیازی به تغییر در هر جایی از طراحی را کنترل می‌کند.
۵- نمونه سازی اولیه طراحی:
با وجود این سیستم شما لیستی از اتم‌ها و مولکول‌ها را در اختیار دارید و به سادگی میتوانید نتیجه طراحی را در ذهن خود تصویر سازی کنید.
از اینکه نوشته من را خواندید ممنونم و امیدوارم دانش طراحی ارزشمندی کسب کرده باشید.
منابع :
https://atomicdesign.bradfrost.com/chapter-2/
