Scroll Bar | نوار پیمایش

نوار پیمایش کنترل رابط کاربری است که به کاربر نشان می‌دهد محتوا از قاب دید بیشتر است و راه جابه‌جایی در آن را می‌دهد—با کشیدن شستی، کلیک روی ترک، یا همگام با چرخ ماوس و ژست لمسی. وقتی صفحه، جدول یا پنل جانبی از ارتفاع یا عرض ظرف بلندتر یا پهن‌تر می‌شود، overflow رخ می‌دهد؛ نوار پیمایش هم نشانه است هم ابزار. بدون نشانه، خیلی‌ها فکر می‌کنند به انتهای محتوا رسیده‌اند و بخش‌های پایین یا کناری را از دست می‌دهند. این کنترل با اسلایدر تنظیم مقدار، با نوار وضعیت، و با کنترل‌های انتخاب یکی نیست؛ کارش ناوبری در فضای محتواست، نه تنظیم عدد و نه اعلام state سیستم.

عمودی، افقی و هندسهٔ overflow

نوار عمودی برای جریان بلند صفحه، فهرست پیام، یا سند است. نوار افقی برای جدول عریض، تایم‌لاین، یا بوم طراحی ظاهر می‌شود. گاهی هر دو هم‌زمان لازم‌اند و گوشهٔ تقاطع باید از نظر بصری و هدف کلیک درست باشد. در طراحی، تصمیم مهم این است که کدام محور واقعاً باید اسکرول شود: اسکرول افقی تصادفی در متن فارسی خوانایی را نابود می‌کند؛ بهتر است جدول در موبایل کارت‌سازی شود یا ستون‌های ثابت و اسکرول کنترل‌شده داشته باشد. اسکرول تو در تو—صفحه و داخل کارت—از الگوهای گیج‌کننده است؛ اگر لازم شد، مرز و نشانه باید خیلی واضح باشد.

اندازهٔ شستی یا thumb نسبت به ترک، حس طول محتوا را می‌دهد: شستی کوچک یعنی سند خیلی بلند است. این بازخورد ادراکی به کاربر کمک می‌کند بداند کجای مسیر است—چیزی که ژست لمسی alone همیشه منتقل نمی‌کند.

کشف‌پذیری؛ چرا نوار هنوز مهم است

چرخ ماوس و سوایپ لمسی جابه‌جایی را آسان کرده‌اند، اما کشف «هنوز محتوا هست» را تضمین نمی‌کنند. سیستم‌عامل‌هایی که نوار را فقط هنگام حرکت نشان می‌دهند، زیبایی می‌آورند و گاهی هزینهٔ کشف. در اپ‌های داده و ابزار حرفه‌ای، نوار پایدار یا حداقل نشانه‌های قوی لبه—سایه، محو، فلش—جلوی از دست رفتن فیلترها و دکمه‌های پایین را می‌گیرد. در فرم‌های طولانی ثبت‌نام، اگر دکمهٔ ارسال پایین باشد و نوار یا نشانه نباشد، نرخ رها کردن بالا می‌رود؛ اینجا نوار پیمایش بخشی از قیف تبدیل است، نه جزئیات تزئینی.

برای محتوای آموزشی یا قراردادهای حقوقی، پیشرفت دیده‌شده روی نوار به حس کنترل کمک می‌کند. بعضی محصولات نوار پیشرفت خواندن جدا می‌گذارند؛ آن مکمل است، جایگزین کامل هندسهٔ اسکرول نیست.

سفارشی‌سازی ظاهر بدون کشتن کاربرد

