UI رابط کاربری چیست ؟ نقش UI در طراحی سایت

UI رابط کاربری چیست و نقش UI در طراحی سایت

 

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

 

در ادامه برای بهتر درک کردن مفهوم (UI Designer) UI را توضیح میدهیم .

 

 طراحی وب سایت آیکو

UI چیست؟

 

 

در ابتدا یک تاریخچه کوتاه از UI رابیان میکنیم.

در گذشته و در دهه ۱۹۷۰ اگر می‌خواستید از رایانه خود استفاده کنید باید از رابط خط فرمان (command line)  رایانه خود استفاده می‌کردید که این خود کار کلی از وقت و زمان شما را می گرفت.

رابط ‌های گرافیکی امروزی در آن زمان هنوز طراحی نشده بودند و حتی از نظر تجاری هنوز جایی در میان رابط‌ های کاربری نداشتند .

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

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

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

 

تعریف UI

 

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

همان طور که بیان کردیم ظاهر سایت برای این گونه افراد طراح از اهمیت بالایی برخوردار است و برخلاف طراحان UX که بر روی حس کلی کار تمرکز میکنند طراحان UI بر روی نحوه ارائه محصول و ظاهر سایت کارو فعالیت میکنند.

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

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

 

 

طراحی رابط کاربری شامل موارد زیر میباشد :

• 1 – ظاهر و حس: آنالیز مشتری / تحقیقات طراحی / توسعه برند و گرافیک / راهنما کاربر
• 2 – پاسخگو بودن و تعامل: طرح اولیه UI / طراحی دینامیک / طراحی ریسپانسیو / پیاده سازی همگام با توسعه دهنده

 

وظایف طراح UI

 

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

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

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

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

همانطور که مشاهده کردید طراحی رابط کاربر اصولی دارد که در ادامه به چند مورد اشاره می‌کنیم.

 

• ساختار

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

 

• سادگی

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

 

• دسترسی

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

 

• دقت در طراحی

در طراحی صفحات سایت یا اپلیکیشن دقت کنید تا بروز خطا را به صفر برسانید. قرار است UI مناسبی به دست بدهید تا UX قابل قبولی داشته باشید. بنابراین به وظایف کلی زیر می‌رسیم:

1- توجه به خصوصیات ظاهری در کار که شامل طراحی برند و گرافیک ، راهنمای کاربر ، آنالیز مشتری ، تحقیق طراحی می‌شود.

2- توجه به ویژگی پاسخگویی و تعاملی بودن که برای دستیابی به آن پیاده کردن تنظیمات خاص برای همه ابعاد مانیتورها ، توجه به تعاملی بودن و انیمیشن ، پیاده‌سازی طراحی همراه با برنامه نویس پروژه و ایجاد نمونه‌های اولیه UI ، الزامی خواهد بود .

 

شرکت آیکو وب 

 

مثال‌هایی از UI

 

• ظاهر منو چگونه است و فیلد ان چه رنگی و به چه صورت باز میشوند؟
• رنگ دکمه‌ی جستجو هماهنگی با بقیه قسمت ها دارد؟

 

یک نمونه UI خوب رو در تصویر زیر میبینید

 

 

رابط کاربری خوب شامل چه ویژگی هایی می شود؟

ایجاد یک رابط کاربری خوب و خوشایند بدون استفاده از همه تکنیک‌های کاربردی زیر امکان‌پذیر نخواهد بود:

 

1_طراحی بصری:

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

 

2_رنگ‌ها:

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

 

3_طراحی گرافیک:

Graphic Design وظیفه ترکیب تایپوگرافی یا تصاویر یا آیتم‌های گرافیکی متحرک به گونه‌ای است که بتوانند مخاطب را تحت تأثیر قرار بدهند و آن را جذب نماید.

 

4_موکاپ :

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

 

5_تایپوگرافی:

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

 

ابزارهای یک طراح رابط کاربری Ui

 

در بخش طراحی گرافیکی معمولا ۴ ابزار بیشتر از همه کاربرد دارند:

 

• قلم و کاغذ: برای طراحی ساده و نسخه‌ی اولیه استفاده می شوند. گاهی هم این طرح را با فتوشاپ یا یک ابزار ساده طراحی می کنند.
  این طرح فقط برای آن است که گرافیست یا همان طراح وب سایت ذهنیت خود را به بقیه‌ی اعضای تیم نشان دهد و با آن‌ها در کلیت کار هم‌نظر شود.

 

• فتوشاپ یا ایلوستریتو:این دو ابزار به صورت ویژه برای طراحی رابط کاربری طراحی نشده‌اند اما در عمل بیشتر طراحی‌های رابط کاربری با کمک این دو ابزار معروف انجام می‌شود.
  در ایران بیشتر طرح‌ها با یکی از این دو ابزار تولید می‌شود.

 

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

 

• Adobe xd: شرکت ادوبی برای اینکه در مقابل Sketch احساس ضعف نکند، نرم‌افزار اختصاصی و رایگان خود را با نام Adobe xd طراحی کرد که روی ویندوز هم کار می‌کند و در نسخه‌های جدید سیستم واقعا کاربردی است.

 

 

درآمد و فرصت شغلی ui کار به چه صورت و چگونه است؟

 

 

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

 

• موقعیت

لوکیشن یا موقعیت زندگی فردی جزو اولین ویژگی هایی است که می‌تواند در میزان حقوق فرد طراح تاثیربگذارد. برای مثال فرد ui کار در تهران نسبت به فردی که در شهر دیگری فعالیت دارد حقوق بیشتری در زمینه کاری خود دریافت می‌کند.

 

• میزان تجربه کاری فرد

فردی که یک سال در زمینه ui تجربه کاری داشته باشد با فردی که 4 سال در این زمینه فعالیت داشته مثل تمامی مشاغل به طبع دارای تفاوت در میزان حقوق هستند.

 

• کار به عنوان فریلنسر و یا کارمند

انتخاب توانایی در زمینه کار به عنوان یک ui کار چه به عنوان یک فریلنسر و چه به عنوان یک کارمند می‌تواند میزان حقوق متفاوتی را برای افراد شامل شود.

 

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

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

به عنوان مثال:

 

• Google slides
• Cog Tool
• Justin mind
• In Vision
• Sketch
• Adobe XD
• Keynote