اگه دنبال یه طرح ui برای تمرین هستید میتونید از این طرح فیگما استفاده کنید

🌐 Link

#ui #ux #figma

@CleverDevs
@CleverDevsGp

اصلا این UI / UX که میگن چیه؟!

✨ | اول از همه به معنی لُغَویشون بپردازیم، User Interface که به اختصار بهش UI میگن، رابط کاربری هستش که شامل تم و تناژ رنگ ، اندازه و موقعیت کادر ها ، انیمیشن های مختلف و درواقع دیزاین و چهره نرم‌افزار یا وب‌سایت هستش.

🏎 | و User Experience که به اختصار بهش UX میگن، تجربه کاربری هستش که شامل طراحی رابط کاربری به نحوی که کاربر اول از همه توجهش جلب شه و با کمترین حرکت به سرعت بازخورد بگیره؛ برای مثال پیج سرچ گوگل که کاملا ساده و بدون محتوای اضافی بصورت مینیمالیست طراحی شده.

در واقع این ترکیب جدا نشدنی هستن و در حضور یکدیگر اثربخش میباشند، قسمت کامنت ها نمونه ای از UI/UX نادرست و درست قرار گرفته، اگه دوست دارید ترفنداش رو به مرور قرار بدیم ری اکشن یادتون نره.❤️

#UI / #UX
@CleverDevs
@CleverDevsGp

👈 5 ترفند روانشناختی مورد استفاده در UX و UI(پارت1) :

1. Isolation

یه روانشناس آلمانی به اسم Hedwig von Restorff تو سال 1933 طی یه آزمایش چند تا آیتم شبیه به هم و یک آیتم متفاوت رو کنار هم گذاشت و طبق بررسی مشخص شد که اون آیتم متفاوت کنار آیتم‌های یکسان، توجه خیلی بیشتری رو جلب میکنه.

حالا تو سایت چه استفاده‌ای داره؟
میتونیم توی اسلایدری که محصولمون رو گذاشتیم، اسلایدی که زودتر باید فروش بره رو به یه نحوی نسبت به بقیه اسلاید ها مجزا کنیم(مثل تصویر).

#UX #UI src
@CleverDevs - @CleverDevsGp

👈 5 ترفند روانشناختی مورد استفاده در UX و UI (پارت2) :

2. Mirroring

اگه تو خیابون یکی رو ببینید که داره میخنده، احتمالا شما هم لبخند میزنید؛ به این میگن mirroring.

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

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

مثال برنامه Duolingo یه جغد anthropomorphized یا انسان‌سازی شده داره که احساسات رو از طریق اون به کاربر منتقل میکنه.

#UX #UI src part1
@CleverDevs - @CleverDevsGp

👈 5 ترفند روانشناختی مورد استفاده در UX و UI (پارت3) :

3. Social Proof

برای بررسی یا خرید چیزای جدید معمولا نظر دوستا و آشناهارو میپرسیم، چون بهشون اعتماد داریم.

حالا طراحا این اعتماد رو تو سایت چجوری اعتماد میکنن؟

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

یا دیجی‌کالا اولین بار یه نوشته بالای کامنت‌ها اضافه کرد که نشون میداد شخصی که کامنت رو گذاشته خریده این محصول رو یا نه.

و همچنین گزینه‌های لایک و دیس‌لایک و ... .


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

#UX #UI src part2
@CleverDevs - @CleverDevsGp

👈 5 ترفند روانشناختی مورد استفاده در UX و UI(پارت4) :

4. Peak end rule

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

حالا چطور از این قانون توی طراحی استفاده میشه؟

اصلی‌ترین مطالب و .. که نسبت به سایر بخش‌ها مهم‌تره تا توسط کاربر دیده یا کلیک و .. شه توی اول یا انتهای وبسایت قرار میگیره.

+ برای همینه که تو اکثر وبسایت‌ها سرچ‌باکس اول صفحه هست، یا تبلیغات آخر صفحه گذاشته میشه.

#UX #UI src part3
@CleverDevs - @CleverDevsGp

درود دوستان طی هفته گذشته داشتم یه وبسایت با nextjs توسعه میدادم و برای ui دنبال component های آماده و زیبا و کاربر پسند بودم که به این لایبرری ها و وبسایت ها بر خوردم، امیدوارم به شما هم کمک کنن.

01. shadcn
02. nextui‌
03. mui
04. chakra
05. tailwind
06. aceternity
07. preline
08. tailus
09. flowbite
10. daisyui
11. mantine
12. ariakit
13. primevue

موفق باشید🌹

#UI #Next #React
@CleverDevs @CleverDevsGp