[ چه تصاویر آشنایی ]
خب تا اینجا دیدم ما بدون اینکه اطلاعی از بینایی انسان و HSL داشته باشیم در زندگی روزمره مون ازش استفاده میکردیم.
تصاویر بالارو احتمالا خیلی از طراح ها، از خورشید توی آسمون بیشتر دیدنش :) اولی که خیلی آشناست چون پنجره ی انتخاب رنگ پیشفرض فتوشاپه و جالب اینکه پیشفرض فتوشاپ ساختار HSL هست (دورش خط کشیدم) احتمالا به این دلیل که میدونستن اینجوری برای ما راحتتره (برای اثباتش حالت رنگ رو به RGB تغییر بدید تا ببینید چه مکافاتی داره انتخاب فقط یه رنگ سفید).
توی این تصویر هم سه پارامتر رو میتونیم ببینیم:
محور افقی که S هست با حرکت روی این محور غلظت رنگتون کم یا زیاد میشه ( از صفر تا ۱۰۰ درصد).
محور عمودی هم L هست که با حرکت روی اون روشنایی رنگمون کم یا زیاد میشه ( از صفر تا ۱۰۰ درصد).
حالا H رو هم مثه یه نوار میبینید کنار این دوتا قرار داره که مقادیرش از ۰ تا ۳۵۹ هست (همون ۳۶۰ درجه ی دایره).
الان که خودم این هارو یادگرفتم خیلی راحت تر میتونم رنگهارو ادیت کنم و به رنگ مورد نظر برسم یا به یه فرد دیگه بگم کدوم عدد رو عوض کنه تا به رنگ مورد نظر برسه(امیدوارم برای شما هم همینطورباشه).
@UIUXWorkshop
خب تا اینجا دیدم ما بدون اینکه اطلاعی از بینایی انسان و HSL داشته باشیم در زندگی روزمره مون ازش استفاده میکردیم.
تصاویر بالارو احتمالا خیلی از طراح ها، از خورشید توی آسمون بیشتر دیدنش :) اولی که خیلی آشناست چون پنجره ی انتخاب رنگ پیشفرض فتوشاپه و جالب اینکه پیشفرض فتوشاپ ساختار HSL هست (دورش خط کشیدم) احتمالا به این دلیل که میدونستن اینجوری برای ما راحتتره (برای اثباتش حالت رنگ رو به RGB تغییر بدید تا ببینید چه مکافاتی داره انتخاب فقط یه رنگ سفید).
توی این تصویر هم سه پارامتر رو میتونیم ببینیم:
محور افقی که S هست با حرکت روی این محور غلظت رنگتون کم یا زیاد میشه ( از صفر تا ۱۰۰ درصد).
محور عمودی هم L هست که با حرکت روی اون روشنایی رنگمون کم یا زیاد میشه ( از صفر تا ۱۰۰ درصد).
حالا H رو هم مثه یه نوار میبینید کنار این دوتا قرار داره که مقادیرش از ۰ تا ۳۵۹ هست (همون ۳۶۰ درجه ی دایره).
الان که خودم این هارو یادگرفتم خیلی راحت تر میتونم رنگهارو ادیت کنم و به رنگ مورد نظر برسم یا به یه فرد دیگه بگم کدوم عدد رو عوض کنه تا به رنگ مورد نظر برسه(امیدوارم برای شما هم همینطورباشه).
@UIUXWorkshop
اگر نکته ای درتکمیل نوشته های بالا میدونید و فکرمیکنید که میتونه برای بقیه هم مفید باشه برام ارسال کنید.
منبع چندخط اول پست اول و عکسش هم ویکی پدیای عزیزمونه :)
منبع چندخط اول پست اول و عکسش هم ویکی پدیای عزیزمونه :)
#ابزار#معرفی_سایت
https://uizard.io
اینم برای اونایی که دیجیتالی نیستن
از وایرفریم هایی که روی کاغذ میکشید عکس بگیرید، دیجیتالیشو تحویلتون میده :)
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
https://uizard.io
اینم برای اونایی که دیجیتالی نیستن
از وایرفریم هایی که روی کاغذ میکشید عکس بگیرید، دیجیتالیشو تحویلتون میده :)
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
✍🏻برای نشان دادن خطا در فرم های سایت، بهتر است دقیقا زیر همان المان فرم دلیل خطا را ذکر کنید.
در این سبک دیگر کاربر حس سردرگمی برای پیدا کردن علت خطا را ندارد. و با سرعت بیشتری اطلاعات خود را وارد می کند.
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
✍🏻برای نشان دادن خطا در فرم های سایت، بهتر است دقیقا زیر همان المان فرم دلیل خطا را ذکر کنید.
در این سبک دیگر کاربر حس سردرگمی برای پیدا کردن علت خطا را ندارد. و با سرعت بیشتری اطلاعات خود را وارد می کند.
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
🔰در فرم ثبت نام بهتر است به جای ایجاد کردن نام کاربری جدید، به طور پیش فرض از کاربر "شناسه ایمیل" یا "شماره موبایل" بخواهید.
🤔آنها شناسه ایمیل و شماره موبایل خود را به راحتی به یاد میاورند.
👇🏽👇🏽👇🏽
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
🔰در فرم ثبت نام بهتر است به جای ایجاد کردن نام کاربری جدید، به طور پیش فرض از کاربر "شناسه ایمیل" یا "شماره موبایل" بخواهید.
🤔آنها شناسه ایمیل و شماره موبایل خود را به راحتی به یاد میاورند.
👇🏽👇🏽👇🏽
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
🔰یک کار باحالی که میشه انجام داد در فرم هایی که نیاز به رمز عبور دارن ، اینه که کاربر قبل از زدن دکمه ی ورود ، رمز خودشو ببینه که اشتباه وارد نکرده باشه . ( وقتی روی اون ایکن چشم کلیک کنیم یا Hover اتفاق بیوفته ، رمز نمایان میشه )
شاید با این کار از باراضافی روی سرور و ایمیل های پشتیبانی و ... خیلی کم کنیم :) شاد باشید
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
🔰یک کار باحالی که میشه انجام داد در فرم هایی که نیاز به رمز عبور دارن ، اینه که کاربر قبل از زدن دکمه ی ورود ، رمز خودشو ببینه که اشتباه وارد نکرده باشه . ( وقتی روی اون ایکن چشم کلیک کنیم یا Hover اتفاق بیوفته ، رمز نمایان میشه )
شاید با این کار از باراضافی روی سرور و ایمیل های پشتیبانی و ... خیلی کم کنیم :) شاد باشید
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
سعی کنید هرگز از سیاه خالص (کد رنگ # 000000) برای متن یا بک گراند استفاده نکنید.
کنتراست بسیار بالا بین سفید و سیاه خالص باعث خستگی چشم و آزار کاربران میشود.
جایگزین مناسب، کد رنگ های خاکستری نزدیک به سیاه هستند...
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
سعی کنید هرگز از سیاه خالص (کد رنگ # 000000) برای متن یا بک گراند استفاده نکنید.
کنتراست بسیار بالا بین سفید و سیاه خالص باعث خستگی چشم و آزار کاربران میشود.
جایگزین مناسب، کد رنگ های خاکستری نزدیک به سیاه هستند...
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
This media is not supported in your browser
VIEW IN TELEGRAM
#نکات
با کمی خلاقیت در انتهای لودینگ ها ، به کاربر میشه این پیام رو داد که همه چیز به خوبی انجام شده ✅
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
با کمی خلاقیت در انتهای لودینگ ها ، به کاربر میشه این پیام رو داد که همه چیز به خوبی انجام شده ✅
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
کاربران این حس رو دارن که اپ ها (یا وبسایت ها) به سرعت درخواست هارو پاسخ میدن. پس منتظر موندن بیش از حد رو نشانه ی ضعف در اپ (یا وبسایت) یا ایراد فنی (نرم افزاری یا سخت افزاری ) درنظر میگیرن.
با استفاده صحیح از لودینگ ها میتونیم این حس رو درکاربران به شیوه ی درست ایجاد کنیم و به آنها نشون بدیم این عملیات زمان برهست و همه چیز داره به درستی پیش میره و نیازی نیست اپ ( یا سایت ) رو ببنده و یا شایدم سیستم رو ریستارت کنه :)).
بر اساس تحقیقی که در سال ۲۰۰۴ انجام شد ، زمان انتظار قابل تحمل برای بازیابی اطلاعات تقریبا ۴ ثانیه است ( بعضیا هم میگن ۲ثانیه).
اگر بخوایم نتیجه درستی بگیریم باید :
در تاخیرهای زیر ۱ثانیه هیچی نشون ندیم
در تاخیر های بین ۱تا ۴ثانیه اسپینر نشون بدیم (لودینگ های سریع و بینهایت)
برای تاخیرهای بالای ۴ثانیه پراگرس بار
پراگرس بار ها رو هم اگر بالای ۱ دقیقه بودن مقدار دقیقه اش رو بنویسید اگر زیر ۱ دقیقه بودن درصدشو بنویسید 🙂
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
با استفاده صحیح از لودینگ ها میتونیم این حس رو درکاربران به شیوه ی درست ایجاد کنیم و به آنها نشون بدیم این عملیات زمان برهست و همه چیز داره به درستی پیش میره و نیازی نیست اپ ( یا سایت ) رو ببنده و یا شایدم سیستم رو ریستارت کنه :)).
بر اساس تحقیقی که در سال ۲۰۰۴ انجام شد ، زمان انتظار قابل تحمل برای بازیابی اطلاعات تقریبا ۴ ثانیه است ( بعضیا هم میگن ۲ثانیه).
اگر بخوایم نتیجه درستی بگیریم باید :
در تاخیرهای زیر ۱ثانیه هیچی نشون ندیم
در تاخیر های بین ۱تا ۴ثانیه اسپینر نشون بدیم (لودینگ های سریع و بینهایت)
برای تاخیرهای بالای ۴ثانیه پراگرس بار
پراگرس بار ها رو هم اگر بالای ۱ دقیقه بودن مقدار دقیقه اش رو بنویسید اگر زیر ۱ دقیقه بودن درصدشو بنویسید 🙂
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
🔹برای استفاده از سایه ها در زیر باکس ها باید به یک نکته مهم توجه نمایید:
❌هیچ وقت سایه ها رو کامل اطراف باکس استفاده نکنید.این کار باعث غیرواقعی شدن طراحیتان می شود.
✔️بهتر است فقط سایه را در زیر باکس درج نمایید.
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
🔹برای استفاده از سایه ها در زیر باکس ها باید به یک نکته مهم توجه نمایید:
❌هیچ وقت سایه ها رو کامل اطراف باکس استفاده نکنید.این کار باعث غیرواقعی شدن طراحیتان می شود.
✔️بهتر است فقط سایه را در زیر باکس درج نمایید.
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
بهترین مکان برای نمایش اخطارها در فرمها ( فارسی ) ، پایین یا سمت چپ فیلد هست.
چون چشم کاربر اول فیلد رو رصد میکنه بعد اخطار رو میبینه.
اگر محدودیت فضا دارین و دیزاینتون بهم نمیریزه ، اخطار هارو زیر فیلد بذارین. در موبایل هم این مکان گزینه ی بهتری هست...
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
چون چشم کاربر اول فیلد رو رصد میکنه بعد اخطار رو میبینه.
اگر محدودیت فضا دارین و دیزاینتون بهم نمیریزه ، اخطار هارو زیر فیلد بذارین. در موبایل هم این مکان گزینه ی بهتری هست...
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
This media is not supported in your browser
VIEW IN TELEGRAM
از تصور اینکه موشن های موجود در اپ باید حتما عجیب و غریب و شلوغ باشن بیاید بیرون
همچین کارهای ساده ای هم میشه کرد که تیم توسعه بی دردسر پیاده اش کنن.
#کار_شخصی
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
همچین کارهای ساده ای هم میشه کرد که تیم توسعه بی دردسر پیاده اش کنن.
#کار_شخصی
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
توسعه دهندگان عزیز دقت داشته باشید همیشه ۳تا ۳تا ارقام رو از هم جدا کنیدتا خوندنش اینقد سخت نباشه :))
این هم یه صفحه فرعی از دیجی کالاست.
اگر دیدن اصلاحش کنن :)
@UIUXWorkshop
نکات آموزشی UI/UX
این هم یه صفحه فرعی از دیجی کالاست.
اگر دیدن اصلاحش کنن :)
@UIUXWorkshop
نکات آموزشی UI/UX
UIUX WorkShop
توسعه دهندگان عزیز دقت داشته باشید همیشه ۳تا ۳تا ارقام رو از هم جدا کنیدتا خوندنش اینقد سخت نباشه :)) این هم یه صفحه فرعی از دیجی کالاست. اگر دیدن اصلاحش کنن :) @UIUXWorkshop نکات آموزشی UI/UX
همین الان یکی از دوستان گفت ۱ساعت داشته با موس ۳رقم ۳رقم جدا میکرده تا بتونه بخونتش :))
🖐خسته نباشی دلاور خدا قوت پهلوان :))
🖐خسته نباشی دلاور خدا قوت پهلوان :))
https://cantunsee.space/
یه بازی خییییلی خفن مخصوص اونایی که ادعای دیزاینر بودن دارن :)) بشتابید
توی این بازی باید ببینید چقد چشم دیزاینی تون قوی هست
حالا بازی کنید خودتون متوجه میشید
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
یه بازی خییییلی خفن مخصوص اونایی که ادعای دیزاینر بودن دارن :)) بشتابید
توی این بازی باید ببینید چقد چشم دیزاینی تون قوی هست
حالا بازی کنید خودتون متوجه میشید
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
اسکرینشات اپلیکیشنهای ایرانی
http://uiscreenshots.ir
اشتراک از یادداشتهای یک همیشه دیزاینر
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
http://uiscreenshots.ir
اشتراک از یادداشتهای یک همیشه دیزاینر
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️