اندازه قلم و دستورالعمل‌های طراحی متریال دیزاین

در این مقاله می‌خواهیم به اندازه قلم‌ها و دستورالعمل‌های مربوط به آن در طراحی های UI بپردازیم و راهنمای کاملی برای طراحی‌های متریال دیزاین (Material Design) به شما ارائه دهیم. تمامی اندازه‌ها توسط گوگل ارائه شده است. در ادامه با ما همراه باشید.

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

همانطور که میدانید مقیاس اندازه قلم در اندروید sp می‌باشد که مناسب‌ترین مقیاس برای اندازه قلم است و همچنین برای پیکسل قابل اندازه گیری است و نسبت به تعداد آن متغییر است. البته به عنوان یک طراح باید بدانید که مقیاس‌های دیگری هم وجود دارند؛ مانند dp ,pt و px که می‌توان از آن‌ها هم استفاده کرد.

دستورالعمل تایپوگرافی گوگل برای استاندارد متریال دیزاین

شما می‌توانید در جدول زیر خلاصه‌ای از اندازه قلم مناسب برای هرقسمت رو مشاهده کنید:

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

در ادامه به بررسی تک تک عنوان‌ها می‌پردازیم:

عنوان صفحه

در طراحی متریال دیزاین اندازه عنوان‌ها 20sp می‌باشد و همچنین از فونت سایز متوسط استفاده می شود.

متن

اندازه متن در طراحی متریال دیزاین 20sp می‌باشد. این اندازه فونت عادی است و نیازی به تغییر نیست.

زمانی که قرار است متن کمی در داخل یک مدل کوچک نمایش داده شود اندازه متن را 16sp در نظر بگیرید.

لیست عنوان ها

بسیاری از لیست‌های ساده هر عنوان را با 16sp نشان می‌دهد.

در واقع این به عنوان اندازه پیش فرض در طراحی متریال دیزاین است.

از آنجایی که اهمیت عنوان از متن بیشتر است عنوان آیتم‌ها از خود آیتم‌ها باید بزرگتر باشد و برای نشان دادن این اهمیت از فونت سایز متوسط استفاده می‌کنیم

برای مثال اگر از فونت Sans-Sarif برای متن‌های خود استفاده می‌کنید برای عنوان از فونت Sans-Sarif-Medium استفاده کنید.

همچنین با این کار شما می‌توانید کنتراست روشن بین عنوان آیتم و متن داشته باشید

عنوان‌ آیتم‌های همبرگر منو را با 14sp و فونت سایز متوسط نمایش می‌دهند.

کنترل‌های فرم

فکر می‌کنم در عکس زیر همه چیز واضح است

سوالی که شاید برای شما هم بوجود آمده باشد این است که چرا سایز متن ورودی 16sp است؟

از آنجایی اهمیت کلمه های ورودی از متن و کلمه های داخل برنامه بیشتر است باید پس متن های ورودی سایز بزرگتری نسبت به سایر متن‌ها دارد.

منبع:

https://bit.ly/3jRf00X

پیشنهاد می کنم مقاله Navigation Drawer یا منوی کشویی چیست را مطالعه کنید.