جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگمقالاتبرنامه نویسیUI چیست؟

UI چیست؟

5 آذر 1400
ارسال شده توسط همیار من
برنامه نویسی ، دوره های رایگان ، مقالات
348 بازدید

UI واژه‌ای معروف در عین حال گیج‌کننده در حوزه طراحی وب و اپلیکیشن است. در گذشته در مقاله‌ای تفاوت UI و UX را بررسی کرده بودیم، اما امروز قصد داریم به صورت کاملاً اختصاصی به سوال UI چیست؟ پاسخ دهیم و به معنا و کاربرد آن بپردازیم.UI چیست؟

UI در لغت مخفف عبارت User Interface است که در فارسی به عبارت “رابط کاربری” ترجمه می‌شود. در واقع به بخشی از طراحی گفته می‌شود که کاربر مستقیماً با آن در ارتباط است. برای نمونه صفحه موبایل شما دارای یک رابط کاربری گرافیکی است. شما به کمک پنل‌های مدیریتی موجود می‌توانید تنظیمات موبایل خود را انجام دهید.

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

انواع طراحی رابط کاربری

فهرست عناوین

    • انواع طراحی رابط کاربری
    • تفاوت UI و UX چیست؟
  • در طراحی UI باید به چه مواردی توجه کرد؟
      • ۱- ایجاد تجربه‌ی لذت بخش برای کاربر
      • ۲-حفظ ارزش نام تجاری و برند
      • ۳- توجه به کارکرد و استفاده پذیری
  • چگونه طراحی UI حرفه‌ای‌تری داشته باشیم؟

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

  1. رابط کاربری گرافیکی: رابط کاربری با ظاهر بصری، مثل همین رابط گرافیکی ویندوز که می‌توانید ویندوز را مدیریت کنید.
  2. رابط کنترل صدا: کنترل نرم‌افزار با صدای کاربر، مثل دستیارهای صوتی هوشمند از جمله الکسا
  3. رابط مبتنی بر حرکت: کنترل نرم‌افزار با حرکات بدنی کاربر، مثل بازی‌های واقعیت مجازی

تفاوت UI و UX چیست؟

احتمالا در کنار نام UI، عبارت UX هم شنیده باشید. این دو مفهوم در کنار هم باعث می‌شوند که طراحی شما قابل پذیرش باشد. UX در واژه به معنای تجربه‌ی کاربری است که ترجمه شده‌ی عبارت User Experience‌ می‌باشد. در واقع تجربه‌ی کاربری بیشتر احساسات و حس تجربه‌ی کاربر را پوشش می‌دهد. اینکه کاربر چقدر با طراحی شما ارتباط برقرار کند به مبحث UX وابسته است.

برای درک راحت‌تر مفهوم به سراغ یک مثال می‌روم! فرض کنید قصد دارید یک فرم برای خبرنامه طراحی کنید. اینکه ظاهر فیلدها، دکمه‌ها چه طور باشد در مبحث UI مورد بحث قرار می‌گیرد، اما تعداد فیلدهای فرم، محل قرار گیری فرم خبرنامه و… در بحث UX قابل بررسی است.

در طراحی UI باید به چه مواردی توجه کرد؟

طراحی رابط کاربری چیست؟

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

۱- ایجاد تجربه‌ی لذت بخش برای کاربر

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

مطالب پیشنهادی همیارمن:

  • تفاوت صفحات استاتیک و داینامیک در وب‌سایت
  • چگونه اکانت اینستاگرام خود را به طور موقت غیرفعال کنیم؟
  • آموزش فرم‌های ورودی در بوت‌استرپ ۴
  • راهنمای نصب ویژوال استودیو در ویندوز 10

۲-حفظ ارزش نام تجاری و برند

طراحی رابط کاربری ایده‌آل، طرحی است که احساسات کاربر را درگیر می‌کند. در بخش‌هایی که احساسات کاربر برانگیخته شده، فرصت مناسبی برای معرفی برند است.

۳- توجه به کارکرد و استفاده پذیری

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

چگونه طراحی UI حرفه‌ای‌تری داشته باشیم؟

۱- قابلیت کشف و تشخیص را حفظ کنید: باید تمامی المان‌ها و بخش‌ها از سایرین قابل تفکیک باشد. برای مثال می‌توانید با سایه دادن به دکمه‌ها آنها را از صفحه تفکیک کنید.

۲- سادگی را در طراحی حفظ کنید: همیشه طراحی خلوت و ساده‌تر باعث می‌شود کاربر قدرت تصمیم‌گیری و مسیریابی بهتری برای رسیدن به اهداف خود داشته باشد و کار کردن با نرم‌افزار یا وب‌سایت شما آسان‌تر باشد.

۳- به مراحل تمرکز و دید کاربر توجه کنید: همیشه باید مهم‌ترین بخش‌ها در کانون توجه قرار گیرند و موارد کم کاربردتر در حاشیه کار باشند.

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

طراحی UI با الگوی Z

۴– با اقدامات ذخیره سازی و پیش‌بینی کننده بار را از دوش کاربر بردارید: برای نمونه در تکمیل فرم‌ها می‌توان اطلاعاتی از کاربر را در فرم‌ها نمایش داد که هر بار کاربر مجبور به بازنویسی آن نباشد.

۵-مراحل اجرای کار را ساده طراحی کنید: گفته می‌شود بهترین رابط کاربری، سیستمی است که نیاز به توضیحات و فایل راهنما ندارد! یعنی آنقدر مراحل برای کاربران قابل درک باشد که دیگر نیاز به توضیحات نداشته باشند.

اشتراک گذاری:
برچسب ها: one ui چیستui چیستui سیستم چیستآموزش برنامه نویسیبرنامه نویسیتعريف uiتعریف uiتعریف ui uxتعریف ui و uxچیست ui uxطراحیطراحی ui چیست
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...

کسب درآمد از آموزش آنلاین چگونه است؟

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

بهترین ابزارهای رایگان برای حذف پس زمینه تصاویر

برای حذف پس زمینه تصاویر ابزارهای متعددی در اینترنت وجود دارد. هر کدام از آن‌ها...
همیارمن

افزایش امنیت پیج اینستاگرام 😎😎

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

آموزش افزودن تصویر به دسته بندی در وردپرس

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

راه های خنک کردن گوشی موبایل های داغ شده

تا چند سال پیش، نهایت کاری که گوشی‌های موبایل برای ما انجام می‌دادند، ارسال پیامک...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت