شبکه (grid) در طراحی متریال

شبکه (grid) در طراحی متریال

تاریخ انتشار: 10 بهمن 1394

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

شبکه (grid) :

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

حاشیه ها و فواصل بین ستون ها :

شبکه responsive، به جای پهنای ستون ها بر روی پهنای حاشیه و فاصله بین ستونی ثابت تمرکز میکند. حاشیه ها و ستون ها در متریال دیزاین یک شبکه مرجع مربع شکل به پهنای 8dp را دنبال میکنند. حاشیه ها و فواصل بین ستونی میتوانند با پهنای 8، 16، 24 یا 60dp باشند.
حاشیه ها و فواصل بین ستونی حتماً نباید برابر باشند. برای مثال، استفاده از حاشیه با پهنای 40dp و فواصل بین ستونی با پهنای 24dp در یک ساختار، قابل قبول میباشد.

شبکه های تمام پهنا در مقابل مرکزی (centered) :

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

تأثیر پنل بر شبکه :

منوی راهبری جانبی میتواند ثابت و دائمی یا موقتی باشد. این حالات نه تنها بر روی راهبری جانبی بلکه روی هر پنلی اعمال میشوند.

پنل ثابت :

پنل ثابت در خارج از شبکه responsive قرار دارد. پنل در یک نقطه انفصال تعریف شده نمایان میشود(زمانی که صفحه بتواند پنل را در خود جای دهد) و محتوا را فشرده میکند. هیچ کنترلی برای نمایش دادن یا مخفی کردن پنل وجود ندارد.

پنل موقت :

پنل موقت (overlay) زمانی که در حال نمایش ( off-screen ) است، شبکه یا محتوا را تحت تأثیر قرار نمیدهد. زمانی که نمایان میشود میتواند از طریق لمس کردن هر جایی در بیرون پنل یا یک آیتم در داخل پنل، دوباره مخفی شود.

ادامه مطلب -> رفتارهای سطحی (surface behaviors)

اشتراک گذاری:
021-41658