UI设计

Material Design设计指南整理(二)

作者:口袋使者 2016-10-26 我要评论

接着上一篇,在(一)中讲了material design的三个基本构成,即材质、设计和动画,材质已经介绍了,下面讲讲设计方面的。 材质化设计以印刷设计为指导,参照了其...

接着上一篇,在(一)中讲了material design的三个基本构成,即材质、设计和动画,材质已经介绍了,下面讲讲设计方面的。

材质化设计以印刷设计为指导,参照了其中的文字排版、网格、间距、尺寸、颜色和布局等概念,创造出层级、意义、以及焦点,以此提升用户体验。
在材质化设计中,纸张的物理特性被转化到屏幕上,应用的背景就像是一张纸片,应用的行为也与纸片行为很相似,能够改变大小,随意移动,多个纸片可以连接在一起,也可以叠着。这一部分可以参考(一)中讲到的材质的属性。

1、单位:像素密度、密度独立像素、可扩展像素

像素密度是指每英寸的范围内有多少像素,像素越多,密度越大。对于一个像素固定的控件,比如一个30像素的按钮,在高像素密度的屏幕上显示出来比在低密度的屏幕上显示出来要小。这样一来,同样像素大小的控件在不同屏幕上的显示是不一样的,这会给设计带来很大麻烦,因此就有了密度独立像素。


高像素密度

低像素密度


密度独立像素,即dp,简单地讲,1dp的元素,不管在哪个屏幕上,看起来大小都是一样的,不会受屏幕的特性的影响,所以称为独立像素。
公式如下:dp = (width in pixels * 160) / screen density
其中规定,1dp是1个像素在一个像素密度为160的屏幕的大小。
在安卓应用的设计中直接用dp就好,但是在CSS中不支持dp,所以要使用上面的公式将dp转化为px。
与之相对应的是可拓展像素,即sp。跟dp是一个道理,只是sp用于文字,dp用于图像。

2、基线网格

这里采用的是大小为8dp的基线网格,所有的设计元素都要和这个网格对其。文字和工具栏上的图标的基线网格是4dp。关于基线网格布局,谷歌提供了很多排版的例子供参考,大家有兴趣可以去看看。
https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing


基线网格

文字基线网格
3、比例线

比例指元素宽高比,一般有16:9、3:2、4:3、1:1、3:4、2:3这几个尺寸,可以通过这些比例对页面进行排版布局。例子如下:

4、增量尺寸

指定一个元素的尺寸为标准,一个增量就是这个标准值的一倍。
比如以工具栏的高度为标准,工具栏是56dp高,那么一个增量就是56dp,八个就是448dp。其他元素的使用增量作为基本单位,这样其他元素都和工具栏的高度相关,每次修改时只要改工具栏的,其他会相应改变。


增量尺寸

那增量应该多少才合适,这里就涉及到一个最小尺寸的问题。为了平衡信息的密度以及可用性,触摸目标的大小至少应该为48*48dp。从物理尺寸来讲,应该在7-10mm之间。

5、页面布局

页面布局的基本元素包括工具栏,应用栏,导航栏,系统栏等,下面是几个布局的例子:

具体的各个控件怎么选择,相对位置应该怎么设置比较合适,在后面对控件的详细介绍中会涉及。这里只是提一些大概的思路。

  • 先定义一个主要的分隔方向,是左右排列还是上下排列。
  • 在前面的主要分隔方向的基础上,不要嵌套太多层,如果需要多个区域安排内容,可以多使用空格。
  • 可以用卡片或者浮动按钮来打破分隔线(卡片和浮动按钮之后会有介绍)。
  • 可以使用卡片来包含多种样式的内容。
  • 工具栏形式多种多样,可以直接在应用栏上显示,可以以一列的形式显示,可以用于卡片上,可以浮动,可以用一个独立的工具画板,底部的工具栏可以随着键盘或者其他元素的出现而升起,或者因为自身的展开而升起。

浮动工具栏

卡片工具栏

工具画板

底部展开工具栏
  • 应用栏
    应用栏有左中右三部分。
    位于左边的导航图标可以是以下这几种形式:
    1)可以打开导航抽屉的控制器 2)可以返回到上一级的箭头 3)如果此处不需要导航,则会隐藏。
    中间的标题可以表示目前的位置、可以是这个应用的名字、可以是这个页面的名字、也可以是一个页面筛选器。
    右边的图标一般是与应用相关的操作,菜单图标可以打开一个溢出菜单,里面可以包含二级操作以及其他菜单项,如帮助、设置、反馈等。菜单应该盖住应用栏,而不是作为应用栏的扩展表现出来。
    应用栏的中元素应该具有相同的颜色,不过如果需要,可以对标题进行强调,使用与背景差别比较明显的颜色。

应用栏
  • 侧边导航栏
    侧边导航栏可以永久地固定在侧边,也可以只在需要的时候弹出,使用完毕再收回去,主要取决于屏幕的空间。
    侧边导航栏可以位于左边,也可以位于右边。但是一般左边是用于主导航,右边是用于该页面的次级导航。在之后的控件中会详细讲到。
    针对页面布局这部分,谷歌提供了一些空白的布局可以供我们直接使用。可以在下面这个网址中下载ai或者sketch文件。
    https://material.google.com/resources/layout-templates.html#layout-templates-desktop
6、响应式UI

响应式UI指的是界面元素和布局能够随着设备和屏幕的变化而变化,能够更好地在不同设备之间构造一致的用户体验。
响应式设计的基础是网格和断点。网格将页面分为多个列和多个分隔线。如下图所示,界面中的元素要和网格对齐,跟前面提到的基线网格设计是一样的。


这里的不同之处在于网格是会动态变化的,包括列的数目,分隔线的宽度。断点就是决定这些的机制。不同的屏幕尺寸,列的数目是不同的,比如在480dp以内是4列,480dp到840dp是8列。分隔线也是一样,谷歌的文档中也做出了规定,在不同的屏幕下分隔线的宽度不同。


断点


由于只规定了列数和分隔宽度,所以列的宽度是会在一定范围内变化的,这时相关的界面元素就会跟着变化。一旦变化到了断点处,就会进行重新布局。重新布局要涉及到原先界面的宽度,元素的行为,可以针对不同软件的特点进行设计。
谷歌官方给了一些参考的模式,具体见下图:


详细介绍请查阅官方文档
https://material.google.com/layout/responsive-ui.html#responsive-ui-patterns
 

Material Design设计指南整理系列文章:

《Material Design设计指南整理(六)

《Material Design设计指南整理(五)

《Material Design设计指南整理(四)

《Material Design设计指南整理(三)

《Material Design设计指南整理(二)

《Material Design设计指南整理(一)



阅读原文 本文来自:口袋知识网 news.papocket.com

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 淘宝刚发布的新版本,可能会引领2017年

    淘宝刚发布的新版本,可能会引领2017年

  • 学会这个教程,可以把任何一张人物照都

    学会这个教程,可以把任何一张人物照都