CSS امروز اجازه می‌دهد رنگ، ضخامت و شعاع نوار را با برند هم‌رنگ کنید. وسوسهٔ نوار دو پیکسلی شفاف خطرناک است: روی پس‌زمینهٔ شلوغ ناپدید می‌شود و هدف کلیک برای ماوس دقیق نیست. حداقل کنتراست، ضخامت قابل استفاده، و حالت hover واضح خط قرمز است. در طراحی سیستم، توکن scrollbar را مثل بقیهٔ کنترل‌ها مشخص کنید و در چند تم روشن و تیره بیازمایید. پنهان کردن کامل نوار و تکیه فقط روی سوایپ، برای کاربران دسکتاپ بدون پد لمسی و برای دسترس‌پذیری ضعف می‌سازد.

در وب، رفتار نوار بین مرورگرها فرق دارد؛ تست واقعی لازم است. در اپ بومی، الگوهای سیستم‌عامل را بی‌دلیل نشکنید مگر ارزش محصول قوی باشد—کاربران عادت سیستم را با خود می‌آورند.

ورودی‌ها: ماوس، لمس، صفحه‌کلید

کاربر باید بتواند با چرخ، درگ شستی، کلیک ترک، کلیدهای جهت، Page Up و Down، و Home و End جابه‌جا شود. فوکوس و ترتیب تب نباید در ظرف اسکرول‌شونده گم شود. برای صفحه‌خوان، ساختار عنوان و منطقهٔ landmark مهم‌تر از خود نوار است، اما اگر محتوا در ظرف اسکرول داخلی باشد، باید قابل دسترسی با صفحه‌کلید بماند. کاهش حرکت سیستم باید انیمیشن اسکرول نرم اجباری را کم یا خاموش کند.

در موبایل، ناحیهٔ لبه برای gesture سیستم رزرو شده؛ نوار سفارشی خیلی ضخیم ممکن است با ژست برگشت تداخل کند. اولویت با الگوهای امن سیستم است.

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

اسکرول نامتناهی شستی را مدام کوچک یا بی‌معنا می‌کند و حس پایان را می‌گیرد؛ برگشت به یک آیتم خاص سخت می‌شود. برای فید اجتماعی گاهی پذیرفته است؛ برای جستجوی کالای هدف‌دار یا فهرست مالی، صفحه‌بندی یا دکمهٔ «بارگذاری بیشتر» کنترل و پیش‌بینی بهتری می‌دهد. اگر نامتناهی می‌گذارید، موقعیت را حفظ کنید، اسکلتون واضح نشان دهید، و برای پرش به بالا راه میانبر بگذارید. نوار پیمایش در این الگو باید هنوز بگوید محتوا در حال گسترش است، نه اینکه کاربر را در خلأ رها کند.

ترکیب فیلتر با اسکرول نامتناهی بدون ریست آگاهانه، باگ کلاسیک است: کاربر فیلتر می‌کند و وسط لیست قبلی می‌ماند. همگام‌سازی حالت اسکرول با query بخشی از طراحی کنترل است.

عملکرد و پایداری ظرف

محتوای سنگین هنگام اسکرول—تصویر بدون تنبلی، شنوندهٔ اسکرول پرهزینه، سایه‌های پیچیده—جابه‌جایی را لکنت می‌دهد و کاربر نوار را مقصر می‌داند. مجازی‌سازی فهرست بلند، تنبلی تصویر، و پرهیز از layout thrashing تجربه را حفظ می‌کند. ارتفاع ظرف باید پایدار باشد؛ پرش محتوا بعد از بارگذاری فونت یا بنر، موقعیت شستی را جابه‌جا می‌کند و کاربر جای خود را گم می‌کند. رزرو فضا و اسکلتون این پرش را کم می‌کند.

در پنل‌های تقسیم‌شده، کشیدن جداکننده و اسکرول داخلی باید هم‌زمان خوب کار کنند؛ هدف‌های کلیک نزدیک به هم خطای اشاره می‌سازند.

تفاوت با اسلایدر و کنترل‌های دیگر

