متریال دیزاین طراحی دلنشین و کاربر پسند
به احتمال زیاد تا به امروز کلمه Material Design به گوش شما خورده است و شاید چندین مقاله هم در این مورد خوانده باشید، در این مقاله قصد داریم از تاریخچه و ماهیت Material Design اطلاعاتی در اختیار شما دوستان قرار دهیم.
اول از همه باید بدانیم متریال دیزاین به چه معناست؟ متریال دیزاین سبکی/زبانی جدید در طراحی است که گوگل در یکی از کنفرانس های خبری خود آن را معرفی کرده است. اگر بخواهیم دقیق تر باشیم در ماه ژوئن سال قبل (۲۰۱۴)
متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.
اگر بخواهیم در یک جمله بگوییم متریال دیزاین چیست. می‌توانیم بگویم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat Design) هست. در ابتدا این نوع طراحی محدود به اپلیکیشن‌های موبایلی بود که برای اندروید فراهم شده‌اند و استفاده از آن در محیط وب کمی نامفهوم بود، ولی متریال دیزاین خیلی سریع جای خود را بین طراحان رابط کاربری وب پیدا کرده و میتوان گفت در حال محبوب شدن است، برای مثال به نمونه های زیر توجه کنید:
عکس فوق محیط اپلیکیشن است به اسم Source که تقریبا همان کار Feedly را انجام می‌دهد ولی کمی با طراحی متفاوت و زیبا، همچنین اگر از اپلیکیشن Inbox گوگل هم استفاده کرده باشید به سبک طراحی متریال پی خواهید برد. اگر می‌خواهید طرح بعدی خود را با این زبان طراحی کنید میتوانید از فریمورک های زیر استفاده کنید:
البته فریمورک های دیگری نیز وجود دارد که میتوانید با استفاده از آنها نیز به مقصود خود برسید ولی ما به همین دو بسنده می‌کنیم، همچنین اگر می‌خواهید مفاهیم و قوانین متریال دیزاین را کامل و از پایه یاد بگیرید بهترین منبع خود گوگل است که از این لینک قابل دسترس است.
Material (متریال) استعاره می باشد
استعاره متریال به یک تئوری واحد و یکپارچه برای فضای منطقی و سیستم حرکت گفته می شود. متریال در یک حقیقت لمسی بنا شده است که از مطالعه کاغذ و جوهر الهام گرفته، اما با این وجود از لحاظ تکنولوژی پیشرفته می باشند و راه را برای تخیل و جادو باز میگذارد.
سطوح و لبه های متریال یک نشانه بصری فراهم می کنند که درون حقیقت بنا شده است. استفاده از خواص لمسی کمک می کند تا کاربران سریع تر کارایی آن را درک نمایند. با این حال انعطاف پذیری متریال یک کارایی جدید فراهم می کند که بدون نقض قوانین فیزیک، در دنیای فیزیکی جای داده می شوند.
اصول پایه نور، سطح و حرکت، کلید بیان چگونگی حرکت و ارتباط اشیاء در فضا و در رابطه با یکدیگر می باشند. نور پردازی واقعی شکاف ها را نشان می دهد، فضاها را از هم جدا می کند و بخش های در حرکت را مشخص می سازد.
قدرت، گرافیک، آگاهی
ارمان های اصلی طراحی چاپی – تایپوگرافی، شبکه ها، فضا، مقیاس، رنگ و استفاده از تصاویر – رفتار بصری را هدایت می کنند. این ارمان ها بیش تر از این نقش دارند که تنها از نظر بصری مطلوب باشند. ارمان های طراحی موجب به وجود آمدن سلسله مراتب، مفهوم و تمرکز می شوند. استفاده از رنگ ها، تصاویر لب به لب، بکارگیری تایپوگرافی با اندازه بزرگ و فضای سفید به صورت عمدی و آگاهانه موجب به وجود آمدن یک ارتباط قوی گرافیکی می شود که کاربر را در خود غرق می کند.
تمرکز بر روی فعالیت های کاربر موجب می شود که هسته کاربری به سرعت نمایان شود.
حرکت باعث به وجود آمدن مفهوم می شود
حرکت، کاربر را به عنوان حرکت کننده اول در نظر میگیرد و این مفهوم را برای وی تقویت می کند. فعالیت های اولیه کاربر نقاط عطفی می باشند که حرکت را آغاز می کنند و کلیت طراحی را دگرگون می سازند.
کلیه فعالیت ها در یک محیط واحد اتفاق می افتند. مفاهیم و موضوعات به گونه ای به کاربر ارائه می شوند که تداوم تجربه از بین نرود حتی زمانی که این مفاهیم در حال تغییر شکل پیدا کردن و شناخت دوباره باشند.
حرکت دارای مفهوم و تناسب می باشد که به منظور جلب توجه و حفظ تداوم به کار می رود. نتیجه آن نافذ و در عین حال آشکار می باشد. انتقال ها موثر و در عین حال منسجم می باشند.
دنیای سه بعدی
در دنیای وب، محور z برای لایه سازی استفاده می شود نه برای پرسپکتیو. دنیای ۳ بعدی توسط بازی با محور y ساخته می شود.
نور و سایه
درون محیط مادی، نورهای مجازی صحنه را روشن می سازند. نور های اصلی موجب به وجود آمدن سایه های هدایت کننده می شوند در حالی که نورهای محیطی در کلیه زوایا باعث ایجاد سایه های ملایم می شوند.
سایه ها در محیط متریال توسط این دو منبع نور تولید می شوند. در توسعه اندروید، سایه ها زمانی ایجاد می شوند که منابع نور توسط صفحه های material در بخش های گوناگون محور z بلاک می شوند. در دنیای وب، سایه ها تنها زمانی ایجاد می شوند که از محور y استفاده شود. نمونه زیر نشان دهنده یک کارت به ارتفاع ۶ dp می باشد.
ویژگی های فیزیکی
سایه ها حاصل طبیعی تغییر ارتفاع نسبی (وضعیت محور z) میان المان های متریال می باشند.
محتوا همیشه بر روی متریال نشان داده می شود، در هر شکل و رنگی. محتوا ضخامتی به متریال اضافه نمی کند.
استفاده از تغییر سطح (سایه) به منظور جداسازی المان های متریال، یکی از شیوه های جلوگیری از قرارگیری چندین المان متریال در یک نقطه در فضا به صورت هم زمان می باشد.
از سایه برای نشان دادن تغیر سطح استفاده میشود
تغییر شکل متریال
حرکت متریال
متریال می تواند به صورت خود به خود در هر جای محیط تولید شوند و یا از بین بروند.متریال می تواند در طول هر محوری حرکت کند.
حرکت محور z عموماً نتیجه تقابل کاربر با متریال می باشد
اجسام در روند طراحی متریال شبیه به ویژگی های اجسام در دنیای فیزیکی می باشند. در دنیای فیزیکی، اجسام می توانند با یکدیگر دسته بندی شوند، اما نمی توانند از یکدیگر رد شوند. اجسام سایه به وجود می آورند و نور را بازتاب می دهند.
این ویژگی های یک مدل فضایی را به وجود می آورند که برای کاربر آشناست و می تواند به صورت سازگاری درون برنامه ها استفاده شود. مقاوم سازی این مدل فضایی موضوع بحث تغییر سطح و سایه می باشد.
ارتفاع (آندروید)
ارتفاع یک عمق و یا فاصله نسبی میان دو سطح در طول محور z می باشد.
مشخصات:
. ارتفاع به همان واحدهایی اندازه گیری می شود که محورهای x و y اندازه گرفته می شوند، عموماً به واحد dp. از آنجا که ارمان های متریال دارای عمق می باشند (کلیه متریال دارای ضخامت ۱dp هستند)، ارتفاع، فاصله روی یک سطح تا روی یک سطح دیگر در نظر گرفته می شود.
. ارتفاع سطح یک جسم ولد، نسبتی از ارتفاع سطح یک جسم والد می باشد.
تصاویر و مقادیری که نشان داده شده اند برای برنامه های اندروید می باشند.
ارتفاع ایستا
کلیه اجسام متریال، صرف نظر از اندازه، دارای یک ارتفاع ایستا، یا ارتفاع پیش فرض می باشند که تغییر نمی کند. در صورتی که ارتفاع یک جسم تغییر کند، این ارتفاع در اسرع وقت به ارتفاع ایستای خود باز خواهد گشت.
ارتفاع اجزا:
. ارتفاع ایستا برای یک جزء سازگار با برنامه می باشد (برای نمونه؛ ارتفاع FAB در یک برنامه از ۶dp به ۱۶dp در برنامه دیگر تغییر نمی کند)
. اجزا ممکن است دارای ارتفاع های ایستای متفاوتی در پلتفورم های مختلف باشند، بسته به عمق محیط (برای نمونه؛ تلویزیون دارای عمق بیشتری نسبت به موبایل یا مانیتور است)
ارتفاع واکنشی و تعادل ارتفاع دینامیک
برخی از گونه های اجزا دارای ارتفاع واکنشی می باشند، به این مفهوم که این اجزا بسته به ورودی کاربر و یا رویدادهای سیستم تغییر ارتفاع می دهند. این تغییرات ارتفاع به صورت سازگاری به کمک تعادل ارتفاع دینامیک به کار گرفته می شود.
تعادلات ارتفاع دینامیک، ارتفاع مورد نظری می باشند که یک جز به سمت آن حرکت می کند و نسبتی از شرایط ایستای جز می باشد. این تعادلات اطمینان حاصل می کنند که تغییرات ارتفاع در طول عملیات و گونه های گوناگون اجزا، سازگار باشند.
هنگامی که رویداد ورودی کامل یا کنسل شود، جز دوباره به ارتفاع ایستای خود باز می گردد.
جلوگیری از تداخل ارتفاع
اجزای دارای ارتفاع واکنشی ممکن است به هنگام حرکت میان تعادل ارتفاع دینامیک و ارتفاع ایستا، با دیگر اجزا تداخل پیدا نمایند. از آنجایی که متریال نمی تواند از میان متریال دیگر عبور کند، اجزا از تداخل با یکدیگر به هر شیوه ای جلوگیری می کنند، چه تنها برای اصول پایه هر جز و یا با استفاده از طرح کل۰ی برنامه.
در سطح جزء، اجزا می توانند پیش از به وجود آمدن برخورد، جا به جا و یا حذف شوند. برای نمونه، یک FAB می تواند پیش از آنکه کاربر یک کارت را انتخاب کند ناپدید و یا از صفحه خارج شود.
| مقدار سایه (برحسب dp) | کامپوننت |
|---|---|
| ۲۴ | Dialog Picker |
| ۱۶ | Nav drawerRight drawer
Modal bottom Sheet |
| ۱۲ | Floating action button (FAB – pressed) |
| ۹ | Sub menu (+1dp for each sub menu) |
| ۸ | MenuCard (picked up state)
Raised button (pressed state) |
| ۶ | Floating action button (FAB – resting elevationSnackbar |
| ۴ | App Bar |
| ۳ | Refresh indicatorQuick entry / Search bar (scrolled state |
| ۲ | Card (resting elevationRaised button (resting elevation
Quick entry / Search bar (resting elevation |
| ۱ | Switch |
در سطح طرح کلی، برنامه خود را به گونه ای طراحی نمایید که احتمال تداخل را به حداقل رساند.
برای نمونه، FAB را در گوشه ای از صفحه قرار دهید که به هنگام کاربری، فرد دچار تداخل نشود.
سایه ها
سایه یک ویژگی بصری بسیار مهم برای عمق و حرکت جهت دار اجسام به وجود می آورد.
سایه تنها یک مشخصه بصری می باشد که مقدار جدایی میان سطوح را مشخص می کند. سایه یک شی نشان دهنده ارتفاع آن می باشد.
در حرکت، سایه موجب به وجود آمدن یک ویژگی کاربردی برای جهت حرکت اجسام می باشد و همچنین نشان می دهد که فاصله میان سطوح در حال افزایش می باشد یا کاهش.
سایه های اصلی اجزا
سایه های اجزائی زیر می توانند به عنوان منابع معیار مورد استفاده قرار گیرند. در صورتی که تفاوتی میان این منابع و سایه های اجزا وجود داشته باشد، به این منابع مراجعه نمایید.
وضعیت ایستا:۲dp
وضعیت فشرده:۸dp
FAB:
وضعیت ایستا: ۶dp
وضعیت فشرده:۱۲dp
Card:
وضعیت ایستا: ۲dp
وضعیت انتخاب شده:۸dp
منوها: ۸dp
زیر منوها: ۹dp (برای هر منو یک dp اضافه می شود)
Modal bottom sheet: 16db
وضعیت ایستا: ۲dp
وضعیت اسکرول شده: ۳dp
روابط اجسام
اینکه شما چگونه اجسام و یا مجموعه اجسام را شناسایی می کنید در یک برنامه نشان می دهد که این اجسام در ارتباط با یکدیگر چگونه حرکت می کنند. اجسام می توانند به صورت جداگانه از هم حرکت نمایند و یا توسط اجسامی که در سلسله مراتب دارای ارتفاع بیشتری هستند محدود شوند.
کلیه اجسام بخشی از یک سلسله مراتب می باشند که بر اساس یک رابطه ولد-والد تعریف می شوند. ولد در هر یک از این روابط معرف ارمانی می باشد که تابع یک ارمان والد باشد. اجسام می توانند ولد یک سیستم و یا یک جسم دیگر باشند.
ویژگی های والد-ولد:
. هر جسم یک والد دارد
. هر جسم می تواند تعدادی ولد داشته باشد
. اجسام ولد ویژگی های قابل تغییر را از والد خود کسب می کنند، مانند جایگاه، دوران، مقیاس و ارتفاع
. اجسام ولدی که در یک سطح از سلسله مراتب قرار دارند به عنوان هم نیا در نظر گرفته می شوند
موارد استثنا
ایتم هایی که والد می باشند، مانند ارمان های UI، مستقل از دیگر اجسام حرکت می نمایند. برای نمونه، جسمهای FAB با محتوا اسکرول نمی شوند. از دیگر ارمان ها می توان به موارد زیر اشاره کرد:
. نوار مسیریاب کنار برنامه
. نوار عملیات
. دیالوگ ها
روابط
اینکه اجسام در ارتباط با یکدیگر چگونه واکنش نشان می دهند توسط جایگاه آن ها در سلسله مراتب والد-ولد تعیین می شود.
برای نمونه:
. ولدها حداقل تفکیک محور z را از والد خود دارند؛ دیگر اجسام میان والد و ولد قرار نمی گیرند
. در مجموعه اسکرولینگ کارت، کارت ها هم نیاز یکدیگر می باشند، بنابراین همه پشت سر هم و همراه هم حرکت می کنند.
ارتفاع
اینکه شما چگونه باید ارتفاع اجسام – جایگاه آن ها در فضای z – را مشخص نمایید بسته به آن است که سلسله مراتب محتوایی که فصد ارائه آن را دارید چگونه است و آیا نیاز از یک جسم جدا از دیگر اجسام حرکت کند.
انیمیشن
حرکت صحیح
همانطور که شکل یک جسم نشان می دهد که چگونه ممکن است رفتار کند، تماشای حرکت آن نیز می تواند نشان دهد که آیا جسم سبک، سنگین، منعطف، محکم، کوچک و یا بزرگ است. در دنیای طراحی متریال، حرکت معرف روابط فضایی، کاربرد و نیت زیبایی و روانی می باشد.
جرم و حجم
در دنیای فیزیکی، به منظور انکه یک جسم حرکت کند، باید نیرویی به آن وارد شود. قدرت و تداوم این نیروها تعیین می کند که یک جسم تا چه اندازه سرعت می گیرد و یا تغییر مسیر می دهد. حتی تصادفی ترین توقف ها و شروع ها آنی نمی باشند چرا که برای یک جسم زمان بر است که سرعت بگیرد و یا از سرعت آن کم شود. در نتیجه، هنگامی که انیمیشن ها به طور آنی حرکت یا توقف نمایند و یا جهت حرکتشان تغییر کند، غیر طبیعی به نظر خواهد آمد.
حرکت در طراحی متریال باید ویژگی های رفتاری اجسام فیزیکی را در دنیای حقیقی دارا باشند، بدون آنکه ظرافت، سادگی و زیبایی را از بین ببرند.
افزایش و کاهش سرعت طبیعی
افرایش و کاهش سرعت نامتقارن موجب به وجود آمدن یک حرکت طبیعی و مطلوب می شود.
هنگامی که افزایش یا کاهش سرعت روان نباشد، حرکت به نظر مکانیکی و غیر طبیعی خواهد بود. تغییرات آنی در سرعت یا جهت نامطلوب می باشند و جلب توجه می نمایند. از حرکات خطی خودداری نمایید.
ورود و خروج
تغییر سرعت یک جسک به هنگام ورود و یا خروج آن از صفحه نمایش میزان فاصله ای که جسم طی می کند را نشان می دهد. برای نمونه، کاهش سرعت به هنگام خروج توجه ها را جلب می کند و به این مفهوم است که جسم در نزدیکی انتهای چهارچوب خواهد ایستاد.به ویژگی به هنگام نقل و انتقال، در نظر داشته باشید که کدام بخش ورود یا خروج باید بیشترین توجه را به خود جلب نمایند.
سرعت ورود و خروج ثابت حواس و توجه کاربر را جلب نمیکند
اصلاحات easing
هنگامی که در رابطه با منحنی زمان بندی سخن به میان می آید، بسیار اهمیت دارد تا درک صحیحی از مفاهیم مورد استفاده وجود داشته باشد. دو اصطلاح “ease in” و “ease out” هم در انیمیشن سنتی مورد استفاده قرار می گیرند و هم در انیمیشن UX. با این حال بسته به موقعیتی که وجود دارد، این اصطلاحات می توانند مفاهیم متضادی داشت هباشند.
انیمیشن سنتی
تکنیک های انیمیشن سنتی بیانگر توالی حرکات در طراحی حرکات اصلی می باشند. در چنین موقعیتی اصطلاح “ease out” اشاره دارد به حرکتی که از یک حالت حرکت می کند و “ease in” به مفهوم حرکتی می باشد که به یک حالت وارد می شود.
ابزار انیمیشن مدرن این حالت های کلیدی را توسط فریم های کلیدی بیان می کنند. در اینجا دو اصطلاح ease in و ease out اشاره به حرکاتی دارند که به ترتیب به فریم های کلیدی داخل و از آن خارج می شوند.
انیمیشن UX
در مفهوم UX، اصلاح easing به انتقال میان وضعیت ها اشاره دارد. در نتیجه، ease in به مفهوم حرکتی می باشد که وارد تغییر می شود و ease out حرکتی است که از تغییر خارج می شود.
نتظیمات
همه اجسام به یک شیوه حرکت نمی کنند. اجسام کوچک تر و سبک تر ممکن است سریع تر حرکت کنند چرا که نیروی کمتری نیاز خواهند داشت و اجسام بزرگ تر و سنگین تر نیازمند زمان بیشتری برای سرعت گرفتن می باشند.
از حرکات منحنی استفاده نمایید و از مسیرهای خطی فضایی پرهیز کنید. ویژگی های حرکتی که بیشتر از همه با جسم مورد نظر شما همخوانی دارند را شناسایی نمایید و حرکات آن را بر همین اساس پیاده سازی کنید. منحنی ها معرف تغییر در طول زمان می باشند. منحنی را پیدا کنید که با ویژگی های حرکتی مورد نظر شما هماهنگ باشد.
اگه امکان داره آموزش متریال دیزاین برای وب و آندروید رو هم قرار دهید
ممنون پر محتوا بود
Howdy very cool blog!! Man .. Beautiful .. Amazing .. I’ll bookmark your site and take the feeds adtlidonaliy? I am glad to search out numerous useful info right here within the post, we need work out more techniques on this regard, thanks for sharing. . . . . .