
تاریخچه تغییر روش طراحی UI:
- یه زمانی (سالهای 80 تا 85) وقتی برای طراحی یک سایت به یک شخص/شرکت مراجعه میکردید، به شما میگفتند که تعرفه بر اساس تعداد صفحات است. مثلا 5 صفحه میخواهید میشه 500 تومان و هفت صفحه 700 تومان!
- کم کم استفاده از سیستمهای مدیریت محتوا، جای خودشون رو باز کردند و طراحها هم به جای طراحی کردن صفحات، به طراحی قالبهای مخصوص CMS رو آوردند. یعنی یک قالب رو (که شامل چند صفحه بود) طراحی میکردند و تحویل شما میدادند و هر صفحه سایت که میخواست نمایش داده بشه، باید از یکی از صفحات اون قالب پیروی میکرد.
- این فرایند اینجا متوقف نمیشه. این روزها ما روی محصولاتی کار می کنیم که مثلا به مدت یک یا دو سال همچنان رشد خواهد کرد و بخش های جدیدی بهشون اضافه خواهد شد. در این وضعیت چه کنیم؟ چند صفحه طراحی کنیم؟ چند قالب؟ چند طرح ترکیبی؟
طراحیِ یک سیستمِ طراحی
کتاب Atomic Design توصیه میکنه که به جای طراحی صفحه، به طراحی المان های تشکیل دهنده صفحات رو بیاریم و اسمشو میگذاره طراحی اتمی. نویسنده (Brad Frost) میگه همانطور که موجودات از ارگانیزم ها تشکیل شده اند و ارگانیزم ها از ملکول ها و اون ملکول ها از اتم ها، ما هم باید در طراحی هایمان، این روند را در نظر بگیریم:این ساختار چگونه کار میکند؟
- ساده ترین المان های HTML ، در این مدل طراحی، اتم محسوب میشوند. مثلا TextBox را می توانیم یک اتم در نظر بگیریم یا Button یا Label را.
- حالا یک TextBox به همراه یک Button و یک Lable، روی هم یک ملکول را تشکیل میدهند. ملکولِ (همون کامپوننت) سرچ!
- حالا اگر چند ملکول (مثلا ملکولِ MenuBar و Logo و SearchBox) را کنار هم قرار دهیم، به ارگانیزم Header میرسیم.
- و از کنار هم قراردادن ارگانیزمِ هدر و باکس خبر و فوتر، به یک قالب می رسیم:
ابزار ساخت سیستمِ طراحی اتمی:
کتاب یک ابزار پایه که در طراحی اتمی به کمک ما میآید را معرفی کرده است؛ patternlab.io یک سیستم طراحی برای ایجاد همه اتم های یک طرح (دموی این محصول) که به شما در مستندسازی مراحل طراحی نیز کمک میکند. این محصول از زبان قالب بندی mustache استفاده میکند که امکان include بخشهای کد را در صفحات HTML فراهم میکند. توضیحات مربوط به بکارگیری هریک از این ابزارها را با کلیک روی لینکهای خودشان مطالعه کنید.
1 2 3 4 5 6 7 |
< div class = " block-post " > < a href = " {{ url }} " > {{ > atoms-thumb }} < h3 > {{ headline }} </ h3 > < p > {{ excerpt }} </ p > </ a > </ div > |
چه المان هایی را باید طراحی کنید؟
تقریبا تمام المان هایی که روی صفحه می بینید:- المان های جنرال: هدر، فوتر و بقیه المان های عمومی صفحه
- المان های ناوبری: primary navigation, footer navigation, pagination, breadcrumbs, interactive component controls
- عکس ها: logos, hero images, avatars, thumbnails, backgrounds,
- آیکون ها: glasses, social icons, arrows, hamburgers, spinners, favicons
- فرم ها: المان های تکست باکس و دکمه و …
- المان های heading : مانند h1, h2 , ..
- بلاک های متن، عکس ، تبلیغات، و …
- لیست ها: ol , ul و المان های داخلی شون
- مدیا : المان های پخش صوت و تصویر
- المان های خارجی مانند ویجت ها و چیزهایی که روی هاست شما میزبانی نمیشوند.
- پاپ آپ ها: انواع alert , success , failure, tooltip, help
- رنگ های المان ها (ابزار stylifyme.com و cssstats.com )
سلام
موضوع پایان نامه من طراحی یک یو آی برای نرم افزارهای حوزه تحلیل پیشرفته کسب و کار هست.
فکر میکنم این کتاب به دردم بخوره.
اگر برام ایمیلش کنید ممنون میشم.
سلام. من کتاب رو خریده بودم از آمازون. اما اگر امکان خرید ندارید، می توانید نام کتاب را در سایت libgen جستجو کنید.
سلام، خیلی عالی و مفید بود. ممنون.
چطور میتونم این کتاب رو داشته باشم ؟
سلام. من کتاب رو خریده بودم از آمازون. اما اگر امکان خرید ندارید، می توانید نام کتاب را در سایت libgen جستجو کنید.