شنبه, 15 خرداد 1395
علی رضاجو

طراحی اتمی (Atomic Design) چیست؟

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

آیا شما به عنوان یک طراح می توانید در یک زمان مناسب برای تمامی صفحات طراحی رابط کاربری را انجام دهید؟
آیا مطمئن هستید که این باز طراحی صفحات بازخورد خوبی خواهند داشت ؟

 

یکی از راه حل های پیشنهادی که با آن مواجه شدم طراحی اتمی ( Atomic Design ) معرفی شده توسط Brad Frost است که در ادامه به معرفی این روش می پردازم.

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

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

Brad Frost طی بررسی طبیعت پیرامونش والهام گرفتن از ساختار مواد ( جامد ، مایع ، گاز و ترکیب های ساده و مخلوط و..) سبک جالبی را معرفی کرده است ، مواد از ذرات اتم و از اتصال و پیوستگی این ذرات مولکول ها ، که آنها نیز به نوبه ی خود با یکدیگر ترکیبات پیچیده تری را به وجود می آورند و در نهایت تمامی مواد در جهان ما را ایجاد می کنند، تشکیل شده است.

همانند ماده ، شکل ظاهری و رابط کاربری یک سایت ( User Interface ) از اجزای کوچک تری ساخته شده است. این به معنای آن است که می توان شکل ظاهری و رابط کاربری را به قطعات و ذرات کوچکتری تقسیم کرد و در واقع شروع طراحی از طراحی اتم انجام پذیرد.

 

جدول تناوبی عناصر HTML معرفی شده توسط Josh Duck تفکیک بیشتری از عناصر اتمی طراحان وب را ارائه می دهد.

جدول تناوب عناصر HTML

 

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

طراحی اتمی یک متدولوژی برای طراحی است. اجزا تشکیل دهنده طراحی اتمی شامل پنج سطح است :

  1. اتم ( Atoms )
  2. مولکول (Molecules )
  3. اورگانیسم (Organisms )
  4. قالب  ( Templates )
  5. صفحات ( Pages )

پروسه ی طراحی اتمی بدین گونه است: اتم به مولکول، مولکول به اورگانیسم، اورگانیسم به قالب و قالب به صفحات.

طراحی اتمی وب

اجازه دهید هر مرحله را با جزئیات بیشتری بررسی کنیم.

 

 1. اتم ها (Atoms)

کوچکترین واحد تشکیل دهنده یک ماده است. با اعمال این موضوع بر رابط کاربری سایت ، می توان گفت که اتم ها ، همان تگ های HTML  هستند مثل ( عنوان فرم ها ، دکمه ها ، لینک ها و...)

اتم می تواند شامل عناصر انتزاعی بیشتری مثل رنگ ، فونت و حتی انیمیشین ها ( Motion Design ) باشند و مانند اتم در طبیعت نیز در صورتی که پیوندی بین این ذرات ایجاد نشود به تنهایی معنادار نخواهند بود.

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

 

2. مولکول ها (Molecule)

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

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

ساخت یک مولکول از اتم، این  موضوع را در ذهن  ترغیب می کند که "یک کار را انجام بده و آن را به خوبی انجام بده."

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

 نمونه طراحی مولکول وب

 

 

3. اورگانیسم (Organisms)

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

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

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

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

نمونه طراحی اورگانیسم وب

 

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

نمونه طراحی اورگانیسم

 

 

4.  قالب ها  (Templates)

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


نمونه طراحی اتمی قالب

 

5. صفحات (Pages)

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

صفحات  مرحله ای لازم و ضروری هستند چرا که اکثر تست های کاربردپذیری و تجربه کاربری کاربران در این مرحله انجام می پذیرد. 

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

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

 

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

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

طراحی اتمی یک متدولوژی مشخص برای پیاده سازی سیستم های طراحی را ایجاد می کند.

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

 

علی رضاجو

