بهترین روش ها برای طراحی کارت ها در رابط کاربری

اگرچه ایده اصلی کارت‌ها جدید نیست، اما هنوز چند نکته ظریف وجود داره که می‌تونه کل تجربه کاربری رو خوب یا بد کنه.

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

تلاش برای سادگی

جداکننده‌های افقی می‌تونن به جدا کردن عناصر نامرتبط یا تأکید بر سلسله مراتب بین اونا کمک کنن. با این حال، اونا به ندرت تو طراحی کارت مفید هستن. از ابزارهای تایپوگرافی و فضای منفی برای اضافه کردن فاصله یا برجسته کردن محتوا استفاده کنین.

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

از کارت‌های جداگانه برای نمایش آیتم‌ها در موضوعات متمایز استفاده کنین

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

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

کل کارت رو قابل کلیک کنین

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

برای نشون دادن اینکه کل کارت قابل کلیکه، از یه افکت هاور ظریف، مثل تغییر رنگ یا سایه، و یه مکان‌نمای اشاره‌گر استفاده کنین. علاوه بر این، می‌تونین از یه حاشیه کم‌رنگ استفاده کنین.

از برچسب‌های متضاد استفاده کنین

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

قانون طلایی اینه که نسبت کنتراست ۴.۵:۱ رو حفظ کنین. ترفند اینه که یه پوشش تیره‌تر روی تصویر قرار بدین و شفافیت اون رو تنظیم کنین. به این ترتیب، تصویر قابل مشاهده و به اندازه کافی متضاد باقی می‌مونه.

از عناصر بصری برای ایجاد انسجام داخل یه کارت استفاده کنین

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

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

اطلاعات رو به صورت پیشرونده ارائه بدین

کارت‌ها برای قطعات قابل هضم محتوا در نظر گرفته شدن — کاربرا می‌تونن اونا رو باز کنن تا بیشتر بدونن. این یه مثال عالی از تکنیک افشای پیشرونده است که اطلاعات یا ویژگی‌ها رو به صورت پیشرونده و گام به گام ارائه می‌ده. اولاً، به عدم تحت تأثیر قرار دادن کاربران مبتدی با حجم زیادی از محتوا کمک می‌کنه و فرآیند یادگیری سیستم رو بهبود می‌بخشه. ثانیاً، رابط کاربری سازماندهی شده‌تر و واضح‌تر به نظر می‌رسه.

متن بدنه پشتیبان رو کوتاه نگه دارین و اون رو با سه نقطه کوتاه کنین — این حس رو می‌ده که چیز بیشتری برای کاوش وجود داره و کاربرا رو برای ادامه خوندن دعوت می‌کنه.

فضای سفید کافی فراهم کنین

استفاده سنجیده از فضای سفید داخل کارت‌ها نه تنها خوانایی رو افزایش می‌ده، بلکه تمرکز کاربرا رو به سمت عناصر کلیدی هدایت می‌کنه. در اینجا چند نکته در مورد استفاده مؤثر از فضا داخل کارت‌ها آورده شده:

• حاشیه‌های ثابت رو حفظ کنین: فاصله یکنواخت بین محتوای کارت و لبه‌های اون رو برای جلوگیری از ظاهر شلوغ حفظ کنین.
• از جداکننده‌ها به صورت محدود استفاده کنین: اگه مجبورین بین عناصر تمایز قائل بشین، جداکننده‌های ظریف یا اندازه‌های مختلف متن می‌تونن بدون اشغال فضا، این کار رو انجام بدن.
• عناصر مرتبط رو گروه‌بندی کنین: اطلاعات یا اقدامات مرتبط به هم رو نزدیک هم قرار بدین و کاربرا رو به طور طبیعی از طریق محتوای کارت راهنمایی کنین.
• به محتوا اولویت بدین: از فضا برای تأکید بر اطلاعات مهم، شاید از طریق یه فونت بزرگتر یا یه مکان مرکزی‌تر داخل کارت، استفاده کنین.

از رسانه با کیفیت برای جلب اعتماد استفاده کنین

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

برچسب‌های کارت رو مختصر نگه دارین

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

برای مختصر کردن برچسب‌ها چیکار می‌تونین بکنین؟

• کلمات اصلاحی غیرضروری، اصطلاحات عامیانه و نقطه‌گذاری اضافی (ویرگول، نقطه‌ویرگول و بندها) رو حذف کنین.
• از بیان موارد واضح خودداری کنین و برچسب‌های خودتون رو مختصر نگه دارین، تا کاربرا بتونن به سرعت اطلاعات رو درک کنن و به جلو حرکت کنن.

سلسله مراتب رنگ رو حفظ کنین

سلسله مراتب رنگ به یه دلیل وجود داره — به تأکید بر محتوای مرتبط‌تر و کم‌اهمیت جلوه دادن عناصر با اولویت کمتر کمک می‌کنه. وقتی همه چیز روی صفحه به عنوان مهم برجسته می‌شه، هیچ چیز واقعاً مهم به نظر نمی‌رسه و کاربرا تمرکز کردن براشون سخت می‌شه. برای مثال، عنوان مرتبط‌تر از یه پیش‌نمایشه و دکمه اصلی «بیشتر بدانید» مهم‌تر از دکمه‌های ثانویه برای اضافه کردن به علاقه‌مندی‌ها و ذخیره‌سازی هست.

از سایه‌ها بیش از حد استفاده نکنین

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

از یه موقعیت آشنا برای یه آیکون منو استفاده کنین

آیکون منوی سه‌نقطه بیشتر تو گوشه سمت راست بالای کارت‌ها پیدا می‌شه. این مکان از الگوی خوندن کاربرانی که معمولاً از چپ به راست و بالا به پایین اسکن می‌کنن و در نهایت به گوشه سمت راست بالا می‌رسن، پیروی می‌کنه.

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