۳) مگا منو (Mega Menu)
مگا منو یه پنل بازشوی خیلی بزرگه که چند تا لایه از دسته‌بندی‌ها رو هم‌زمان بهت نشون می‌ده. به جای یه لیست عمودیِ ساده، مگا منوها از پنل‌های پهنی استفاده می‌کنن که لینک‌ها رو تو چند تا ستون می‌چینن و معمولاً توشون آیکون، عکس یا لیبل‌های تبلیغاتی هم هست. مگا منوها که با رفتن موس روشون یا با کلیک باز می‌شن، برای سایت‌های بزرگ و پرمحتوا (مثل دیجی‌کالا و آمازون)، سایت‌های خبری و پلتفرم‌های نرم‌افزاری کاربردی هستن!

۴) ناوبری کناری عمودی یا سایدبار (Vertical Sidebar Navigation)
همون‌طور که از اسمش پیداست، سمت چپ یا راست صفحه جا خوش می‌کنه. وقتی بسته است، فقط یه سری آیکون کوچیک نشون می‌ده تا جای زیادی از صفحه نگیره. اما وقتی باز می‌شه، متن کامل و لیست‌های چندلایه رو نشون می‌ده. اینطوری از فضای صفحه بهینه‌تر استفاده می‌شه و وسط صفحه برای محتواهای شلوغ و پر از دیتا خالی می‌مونه. تو داشبوردهای پیچیده، پنل‌های ادمین و ابزارهای SaaS خیلی طرفدار داره.

۵) ناوبری نوار جستجو (Search Bar Navigation)
این مدل، حول محور یه کادر جستجوی بزرگ می‌چرخه. برای سایت‌هایی که پر از داکیومنت هستن، وبلاگ‌های تخصصی یا فروشگاه‌هایی که محصولات بی‌شماری دارن، این نوار به کاربر کمک می‌کنه با تایپ چند تا کلمه کلیدی سریع بپره روی چیزی که می‌خواد و حسابی تو وقتش صرفه‌جویی می‌کنه.

۶) ناوبری تمام‌صفحه (Full Screen Overlay Navigation)
این مدل وقتی با یه منوی همبرگری یا یه دکمه فعال می‌شه، کل صفحه رو می‌پوشونه. محتوای اصلیِ صفحه موقتاً قایم می‌شه تا کاربر بتونه تمام تمرکزش رو بذاره روی پیدا کردن مسیرش. این استایل خیلی جذاب و تاثیرگذاره و بیشتر تو سایت‌های آژانس‌های خلاق، پورتفولیوهای تعاملی و سایتِ برندهای لاکچری می‌بینیمش.

۷) ناوبری بردکرامب یا خرده‌نان (Breadcrumb Navigation)
بردکرامب‌ها یه جور مسیر فرعی‌ان که به کاربر نشون می‌دن دقیقاً کجای سایت گیر افتادن! معمولاً با علامت‌هایی مثل > یا / جدا می‌شن و به کاربرها اجازه می‌دن بدون دردسر برگردن به دسته‌بندی‌های قبلی. تو سایت‌های فروشگاهی که ساختار پیچیده‌ای دارن (مثلاً: خانه > لوازم الکترونیکی > گوشی‌های هوشمند)، استفاده از بردکرامب از نون شب واجب‌تره تا کاربر تو کاتالوگ‌های شلوغ گم نشه.

۸) ناوبری فوتر (Footer Navigation)
این منو همون پایین صفحه جا خوش می‌کنه و تو همه صفحات سایت هم در دسترسه. برخلاف هدرهای بالا، فوترها کلی جای خالی دارن تا لینک‌های فرعی رو توشون جا بدی، بدون اینکه صفحه اصلی سایت شلوغ و درهم‌برهم بشه. طراح‌ها معمولاً از منوی فوتر برای لینک‌هایی مثل «حریم خصوصی، شرایط استفاده، اطلاعات تماس، فرصت‌های شغلی و شبکه‌های اجتماعی» استفاده می‌کنن.

❓ سوال اول: چند تا دکمه (آیکون) مجازیم توی باتم نویگیشنِ پایینِ صفحه بذاریم؟ هرچی بیشتر بهتر؟