اسلایدر مقدار پیوسته را در یک دامنه تنظیم می‌کند—مثل شدت فیلتر. نوار پیمایش موقعیت در محتوا را عوض می‌کند. شباهت ظاهری شستی نباید نقش را قاطی کند. اسنک‌بار و نوار وضعیت پیام و state می‌دهند، ناوبری فضایی نیستند. منوی کشویی اسکرول داخلی دارد اما الگوی تعاملش انتخاب گزینه است. در نقد طراحی، اگر کسی «اسکرول‌بار» بگوید ولی منظورش scrubber ویدیو باشد، قبل از پیاده‌سازی واژه را روشن کنید.

در بوم‌های زوم‌پذیر مثل نقشه یا ابزار طراحی، گاهی نوار با pan و zoom هم‌زیستی دارد؛ باید مشخص باشد کدام ژست مال کدام است وگرنه کاربر مدام اشتباهی زوم می‌کند به جای اسکرول فهرست لایه‌ها.

نشانه‌های مکمل لبه و الگوی مخفی‌سازی

سایه یا محو در لبهٔ پایین فهرست، حتی وقتی نوار overlay است، می‌گوید هنوز آیتم هست. در کاروسل افقی، فلش و نقطه‌ها مکمل نوارند—گاهی به‌جای نوار افقی نازیبا. تصمیم محصول باید یکدست باشد: در یک اپ، یک‌جا نوار همیشه پیدا و جای دیگر کاملاً مخفی، مدل ذهنی را می‌شکند. مستند سیستم طراحی برای «کی نوار پایدار، کی overlay» از بحث تکراری در هر اسپرینت جلوگیری می‌کند.

در حالت چاپ یا خروجی PDF، نوار معنا ندارد؛ محتوا باید بدون وابستگی به اسکرول خوانا باشد. برای حالت فقط‌خواندنی طولانی، فهرست مطالب چسبان گاهی بهتر از تکیهٔ صرف به شستی کوچک است.

جمع‌بندی برای طراح و توسعه‌دهنده

نوار پیمایش جزئی کوچک و اثرگذار است: کشف محتوا، حس پیشرفت، و کنترل جایگزین برای ورودی‌های مختلف. آن را بیش از حد مینیمال نکنید، اسکرول تو در تو را بی‌دلیل نسازید، و الگوی نامتناهی را فقط جایی بگذارید که مدل ذهنی کاربر با فید باز می‌خواند. در دست‌به‌دست کردن با توسعه، رفتار overflow، پشتیبانی صفحه‌کلید، و ظاهر در تم‌ها را صریح بنویسید؛ «اسکرول پیش‌فرض مرورگر» هم تصمیم است و باید آگاهانه باشد.

در آزمون کاربردپذیری، ببینید آیا شرکت‌کننده‌ها به بخش پایین می‌رسند یا نه. اگر نه، قبل از بزرگ کردن دکمهٔ بازاریابی، نشانهٔ اسکرول و ارتفاع قاب را درست کنید. بسیاری از «کاربر ویژگی را پیدا نمی‌کند» در واقع «کاربر نمی‌داند باید اسکرول کند» است. نوار پیمایش و نشانه‌های لبه‌ای، همان تذکر مودبانهٔ رابط‌اند که هنوز راه ادامه دارد.

برای محصولات راست‌به‌چپ، جای نوار عمودی معمولاً همچنان منطبق بر عرف سیستم‌عامل و مرورگر می‌ماند؛ مهم‌تر هم‌راستایی محتوا و عدم اسکرول افقی ناخواسته در متن است. در جدول‌های RTL، ثابت نگه داشتن ستون برچسب و اسکرول افقی بدنه، الگوی رایجی است که باید با نوار قابل کشف همراه شود تا ستون‌های دور از دست نروند.

در نهایت، نوار پیمایش را مثل درِ شیشه‌ای کابینت ببینید: هم عبور می‌دهد هم نشان می‌دهد پشتش چیزی هست. اگر در را نامرئی کنید، کسی سراغ ظرف پشتش نمی‌رود—حتی اگر بهترین محتوای محصول آنجا چیده شده باشد.