• Telegram
  • Google Plus
  • Linked In

کلید (tab) در طراحی متریال

کلید (tab) در طراحی متریال

تاریخ درج: خلاصه

کلیدها این امکان را فراهم میکنند که به راحتی بین حالت های مختلف یک برنامه یا مجموعه دسته بندی شده از داده ها جا به جا شوید.

کلید (tab) در طراحی متریال

کلید (tab)

کلیدها این امکان را فراهم میکنند که به راحتی بین حالت های مختلف یک برنامه یا مجموعه دسته بندی شده از داده ها جا به جا شوید.

کاربرد :

یک کلید امکان ارائه گروهی از محتوا را فراهم میکند. برچسب یک کلید به طور خلاصه نمایانگر نوع محتوای دسته بندی آن میباشد.

کلیدها در موبایل :


نوار اپلیکیشن و نوار کلید ثابت پیش فرض


نوار اپلیکیشن گسترده و نوار کلید ثابت


نوار کلید ثابت در بالای صفحه به همراه محتوای scroll شده


جستجوی داخلی، نوار اپلیکیشن و نوار کلید ثابت


نوار اپلیکیشن پیش فرض و نوار کلید قابل scroll


رنگ متن با رنگ شاخص کلید یکسان میباشد.


نوار اپلیکیشن پیش فرض و نوار کلید ثابت به همراه آیکون


رنگ آیکون با رنگ شاخص کلید یکسان میباشد.

کلیدها در desktop :


نوارهای اپلیکیشن و کلید پیش فرض


کلیدها به همراه منوی کشویی با عنوان More


کلیدها به همراه منوی کشویی باز شده با عنوان More


کلیدها به همراه گزینه Books که از منوی کشویی More انتخاب شده است.


کلیدها به همراه صفحه بندی سرریز (overflow)


کلیدها به همراه صفحه بندی سرریز (overflow) در حالت scroll شده


نوار کلید تنظیم شده در وسط

چه زمانی از کلیدها استفاده کنیم ؟

از کلیدها برای دسته بندی و سازماندهی محتوا در سطح بالا استفاده نمایید مانند نشان دادن بخش های مختلف یک روزنامه. از کلیدها برای اسلایدشو و صفحه بندی استفاده نکنید زیرا این حالات جهت نمایش محتوا میباشند نه جهت راهبری بین گروه داده های مختلف.
کلیدها را به همراه محتواهایی که خودشان حرکت جاروبی (swipe) دارند به کار نبرید زیرا این حرکت برای راهبری بین کلیدها استفاده میشود. برای مثال، از کلیدها در لیست هایی که محتوای آن ها قابل حذف با حرکت جاروبی میباشد، استفاده نکنید.
از کلیدهای ثابت به تعداد محدود استفاده نمایید. کلیدهای قابل scroll زمانی استفاده میشوند که تعداد زیاد یا متغیری از کلیدها وجودد اشته باشد.


کلیدها بین محصولات مهم یک مغازه جا به جا میشوند.


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

مشخصه های کلیدها :

کلیدها نحوه نمایش محتوا را در یک مکان ثابت کنترل میکنند.

مشخصه های قالب بندی :

  • کلیدها را در یک خط واحد نمایش دهید. در صورت نیاز، برچسب کلیدها را به خط دوم انتقال داده و آن ها را کوتاه و خلاصه نمایید.
  • هیچگاه در داخل یک کلید، محتوایی که خودش دارای کلید میباشد، قرار ندهید.
  • کلیدی را که فعال میباشد و محتوای آن در حال نمایش است با رنگی متفاوت مشخص کنید.
  • کلیدها را به صورت سلسله مراتبی گروه بندی نمایید. کلیدها را با توجه به محتوای آن ها گروه بندی کنید.
  • کلیدها و محتوای آن ها را مرتبط با هم قرار دهید تا ارتباط بین این دو حفظ شود.

کلیدها در یک خط واحد قرار میگیرند.


کلیدها نباید هر کدام در یک خط جداگانه قرار بگیرند.


عنوان کلید را طوری انتخاب کنید که کاملا مشخص کننده محتوای آن باشد.


کلیدها نباید تو در تو باشند.

محتوا :

محتوای موجود در کلیدها میتواند متغیر باشد حتی در بین کلیدها. برای مثال، کلیدهای نمایش دهنده نمونه کارهای یک هنرمند در سال های مختلف یا کلیدهای حاوی انواع مختلف تنظیمات.
کلیه محتوا و داده ها در یک مجموعه از کلیدها به طور کلی باید به همدیگر مرتبط باشند(مانند تنظیمات).
برچسب کلیدها میتواند تماماً آیکون بوده یا متن باشد. در صورت انتخاب برچسب متنی، از عناوین کوتاه برای آن ها استفاده کنید.

یک برچسب طولانی که بیشتر از ماکسیمم پهنای کلید میباشد میتواند قبل از کوتاه و خلاصه شدن به خط دوم منتقل شود.


برچسب ها را قبل از کوتاه کردن به خط بعد انتقال دهید.


پهنای برچسب های طولانی را تغییر ندهید و چنانچه میخواهید به طور کامل نمایش داده شوند از کلیدهای قابل scroll استفاده کنید.


در برچسب ها، آیکون ها را همراه با متن استفاده نکنید. فقط آیکون یا فقط متن به کار ببرید.


ادامه مطلب -> انواع کلیدها

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In