۱۰ دلیل برای استفاده از طراحی اتمی

چندی قبل در رابطه با طراحی اتمی در وبسایت مقاله‌ای منتشر شد، در این مقاله راجع به اینکه طراحی اتمی چیست و چگونه می شود آن را پیاده سازی کرد صحبت کردیم،‌ امروز می خواهیم بدانیم که دلایل‌مان برای استفاده از طراحی اتمی چیست و چرا این طراحی برای ما مفید است؟

اگر در انجمن های مربوط به موضوع توسعه فرانت اند شرکت کرده باشید ممکن است نام طراحی اتمی به گوشتان خورده باشد. طراحی اتمی، متدلوژی است که در آن یک وبسایت به اجزای بسیار کوچکتر و پایه تر شکسته می شود و از این تکه ها برای استفاده دوباره در وبسایت به کار گرفته می شود.

استفاده از این طراحی فواید بسیاری را با خود به همراه دارد و ما در این مقاله قصد داریم تا شما را با ۱۰ مورد از این فواید آشنا کنیم.

۱. شما می‌توانید اجزا را با همدگیر ترکیب کنید و تطبیق دهید

با شکستن المان ها به قطعات کوچکتر (اتم ها در طراحی اتمی) فهمیدن اینکه از کدام مورد یا بخش وبسایت می توانید استفاده مجدد کنید بسیار ساده است. همچنین اینکار باعث می شود تا بهتر متوجه آن شوید که کدام المان ها با همدیگر می توانند ترکیب شوند تا در نهایت مولکول یا ارگانی را بسازند. 

در تصویر بالا می توانید شاهد آن باشید که چگونه المان های ثابت در شکل های مختلف استفاده شده‌اند.

برای مثال: تصویر کنید که در یک وبسایت تنها از ۵ اتم استفاده شده است، یک تصویر کوچک، یک تصویر بزرگ، یک پاراگراف، یک لیست آیتم و یک لینک. شما به سادگی می توانید با در دست داشتن چنین مواردی یک برگه قابل استفاده را بسازید. اهمیت تکرار کردن المان ها و تطبیق دادن آنها باعث می شود که بتوانید مولکول ها را بسازید.

۲. ساختن راهنمای استایل ساده است

اگر وبسایتی مطابق با قواعد و طراحی اتمی ساخته شود، اتم ها و مولکول های استفاده شده در طراحی می توانند برای شما یک راهنمای استایل درست کنند. حتی برای وبسایت هایی که به صورت خودکار طراحی نشده اند استفاده کردن از اجزای پایه‌ای در صفحات وبسایت بسیار ساده است و در چنین حالتی نیز می توانید طراحی مورد نظرتان را پیاده سازی کنید. البته یادتان باشد که برای پیاده سازی طراحی اتمی همیشه بهتر است از ابتدای کار چنین طراحی را انجام دهید نه بعد از انجام پروژه. 

۳. فهمیدن آسان از لایه بندی

کدهای وبسایتی که به صورت خودکار نوشته شده اند خوانایی بسیار بهتری نسبت به کدهای وبسایتی که از راه های قدیمی درست شده است، دارند. این مسئله تنها در زمان طراحی وبسایت واقعیت ندارد بلکه بعدها نیز که خواستید وبسایت را بازبینی کنید و یا تغییر کوچکی در آن اعمال نمایید این مسئله همچنان مهم است. بخاطر فایده‌ای که در مورد دوم گفته شد و توانایی مستندسازی بهتر اتم ها، مولکول ها و ارگان ها به سادگی می توان متوجه شد که هر قطعه کدی چه چیزی را نمایش می دهد. یکی دیگر از فواید این مسئله برای تحویل پروژه به توسعه دهندگان جدید است. توسعه دهندگان جدید ممکن است با دیدن کدهای پیچیده و شلخته، سرخورده شوند اما در طراحی اتمی توسعه دهندگان می توانند بهتر کدها را بخوانند و آن ها را تجزیه و تحلیل کنند.

۴. کدها سازگاری بیشتری دارند

در طراحی اتمی شما از اتم های از پیش تعریف شده برای طراحی لایه های وبسایت استفاده می کنید، اینکار به متوجه شدن شما برای اینکه کدام بخش از وبسایت با چه اتم هایی ساخته شده است بسیار کمک می کند. در نهایت فایده چنین کاری این است که کدهای تکراری بیهوده را کمتر قرار می دهید.

برای مثال، وقتی کسی وبسایتی را طراحی بکند و در آن از طراحی اتمی استفاده نبرد، زمانی که بخواهد از یک دکمه قرمز استفاده کند باید تمام طراحی را مشاهده کند تا در نهایت بتواند یک دکمه قرمز را که قبلا استفاده کرده، پیدا کند. اگر چنین المنتی نیز نداشته باشند باید آن را از ابتدا بسازند. در چنین حالتی اگر از طراحی اتمی استفاده کنید ساده تر می توانید لیست اتم های استفاده شده در صفحه را مشاهده کنید و آن چیزی که می خواهید را پیدا نمایید.

