رابط کاربری یا UI چیست | به سادگی طراح UI شوید

در واقع اسکچ به شما این امکان را می‌دهد که محیط طراحیتان را به محیط‌های کاری دیگر توسعه دهید.

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

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

اما خب چون اول طرح و نقشه کار ریخته می‌شود و بعد با توجه به همان نقشه، نمای ظاهری ساخته می‌شود، UI را بخشی از UX می‌‌دانند. (برای درک بیشتر مقاله تفاوت UI و UX نوین را بخوانید)

طراحی سایت و اپلیکیشن سه قدم دارد:

اما یک طراح UI چه مهارت‌هایی لازم دارد؟

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

021-58438داخلی 1

چند ابزار محبوب طراحی UI

همان شکل و شمایل ظاهری و نقاط تعامل و آیکون‌ها و دکمه‌ها که در قالب UI دارد ارائه می‌شود، قسمتی از تجربه‌های کاربری کاربران را رقم میزند. یک UI خوب تبدیل می‌شود به یک تجربه عالی!

XD چندسال پیش (2015) ارائه شد، ولی چنان رشد سریعی داشت که خیلی زود توانست به یکی از اولین‌های دنیای طراحی تبدیل شود. می‌دانید چرا؟ به چند دلیل!

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

کمی تقلب کنیم؟

Adobe xd

2. Sketch

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

10 ابزار رایگان و کاربردی گوگل برای بازاریابان محتواحتما بخوانید: 10 ابزار رایگان و کاربردی گوگل برای بازاریابان محتوا

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

پیش به سوی حرفه‌ای شدن!

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

درست است که UI جزئی از UX محسوب می‎شود ولی اگر دقت کنید می‌بینید که تجربه کاربری یا UX از دل پیشرفت‌های UI بیرون آمده است؛ چون که باید جایی برای تعامل کاربران وجود داشته باشد تا بتوانند تجربه کنند و تجربه آن‌ها چه مثبت، چه منفی و چه خنثی باعث تغییر احساس کاربر شود.

UI چیست

طراحی UI مهم‌تر از همیشه

adobe xd

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

UI از کجا آمد؟

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

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

تو دوره فرصت‌های اینترنتی بهترین راه رو بهت نشون میدیم!
برای مشاوره رایگان، همین الان با ما تماس بگیرید.

شروع می‌کنم

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

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

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

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

تفاوت UI و UX

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

یادتان هست در مقدمه  از سایت‌های افتضاح یاد کردیم که دوست داشتید آن را بکوبید و از اول بسازید؟ بیایید برعکس آن را هم تصور کنید؛ گاهی وارد سایتی می‌شوید که از طراحی و کار کردن با آن لذت می‌برید و می‌گویید دست مریزاد به این طراح با سلیقه! هر دو مورد شما را قلقلک میدهد که دست به کار شوید و یک جهان را محو طراحی‌های زیبای خود کنید!

حالا همین تجربه‌های خوب و بد می‌شود زمینه‌ساز بهتر شدن رابط‌های کاربری!

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

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

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

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

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

همه ما می‌دانیم که UI و UX با هم تفاوت دارند، اما خب خیلی‌ها این دو مفهوم را به‌اشتباه به‌جای هم به کار می‌برند. پس بگذارید یک‌بار دیگر تعریف کوتاهی از هر کدام داشته باشیم.

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

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

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

در دهه 1980 اولین رابط کاربری گرافیکی توسط شرکت زیراکس (Xerox) توسعه پیدا کرد؛ با استفاده از این تغییر، کاربران می‌توانستند دستورات را از طریق آیکون‌ها، دکمه‌ها، منوها و باکس‌ها بفرستند و با کامپیوتر کار کنند. این به معنی بود که دیگر کدنویسی نیاز نبود و انقلاب در UI از همین زمان به بعد شکل گرفت.

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

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

از آنجایی کار طراحی UI برای نرم‌افزار‌ها و سایت‌ها انجام می‌شود، پای کدنویسی هم به میدان باز می‌شود؛ البته نه در حد یک برنامه‌نویس! درست است که طراحی رابط کاربری مرحله‌ای جدا در طراحی سایت و اپلیکیشن محسوب می‌شود، اما یک طراح حرفه‌ای UI باید کمی درباره UX و کمی هم از برنامه‌نویسی بداند.

دنبال یه کار پر درآمد از اینترنتی؟

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

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

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

بازاریابی سبز چیست و چگونه در آن موفق شویم؟حتما بخوانید: بازاریابی سبز چیست و چگونه در آن موفق شویم؟

 


منبع: https://www.novin.com/blog/what-is-ui/

UI و UX دو مفهوم هستند که حالا دو پایه اصلی کسب و کارهای اینترنتی را را تشکیل می‌دهند، اما این دو چه فرقی با هم دارند و چرا در کنار هم به‌کار برده می‌شوند؟

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

می‌خواهیم همین اول کمی داستان را لو بدهیم.

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

یکی از ویژگی‌های خوب این برنامه افزونه‌های گسترده آن است. برای مثال افزونه‌هایی مانند Sketch2React می‌توانید طرح‌های خود را تبدیل به کد کنید و بعداً آن‌ها را به HTML بفرستید. به این ترتیب، صفحات وب ساده‌ای نیز از طرح‌های خود بسازید.

استراتژی STP چیست؟ شاه کلید موفقیت در بازاریابی!!!حتما بخوانید: استراتژی STP چیست؟ شاه کلید موفقیت در بازاریابی!!!

صدای ذهن شما را می‌شنوم که می‌گوید: «من را چه به طراحی؟ مگر من گرافیستم؟ کی حوصله دارد برنامه‌نویسی یاد بگیرد و این نرم‌افزارهایی که آدم را گیج می‌کند! من تابه‌حال نه یک خط کد نوشتم نه نرم افزار طراحی را باز کرده‌ام! اصلاٌ خودتان گفتید که کمی علم طراحی و برنامه نویسی لازم است، پس من را معاف کنید!»

منظور از UX یا تجربه کاربری هم آن تجربه و حسی است که کاربر در هنگام تعامل با بخش‌های مختلف از محصولات و سرویس‌های یک شرکت (قبل از استفاده، هنگام استفاده و بعد از آن) دارد.

خب با این حساب چه کسی می‌تواند کسب و کارهای اینترنتی را به این هدف مهم برساند؟

حالا برویم سراغ ادامه مقاله خودمان!

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

ui چیستبله، یک کارشناس UI کاربلد! کسی که این روزها سایت‌ها به شدت به آن‌ها نیاز دارند تا سهم بازار خود را حفظ کنند. کسی که می‌داند سایت را چگونه بچیند و سازماندهی کند که هم کار با آن راحت باشد و هم خوش فرم و دلبر باشد.

و صد البته مثل بقیه حرفه‌ای‌ها درآمد بالایی هم نصیبتان شود.

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

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

به عنوان یک طراح UI، چه چیزهایی باید بلد باشید؟

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

SKETCH / ابزار طراحی UI

3. Figma

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

1. Adobe XD

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

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