طراحی پنجره چت با CSS

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

اصول کلی طراحی پنجره چت

• سادگی و خوانایی: پیام‌ها باید واضح و قابل تمایز باشند.
• قابلیت خواندن در موبایل و دسکتاپ (Responsive).
• تم‌های قابل تغییر (روشن/تاریک) با متغیرهای CSS.
• دسترسی با کلیدهای صفحه‌کلید و ARIA برای کاربران کم‌توانایی.
• کارایی: بارگذاری سبک و کم‌هزینه از نظر رندر.

ساختار پایه HTML

<div class="chat">
  <div class="chat-header">Chat</div>
  <div class="chat-body" role="log" aria-live="polite">
    <div class="message incoming">
      <img class="avatar" src="avatar1.png" alt="User avatar">
      <div class="bubble">سلام!</div>
    </div>
    <div class="message outgoing">
      <div class="bubble">سلام! چطور می‌تونم کمک کنم؟</div>
      <img class="avatar" src="avatar2.png" alt="You">
    </div>
  </div>
  <form class="chat-input" aria-label="Send message">
    <input type="text" placeholder="پیام..." aria-label="Message">
    <button type="submit">ارسال</button>
  </form>
</div>

توضیح: این ساختار ساده شامل هدر، بخش پیام‌ها (با role=”log” برای خبررسانی تغییرات) و فرم ورودی است. کلاس‌های incoming/outgoing برای تفکیک سمت فرستنده به کار رفته‌اند.

CSS پایه با Flexbox و متغیرها

/* Basic chat CSS */:root{
  --bg: #f6f7fb;
  --incoming: #ffffff;
  --outgoing: #007bff;
  --text: #222;
  --muted: #6b7280;
  --radius: 14px;
}

.chat{
  width: 360px;
  max-width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.chat-header{
  padding: 12px 16px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid #e6e9ef;
}

.chat-body{
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}

.message{
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.message.incoming{
  justify-content: flex-start;
}

.message.outgoing{
  justify-content: flex-end;
}

.avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.bubble{
  max-width: 70%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
}

.message.incoming .bubble{
  background: var(--incoming);
  color: var(--text);
  border-bottom-left-radius: 6px;
}

.message.outgoing .bubble{
  background: var(--outgoing);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.chat-input{
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e6e9ef;
  background: #fff;
}

.chat-input input{
  flex: 1;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e6e9ef;
}

.chat-input button{
  background: var(--outgoing);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}

توضیح: این CSS از Flexbox برای چینش عمودی استفاده می‌کند. متغیرهای :root به شما امکان تغییر سریع رنگ‌ها و تم‌ها را می‌دهند. bubbleها حداکثر 70% عرض دارند تا خوانایی بهتر شود. chat-body از overflow-y:auto برای اسکرول پیام‌ها بهره می‌برد.

حالت تاریک و بهینه‌سازی با متغیرها

/* Dark mode toggle */@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1724;
    --incoming: #111826;
    --outgoing: #0369a1;
    --text: #e6eef8;
    --muted: #9aa4b2;
  }

  .chat{
    box-shadow: none;
  }

  .chat-input{
    background: #071022;
    border-top-color: rgba(255,255,255,0.04);
  }
}

توضیح: با استفاده از media query مخصوص prefers-color-scheme می‌توان به‌صورت خودکار تم تاریک را اعمال کرد. تغییر متغیرها کافی است و باقی استایل‌ها انعطاف‌پذیر می‌مانند.

واکنش‌پذیری و UX موبایل

@media (max-width: 420px){
  .chat{ height: 100vh; border-radius: 0; }
  .bubble{ max-width: 85%; font-size: 15px; }
  .avatar{ width: 32px; height: 32px; }
  .chat-header{ padding: 10px; }
}

توضیح: در موبایل معمولاً پنجره چت تمام صفحه و بدون شعاع گوشه‌ها (border-radius) بهتر است. اندازه حباب و آواتار کاهش می‌یابد تا فضا برای متن بیشتر شود.

انیمیشن‌ها و تعاملات نرم

برای بارگذاری پیام‌ها از انتقال‌های سبک استفاده کنید تا CPU زیاد مصرف نشود. مثال: استفاده از transform و opacity به جای تغییرات layout سنگین.

.message{ transform-origin: left; transition: transform .18s ease, opacity .18s ease; }
.message.enter{ transform: translateY(6px) scale(.99); opacity: 0; }
.message.enter-active{ transform: translateY(0) scale(1); opacity: 1; }

توضیح: انیمیشن با transform و opacity انجام شده که برای GPU بهینه‌تر است و باعث جابجایی‌های نرم می‌شود. از انیمیشن‌های طولانی یا پیچیده روی تعداد زیاد المان‌ها خودداری کنید.

دسترسی (Accessibility) و آراستگی

• aria-live=”polite” یا “assertive” برای اطلاع‌رسانی پیام‌های جدید به صفحه‌خوان‌ها.
• عناوین قابل دستیابی و برچسب‌های واضح برای ورودی‌ها.
• کنتراست رنگ مناسب بین متن و پس‌زمینه.
• قابلیت ناوبری با کیبورد: فوکوس منطقی روی ورودی، دکمه ارسال و پیام‌ها.

مقایسه تکنیک‌ها

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

• در اپ‌های با بار پیام بالا، از virtual scrolling (مثل windowing) برای کاهش DOM استفاده کنید.
• برای پیاده‌سازی قابلیت‌های بیشتر مانند رئاکشن‌ها یا پیش‌نمایش پیوست، از لایه‌بندی (z-index) و مدولار کردن CSS بهره ببرید.
• برای تست پاسخگویی و عملکرد، از ابزارهای مرورگر (Performance, Lighthouse) استفاده کنید.

خلاصه

طراحی یک پنجره چت خوب به ترکیب مناسب ساختار HTML، استایل‌های انعطاف‌پذیر با CSS و رعایت نکات دسترس‌پذیری نیاز دارد. استفاده از متغیرها، Flexbox، انیمیشن‌های سبک و توجه به موبایل و تم‌ها باعث می‌شود رابطی سریع، زیبا و قابل توسعه داشته باشید.

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

ارسال