الگوهای ناوبری اپلیکیشن موبایل: زبانه‌ها، منوهای کشویی و جریان‌های تو در تو
الگوهای ناوبری اپلیکیشن موبایل را بر پایه بسامد کارها، ساختار اطلاعات، نیازهای دسترس‌پذیری و آسانی بازگشت افراد به جای قبلی خود انتخاب کنید.
ناوبری باید شکل کلی اپلیکیشن را فهم‌پذیر کند. افراد باید بدانند چه بخش‌هایی وجود دارد، اکنون کجا هستند و چگونه بدون ازدست‌دادن کارشان جابه‌جا شوند. نوار زبانه، منوی کشویی یا جریان تو در تو فقط ترجیحی ظاهری نیست: هرکدام رابطه متفاوتی میان مقصدها را آشکار می‌کنند.
از کارهایی شروع کنید که افراد مرتب به آن‌ها برمی‌گردند، سپس سلسله‌مراتب محتوا را ترسیم کنید. برای مقصدهای هم‌سطح از ناوبری مستقیم، برای رابطه والد و جزئیات از ناوبری تو در تو، و زمانی که مقصدها بیش از ظرفیت یک صفحه کوچک هستند از منوی کشویی یا ناوبری سازگار با صفحه بزرگ‌تر استفاده کنید.
نکته‌های کلیدی
- برای تعداد کمی بخش اصلی متمایز که افراد مرتب به آن‌ها بازمی‌گردند، از زبانه‌ها یا نوار ناوبری استفاده کنید.
- وقتی مقصدی واقعاً درون مقصد دیگری قرار دارد، از ناوبری تو در تو استفاده کنید و مسیر بازگشت روشن نگه دارید.
- منوی کشویی را راهی برای نمایش فهرست گسترده‌تر مقصدها بدانید، نه جایی برای پنهان کردن کارهای ضروری.
- برچسب‌ها، وضعیت انتخاب، رفتار فوکوس و بازیابی وضعیت را روشن نگه دارید تا افراد بتوانند جهت خود را پیدا کنند و بازگردند.
از ساختار شروع کنید، نه از جزء رابط
مقصدهای اپلیکیشن را فهرست و بر اساس مدل ذهنی کاربر گروه‌بندی کنید. مقصدی مثل جست‌وجو ممکن است هم‌سطح خانه باشد؛ جزئیات یک مورد ذخیره‌شده زیر بخش ذخیره‌شده‌ها قرار می‌گیرد. اگر افراد باید مرتب میان بخش‌های هم‌سطح جابه‌جا شوند، آن گزینه‌ها را نمایان نگه دارید. اگر معمولاً از مجموعه به یک مورد و سپس برمی‌گردند، پشته یا جریان تو در تو این رابطه را طبیعی نشان می‌دهد.
مقصدها را از اقدام‌ها جدا کنید. نوشتن، اشتراک‌گذاری، فیلتر و مرتب‌سازی بر زمینه فعلی اثر می‌گذارند یا در آن اقدامی انجام می‌دهند؛ معمولاً مکان‌هایی در اپلیکیشن نیستند. آن‌ها را در نوار ابزار، منو یا کنترل وابسته به زمینه بگذارید، نه اینکه هر اقدام را به موردی در ناوبری اصلی تبدیل کنید.
- کارهایی را که افراد تکرار می‌کنند نام ببرید و مشخص کنید کدام بخش‌ها باید از همه‌جا در دسترس باشند.
- پیش از انتخاب کنترل‌های ناوبری، رابطه‌های والد و فرزند را ترسیم کنید.
- مقصدهای هم‌سطح را از نظر ظاهر و رفتار سازگار نگه دارید.
سه الگو را مقایسه کنید
نوار زبانه یا ناوبری چند مقصد اصلی را نمایان و جابه‌جایی سریع میان آن‌ها را ممکن می‌کند. زمانی مناسب است که مقصدها هم‌سطح باشند و برچسب هرکدام بدون توضیح شناخته شود. بخش فعلی را انتخاب‌شده نگه دارید. از انباشتن اقدام‌های نامرتبط در نوار یا ناپدید شدن مقصدهای مهم در فهرست بیشتر پرهیز کنید.
منوی کشویی ناوبری می‌تواند فهرست بزرگ‌تر و گروه‌بندی‌شده‌ای از مقصدها و گاهی جابه‌جایی حساب یا فضای کار را در خود جای دهد. منوی موقت در فضای صفحه صرفه‌جویی می‌کند، اما یک گام اضافی برای باز کردن و انتخاب کردن می‌خواهد و موقتاً روی محتوا را می‌پوشاند. در گوشی‌های کوچک، این هزینه ممکن است مقصدهای پرتکرار را پنهان کند. راهنمای فعلی Android در Material 3 برای سه تا پنج مقصد در فضای کوچک نوار ناوبری را ترجیح می‌دهد و برای اندازه‌های بزرگ‌تر سازگار می‌شود؛ توصیه قدیمی Material درباره منوی کشویی برای پنج مقصد یا بیشتر را نباید آستانه‌ای همگانی و به‌روز دانست.
ناوبری تو در تو با فهرست، کارت یا پیوند، نمای فرزند را باز می‌کند و عنوان و کنترل بازگشت مسیر را حفظ می‌کنند. برای دسته‌ها، تنظیمات، جزئیات محصول و کارهای مرحله‌به‌مرحله مناسب است. وقتی سلسله‌مراتب پنهان باشد، رفتار بازگشت سازگار نباشد یا کاربر برای رسیدن به بخش هم‌سطح ناچار به بازگشت‌های پیاپی شود، عمق زیاد آزاردهنده است. اگر افراد مرتب میان شاخه‌ها جابه‌جا می‌شوند، جست‌وجو، میان‌بر یا ساختار اصلی روشن‌تری اضافه کنید.
| الگو | زمان مناسب | نکات قابل‌توجه |
|---|---|---|
| زبانه‌ها / نوار ناوبری | چند بخش هم‌سطح به دسترسی مستقیم و پرتکرار نیاز دارند | مقصدهای زیاد، نمادهای مبهم، فهرست پنهان بیشتر، از دست رفتن وضعیت هر زبانه |
| منوی کشویی ناوبری | افراد به فهرستی منظم از مقصدهای زیاد یا گروه‌بندی‌شده نیاز دارند | بخش‌های ضروری پشت منو، فهرست طولانی، مشکل فوکوس یا بستن |
| ناوبری تو در تو | افراد از مجموعه والد به جزئیات یا کار مرتبط می‌روند | موقعیت نامشخص، بازگشت ناسازگار، عمق بیش از حد، از دست رفتن داده‌های واردشده |
بر اساس بسامد کار و اندازه صفحه انتخاب کنید
بپرسید افراد در یک جلسه معمولی چند بار میان بخش‌ها جابه‌جا می‌شوند. مجموعه‌ای کوچک و ثابت از مقصدهای پرتکرار از نوار نمایان سود می‌برد. اگر بیشتر استفاده بر یک کار یا خواندن جزئیات متمرکز است، ناوبری را کم‌حضورتر نگه دارید و فضا را به محتوا بدهید. منوی کشویی می‌تواند برای بخش‌های کم‌تکرار مناسب باشد، اما بررسی کنید افراد همچنان آن‌ها را پیدا می‌کنند و بدون حدس زدن برمی‌گردند.
برای اندازه پنجره، جهت‌گیری صفحه و قراردادهای پلتفرم برنامه‌ریزی کنید. راهنمای فعلی رابط انسانی Apple نوار زبانه iPhone را ناوبری سطح اصلی معرفی می‌کند و در iPad نمایش سازگارشونده نوار زبانه و نوار کناری را پشتیبانی می‌کند. Material 3 الگوی فشرده خود را نوار ناوبری می‌نامد و با افزایش عرض، شکل‌های دیگری ارائه می‌کند. هدف این الگوها مشترک است اما اجزای یکسانی نیستند؛ به‌جای کپی کردن ظاهر یک پلتفرم در دیگری، جایگاه، رفتار و سازگاری بومی را رعایت کنید.
جهت‌یابی و بازگشت را قابل‌اعتماد کنید
نمادها به‌تنهایی یادگیری ناوبری را سخت‌تر می‌کنند و ممکن است برای کاربران صفحه‌خوان مبهم باشند. به مقصدها برچسب‌های کوتاه و نمایان بدهید، وضعیت انتخاب را از نظر معنایی بیان کنید و مطمئن شوید کنترل‌ها نام دسترس‌پذیر و سطح لمس مناسب دارند. کنتراست در وضعیت‌های انتخاب‌شده و انتخاب‌نشده، متن درشت‌تر، بومی‌سازی و چیدمان راست‌به‌چپ را بررسی کنید. در صورت پشتیبانی، با VoiceOver یا TalkBack و با صفحه‌کلید یا ناوبری سوییچی آزمایش کنید؛ وقتی منو باز می‌شود، مقصدی انتخاب می‌شود یا نمایی بسته می‌شود، فوکوس باید قابل‌پیش‌بینی حرکت کند.
بازیابی بخشی از ناوبری است. رفتار «بازگشت» و «بستن» را متمایز نگه دارید: بازگشت مسیر سلسله‌مراتب را برمی‌گردد، اما بستن از نمای موقت یا مودال خارج می‌شود. هنگام جابه‌جایی میان بخش‌های اصلی یا بازگشت از جزئیات، جای مفید و داده‌های واردشده را حفظ کنید. وقتی مقصدی خالی یا موقتاً در دسترس نیست، جای آن را ثابت نگه دارید و وضعیت را توضیح دهید، نه اینکه ناوبری را بی‌صدا حذف یا غیرفعال کنید. برای کاری پرهزینه یا برگشت‌ناپذیر، مسیر بازگشت را پیش از تأیید روشن کنید.
بازبینی کاربردی ناوبری
با یک کار واقعی در اپلیکیشن پیش بروید، سپس با قابلیت‌های دسترس‌پذیری فعال تکرار کنید. ثبت کنید آیا افراد می‌توانند بخش فعلی را تشخیص دهند، به مقصد پرتکرار برسند و پس از انتخاب اشتباه بازگردند. همان مسیر را در گوشی کوچک و پنجره بزرگ‌تر مقایسه کنید؛ چیدمان سازگارشونده باید با تغییر شکل کنترل، معماری اطلاعات را حفظ کند.
از کتابخانه صفحه‌ها برای مقایسه نمونه‌های واقعی بخش‌ها و جریان‌های اپلیکیشن استفاده کنید، سپس هرکدام را نسبت به کارهای محصول خود بسنجید. بهترین الگو با رشد اپلیکیشن ساختار خود را خوانا نگه می‌دارد و پس از وقفه، مسیر بازگشت را روشن می‌کند.
- آیا کاربر تازه می‌تواند بخش‌های اصلی را فقط از روی برچسب‌هایشان توضیح دهد؟
- آیا جابه‌جایی میان مقصدهای هم‌سطح آسان است و انتخاب فعلی روشن نشان داده می‌شود؟
- آیا صفحه‌های جزئیات عنوانی معنادار و مسیر بازگشت قابل‌پیش‌بینی دارند؟
- آیا باز و بسته کردن منوی کشویی، زمینه را حفظ می‌کند و فوکوس دسترس‌پذیری را معقول جابه‌جا می‌کند؟
- آیا برچسب‌ها، سطح لمس، کنتراست و وضعیت انتخاب با متن درشت‌تر و فناوری کمکی همچنان قابل‌استفاده‌اند؟
- آیا فرد می‌تواند بدون ازدست‌دادن ورودی پیش‌نویس، جای پیمایش یا موقعیت مفید در سلسله‌مراتب برگردد؟
- آیا ساختار بدون ایجاد دو ناوبری اصلی رقیب با صفحه بزرگ‌تر سازگار می‌شود؟
