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

  این مقاله را میتوانید در مدت زمان 4 دقیقه مطالعه کنید

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


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

 

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

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

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

این روش Atomic Design نامیده می شود زیرا ایده اصلی آن در شیمی و مطالعه ترکیب ماده بنیان است.

 

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


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

طراحی اتمیک

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

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

  • اتم ها
  • مولکول ها
  • موجودات زنده
  • الگوها
  • صفحات

طراحی اتمیک

اتم ها

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

 

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

مولکول ها

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

 


برای درک بهتر اهمیت طراحی رابط کاربری مقاله ” اهمیت طراحی محصول در رابط کاربری” را مطالعه کنید.


موجودات زنده

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

 

الگوها

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

 

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

صفحات

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

 

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

 

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

استفاده از طراحی اتمی

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

 

نتیجه گیری

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

منبع: سایت https://xd.adobe.com/

 

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

شاید به این مطالب نیز علاقه مند باشید.

تایپوگرافی

اصول تایپوگرافی در طراحی UI

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

الگوهای طراحی رابط کاربر (UI)

الگوهای طراحی رابط کاربر (UI)

تا به حال توجه کرده اید که اکثر محصولات نسبتاً مشابهی دارند؟ این سایتها دارای یک نوار بالای ناوبری هستند. برنامه ها از نوارهای زبانه ای استفاده می کنند. اکثر…

ابزار طراحی ui

۱۰ ابزار طراحی UI که همیشه به آن نیاز دارید!

User interface (رابط کاربری) که ما آن را به ui  میشناسیم در واقع رابط میان کاربران و محصولات سیستم است. در کل ظاهر سایت شما که کاربران با آن رابطه…

0 0 رای
امتیازدهی به مقاله
دنبال کردن
با خبر کردن از
guest
0 دیدگاه
بازخورد داخلی
دیدن همه نظرات

تاییدیه ها

تهران - امیرآباد، دانشکده فنی دانشگاه تهران، ساختمان مکانیک جدید واحد ۱۱۴

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

۱ میلیون تومان تخفیف شرکت در دوره دیجیتال مارکتینگ جامع

۸۵ ساعت آموزش صفر تا صد بازاریابی دیجیتال غیرحضوری

تعداد محدود
کد تخفیف :   dm30welcome
close-image

کد تخفیف نمیخوای؟

اگه میخوای کد تخفیف شرکت در دوره‌ها، وبینارهای رایگان، بهترین مقالات آکادمی آمانج رو از دست ندی ایمیلت رو این زیر وارد کن!
همین الان عضو شو
close-link
من اینجام