اگه تا امروز با طراحی رابط کاربری کار کرده باشی، احتمالا با چالشهایی مثل نظمدادن به کامپوننتها، ساختن یک دیزاین سیستم قابلتوسعه، و هماهنگکردن طراحی در صفحات مختلف روبهرو شدهاید.
طراحی روشی هست که به طراحان UI/UX کمک میکند رابطهای کاربری را بهصورت سیستممند، قابلاستفاده مجدد و مقیاسپذیر طراحی کنند.
در این مقاله میخواهیم ببینیم Atomic Design چیست، چه کاربردی دارد، از چه بخشهایی تشکیل شده و چرا برای طراحی محصول اهمیت زیادی دارد.
Atomic Design یک متدولوژی طراحی رابط کاربری هست که در این روش، اجزای رابط کاربری مثل عناصر یک موجود زنده در نظر گرفته میشوند که از سادهترین بخشها شروع شده و به مرور به ساختارهای پیچیدهتر تبدیل میشوند.
به زبان ساده، Atomic Design یعنی:
رابط کاربری را به اجزای کوچکتر تبدیل کنیم،
اونها رو بهصورت منطقی کنار هم قرار دهیم،
و در نهایت یک سیستم طراحی منظم و قابل توسعه بسازیم.
این روش بهخصوص در طراحی Design System، کامپوننتهای رابط کاربری و محصولات بزرگ و مقیاسپذیر بسیار کاربردی است.
در پروژههای طراحی، یکی از بزرگترین مشکلات این هست که هر صفحه یا هر بخش از محصول، کمی متفاوت از بخش دیگر طراحی بشه. نتیجه چی میشه؟یک رابط کاربری ناهماهنگ و نامنظم.
بنابراین استفاده از Atomic Design باعث یکپارچگی٬ جلوگیری از تکرار میشود و همچنین ساخت و نگهداری Design System را راحت تر میکند و همکاری بین طراح و توسعه دهنده رو بهتر و سرعت طراحی صفحات جدید رو بالاتر میبرد. اگه بخواهیم خیلی دقیقتر نگاه کنیم، Atomic Design در واقع یکی از پایههای مهم طراحی محصول مدرن است.
Atomic Design از ۵ لایه اصلی تشکیل شده :
مثل:
دکمه
آیکن
رنگ
فونت
لیبل
مولکولها در اتمیک دیزاین از ترکیب چند اتم ساخته میشه:
فیلد جستجو + دکمه سرچ
لیبل + input + پیام خطا
آواتار + نام کاربر + زمان
مولکولها لایههایی هستند که یک بخش کاربردی از رابط کاربری را شکل میدهند.
ارگانیسمها از ترکیب چند مولکول و اتم ساخته میشوند و بخشهای بزرگتر رابط کاربری را تشکیل میدهند:
هدر سایت
کارت محصول
فرم ثبتنام
ناوبری اصلی
در این مرحله هنوز محتوای نهایی وارد نشده، اما جای بخشهای مختلف مشخص است.
جای هدر
جای سایدبار
جای محتوای اصلی
جای فوتر
صفحات، نسخه نهایی قالبها هستند که با محتوای پر میشود که طراح میتواند ببیند کل سیستم در حالت واقعی چگونه دیده و استفاده میشود.
خیلیها این دو مفهوم را با هم اشتباه میگیرند. در واقع Atomic Design یک روش برای ساختن اجزای UI هست، اما Design System یک سیستم کامل از قوانین، کامپوننتها و استانداردهای طراحی میباشد.
به صورت سادهتر یعنی:
Atomic Design = متدولوژی ساخت
Design System = پیاده سازی محصول نهایی همراه با قوانین
Atomic Design یکی از بهترین روشها برای ساخت یک Design System منظم میباشد.
اگه بخواهیم خلاصهتر نگاه کنیم، مهمترین مزایای طراحی اتمیک اینها هستند:
افزایش سرعت طراحی
کاهش خطا و تناقض
قابلیت استفاده مجدد از اجزا
مستندسازی بهتر طراحی
همکاری راحتتر با تیم توسعه
مقیاسپذیری بالا برای محصول
ساخت Design System حرفهایتر
بعضی از دیزاینرها موقع استفاده از این روش بیش از حد پیچیدهاش میکنند و همه چیز را مجبور میشوند در قالب اتم ببینند و بین Atomic Design و Design System تفاوت قائل نمیشوند. در واقع هدف از استفاده Atomic Design سادهتر و منظم کردن فرآیند طراحی هست و سختتر کردن آن.
Atomic Design یا طراحی اتمیک یکی از مهمترین متدولوژیها در دنیای طراحی UI/UX هست که به طراحان کمک میکند اجزای رابط کاربری را بهصورت اصولی، قابلاستفاده مجدد و مقیاسپذیر بسازند.
