为了在不同大小屏幕（穿戴、手持、PC）上获得统一的产品认知和使用体验，材料设计提出了系列的规则和设计策略。以480, 600, 840, 960, 1280, 1440, 和1600dp作为断点。根据屏幕的尺寸可以确定属于那个断点，以确定网格系统所需要的列数（4、8、12）和列间距的宽度（16、24）。
以600dp为分界点，宽度在600以下的屏幕同时只展示某一个层级的信息（列表或详情）；宽度在600以上的屏幕可以同时展示多个层级的信息，列表页和详情页同时展示。
不同断点间屏幕上的界面相互切换适应的策略有：展现、转变、分割、重排、扩展和移位。
1、展现，小屏幕上隐藏的UI信息在屏幕增大时可以展现出来，如下图所示本来隐藏在手机侧边导航中的菜单项在平板的左侧直接显示出来了。这一点也和以600为分界的策略相呼应，在更大的屏幕上直接显示出两级信息：
展现更多
2、转变，界面元素从一个组件变为另一个组件，这一点也说明组件的使用并不是一成不变的，可以根据屏幕的大小选择合适的组件。如下图所示，侧边导航的菜单项可能在大屏上显示为标签；小屏幕上的文字列表项可以在大屏上显示为图片网格列表：
组件转换
3、分割，分层的信息在一个大的空间里铺开：
层级分割
4、重排，界面元素可以重新排布以填满新的空间：
重新排布
5、拓展，界面元素在大屏幕上展开为更大的尺寸：
拓展元素
6、移位，界面元素调整到更合适的位置：
移动位置
网格系统可以使界面视觉设计更为规整，灵活使用以上六种适配策略可以使产品在平台上不同设备间呈现合适的样式。有助于用户在不同设备间无缝切换，配合使用。使产品在不同的生活场景下都能发挥出最大的性能。
网友评论