طراحی اتمی | Atomic Design

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

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

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

طراحی اتمی دقیقا چیه؟

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

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

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

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

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

اتم‌ها(Atoms)

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

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

درست مثل اتم‌های موجود در طبیعت، به تنهایی مفید نیستن و باید اونها رو ترکیب کرد تا مورد استفاده قرار بگیرن.

ملکول‌ها(Molecules)

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

برای مثال باکس‌ جستجو رو در نظر بگیرین. آیکون، متن و دکمه هر کدوم یک اتم جدا هستن که ما میتونیم این اتم‌ها رو به روش‌های مختلف با هم ترکیب کنیم و از اونها استفاده کنیم و هرکدوم در جاهای مختلف کارایی و مفهوم متفاوتی داشته باشن. زمانی که این اتم‌ها با هم ترکیب بشن مولکول باکس جستجو بوجود میاد.

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

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

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

برای مثال منوی همبرگری نمونه ای از یک ارگانیزم هست. اون شامل لوگو، مشخصات کاربر، مولکول جستجو، دکمه ثبت نام و... هست.

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

الگوها(Templates)

این بخش دیگه شباهت زیادی به جهان مولکولی و شیمی نداره و نمیشه با چیزی مثالش زد ولی برای طراحی اتمی بخش مهمی هست.

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

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

قالب همون wireframe هست که بالاخره در این بخش از کار ما میتونیم این مرحله رو با کارفرما به اشتراک بگذاریم و با توجه به نیاز‌ها و خواسته‌ها، جزئیاتی رو اضافه یا کم کنیم تا به طرح نسبتا نهایی برسیم.

صفحات(Pages)

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

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

جمع بندی

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

امیدوارم حالا موفق شده باشم و مفهوم جمله برد فراست که اول مقاله بهش اشاره شد رو رسونده باشم!