💡 پاسخ:
نه، شلوغش نکنید! استاندارد طراحی (مخصوصاً تو متریال دیزاین گوگل) میگه بین ۳ تا ۵ عدد.
چرا؟
اول اینکه اگر بیشتر از ۵ تا بشه، دکمه‌ها خیلی کوچیک میشن و کاربر ممکنه اشتباهی روی یک دکمه ی دیگه رو لمس کنه (انگشت ما که موسِ دقیق نیست!).
دوم اینکه مغز آدم‌ها تو پردازش گزینه‌های زیاد زود خسته میشه (به این میگن بار شناختی). اگر اپلیکیشنی بیشتر از ۵ تا بخش اصلی داره، یعنی معماری اطلاعاتش نیاز به بازبینی داره.

❓ سوال دوم: فقط آیکون بذاریم بهتره یا حتماً باید زیر آیکون‌ها متن هم بنویسیم؟

💡 پاسخ:
متن نجات‌دهنده‌ست.
✘ خیلی از طراح‌های تازه‌کار فقط آیکون می‌ذارن تا قشنگ‌و مینیمال بنظر بیاد، اما تجربه کاربری رو نابود می‌کنن.

← به جز آیکون‌های خیلی خیلی جهانی مثل «خانه 🏠» یا «سرچ 🔍» بقیه آیکون‌ها می‌تونن برای آدم‌های مختلف معنی‌های متفاوتی داشته باشن.

✓پس همیشه از ترکیب «آیکون + یک کلمه متن کوتاه و خوانا» استفاده کنید تا کاربر، ثانیه‌ای شک نکنه که قراره کجا بره.

❓ سوال سوم: کاربر از کجا باید بفهمه الان تو کدوم صفحه‌ست؟

💡 پاسخ :
این یکی از مهم‌ترین اصول UX به اسم «بازخورد یا Feedback» هست. نویگیشن بار شما باید نشون بده که کاربر الان کجاست! به این حالت میگن Active State.

✓چطوری نشونش بدیم؟ آیکون اون صفحه‌ای که کاربر توشه باید پررنگ‌تر بشه، رنگش عوض بشه، توپر بشه یا یه خطِ ظریف زیرش یا بالاش کشیده بشه. بقیه آیکون‌ها باید کمرنگ‌تر یا توخالی باشن تا تمرکز فقط روی صفحه فعلی باشه.

❓ سوال چهارم: دلیل انتقال منوها از بالای صفحه به پایین صفحه در طراحی‌های مدرن چیست؟

💡 پاسخ :
دلیل اصلی این موضوع، بزرگ‌تر شدن ابعاد صفحه نمایش گوشی‌های هوشمند و توجه ویژه به راحتیِ دستِ کاربره.
در دنیای تجربه کاربری، مفهوم بسیار مهمی به نام «محدوده دسترسی شست» (Thumb Zone) وجود داره. زمانی که کاربر گوشی را با یک دست نگه می‌داره، انگشت شست به راحتی و بدون هیچ فشاری به نیمه پایین صفحه می‌رسه؛ اما برای لمسِ گزینه‌های بالای صفحه، کاربر مجبوره زاویه دستش را تغییر بده یا از دست دومش کمک بگیره. 😄
طراحان برای ایجاد حس راحتی بیشتر به کاربر، تصمیم گرفتن که مهم‌ترین دسترسی‌ها را در همون محدوده پایین صفحه (جایی که انگشت شست به طور طبیعی قرار داره) قرار بدن.

به بهانه‌ی اومدن پاییز، دوست داشتم یکی از پلی‌لیست‌های پاییزیِ موردعلاقه‌م رو باهاتون به اشتراک بذارم 🥹🧣
امیدوارم گوش بدید و کلی لذت ببرید 🍂

سلام 🙂‍↕️من اومدم بهتون یه چیزی که اون اوایل همیشه باهاش درگیر بودم رو اینجا باهاتون به اشتراک بذارم.
اگر همیشه براتون سوال بوده که هر کجای یک سایت چی به چیه و چه اسمی داره، این پست مخصوص خودته و تا آخر بخونش😉👇

هوش مصنوعی اومده همه ی این آپشن ها رو توی یه تصویر بهمون نشون داده که بدونید هرکدوم اسمش چیه‌.

🌐 آناتومی یک وب‌سایت از صفر تا صد:
✶ Logo (لوگو):
پلاک و هویت اصلی سایت که معمولاً بالا خودنمایی می‌کنه تا بفهمیم تو سایتِ چه کسی هستیم.

