material design ui 最佳实践方案-shounwang

Material Design UI 最佳实践方案

Shoun WANG

2015-2-25

目录

1、简介和资源

2、规格Android 主流屏幕尺寸

布局高度（high layout）

布局宽度（width layout）

字体和文本（Typography）

字体名称（font-family）

字号（font-size）

字重（font-weight）

颜色（color）

行高（Line height, leading）

行宽（Characters per line lengths）

图标（icons）

内容列表（Contents Lists）

卡片（Contents Cards）

图片网格（Photo Gallery Grids）

对话框（Dialogs）

菜单（Menus）

按钮（Buttons）

页签（Tabs）

3、最佳实践样本

Material Design 简介

• Material Design 是Google 在2014年I/O 大会正式发

布的前端设计风格语言；

• 设计灵感来自纸张（结构）和水墨（动效）；

• 跨平台可用于桌面、平板和手机，目前主要用于棒棒糖 android L （5.0）平台和应用；

• 不仅Google 全系应用开始换装Material Design 风格，也开始成为android 平台上的设计潮流。包

括Evernote 等。

Material Design 资源

• Material Design 官网： http://www.google.com/design/spec

中文翻译：http://design.1sters.com

• android 官方开发者平台（Material Design开发文档和SDK）：

https://developer.android.com/design/material/

翻译：http://blog.csdn.net/a396901990/article/details/40107881

• 第三方 Material Design 前端框架和UI 组件代码：

https://fezvrasta.github.io/bootstrap-material-design/

https://github.com/callemall/material-ui

http://dogfalo.github.io/materialize/getting-started.html

https://github.com/a396901990/AndroidDemo

设计规格:主流屏幕尺寸

