بهترین روش‌ها برای طراحی کارت‌های رابط کاربری
اگرچه ایده اولیه کارت‌ها جدید نیست، اما هنوز چند پیچیدگی وجود دارد که می‌تواند کل تجربه کاربری را لذت بخش یا خراب کند.
دانستن نحوه استفاده از ابزارهایی مانند تراز، سایه‌ها، فونت‌ها و رنگ‌ها به شما کمک می‌کند طرح‌هایی ایجاد کنید که اسکن و پیمایش آسان باشد.
برای سادگی تلاش کنید
تقسیم کننده‌های افقی می‌توانند به جداسازی عناصر نامرتبط یا تأکید بر سلسله مراتب بین آنها کمک کنند. با این حال، آنها به ندرت در طراحی کارت مفید هستند. از ابزار تایپوگرافی و فضای منفی برای اضافه کردن فاصله یا برجسته کردن محتوا استفاده کنید.
از کارت های جداگانه برای نمایش موارد در موضوعات متمایز استفاده کنید
کارت‌ها برای تقسیم اقلام ناهمگن عالی هستند. قرار دادن آیتم‌های موضوعات مختلف در یک مرز، بار شناختی را افزایش می‌دهد و کاربران را سردرگم می‌کند که آیا محتوا مرتبط است یا خیر.
در عوض، محتوا را به گروه‌های منطقی تقسیم کنید تا به کاربران کمک کنید سریع‌تر حرکت کنند.
کل کارت را قابل کلیک کنید
قابل کلیک کردن کل یک کارت، تعاملات کاربر را ساده می‌کند، به خصوص زمانی که تنها یک عمل مرتبط با آن کارت وجود داشته باشد. با ارائه یک منطقه قابل کلیک بزرگتر، رابط کاربری را در دسترس‌تر و پاسخگوتر و در نهایت سفر کاربر را ساده‌تر می‌کنید.
برای نشان دادن اینکه کل کارت قابل کلیک است، از یک افکت شناور ظریف مانند تغییر رنگ یا سایه و نشانگر استفاده کنید.
از برچسب‌های متضاد استفاده کنید
هنگام اعمال برچسب روی تصاویر یا ویدیوها، سعی کنید کنتراست پیش زمینه در مقابل پس زمینه را داشته باشید. اطمینان حاصل کنید که افراد دارای اختلالات بینایی در خواندن برچسب‌ها یا متن روی تصاویر مشکلی ندارند.
از عناصر بصری برای ایجاد انسجام در کارت استفاده کنید
به این ابزار کارت می گویند زیرا، خوب، شبیه کارت هستند. بدون ابزار بصری مانند سایه‌ها، حاشیه‌ها و پس‌زمینه‌های مشترک، آیتم‌های هر گروه کمتر مرتبط به نظر می‌رسند و بار شناختی بیشتری را برای کاربرانی که صفحه را اسکن می‌کنند ایجاد می‌کنند.
ارائه اطلاعات به صورت پیش رونده
کارت‌ها برای محتوای قابل هضم در نظر گرفته شده‌اند - کاربران می‌توانند آنها را باز کنند تا بیشتر بدانند. این یک نمونه عالی از تکنیک افشای پیش رونده است که اطلاعات یا ویژگی‌ها را به روشی پیش رونده و گام به گام ارائه می‌دهد. اولاً، کمک می‌کند تا کاربران مبتدی را با حجم زیادی از محتوا غرق نکنند و روند یادگیری سیستم را افزایش دهد. ثانیا، رابط کاربری سازمان یافته‌تر و واضح‌تر به نظر می‌رسد.
فضای سفید کافی فراهم کنید استفاده متفکرانه از فضای سفید درون کارت‌ها نه تنها خوانایی را افزایش می‌دهد، بلکه تمرکز کاربران را به سمت عناصر کلیدی هدایت می‌کند.
برچسب‌های کارت را مختصر نگه دارید برچسب کارت بخشی از میکروکپی‌رایتینگ محصول است و میکروکپی خوب باید مختصر باشد.
اولاً مردم نمی‌خوانند. ثانیاً، رابط‌های دیجیتال، به ویژه تلفن‌های همراه، فضای محدودی دارند. شما نمی‌توانید جملات طولانی را صرفاً به این دلیل استفاده کنید که در جایی جا نمی‌شوند.
سلسله مراتب رنگ را حفظ کنید
سلسله مراتب رنگ به دلایلی وجود دارد. وقتی همه چیز روی صفحه به‌عنوان مهم برجسته می‌شود، هیچ چیز واقعاً مهم به نظر نمی‌رسد و تمرکز کردن برای کاربران دشوار است.
از سایه ها زیاد استفاده نکنید
افزودن سایه‌های اضافی به اشیاء رسانه، دکمه‌ها یا آیکون‌ها می‌تواند به هم ریختگی بصری ایجاد کند. این استفاده بیش از حد سلسله مراتب بصری ایجاد شده را مختل می‌کند و تمرکز کاربران را بر عناصر کلیدی دشوار می کند.
از یک موقعیت آشنا برای نماد منو استفاده کنید
نماد منوی کباب بیشتر در گوشه سمت راست بالای کارت‌ها یافت می شود. این قرارگیری از الگوی خواندن کاربرانی پیروی می‌کند که معمولاً از چپ به راست و از بالا به پایین اسکن می‌کنند و در گوشه سمت راست بالا ختم می‌شوند.
با رعایت این قرارداد طراحی، تجربه‌ای قابل پیش بینی و کاربرپسندتر ایجاد می‌کنید و با رفتار و انتظارات طبیعی کاربران هماهنگ می‌شوید.
🔗 برای مطالعه ادامه مقاله می‌توانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۸ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر #کارت
#UI
@Dexign فلسفه دیزاین
______
Post #1333
2.02K
