معرفی کارت ها در طراحی رابط کاربری

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

انواع مختلفی از کارت‌ها وجود داره که می‌تونن به روش‌های مختلف استفاده بشن، اما همه اونا چند چیز مشترک دارن:

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

کارت متن (Text card)

در حالی که کارت‌ها تو همه شکل‌ها و اندازه‌ها وجود دارن، ابتدایی‌ترین شکل، کارت متنه. این معمولاً تو چیزهایی مثل برنامه‌های داشبورد دیده می‌شه. کارت‌های متن از یه عنوان و متن ثانویه تشکیل شدن.

با این حال، تنها عنصر مورد نیاز تو یه کارت یه کانتینره. همه عناصر دیگه مثل متن، رسانه، تصویر بندانگشتی، آیکون‌ها، دکمه‌ها و غیره اختیاری هستن.

کارت غنی (Rich card)

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

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

کارت کاربر (User card)

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

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

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

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

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

کارت تخت (Flat card)

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

کارت خطی (Outlined card)

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

کارت برجسته (Elevated card)

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

کارت‌های برجسته تو طراحی رایج هستن چون به راحتی ظاهر یه کارت فیزیکی رو تقلید می‌کنن. خیلی مهمه که سایه‌های کارت رو هنگام هاور (قرار گرفتن ماوس روی کارت) بیشتر کنین — این قابلیت کلیک رو بیشتر نشون می‌ده و بازخورد به کاربرا در مورد اقداماتشون ارائه می‌ده.

اعمال سایه‌های مناسب کارت

هنگام اضافه کردن سایه‌های کارت، معمولاً از دنیای واقعی الهام می‌گیرین، از یه رنگ تیره‌تر استفاده می‌کنین و با آفست‌ها بازی می‌کنین. مطمئن بشین که سایه تو هر چهار لبه برای یه ظاهر واقعی و چشمگیر قابل مشاهده است. وقتی فقط از نورهای اصلی استفاده می‌کنین که سایه‌های تیزتر و جهت‌دار ایجاد می‌کنن، خطر زیاده‌روی تو طراحی کارت وجود داره. نکته‌ی حرفه‌ای! بسته به استایل برنامه، می‌تونین یه افکت blur (تاری) برای افزایش ارتفاع و کاهش opacity (شفافیت) اعمال کنین تا یه ظاهر طبیعی‌تر ایجاد کنین.

حفظ سلسله مراتب اطلاعات برای اسکن بهتر

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

اضافه کردن padding کافی برای بهبود اسکن‌پذیری

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

تمایز اقدامات اصلی و ثانویه

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