模式分辨率(px)屏幕密度(dp,dpi）

市场占比(%)

代表机型

1 Xxhdpi1080 × 1920px(5.1’)

480 dpi 9.36 三星GS4、GS5、Nexus5

2 Xhdpi720 × 1280px（4.8’）

320dpi(HD)

26.54GalaxyNexus、三星GS3、小米2

640 × 960px M9、iPhone

3Hdpi

480 × 800px(3:5,WVGA ,3.7’)

240 dpi

21.17HTC Desire、Nexus ONE

480 × 854px(FWVGA)

13.80NOTO里程碑2小米1

480 × 848px

4Mdpi 320 × 480px

(2:3, QVGA)160 dpi 5.1 G1

（友盟数据2014.12）

设计规格: Photoshop 画布最佳实践

• Photoshop 画布尺寸大小最佳实践：

720*1280px, 72dpi

• 页面布局以48dp 为基数，以8dp为单位增减；

• 页面元素间距为8dp；

• 使用偶数单位的尺寸；

• 在xhdpi 模式（720×1280px, 320ppi分辨率）下，1dp=2px；

• 在xhdpi 模式（720×1280px, 320ppi分辨率）下， 1sp=2pt。

布局高度（high y-layout）最佳实践

Material Design高度 Android Design 原高度

1状态栏Status bar 48px(24dp） 48px (24dp）

2应用栏 App bar 112px(56dp=48+8) 96px (48dp)

3标题栏Title bar 144px(72pd)

4标签栏 Tab bar 96px(48dp) 96px (48dp)

内容区 content canvas 1024px

4内容副标题 subhead 96px(48dp)

3内容条 Content items 144px(72dp)

4底部栏 bottom bar 96px(48dp)

4底部导航栏 Nav bar 96px(48dp)

布局宽度（width x-layout）最佳实践

• 内容区域两侧外边距均为16dp（32px）；

• 带有图标或者头像的内容有72dp的左边距；

Material Design 宽度

菜单 menus 112dp (56*2)

对话框 Dialogs 280dp (56*5)

卡片 Cards 344dp (360-8*2)

布局厚度（Elevation z-layout）最佳实践

字体（fonts）最佳实践

Material Design

字号font-size 字重 font-weight 颜色Color

状态栏Status bar 28pt (14sp) Regular(400) 700（饱和度）

应用栏 App bar 40pt (20sp) Medium(400) 500（基础饱和度）

标签栏 Tab bar 28pt (14sp) Medium(400) 500，A400

标题栏Title bar 32pt (16sp) Regular(400) 500

内容大标题 headline 48pt (24sp) Regular(400) B87%（透明度）

内容标题 Title 40pt (20sp) Medium(500) B87%

内容副标题 subhead 32pt (16sp) Regular(400) B87%

正文文字 body 28pt (14sp) Regular(400) B87%

说明文字 caption 24pt (12sp) Regular(400) B54%

按钮 button 28pt (14sp) Medium(500/600) B87%

文本（Typography）最佳实践

行高：

段落文本行距为20sp(20dp)；

标题和副标题（subhead）之间行距为40sp(40dp)；

标题和正文文本（body）之间行距为32sp(32dp).

行宽：

正文每行所包含的字符长度最长为60个罗马字符，

或者30个汉字。

颜色（color）最佳实践

标准色版：

color_swatches.zip （下载）

颜色：

• #000，black87%，black54%，black26%

• #fff， white100%，white70%，white30%e.g. :

{ background:#fff; filter:alpha(opacity=87);color:#000;}

https://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNT0dFWFBjdTNKaXM/color_swatches.zip

图标（icons）最佳实践

• 应用启动图标：48×48dp（40×40dp）；

• 应用操作栏图标：32×32dp（24×24dp）；

• 状态栏图标：24×24dp（22×22dp）；

• 应用小图标：16×16dp（12×12dp）；

• 浮动操作（FAB）图标：56×56dp。

• 在xhdpi 模式（720×1280, 320ppi分辨率）下，图

标使用资源库的“drawable-xhdpi”目录。

• 图标使用svg 格式实现icon 动画。

（material-design-icons-1.0.1.zip 下载）

https://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNUzJ4c1VXWDYzbTA/material-design-icons-1.0.1.zip

内容列表（Contents Lists）最佳实践

• 列表栏高度：

1行文字48dp（带头像或图标56dp），

2行文字72dp，

3行文字88dp;

• 内边距：16dp;

• 内容标题文本（可选）：16sp;

• 内容副标题文本：14sp, 1~2行文字;

• 大图标：32*32dp（实际图片24×24dp）

卡片（Contents Cards）最佳实践

• 卡片宽度：344dp (360dp-8dp*2)

• 卡片外边距（margin）：8dp

• 卡片内边距（padding）：16dp

• 卡片标题(Headlines)字体：24sp

• 卡片正文(body)字体：14sp

• 卡片按钮：扁平按钮（Flat btn.）,48*88dp

• 卡片按钮图标：18*18dp

图片网格（Photo Gallery Grids）最佳实践

• 图片宽度：178dp（两列）; 118dp（三列）

• 图片比例：1:1

• 图片间距：2dp（即内边距1dp）

• 图片标题栏（header/footer bar）：覆盖图片式：高度48dp，透明度26%；

• 图片标题栏文字内边距：16dp；

• 字体大小：16sp（1行文字）；

• 头像（Avatar）小图标：大小16×16dp，居右对齐（16dp）

对话框（Dialogs）最佳实践

• 窗体最小宽度：280pd（560px）（56pd*5）

• 对话标题（dialogs title）：可选，font:14sp,b87；margin:24,24,8,24sp;

• 对话内容（dialogs content）：font:14sp,b54；margin:8,24,24,24sp.

• 对话框按钮（dialogs btn.）：font:M ,14sp;

• 按钮大小：48*88dp（96*176px），padding:6dp，0；margin:8dp,8dp,8dp,4dp。

（该方案按钮里最多可放4个汉字）

菜单（Menus）最佳实践

• 窗体最小宽度：112dp；

• 窗体内边距：padding:8dp,16dp;

• 窗体高度：48dp*n + 8dp*2;(n>2);

• 文字：R,14sp(28pt), b87.

按钮（Button）最佳实践

• 悬浮主按钮（FAB）：56×56dp（内24×24dp）；

• 凸起按钮（Raised button）

• 平面按钮（Flat button）

• 按钮最小宽度: 88 dp，高度: 48dp（内36 dp）

• 按钮文字：14sp, 字间距10 sp;

• 按钮颜色：默认状态（Normal）：饱和度500悬停状态（hover）：饱和度600点击状态（active）：饱和度700不可用状态（Disabled）：文字b26，按钮颜色b12

页签（Tabs）最佳实践

• 页签高度：48dp，文字下边距高度：

20dp；

• 指示器（Tabs Indicator）：高度4dp；

• 页签文字（激活）：M,14sp,A100；

• 页签文字（非激活）：M,14sp,#fff,α60%

首度摄影™最佳实践样本（sodo™ Sample）

凫(fú)绿色：Teal 300 #4db6acTeal 500 #009688Teal 700 #00796b


• /* Palette generated by Material Palette -materialpalette.com/teal/teal */

• .dark-primary-color { background: #00796B; }

• .default-primary-color { background: #009688; }

• .light-primary-color { background: #B2DFDB; }

• .text-primary-color { color: #FFFFFF; }

• .accent-color { background: #009688; }

• .primary-text-color { color: #212121; }

• .secondary-text-color { color: #727272; }

• .divider-color { border-color: #B6B6B6; }


KITs Gallery


Topic Profiles