مشاور و طراح آزاد رابط و تجربه کاربری؛
با بیش از 10 سال سابقه فعالیت و همکاری با شهرداری تهران، روزنامه همشهری، روزنامه فرصت امروز، جی اس ام و مجموعه سایت های پیک برتر

irandoust 14651434691ب ظ_یکشنبهب ظ+0430E+04301خردادE_خرداد+0430Rخردادب ظ+0430
جالبه این روشی هست که من حدود دوساله دارم انجام میدم بدون اینکه بدونم اسمش چیه. در واقع به این نتیجه رسیدم برای اینکه بتونم امکان توسعه سریعتری رو برای صفحات فراهم کنم این روش دیزاین رو پیش بگیرم. ممنون از شما بابت این مقاله.
علی رضاجو 14651445671ب ظ_یکشنبهب ظ+0430E+04301خردادE_خرداد+0430Rخردادب ظ+0430
به نقل از irandoust:
جالبه این روشی هست که من حدود دوساله دارم انجام میدم بدون اینکه بدونم اسمش چیه. در واقع به این نتیجه رسیدم برای اینکه بتونم امکان توسعه سریعتری رو برای صفحات فراهم کنم این روش دیزاین رو پیش بگیرم. ممنون از شما بابت این مقاله.

بله دقیقا ، خود آقای Brad Frost هم به این موضوع اشاره کرده که حتما طراحان زیادی بدون شنیدن عنوان 'طراحی اتمی' هم، با این سبک آشنا بودن و تجربه کردن. ممنون از شما
يك روان شناس 14651600931ق ظ_دوشنبهق ظ+0430E+04301خردادE_خرداد+0430Rخردادق ظ+0430
مطلب بسيار جالبى بود
دارم سعى ميكنم يك مدل روان شناختى براش پيدا كنم
+1 علی رضاجو 14652258781ب ظ_دوشنبهب ظ+0430E+04301خردادE_خرداد+0430Rخردادب ظ+0430
به نقل از يك روان شناس:
مطلب بسيار جالبى بود
دارم سعى ميكنم يك مدل روان شناختى براش پيدا كنم

مرسی ، خوشحال میشیم دستاوردها و نتایج تحقیقت رو با ما به اشتراک بزاری
فاطمه 14689955301ق ظ_چهارشنبهق ظ+0430E+04301تیرE_تیر+0430Rتیرق ظ+0430
ممنون ، عالی بود .
به نظر من اکثر پیاده سازان کد برای سایتهای بزرگ این روش رو خواسته یا ناخواسته پیش میگیرند ، اما چیزی که جالب بود اینکه خیلی خوب به صورت یه اصول معرفی شده و اگر بخوایم که طبق همین اصول حتی روی کاغذ بیاریم صفحات رو خیلی بهتر می تونیم نتیجه بگیریم .
بهنام محمدی 14702403011ب ظ_چهارشنبهب ظ+0430E+04301مردادE_مرداد+0430Rمردادب ظ+0430
ممنون مطلب خوب و جالبی بود.
ابن احمد 14814472881ب ظ_یکشنبهب ظ+0330E+03300آذرE_آذر+0330Rآذرب ظ+0330
سلام, آیا هیچ راهی هست که من به این کتاب دسترسی پیدا کنم. ما که امکان خرید را نداریم.
مهران دهقانی 14876632470ق ظ_سه شنبهق ظ+0330E+03300اسفندE_اسفند+0330Rاسفندق ظ+0330
خیلی مطلب جالبی بود. خوشم اومد.
+1 اشکان عاشوری 15263971380ب ظ_سه شنبهب ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتب ظ+0430
بسیار عالی و ممنون از شما. جالبه خیلی هامون اینکارو می کردیم در عین حالی که اسمی براش نداشتیم. خوشحالم که از این به بعد میتونم براش اسمی هم داشته باشم

You have no rights to post comments