اگر کمی با دنیای طراحی، مخصوصا طراحی وب آشنا باشید، بارها به عبارت Ui و Ux برخوردید. دو سرواژهای که همیشه کنار هم میآیند. اما معنی اینها چیست؟ اگر از ده نفر بپرسید UI و UX چیست؟ ده جواب مختلف میشنوید. بیشتر افراد، کسانی که ظاهر یک سایت یا وب اپلیکیشن را طراحی میکنند “UI UX کار” مینامند. اما این واقعا تعریف درستی است؟ اصلا UI UX کار داریم؟
طراحی تجربه کاربری (UX) چیست؟
طراحی تجربه کاربری یا User Experience تمام جنبه های تعامل کاربر با شرکت، خدمات و محصولات شرکت را شامل می شود.طراح تجربه کاربری، سعی دارد تجربه کاربر از کار با یک سایت، محصول یا خدمات را بهبود دهد. یعنی من اگر طراح تجربهی کاربری جایی باشم، باید تمام مسیرهایی که مخاطب به ما میرسد را بشناسم، تمام سناریوهایی که ممکن است برای مخاطب پیش بیاید را حدس بزنم و سعی کنم کاربر در تمام این مسیرها تجربهای ایدهال داشته باشد و صد البته که در کنار این تجربه به اهدافی که مد نظر ما است برسد ( یعنی کاربر را به سمتی که میخواهیم هدایت کنیم). همینطور که میبینید این کار عملا نوعی تحقیق و بررسی است و خروجیاش میشود یک سری پیشنهاد و راهکار که به بخشهای دیگر شرکت داده میشود. بهبود ux میتواند تاثیر زیادی روی درآمد کسب و کار ما داشته باشد.
وظایف طراح تجربه کاربری UXd
- مدیریت و بررسی رفتار کاربر
- بررسی و انتخاب محتوا و متنهای استفاده شده در سایت یا محصول و …
- تمرکز روی اطلاعاتی که به کاربر داده میشود یا از او گرفته میشود
- بررسی بخش مارکتینگ
- و ….
طراحی رابط کاربری (UI) چیست؟
طراحی رابط کاربری یا User Interface طراحی رابط کاربری یعنی طراحی بخشهای از محصول دیجیتال که کاربر آن را میبیند و از آن استفاده میکند. طراح رابط کاربری عملا با طرحهای گرافیکی و پیاده کردن این طرحها در سایت سر و کار دارد. یعنی بخشی از این کار را گرافیستی که طرح سایت یا اپلیکیشن را میزند به عهده دارد و بخش دیگر را برنامهنویس front end که طرح نهایی را پیادهسازی میکند.
به طور کلی می توان گفت طراحی رابط کاربری سه بخش از محصول را تشکیل می دهد:
- Sense: شامل کنش و واکنش محصول در رابطه با ورودی کاربر و یا محیط های نمایش متفاوت است
- Skin : شامل نمایش بصری و گرافیکی محصول است
- Makeup :شامل دستورالعمل ها و نکات و راهنماهایی است که کمک می کند کاربر تجربه بهتری داشته باشد.
تفاوت طراحی رابط کاربری (UI) و تجربه کاربری (UX)
یک طراح تجربه کاربری تقریبا با تمام تیم تعامل دارد و باید به ابزارهای تحقیق و آنالیز مسلط باشد تا بتواند هدف از ایجاد محصول( سایت) را برآورده کند. اما در مقابل طراح رابط کاربری، وظیفهی طراحی و پیادهسازی رابط کاربری را با توجه به اهداف و نیازهایی که به او منتقل شده است دارد. همانطور که میبینیم دو مفهوم UI و UX با هم در ارتباط و تعامل هستند اما وظایف این دو با هم تفاوت اساسی دارد. توجه به تجربهی کاربری میتواند طراحی سایت ما را بهبود دهد و درنهایت به موفقیت کسب و کار ما کمک کند.
نرم افزارهای موردنیاز برای UI و UX :
طراحی UI و UX توسط طراحان گرافیک دیجیتال و طراح رابط کاربری معمولا با استفاده از نرم افزارهای طراحی عمومی و رایجی همچون فتوشاپ و کورل صورت می گیرد. اما با پیشرفت تکنولوژی، فراگیر شدن دیوایس های دیجیتال و دنیای مجازی در زندگی روزمره، این دو فاکتور مهم اهمیت بسیار زیادی پیدا کرده اند.
از این رو توجه هرچه بیشتر به کیفیت طراحی Ui و Ux درجایگاهی قرار گرفته است که احساس نیاز به ابزارهای تخصصی این رشته را در میان طراحان به شدت افزایش داده است.
خبر خوب اینکه مدتی است شرکت های متخصص تولید ابزارهای طراحی دیجیتال با ارائه ابزارهای تخصصی طراحی UI و UX این مشکل را برطرف کرده اند.
در ادامه ابزار ها و نرم افزارهایی که کمک زیادی به یک طراح رابط کاربری میکند را معرفی میکنیم.در ابتدا از ابزار های وایرفریمینگ (Wireframing) شروع خواهیم کرد.
وایرفریمینگ (Wireframing) چیست؟
وایرفریمینگ Wireframe ساختار اصلی یک صفحه است. در Wireframe ها از عناصر واقعی برای رابط کاربری استفاده نمیشود، بلکه از placeholder ها استفاده میشود؛ یعنی عناصر رابط کاربری بهصورت جعبهای و بهصورت کادر مشخص میشوند. در حال حاضر در فرآیند طراحی و توسعه از wireframe ها استفاده میشود تا ساختار مطالب صفحات و خواستههای کاربر را موردبررسی قرار گیرد.
معرفی ابزارهای وایرفریمینگ
۱.نرم افزار MockFlow
نرم افزار MockFlow یک برنامه ترکیبی آنلاین و آفلاین است که برای ایجاد wireframes از آن استفاده می شود که شامل یک کتابخانه بزرگ از اجزا و عناصر مختلف برای طراحی است.سرویس آنلاین Wireframe Pro محصولی از Mockflow است که علاوه بر ابزار طراحی ، ۲۵ گیگابایت فضای اختصاصی جهت ذخیره اطلاعات و مستندات و دسترسی ۵ کاربر برای هر پروژه را به شما می دهد.
Sketch:
اسکچ (sketch) بهعنوان یک ابزار طراحی تجربه کاربری و رابط کاربری برای اکثر طراحان وب جایگزین فتوشاپ شده است.روری بری مدیر سوپرب در سال 2017 تصمیم به استفاده از اسکچ گرفت و اکنون بهشدت آن را توصیه میکند. به گفته او ” من ده سال بهعنوان کاربری بودم که از فتوشاپ استفاده میکردم و لذا تغییر و یادگیری یک چیز جدید برایم بسیار سخت بود اما بعد از اولین روز استفاده از اسکچ دیگر دوست نداشتم از فتوشاپ استفاده کنم و کاملا همه چیز وارونه شد”.
او دلایل زیادی را در این زمینه عنوان میکند: “در مقایسه با فتوشاپ تمام اسنادی که دارید و باید روی آنها بازبینی انجام دهید خیلی راحتتر مرتب میشوند. اسکچ اسناد کوچکی دارد، درحالیکه فتوشاپ دارای اسناد با حجم زیاد است. در اسکچ به دلیل ساختار اپِ بردار گونهای که دارد اندازه فایلها در مقایسه با فتوشاپ کوچکترند”
Adobe xd:

