طراحی Skeleton UI با CSS

Skeleton UI یا اسکلتی یک تکنیک بسیار کاربردی برای بهبود تجربه کاربری هنگام بارگذاری محتواست. به‌جای نمایش یک loading spinner که اطلاعات صفحه را مخفی می‌کند، Skeleton نماهایی شبیه محتوای نهایی نمایش می‌دهد که حس کارآمدی و سرعت را افزایش می‌دهد. در این مقاله به شیوه‌های پیاده‌سازی با CSS، نکات دسترس‌پذیری، بهینه‌سازی عملکرد و مثال‌های عملی می‌پردازیم.

چرا از Skeleton استفاده کنیم؟

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

مفاهیم پایه‌ای و انتخاب روش

دو روش مرسوم:

• استفاده از عناصر HTML ساده با پس‌زمینهٔ خاکستری و انیمیشن Shimmer
• ترکیب SVG یا Canvas برای طرح‌های پیچیده‌تر

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

نمونه پایه‌ای Skeleton با CSS

/* Basic skeleton block */.skeleton {
  background-color: #eee;
  border-radius: 4px;
  min-height: 16px;
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

/* Shimmer effect */.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  height: 100%;
  width: 150%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  100% { transform: translateX(150%); }
}

توضیح: این کد یک کلاس .skeleton تعریف می‌کند که زمینهٔ خاکستری دارد و با شبه‌عنصر ::after افکتی شبیه حرکت نور (shimmer) برای القای بارگذاری ایجاد می‌شود. انیمیشن ساده و مصرف پایین CPU دارد.

مثال کاربردی: کارت لیست محصول

<div class="product-card">
  <div class="skeleton avatar" style="width:80px;height:80px;border-radius:8px"></div>
  <div class="skeleton title" style="width:60%;height:18px;margin-top:8px"></div>
  <div class="skeleton price" style="width:30%;height:14px;margin-top:6px"></div>
</div>

توضیح: در این مثال از چند عنصر .skeleton برای شبیه‌سازی تصویر، عنوان و قیمت استفاده شده است. سبک‌ها می‌توانند inline یا در CSS قرار بگیرند. این ساختار ساده برای لیست محصولات فروشگاهی یا نتایج جستجو بسیار مناسب است.

بهینه‌سازی و الگوهای پیشرفته

• استفاده از CSS variables برای تنظیم سریع رنگ و مدت انیمیشن.
• استفاده از pseudo-element به جای DOM اضافی برای کاهش تعداد عناصر.
• فعال‌سازی will-change: transform برای بهینه‌سازی انیمیشن (با احتیاط).

:root{
  --skeleton-bg: #e9e9e9;
  --skeleton-shimmer: rgba(255,255,255,0.6);
  --shimmer-duration: 1.2s;
}
.skeleton{
  background-color: var(--skeleton-bg);
}
.skeleton::after{
  background: linear-gradient(90deg, transparent 0%, var(--skeleton-shimmer) 50%, transparent 100%);
  animation: shimmer var(--shimmer-duration) linear infinite;
}

توضیح: با CSS variables، می‌توان تم Skeleton را از یک مکان تغییر داد. این موضوع در پروژه‌های بزرگ که تم‌های مختلف دارند بسیار مفید است.

دسترس‌پذیری (Accessibility)

Skeleton باید برای کاربران صفحه‌خوان و کاربران با تنظیمات ویژه نیز مناسب باشد. نکات مهم:

• اضافه کردن aria-busy="true" به ناحیه‌ای که در حال بارگذاری است.
• برای کاربران با prefers-reduced-motion انیمیشن را غیرفعال کنید.
• اطمینان از خوانایی زمانی که محتوا آماده شد—تغییرات ناگهانی و شدید ایجاد نکنید.

.skeleton::after{
  /* shimmer animation */}

/* Respect reduced motion setting */@media (prefers-reduced-motion: reduce){
  .skeleton::after{ animation: none; }
}

توضیح: این بلوک CSS نمایش انیمیشن را برای کاربرانی که حرکت را محدود کرده‌اند غیرفعال می‌کند که قوانین دسترس‌پذیری را رعایت می‌نماید.

مقایسه سریع: Skeleton در مقابل Spinner

نکات عملی و اشتباهات رایج

• اجتناب از استفادهٔ زیاد از سایه‌های سنگین یا تصاویر بزرگ برای Skeleton.
• پرهیز از ایجاد DOM سنگین — از pseudo-elementها و CSS یکپارچه استفاده کنید.
• در موبایل، عرض و ارتفاع‌ها را نسبت به طراحی responsive تنظیم کنید.

نمونه بهینه‌تر: استفاده از یک pseudo-element مرکزی

.skeleton {
  background: linear-gradient(180deg, var(--skeleton-bg), var(--skeleton-bg));
  position: relative;
  overflow: hidden;
}
.skeleton::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skeleton-shimmer) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer var(--shimmer-duration) linear infinite;
  will-change: transform;
}

توضیح: این نسخه از ::before برای شبیه‌سازی حرکت نور استفاده می‌کند و با will-change به مرورگر اعلام می‌شود که بهینه‌سازی‌های لازم انجام شود. توجه کنید که will-change را فقط روی المان‌های مورد نیاز استفاده کنید تا مصرف حافظه افزایش نیابد.

نتیجه‌گیری و توصیه‌های نهایی

طراحی Skeleton UI با CSS یک ابزار قدرتمند برای افزایش احساس سرعت و رضایت کاربر است. با رعایت نکات دسترس‌پذیری، استفادهٔ بهینه از pseudo-elementها و متغیرهای CSS، می‌توان اسکلتی سبُک، قابل تنظیم و جذاب ایجاد کرد. در پروژه‌های بزرگ، ترکیب CSS و بارگذاری تدریجی محتوا (lazy loading) بهترین نتیجه را می‌دهد.

اگر نیاز دارید، می‌توانم نمونه‌ای از Skeleton برای یک کامپوننت واقعی (مثلاً فهرست خبری یا صفحه محصول) تهیه و کد آمادهٔ استفاده ارائه دهم.

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

ارسال