اما یه چالش جالب! 🧐
وقتی تعداد چیپ‌ها زیاد می‌شه و کنار هم قرار می‌گیرن، این وضعیت برای کاربر خیلی سخت می‌شه که سریع چیزی که می‌خواد رو بین اون‌همه گزینه پیدا کنه.
وقتی تعداد چیپ‌ها زیاد می‌شه و کنار هم قرار می‌گیرن، این وضعیت برای کاربر خیلی سخت می‌شه که سریع چیزی که می‌خواد رو بین اون‌همه گزینه پیدا کنه.
❤4🎄1
⚠️ اشتباه رایج: چیپ با دکمه چه فرقی داره؟
خیلی وقتا این دو تا با هم اشتباه گرفته می‌شن چون قیافه‌شون شبیهه! اما تفاوت اصلی‌شون اینه:
دکمه‌ها برای «اجرا کردن» یک کار مهم یا یک رویداد در اپلیکیشن (مثل دکمه‌ی «ثبت سفارش») طراحی شده.
چیپ‌ها معمولاً برای دسته‌بندی، فیلتر کردن، انتخاب گزینه‌ها یا وارد کردن داده به کار می‌رن و غالباً به صورت گروهی ظاهر می‌شن.
خیلی وقتا این دو تا با هم اشتباه گرفته می‌شن چون قیافه‌شون شبیهه! اما تفاوت اصلی‌شون اینه:
دکمه‌ها برای «اجرا کردن» یک کار مهم یا یک رویداد در اپلیکیشن (مثل دکمه‌ی «ثبت سفارش») طراحی شده.
چیپ‌ها معمولاً برای دسته‌بندی، فیلتر کردن، انتخاب گزینه‌ها یا وارد کردن داده به کار می‌رن و غالباً به صورت گروهی ظاهر می‌شن.
❤7🎄1
خب، چیپ رو یاد گرفتیم.🍟
امیدوارم این مطلب رو خوب پرزنت کرده باشم براتون 🩷
اگر برات مفید بود، برای دوستای دیزاینرت هم بفرست تا با هم یاد بگیریم.
🤓 مطلب بعدی: قراره بریم سراغ Navigation Bar؛ منتظرش باشید!
امیدوارم این مطلب رو خوب پرزنت کرده باشم براتون 🩷
اگر برات مفید بود، برای دوستای دیزاینرت هم بفرست تا با هم یاد بگیریم.
🤓 مطلب بعدی: قراره بریم سراغ Navigation Bar؛ منتظرش باشید!
❤7🔥2🎄1
سلام رفقا🌸☺️
امروز می‌خوایم بریم سراغ اینکه بدونیم navigation bar چی هست و انواعش رو بشناسیم.
خیلی خیلی مهمه پس تا آخرش همراهم باش💪🤓
امروز می‌خوایم بریم سراغ اینکه بدونیم navigation bar چی هست و انواعش رو بشناسیم.
خیلی خیلی مهمه پس تا آخرش همراهم باش💪🤓
❤2😍2
✅ نویگیشن بار (نوار ناوبری) چیه؟
✶ نوار ناوبری یه بخش مشخص توی رابط کاربری (UI) سایت یا اپلیکیشنه که لینکِ صفحات اصلی یا دسته‌بندی مطالب رو نشون می‌ده. در واقع مثل یه نقشه راهِ بصری عمل میکنه که کاربرها رو تو بخش‌های مختلف سایت راهنمایی میکنه.
✶ توی طراحی سایت، انتخاب یه استایل درست برای نویگیشن بار مشخص میکنه که کاربرها چه حسی به محصول دیجیتال شما پیدا می‌کنن. یه نویگیشن بارِ راحت و روون به کاربرها کمک میکنه تا سه‌سوته اطلاعاتی که می‌خوان رو پیدا کنن و تو همون نگاه اول، اعتبار برندتون رو هم می‌بره بالا.
✶ نوار ناوبری یه بخش مشخص توی رابط کاربری (UI) سایت یا اپلیکیشنه که لینکِ صفحات اصلی یا دسته‌بندی مطالب رو نشون می‌ده. در واقع مثل یه نقشه راهِ بصری عمل میکنه که کاربرها رو تو بخش‌های مختلف سایت راهنمایی میکنه.
✶ توی طراحی سایت، انتخاب یه استایل درست برای نویگیشن بار مشخص میکنه که کاربرها چه حسی به محصول دیجیتال شما پیدا می‌کنن. یه نویگیشن بارِ راحت و روون به کاربرها کمک میکنه تا سه‌سوته اطلاعاتی که می‌خوان رو پیدا کنن و تو همون نگاه اول، اعتبار برندتون رو هم می‌بره بالا.
😍1
✸هشت مدل رایج از استایل‌های نویگیشن بار🗺
هر محصول دیجیتالی یه مدل طراحی خاص برای نوار ناوبری نیاز داره. چه بخوای یه پورتال سازمانی بسازی، چه یه فروشگاه آنلاین یا یه پورتفولیو خلاقانه، انتخاب چیدمان درست می‌تونه کار با سایتت رو خیلی راحت‌تر کنه.👌
اینجا ۸ تا از الگوهای پرطرفدار تو طراحی وب مدرن رو یاد میگیریم:
هر محصول دیجیتالی یه مدل طراحی خاص برای نوار ناوبری نیاز داره. چه بخوای یه پورتال سازمانی بسازی، چه یه فروشگاه آنلاین یا یه پورتفولیو خلاقانه، انتخاب چیدمان درست می‌تونه کار با سایتت رو خیلی راحت‌تر کنه.👌
اینجا ۸ تا از الگوهای پرطرفدار تو طراحی وب مدرن رو یاد میگیریم:
۱) ناوبری افقی بالای صفحه (Horizontal Top Navigation)
این مدل یه استایل کلاسیک و قدیمیه. همون بالای هدر فیکس می‌شه و لینک‌های اصلی رو خیلی واضح و بدون دردسر نشون می‌ده. این‌طوری کاربرها می‌تونن از هر جای سایت به صفحات اصلی سر بزنن. این چیدمانِ سرراست و ساده، واسه سایت‌هایی که صفحات خیلی تودرتویی ندارن (مثل سایت‌های شرکتی، وبلاگ‌ها و لندینگ‌پیج‌ها) عالیه.
این مدل یه استایل کلاسیک و قدیمیه. همون بالای هدر فیکس می‌شه و لینک‌های اصلی رو خیلی واضح و بدون دردسر نشون می‌ده. این‌طوری کاربرها می‌تونن از هر جای سایت به صفحات اصلی سر بزنن. این چیدمانِ سرراست و ساده، واسه سایت‌هایی که صفحات خیلی تودرتویی ندارن (مثل سایت‌های شرکتی، وبلاگ‌ها و لندینگ‌پیج‌ها) عالیه.
❤1
۲) ناوبری منوی بازشو یا دراپ‌داون (Dropdown Menu)
منوی دراپ‌داون در واقع همون نوار بالایی رو گسترش می‌ده. وقتی کاربر موس رو می‌بره روی یه دسته‌بندی اصلی یا روش کلیک میکنه، یه منوی عمودی باز می‌شه که زیرمجموعه‌ها رو نشون می‌ده. این منوها به طراح‌ها اجازه می‌دن گزینه‌های بیشتری رو اضافه کنن، ولی هدر سایت رو تر و تمیز و خلوت نگه دارن. واسه سایت‌هایی که پیچیدگی متوسطی دارن، یه انتخاب بی‌نظیره
منوی دراپ‌داون در واقع همون نوار بالایی رو گسترش می‌ده. وقتی کاربر موس رو می‌بره روی یه دسته‌بندی اصلی یا روش کلیک میکنه، یه منوی عمودی باز می‌شه که زیرمجموعه‌ها رو نشون می‌ده. این منوها به طراح‌ها اجازه می‌دن گزینه‌های بیشتری رو اضافه کنن، ولی هدر سایت رو تر و تمیز و خلوت نگه دارن. واسه سایت‌هایی که پیچیدگی متوسطی دارن، یه انتخاب بی‌نظیره
❤1
۳) مگا منو (Mega Menu)
مگا منو یه پنل بازشوی خیلی بزرگه که چند تا لایه از دسته‌بندی‌ها رو هم‌زمان بهت نشون می‌ده. به جای یه لیست عمودیِ ساده، مگا منوها از پنل‌های پهنی استفاده می‌کنن که لینک‌ها رو تو چند تا ستون می‌چینن و معمولاً توشون آیکون، عکس یا لیبل‌های تبلیغاتی هم هست. مگا منوها که با رفتن موس روشون یا با کلیک باز می‌شن، برای سایت‌های بزرگ و پرمحتوا (مثل دیجی‌کالا و آمازون)، سایت‌های خبری و پلتفرم‌های نرم‌افزاری کاربردی هستن!
مگا منو یه پنل بازشوی خیلی بزرگه که چند تا لایه از دسته‌بندی‌ها رو هم‌زمان بهت نشون می‌ده. به جای یه لیست عمودیِ ساده، مگا منوها از پنل‌های پهنی استفاده می‌کنن که لینک‌ها رو تو چند تا ستون می‌چینن و معمولاً توشون آیکون، عکس یا لیبل‌های تبلیغاتی هم هست. مگا منوها که با رفتن موس روشون یا با کلیک باز می‌شن، برای سایت‌های بزرگ و پرمحتوا (مثل دیجی‌کالا و آمازون)، سایت‌های خبری و پلتفرم‌های نرم‌افزاری کاربردی هستن!
❤2