وبلاگ - مطالب آموزشی

0
557
ترفندهای طراحی در متریال دیزاین

ترفندهای طراحی در متریال دیزاین

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

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

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

متریال دیزاین به عنوان پایه

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

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

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

blog_16587_1

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

یک تقویم را در نظر بگیرید، به جای یک لیست و نمایش یک کارت به ازای هر روز که برای هر یک از قرارهای ملاقات استفاده می شود، Sunrise از یک ویوی ترکیبی که در آن قادر به مشاهده ویوی ماهیانه و روزانه هستید استفاده کرده است.

blog_16587_2

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

با هشیاری دکمه اکشن شناور را مورد استفاده قرار دهید

blog_16587_3

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

– قرار دادن آن در صفحه ای که به جای یک اکشن کاربری دارای چندین اکشن می باشیم.

– مخفی سازی یک منو در دکمه اکشن شناور.

– ایجاد ممانعت برای عناصر مهم در طراحی.

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

استراتژی های تبادلات و پذیرش کاربران

چگونه تصمیم می گیرید که کدام اجزا از متریال دیزاین را مورد استفاده قرار داده و کدامیک را ارتقا بخشید؟

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

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

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

ناوبری

مهم ترین تعامل کاربر در این محصول کدام است؟

این تعامل در کدامیک از صفحات به وقوع می پیوندد؟

فلوچارت محصول چطور به نظر می رسد؟

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

قانون اول: 80/20

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

قانون 2: ثبات

روش های متعددی برای دسترسی به یک صفحه در محصول وجود دارند که باید دارای ثبات زیادی باشند. برای مثال جابجایی از یک صفحه کلی به یک صفحه دارای جزئیات باید به سبک مشابهی باشد.

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

محتوا

blog_16587_4

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

– دارای چه نوع محتوایی هستید؟

– چند سطح از محتوا در اپلیکیشن وجود دارد؟ (صفحه کلی، صفحه همراه با جزئیات، صفحه اکشن)

– طول معمول هر بخش از محتوا چقدر است؟

– بهینه ترین راه برای نمایش محتوا کدام است؟ آیا می توان از فهرست برای این منظور استفاده کرد؟ آیا اسلاید شو برای این کار مناسب است؟ آیا طرح خاص دیگری مد نظر قرار دارید؟

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

در اولویت قرار دادن انواع گوناگونی از کاربران

بزرگ ترین چالش که ممکن است در طول طراحی با آن مواجه شوید به شرح زیر می باشد:

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

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

اینستاگرام

فیسبوک

The Economist Espresso

آنبوردینگ خود یک موضوع مجزا است. به منظور آشنایی و درک بیشتر این موضوع می توانید نگاهی به User Onboard بیندازید.

ارتقای رابط

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

تایپوگرافی

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

آیکونوگرافی

blog_16587_5

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

چنانچه مایل به کار با مجموعه آیکون های منحصر به فرد خود هستید باید جوانب زیر را مد نظر قرار دهید:

شناخت و محبوبیت: اطمینان حاصل کنید که مردم تمامی آیکون ها را درک می کنند.

ثبات: معمولا از ترکیب چند مجموعه از آیکون ها اجتناب می شود.

ابزارهای بصری

blog_16587_6

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

انیمیشن ها و تعاملات منحصر به فرد

blog_16587_7

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

شماهای رنگی خاص

blog_16587_8

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

هشدار

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

جمع بندی

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

 

منبع:

http://code.tutsplus.com

این نوشته را به گوگل توصیه کنید :

بسته های آموزشی جذاب!بیشتر