✶ Header / Main Menu (هدر و منوی اصلی):
زمانی که شما وارد یک وب سایت می شید، اولین چیزی که می‌بینید، هدر سایته. به همین دلیل نحوه چیدمان این قسمت ، اهمیت زیادی داره.
هدر سایت باید شامل موارد زیر باشه:
•لوگوی سایت
•منوی خدمات و یا محصولات سایت
•دکمه های ضروری مانند سبد خرید، آیکون شبکه های اجتماعی، تماس با ما، آیکون جستجو و… است.

✶ Upper Navigation (منوی ثانویه):
لینک‌های کوچیک‌تر و فرعی که معمولاً بالای منوی اصلی قرار دارن (مثل اطلاعات تماس یا دسترسی‌های سریع).

✶ Hamburger / Mobile Menu (منوی همبرگری):
منوی همبرگری (☰)برای طراحی‌های موبایل یا مینیمالیستی محبوب هستن چون هدرها رو تمیز نگه می‌داره و هنگام کلیک، لینک‌های بیشتری رو نشون می‌ده.🤓

✶Drop Down Menu (منوی آبشاری):
منویی که وقتی موس رو میبری روش، مثل آبشار گزینه‌هاش باز میشه و کلی زیرمجموعه جلوت سبز میشه.

✶ Hero Section (بخش قهرمان!):
همون بنر بزرگِ اول صفحه که با یک عکس پس‌زمینه خفن، شعار اصلی کسب‌وکار و یک دکمه جذاب، حسابی خودنمایی می‌کنه.

✶ Button / CTA (دکمه دعوت به اقدام):
همون دکمه‌های وسوسه‌کننده‌ای مثل «دریافت مشاوره» یا «خرید کن» که کاربر رو ترغیب به کلیک کردن می‌کنه.

✶ Section (بخش):
هر بلوک مستطیلی و جداگانه تو صفحه که یک بخش کامل از خدمات، ویژگی‌ها یا مطالب سایت رو تو خودش جا داده.

✶ Footer (فوتر / پانویس):
تهِ تهِ سایت! جایی که اطلاعات تماس، آدرس، ساعت کاری و کلی لینک‌های قانونی و مهم رو اونجا می‌ذارن.

✶ Link (لینک):
کلمات یا گزینه‌هایی که تا روشون می‌کنی کلیک، پرتت می‌کنن به یک صفحه دیگه!

✶Breadcrumbs (بردکرامب / مسیر راهنما):
اون لینک‌های کوچیکی که معمولاً بالای صفحه محصولات یا مقالات هستن (مثلاً: خانه > فروشگاه > دیجیتال > گوشی). به کاربر می‌گن الان دقیقا کجای درختِ ساختار سایت قرار داره و به راحتی می‌تونه برگرده عقب.

✶ Sidebar (سایدبار / نوار کناری):
ستون عمودی که سمت راست یا چپ صفحات (مخصوصاً بلاگ‌ها یا فروشگاه‌ها) قرار می‌گیره و توش فیلتر محصولات، دسته‌بندی‌ها، مقالات محبوب یا بنرهای تبلیغاتی رو می‌ذارن.

✶Pop-up / Modal (پاپ‌آپ یا مودال):
همون پنجره‌های خوشگلی که ناگهان وسط صفحه می‌پرن رو هوا! معمولاً برای خبرنامه، تخفیف‌های ویژه، یا اخطارهای مهم استفاده میشن.

✶ Floating Button / Back to Top (دکمه‌های شناور):
دکمه‌هایی که به صفحه «چسبیدن» و با اسکرول کردن کاربر بالا و پایین نمیرن؛ مثل همون دکمه معروفِ فلش رو به بالا (برای برگشتن سریع به بالای صفحه) یا دکمه چت آنلاین و پشتیبانی.

✶ Pagination (صفحه‌بندی):
توی لیست‌های طولانی (مثل محصولات فروشگاه یا مقالات)، اون شماره صفحات (۱، ۲، ۳...) یا دکمه «بارگذاری بیشتر» که ته صفحه میذارن تا مطالب قطره‌چکانی و مرتب لود بشن.

✶Cookie Banner (بنر کوکی):
اون نوار یا کادری که معمولاً پایین صفحه ظاهر میشه و به کاربر اطلاع میده که این سایت از کوکی‌ها استفاده می‌کنه (تو سایت‌های بین‌المللی خیلی واجبه).