تصویر نویسنده

۲ اردیبهشت ۱۳۹۹

0

جریان طراحی رابط کاربری باید چگونه باشد؟

آموزش

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

  • اقدامات قبل از طراحی رابط کاربری
  • اقدامات حین طراحی
  • اقدامات پس از طراحی (قبل از ارائه به مشتری)

اقدامات قبل از طراحی رابط کاربری

بخش ux خود را آماده کنید، به خصوص وایرفریم ها را

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

وایرفریم ها

یک تم یا پالت رنگ انتخاب کنید

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

فونت مناسبی انتخاب کنید

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

انتخاب فونت

دستگاه ها و پلتفرم هایی که برایشان طراحی می کنید را بشناسید

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

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

طراحی واکنشگرا

از یک سیستم گرید بندی استفاده کنید

معروف ترین و رایج ترین سیستم گرید بندی حال حاضر، سیستم گرید (۱۲ ستونی) بوت استرپ است. شما حتی می توانید سیستم گرید بندی شخصی خود را ایجاد کنید اما این کار ممکن است زمان بر باشد و روی توسعه تاثر منفی بگذارد.

علاوه بر بوت استرپ، سیستم های دیگری مانند Foundation، فلکس باکس و … نیز موجود است که می توانید از آنها استفاده کنید.

سیستم 12 ستونه بوت استرپ

اقدامات حین طراحی

در مورد عملکرد صفحاتی که طراحی می کنید خوب فکر کنید

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

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

عملکرد عناصر ui

از رنگ ها عاقلانه استفاده کنید

ترتیب اولویت رنگ ، مقدار کنتراست و خوانایی را بررسی کنید. در پالت رنگی انتخابی خود، رنگهای مختلفی (acent،highlight،neutral) قرار دهید و ترتیب الویت را برای دکمه ها (مانند دکمه های Primary، Secondary و …) رعایت کنید.

برای آگاهی بیشتر در زمینه طراحی رنگ دکمه ها می توانید به مطلب “طراحی دکمه ها در رابط کاربری” مراجعه کنید.

از رنگها به خوبی استفاده کنید

از تصاویر با کیفیت استفاده کنید

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

تصاویر با کیفیت بهینه

از لورم ایپسوم استفاده نکنید

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

محتوای واقعی جذاب

مراقب ماهیت واکنشرایی عناصر باشید

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

واکنشگرایی عناصر صفحه

اقدامات پس از طراحی

به محض اینکه طراحی خود را تمام کردید، بررسی کیفیت زیر را انجام دهید:

  • هماهنگی رنگ و شکل
  • تناسب
  • ثبات
  • تعادل بصری
  • اشتباهات املایی

همانطور که مشاهده کردید با انجام کارهایی ساده اما تاثیر گذار قادر خواهید بود تا یک جریان طراحی رابط کاربری صحیح برای پروژه های خود ایجاد کنید. نظرات خود را در مودر این مطلب با ما در میان بگذارید.

۰ ۰ vote
Article Rating