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

تاریخ انتشار: 26 اسفند 1394

تعداد بازدید: 0 نفر

کلید (tab)

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

کاربرد :

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

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

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

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

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

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

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

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

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

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

کلیدها در desktop :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

محتوا :

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

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

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

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

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

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

اشتراک گذاری:

مشاهده نمونه های بیشتر

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.