حالت بارگذاری همان محصول است
حالت‌های بارگذاری پربیننده‌ترین صفحه‌ای هستند که تحویل می‌دهید. پنج الگوی اصلی، نمونه‌های واقعی از Linear، Vercel، Stripe، Cursor، Claude و Figma، و یک ممیزی شش‌سؤالی که امروز می‌توانید اجرا کنید.
تمام حالت‌های بارگذاری محصولتان را در طول یک سال جمع بزنید. هر کاربر، هر نشست، هر رفرش. این عدد، بر حسب ساعت-کاربر، پربیننده‌ترین صفحه‌ای است که تحویل می‌دهید. بیشتر تیم‌ها طوری با آن رفتار میکنند که انگار هیچ‌کس نگاه نمی‌کند.
داشبورد بازبینی طراحی می‌گیرد. حالت خالی هم، اگر حالت‌های خالی همان محصول‌اند را خوانده باشید، بازبینی طراحی می‌گیرد. حالت بارگذاری یک اسپینر ۱۶ پیکسلی از یک استایل‌شیت سال ۲۰۱۲ می‌گیرد و یک دعای خیر. این تنها صفحه‌ای است که کاربر همیشه می‌بیند و تنها صفحه‌ای که هیچ‌کس طراحی‌اش نمی‌کند.
حالت بارگذاری یک تصور برندی است
هر حالت بارگذاری یک قرارداد اعتماد است. محصول به کاربر میگوید «دارم کار می‌کنم، کرش نکرده‌ام، این انتظار عمدی است.» هر چیزی که صفحه بعدش بگوید، نشان میدهد برند زیر فشار چطور رفتار میکند.
حالت‌های بارگذاری Linear حس Linear می‌دهند. ردیف‌های اسکلتی به شکل فهرست issue، ساخت درجا که پیش از تأیید سرور ثبت می‌شود، گذارهای برندشده با ریتمی حساب‌شده. حالت‌های Stripe حس Stripe می‌دهند. درخشش دکمه‌ی پرداخت، اسکلت‌های کارت‌شکل در داشبورد، رسید که به حالت نهایی تبدیل می‌شود. هر دو انتظار را خودِ محصول می‌دانند.
نسخه‌ی بد، همان gif چرخان قدیمی روی پس‌زمینه‌ی سفید است. بدون شکل محتوا، بدون نشانه‌ی پیشرفت، بدون برند. به کاربر گفته می‌شود «ما سرمان شلوغ شد و یادمان رفت شما اینجایید.» این هم یک تصور برندی است. فقط آن چیزی نیست که تیم قصد داشت تحویل بدهد.
پنج الگوی حالت بارگذاری
بیشتر تیم‌ها «حالت بارگذاری» را یک مسئله‌ی طراحی می‌دانند. در واقع پنج مسئله است. هر کدام به نوعی از انتظار می‌خورد و به دلیلی متفاوت شکست می‌خورد.
۱. صفحهی اسکلتی
چیدمان جایگزینی که شکل محتوای نهایی را بازتاب میدهد. ردیف جایی که ردیف می‌آید، کارت جایی که کارت می‌آید. چشم پیش از رسیدن محتوا روی ساختار قفل می‌شود و انتظار مثل «در حال شکل‌گیری» خوانده می‌شود، نه «تازه شروع شده».
فهرست issue در Linear اسکلت‌های ردیفی دارد که تا سطح پیکسل با فهرست نهایی یکی است. Stripe Dashboard در بخش متریک‌ها اسکلت‌های کارت‌شکل دارد که به کارت‌های پرشده تبدیل میشوند. Notion جایگزین‌های بلوکی دارد که با بارگذاری سند به بلوک‌های واقعی بدل میشوند. وعده یکی است: شکل بارگذاری، شکل نهایی را پیشبینی میکند.
وقتی استفاده کنید: ساختار معلوم است. وقتی رد کنید: چیدمان آن‌قدر پویاست که اسکلت درباره‌ی آنچه می‌آید دروغ میگوید.
۲. رابط خوشبینانه
اقدام کاربر را فوراً، پیش از تأیید سرور، نمایش بدهید. در پس‌زمینه همسان‌سازی کنید. اگر سرور موافق بود، رابط سوسو نمی‌زند. اگر مخالف بود، رابط با مسیر واضح بازگردانی عقب می‌رود.
ساخت درجای issue در Linear معیار طلایی است. C را بزنید، عنوان بنویسید، enter بزنید، issue پیش از پایان رفت‌وبرگشت شبکه در فهرست است. مکان‌نما و جابهجایی انتخاب در Figma در تمام نشست چندنفره خوشبینانه است. کاربر هرگز شبکه را حس نمی‌کند.
وقتی استفاده کنید: شکست نادر و برگشت‌پذیر است. وقتی رد کنید: اقدام مخرب است یا کاربر پیش از ادامه به پاسخ سرور نیاز دارد.
۳. نمایش جزئی جریانی
اولین تکه را نمایش بدهید در حالی که بقیه هنوز در راه است. انتظار در خروجی محو می‌شود چون کاربر همین حالا مشغول مصرف نتیجه است.
جریان توکن در Claude تمیزترین نمونه‌ی موجود است، با ریتم هموارشده‌ای که با سرعت انسان خوانده می‌شود. Cursor دیف را توکن‌به‌توکن استریم میکند، پس کاربر کد را می‌خواند پیش از آن‌که مدل نوشتنش را تمام کند. Vercel لاگ دیپلوی را زنده استریم میکند، پس کاربر بیلد را تماشا میکند، نه این‌که منتظرش بماند. مطلب طراحی برای تأخیر هوش مصنوعی استراتژی کلی‌تر تأخیر را پوشش میدهد.
وقتی استفاده کنید: نتیجه ریتم طبیعی دارد. وقتی رد کنید: تکه‌ها به‌تنهایی به کار نمی‌آیند.
۴. پیشرفت به‌مثابه محتوا
خودِ انتظار ارزش است. لاگ دیپلوی، پایپلاین بیلد، ردپای استدلال ایجنت. کاربر منتظر نتیجه نیست. دارد نتیجه را می‌خواند.
نمای دیپلوی Vercel نمونه‌ی مرجع است. لاگ دیپلوی همان حالت بارگذاری است و پرتحویل‌ترین صفحهی پلتفرم. GitHub Actions با خروجی گام‌به‌گام اجرا همین کار را میکند. پنل ایجنت Cursor ردپای استدلال را هم‌زمان با کار نشان میدهد، پس کاری چنددقیقه‌ای هدفمند به نظر می‌رسد، نه گیرکرده. v0 و Lovable این را روی سطوح پرامپت-به-اپ ارائه میکنند، جایی که استریم بیلد همان حالت بارگذاری است و پیشنمایش پاداش.
وقتی استفاده کنید: خودِ انتظار ارزش است. وقتی رد کنید: گام‌ها به درد کاربری که فقط حالت نهایی برایش مهم است نمی‌خورند.
۵. اسپینر برندشده
ریزضربان، گرادیان، درخشش. لحظه‌ای که محصول یک توکن شخصیت به دست می‌آورد. درخشش دکمه‌ی پرداخت Stripe، نوار پیشرفت گرادیانی Vercel، ریزضربان Linear در انتظارهای گذار. هیچ‌کدام به‌تنهایی کار نمی‌کنند. سوار یکی از چهار الگوی اول‌اند و جلای برند را به انتظاری اضافه میکنند که از قبل ساختار دارد.
وقتی استفاده کنید: انتظار کوتاه است و صفحه پرریسک. وقتی رد کنید: پشتش اسکلت یا استریمی نیست. اسپینر برندشده بدون یکی از چهار الگوی اول در زیرش، یک اسپینر ۱۹۹۶ است با کد رنگی از ۲۰۲۶.
اسکلتها تقریباً همیشه از اسپینرها بهترند
اسکلت شکل چیزی را که می‌آید پیشبینی میکند. اسپینر فقط میگوید جایی چیزی در جریان است. یک انتظار، دو تجربه‌ی متفاوت.
اسکلت داشبورد Stripe روی ساعت به‌زحمت از نسخه‌ی اسپینر سریع‌تر است، اما شکاف سرعت ادراکشده خیلی بزرگ‌تر است. کاربر چیدمان کارت‌شکل را می‌بیند و پیش از رسیدن داده شروع به جهتیابی میکند. تا متریک‌ها بیایند، چشم از قبل سر جایش است. با اسپینر، کاربر به وسط صفحه زل زده و منتظر اجازه است تا به جای دیگری نگاه کند. اگر می‌توانید چیدمان را پیشبینی کنید، اسکلت بدهید. اگر نمی‌توانید، یک خط وضعیت بدهید.
رابط خوشبینانه کد تقلب است
انتظار نامرئی می‌شود چون اقدام پیش از شروع انتظار ثبت می‌شود.
Linear همه‌جا خوشبینانه ساخته است. ساخت issue، تغییر وضعیت، عوض کردن مسئول، افزودن برچسب، جابهجایی cycle. هر کدام به محض قصد در ذخیره‌ی محلی نوشته می‌شود و پس از پاسخ سرور همسان‌سازی می‌شود. چندنفره‌ی Figma روی حرکت مکان‌نما، انتخاب و بیشتر ویرایش‌ها خوشبینانه است. Notion روی ویرایش سند خوشبینانه است. هر محصول حس نرم‌افزار محلی میدهد چون شبکه زیر لایه‌ی خوشبینانه پنهان شده.
دو چیز این را کارآمد میکند. شکست باید نادر و برگشت‌پذیر باشد، وگرنه رابط سوسو می‌زند و کاربر اعتمادش را از دست میدهد. و خطاها باید دیده شوند. اقدام خوش‌بینانه‌ای که بی‌صدا خطای سرور را می‌بلعد از بی‌خوش‌بینی بدتر است، چون به کاربر یاد میدهد اقدام موفق بوده در حالی که نبوده. هر نوشتن خوشبینانه یک undo، یک toast یا یک بازگردانی قابل‌مشاهده لازم دارد.
پنج قاعده برای حالت‌های بارگذاری عالی
چهار از پنج را بزنید و انتظار طراحی‌شده به نظر می‌رسد. سه تا را بزنید و حالت بارگذاری حس فکر دومی میدهد.
- شکل بارگذاری، شکل نهایی را پیشبینی میکند. اسکلت ردیفی برای ردیف‌ها، اسکلت کارتی برای کارت‌ها. بدون پرش چیدمان وقتی محتوا می‌رسد.
- تا جای ممکن به انتظار محتوا بدهید. توکن‌ها را استریم کنید، لاگ را نشان بدهید، نتیجه‌ی جزئی را رندر کنید. کاربری که می‌خواند منتظر نیست.
- هر انتظار بالای ۸۰۰ میلی‌ثانیه بازخورد می‌گیرد. زیر ۸۰۰ میلی‌ثانیه یک گذار تمیز کافی است. بالای ۸۰۰ کاربر به نشانه‌ای نیاز دارد که سیستم زنده است، حتی اگر فقط افشای تدریجی ساختار و بعد محتوا باشد.
- اقدام‌های خوشبینانه مسیر undo قابل‌مشاهده می‌خواهند. یک toast، یک بازگردانی، یک حالت خطای روشن. خوش‌بینی بدون بازیابی، گازلایتینگ است.
- اسپینر بدون دلیل برندی ممنوع. اسپینرهای برندشده سوار یکی از چهار الگوی اول میشوند و هرگز جایگزینشان نمی‌شوند. اگر تنها چیز روی صفحه اسپینر است، طراحی تمام نشده.
زمینه‌ی عمیق‌تر در بررسی گسترده‌تر اصول طراحی وب است و در شیوه‌ای که core web vitals جابهجایی چیدمان را شکست عملکرد ادراکشده می‌داند.
ضدالگوهایی که حالت‌های بارگذاری را می‌کشند
شش شکل خرابی بیشتر از حد لازم تحویل داده میشوند. هر کدام قابل اصلاح است و هر کدام همین حالا جایی در محیط production است.
اسپینر بی‌پایان بدون پیشرفت. اسپینری که پانزده ثانیه است می‌چرخد بدون هیچ نشانه‌ای. کاربر نمی‌داند درخواست زنده است، مرده یا گیر کرده. با خط وضعیت، نوار پیشرفت یا یک سطح جریانی جایگزینش کنید.
مودال مسدودکننده‌ی صفحه که بسته نمی‌شود. مودال بارگذاری که کل صفحه را می‌رباید و نمی‌گذارد کاربر اسکرول کند، کپی کند یا بقیه‌ی محصول را بخواند. انتظار تبدیل به گروگان‌گیری می‌شود.
چیدمانی که با رسیدن محتوا از اسکلت می‌پرد. اسکلتی که با چیدمان واقعی نمی‌خواند. ردیف‌ها جابه‌جا میشوند، کارت‌ها دوباره می‌چینند، هدر حرکت میکند. اسکلت طراحی دیگری نیست، همان طراحی است بدون محتوا.
متن «Loading...» که برای همیشه تکرار می‌شود. سه نقطه‌ی چرخان، بدون پیشرفت، بدون وضعیت. کاربر ظرف دو نشست یاد می‌گیرد نادیده‌اش بگیرد، که کانال را برای هر وضعیت واقعی بعدی می‌کشد.
رابط خوش‌بینانه‌ای که بی‌صدا خطا را می‌بلعد. اقدام در رابط ثبت می‌شود، سرور شکست می‌خورد، محصول هرگز به کاربر نمی‌گوید. راه‌حل یک toast قابل‌مشاهده، دکمه‌ی undo یا بازگردانی است.
اسپینرهای برندشده روی انتظار ۱۰۰ میلی‌ثانیه‌ای. درخششی برای انتظاری که پیش از متوجه شدن کاربر تمام می‌شود. سربار محض. صفحه‌های سریع لایق یک fadeاند. صفحه‌های کند لایق ساختار.
طراحی عمدی اصطکاک موارد نادری را پوشش میدهد که انتظار باید عمداً دیده شود. حالت‌های بارگذاری از آن موارد نیستند. آن‌ها انتظارهایی‌اند که باید نامرئی باشند، طراحی شوند یا به محتوا بدل شوند.
ممیزی حالت بارگذاری
شش سؤال. پیش از انتشار بعدی هر صفحهی بارگذاری را از آن‌ها بگذرانید.
- آیا شکل بارگذاری، شکل نهایی را پیشبینی میکند؟ اسکلت برای چیدمان‌های قابل‌پیش‌بینی، خط وضعیت برای غیرقابلپیشبینی. بدون پرش چیدمان هنگام رسیدن محتوا.
- آیا انتظار اطلاعات حمل میکند؟ اسکلت، استریم، لاگ پیشرفت، خط وضعیت. هر انتظار بالای ۸۰۰ میلی‌ثانیه که چیزی رویش نیست یک نشتی است.
- آیا برای هر انتظار یک پیام اصلی واحد هست؟ «در حال بارگذاری داشبورد» از چهار سیگنال هم‌پوشان بهتر است. یک سیگنال، و سلسله‌مراتب بصری کار را انجام میدهد.
- آیا حالت بارگذاری با صدای برند می‌خواند؟ متن بارگذاری را کنار صفحهی پرشده بخوانید. اگر لحن عوض می‌شود، حالت بارگذاری برند دیگری به تن کرده.
- آیا اقدام‌های خوشبینانه برگشت‌پذیرند و در شکست دیده میشوند؟ هر نوشتن خوشبینانه undo، toast یا بازگردانی دارد. بدون شکست‌های بی‌صدا.
- آیا صفحهی بارگذاری محصول را به یک غریبه می‌فروشد؟ اگر تنها صفحه‌ای که دیده حالت بارگذاری بود، آیا حس همان محصولی را می‌داد که برایش ثبت‌نام کرده؟ اگر نه، پربیننده‌ترین صفحهی اپ شما بدطراحی‌شده‌ترین صفحه هم هست.
محصولی که هر حالت بارگذاری‌اش از این شش مورد رد شود، حتی روی شبکه‌ی کند هم سریع حس می‌شود.
الگو را انتخاب کنید، بعد انتظار را تحویل بدهید
حالت‌های بارگذاری لایه‌ی جلا نیستند. آن‌ها لایه‌ی برند، لایه‌ی اعتماد و لایه‌ی عملکرد ادراک‌شده‌اند که در صفحه‌ای فشرده شده‌اند که کاربر بیشتر از هر صفحهی دیگری می‌بیند. هر انتظار یک انتخاب طراحی است، چه تیم عمداً انتخابش کرده باشد چه نه.
اسکلت جایی که ساختار معلوم است. خوشبینانه جایی که شکست برگشت‌پذیر است. جریانی جایی که نتیجه ریتم دارد. پیشرفت به‌مثابه محتوا جایی که انتظار ارزش است. اسپینر برندشده فقط وقتی چهار الگوی اول کارشان را میکنند. بررسی اصول طراحی لندینگ پیج نسخه‌ی صفحهی بازاریابی همین انضباط است.
دست بردارید از رفتار با حالت بارگذاری مثل یک عذرخواهی بابت کند بودن. در مجموع، همان محصول است. انتظار را ارزش وقتشان کنید.
سوالات متداول
تفاوت صفحهی اسکلتی و اسپینر بارگذاری چیست؟
اسکلت شکل محتوای نهایی را با چیدمان جایگزین پیشبینی میکند، پس کاربر پیش از رسیدن داده شروع به جهتیابی میکند. اسپینر فقط میگوید چیزی در جریان است، بدون شکل، بدون ساختار، بدون پیشنمایش. اسکلتها انتظار ادراکشده را کوتاه میکنند. اسپینرها نه.
کِی رابط خوشبینانه و کِی پاسخ جریانی؟
رابط خوشبینانه وقتی خودِ اقدام کاربر کار است، مثل افزودن issue، تغییر وضعیت یا جابهجایی یک کارت. جریانی وقتی سرور کار را انجام میدهد و نتیجه ریتم طبیعی دارد، مثل تولید متن، خروجی لاگ یا پایپلاین دیپلوی. این دو با هم ترکیب میشوند.
آیا هرگز تحویل یک اسپینر ساده درست است؟
فقط بهعنوان جایگزین زیر یک ثانیه، فقط وقتی چیدمان واقعاً غیرقابلپیشبینی است و فقط با دلیل برندی. اسکلت، خط وضعیت یا سطح جریانی در هر معیار عملکرد ادراکشده از اسپینر بهتر است. پیشفرضتان اسپینر-آخر باشد.
انتظار را طراحی کنید، محصول را تحویل بدهید
انتظار صفحه‌ای است که کاربر بیشتر از همه می‌بیند. پرتکرارترین تصور برندی که می‌گیرد، پرتکرارترین سیگنال اعتمادی که می‌خواند و آزمون عملکرد ادراک‌شده‌ای که در هر بارگذاری صفحه اجرا میکند. تیمی که شش هفته برای داشبورد و یک بعدازظهر برای حالت بارگذاری وقت می‌گذارد، نسبت کار را اشتباه تحویل میدهد، دور از جایی که کاربر واقعاً زندگی میکند.
اگر تیمی می‌خواهید که حالت‌های بارگذاری را بخشی از محصول طراحی کند، نه آخرین اسپرینت پیش از لانچ، Brainy را استخدام کنید. ما محصولاتی تحویل می‌دهیم که انتظار بخشی از برندشان است و عملکرد ادراکشده از عملکرد واقعی جلو می‌زند.
Want a product where the loading states sell instead of apologize? Brainy designs perceived-performance systems and loading surfaces as part of the product, not as the last sprint before launch.
Get Started
