https://virgool.ir/feed/@amir.dh.ui.uxمن امیرم. توی دنیای هنر غرقم؛ کارم طراحی محصول و در زمینه UI/UX فعالیت حرفه ای انجام میدم. تجربه های ساده تر و جذاب میسازم.fa2026-11-11 00:54:56https://files.virgool.ir/upload/users/4295119/avatar/B0pkyq.jpghttps://virgool.ir/@amir.dh.ui.uxhttps://virgool.ir/@amir.dh.ui.ux/کامپوننت-های-حمایتگر-uiux-wi1trcik0p0gکامپوننت های حمایتگر:اینجوری بگیم که کامپوننت‌های حمایتی عمل اصلی نیستند در واقع کاربر رو هدایت و همراهی می‌کنند تا به اون عمل اصلی برسه. اگر ازشون استفاده نکنیم یا اشتباه استفاده کنیم کاربر یک تجربه خشک، نامفهوم و پر از اشتباه براش شکل می‌گیره و حتی ممکنه دیگه هیچ وقت به سراغ رابط کاربری ما نیاد.Tooltip:این مورد خیلی ساده و جذابه. وقتی ما ماوسمون رو روی یک اِلمان نگه می‌داریم یا حتی کلیک می‌کنیم بعد از چند ثانیه یک کادر با متن مختصر ظاهر میشه که در واقع ما رو نسبت به عمل و کارایی اون اِلمان آگاه می‌کنه که بهش میگیم تول تیپ.مثال: وقتی روی آیکون دوربین در یک سایت می‌مونیم ظاهر میشه و بهمون میگه که این آیکون برای عکس گرفتن یا برای آپلود کردن عکس است.نکته ریز: اگه برای همه چیز میخوای تول تیپ بزاری یعنی طراحیت مشکل داره.Loader :این کامپوننت نجات دهنده است. کاربرها حوصله صبر کردن ندارند؛ پس بهتره که از یک لودر استفاده کنیم تا کاربر صبر کنه بدون اینکه حس کنه وقتش داره هدر میره یا حداقل براش جذاب تر باشه. البته برای انتظار های کوتاه.مثال: وقتی می‌خوایم صفحه رو مجدد بارگذاری کنیم یا به اصطلاح Refresh کنیم یک آیکون دایره‌ای در حال چرخش ظاهر می‌شه و توجه ما رو به خودش جلب میکنه.پیام اعتبار سنجی ( Validation messages ) :این کامپوننت در قالب پیام تایید یا پیام خطا ظاهر میشه و به طور کلی کارش اینه که رفتار درست رو به کاربر نشون بده و جلوگیری کنه از اشتباه کاربر تا کاربر بیش از حد معطل نشه و بخاطر اشتباهای ساده کلافه نشه.مثال: وقتی می‌خوایم یک رمز عبور انتخاب کنیم گاهی اوقات با پیام [ رمز عبور باید حداقل ۸ کاراکتر داشته باشد ] مواجه میشیم.اعلان ها ( Notifications ) :اعلان‌ها می‌تونند خیلی گسترده باشند و در جاهای مختلف رابط کاربری استفاده میشن. به طور کلی به کاربر کمک می‌کنند تا در اون لحظه از هر اتفاقی و هر وضعیتی در سیستم و رابط کاربری آگاه بشن.بیاید در قالب مثال چندین اعلان مختلف رو بررسی کنیم:+ اعلان نشان که کنار یک برنامه به شکل نقطه یا عدد به نمایش در میاد و به کاربر خبر میده که پیام خوانده نشده یا کار نیمه تمام داره.+ نشان وضعیت که با توجه به اسمش وضعیت فرایند یا یک آیتم خاص رو نشون میده مثل زمانی که در فضای مجازی آنلاین هستیم و این آنلاین بودن با یک رنگ سبز یا متن نشون داده می‌شود.+ اعلان هشدار که می‌تونه شامل ۴ وضعیت اطلاعات، موفقیت، اخطار و خطا باشد.۱- اعلان اطلاعات برای اطلاع رسانی مختصر و آموزنده به کاربر .۲- اعلان اخطار برای پیشگیری قبل از اینکه کاربر دچار مشکل اصلی شود.۳- اعلان خطا برای بیان یک خطا یا موقعیت اضطراری که نیاز به اقدام فوری کاربر دارد.۴- اعلان موفقیت برای منتقل کردن یک خبر خوب مانند تایید ارسال پیام به کاربر.Toast / Snackbar :دو کامپوننت حمایتی جذاب که خیلی به هم شبیه هستند؛ این کامپوننت‌ها پیام‌های کوتاهی هستند که در بالا یا پایین صفحه ظاهر میشن اما در جایگاه و تاثیری گذاری متفاوت هستند.اسنک بار :- پیام کوتاه که معمولا پایین صفحه ظاهر میشود.- یک دکمه دارد.- برای اطلاع رسانی و بازخورد لحظه ای کاربر ظاهر میشود.مثال: سفارش شما ارسال شد. [ مشاهده ]تُست :- پیام کوتاه که معمولا در پایین صفحه ظاهر میشود.- بدون دکمه است.- طرفا برای اطلاع رسانی به کاربر ظاهر میشود.مثال: فایل ذخیره شد.کلام آخر :در نهایت خیلی ساده باید بیان کنیم که کامپوننت‌های حمایتی واقعاً حمایتگر هستند؛ گستردگی زیادی دارند و در زمان استفاده از رابط‌های کاربری بارها باهاشون در تعامل هستیم و هدایتگر ما هستند بدون اینکه متوجهشون بشیم. یادگیری و استفاده از این کامپوننت‌ها باعث نرمی و روان‌تر شدن تجربه کاربر می‌شود؛ چیزی که همه ما به دنبالش هستیم.Amirdh.UixAmirdh.UixMon, 10 Nov 2025 15:27:30 +0330https://virgool.ir/@amir.dh.ui.ux/انواع-کنترل-انتخاب-در-ui-ux-hyyawdunmj5r کنترل های انتخاب در UI UXکنترل‌های انتخاب ( Selection Controls ) یه بخش مهم و کاربردی رابطه کاربری ما رو تشکیل می‌دهند. اونا باعث میشن که تعامل کاربر با رابط کاربری ساده بشه و در جمع آوری اطلاعات کاربر و اعمال کردن اونها بسیار مهم هستند. نکته ای که خیلی باید بهش توجه کنیم این است که کدوم نوع از کنترل های انتخاب رو برای چه کاری انتخاب کنیم.انواع کنترل های انتخاب:۱- چک باکس ( Check Box )نوعی از کنترل انتخاب که کاربر آزادی بیشتری داره؛ برای مواردی استفاده میشه که گزینه‌ها به هم ربط دارند و به نوعی در یک گروه قرار میگیرند. کاربر می‌تونه چندین گزینه و یا اصلاً هیچ گزینه‌ای رو انتخاب نکنه.ویژگی های طراحی: + داشتن عنوان کلی + یک انیمیشن ساده گرافیکی برای تیک خوردن + برای چک باکس از آیکون مربع استفاده میشود۲-‌ دکمه رادیویی ( Radio Button )در این نوع از کنترل انتخاب گزینه ها متفاوت هستند و فقط یکی از گزینه‌ها باید انتخاب شود؛ به این شکل که کاربر نمیتونه دو یا چند گزینه رو باهم انتخاب کنه و انتخاب یک گزینه، بقیه گزینه ها رو غیر فعال میکند.ویژگی های طراحی: + برای دکمه رادیویی از آیکون دایره استفاده میشود + انتخاب یکی باعث غیرفعال شدن بقیه میشود۳- تغییر وضعیت / جابجایی ( Toggle / Switch )این نوع از کنترل انتخاب به این شکل است کهمیخواهیم به کاربر دو گزینه انتخاب متفاوت بدیم و این انتخاب فورا در سیستم اعمال بشه. مثل زمانی که وارد یک سایت میشیم و میتونیم بین دو حالت روشن یا تاریک انتخاب کنیم.ویژگی های طراحی: + همیشه ی حالت پیش فرض دارن + در لحظه انتخاب تغییرات اعمال میشن - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -چند نکته برای تجربه کاربری بهتر ( UX ) + وضعیت و گزینه انتخاب شده رو کاملا مشخص و قابل درک کنید.+ فاصله بین گزینه ها رو رعایت کنید تا کاربر دچار اشتباه نشه به ویژه در موبایل. + با استفاده از یک تراز عمودی، کنترل های انتخاب رو در یک راستا قرار بدین.+ چک باکس ها و دکمه های رادیویی باید قبل از متن قرار بگین در حالی که Toggle/Switch باید بعد از متن قرار بگیرن. Amirdh.UixAmirdh.UixWed, 22 Oct 2025 16:30:24 +0330https://virgool.ir/@amir.dh.ui.ux/اسلایدر-در-ui-ux-چیه-exopebkua0mtقبل از اینکه بخوایم انواع اسلایدر رو توضیح بدیم و ویژگی‌هاش رو بررسی کنیم باید بفهمیم که اسلایدر چیه و ماهیتش رو درک کنیم؛ ساده بهتون بگم اسلایدر یک کنترلگره که ما اون رو به شکل گرافیکی به کاربر نشون میدیم تا بتونه بین محدوده‌ها حق انتخاب داشته باشه. حالا که متوجه کاربرد و ماهیت اسلایدر شدیم بیاید تا با هم انواع اسلایدر و کاربرد اون رو بررسی کنیم.۱- اسلایدر تک محوره ( Single Slider )زمانی که کاربر فقط یک محدوده انتخاب داره ما به سراغ اسلایدر تک محوره میریم؛ به این شکل که یک مینیموم داریم و یک ماکسیمم یا همون صفر و صد خودمون که کاربر می‌تونه از صفر تا صد انتخاب خودش رو تغییر بده و بین محدوده دیگه‌ای نمی‌تونه انتخابش رو جابجا کنه.مثال: شدت نور، حجم صدا و یا هرچیزی که یک مقدار داره.۲- اسلایدر دو محوره ( Range Slider )اسلایدر دو محوره و تک محوره بسیار شبیه به هم هستند با این تفاوت که کاربر می‌تونه محدوده انتخاب خودش رو از دو طرف تغییر بده؛ یعنی می‌تونه صفر و صد رو جابجا کنه. بزارید واضح‌تر بهتون بگم: من به عنوان کاربر می‌تونم مینیموم خودم رو برای مثال روی ۳۰ و ماکسیمم رو روی ۷۰ قرار بدم، در این موقعیت حق آزادی و حق انتخاب بیشتری دارم و به عنوان کاربر ارتباط بهتری می‌تونم با رابط کاربری بگیرم.مثال: محدوده قیمت، بازه زمانی۳- اسلایدر مرحله ای ( Discrete Slider )اسلایدر مرحله‌ای یا گسسته مناسب زمانیه که ما می‌خوایم به کاربر یک سری مقادیر از پیش تعیین شده رو بدیم تا از بین آن‌ها بتونه انتخاب کنه؛ در واقع حق انتخاب دیگه‌ای نداره. پیشنهاد می‌کنم به زمانی که می‌خواید کیفیت یک فیلم رو انتخاب کنید دقت کنید؛ شما کیفیت‌های از پیش تعیین شده رو می‌بینید که فقط از بین اون ها می‌تونید انتخابی داشته باشید.مثال: کیفیت ویدیو، سطح سختی بازیبه همین راحتی انواع اسلایدر رو یاد گرفتیم. به عنوان کلام آخر میخوام چند نکته اصول طراحی ( UX ) بهتون بگم که در عین سادگی کارتون رو بهتر میکنند.+ با استفاده از یک برچسپ یا متن در بالای اسلایدر نشون بدین که اسلایدر مربوط به چیه و مقدار چه چیزی رو مشخص میکنه.+ محور جابجایی رو جوری طراحی کنید که واضح و قابل لمس باشه و کاربر به راحتی بتونه محدوده انتخابش رو جابجا کنه.+ مقدار انتخاب شده رو حتما به کاربر نشون بدین؛ به ویژه در اسلایدر دو محوره که در هر دو طرف باید مقدار انتخابی کاربر رو نشون بدین؛ بدون نمایش مقدار، کاربر حس کنترل ندارد.Amirdh.UixAmirdh.UixTue, 21 Oct 2025 20:41:53 +0330https://virgool.ir/@amir.dh.ui.ux/انواع-دکمه-ui-ux-yknwmz0ufqfqوارد هر رابط کاربری که بشید یکی از چیزهایی که بیشتر به چشم میاد و توجه ما رو به خودش جلب میکنه قطعا دکمه ها ( Buttons ) هستند. این دکمه ها کاربرد ها و تنوع زیادی دارند. بیاید بدون تعارف صحبت کنیم؛ واضحه که اگه این دکمه ها نباشن و یا به درستی استفاده نشن ما اصلا با اون رابط کاربری و فضای برنامه یا سایت ارتباط خوبی نمی‌گیریم و حتی ممکنه باعث ایجاد یک تجربه کاربری بد و در نهایت حذف یا عدم استفاده از اون برنامه یا سایت بشه....پس همراه من باشید تا باهم انواع دکمه و ویژگی های برجسته هر کدوم رو بررسی کنیم. ۱- دکمه اصلی ( Primary Button )هر برنامه یا سایت برای یک هدف اصلی طراحی شده؛ قطعا باید اون هدف رو به بهترین شکل ممکن به کاربر نشون بدیم تا مشتاق به انجام اون کار بشه؛ این کار رو با دکمه های اصلی انجام میدیم و با توجه به اینکه شامل اقدام و تقاضای اصلی طراحی ما هستن پس باید بیشتر از بقیه دکمه ها به چشم بیان.مثال: ثبت سفارش، ثبت نام، خریدویژگی ها:   + رنگ چشمگیر ( دارای کنتراست با پس زمینه)  + پر رنگ تر از بقیه دکمه ها  + در هر صفحه یک الی دو بار استفاده میشود ۲- دکمه های ثانویه یا فرعی ( Secondary Buttons )میتونیم بگیم که این دکمه ها به نوعی جایگزینی برای دکمه های اصلی هستند. یعنی اگر کاربر بر روی دکمه اصلی کلیک نکنه به احتمال زیاد به سراغ این دکمه میاد. باید جوری باشه که مهم بودنش رو برسونه ولی برجستگی دکمه اصلی رو هم ازش نگیره.مثال: بازگشت، ویرایشویژگی ها:  + معمولا با رنگ خنثی طراحی میشن ۳- دکمه های درجه سوم ( Tertiary Buttons )در یک رابطه کابری برخی از اقدامات فرعی هستند و ما انتظار این رو نداریم که کاربر زیاد دنبال این اقدامات باشه و یا بخواد به واسطه یک دکمه روشون کلیک کنه؛ اما در عین حال در رابط کاربری باید حضور داشته باشن. این اقدامات رو به دکمه های درجه سوم اختصاص میدیم.مثال: بیشتر بدانید، مشاهده جزئیات ویژگی ها:  + ساده ( بدون جلب توجه)  + معمولا فقط متن، بدون پس زمینه  + گاهی دور از چشم کاربر قرار میگیرن تا جلب توجه نکنند ۴- دکمه های متن ( Text Buttons )  دکمه های متنی توجه زیادی رو به خودشون جلب نمیکنن چون فقط متن هستن و به همین خاطر برای اقدامات کم اهمیت تر و یا ناچیز استفاده میشن.مثال: لینک ها، مشاهده جزئیات ویژگی ها:  + فقط متن( رنگی یا ساده)  + بدون پس زمینه  + بدون خط حاشیه ۵- دکمه های آیکون ( Icon Buttons )برخی اقدامات در رابط کاربری ثابت و شناخته شده هستند و با یک نماد خاص و بدون هیچ توضیحی برای کاربر قابل فهم هستند. این نوع اقدامات رو میتونیم با دکمه های فقط آیکون نشون بدیم.مثال: سطل زباله، فروشگاه، جستجوویژگی ها:   + فقط آیکون  + قابل فهم و آشنا  + گاهی برای دسترسی بیشتر میتونن با متن همراه بشن ۶- دکمه های خطی ( Outline Buttons )دکمه های خطی رو ممکنه به اسم دکمه ی شبح ( Ghost ) هم ببینید؛ این دکمه ها رو میتونیم به نوعی زیر مجموعه دکمه های درجه سوم قرار بدیم و برای اقداماتی که نمیخوایم زیاد جلب توجه کنند اما همچنان قابل کلیک باشند مناسب هستند.مثال: بیشتر بدانیدویژگی ها:  + پس زمینه شفاف  + خط حاشیه ۷- دکمه های برجسته ( Raised Buttons ) این نوع دکمه ها رو میتونیم در کنار دکمه های اصلی مقایسه کنیم و به واسطه سایه ای که میگیرن خودشون رو در رابط کاربری برجسته تر میکنند؛ پس بخاطر همین برجستگی عملکردهای مهم رو به خودشون اختصاص میدن؛ البته باید حواسمان باشه که بیش از حد استفاده نشن تا کاربر بخش های دیگه رابط کاربری رو به خوبی ببینه.مثال: اگر چندتا اقدام اصلی داشته باشیم و از بین این چند اقدام یکی از اونا برای ما مهم تر باشه، اون مورد رو به دکمه های برجسته اختصاص میدیمویژگی ها:  + داشتن سایه  + رنگ شاخص ( دارای کنتراست )  + زیاد استفاده نشدن در هر صفحه ۸- دکمه های تقسیم شده ( Split Buttons )این نوع دکمه رو میتوانیم به نوعی یک دکمه دو مرحله ای در نظر بگیریم؛ به این صورت که با کلیک کردن یا لمس کردنشون عملکرد اولیه اونها فعال میشه و به واسطه یک نماد فلش مانند که گوشه دکمه وجود دارد یک لیست کشویی ظاهر شده و بقیه عملکردهای دکمه را به ما نشان میدهد.ویژگی ها:  + چندین عملکرد را در خود جا میدهند  + یک نماد فلش کوچک دارند  + گاهی به واسطه یک خط کوچک به دو  قسمت تقسیم شده تا کاربر را آگاه سازند. ۹- دکمه های جابجایی یا تغییر ( Toggle Buttons )زمانی که میخواهیم دو یا چند عملکرد و اقدام رو در اختیار کاربر قرار بدیم تا از میان آنها یکی رو انتخاب کنه میریم سراغ این نوع دکمه؛ در برخی منابع بهشون دکمه های بخش بندی شده هم گفته میشه. میشه اینجوری گفت که دو یا چند دکمه داریم که در یک کادر واحد قرار گرفتند.مثال: هفتگی، ماهانه، سالانه ( در یک کادر )ویژگی ها:  + نمایش چند عملکرد به کاربر  + جابجایی بین عملکردها  + فعال بودن فقط یکی از عملکردها ۱۰- دکمه های شناور ( FAB Buttons )این دکمه ها، دکمه های ثابتی هستند که به نوعی به لبه یا گوشه صفحه چسپیده اند و اغلب اوقات اقدامات نسبتاً مهمی رو به خودشون اختصاص میدن. این روزها در اکثر رابط کاربری ها عملکرد های پشتیبانی و دستیار هوشمند رو با این دکمه ها نشون میدیم.مثال : دستیار آنلاین ، پشتیبانیویژگی ها:  + فقط آیکون  + ثابت در صفحه  + در هر صفحه فقط یکی قرار دارد ۱۱- دکمه های منو ( Menu Buttons )در یک رابط کاربری ممکنه لازم باشه که تعداد زیادی عملکرد رو به کاربر نشون بدیم ولی فضای کافی برای این کار نداشته باشیم به ویژه در برنامه های موبایل؛ در این موقعیت به سراغ دکمه های منو میریم؛ دکمه های منو زمانی که روشون کلیک بشه ی لیست از اقدامات نسبتاً مهم رو که همه اهمیت یکسانی دارند رو به کاربر نشون میده تا از میان آنها انتخاب کنه.ویژگی ها:  + گاهی همراه با نماد فلش  + گاهی فقط تکست   + گاهی فقط آیکون  + ارائه‌ی چندین عملکرد  + صرفه جویی در فضاAmirdh.UixAmirdh.UixSat, 18 Oct 2025 10:40:56 +0330