چطوری رابط کاربری ( ui ) طراحی کنیم ؟

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

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

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

فکر میکنم حالا دیگه تونستم راضی تون کنم که برای یک سایت ساده هم اول یک طرح وایرفریم و سپس یک طرح ui که همه بخش های سایت همخواهی داشته باشند تهیه کنید ! خب وایرفریم ساختن رو که اکثرا میدونیم چجوریه . میتونید با استفاده از قلم و کاغذ یک طرح پایه (یا همان وایرفریم) درست کنید . حتی میتونید از سایت هایی مانند wireframe.cc برای ایجاد وایرفریم استفاده کنید .

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

تعریف رابط کاربری و اهمیت آن

در واقع ui یا همان (user interface ) به معنای رابط کاربری است . برای بعضیا سوال پیش میاد که معنی رابط کاربری چی میتونه باشه ؟ رابط کاربری یعنی یک واسطه بین هدف از استفاده یک وسیله و استفاده کننده از وسیله ! فرض کنید شما یک اپلیکیشن برای کسب و کارتون تهییه میکنید و اولین چیزی که باید بهش توجه کنید اینه که چطوری جذب کاربران و مشتریان رو بیشتر و بهتر کنم؟ خب قطعا برای پوشش دادن این نقطه باید ui و تجربه کاربری قوی در کنار هم داشته باشیم . ( ui + ux )

چند ویژگی مهم رابط کاربری

باعث میشود از قبل نقشه یک پروژه رو تهیه کنیم

ساده کردن روند طراحی هر چیزی

ساده طراحی شدن طرح های ui

دید بازتر نسبت به نقاط قوت و ضعف یک پروژه

افزایش سرعت روند کار

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

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

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

با چه ابزاری رابط کاربری طراجی کنیم؟

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

نکات مهم در طراحی رابط کاربری

1. رنگ بندی ها
2. طراحی گرافیکی
3. تایپوگرافی
4. موکاپ
5. طراحی بصری

خلاصه مطلب:

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