اصول و روش طراحی سایت اتمی اصول و روش طراحی سایت اتمی

اصول و روش طراحی سایت اتمی

طراحی سایت زمان مطالعه : ~ 6 دقیقه 24 آبان 1399

طراحی اتمی روشی است که توسط "برد فراست" ایجاد شده است و به دنبال ارائه هدفی در سیستم های طراحی رابط کاربری صحیح تر و با نظم و سلسله مراتب، صریح پیاده سازی می شود. این روش طراحی سایت، Atomic Design یا طراحی اتمی نامیده می شود زیرا ایده اصلی آن در شیمی و مطالعه ترکیب ماده بنیان شده است. جهان از یک مجموعه ثابت از "عناصر اتمی" تشکیل شده، که برای بسیاری از ما به عنوان جدول تناوبی عناصر شناخته می شود. این عناصر، عناصر سازنده همه موارد اطراف ما هستند.

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

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

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

عناصر طراحی اتمی

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

  1. اتم ها
  2. مولکول ها
  3. موجودات زنده
  4. الگوها
  5. صفحات

عناصر طراحی اتمی

اتم ها

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

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

مولکول ها

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

مولکول ها در طراحی سایت

موجودات زنده

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

موجودات زنده در طراحی سایت

الگوها

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

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

الگوها در طراحی سایت

صفحات

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

صفحات در طراحی سایت

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

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

صفحات مشابه

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