حالت‌های خالی، خطا و بارگذاری

وضعیت: پیش‌نویس

این سه حالت کوتاه‌ترین متن‌های محصول‌اند و بیشترین اثر را بر اعتماد دارند. هر سه یک قاعده دارند: بگو چه شده و قدم بعدی را بده.

خالی

دو نوع حالت خالی هست: بی‌نتیجه (جست‌وجو یا فیلتر چیزی نیافت) و اولین بار (هنوز چیزی ساخته نشده). اولی راه برگشت می‌دهد، دومی دعوت به شروع.

مقاله‌ای با «زنجیرهٔ تامین» پیدا نشد

واژهٔ کوتاه‌تری را امتحان کنید، یا همهٔ مقاله‌های حوزهٔ توانمندسازی و بهینه‌سازی سازمانی را ببینید.

همهٔ مقاله‌ها

<div class="hq-empty" style="inline-size:100%">
  <svg class="hq-empty__icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"/></svg>
  <h2 class="hq-empty__title">مقاله‌ای با «زنجیرهٔ تامین» پیدا نشد</h2>
  <p class="hq-empty__text">واژهٔ کوتاه‌تری را امتحان کنید، یا همهٔ مقاله‌های حوزهٔ توانمندسازی و بهینه‌سازی سازمانی را ببینید.</p>
  <div class="hq-empty__actions"><a class="hq-button hq-button--secondary" href="#">همهٔ مقاله‌ها</a></div>
</div>

هنوز سندی بارگذاری نشده

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

<div class="hq-empty" style="inline-size:100%">
  <svg class="hq-empty__icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M30 24 26 24 26 20 24 20 24 24 20 24 20 26 24 26 24 30 26 30 26 26 30 26 30 24z"/><path d="M16,28H8V4h8v6a2.0058,2.0058,0,0,0,2,2h6v4h2V10a.9092.9092,0,0,0-.3-.7l-7-7A.9087.9087,0,0,0,18,2H8A2.0058,2.0058,0,0,0,6,4V28a2.0058,2.0058,0,0,0,2,2h8ZM18,4.4,23.6,10H18Z"/></svg>
  <h2 class="hq-empty__title">هنوز سندی بارگذاری نشده</h2>
  <p class="hq-empty__text">سندهای پروژه، مثل گزارش مالی و نمودار سازمانی، اینجا جمع می‌شوند تا تیم هر دو طرف به آن‌ها دسترسی داشته باشد.</p>
  <div class="hq-empty__actions"><button class="hq-button" type="button">بارگذاری سند</button></div>
</div>

خطا

۴۰۴: کاربر کار اشتباهی نکرده؛ متن سرزنش نمی‌کند. دو راه: صفحهٔ اصلی و تماس.
۵۰۰ و خطاهای سرور: مسوولیت را بپذیرید («از طرف ما»)، بگویید چه چیزی از دست نرفته و کِی دوباره امتحان کنند.
عدد خطا با Plex Serif و رنگ brand، مثل عددهای شاخص در اسلایدها.
بدون شوخی، بدون تصویرسازی بامزه؛ لحن همان لحن هارمونیک است.

۴۰۴

این صفحه پیدا نشد

شاید نشانی جابه‌جا شده یا اشتباه نوشته شده است. از صفحهٔ اصلی شروع کنید یا بگویید دنبال چه بودید.

صفحهٔ اصلی تماس با ما

<div class="hq-empty" style="inline-size:100%">
  <p class="hq-empty__code">۴۰۴</p>
  <h1 class="hq-empty__title">این صفحه پیدا نشد</h1>
  <p class="hq-empty__text">شاید نشانی جابه‌جا شده یا اشتباه نوشته شده است. از صفحهٔ اصلی شروع کنید یا بگویید دنبال چه بودید.</p>
  <div class="hq-empty__actions"><a class="hq-button" href="#">صفحهٔ اصلی</a><a class="hq-button hq-button--ghost" href="#">تماس با ما</a></div>
</div>

۵۰۰

مشکلی از طرف ما پیش آمد

چیزی که نوشته بودید ذخیره شده است. چند دقیقهٔ دیگر دوباره امتحان کنید؛ اگر باز هم نشد، به hi@harmoniq.solutions بنویسید.

<div class="hq-empty" style="inline-size:100%">
  <p class="hq-empty__code">۵۰۰</p>
  <h1 class="hq-empty__title">مشکلی از طرف ما پیش آمد</h1>
  <p class="hq-empty__text">چیزی که نوشته بودید ذخیره شده است. چند دقیقهٔ دیگر دوباره امتحان کنید؛ اگر باز هم نشد، به hi@harmoniq.solutions بنویسید.</p>
  <div class="hq-empty__actions"><button class="hq-button" type="button">دوباره امتحان کنید</button></div>
</div>

انجام بده«مشکلی از طرف ما پیش آمد. چیزی که نوشته بودید ذخیره شده است.»

انجام نده«اوپس! یه چیزی خراب شد 😅» یا «Error 500: Internal Server Error».

در حال بارگذاری

تا ۱ ثانیه چیزی نشان ندهید؛ بیشتر از آن، اسکلت همان چیدمانی که می‌آید.
اسکلت در surface-alt با یک موج نور آرام به طول سه ضرب (motion-duration-beat)؛ با «کاهش حرکت» ثابت می‌ماند.
ظرف در حال بارگذاری aria-busy="true" می‌گیرد. برای کارهای طولانی‌تر از ۱۰ ثانیه، پیشرفت را با متن بگویید: «۲ از ۵ فایل بارگذاری شد».
چرخندهٔ تنها (spinner) فقط برای دکمه‌ها و کارهای خیلی کوتاه.

<div class="hq-cards" style="inline-size:100%" aria-busy="true" aria-label="در حال بارگذاری">
  <div class="hq-card hq-card--outline" style="display:grid;gap:var(--hq-space-2)"><span class="hq-skeleton hq-skeleton--short"></span><span class="hq-skeleton hq-skeleton--title"></span><span class="hq-skeleton hq-skeleton--text"></span></div>
  <div class="hq-card hq-card--outline" style="display:grid;gap:var(--hq-space-2)"><span class="hq-skeleton hq-skeleton--short"></span><span class="hq-skeleton hq-skeleton--title"></span><span class="hq-skeleton hq-skeleton--text"></span></div>
  <div class="hq-card hq-card--outline" style="display:grid;gap:var(--hq-space-2)"><span class="hq-skeleton hq-skeleton--short"></span><span class="hq-skeleton hq-skeleton--title"></span><span class="hq-skeleton hq-skeleton--text"></span></div>
</div>
<span class="hq-skeleton hq-skeleton--block" style="inline-size:100%"></span>

کد

کلاس	توضیح
`hq-empty`	ظرف حالت خالی یا خطا
`hq-empty__icon`، `hq-empty__code`	آیکن یا عدد خطا
`hq-empty__title`، `hq-empty__text`، `hq-empty__actions`	عنوان، توضیح و دکمه‌ها
`hq-skeleton`	اسکلت؛ `--title`، `--text`، `--short`، `--block`