• Telegram
  • Google Plus
  • Linked In

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

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

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

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

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

انواع کلیدها

بسته به محل نمایش و حالت استفاده، کلیدها میتوانند به صورت ثابت یا قابل 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# یا رنگ تأکیدی


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

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

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

  • Telegram
  • Google Plus
  • Linked In