اصول و مراحل طراحی UI چیست؟

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

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

تمامی این موارد مربوط به رابط کاربری یا UI سایت است. UI مخفف شده  User Interface می‌باشد و به معنای رابط کاربری است. آژانس خلاقیت “نما سه” در تلاش است تا اطلاعات مفید و کاربردی را در خصوص کاربردهای UI Design در طراحی سایت و تأثیرات آن بر سئو سایت را در اختیار شما عزیزان قرار دهد.

 

UI (رابط کاربری) چیست؟

رابط کاربری یا Ui مخفف شده کلمه User Interface می‌باشد و همانطور که از نامش پیداست رابط میان کاربر با سیستم یا محصول است و ابزار تعاملی بین کاربر و صفحات وب، نرم‌افزار و سیستم عامل محصوب میشود. در واقع مخاطب از طریق UI با سیستم های مختلف میتواند ارتباط برقرار کند.  به ظاهر و یا هر چیزی که در صفحه نمایش باشد UI گفته میشود، که شامل تمامی المان های موجود در صفحه از جمله تصاویر، متن ها، دیاگرام ها، ماژولها، جداول، ویدئوها و همچنین رنگ و مکان آن ها می باشد.

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

 

تاریخچه UI

در دهه ۱۹۶۰ کار با سیستم های کامپیوتری به شکلی بود که کاربران دستورات خود را به صورت دستی به کامپیوتر وارد میکردند و رابط یا واسطی برای تعامل مستقیم کاربر باسیستم وجود نداشت. به این محیط هاری کاری Command Line Interface یا CLI گفته می‌شد.

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

در دهه ۱۹۷۰ شرکت Xerox اولین کامپیوتر شخصی که فقط یک رابط کاربری گرافیکی داشت را با نام Alto به بازارعرضه کرد و برای اولین بار بود که GUI معرفی شد. آلتو دارای موس و کیبورد بود که به کاربران این امکان را میداد تا با استفاده از موس و کلید‌های میانبر، با سیستم تعامل داشته باشند.

در دهه ۱۹۸۰  با معرفی کامپیوتر مکینتاش (Macintosh) توسط شرکت اپل،  GUIبه طور گسترده تری در صنعت طراحی و ساخت رایانه‌ها و نرم‌افزارها به کارگرفته شد. این سیستم دارای صفحه نمایش رنگی بود و در طراحی آن از تمامی ویژگی هایی که در رابط گرافیگی آلتو وجود داشت، استفاده شده بود و به طور کامل از GUI استفاده می‌کرد.

در دهه ۱۹۹۰ با معرفی ویندوز۳.۱ توسط شرکت مایکروسافت، GUI به مراحل بالا تری راه پیداکرد. این نسخه جدید شامل ویژگی هایی از جمله مدیریت فایل های گرافیکی، ویدئویی، ویرایشگر متن و ابزارهای جدید برای طراحی واسط گرافیکی بود. کمپانی مایکروسافت از تکنولوژی برنامه ‌نویسی Microsoft Visual Basic به عنوان ابزاری برای طراحی واسط کاربر در این نسخه استفاده می کرد.

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

سال ۲۰۰۷ مهم‌ترین سال در طراحی رابط کاربر به شمار می‌رود. در این سال بود که ساخت اپلیکیشن‌های متنوع برای محیط‌های کاربری مختلف رایج شد و انقلابی در صنعت طراحی UI و طراحی اپلیکیشن اتفاق افتاد.  در این سال شرکت اپل یک رابط کاربری گرافیکی لمسی پیشرفته را معرفی کرد و یک سال بعد در سال ۲۰۰۸ از اپ‌استور رونمایی کرد که دارای محیطی جذاب و جدیدی برای ارائه اپلیکیشن‌های مختلف به کاربران  بود. سه ماه بعد از معرفی اپ استور توسط شرکت اپل، گوگل هم اپ استور خود را معرفی کرد.

 

بخش‌های طراحی UI

تا اینجا با مفهمم UI(طراحی رابط کاربر) آشنا شدیم. ولی یکی از موضوعات مهم در طراحی یک رابط کاربری حرفه ای دانستن بخش‌های اصلی آن است. این بخش ها شامل:

• طراحی دیداری

قسمت دیداری یا بصری در طراحی رابط کاربری از اهمیت بسیار زیادی برخوردار است، زیرا اولین بخشی که مخاطب با آن ارتباط میگرد است. اگر این قسمت Visual Design خوبی نداشته باشد، ممکن است کاربرانتان را برا همیشه از دست بدهید. یک طراحی بصری خوب شامل:  استفاده درست از عکس‌ها، تایپوگرافی، طرح‌بندی، رنگ‌بندی، استفاده از المان‌های، به کارگیری المان‌های تصویری و… می‌باشد.

• طراحی گرافیکی

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

• رنگ‌بندی و هویت بصری

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

• تایپوگرافی

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

 

انواع طراحی UI

• رابط کاربری لمسی
• رابط کاربری صوتی (VUI)
• رابط کاربری مبتنی بر منو
• رابط کاربری مبتنی بر فرم
• رابط کاربری خط فرمان (CLI)
• رابط کاربری زبان طبیعی (LUI یا NLUI)
• رابط کاربری گرافیکی GUI))