上一篇文章中,给大家介绍了谷歌设计语言Material Design的由来,以及环境与空间、光源与阴影、动画效果、颜色等四个小节的内容,这篇文章,接着为大家介绍样式、布局、两个方面的内容。
样式
在上一篇中,我们介绍了material design的颜色部分,颜色也是样式中的一部分,接下来我们将陆续介绍剩下的样式:字体排版、图标、图像、书写。
字体
关于字体排版,我们只要简单记住两点:英文字体一般采用Roboto,中文字体使用Noto最基本的样式集合是基于12、14、16、20和34号的字体排版缩放。
图标
产品图标作为一个品牌下产品、服务、工具的一种视觉表现,能够简洁、显眼且友好地传递产品的核心理念与内涵。
桌面图标尺寸:48dp X 48dp;
桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。注意避免以下问题:
不要给色彩元素加投影;
层叠不超过两层;
折角不放在右上角;
带投影的元素要完整呈现,不能被图标边缘裁剪;
如果有折痕,放在图片中央,并且最多只有一条;
带折叠效果的图标,表面不要有图案;
不能透视,弯曲。
应用程序小图标尺寸:24dp X 24dp,图形限制在20dp X 20dp区域内。
图像
在material design中图像应该是组建而成,而并非人为策划,遵循以下几个原则:
选择能够表达个人关联、信息和令人喜悦的图像;
传达特定的信息,以辅助理解的方式来创建只能的感官体验;
有焦点
个人关联
特定信息
焦点明确
书写
记住几个重要的原则:
。使用“你”对用户说话;
。不要使用“我们”;
。语言尽量简洁;
。用现在时书写;
。目标引导而不是方法引导;
布局
在布局这一章中,同学们除了熟记集中常规的布局方式,更重要的是要掌握一些常见的尺寸和距离。让app在不同平台和屏幕尺寸上拥有一致的外观和感觉,结构和视觉上的一致创造了一个可识别的跨平台产品的用户环境,它给用户提供高度的熟悉感和舒适感,让产品便于使用。
最小的触摸尺寸是48dp,在布局中,为图标(24dp)或者头像(40dp)设置边距时,要时刻记得。触摸目标不能重叠。
Overview
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp
The app bar with significantly increased height for prominence
App bar height = 128dp
Action area height: 56dp
Title area height: 80dp
Title area bottom padding: 8dp
Description area height: 72dp
Description area bottom padding: 16dp
List
A two-column, left-aligned list with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Subtitle: 48dp
List item: 72dp
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Title and list items: 72dp
Subtitle: 48dp
Space between content areas: 8dp
Detail view
A detail card with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Space between content areas: 8dp
List item: 72dp
Navigation drawer
A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.
Vertical spacing
Account menu and list items: 48dp
Space between content areas: 8dp
Navigation right margin: 56dp
上述内容是笔者自己的总结,欢迎对material design感兴趣的同学评论留言表达自己的看法。