کانال تلگرام

طراحی وب اتمی چیست و آیا به آن نیاز داریم؟

تاریخ : ۱۶ فروردین ۱۳۹۸
گردآوری و تالیف : حمید رضا ملکی

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

atomic-design-book-cover-thumb

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

چرا از طراحی اتمی استفاده میکنیم ؟

فرآیند پایین به بالا، طراحی اتمی نامیده می شود زیرا از مسائل شیمی الهام گرفته است. موارد زیر را در نظر بگیرید:

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

طراحی اتمی وب هم از مفاهیم اساسی یکسانی پیروی میکند. این رویکرد حاکی از آن است که حتی ساده ترین عناصر HTML می توانند برای ایجاد چیزی ملموس تر و کاربردی تر ترکیب شوند، اما قرار دادن این عناصر در کنار هم نیاز به رویکرد bottom-down دارد. در طراحی اتمی، فرایند موجود به شکل زیر است :

atomic-design

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

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

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

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

ساخت مجموعه ای از کامپوننت ها

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

linear-atomic-design

چیدمان بصری بهتر

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

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

جستجوی آسان تر در طراحی تان

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

نمونه سازی و  بروز رسانی سریعتر 

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

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

چرا طراحی اتمی را باید مورد توجه قرار دهیم؟

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

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

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

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

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

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

یک ایده رادیکال برای ساخت وب سایت

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

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

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

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید