طراحی اتمی روشی است که توسط برد فراست ایجاد شده است و به دنبال ارائه هدفی در سیستم های طراحی رابط کاربری عمدی تر و با نظم و سلسله مراتب صریح است.
جهان از یک مجموعه ثابت از “عناصر اتمی” تشکیل شده است که برای بسیاری از ما به عنوان جدول تناوبی عناصر شناخته شده است. این عناصر عناصر سازنده همه چیزهای اطراف ما هستند.
در شیمی ، این عناصر اتمی دارای خصوصیات ثابتی هستند که آنها را تعریف می کند. اکسیژن و هیدروژن به خودی خود اتمهایی با خواص مستقل هستند. اما وقتی این عناصر ترکیب می شوند ، مولکولهایی ایجاد می کنند که خصوصیات منحصر به فرد خود را از اتمهای موجود در آنها به دست می آورند. در مورد هیدروژن و اکسیژن ، جفت شدن دو اتم هیدروژن با اکسیژن ، چیزی را ایجاد می کند که به عنوان مولکول آب می شناسیم.
همان طور که از اسم atomic Design پیداست این مدل از طراحی الهام گرفته شده است از شیمی و ما نیز رابط کاربری خود را به اجزای جزی تر تقسیم میکنیم و به اصطلاح از پایین به بالا شروع به طراحی میکنیم این همان اصول طراحی اتمی است.
پنج مرحله متمایز از روش طراحی اتمی وجود دارد که سه مرحله اول براساس معادل های آن ها در دنیای شیمی مدلسازی شده است. هر مرحله بر اساس مرحله قبلی ساخته می شود ، و به عنوان مجموع اقلام مراحل قبل عمل می کند.
درست مثل شیمی ، اتم ها کوچکترین عناصر سازنده سیستم ما هستند. ما در طراحی به جای اتم هایی مانند اکسیژن یا هیدروژن ، دکمه ها ، ورودی ها ، برچسب ها ,پالت های رنگی ,انیمیشن هاو سایر عناصر کوچک را داریم که در طول طراحی ما مورد استفاده قرار می گیرند. آیکونوگرافی در این دسته قرار می گیرد ، چه یک نماد منو باشد ، چه آواتار ، زیرا عناصر کوچکی هستند که برای تشکیل مرحله بعدی – مولکول ها ، کنار هم قرار می گیرند.
در مرحله مولکول ، ما عناصر طراحی اتمی مستقل خود را که هر کدام دارای ویژگی ها ، سبک ، قالب خاص خود هستند ، می گیریم و شروع به جمع آوری آنها در گروه های جدید می کنیم. به عنوان مثال اتم آواتار ما را در نظر بگیرید. اگر اتم آواتار را با نام و برچسب عنوان ، عناصر اتمی دیگر ترکیب کنیم ، می توانیم یک مولکول نمایه ایجاد کنیم. هر اتم خصوصیات منحصر به فرد خود را در گروهی حمل کرده است که به تنهایی دارای خصوصیات متمایز است.
درست مثل شیمی ، ما می توانیم اتم های مشابه را به روش های مختلف با هم ترکیب کنیم و مولکول های منحصر به فردی برای استفاده در طراحی خود ایجاد کنیم. اگرچه در این مرحله گروه بندی ها هنوز مجموعه های نسبتاً ساده ای هستند.به مولکول ها همان Component هم میگویند.
ارگانیزم ها متشکل از چندین مولکول مختلف یا همسان می باشند که یه بخش کلی و کاربردی از صفحه را تشکیل میدهند. همان طور که در صورت پایین میبینید ، منو از چندین مولکول ساخته شده است. به طور مثال ، بخش نمایش مطالب مرتبط که شامل چند مطلب است و هر مطلب یک مولکول است که خود از اتم هایی مثل نام مطلب ، تصویر مطلب تشکیل شده است.
تمپلت یا همان الگو یا قالب اولین مرحله از روش طراحی اتمی است که با یک مرحله در جهان مولکولی همسو نیست ، اما برای طراحی اتمی مهم است. یک الگوی جایی است که ما شروع به تربیت ارگانیزم ها و سایر عناصر خود می کنیم تا یک طرح منسجم داشته باشیم.شما در مرحله ارگانیزم مشاهده کردید که عناصر شروع به تشکیل بلوک های قابل استفاده از محتوا می کنند و این عناصر شروع به جمع شدن در قالب الگویی از بلوک ها می کنند.
که می توانند در صفحات مختلف مورد استفاده قرار گیرند. الگوها را به عنوان طرح اصلی برای طراحی صفحه پایان یافته ما در نظر بگیرید. در این مرحله ، آنها هنوز هم عناصر هستند و حاوی داده های واقعی نخواهند بود – دقیقاً مانند یک قاب سیم.با استفاده از ارگانیزم ما برای صفحه نمایه ، الگوی ما اکنون شامل یک ارگانیزم آماری است که برخی جزئیات مربوط به نمایه را نشان می دهد این می تواند اقدامات انجام شده ، سطح مهارت و غیره باشد. همچنین یک ارگانیزم تماس وجود دارد که در پایین متصل می شود. با استفاده از این ، اکنون الگویی برای صفحات داریم. این الگو در سرتاسر برنامه ما قابل استفاده مجدد است.
صفحات نمونه واقعی قالب ها می باشند که محتوای واقعی شامل متون و تصاویر و … در آن قرار گرفته است. ظاهری که از هر وب سایت یا اپلیکیشن موبایل میبینید مرحله آخر این روند یعنی صفحات میباشد.
در کنار تمام ویژگی هایی که در این طراحی گفته شد، طراحی اتمی شما را در رسیدن به یک هدف خاص دنبال می کند: طراحان به سادگی می توانند حقیقت مربوط به یک پروژه طراحی را متوجه شوند – آنها می توانند از کیفیت المنت های استفاده شده در پروژه شان حتی در زمان ساخت آن آگاهی پیدا کنند.
طراحی وب اتمی با فراهم آوردن یک متدولوژی مناسب برای طراحان، اجازه می دهد تا یک تجربه کاربری خوب ارائه شود. براساس این طراحی طراحان می توانند همزمان با نگه داری خلاقیت خود از هرگونه مشکل و کلنجاری با توسعه دهنده محفوظ بمانند.
کار توسعه دهندگی کاری بیشتر منطقی است و خط و شیوه مخصوص خود را دارد اما کار طراحی بیشتر جنبه هنری قضیه است به همین دلیل طراح ممکن است با ایده ای همراه شود که خیلی با منطق و چهارچوب توسعه دهنده همخوانی نداشته باشد، در این حال طراحی اتمی به طراح کمک می کند تا از این مشکل بیرون بیاید و رابط کاربری خود را مطابق با سلیقه خود و منطبق با چهارچوب توسعه دهنده بسازد. این کار مشکلات بین طراح و توسعه دهنده را کاهش می دهد و زمان بسیاری را ذخیره می کند.
وقتی که از طراحی اتمی استفاده کنید زبان جدیدی در تعامل با پروژه ها به وجود می آید. این زبان موجودی رابط نام دارد و کمک می کند تا توسعه دهنده و طراح بتوانند براساس مشکلات قدیمی‌شان راه حل های جدید‌تری بیابند.
موجودی رابط به توسعه دهنده کمک می کند تا براساس رابط ساخته شده منطبق با طراحی اتمی المان های رابط کاربری را تغییر دهد. این کار می تواند بدون مراجعه به طراح صورت بگیرد. برای مثال تصور کنید در حال ساختن یک فرم تماس باما هستید. شما المان های طراحی را در اختیار دارید و چینش آنها نیز قرار گرفته حال اگر با مشکلی روبرو باشید با کمک طراحی اتمی وب به سادگی می توانید این مشکل را حل کنید.
استفاده از فلسفه طراحی اتمی وب در ضمانت کیفیت وبسایت و المنت ها نیز استفاده می شود. در چنین شرایطی این فلسفه نقشی شبیه به یک ابزار کمکی را ایفا می کند.
طراحی اتمی برای قلب های ضعیف نیست! برای طراحان و توسعه دهندگان استفاده از این حالت نیازمند فکر و تفکر مجدد روی کل پروسه طراحی وب است. طراحی اتمی کاری منظم است و نیازمند ریزه‌کاری های بسیاری است. جزئیات بسیاری دارد که باید به آن توجه کرد. از زمانی که شما شروع به ساخت یک اتم و مولکول می کنید تا انتهای انجام کار این فرایند ادامه دارد.
استفاده از طراحی اتمی باعث می شود توسعه دهنده و طراح روی یک صفحه باقی بمانند و کارشان را هماهنگ با همدیگر انجام دهند. البته اینکار صرفا برای هماهنگ سازی و بالا بردن کیفیت وبسایت نیست با استفاده از آن می توانید نمونه های اولیه سریع تری نیز بسازید.
اگر شما در ابتدای انجام یک پروژه هستید پایه کاری‌تان را براساس این فلسفه بنا کنید. مطمئن باشید که در نهایت از کاری که کرده‌اید بسیار خرسند خواهید شد.
