طراحی اتمی (Atomic Design) در رابط کاربری

مفهوم طراحی اتمی

شیوه طراحی اتمی شیوه‌ای در دیزاین است که توسط Brad Frost ابداع شده است. معمولا در طراحی 2 شیوه متفاوت وجود دارد:

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

طراحی اتمی چیست؟

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

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

چرا طراحی اتمی؟

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

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

عناصر طراحی اتمی

طراحی اتمی روشی برای ایجاد یک سیستم طراحی است. 5 عنصر اصلی برای ساخت این سیستم وجود دارد:

1. اتم
2. مولکول
3. ارگانیسم
4. قالب
5. صفحات

اتم‌ها

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

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

مولکول

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

ارگانیسم

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

قالب یا الگو

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

صفحات

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

مزایای طراحی اتمی

طراحی اتمی یک شیوه مهم در دیزاین است که در بسیاری از اوقات ما به صورت پیشفرض بر مبنای آن عمل می‌کنیم. در این نوع از طراحی به صورت کاملا سیستمی پیش می‌رویم. به همین دلیل امکان مقیاس‌پذیری در آن وجود دارد. سیستمی بودن Atomic Design مزایای را به همراه می‌آورد:

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

چک لیست طراحی اتمی

برای اینکه بتوان در طراحی اتمی به نتیجه مطلوب رسید باید یک چک لیست تهیه کنیم:

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

سخن پایانی..

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

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