طراحی متریال: واحدها و اندازه‌گیری

طراحی متریال به‌تدریج در حال گسترش است و طراحان و شرکت‌ها در حال بازطراحی اپلیکیشن های خود بر پایه متدها و الگوی متریال هستند. گوگل سرمایه‌گذاری معنوی و زمانی بسیاری بر روی این زبان طراحی کرده است. از این‌رو به نظر می‌رسد طراحان نیز با تمایل به سمت این متد یکپارچه و حساب‌شده در حرکت‌اند. در این نوشته قصد دارم در مورد واحدها و اندازه‌گیری در طراحی متریال مطالبی را عنوان کنم. واحدها در زمینه‌های مختلف دارای معانی متفاوتی هستند. در اینجا به پیکسل‌های مستقل از دستگاه (device-independent pixels) پیکسل‌های مقیاس‌پذیر (scaleable pixels) و همین‌طور تراکم پیکسل (pixel density) خواهیم پرداخت.

 

– تراکم پیکسل (DPI)

می‌دانیم که به تعداد پیکسل‌های قرارگرفته در هر اینچ تراکم پیکسل گویند. صفحه‌نمایشی دارای تراکم بالاست که دارای پیکسل‌های بیشتری در هر اینچ باشد. بنابراین وقتی یک المان رابط کاربری مانند دکمه را با اندازه‌ای ثابت طراحی می‌کنیم، در صفحات با تراکم بالا کوچک و در صفحات با تراکم پایین المان بزرگ‌تر نمایش داده خواهد شد. DPI یا وضوح صفحه اشاره به تعداد پیکسل‌های موجود در صفحه‌نمایش داد.

DPI = عرض صفحه‌نمایش (یا ارتفاع) در مقیاس پیکسل (تقسیم‌بر) عرض صفحه‌نمایش (یا ارتفاع) در مقیاس اینچ.

برای آشنایی و اطلاع بیشتر با فرمولاسیون تراکم پیکسل به این مطلب و برای یافتن سریع DPI به سایت pixeldensitycalculator مراجعه کنید.

 

– پیکسل مستقل از تراکم (DP)

این واحد همانطور که از نامش پیداست به تراکم پیکسل وابسته نبوده و از آن مستقل است. یعنی المان طراحی شده در تمامی صفحه نمایش‌ها با تراکم‌های مختلف به یک شکل و اندازه نمایش داده می‌شود. این واحد به اختصار DIPS نیز نامیده شده. در توسعه اپلیکیشن برای صفحه نمایش‌های مختلف باید از واحد DP برای المان‌ها استفاده شود.

پیکسل مستقل از تراکم

وضوح صفحهعرض صفحه نمایش در پیکسل
(dpi * عرض در مقیاس اینچ)
عرض صفحه نمایش در پیکسل مستقل از تراکم
120dpi180px240dp
160dpi240px240dp
240dpi360px240dp

یک DP برابر است با یک پیکسل فیزیکی بر روی صفحه نمایشی با تراکم ۱۶۰DPI. فرمول محاسبه DP برابر است با:

DP = (عرض در مقیاس پیکسل (ضربدر) ۱۶۰) (تقسیم بر) DPI

بعنوان مثال در طراحی یک آیکون: ۳۲×۳۲ پیکسل با ۳۲۰dpi برابر است با ۱۶×۱۶ DP.

در استایل نویسی به زبان CSS جائیکه از DP یا SP استفاده شده است فقط باید از پیکسل استفاده نمود. واحد DP فقط در برنامه نویسی و توسعه اندروید بکار می‌رود.

 

– پیکسل مقیاس پذیر (SP)

این واحد در واقع همان کار DP را در توسعه اندروید انجام می‌دهد با این تفاوت که این مقیاس برای فونت ها بکار می‌رود. مقدار پیش فرض برای SP همان مقدار برای DP است. تفاوت اصلی این دو مقیاس در حفظ تنظیمات بکار رفته فونت‌ها در سیستم اندروید است. بعنوان مثال کاربرانی که در دستگاه خود فونت بزرگ‌تری را تنظیم نمایند در صورتیکه از مقیاس SP در برنامه نویسی اپلیکیشن استفاده شده باشد فونت‌های داخل برنامه نیز بزرگ‌تر نمایش داده خواهد شد.

 

– مقیاس تصاویر

مقیاس تصاویر در وضوع صفحه نمایش‌های مختلف را می‌توانید از جدول زیر استخراج نمایید.

مقیاس تصاویر

وضوح تصویرDPIنسبت پیکسلاندازه تصویر (پیکسل)
xxxhdpi6404.0400x400
xxhdpi4803.0300x300
xhdpi3202.0200x200
hdpi2401.5150x150
mdpi1601.0100x100

 

– مقایسه واحدها

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

تراکمشرحواحد در هر اینچ فیزیکیوابستگی به تراکماندازه مشابه در هر نوع صفحه نمایش
pxپیکسلمتفاوتخیرخیر
inاینچ1بلهبله
mmمیلیمتر24.5بلهبله
ptنقطه72بله بله
dpتراکم مستقل از پیکسلحدود 160بلهخیر
spمقیاس مستقل از پیکسلحدود 160بلهخیر

 

در مطالب بعدی به موضوعات دیگری از طراحی متریال خواهیم پرداخت.

منابع: google

3 نظر طراحی متریال: واحدها و اندازه‌گیری

  1. بازخورد: طراحی متریال: فاصله‌ها و خطوط مرزی - محسن حسینیان

  2. بازخورد: طراحی متریال: ساختار - محسن حسینیان

  3. فاطمه

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

    پاسخ

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *