【UXRen原创】Metrics & keylines——Material Design专题分享(15)

ixd-md-feifan-d6-00

非凡回来了,今天继续讲Metrics & keylines.

  1. Keylines and spacing
  2. Ratio keylines
  3. Incremental keylines
  4. Touch target size

 

今日内容

接着上节讲到的 Keylines and spacing

上节已经讲了移动端的基线和间距,今天从平板开始讲。会讲到桌面的。

 

List with detail view

先来看列表的表现。先来看这张图:

md-14-01

然后是它的横向间距和基线的划分:

md-14-02

  1. 边距仍然是8dp(红色块)
  2. 边距与左侧菜单图标以及小图标的间距24dp(蓝色块)
  3. 边距与头像和标题的间距80dp.

右侧也一样,总结起来就是,模块边缘8dp,与最靠近边缘的内容之间有24dp,与标题和正式内容之间80dp。

再来看纵向的划分:

md-14-03

  1. Statusbar and space above list: 24dp 状态栏24dp
  2. Listitem: 64dp 列表项64dp
  3. Spacebetween content areas: 8dp 内容模块之间的间距8dp
  4. Listitem: 72dp 列表项72dp

需要看图去领悟,再看一组:

md-14-04

横向的划分:

md-14-05

  1. Screenedge left and right margins: 24dp 屏幕边缘与右间距24dp
  2. Contentleft margin from screen edge: 80dp 左边缘与内容之间的距离80dp

纵向的划分:

md-14-06

  1. Statusbar: 24dp 状态栏24dp
  2. Toolbarand list item: 64dp 工具栏和列表项64dp
  3. Spacebetween content areas: 8dp 内容模块之间的距离8dp
  4. Subtitle,list item, and slider: 48dp 副标题条目48dp
  5. Title:80dp 标题80dp

这里容易发现移动端和平板相差不大,另外间距都是以4dp为基数的,因为之前建立基线网格的时候就定义了4dp为最小基线网格,我们的空间都要落在这些网格中。另外就是边缘间距都是8dp这个其实很好记。相对的栏目宽度变成了64dp 移动端是56dp,多了8dp。

再来看桌面的

Desktop

这里没有太多的东西可以讲,都是一些死的东西,用的时候遵循这个标准就可以了。

md-14-07

这里给一个下载链接直接参考就可以了

链接:http://pan.baidu.com/s/1ntoUG2X  密码:e1tn

来看比率线,在使用高度划分的时候,尽量采用这里提供的几种高度比率

 

Ratio keylines

什么是高度比率呢,就是宽高比

一共有以下这几种比率

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3

这些比率适用于移动端 平板和桌面的UI元素和图像。

md-14-08 md-14-09 md-14-10 md-14-11

这里如何使用这些比率呢?

在无法确定宽高比的时候参考这个就可以了。这都是测试过合适的比率,就不会出现比重失衡了。为了避免有些人不知道宽高指的是哪一个,我特意标明了一下。如下图:

md-14-12

 

接着来看增量基线

Incremental keylines

通过一个增量去定义一个值,再用这个值去定义其他元素的大小。这种方法几乎不会用在桌面应用中,常用的是平板,移动端很少使用。增量的大小对应不同屏幕有所不同。但这里请满足4的倍数。

看图:

md-14-15 md-14-16 md-14-13 md-14-14

 

其实很简单,就是定义一个单位大小,用这个单位去衡量其他单位,为什么这样呢?我想是因为基数问题,当所有元素都是这个基数的倍数的时候,是不是看起来顺眼多了?更加有规律了,让我们更容易去定义宽高了。

 

最后是触摸元素范围

Touch target size

去报可点击范围是48*48dp,上下浮动空间是8dp.

记住当24dp大小或者40dp大小的元素出现在界面中,不要出现触摸范围的重叠。48dp大概是9mm的物理宽度。这是最小的舒适触摸区域。

触摸浮动范围在1mm,就是7-10mm.这是最合适手指触摸的大小。

最小触摸范围不应该小于7mm。

md-14-17 md-14-18

这里记住在排版右上角小图标的时候,间距把握好了。

一是元素大小,二是触摸范围,这两个算进间距中去,不要重叠。

md-14-20 md-14-19

按钮高度是36dp,可触摸范围高度是48dp,这里在讲空间的时候会详细讲,今天就到这了。这一节 Metrics &keylines也讲完了,好好去应用吧。希望大家一直支持我,后续会讲信息构架的东西。

feifan-logo
作者:邬非凡,现互联网交互设计师,崇尚自然设计并将生活情感与设计相结合,目前死磕Material Design 分享和学习。非凡语录“享受生命的过程”

======================================================================================= 不知不觉本网站已经一岁半了, 在这里小编要感谢那么一如既往支持本站的油茶人。 同时也欢迎各位喜欢13太保的同学们把自己收集的好资源一起分享给更多油茶人,如果有意愿在网站发布原创性的文章也欢迎随时和我们联系!我们收到邮件后会认真的查看和回复。 投稿邮箱:contact@13tech.com.cn

=======================================================================================

 

发表评论

您的电子邮箱地址不会被公开。