پروسه پیدا کردن یک اتم در طراحی اتمی با استفاده از ابزار Pattern Lab بسیار آسان تر نیز خواهد شد. Pattern Lab مجموعه ای از ابزارها است که طراحی اتمی را برای ما ساده تر می کند. در مثال ما Pattern Lab یک کادر جستجو را قرار می دهد که با آن می شود ساده تر دکمه قرمز مورد نظرمان را بیابیم.

۵. بدون نیاز به تمرکز در طراحی جزء به جزء المنت ها

ایده موجود پشت طراحی اتمی این است که با استفاده از اتم بلوک های ساختمان مربوط به وبسایت را بسازیم این با چیزی که برخی توسعه دهندگان از اتم ها استفاده می کنند فرق می کنند. برخی از توسعه دهندگان از تعداد زیادی اتم تنها برای ساخت یک چیز مشابه استفاده می کنند. بجای اینکار آنها می توانند لیستی از اتم های موجود را دریافت کنند و از ترکیب آنها اتم جدیدی بسازند. 

یک مثال بسیار خوب برای این مسئله می تواند بخش عنوان وبسایت باشد. تصور کنید که یک سازنده در وبسایت چندین عنوان دارد که باید استفاده کند، عنوان اصلی وبسایت، زیر عنوان وبسایت و عنوان پاراگراف ها. در چنین حالتی هیچ الزامی نیست که آنها بیایند و از سه عنوان مختلف استفاده کنند، بلکه می توانند با المان های موجود عناوین را تنها تغییری ساده دهند. به این شکل نتیجه لازمه‌ای که می خواهند را دریافت خواهند کرد.

۶. نمونه سازی سریع‌تر

داشتن یک لیست از اتم ها حتی قبل از انجام طراحی به این معنی است که شما می توانید برگه های خودتان را سریع‌تر و ساده‌تر نمونه سازی کنید. تمام کاری که نیاز است، برداشتن المنت ها و تلفیق آنها به شیوه مناسب خود است. نمونه اولیه همیشه می تواند در حین ساخت وبسایت تغییر بکند پس قابلیت شخصی سازی و انعطاف پذیری بالایی است.

۷. بروزرسانی و حذف بخش هایی از وبسایت ساده تر است

همانطور که تمام بخش های داخل طراحی اتمی از اتم ها گرفته تا مولکول ها و ارگان ها، بروزرسانی بخش بخش این آیتم ها بسیار ساده است. از طرفی دیگر حذف هرکدام از المان های ناخواسته ای که بحثش شد به سادگی امکان پذیر است.

۸. ساختار فایل های ماژولار

درست است که طراحی اتمی در ساخت فایل های نشانه گذاری HTML مرسوم و محبوب است اما از چنین تکنیک دستور نوشتن ماژولاری که در آن می شود کدها را باری دیگر استفاده کرد می توان در CSS و JavaScript نیز بهره برد. 

من به شخصه از طراحی اتمی در ساخت فایل های CSS خود استفاده کرده‌ام و از این رویکرد نفع های زیادی نیز برده ام. درکنار این موارد اگر فایل های HTML , CSS و جاوا اسکریپت را نیز درست مانند اتم ها در نظر بگیریم، زمان نیاز به انجام تغییرات در فایل ها متوجه می شویم که باید دنبال کدام فایل بگردیم.

۹. اجزای کمتر

اگر یک سازنده قبل از ساخت وبسایت المان ها در دسترس خود را مشاهده کند و با تک تک آنها سر و کار داشته باشد مطمئن می تواند در آینده اجزای مناسب تری را برای وبسایت خلق کند. زمانی که شما یک عنوان با اندازه ۴.۵em در اختیار دارید و می خواهید درجای دیگری از عنوانی با اندازه ۴em استفاده کنید می توانید با استفاده از همان عنوان اول کارتان را انجام بدهید پس نیازی نیست از ابتدا جزء دیگری به وبسایت اضافه کنید. نتیجه انجام کارها مبتنی بر این قواعد باعث می شود که تعداد اجزای وبسایت کمتر باشد.

۱۰. کاوش Pattern Lab

شاید این یک فایده حساب نشود اما باید بگویم ابزار Pattern Lab که توسط توسعه دهنده های Brad Frost و Dave Olsen ساخته شده است پروسه‌ی انجام طراحی مبتنی بر این متدلوژی را بسیار آسان می کند. استفاده از این ابزارهای برای توسعه دهندگانی که از ابزار mustache استفاده می کنند بسیار ضروری و مفید است. این ابزار با موبایل سازگاری دارد و دارای قطعه کدهای بسیاری برای بخش های مختلف وبسایت است.

نسخه ارجینال این ابزار با استفاده از PHP نوشته شده است اما دو ورژن Node دیگر نیز وجود دارد که یکی برای gulp و دیگری برای Grunt استفاده می شود. پیشنهاد می کنم که برای بیشتر متوجه شدن از این ابزار و نگاهی به نقش آن در طراحی اتمی به وبسایت Pattern Lab و دموهای آن سری بزنید. 

منبع