در یک فهرست مقاله، هر کارت عنوان، خلاصه و تاریخ دارد. کاربر می‌خواهد موضوع‌ها را مقایسه کند و یکی را باز کند. اگر تمام کارت با چند عمل متفاوت پوشانده شود، یا اطلاعات لازم فقط بعد از ورود به صفحه دیده شود، ظاهر منظم به انتخاب روشن منتهی نمی‌شود. Card یک ظرف برای یک واحد محتواست؛ کیفیت آن از ترتیب اطلاعات، معنی کنترل‌ها و رابطه با فهرست می‌آید.
پیش از انتخاب کارت، معلوم کنید مخاطب چه چیزی را مقایسه می‌کند. برای مقاله، موضوع و تازگی ممکن است مهم باشد؛ برای محصول، قیمت و ویژگی؛ برای وظیفه، وضعیت و مسئول. اگر داده‌ها ستون‌های ثابت و نیاز به مقایسه دقیق دارند، جدول یا فهرست می‌تواند مناسب‌تر باشد. کارت برای هر نوع داده بهترین شکل نیست و اضافه کردن قاب به همه محتوا، ساختار را به‌تنهایی بهتر نمی‌کند.
هر کارت یک موضوع مشخص داشته باشد
عنوان باید واحد محتوا را معرفی کند و اطلاعات بعدی به همان واحد مربوط باشند. ترکیب خبر، تبلیغ و چند ابزار نامرتبط در یک کارت، مرز محتوا را مبهم می‌کند. تصویر هم الزامی نیست؛ برای بعضی موضوع‌ها فقط عنوان و خلاصه کافی است. افزودن عکس تزئینی که تفاوت کارت‌ها را توضیح نمی‌دهد می‌تواند ارتفاع فهرست و هزینه دریافت را زیاد کند بدون اینکه انتخاب را آسان‌تر کند.
مرجع article در MDN درباره محتوای مستقل توضیح می‌دهد. یک کارت مقاله می‌تواند article باشد، اما هر مستطیل در رابط چنین معنایی ندارد. ظرف یک کنترل یا خلاصه‌ای که کاملاً به زمینه وابسته است ممکن است عنصر دیگری بخواهد. انتخاب HTML باید از نقش محتوا بیاید؛ نام کلاس card معنای سند را تعیین نمی‌کند.
اطلاعات تصمیم‌گیری را جلوتر قرار دهید
عنوان، توضیح کوتاه و ویژگی‌های کلیدی باید در ترتیب ثابت دیده شوند. اگر یک کارت تاریخ را بالا و دیگری پایین دارد، مرور فهرست سخت‌تر می‌شود. اطلاعاتی که برای انتخاب لازم نیستند می‌توانند در صفحه جزئیات قرار گیرند. با این حال، پنهان کردن قیمت یا محدودیت اصلی برای سبک‌تر کردن کارت، فرد را مجبور به رفت‌وبرگشت می‌کند. خلاصه باید تفاوت گزینه‌ها را حفظ کند.
عنوان بلند را با متن واقعی طراحی کنید. ارتفاع ثابت و بریدن نوشته ممکن است موضوع را ناقص کند. اگر خلاصه محدود می‌شود، عنوان کامل و مقصد باید همچنان قابل فهم باشند. تاریخ یا برچسب نوع محتوا را با اندازه بسیار ریز و رنگ نامشخص نشان ندهید. در کارت محصول، واحد قیمت و وضعیت خرید مهم‌اند؛ در کارت مقاله، برچسب «دوره» یا «راهنما» از اشتباه درباره مقصد جلوگیری می‌کند.
نمونه سه کارت بدون تصویر
فایل زیر را با نام cards.html و UTF-8 ذخیره و به صورت HTML باز کنید. CSS در style همان فایل قرار دارد و تصویر، JavaScript یا بسته خارجی ندارد. سه article فرزند مستقیم فهرست cards هستند. هر عنوان یک لینک به مقاله موجود مجله دارد؛ خود ظرف کارت لینک یا دکمه نیست. اندازه ستون‌ها بر اساس فضای والد تغییر می‌کند و متن‌ها ارتفاع اجباری ندارند.
<!doctype html>
<html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>راهنماهای طراحی</title>
<style>*{box-sizing:border-box}body{margin:0;background:#f3f5f8;color:#17243b;font-family:Tahoma,Arial,sans-serif;line-height:1.9}main{width:min(68rem,calc(100% - 2rem));margin:auto;padding-block:2rem}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}.card{padding:1.25rem;background:white;border:1px solid #a6b3c5;border-radius:.65rem;min-width:0;overflow-wrap:anywhere}.card h2{margin:0;font-size:1.2rem}.card p{margin-block:.7rem 0}.card a{color:#143e78;text-decoration:underline}.card a:focus-visible{outline:3px solid #986000;outline-offset:3px}</style></head>
<body><main><h1>راهنماهای طراحی</h1><section class="cards" aria-label="سه مقاله مرتبط">
<article class="card"><h2><a href="https://tarahestan.com/magazine/navigation-menu-design-principles">طراحی ناوبری</a></h2><p>ساختار منو، برچسب مقصد و مسیر فعال را روشن کنید.</p></article>
<article class="card"><h2><a href="https://tarahestan.com/magazine/search-filter-design-great-ux">جستجو و فیلتر</a></h2><p>ورودی، محدودیت‌ها و نتیجه را با قرارداد مشخص به هم وصل کنید.</p></article>
<article class="card"><h2><a href="https://tarahestan.com/magazine/web-notification-alert-design">طراحی اعلان‌ها</a></h2><p>خبرهای موفقیت و خطا را با اهمیت و وضعیت واقعی هماهنگ کنید.</p></article>
</section></main></body></html>
در این نمونه، heading اصلی مربوط به صفحه است و عنوان هر کارت heading سطح دوم دارد. لینک عنوان نام مقصد را مشخص می‌کند، پس دکمه جدا با متن تکراری «بیشتر» لازم نشده است. توضیح هر کارت درباره همان مقاله است. اگر CSS دریافت نشود، محتوا و لینک‌ها به ترتیب قابل خواندن باقی می‌مانند. این ساختار برای فهرست آموزشی ساده است و عملیات خرید یا انتخاب چندتایی را شبیه‌سازی نمی‌کند.
کلیک روی کل کارت تصمیم جداگانه می‌خواهد
برای کارتی با یک مقصد، گسترش ناحیه لینک می‌تواند استفاده را آسان کند، ولی باید انتخاب متن و رفتار کنترل‌های احتمالی را در نظر گرفت. وقتی کارت چند عمل دارد، تبدیل کل ظرف به دکمه می‌تواند ابهام بسازد. لینک و دکمه تو در تو هم ساختار مناسبی برای تعامل ایجاد نمی‌کنند. مرجع anchor در MDN محدودیت محتوای لینک را توضیح می‌دهد.
اگر دکمه علاقه‌مندی یا حذف کنار لینک وجود دارد، عمل آن باید مستقل و نامش روشن باشد. کلیک روی آن نباید همزمان صفحه جزئیات را باز کند. استفاده از event handler روی یک div بدون معنی و قرارداد صفحه‌کلید، رفتار لینک واقعی را تکرار نمی‌کند. باز کردن در تب تازه، کپی نشانی و focus از امکانات معمول لینک‌اند و نباید در ساخت ظاهر کارت بی‌دلیل از دست بروند.
Grid، فهرست و Masonry
Grid منظم برای مقایسه آیتم‌های مشابه می‌تواند مفید باشد. فهرست یک‌ستونی فضای بیشتری برای توضیح فراهم می‌کند و ممکن است برای عنوان‌های بلند مناسب‌تر باشد. Masonry اختلاف ارتفاع را فشرده‌تر نمایش می‌دهد، اما ترتیب بصری و خواندن باید روشن بماند. انتخاب را با نوع محتوا انجام دهید؛ جا دادن بیشترین تعداد کارت در یک صفحه همیشه به انتخاب آسان‌تر منتهی نمی‌شود.
برای چیدمان سیال، حداقل عرض کارت را از محتوا تعیین کنید. اگر کارت بسیار باریک شود، عنوان و اطلاعات به چندین خط تقسیم می‌شوند. قواعد ذاتی Grid می‌توانند تعداد ستون را با فضای موجود هماهنگ کنند. راهنمای چیدمان واکنش‌گرا نمونه کامل دیگری از این رابطه دارد. مقدارهای CSS باید رفتار مشخصی را ایجاد کنند، نه اینکه فقط از یک نمونه مشهور کپی شوند.
تصویر و نسبت قاب
اگر تصویر برای انتخاب مهم است، نسبت قاب و رفتار برش را تعیین کنید. عکس محصول ممکن است نیاز به دیدن کامل داشته باشد؛ عکس خبر می‌تواند برش هدفمند بخواهد. object-fit نحوه قرارگیری را تنظیم می‌کند ولی حجم فایل را کاهش نمی‌دهد. تصویر کوچک نمایشی نباید بی‌دلیل از نسخه بسیار بزرگ تغذیه شود. جای تصویر نیز پیش از دریافت حفظ شود تا ورود آن متن و کنترل‌ها را جابه‌جا نکند.
متن جایگزین باید به نقش تصویر مربوط باشد. اگر تصویر همان عنوان کارت را بی‌دلیل تکرار می‌کند، اعلام اضافه می‌تواند شلوغ شود. اگر تفاوت محصول را نشان می‌دهد، آن تفاوت اهمیت دارد. راهنمای بهینه‌سازی تصویر درباره اندازه و زمان دریافت توضیح بیشتری می‌دهد. عکس خراب یا حذف‌شده نباید نام محتوا و مسیر ورود به آن را از بین ببرد.
حالت‌های تعاملی را معنا بدهید
hover، focus، انتخاب‌شده و غیرفعال نقش‌های متفاوت دارند. سایه بیشتر روی hover می‌تواند قابل انتخاب بودن را نشان دهد، ولی روی صفحه لمسی همان رفتار وجود ندارد. focus باید قابل مشاهده باشد و انتخاب چندتایی با وضعیت برنامه‌ای روشن همراه شود. رنگ تنها برای اعلام وضعیت کافی نیست. کارت منتخب بهتر است علاوه بر ظاهر، کنترل و نامی داشته باشد که انتخاب را توضیح دهد.
در بارگذاری، Skeleton ممکن است جای محتوای آینده را نشان دهد، اما وعده تعداد یا ساختاری ندهد که نتیجه واقعی ندارد. وضعیت انتظار باید از فهرست خالی جدا باشد. پس از شکست، پیام خطا و راه تلاش دوباره ارائه کنید. اگر داده قبلی باقی می‌ماند، معلوم باشد هنوز در انتظار تازه‌سازی است. خبرها باید با نتیجه واقعی هماهنگ باشند؛ راهنمای اعلان‌ها این قرارداد را بیشتر شرح می‌دهد.
تعداد زیاد کارت به ابزار مرور نیاز دارد
در فهرست طولانی، دسته‌بندی، جستجو و مرتب‌سازی می‌توانند کمک کنند. کارت به‌تنهایی مسئله یافتن محتوا را حل نمی‌کند. وضعیت انتخاب‌ها و محل اسکرول پس از بازگشت از جزئیات تا حد مناسب حفظ شود. صفحه‌بندی و دریافت بیشتر باید پایان مجموعه و حالت انتظار را روشن کنند. اسکرول بی‌پایان می‌تواند دسترسی به بخش‌های پایین صفحه و بازگشت به مورد قبلی را دشوار کند.
Carousel مجموعه محدودی را در یک ناحیه نمایش می‌دهد، ولی بخشی از محتوا ممکن است از دید پنهان بماند. کنترل‌ها باید با صفحه‌کلید و لمس قابل استفاده باشند و حرکت خودکار مسیر خواندن را قطع نکند. اگر مقایسه همزمان مهم است، نمایش پنهان گزینه‌ها شاید مناسب نباشد. در فهرست محصول، راهنمای فیلتر به انتخاب آگاهانه محدودیت‌ها و حفظ نتیجه کمک می‌کند.
قرارداد کارت را مستند کنید
در تحویل، اطلاعات ضروری، طول‌های قابل انتظار، تعداد عمل‌ها و حالت‌های داده ناموجود را مشخص کنید. معلوم باشد کدام عنصر لینک است، کدام دکمه و کدام فقط اطلاعات دارد. نمونه عنوان بلند، تصویر حذف‌شده و وضعیت خطا را در مشخصات محتوا بیاورید. تغییر یک واحد نباید ساختار تمام فهرست را بشکند. این قرارداد نگهداری کارت را از تنظیم موردی هر صفحه جدا می‌کند.
کارت قابل استفاده اطلاعات لازم برای انتخاب را در ترتیب ثابت ارائه می‌دهد و عمل‌ها را روشن نگه می‌دارد. قاب، گوشه گرد و سایه می‌توانند ظاهر مجموعه را هماهنگ کنند، اما جای معنی محتوا را نمی‌گیرند. اگر مخاطب برای فهم تفاوت گزینه‌ها ناچار به باز کردن همه آن‌هاست، مسئله ممکن است در اطلاعات خلاصه یا انتخاب الگوی نمایش باشد و باید همان بخش اصلاح شود.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!