راهنمای طراحی اتمی (Atomic Design)

طراحی اتمی راهی است که تیم‌های طراحی می‌توانند محصولات جدیدی را با رویکرد حساب شده و کنترل شده ایجاد کنند. اما چرا چنین روندی وجود دارد؟ طراحی اتمی در صنعت طراحی UX بسیار ارزشمند است و طراحان در سراسر جهان در حال یادگیری شیوه‌ای حساب شده برای طراحی چیزهایی جدید هستند، حال طراحی اتمی به چه معناست؟

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

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

در نهایت هر اتم چیزی به کل اضافه می‌کند، آنها چیزهای کوچک منفرد را می‌سازند و این المان‌های کوچک که مولکول‌ها را می‌سازند با هم ترکیب شده و موجودات را شکل می‌دهند.

حال که متوجه شدیم طراحی اتمی چیست بیایید بررسی کنیم چرا باید از آن استفاده کنیم و چه مزایایی برای ما دارد؟

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

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

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

2.ایجاد style guideها آسان است

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

3.درک چیدمان آسان‌تر است

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

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

4.کدها سازگارتر هستند

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

برای مثال، اگر شخصی سایتی را بدون استفاده از Atomic Design ایجاد کند و مثلاً به دکمه زرد احتیاج داشته باشد، باید کل سایت را جستجو کند تا المان موجود را پیدا کند. اگر وجود داشته باشد، آنها باید آن کد را در نمونه جدید کپی و جایگذاری کنند. اگر هیچ دکمه زردی وجود نداشت، باید یک دکمه جدید ایجاد کنند. با وجود طراحی اتمی، به راحتی می‌توان از لیست اتم‌ها برگشت و آن دکمه زرد را پیدا کرد.

5.طراحی پروتوتایپ سریعتر است

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

6.به روزرسانی و ویرایش سایت و صفحات آسان‎‌تر است

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

به طور مشابه، حذف بخش‎‌هایی برای ویرایش یا اطلاح نیست راحت‌تر است.

7.بدون نیاز به تمرکز به pixel-perfect designs

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

در عوض آنها می‌توانند به سادگی فهرست اتم‌های موجود را بررسی کرده و در صورت لزوم آنها را برای ایجاد اتم های جدید تغییر دهند.

8.ساختار ماژولارتر برای فایل‌ها

اگرچه طراحی اتمی در مورد نشانه گذاری (HTML) بیشتر رایج است، اما از این تکنیک‌ها همچنین می‌توان برای CSS ، جاوا اسکریپت یا هر زبان دیگری که برای ایجاد سایتی با ساختار ماژلار استفاده می‌شود بهره برد.

9.کاهش اجزای سایت

به خاطر وجود یک چارچوب کلی برای اتم‌ها(المان‌های سایت) تعددی در موارد رخ نمی‌دهد.

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

10. قابلیت جستجو در Pattern Lab

این مورد در اصل مزیت طراحی اتمی نیست، بلکه ابزاری است که توسط برد فراست (که اصطلاح طراحی اتمی را ابداع کرد) و دیو اولسن برای کمک به این روند ایجاد شده است.

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

پس از پرداختن به تعریف طراحی اتمی و اینکه چرا باید از آن استفاده کنیم نوبت آن است المان‌های آن را تعریف و بررسی کنیم:

اتم‌ها(Atoms)

در مورد اتم‌ها همه ما در شیمی مطالعه کرده‌ایم، کوچک‌ترین جز هر چیز که به موجودیت کوچک‌تری تجزیه نمی‌شود مگر آنکه مفهومش را از او بگیریم.

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

ملکول‌ها(Molecules)

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

به همین ترتیب، مولکول‌ها در رابط کاربری گروهی از عناصر هستند که با هم کار می‌کنند. برای مثال اگر برچسب، دکمه و ورودی جستجو را با هم قرار دهیم، مولکولِ فرم جستجو را بدست می‌آوریم. برای بدست آوردن اجزای متفاوت اتم‌ها را کنار یکدیگر می‌چینیم و از آنها موجودیت یا ملکول‌های جدید خودمان را می‌سازیم.

موجودیت‌ها(Organisms)

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

الگوها(Templates)

مقایسه کردنمان با شیمی در اینجا به پایان می‌رسد.

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

در این مرحله الگوها ساختار محتوای طرح را بیان کرده و اجزاء را در یک طرح قرار می دهند و طرح‌ها برای ایجاد صفحات به کار می‌روند.

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

صفحات(Pages)

صفحات نشان می دهند که UI چگونه به نظر می رسد وقتی همه چیز در جای خود قرار می گیرد.

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

جمع‌بندی

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

با ایجاد یک زبان مشترک برای تیم توسعه محصول، می‌توان با روش طراحی اتمی از بروز این ناهماهنگی‌ها جلوگیری کرد.

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

در این مورد Brad Frost می‌گوید:
"... مجموعه ای جامع از قطعات و قطعاتی که رابط شما را تشکیل می دهد."

استفاده از طراحی اتمی به عنوان ابزاری برای طراحان و توسعه دهندگان عمل می‌کند - به همه این امکان را می دهد که در طراحی و تعریف محصول شرکت کرده و عناصر را یکدست و با کیفیت بالا نگه دارند.