طراحی متریال: فاصله‌ها و خطوط مرزی

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

– گریدهای پایه (Baseline Grids)

در ابتدا باید بدانید که گوگل همه اجزاء و المان‌ها را بر روی یک برگه با گریدی دارای مربع‌هایی به اندازه ۸dp x 8dp بنا نهاده است. یعنی هر یک از مربع‌هایی که در تصویر زیر ملاحظه می‌کنید طول و عرض ۸dp را دارا هستند. (در برنامه‌های طراحی نظیر فتوشاپ همان ۸point است) این گرید در تمام اجرا به کار می‌رود. این گرید ممکن است ثابت نباشد و طراح به نوع دیگری تعریف شود ولی چون گوگل بر یکپارچگی بین طرح‌ها تاکید دارد بهتر است ما نیز این دستورالعمل را اجرا کنیم.

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

در تصاویر بالا دکمه شناور اکشن (floating action) به اندازه ۵۶dp از کف طرح فاصله دارد. کل طرح از سمت راست و چپ دارای حاشیه ۱۶dp بوده و آیکون مرتبط با محتوا به فاصله ۷۲dp از سمت چپ قرار گرفته است. در تصویر سوم نوار وضعیت (status bar) (شماره ۱) دارای ارتفاع ۲۴dp، نوار ابزار (toolbar) (شماره ۲) ارتفاع ۵۶dp، عنوان فرعی (subtitle) (شماره ۳) ارتفاع ۴۸dp و هر یک از موارد لیست (list item) (شماره ۴) دارای ارتفاع ۷۲dp می‌باشد.

گوگل دو لی‌اوت دیگر یعنی تبلت و دسکتاپ را نیز فاصله‌گذاری کرده است که تعاریفی مشابه لی‌اوت موبایل دارند. فکر می‌کنم با توضیحات بالا به راحتی می‌توان بقیه دستورالعمل‌ها و پیشنهادات گوگل را ملاحظه و درک کرد. برخی از تعاریف را در لینک Metrics & Keylines مشاهده کنید. هر سه قالب لی‌اوت را می‌توانید از لینک زیر دریافت کنید. برای راحتی بیشتر در درک فاصله‌ها و خطوط مرزی پس از باز کردن فایل در Adobe Illustrator با زدن همزمان کلیدهای ctrl و ” خطوط گرید برای شما نمایش داده می‌شود. هر یک از خانه‌ها در این قالب برابر ۴dp می‌باشد و با شمارش آنها می‌توانید فاصله‌ها را به دست آوردید.

111

دانلود قالب لی‌اوت‌‌های متریال دیزاین


– اندازه مورد نظر در اکشن لمس (Touch target size)

برای اطمینان از عملکرد صحیح برنامه و اکشن‌های لمسی مانند دکمه‌ها، متریال اندازه ۴۸dp x 48dp را پیشنهاد داده است. در اغلب موارد توصیه شده فضای خالی برای عملکرد لمسی ۸dp باشد. در نظر داشته باشید که اگر آیکون شما (۲۴dp) یا آواتار شما (۴۰dp) باشد مشکلی در عملکرد لمسی نخواهید داشت. این اندازه‌ها با توجه به عملکرد اکشن در دستگاه‌ها و اندازه‌های مختلف به دست آمده و میانگین ۷-۱۰ میلیمتر فضای خالی تضمین کننده‌ی صحت کار است و کاربران را با مشکل لمس مواجه نخواهد کرد. اگر این اندازه را رعایت کنید تناسب خوبی بین تراکم اطلاعاتی و دسترسی پذیری به عناصر رابط کاربری ایجاد خواهد شد.


– نسبت ها (Ratio keylines)

نسبت ابعاد خاص (Specific aspect ratios) یا نسبت عرض یک عنصر به ارتفاع آن، در هر دوی اجراء رابط کاربری و اندازه صفحه نمایش موبایل، یکی از مباحث مهم است که نیاز به درک صحیح آن داریم. از نسبت‌ها در بخش‌های بعدی و تعاریف ساختار اپلیکیشن استفاده خواهد شد. این نسبت‌ها توسط متریال دیزاین به صورت زیر تعریف می‌شوند: (قابل استفاده در موبایل، تبلت و دسکتاپ)

  • ۱۶:۹
  • ۳:۲
  • ۴:۳
  • ۱:۱
  • ۳:۴
  • ۲:۳

برای مثال:

  • در نسبت ۱:۱ هردوی عرض و ارتفاع یک عنصر با هم برابر است.
  • در نسبت ۲:۳ یک تصویر با عرض ۳۶۰dp بصورت تمام صفحه باید ارتفاعی برابر با ۵۴۰dp داشته باشد.

برای به دست آوردن این مقادیر می‌توانیم از فرمول‌های زیر استفاده کنیم:

  • عرض = نسبت x (ضربدر) ارتفاع
  • ارتفاع = عرض / (تقسیم بر) نسبت

(در هر دو فرمول نسبت ابعاد بعنوان یک کسر عنوان می‌شود. برای مثال ۳:۲ می‌شود ۳/۲ و ۱۶:۹ می‌شود ۱۶/۹)


– خطوط مرزی افزایشی (Incremental keyline)

خط مرزی افزایشی در واقع یک تعریف برای استفاده در طول و عرض عناصر و موقعیت آنها از همدیگر است. این واحدهای افزایشی عمدتا در دسکتاپ، برخی مواقع در تبلت و به ندرت در موبایل اعمال می‌شوند. این واحد توسط طراح تعریف می‌شود و طول و عرض مشخصی ندارد اما بصورت دقیق و متناسب در طرح مورد استفاده قرار میگیرد. فرض کنید طراح تعریف می‌کند که ارتفاع یک عکس سرصفحه باید ۳x و عرض آن ۸x باشد. یا در افکت حرکتی (motion) نوار ابزار این مقدار باید ۲x باشد. پنل سمت راست به اندازه ۵x بسط داده شود و …

در بخش بعدی از مقالات طراحی متریال به مبحث ساختار (Structure) خواهیم پرداخت.

2 نظر طراحی متریال: فاصله‌ها و خطوط مرزی

پاسخ دهید

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