تم تاریک
ناوبری Navigation
ناوبری داخلی ابزاری است که به کاربر اجازه میدهد در میان صفحات، سرویسها و بخشهای مختلف پنل حرکت کند. هدف این الگو، افزایش کشفپذیری (Discoverability)، کارایی (Efficiency) و درک درست کاربر از موقعیت فعلی خود در ساختار محصول است.
۱. سطوح ناوبری
ساختار پنل آروان به سه سطح اصلی تقسیم میشود که هر کدام ابزار ناوبری مختص به خود را دارند:
الف. ناوبری کلان
دسترسی به سرویسهای اصلی آروان را فراهم میکند و در تمام صفحات ثابت است.
- سایدبار محصولی (Sidebar): برای جابجایی بین محصولات (CDN، سرور ابری و...).
- هدر (Header): دسترسی به امکانات غیرمحتوایی (جستوجوی سراسری، پروفایل، اعلانها).
ب. ناوبری سطح میانی
جابجایی درون یک محصول مشخص (مثال تنظیمات داخل CDN) را مدیریت میکند.
| عنصر | محل قرارگیری | کاربرد |
|---|---|---|
| Inside Sidebar | سمت راست | جابجایی بین بخشهای داخلی یک محصول (مانند ایمیجها در سرور ابری). |
| Subheader | زیر هدر اصلی | مدیریت عنوان صفحه، اکشنها و دکمه بازگشت (Back). |
| Tabs | زیر سابهدر | جابجایی بین زیربخشهای همعرض (مانند لیست سرورها / شبکه). |
ج. ناوبری درون محتوا
حرکت در یک صفحه طولانی یا فرآیندهای مرحلهای را شامل میشود.
- Pagination: مدیریت دادههای حجیم در جداول.
- Steppers: نمایش مراحل در فرآیندهای خطی و چندگامی (مانند مراحل ساخت یک دیتابیس).
۲. مسیر راهنما
بردکرامب برای جهتگیری کاربر در ساختار سلسلهمراتبی پنل الزامی است و همیشه بالای ناحیه محتوای اصلی قرار میگیرد.
استاندارد پیادهسازی:
- شروع مسیر: همیشه از نام برند (آروان) شروع شده و به عنوان صفحه کنونی ختم میشود.
- لینکدهی: تمام اجزا بهجز مورد آخر (صفحه کنونی) باید لینک فعال باشند.
- طول مسیر: در صورت طولانی شدن، از سهنقطه برای خلاصهسازی استفاده میشود که با
Hoverکل مسیر را نمایش میدهد.
۳. مدیریت بازگشت
حفظ جریان کاری کاربر در هنگام بازگشت به عقب حیاتی است.
| الگو | نحوه استفاده |
|---|---|
| دکمه بازگشت (Back) | در صفحات جزئیات (Detail View) برای بازگشت به لیست مادر (مثال بازگشت به لیست سرورها). |
| لغو و بستن (Cancel) | در مودالها یا سایدپنلها برای خروج بدون ذخیره تغییرات. |
| تاریخچه مرورگر | سیستم باید به درستی از دکمه Back مرورگر پشتیبانی کند. |
راهنمای طراحی
- ثبات مکان: المانهای ناوبری نباید در صفحات مختلف جابجا شوند.
- وضعیت فعال (Active State): آیتم انتخاب شده در سایدبار یا تبها باید به وضوح متمایز باشد.
- دسترسپذیری: تمامی لینکها و دکمههای ناوبری باید با کیبورد قابل پیمایش باشند.
بایدها و نبایدها
| Do | Don't |
|---|---|
| از Breadcrumb برای نشان دادن عمق ساختار استفاده کنید. | از Breadcrumb به عنوان جایگزین منوی اصلی استفاده نکنید. |
| عنوان دکمه بازگشت را مشخص کنید (مثال بازگشت به لیست). | کاربر را پس از بستن مودال به صفحه اشتباهی هدایت نکنید. |