طراحی بر اساس اصول متریال دیزاین

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

معرفی: یک طراحی به‌روز با متریال دیزاین

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

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

ظرافت متریال دیزاین

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

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

استفاده مناسب از حرکت اجسام

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

همه اتفاقات برنامه در یک صفحه محدود نمایش داده می‌شود اما چیزی که کاربر را با خود همراه می‌کند واقعی به نظر رسیدن دنیای پیش چشم اوست.

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

چرا استفاده از حرکت در ساخت یک اپلیکیشن مهم است؟

“حرکت” می‌تواند نشان دهنده‌ی یک اپلیکیشن ساختار یافته باشد و محتوای آن اپلیکیشن را به صورت کامل‌تری نشان دهد.”حرکت” می‌تواند:
– مسیر تمرکز کاربر را مشخص کند.

– به عنوان راهنمایی در بعضی مواقع استفاده شود.

– روابط سلسله مراتبی را به صورت بهتری نمایش دهد.

– حواس کاربر را از مسایل غیر ضروری پرت کند.

-اپلیکیشن را پویاتر جلوه دهد.

چگونه حرکت را استفاده کنیم؟

– باید در استفاده از “حرکت” واقع بین بود.

– باید از قوانین واقعی فیزیک استفاده کرد تا “حرکت” ملموس‌تر و موثرتر در ذهن کاربر هک شود.

– باید از المان‌هایی نظیر سرعت، شتاب و حتی فرمول‌های فیزیک در جای مناسب و با دقت استفاده کرد.

رعایت چه نکاتی باعث موثرتر بودن حرکت می‌شود؟

یک متریال که بصورت “حرکت” استفاده می‌شود می‌تواند زمانی بین 150 میلی ثانیه تا 400 میلی ثانیه را به خود اختصاص دهد. اگر زمانی خارج از این بازه انتخاب شود ممکن است باعث عدم تمرکز مناسب از طرف کاربر و یا احساس ضعف در محتوای برنامه شود.

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

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

عملیات انتقال به وضعیت جدید نباید بیش از حد طولانی باشد. کاربر را منتظر نگذارید! هر چه “حرکت” ساده تر و روان تر باشد اثربخشی بیشتری نسبت به “حرکت” های پیچیده و چند وضعیتی دارد.

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

برای مشاهده فیلم‌های این مبحث اینجا را کلیک نمایید.

رنگ در متریال دیزاین

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

پالت رنگ

طیف رنگ ها را بشناسید و برای نشان دادن پیوستگی، ترجیحاً از رنگ هایی با یک طیف رنگی استفاده کنید. یک طیف رنگی می تواند به شما کمک کند که سایه ها را بهتر بسازید و برجستگی ها را راحت تر به تصویر بکشید.

یک پالت رنگی استاندارد را می توانید از اینجا دانلود کنید.

ممکن است با توجه به برند شما از یک پالت رنگی خاص استفاده کنید. مثلاً همه المان ها را بصورت سیاه و سفید استفاده کنید یا …

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

برنامه شما باید شامل یک رنگ اصلی ( به همراه طیف های آن ) و یک رنگ مکمل باشد. این دو رنگ باید اساس برنامه شما را شکل دهند و از رنگ های جانبی در پیرامون این دو رنگ استفاده کنید.

برای شناخت رنگ های مکمل با یک جستجوی ساده در اینترنت می توانید رنگ های مکملی با توجه به موضوع برنامه تان پیدا کنید.

رنگ مکمل

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

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

رنگ مکمل می تواند تیره تر یا روشن تر از رنگ اصلی باشد.

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

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

اگر رنگ پیش زمینه باعث بد دیده شدن رنگ دیگر می شود از طیف های روشن تر یا تیره تر رنگ دوم استفاده کنید.

برای اطلاعات بیشتر به این صفحه مراجعه نمایید.

فایل های پیوست

Was this article helpful?
Dislike 0
قبلی: آشنایی با Firebase Crashlytics در اندروید