رابط کاربری گرافیکی (GUI) چیست؟ تعریف، عناصر و مزایا

دستگاه‌های رایج مانند گوشی‌های هوشمند، رایانه‌ها و تبلت‌ها همگی دارای یک جزء بصری هستند که به عنوان رابط کاربری گرافیکی (GUI) شناخته می‌شود.

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

رابط کاربری گرافیکی چیست؟

GUI مخفف Graphical user interface (رابط کاربری گرافیکی) است؛ رابطی که به کاربران امکان می دهد از طریق عناصر گرافیکی با دستگاه های الکترونیکی مانند رایانه ها، لپ تاپ ها، تلفن های هوشمند و تبلت ها تعامل داشته باشند. این بخش با ارزشی از برنامه‌نویسی نرم‌افزار کاربردی در رابطه با تعامل انسان و رایانه است و دستورات مبتنی بر متن را با اقدامات کاربر پسند جایگزین می‌کند. هدف آن ارائه نقاط تصمیم گیری به کاربر است که یافتن، درک و استفاده آسان است. به عبارت دیگر، رابط کاربری گرافیکی به شما امکان می دهد دستگاه خود را با ماوس، قلم یا حتی انگشت خود کنترل کنید.

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

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

مرتبط: تفاوت بین CUI و GUI چیست؟

عناصر رابط کاربری گرافیکی

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

۱. کنترل های ورودی – Input controls

در اینجا نمونه هایی از عناصر کنترل ورودی GUI آورده شده است:

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

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

• انتخابگر تاریخ: انتخابگر تاریخ به شما امکان می دهد تاریخ و/یا زمان را انتخاب کنید. سازنده می تواند یک تقویم یا یک گزینه پر کردن را انتخاب کند. این تضمین می کند که یک قالب ثابت استفاده می شود، مانند “روز، ماه، سال”.

• لیست های کشویی : لیست های کشویی به شما امکان می دهد هر بار یک مورد را انتخاب کنید. چندین مورد را می توان به صورت فشرده گنجاند. برای اینکه کاربر بداند چه کاری باید انجام دهد، دستورالعمل‌هایی مانند «انتخاب یکی» را اضافه کنید. سازنده می تواند موارد را اضافه یا حذف کند تا لیست را به روز نگه دارد.

• جعبه‌های فهرست: جعبه‌های فهرست به شما امکان می‌دهند چندین مورد را از یک فهرست فشرده انتخاب کنید. اگر فهرست طولانی از گزینه‌ها را برای کاربر دارید، از این ویژگی رابط کاربری گرافیکی استفاده کنید. چهار نوع از جعبه های لیست وجود دارد: تک خطی، چند انتخابی، چند انتخابی با چک باکس ها و جعبه های فهرست چند انتخابی-دوگانه.

• کادرهای متنی: کادرهای متنی فیلدی هستند که به شما امکان می دهند متن را وارد کنید. سازنده می تواند میزان مجاز متن را کنترل کند.

• جابجایی: دکمه‌های جابه‌جایی به شما امکان می‌دهند یک تنظیم را معمولاً در حالت خاموش/روشن تغییر دهید.

۲. اجزای ناوبری – Navigational components

در اینجا نمونه هایی از عناصر ناوبری GUI آورده شده است:

• Breadcrumbs: بردکرامز یک دنباله قابل کلیک از صفحات ادامه را ارائه می دهد. آنها نقشه بصری صفحات را برای سهولت ناوبری به شما می دهند.

• نمادها: نماد یک تصویر کوچک است که به عنوان نماد برای کمک به شما در جهت یابی سیستم استفاده می شود. آنها معمولاً برای نشان دادن یک برنامه، پوشه، فایل یا مرورگر وب استفاده می شوند. استفاده از نماد یک راه سریع برای باز کردن اسناد و اجرای برنامه ها است. همچنین تمام فایل هایی که در یک برنامه ایجاد می کنید دارای نماد برنامه و پسوند یکسان خواهند بود.

• چرخ فلک تصویر یک چرخ فلک تصویر به شما امکان می دهد در مجموعه ای از تصاویر پیمایش کنید و تصویری را که می خواهید بزرگ شده ببینید انتخاب کنید. چرخ فلک معمولاً تصاویر بند انگشتی را در خود نگه می‌دارد که ممکن است پیوند داده شوند.

• صفحه بندی: صفحه بندی محتوا را به صفحات تقسیم می کند و به شما امکان می دهد بین آنها رد شوید یا آنها را به ترتیب دنبال کنید.

• فیلد جستجو: کادر جستجو به شما امکان می دهد یک کلمه کلیدی یا عبارت را برای جستجوی یک فهرست برای نتایج مرتبط وارد کنید. آنها معمولاً جعبه های متنی یک خطی با دکمه جستجو هستند.

• لغزنده: یک نوار لغزنده دارای یک نوار و یک تیک است که روی آن می لغزد. سازنده می تواند اندازه نوار و تیک، حاشیه نوار و جهت آن را کنترل کند.

• برچسب‌ها: برچسب‌ها به شما امکان می‌دهند محتوایی را در همان دسته پیدا کنید. گزینه ها شامل دادن توانایی به کاربر برای اضافه کردن برچسب های خود به سیستم است.

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

بخوانید: ناوبری وب سایت: تعریف، اهمیت و نکات

۳. اجزای اطلاعاتی – Informational components

در اینجا نمونه هایی از عناصر اطلاعاتی GUI آورده شده است:

• جعبه پیام: جعبه پیام یک پنجره کوچک با اطلاعاتی مانند خط مشی یا سلب مسئولیت است. لازم است قبل از ادامه اقدام کنید.

• اعلان ها: اعلان یک جعبه پیام است. به طور معمول، آنها برای نشان دادن هشدارهای اضطراری، پیام های خطا یا تکمیل کار استفاده می شوند.

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

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

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

۴. ظروف – Containers

در اینجا مثالی از یک عنصر ظرف رابط کاربری گرافیکی آورده شده است:

• آکاردئون ها: آکاردئون ها لیست های انباشته ای از مواردی هستند که قابلیت نمایش و پنهان کردن دارند. هنگامی که روی برچسب کلیک می شود، لیست به اندازه کامل خود گسترش می یابد.

عناصر تعامل یک رابط کاربری گرافیکی

جدا از عناصر ساختاری، یک رابط کاربری گرافیکی همچنین دارای عناصر تعاملی است، مانند:

• مکان نما : مکان نما مکانی را نشان می دهد که سیستم ورودی بعدی را می پذیرد. این می تواند یک اشاره گر باشد که حرکات یک دستگاه اشاره گر را دنبال می کند – مانند ماوس – یا یک مکان نما متنی که نقطه تمرکز را در یک جعبه متن فعلی نشان می دهد.

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

• دسته های تنظیم: یک دسته به عنوان نشانگر عملیات کشیدن و رها کردن عمل می کند. هنگامی که کاربر برای شروع فرآیند کشیدن اشاره گر را روی دسته قرار می دهد، شکل آن به نمادی تغییر می کند که نشان دهنده تابع کشیدن است.

مزایای رابط کاربری گرافیکی چیست؟

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

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

استفاده از رابط کاربری گرافیکی مزایای بسیار دیگری نیز دارد. در اینجا برخی از رایج ترین آنها آورده شده است:

۱. استفاده آسان

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

۲. ارتباط آسان

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

۳. جذاب

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

۴. فراهم کننده میانبرها

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

۵. فراهم کننده امکان انجام چند کار

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