انواع کلیدها در طراحی متریال

تاریخ انتشار: 14 فروردین 1395

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

انواع کلیدها

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

کلیدهای ثابت :

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

کلیدهای ثابت در موبایل

کلیدها با قابلیت scroll :

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

کلیدهای قابل scroll در موبایل

با کلیک بر روی علامت فلش کلیدها scroll شده و ادامه آیتم ها نمایش داده میشوند.

مشخصات :

کلیدهای ثابت :

پهنای هر کلید میتواند با توجه به پهنای صفحه نمایش و تقسیم آن بر تعداد کلیدها محاسبه شود. یا میتوان پهنای تمامی کلیدها را هم اندازه بزرگترین کلید قرار داد.
چنانچه حاشیه بین لبه کلید و لبه صفحه نمایش 16dp یا کمتر میباشد، از کلیدهای با پهنای کامل (full width) به جای کلیدهای وسط نویس استفاده نمایید.
حداکثر و حداقل پهنا (شامل padding) :

حداکثر : 264dp
حداقل : 160dp برای صفحه نمایش های بزرگتر، 72dp برای صفحه نمایش های کوچکتر

ارتفاع : 48dp
padding :

12dp چپ و راست متن
20dp از پایین برای یک خط متن، 12dp از پایین برای دو خط متن

تنظیم (alignment) :

تمام پهنا برای صفحه نمایش های کوچکتر
تنظیم شده در وسط برای صفحه نمایش های بزرگتر

شاخص (indicator) :

ارتفاع : 2dp
رنگ : fff# یا رنگ تأکیدی

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

کلیدهای ثابت در موبایل در حالت عمودی

کلیدها به همراه متن :

متن :

14sp roboto medium
12sp در زمانی که در حداکثر دو خط قرار گرفته است.
حروف بزرگ
تنظیم شده در وسط (در راستای عمودی و افقی)
رنگ فعال : fff# یا رنگ تأکیدی
رنگ کلید غیرفعال : 70% fff#

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

کلیدها در موبایل در حالت افقی که در وسط تنظیم شده اند.

کلیدها به همراه آیکون و متن :

ارتفاع :

48dp

آیکون :

24x24 dp

تنظیم محتوا :

متن و آیکون در کلید، وسط نویس هستند(در راستای افقی).

padding :

10dp بین متن و آیکون
16dp زیر متن

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

ارتفاع :

48dp

آیکون :

24x24 dp

تنظیم محتوا :

آیکون، در وسط کلید تنظیم شده است(در راستای افقی و عمودی).

padding :

12dp زیر آیکون

کلیدهای ثابت در موبایل به همراه آیکون

کلیدهای قابل scroll :

محتوای اولین کلید از سمت چپ با خط محوری تنظیم میشود. این تنظیمات در حالت نمایش افقی و عمودی تغییر میکند تا با خطوط محوری مختلف هماهنگ شود.
پهنای هر کلید به طور مستقل محاسبه میشود.
حداقل و حداکثر پهنا (شامل padding) :

حداکثر : 264dp یا پهنای صفحه نمایش منهای 56dp
حداقل : 160dp برای صفحه نمایش های بزرگتر و 72dp برای صفحه نمایش های کوچکتر

ارتفاع :

48dp

padding :

12dp چپ و راست متن
20dp از پایین برای یک خط متن و 12dp از پایین برای دو خط متن

شاخص (indicator) :

ارتفاع : 2dp
رنگ : fff# یا رنگ تأکیدی

کلید قابل scroll

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

متن :

14sp roboto medium
12sp در زمانی که در حداکثر دو خط قرار گرفته است.
حروف بزرگ
تنظیم شده در وسط (در راستای عمودی و افقی)
رنگ فعال : fff# یا رنگ تأکیدی
رنگ کلید غیرفعال : 70% fff#

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

کلیدها در desktop

desktop :

حداکثر و حداقل پهنا (شامل padding) :

حداکثر : 264dp یا پهنای صفحه نمایش منهای 56dp
حداقل : 160dp برای صفحه نمایش های بزرگتر و 72dp برای صفحه نمایش های کوچکتر

ارتفاع :

48dp

تنظیم :

در وسط یا تنظیم شده با خط محوری سمت چپ

متن :

13sp roboto medium
حروف بزرگ
تنظیم شده در وسط (در راستای عمودی و افقی)
در صورت طولانی بودن متن برچسب در حداکثر دو خط قرار میگیرد.
رنگ فعال : fff# یا رنگ تأکیدی
رنگ کلید غیرفعال : 70% fff#

padding:

24dp چپ و راست متن
20dp از پایین برای یک خط متن و 12dp از پایین برای دو خط متن
padding چپ متن کلید اول : 80dp

شاخص (indicator) :

ارتفاع : 2dp
رنگ : fff# یا رنگ تأکیدی

مطلب بعدی -> فیلدهای متنی

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

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

2 خرداد 1402

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

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

31 اردیبهشت 1402

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

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

25 اردیبهشت 1402

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

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