adobe XD یک ابزار طراحی وب سایت است که رقیب اسکچ است دارای رابطی روشن میباشد که به شما این امکان را میدهد که بهسادگی بتوانید مفهوم و یا نمونهای را پیادهسازی کنید.
نرم افزار ادوبی ایکس دی (Adobe xd) یک جایگزین خوب برای طراحی اپلیکیشن و وبسایت می باشد که به صورت رایگان در اختیار کاربران قرار گرفته است. این برنامه این قابلیت را به شما می دهد که طرح خود را در پلتفرم های مختلف به نمایش بگذارید و قبل از اجرای نهایی طرح پیش نمایش کاملی از طرح خود داشته باشید تا به راحتی بتوانید در مورد طراحی و ویرایش طرح خود تصمیم گیری کنید.
ویژگی های نرم افزار ادوبی ایکس دی (Adobe xd)
-
یک ابزاری جامع و پر کاربرد برای طراحی prototype / ui/ ux می باشد
-
به کمک ادوبی ایکس دی (Adobe xd) می توانید با چند کلیک نمونه اولیه مورد نظر خود را طراحی کنید
-
نرم افزاری مناسب برای طراحی واسط کاربری و تجربه کاربری
-
پشتیبانی از سیستم عامل ویندوز و مک
-
ساده سازی فرایند برای طراحی رابط کاربری
-
با فرمت های گرافیکی وکتور سازگاری کامل دارد
-
طراحی رابط های گرافیکی زیبا و کاربردی
-
Adobe xd یک نرم افزار مناسب برای مبتدیان طراحی UI/UX
-
تهیه خروجی در انواع فرمت های گرافیکی
-
توانایی کار با نمادها
-
سرعت بخشیدن به عملیات
-
ایجاد طرح اولیه از نمای کلی وب سایت و اپلیکیشن
-
دارای المان طراحی نمونه های تعاملی
-
قابلیت به اشتراک گذاری آسان طرح ها را دارد
-
دارای پنل عناصر انواع آیکون ها، نمادها و …
-
Adobe xd سازگاری کامل با سایر نرم افزارهای ادوبی دارد
-
توانایی و اصول طراحی رابط کاربری
-
ایجاد افکت های بلور به سادگی
-
Adobe xd دارای رابط کاربری ساده، کاربر پسند و کاربردی است
-
دارای کلیدهای میانبر
-
قابلیت ویرایش نمادها، رنگ ها و نوع کتابخانه ها
پلاگین های ادوبی ایکس دی (Adobe xd)
این برنامه با پلاگین های زیادی از قبیل پلاگین طراحی، پلاگین انیمیشن و… سازگاری دارد. تغییر اندازه عکس ها و اشیاء در اندازه های مختلف را در جلوه های هنری تنظیم می کند و صفحه نمایش را به طور خودکار برای سیستم های مختلف از قبیل تلفن همراه و کامپیوتر تنظیم می کند. با استفاده از نرم افزار Adobe XD می توان فایل های صوتی را تهیه کرد و می توان پیش نمایش آن ها را نیز مشاهده کرد. این نرم افزار اگر با نرم افزار After Effects ادغام شود می توان تصاویر انیمیشن و متحرک زیبایی خلق کند.
ارتباط و پیوستگی میان نرم افزارهای ادوبی
همچنان که قبلاً اشاره کردیم راه های زیادی برای طراحی و ایجاد ظاهر یک برنامه وجود دارد. به عنوان یک کاربر من از محصولات دوست داشتنی Adobe، اغلب از ایلستریتور (Illustrator) و فتوشاپ (photoshop) استفاده می کنم. Illustrator به من کمک می کند زمانی که عناصر UI را طراحی می کنم می توانم به راحتی آن را در ادوبی XD استفاده کنم.
این روند کاری است که من معمولاً برای طراحی آیکون ها انجام میدهم. ارتباط و هماهنگی بین نرم افزارهای ادوبی یکی از نقطه قوت های محصولات این شرکت است، شما همزمان میتوانید یک آیکون را در ادوبی ایلستریتور ویرایش کنید و نتیجه ویرایش را در ادوبی ایکس دی ببینید.
این ارتباط بین نرم افزارها به طراحان کمک بسیار زیادی در سرعت بخشیدن به کارها میکند و دست طراح را کاملاً باز میگذارد بطوریکه زمانیکه از یک نرم افزار ادوبی استفاده میکنیم همزمان میتوانیم از امکانات بقیه ی نرم افزارهای ادوبی هم برای پروژه خودمان استفاده کنیم.
انتشار و اشتراک گذاری پروتوتایپ برای بازخورد کاربران دیگر
ساخت لینک های اشتراک برای دریافت بازخورد در مورد پروژه های شما و همچنین Embed کردن لینک در سایت هایی نظیر بیهنس (Behance) یکی از دیگر ویژگی های جالب ادوبی ایکس دی است که به شما این امکان را میدهد که نظر افراد دیگر را در مورد پروژه و پروتوتایپ خود بدانید، طراحی خود را تغییر دهید و دوباره کاربران روی کار شما نظر دهند و بازخورد کاربران را دریافت کنید، این مورد به بهتر شدن پروژه ی شما کمک بسیار زیادی خواهد کرد.