آموزش هوشمند امنیت و طراحی وب

  • تکنولوژی های وب و ترندهای وردپرس
صفحه اصلیطراحی و توسعه وبآموزش جامع و کامل UI/UX

آموزش جامع و کامل UI/UX

نویسنده: رضا دهقان | تاریخ انتشار: ۱۳۹۸/۰۷/۲۳ | دسته بندی: طراحی و توسعه وب|

UI و UX چیست و چه کاربردی دارد؟

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

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

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

 

طراحی رابط کاربری/User Interface

 

طراحی رابط کاربری UI

 

عبارت UI مخفف User Interface و به معنی رابط کاربری می باشد.

طراحی UI یعنی تمام المان هایی (چیدمان و پیکربندی ظاهر) که کاربر با ورود به سایت مشاهده می کند. انتخاب رنگ براساس هارمونی و روانشناسی رنگ،تصاویر مناسب، تکنیک های زیباسازی،استفاده بهینه از فضا برای ارائه بهترین چیدمان،دکمه های مناسب با فضای سایت،لینک ها و و و … تمامی مواردی هستند که در مرحله UI با توجه به سناریو پروژه و نیاز پروژه انجام می شود. به عبارتی تمام تمرکز UI روی نحوه ارائه یک محتوا به کاربر می باشد.بدون شک ظاهر و گرافیک سایت روی جذب مخاطب و معرفی یک برند، تأثیر شگفتی دارد.

در نتیجه می توان یک تعریف ساده برای این مفهوم داشت.

UI تمامی چیزی است که در صفحه‌ی نمایش نشان داده می‌شود. این تمام شامل تصاویر، رنگ‌ها، جداول، ویدئو‌ها، آیکون‌ها و خیلی عناصر دیگر که کاربر برای تعامل یا ارتباط با وب‌سایت از آنها استفاده می‌کند. به همه‌ی این عناصر رابط کاربری یا user interface می‌گویند و به کسی که مسئول طراحی این عناصر است طراح رابط کاربری  UI Designer می‌گویند.

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

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

طراح UI این کارها را انجام می دهد:

ظاهر و حس :

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

پاسخگویی و برقراری تعامل :

  • نمونه سازی UI
  • تعامل و انیمیشن
  • سازگاری با همه اندازه های صفحه نمایش
  • پیاده سازی با توسعه دهنده

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


طراحی تجربه کاربری / User Experience

 

طراحی تجربه کاربری / User Experience

 

عبارت UX مخفف User Experience و به معنی تجربه کاربری می باشد.

طراحی ux یعنی تمامی رفتار و بازخوردهایی که یک کاربر با سایت دارد. طراحان “تجربه کاربر” یا همان UX Designers با توجه به شناخت و علمی که در زمینه تجربه کاربری دارد، متناسب با هر پروژه یک روند کاملاً جدید و خلاقانه و متناسب با دید اکثریت کاربران انجام می دهد تا کاربر بهترین حس و حالت کار با سایت را داشته باشد.

جالب است بدانید که UX در سمت سرور یا Server-Side است و کاربر این قسمت را مشاهده نمی کند و فقط نتیجه آن را تجربه می کند.

مفهوم UX، تمرکز بر عملکرد،کاربرد پذیری و سازگاری کاربر با محصول دارد. هدف این بخش، تعامل بین مشتری و ارائه دهنده ی محصول (مانند سایت،اپلیکیشن و …)  می باشد که استفاده از محصول را برای کاربر آسان کند.

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

می توان نظریه و فرآیند کاری یک طراح تجربه کاربری UX را به این صورت دسته بندی کرد:

استراتژی و زمینه:

  • تجزیه و تحلیل رقبا
  • تجزیه و تحلیل مشتری
  • ساختار/ استراتژی محصول
  • توسعه محتوا

Wireframing و نمونه سازی:

  • Wireframing
  • نمونه سازی
  • آزمون / تکرار
  • برنامه ریزی توسعه

اجرا و تجزیه و تحلیل:

  • هماهنگی با طراح(های) UI و UX
  • هماهنگی با توسعه دهندگان
  • پیگیری اهداف
  • تحلیل و تفسیر

بنابراین نقش UX پیچیده، چالش برانگیز و چندوجهی است. کمی مهارت های بازاریابی، کمی طراحی و قسمتی مدیر پروژه برای این شغل لازم است.

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

در نهایت هدف این است که از طریق فرایند تست و پالایش، اهداف کسب و کار به نیازهای کاربر به گونه ای گره زده شود که هر دو طرف رابطه را راضی نگه دارد.

 

یک مثال برای درک این مطلب:

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

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

 

نکات مهم در طراحی UI/UX

  • نرم افزار Adobe XD در سیستم عامل ویندوز و نرم افزار Sketch در سیستم عامل مک و ابزارهای دیگر مثل Photoshop, Illustrator, Fireworks, InVision با هدف طراحی UI/UX وب سایت و اپلیکیشن می باشد.
  • یکپارچگی عناصر در طراحی UI تأثیر مستقیم بر UX و جذب مشتری و مخاطب دارد.
  • UI بخشی از UX محسوب شده و ارتباط مستقیمی باهم دارند.
  • لازمه شروع کار UI، دانستن مفاهیم گرافیک، HTML,CSS,JS است.
  • UX سمت سرور می باشد و کدهای آن قابل رویت برای کاربر نیست اما در مقابل UI سمت کاربر بوده و کاربر به راحتی می تواند کدها را مشاهده کند.

 

160 بازدید


اشتراک گذاری کنید:


رضا دهقان

رضا دهقان اینستاگرام
طراح و توسعه دهنده وب | فارغ التحصیل مهندسی امنیت اطلاعات

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


هنوز دیدگاهی ارسال نشده! نظر شما چیست؟