layout
Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.
一、Principles
二、Responsive layout grid
三、Density
Material Design uses low-density space by default (with large tap targets and margins) but offers high-density space when it improves the user experience.
Navigation
一、navigation
导航的类型:系统导航,软件内部导航,前置导航,以及反向导航(翻译的很差,以后多读,看翻译)
Considerations
The design and functionality of your app should account for both kinds of reverse navigation in your app’s target platforms. To optimize a user’s experience when navigating in reverse:
Return users to their prior screen position and state, such as their vertical scroll position, to speed up information recall and task resumption.
Provide clear messaging if a screen’s prior state is no longer available, such as when information from a form has been cleared for privacy.
Clearly indicate child screens’ relationship with screens above them in the hierarchy. For example, if a user moves directly to a child screen in your app, they should be able to identify the parent screen to which they can navigate upward.
二、Navigation transitions
Navigational transitions occur when users move between screens, such as from a home screen to a detail screen.
导航的转换
Hierarchical transitions 级别转换
点击卡片,进入二级页面
Peer transitions 同级转换
譬如 tab
Top-level transitions 底部导航转换
Search
Search allows users to quickly find app content.
一、Usage
1.点击搜索框,搜索框放大至全屏
2.可以输入文字或者选择系统提供的快捷搜索链接,比如搜索历史记录,热门搜索
3.搜索结果列在搜索框下面,搜索词有联想搜索功能
4.要从搜索框中释放焦点并关闭搜索建议,用户可以点按向上箭头
二、Expandable search
When displaying results, the search text field remains visible, but not in focus. Tapping the Up arrow releases the focus from search, dismisses suggestions and the on-screen keyboard, and returns the toolbar to its original state.
简易搜索
Color
一、Color usage and palettes
The Material Design color system uses an organized approach to applying color to your UI. In this system, a primary and a secondary color are typically selected to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.
颜色有:主色,辅色,颜色是为了表现品牌形象,表现特色的、独一无二的风格。
不同的颜色特性代表不同的模块。
品牌可以以微妙的方式使用颜色,无论这意味着传达复杂性,强调内容,还是以其他方式适合内容。 使用带有微妙色彩的颜色时,请确保交互区域和状态更改仍然可识别且易于查看。
表格,占位图,进度条,选中效果都可以用微妙的颜色来表现
Text backgrounds
Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make sure the text is available in a contrasting color against each theme.
Colored backgrounds or typography additionally change the rules regarding text opacity and different states of text.
保证文本的易读性,保证不同颜色背景下文本清晰性