✩ دسته‌بندی (Tags/Hashtags): برای سازماندهی اطلاعات با کلمات کلیدی.

⚠️ حواست باشه که اینا رو با هم قاطی نکنی🙈👇:
دکمه با چیپ فرق میکنه

⚠️ اشتباه رایج: چیپ با دکمه چه فرقی داره؟
خیلی وقتا این دو تا با هم اشتباه گرفته می‌شن چون قیافه‌شون شبیهه! اما تفاوت اصلی‌شون اینه:
دکمه‌ها برای «اجرا کردن» یک کار مهم یا یک رویداد در اپلیکیشن (مثل دکمه‌ی «ثبت سفارش») طراحی شده.
چیپ‌ها معمولاً برای دسته‌بندی، فیلتر کردن، انتخاب گزینه‌ها یا وارد کردن داده به کار می‌رن و غالباً به صورت گروهی ظاهر می‌شن.

خب، چیپ رو یاد گرفتیم.🍟
امیدوارم این مطلب رو خوب پرزنت کرده باشم براتون 🩷
اگر برات مفید بود، برای دوستای دیزاینرت هم بفرست تا با هم یاد بگیریم.

🤓 مطلب بعدی: قراره بریم سراغ Navigation Bar؛ منتظرش باشید!

سلام رفقا🌸☺️
امروز می‌خوایم بریم سراغ اینکه بدونیم navigation bar چی هست و انواعش رو بشناسیم.
خیلی خیلی مهمه پس تا آخرش همراهم باش💪🤓

✅ نویگیشن بار (نوار ناوبری) چیه؟

✶ نوار ناوبری یه بخش مشخص توی رابط کاربری (UI) سایت یا اپلیکیشنه که لینکِ صفحات اصلی یا دسته‌بندی مطالب رو نشون می‌ده. در واقع مثل یه نقشه راهِ بصری عمل می‌کنه که کاربرها رو تو بخش‌های مختلف سایت راهنمایی می‌کنه.

✶ توی طراحی سایت، انتخاب یه استایل درست برای نویگیشن بار مشخص می‌کنه که کاربرها چه حسی به محصول دیجیتال شما پیدا می‌کنن. یه نویگیشن بارِ راحت و روون به کاربرها کمک می‌کنه تا سه‌سوته اطلاعاتی که می‌خوان رو پیدا کنن و تو همون نگاه اول، اعتبار برندتون رو هم می‌بره بالا.

✸هشت مدل رایج از استایل‌های نویگیشن بار🗺
هر محصول دیجیتالی یه مدل طراحی خاص برای نوار ناوبری نیاز داره. چه بخوای یه پورتال سازمانی بسازی، چه یه فروشگاه آنلاین یا یه پورتفولیو خلاقانه، انتخاب چیدمان درست می‌تونه کار با سایتت رو خیلی راحت‌تر کنه.👌
اینجا ۸ تا از الگوهای پرطرفدار تو طراحی وب مدرن رو یاد میگیریم:

۱) ناوبری افقی بالای صفحه (Horizontal Top Navigation)
این مدل یه استایل کلاسیک و قدیمیه. همون بالای هدر فیکس می‌شه و لینک‌های اصلی رو خیلی واضح و بدون دردسر نشون می‌ده. این‌طوری کاربرها می‌تونن از هر جای سایت به صفحات اصلی سر بزنن. این چیدمانِ سرراست و ساده، واسه سایت‌هایی که صفحات خیلی تودرتویی ندارن (مثل سایت‌های شرکتی، وبلاگ‌ها و لندینگ‌پیج‌ها) عالیه.

۲) ناوبری منوی بازشو یا دراپ‌داون (Dropdown Menu)
منوی دراپ‌داون در واقع همون نوار بالایی رو گسترش می‌ده. وقتی کاربر موس رو می‌بره روی یه دسته‌بندی اصلی یا روش کلیک می‌کنه، یه منوی عمودی باز می‌شه که زیرمجموعه‌ها رو نشون می‌ده. این منوها به طراح‌ها اجازه می‌دن گزینه‌های بیشتری رو اضافه کنن، ولی هدر سایت رو تر و تمیز و خلوت نگه دارن. واسه سایت‌هایی که پیچیدگی متوسطی دارن، یه انتخاب بی‌نظیره

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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