0文章
0评论
0获赞

Android设计规范Material Design-Components(7网格)

1,008 0

又学习了新的知识~~今天的网格内容基本都是基于Android中APP设计时的规范~~,满满的都是干货呀~~不收藏怎么得了~~小伙伴们high起来~

网格

网格

网格列表是一种标准列表视图的可选组件。网格列表与应用于布局和其他可视视图中的网格有着明显的区别。

用法

网格列表最适合用于同类数据(homogeneous data type),典型的如图片,并且对可视化理解(visual comprehension )和相似数据类型的区别进行了优化。

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

网格列表是一个连续元素(continuous element),该元素由棋盘式、规律性的小格子构成,通常称这些格子为单元格(cells),单元格中包含有瓦片(tiles)。

单元格在网格中以垂直和水平的方式排列。

瓦片用以存放内,并且可以跨越一个或者多个垂直或者水平的单元格。

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

如果瓦片中的文本需要与其他主要内容有着足够显著的区别,可以考虑使用一个容器,比如列表(Lists)或者卡片(Cards)。这样可以优化文本显示、增强阅读理解的便利性。

Lists:增强阅读理解的便利性,尤其是在比较一组具有多种数据类型的数据时。

Cards:用于不同格式的内容,比如带有不同长度标题的图片;用于不同类内容的数据集合中,比如具有图片、视频和图书的混合式数据集。

内容

瓦片中的内容

瓦片内容包括主要内容(primary content)和次要内容(secondary content)。主要内容是有着重要区别的内容,典型的如图片。次要内容可以是一个动作按钮或者文本。

为瓦片内容提供一个默认图片。

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

瓦片中的动作

主要内容和次要内容中的动作–比如播放、放大、删除或者选择–是一种瞬时性动作,通常不会在网格列表中弹出选项子菜单(动作溢出列表,action voerflow)。

动作可以打开一个随后的视图,比如卡片或者悬浮卡片(hovercard)。

主要动作

  • 充满整个瓦片,因此不会通过图标或者文本呈现。
  • 在指定的网格中,所有瓦片的动作是一致的。比如,在单个网格中,对于所有瓦片的主要动作可以用于查看图片的详细信息。

次要动作或者内

  • 通过图标或者文本呈现出来。
  • 在指定的网格中,所有瓦片的动作是一致的。
  • 在指定网格的瓦片中放置的位置是一致的,但是位置可能会在不同的网格(边角或者边界, corners or edges)间有变化。比如,所有网格中的标题可以放置在左下角。
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

行为

滚动

网格典型的滚动只有垂直滚动。

水平滚动的网格是不鼓励使用的,这通常与用户的阅读习惯有关,影响阅读上的理解。

砍去网格瓦片来通知内容未结束。

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)


(图片用来)说明砍去网格瓦片提示内容未结束

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

不要

手势

不允许使用轻扫(swipe)手势。选中并移动(pick-up-and-move)动作不鼓励使用。

瓦片过滤与排序

网格列表中的内容可以编程实现其过滤和排序,比如通过数据类型、文件大小、字母顺序或者其他参数等。

网格中的第一个条目置于网格的左上角,并且其顺序为从左到右,自上而下。

维度与重置尺寸

重置网格列表的尺寸会导致瓦片在有水平空间可用时重新排序。但是瓦片并不会缩放以填充可用的水平空间。

当水平空间受限时,网格列表不会转换为列表。网格列表与列表在强调不同数据类型的不同结构:图片优于文本与文本优于图片的区别。

边框

网格列表表头/表尾(header/footers)

单行表头/表尾

高: 48dp

文本内边距: 16dp

默认字体大小: 16sp

次要动作与尾右对齐

行表头/表尾

高: 68dp

文本内边距: 16dp

每行的默认字体大小: 16sp/12sp或者14sp/14sp

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

仅有图片的网格列表

网格内边距: 4dp

网格列表中的瓦片可以跨多列。

仔细考虑网格列表中的次要文本是否需要使用多列瓦片,因为大的瓦片可能会造成很大的空间浪费。

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

元素

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

单行网格列表

仅有文本

高: 48dp

文本内边距: 16dp

默认字体大小: 16sp

网格内边距: 4dp

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

元素

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

带图标的文本

高: 48dp

文本内边距: 16dp

默认字体大小: 16sp

网格内边距: 4dp

网格列表表尾或者表头的中的次要文本可以右对齐或左对齐。

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

元素

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

两行网格列表

仅有文本

高: 68dp

文本内边距: 16dp

每行的默认字体大小: 16sp/12sp或14sp/14sp

格内边距: 4dp

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

元素

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

内容

带有图标的文本

高: 68dp

文本内边距: 16dp

每行的默认字体大小: 16sp/12sp或14sp/14sp

网格列表表尾或者表头中的次要文本可以右对齐或左对齐。

网格内边距是4dp

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

元素

Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)
Android设计规范Material Design-Components(7网格)

非常感谢这些辛苦翻译的小伙伴!!

原文:Grids翻译:CodeDiving校对:huanglizhuo

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范Material Design-Components(2按钮)

418 0

9月5日,快中秋节了~~好期待呀~~~主要是期待放假~~可是我们只放两天~~好吧,废话不说了~~今天主要更的是部件的按钮,按钮是很重要的,它是实现人机交互的重要部件,所以对于UI交互来说,按钮绝对是缺一不可的~~~尽管Material Design是一种新的希冀的设计语言,但是这些内容,对于现在的APP来讲,是可以借鉴和学习的~~

按钮

按钮(Buttons)

按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来。
主要的按钮有三种:

  • 悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。
  • 浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。
  • 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。

颜色饱满的图标应当是功能性的,尽量避免把他们作为纯粹装饰用的元素。

按钮的设计应当和应用的颜色主题保持一致。

用法

p0
悬浮响应按钮

p1
浮动按钮

p2
扁平按钮

主按钮

按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。

首先,审视一遍你的按钮功能: 它是不是非常重要而且应用广泛到需要用上悬浮响应按钮?

然后,基于放置按钮的容器以及屏幕上层次堆叠的数量来选择使用浮动按钮还是扁平按钮。而且应该避免过多的层叠。

最后,检查你的布局。 一个容器应该只使用一种类型的按钮。 只在比较特殊的情况下(比如需要强调一个浮起的效果)才应该混合使用多种类型的按钮。

p3

对话框中的按钮

对话框中使用扁平按钮作为主要按钮类型以避免过多的层次叠加。

p4

p5

按钮内边距

根据特定的布局来选择使用扁平按钮或者浮动按钮。对于扁平按钮,应该在内部四周留出足够的空间(内边距)以使按钮清晰可见。

p6

p7

底部固定按钮

如果需要一个对用户持续可见的功能按钮,应该首先考虑使用悬浮响应按钮。如果需要一个非主要、但是能快速定位到的按钮,则可以使用底部固定按钮。

p8

p9

p10

不可在底部固定按钮的区域内使用浮动按钮。

p11

底部固定按钮也可以用在内容可拉动的对话框中,前提是要加上divider。

p12

p13

按钮

悬浮响应按钮

悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在介面之上的、拥有一系列特殊动作的按钮,这些动作通常和变换、启动、以及它本身的转换锚点相关。

更多关于悬浮响应按钮的信息, 请参考模式:促进的动作(Promoted Actions)

p14

p15

悬浮响应按钮有两种尺寸: 默认尺寸和迷你尺寸。 迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性。

p16

p17

浮动按钮

动按钮使按钮在比较拥挤的介面上更清晰可见。能给大多数扁平的布局带来层次感

p18

p19

p20

正确使用浮动按钮。

p21
不要
按钮不明显。

扁平按钮

扁平按钮一般用于对话框或者工具栏, 可避免页面上过多无意义的层叠。

p22

p23

p24

正确使用扁平按钮。

p25
不要
层次感太重。

扁平和浮动按钮的状态

按钮状态模拟

浮动按钮看起来像一张放在页面上的纸片,点击后会浮起来并表现色彩

扁平按钮会一直保持和页面贴合的状态,点击后会填充颜色。

墨水效果会跟着焦点的改变从一个按钮转换到另一个按钮。聚焦状态的动画会表现出正常状态和点击状态间来回切换的过渡效果。

模拟按钮状态的时候, 可以使用图形轮换来表现动画。注意聚焦状态会一直处于动画的状态。 (下面这些图并没有显示出真实的聚焦状态。)

p26

非常感谢这些辛苦翻译的小伙伴!!

原文:Buttons翻译:7heaven校对:阿九(Siton)

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Style(3图标)

483 0
9月2日,今天还是继续连载~~昨天讲的是色彩和文字排版,今天就来看看图标,图标是一种视觉语言,所以相当的重要,小伙伴们,好好看看吧~~

看到昨天部分小伙伴的留言,说有些看不懂,我觉得可能有主观和客观原因,主观原因是我们自己可能刚开始接触,理解上还不能跟上,毕竟没有实践。客观原因,就文章本身来说,因为文章翻译还处于校对中,所以可能不是特别准确。所以请大家谅解~~~(ps:此节还剩一段未翻译,翻译完整,我一定会及时更新的,如果小伙伴们看到有更好的,也请留言,和我们一起分享。)

图标

图标

系统图标

定义

系统图标或者UI介面中的图标代表命令、文件、设备或者目录。系统图标也被用来表示一些常见功能,比如清空垃圾桶、打印或者保存。

系统图标的设计要简洁友好,有潮流感,有时候也可以设计的古怪幽默一点。要把很多含义精简到一个很简化的图标上表达出来,当然要保证在这么小的尺寸下,图标的意义仍然是清晰易懂。

Style-SystemIcon-icon_set_large_mdpi

设计原则

展示一些黑体的几何形状。

一个简洁的黑体图形在采用对称一致的设计时,一样能够拥有独一无二的品质。

Style-SystemIcons-design_principlesa_large_mdpiStyle-SystemIcons-design_principlesb_large_mdpiStyle-SystemIcons-design_principlesc_large_mdpiStyle-SystemIcons-design_principlesd_large_mdpi

网格、比例和大小

图标网格是所有图标的基准网格并且具有特定的组成和比例。图标由一些对齐图标网格的平面几何形状组成。基本的平面几何形状有四种,具有特定尺寸以保证所有图标有一致的视觉感和比例。
两种形状相同尺寸不同的图标集供您在应用程序中使用:状态栏、上下文图标集和操作栏、桌面图标集。

Style-SystemIcons-grid_proportion_sizesa_large_mdpiStyle-SystemIcons-grid_proportion_sizesb_large_mdpiStyle-SystemIcons-grid_proportion_sizesc_large_mdpiStyle-SystemIcons-grid_proportion_sizesd_large_mdpiStyle-SystemIcons-grid_proportion_sizese_large_mdpiStyle-SystemIcons-grid_proportion_sizesf_large_mdpi

圆角

正方形和矩形都应该添加圆角,也可以同时使用圆角和尖角,这样更具凸凹感。所有由笔划或线条组成的图标都有尖角。

Style-SystemIcons-round_cornersa_large_mdpiStyle-SystemIcons-round_cornersb_large_mdpistyle-systemicons-stroke-terminala_large_mdpistyle-systemicons-stroke-terminalb_large_mdpi

每一个尺寸的系统图标集使用不同大小的圆角以保证视觉的一致性。

style-systemicons-stroke-weighta_large_mdpistyle-systemicons-stroke-weightb_large_mdpi

一致性

一致性非常重要,尽可能使用系统中提供的图标,在不同的app中也一样。

style-systemicons-do_large_mdpistyle-systemicons-dont_large_mdpi

上下文和应用中的图标

图标网格决定了图标位于一个固定大小(24dps)的区域内。

Style-SystemIcons-icons_incontexta_large_mdpiStyle-SystemIcons-icons_incontextb_large_mdpi

非常感谢这些辛苦翻译的小伙伴!!未完待续~~

原文:Icons翻译:Haoxiqiang校对:cxytomo

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Layout(2 度量与边框)

473 0

上一篇讲了准则,这一篇就来讲讲度量与边框,我们做设计不仅要美观,而且还要有一定的规范,特别是对于各种移动设备、平板设备以及桌面应用等程序,那是相当需要严谨的~~这节是超级实用的~~赶快来收走~~

度量与边框

度量与边框

基准网络

所有组件都与间隔为8dp的基准网格对齐。排版/文字(Type)与间隔为4dp的基准网格对齐。在工具条中的图标同样与间隔为4dp的基准网格对齐。这些规则适用于移动设备、平板设备以及桌面应用程序。

layout-metrics-baselinegrids-01-8dp-baselinea_large_mdpi

layout-metrics-baselinegrids-01-8dp-baselineb_large_mdpi

layout-metrics-baselinegrids-01-8dp-baselinec_large_mdpi

layout-metrics-baselinegrids-02-8dp-baseline_large_mdpi
有关详细信息请参见组件一节。

layout-metrics-baselinegrids-baseline-03_large_mdpi

有关详细信息请参见字体排版一节。

边框与间

移动设备

移动设备布局模板包含了多种多样的屏幕和信息,这些信息描述了边框与间距如何应用于屏幕边界和元素。下面是一个有关屏幕的实例,这个实例可以通过如下的链接获得。

移动设备布局模板 – 2.4 MB(.ai)

layout-metrics-keylines-keylines-spacing-mobile-01ba_large_mdpi
内容

该屏幕演示图标、头像和一个2行文本的列表如何左对齐,以及一个56dp的浮动动作按钮和文本如何右对齐。

layout-metrics-keylines-keylines-spacing-mobile-01bb_large_mdpi
垂直边框和水平外边距

左右各有16dp的垂直边框。带有图标或者头像的内容有72dp的左边距。

在移动设备上有16dp的水平外边距。

layout-metrics-keylines-keylines-spacing-mobile-01bc_large_mdpi
垂直边距

  1. 24dp
  2. 56dp
  3. 48dp
  4. 72dp

layout-metrics-keylines-keylines-spacing-mobile-02ba_large_mdpi
内容

该屏幕演示图标、头像、2行文本列表、子标题和40dp的浮动动作按钮如何左对齐。小图标右对齐。

layout-metrics-keylines-keylines-spacing-mobile-02bb_large_mdpi
垂直边框和水平边距

图标(大小图标)有16dp的左右垂直边框。带有图标或者头像的内容有72dp的左边距。

在移动设备上有16dp的水平外边距。

layout-metrics-keylines-keylines-spacing-mobile-02bc_large_mdpi
垂直边距

  1. 24dp
  2. 56dp
  3. 72dp
  4. 48dp
  5. 8dp

layout-metrics-keylines-keylines-spacing-mobile-03ba_large_mdpi
内容

该屏幕演示图标如何左对齐,以及图标和一个56dp的浮动动作按钮如何右对齐。

layout-metrics-keylines-keylines-spacing-mobile-03bb_large_mdpi
垂直边框和水平边距

图标有16dp的左垂直边框。带有图标或头像的内容有72dp的左边距,32dp的右边距(考虑到56dp的圆形浮动动作按钮)。这样圆形浮动动作按钮下的图标也对齐了。

在移动设备上有16dp的水平外边距。

layout-metrics-keylines-keylines-spacing-mobile-03bc_large_mdpi
垂直边距

  1. 24dp
  2. 56dp
  3. 8dp
  4. 72dp

layout-metrics-keylines-keylines-spacing-mobile-04ba_large_mdpi
内容

该屏幕演示图标、头像和文本如何左对齐,浮动动作按钮、图标和文本如何右对齐。

layout-metrics-keylines-keylines-spacing-mobile-04bb_large_mdpi
垂直边框和水平边距

图标有16dp的左右垂直边框。带有图标或头像的内容区域左对齐,距左边界72dp。

在移动设备上有16dp的水平边距。

layout-metrics-keylines-keylines-spacing-mobile-04bc_large_mdpi
垂直边距

  1. 24dp
  2. 56dp
  3. 48dp
  4. 8dp

layout-metrics-keylines-keylines-spacing-mobile-05ba_large_mdpi
内容

该屏幕演示了侧边导航菜单的宽度,以及图标、头像和文本如何左对齐,小图标如何右对齐。layout-metrics-keylines-keylines-spacing-mobile-05bb_large_mdpi
垂直边框和水平边距

图标距侧边导航菜单的左右边界分别有16dp的垂直边框。带有图标或者头像的内容距侧边导航菜单的左边界72dp。侧边导航菜单的宽度等于屏幕的宽度减去动作条的高度,即在本例中距屏幕右侧56dp的宽。

在移动设备上有16dp的水平外边距。

layout-metrics-keylines-keylines-spacing-mobile-05bc_large_mdpi
垂直边距

  1. 48dp
  2. 8dp
  3. 56dp

平板

平板设备布局模板包含了14种不同的屏幕,显示了边框和边距如何应用于屏幕的边界和元素。下面的实例是14种模板的两个,可以通过下面的链接获取。

平板设备布局模板

layout-metrics-keylines-keylines-spacing-tablet-01_large_mdpi

layout-metrics-keylines-keylines-spacing-tablet-01a_large_mdpi

layout-metrics-keylines-keylines-spacing-tablet-01b_large_mdpi

  1. 24dp
  2. 64dp
  3. 8dp
  4. 72dp

layout-metrics-keylines-keylines-spacing-tablet-02_large_mdpi

layout-metrics-keylines-keylines-spacing-tablet-02a_large_mdpi

layout-metrics-keylines-keylines-spacing-tablet-02b_large_mdpi

  1. 24dp
  2. 64dp
  3. 8dp
  4. 48dp
  5. 80dp

桌面应用程

桌面应用程序布局模板包含了4个不同的屏幕,每一个屏幕又包括了4个不同的窗口尺寸,显示了边框和边距如何应用于窗口和元素。下面是一个屏幕的实例,可以通过下面所示的链接下载。基于不同的窗口尺寸,边框和边距块会沿袭平板设备和移动设备的网格规则。

桌面应用程序布局模板

layout-metrics-keylines-keylines-desktopa_large_mdpi

layout-metrics-keylines-keylines-desktopc_large_mdpi

比率边框

应用于移动设备屏幕的宽度和移动设备、平板设备以及桌面应用程序中UI元素的宽度

layout-metrics-ratiokeylines-keylines_15_large_mdpi
屏幕的宽度

layout-metrics-ratiokeylines-ratiokeylines-02_large_mdpi
示例

layout-metrics-ratiokeylines-keylines_19_large_mdpi
元素的宽

layout-metrics-ratiokeylines-keylines_18_large_mdpi
示例

增量边框

增量边框

增量边框定义了一个增量,比如动作条的高度,然后使用几倍于这个增量的数字来决定应用中其它元素的尺寸和位置。

大多数应用于桌面应用程序,有些也适用于平板设备,很少应用在移动设备中。增量的数量会根据窗口的尺寸来改变。

layout-metrics-incrementalkeylines-incrementalkeylines-01_large_mdpi

layout-metrics-incrementalkeylines-incrementalkeylines-02_large_mdpi

layout-metrics-incrementalkeylines-incrementalkeylines-03_large_mdpi

layout-metrics-incrementalkeylines-incrementalkeylines-04_large_mdpi

触摸目标尺寸

最小的触摸目标尺寸是48dp。在布局中,当为图标(24dp)或者头像(40dp)设置边距时,要时刻记得。触摸目标不能重叠。

layout-metrics-touchtarget-touch-target-02a_large_mdpi

layout-metrics-touchtarget-touch-target-02b_large_mdpi

非常感谢这些辛苦翻译的小伙伴!!

原文:Metrics and Keylines翻译:CodeDiving校对:cxytomo

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Style(2字体排版)

516 0

上一篇色彩,不知道大家有没有收获,也不知道大家有没有看完,我觉得应该是收获满满的~~是不是感觉意犹未尽,还想多了解了解,知道大家都很爱学习,所以我们一次连载两个小章节,让大家足够满足~~有人肯定会问,为什么才两小节,太多了,不容易消化,所以,慢慢来,循序渐进~~下面是Material Design-Style中的字体排版~~(ps:1.有个小小的建议,大家在看的时候,可以做下小小的笔记,这样更利于知识的汲取。2.文章还在校对阶段,如有错误,请多见谅!)

字体排版

字体排版(Typography)

Roboto

自从Ice Cream Sandwich发布以来,Roboto都是Android系统的默认字体集。在这个版本中,将Roboto做了进一步全面优化,以适配更多平台。宽度和圆度都轻微提高,从而提升了清晰度,并且看起来更加愉悦。

style-typography-roboto-typography.roboto2_specimen_large_mdpi

Roboto字体 – 1.21 MB(.zip)

标准样式(Standard Styles)

字体排版的缩放和基本样式(Typographic Scale & Basic Styles)

同时使用过多的字体尺寸和样式可以很轻易的毁掉布局。字体排版的缩放是包含了有限个字体尺寸的集合,并且他们能够良好的适应布局结构。最基本的样式集合就是基于12、14、16、20和34号的字体排版缩放。

这些尺寸和样式在经典应用场合中让内容密度和阅读舒适度取得平衡。字体尺寸是通过SP(可缩放像素数,scaleable pixels)指定的,让大尺寸字体获得更好的可接受度

style-typography-01_large_mdpi

style-typography-08_large_mdpi

style-typography-02_large_mdpi

“显示(Display)”样式的例子

style-typography-04_large_mdpi

style-typography-05_large_mdpi

“头条(Headline)”样式的例子

就任何表格元素来讲,App Bar中出现的所有标题都要使用“标题”样式。

style-typography-06_large_mdpi

style-typography-07_large_mdpi

“标题(Title)”样式的例子

在某些特定场合中,要使用“次要标题”样式,而不用较小的“主体”样式。这些个体包含了一小段文字预览,或者有标题与一行“主体”样式的文字一同出现。

style-typography-09_large_mdpi

style-typography-23_large_mdpi

“次要标题(Subhead)”样式的例子

style-typography-10_large_mdpi

style-typography-11_large_mdpi

“主体(Body)”样式的例子

style-typography-12_large_mdpi

style-typography-13_large_mdpi

“主体(Body)”样式的例子

style-typography-14_large_mdpi

style-typography-15_large_mdpi

“按钮(Button)”样式的例子

基本色/色彩对比度(Basic colors/Color contrast)

最基本的常识是,相同颜色的背景文字是很难阅读的。但有些人不知道的是,带有过强对比度的文本会有些炫目,同样难以阅读。这一点在深色背景下尤其明显。

获得良好的辨识度,文本应当满足一个最低的对比度,也就是4.5:1(依据明度计算)。7:1的对比度是最适合阅读的。

这些色彩的组合同样要考虑到某些非典型用户对于对比度的不同反应。

style-typography-16_large_mdpi

style-typography-17_large_mdpi

style-typography-18_large_mdpi

style-typography-19_large_mdpi

style-typography-20_large_mdpi

大号字/动态字体尺寸(Big Type / Dynamic Type sizes)

如果使用得当,大号字会让应用显得更加有趣、容易辨别布局,并帮助用户快速理解内容。

动态字体尺寸让大号字可以在文本长度未知的情况下保持在容器之内。动态尺寸是根据可用空间和预估的字符空间,从字体排版缩放中选择的。

避免轻率地的使用小号字来适配较小的容器,除非万不得已。

style-typography-21_large_mdpi

style-typography-22_large_mdpi
样例对比

style-typography-23_large_mdpi1

style-typography-24_large_mdpi

行高(Line Height)

行高是通过每个样式各自的尺寸和粗细决定的,以获得良好的可读性和合适的间距。只有“主体”、“次要标题”、“大纲”等类似的样式中才允许使用自动换行。其它所有样式应当以单行形式出现。

style-typography-25_large_mdpi
样例对比

style-typography-27_large_mdpi

style-typography-30_large_mdpi

换行规则/连字符(Line breaking rules / Hypenation)

style-typography-32_large_mdpi

|style-typography-33_large_mdpi
不要

每行长度包含的字符(Characters per line lengths)

可读性和行长度参考了来自Baymard Institute的建议:

“要得到良好的阅读效果,每行应当包含60个字符左右。每行所包含的字符数量是决定阅读舒适度的关键因素。”

“过宽:如果每行文本过多,用户的眼睛将难以找到在文本上对焦。这是因为过长的文字导致用户难以判断一行的起始点,甚至在大段文字中出现读错行的现象。”

“过窄:如果每行文本过少,会导致眼睛来回扫视过于频繁,破坏阅读的节奏。过短的内容还会给人压力,导致用户完成本行阅读前过早跳转到下一行阅读(因此会错过潜在的重要信息)。”

参考:可读性: 最佳行长度

字间距(Tracking and kerning)

style-typography-36_large_mdpi

非常感谢这些辛苦翻译的小伙伴!!未完待续~~

原文:Typography翻译acely校对:chenyusi

章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Style(4图像)

815 0

接着图标,来说说图像,图标是一种视觉语言,图形则更能带来视觉冲击,给人带来不同的心境,所以下面就是图像的重要性,以及图像运用原则。

图像(Imagery)

图像

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

在material design中,图像(无论是绘画还是摄影)都应该是组建而成而并非人为策划的,看起来神奇并且不显得过度制作。这种风格乐观,愉悦,并且坦率。这种风格比较强调场景的实质性(Materiality),质感,深度,让人意想不到的色彩运用, 以及对环境背景的关注。这些原则都旨在创建目的性强,美丽又有深度的用户介面。

原则

当使用绘画和摄影提升用户体验时,选择能够表达个人关联、信息和令人喜悦的图像。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)
个人关联
使用能够唤起回忆的影像来建立用户与应用程序的情感联系。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)
信息
传达特定的信息。以辅助理解的方式来创建智能的感官体验。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)
闪光点
用相关图像以一种意想不到的方式来取悦用户,让用户觉得不可思议。

场景赏析

加入逻辑,确保图像是动感的,并且显示出场景智能性和相关性。带有预测性的视觉效果能够彰显出智能的水准,从而能大大改善用户体验。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

身临其境

要勇于运用遮盖的方法,或是对色彩和内容的叠加来构成对画面主角的印象,抑或是构成一幅缩略图。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

最佳实践

使用多种媒体

插画和摄影可以运用在同一个产品中。摄影自动暗含了一定程度的特定性,从而应该用来展示特定的物体和故事。绘画则能有效的表现出概念和隐喻,而这一点是摄影所不具备的。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)


对于特定的实物,首先考虑用摄影来表现。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)


当所表达的内容并非具体实物(或者不能被具体实物所概括)时,绘画则可以传达出你的应用程序的信息,并且允许用户一目了然的理解内容。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)


如果你使用摄影来传达一种概念,你需要创建一些具有思考性的,甚至是隐含寓意的作品。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要
不要局限于图片库。

远离图片库(Stay away from stock)

利用图像可以表达一种与众不同的心声,还可以展现出绝佳的创意。

对于特定的实体或品牌内容,要用具体的图像。对于较抽象的内容,使其具有解释性。然而库存摄影(Photographic stock)和剪贴画(clipart)既不具体,又不具解释性。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

有焦点

你的图像应当有一个标志性的焦点。小到单一物体,大到整体布局,都可以成为焦点。确保能够用一个让人印象深刻的方法,传递给用户一个清晰的概念。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

构建叙事(Build narratives)

创建一个让人感觉身临其境的故事和上下文(context)场景。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

不要过度操作

保持图像的原始完整性。不要过度使用高度滤镜或高斯模糊,尤其是当试图去隐藏劣化(degradation)的时候。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

用户介面集成(UI Integration)

分辨率

确保你的图像大小适应其边框并且支持跨平台。该结构强调大幅图像。理想情况下,素材应该不会出现像素化。要为特定的比率和设备测试合适的分辨率大小。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)


尺寸得当的图像

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要
劣化的图像

调整大小(Introduce Scale)

利用不同的大小的图像来创造视觉上的重要性。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

在一个画册的背景中,引入各种尺寸的缩略图来传达内容的层次结构。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

鼓励在同一个生态系统使用多个容器。

文字保护

添加文字保护纱(protection scrims)来使图像上的文字显示清晰易读。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)


暗纱(dark scrims)理想的透明度应当在20%-40%之间,亮纱(light scrims)理想的透明度应当在40%-60%之间,都要视具体内容来定。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要
不要过度用文字保护纱遮挡住图像内容。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)


对于大一些的风景图,应该在特定的区域内加入文字保护纱, 不要覆盖住整个图像。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要
不要过度覆盖大图像。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)


颜色叠加不同于文字保护纱(text-protection scrims),可以用来作为设计元素。当创造互补的颜色叠加的时候,要从与其并列的内容中取样,这样才能够产生出和谐一致的色板,从而展现出良好的内容意识。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

不要

头像和缩略图

头像和缩略图代表实体或内容,可以是摄影或者概念性的插画。 通常来讲,他们是横置目标(tap targets),可以让人对事物和内容有一个初步印象。

头像可以用来表示个人。对于个人头像,要提供个性化的选项。由于用户也可能不个性化设定自己的头像,不妨将默认效果设置得令人愉悦一些。当与一个特定的标志(logo)一起使用时,头像也可以用来表示品牌。

缩略图暗示着更多的信息,让用户一窥其内容,并协助导航。缩略图让你能把图像放在狭小的空间里。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

头像使应用更具个性化而且占用的空间小。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)

一个品牌头像能够让人在一眼之内传达信息,缩略图也如此。

主角图像(Hero Images)

主角图像通常被固定在很明显的位置,大小比普通大小略大,比如屏幕顶部的横幅。主角图像能够吸引用户,提供了内容相关的背景,或加强品牌。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)
特征图像
特征图像是风格醒目的主要视觉焦点,并且有着特异的设计布局。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)
合成的主角图像(Integrated hero image)
合成的主角图像通常在一个样式中包含着混杂特异的部分。 这些部分并不能形成首要的视觉焦点。

图集

图集图片(gallery images)通常风格醒目,且他们的布局基本相同,比如网格(grid)布局,或是单一的图像。

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)
照片网格

Android设计规范 Material Design-Style(4图像)
Android设计规范 Material Design-Style(4图像)
图集图片

非常感谢这些辛苦翻译的小伙伴!!未完待续~~

原文:Imagery翻译:lhyqy5校对:chenyusi

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Style(1.色彩)

999 0

八月已过去,九月刚来到~暑假已过去~九月上学季~~又迎来了一个桂花飘香的季节,你是否有了新的目标和计划~~所以在九月初始给大家带来一个全新的东西(ps:对于我来说是全新的东西)——Material Design~~九月让我们一起好好学习吧~~

首先来普及下什么是:Material Design。它是谷歌推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
谷歌安卓操作系统用户体验主管马蒂亚斯杜拉特(Matias Durate)在今天的I/O开发者大会主题演讲中表示:“我们想象着,如果像素不仅有颜色,还有深度,那会是怎样的一番情景?如果有一种材料可以改变它的质地,那又会如何?这种畅想最终让我们开发出了我们称之为Material Design的设计语言。”
Material Design语言的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。
谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的Gmail和Calendar。大家可能还会记得,最近曾看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,介面更干净、更简约。
在安卓平台上,这种新介面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

其实简单说来,Material Design大概就是谷歌推出的旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”的一种全新的设计语言。

今天就来讲讲它style中的色彩

色彩

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感,由此引发出大胆的颜色表达激活了色彩,与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。

UI调色板

调色板以一些基础色为基准,通过填充光谱来为Android、Web和iOS环境提供一套完整可用的颜色。基础色的饱和度是500。

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

UI颜色使用

选择你的调色板

限制颜色的数量,在众多基础色中选出三个色度以及一个强调色。强调色用于后背,可有可无。

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

为灰色的文字、图标和分隔线加上alpha值

为了有效地传达信息的视觉层次,应该使用深浅不同的文本。对于白色背景上的文字,标准alpha值为87%(#000000)。视觉层次偏低的次要文字,应该使用54%(#000000)的alpha值。而像正文和标签中用于提示用户的文字,视觉层次更低,应该使用26%(#000000)的alpha值。

其它元素,如图标和分隔线,也应该具有黑色的alpha值,而不是实心颜色,以确保他们能适应任何颜色的背景。

对于彩色背景上白色或黑色文字,可以通过表格中的调色板找到合适的色彩对比度和alpha值。

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

我们十分鼓励在UI中的大块区域内使用醒目的颜色。UI中不同的元素适合主题中不同的色彩。工具栏和大色块适合使用饱和度500的基础色,这也是你应用的主要颜色。状态栏适合使用更深一些的饱和度700的基础色。

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

强调色

鲜艳的强调色用于你的主要操作按钮以及组件,如开关或滑片。左对齐的部分图标或章节标题也可以使用强调色。

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

备用强调色

如果你的强调色相对于背景色太深或者太浅,默认的做法是选择一个更浅或者更深的备用颜色。如果你的强调色无法正常显示,那么在白色背景上会使用饱和度500的基础色。如果背景色就是饱和度500的基础色,那么会使用100%的白色或者54%的黑色。

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

主题

主题是对应用提供一致性色调的方法。样式指定了表面的亮度、阴影的层次和字体元素的适当不透明度。为了提高应用间的一致性,提供两种主题选择:

  • 浅色
  • 深色

主题 – 1.3 MB(.ai)

Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)
Android设计规范 Material Design-Style(1.色彩)

非常感谢这些辛苦翻译的小伙伴!!未完待续~~~~

原文:Color翻译:arjinmc校对:PoppinLp

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Patterns(5搜索)

460 0

9月28日,文章快要更新一个月了,感觉时间过得好快啊~~想想俺在学UI网站上当编辑快两个月了~~感觉学UI网真的改变了我的生活~~让自己每天都很充实~~我也一直相信21天定律,每天打开电脑第一件事是登qq,第二件事就是上学UI网,(这是病,不过我喜欢)看看网站上自己搬得文章有没有留言(获得满足感),看看自己感兴趣的文章,开心的开启美好的一天,工作累了,就看看学习群里面~~尽可能的解答问题(要么手速太慢,要么就是回答不上的,只怪群里大神太多,太热情~~),学习新知识~~~真的很感谢学UI网(大家庭)~~嚯嚯~~~混蛋呀~~不要再矫情了~~马上进入正题~~~

搜索(Search)

应用内搜索

当应用内包含大量信息的时候,用户希望能够通过搜索快速地定位到特定内容。

最基本的搜索包括以下过程:

  • 打开一个搜索文本框
  • 输入查询并提交
  • 显示搜索结果集

然而,可以通过加入一些增强功能来显著提升搜索体验:

  • 启用语音搜索
  • 提供基于用户最近历史查询的搜索建议,即使是在输入查询之前
  • 提供满足应用数据中实际结果的自动完成搜索建议

应用内搜索中有两种主要的模式:持久性搜索(persistent search)可扩展搜索(expandable search)

当搜索是你应用中的主要关注点时,适合使用持久性搜索。

一个已准备好接受焦点的文本框显示在内嵌的搜索框中。

用户可以点击麦克风按钮来激活语音搜索。

patterns-search-persistentsearch-search_persistent_home1_large_mdpi

patterns-search-persistentsearch2-search_persistent_zero_large_mdpi
当搜索文本框获得焦点的时候,搜索框展开以显示历史搜索建议。如果需要,屏幕键盘也会显示。选择任意建议提交搜索。点击上箭头(up arrow)来离开搜索并关闭建议和屏幕键盘。

patterns-search-persistentsearch3-search_persistent_type_large_mdpi
当用户开始输入查询,搜索建议转换为自动补全。

搜索框中的“X”按钮可以清除查询文本。

选择一个建议或者按回车键(return key)提交搜索。

patterns-search-persistentsearch4-search_persistent_results_large_mdpi
当显示搜索结果的时候,搜索框仍然可见但默认失去焦点。屏幕键盘将隐藏以显示更多的搜索结果。

搜索结果被格式化为卡片的样子来和搜索框内嵌样式相匹配。这种风格可以适配不同类型的搜索结果。

当搜索是不你应用中的主要关注点时,适合使用可扩展搜索。

通过工具条中的搜索按钮(标记为一个放大镜图标)来代替搜索文本框。

patterns-search-expandablesearch1-search_expandable_unexpanded_large_mdpi

patterns-search-expandablesearch2-search_expandable_zero_large_mdpi
点击搜索按钮时工具条清除其他内容改为显示一个搜索框。如果支持语音搜索,麦克风图标也会随之显示。

搜索文本框自动获得输入焦点,并且如果需要,屏幕键盘也会显示。搜索建议显示在工具条的下面,代替之前显示在此处的内容。选择任意建议提交搜索。

点击上箭头(up arrow)关闭搜索模式,工具条回到之前的样子。

patterns-search-expandablesearch3-search_expandable_type_large_mdpi
当用户开始输入查询,搜索建议转换为自动补全。

搜索框中的“X”按钮可以清除查询文本。

选择一个建议或者按回车键(return key)提交搜索。

patterns-search-expandablesearch4-search_expandable_results_large_mdpi
当显示搜索结果的时候,工具条的搜索状态仍然保持但默认不具有焦点。屏幕键盘将隐藏以显示更多的搜索结果。

搜索结果和上一步中的的建议相同,显示在工具条下的页面主体中。

非常感谢这些辛苦翻译的小伙伴!!未完待续~~~

原文:Search翻译:lhyqy5校对:PoppinLp

章转自:http://design.1sters.com/

========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Patterns(4设置)

696 0

9月26日,还有四天就国庆了,想想都开心~~设置虽然在UI中并不显眼,但是却是不可或缺的一个部分~~

设置

应用设置允许用户选择他们对应用行为的偏好。它们授予用户真实的控制感,并且避免用户被同样的问题反复打扰。

访问设置

由于用户并不需要经常使用设置,所以它们在UI中并不显眼。应用中访问设置时:在任何情况下,进入“设置”的按钮都应简单命名为“设置”。如果当前的页面支持左导航栏,那么把设置放在导航栏中除“帮助及反馈”外的所有按钮的下方。另外,如果当前页面里有工具栏,把设置放在工具栏的更多操作(action overflow)中除“帮助及反馈”外的所有按钮的下方。

合理使用设置

当用户访问设置时,尽管这不太频繁,但他们对这个页面抱有与其他页面一样的期待。这个页面应该是组织良好且符合常规的。需要特别指出的是,它应该避免用过多的选项淹没用户。遇到产品上简单的决定时,避免向“就把它作为一个设置吧”的诱惑所屈服。对于每个你考虑放入设置里的控制,通过下列问题来确保它合适:

  • 这确实是一个用户偏好吗?信息和操作不是一个用户偏好。如果不是用户偏好,就不要把它当做一个设置。如果它是应用的静态信息(比如版本号、服务条款、开源证书),将它组织到一个帮助页面里。如果它是一个操作(比如刷新、切换账号),在你的应用的主要流程中为它找一个合适的位置。
  • 这个选项经常被用户更改吗?用户每次访问这个选项要多次操作会觉得负担重吗?如果是这样,不要把它作为一个设置。可以通过把它放在工具栏或者更多操作(action overflow)中,让这个控制更容易使用。
  • 只有少于20%的用户改变这个设置的值吗?如果是这样,不要将它作为一个设置。不管是新的还是本来就有的设置,都应该问这些同样的问题。
  • 对于已经存在的设置,最后一个问题应该多考虑一些:如果这个设置项被移除了,这会对那些不再能改变这一设置项的少数用户造成危害吗?如果会,或者你不清楚,那么合适的做法是将它作为一个设置项保留。

分组的设置

当你有很多设置项时,最好通过分组来把一个长列表变成几个短一些的列表。设置项的数量决定了分组的策略。

7个或更少的设置项

不需要分组。

8至10个设置项

试着用1到2个分隔符分隔相关的设置项。如果存在“独立设置”(与其他设置项无关并且不能放进已有的分组中),如下处理:

  • 如果是一些你最重要的设置项,把它们放在最顶上,但不用分隔符分隔
  • 否则,将它们按重要程度的顺序排序,放进末尾的“其他”分组。

11至15个设置项

建议同上,不过试着用2到4个分隔符。

如果存在“独立双选项”(两个互相相关的设置项,但与其他设置项无关)。试着将它们合并成一个设置项。比如你可以把两个相关的复选框重新设计成一个多选设置项。

16或更多的设置项

如果你有四个以上的相关的设置项,把它们分在一个子屏里。对于每个子屏使用上面这些建议。

默认选项

用户通常期望每个设置项都有合理的默认值。以下问题可以帮助你做决定:

  • 在没有默认选项时,大多数用户最有可能选择的是哪个?
  • 哪个选项最中立或最中庸?
  • 哪个选项风险、争议或言过其实的可能性最小?
  • 哪个选项用的电量和移动数据最少?
  • 哪个选项最尊重用户的注意力,只在最重要的时候打断用户?

非常感谢这些辛苦翻译的小伙伴!!未完待续~~~

原文:Settings翻译:ZeroLu校对:PoppinLp

文章转自:http://design.1sters.com/

========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Components(15开关)

991 0

9月19日,明天又是周末了~~可怜我这个单休的人儿,还得早起呀~~学习~学习~GO~GO~GO~

开关

开关允许用户选择选择项。一共有三种类型的开关:复选框、单选按钮和 on/off 开关。

注释:下面示例中所示的图形环代表一个动画,并不是实际按钮的外观。

复选框

复选框允许用户从一组选项中选择多个。

如果需要在一个列表中出现多个 on/off 选项,复选框是一种节省空间的好方式。

如果只有一个 on/off 选择,不要使用复选框,而应该替换成 on/off 开关。

通过主动将复选框换成勾选标记,可以使去掉勾选的操作变得更加明确且令人满意。

复选框通过动画来表达聚焦和按下的状态。

复选框动作components-switches-checkbox-switches_07a_large_mdpi

components-switches-checkbox-switches_07b_large_mdpi

单选按钮

单选按钮只允许用户从一组选项中选择一个。如果你认为用户需要看到所有可用的选项并排显示,那么请为排他选择使用单选按钮。

否则,考虑相比显示全部选择更节省空间的下拉。

单选按钮通过动画来表达聚焦和按下的状态。

单选框动作components-switches-radio_02_large_mdpi

components-switches-radiobutton-radio_spec_12a_large_mdpi

components-switches-radiobutton-radio_spec_12b_large_mdpi

开关

On/off 开关切换单一设置选择的状态。开关控制的选项以及它的状态,应该明确的展示出来并且与内部的标签相一致。开关应该单选按钮呈现相同的视觉特性。

开关通过动画来传达被焦和被按下的状态。

开关滑块上标明 “on” 和 “off” 的做法被弃用,取而代之的是下图所示的开关。

components-switches-switch-switches_spec_03_large_mdpi

components-switches-radio_switches_spec_03_dark_large_mdpi

components-switches-switch-switches_spec_10a_large_mdpicomponents-switches-switch-switches_spec_10b_large_mdpi

仅在支持触屏操作的情况下,对在交互中被完全遮挡的元素使用外部径向扩张效果。桌面使用的是鼠标,你不需要这个额外的指示。

components-switches-switch-mobile-fingertouch_large_mdpi

components-switches-switch-desktop-fingertouch_large_mdpi

非常感谢这些辛苦翻译的小伙伴!!未完待续~~~

原文:Switches翻译:vincent4j校对:PoppinLp

文章转自:http://design.1sters.com/

========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Components(14副标题)

825 0

9月18日,今天是一个沉重的日子~~1931年9月18日,驻中国东北的日本关东军炮击中国东北军的北大营并向沈阳进攻,制造了震惊中外的“九一八”事变。历史要记住,但是学习还是要继续,不是说么少年强则中国强,所以我们要在实力上以绝对的优势压倒对方~~在其位谋其事,所以,设计师们~加油~~

副标题

副标题是特殊的列表区块,它描绘出一个列表或是网格的不同部分,通常与当前的筛选条件或排序条件相关。

副标题可以内联展示在区块里,也可以关联到内容里,例如,关联在相邻的分组列表里。

在滚动的过程中,副标题一直固定在屏幕的顶部,除非屏幕切换或被其他副标题替换。

了提高分组内容的视觉效果,可以用系统颜色来显示副标题。

列表副标题

区块高度是48dp。

副标题字体为 Roboto Medium 14sp

副标题应该跟列表中头像或是图标对齐,除非那个地方有进阶操作(promoted action)。

Android设计规范 Material Design-Components(14副标题)
Android设计规范 Material Design-Components(14副标题)

如果有跟列表中的头像或图标左对齐的进阶操作(promoted action),副标题则需要和列表中的文字左对齐。

Android设计规范 Material Design-Components(14副标题)
Android设计规范 Material Design-Components(14副标题)
Android设计规范 Material Design-Components(14副标题)
Android设计规范 Material Design-Components(14副标题)

网格副标题

区块高度是48dp。

副标题字体为 Roboto Medium 14sp。

副标题跟左边缘距离为16dp。

Android设计规范 Material Design-Components(14副标题)
Android设计规范 Material Design-Components(14副标题)
Android设计规范 Material Design-Components(14副标题)
Android设计规范 Material Design-Components(14副标题)

非常感谢这些辛苦翻译的小伙伴!!未完待续~~~

原文:Subheaders翻译:marshluca校对:PoppinLp

文章转自:http://design.1sters.com/

========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Components(10菜单)

296 0

9月13日,谷歌设计语言~~接着列表控制,讲讲菜单,我们平时看到手机上的各种下拉菜单什么的,对于我们来讲在应用中主要是用于导航,而在这种谷歌新的设计语言中它不仅仅是用于导航,或者说导航只是一部分作用~具体怎样~~看下文~~

菜单

用法

菜单是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发。

每一个菜单项是一个离散的选项或者动作,并且能够影响到应用、视图或者视图中选中的按钮。

菜单不应该用作应用中主要的导航方法。

components-menus-menus-menus-01a_large_mdpi

components-menus-menus-menus-01b_large_mdpi

触发按钮或者控件的标签(label)可以简明准确的反映出菜单中包含的菜单项。菜单栏通常使用一个单词作为标签,像“文件”、“格式”、“编辑”和“视图”,然后其他内容或许有更冗长的标签。

菜单显示一组一致的菜单项,每个菜单项可以基于应用的当前状态来使能。

components-menus-menus-menus-02_large_mdpi

上下文菜单(Contextual menus)能够基于应用的当前状态动态的改变菜单项的可用性和让菜单项使能。

通常,移除与当前上下文不相干的菜单项,禁用那些需要满足特定条件才能使用的相关的菜单项(比如,当文本选中后“复制”变得用)。

特定的应用状态可能使得上下文菜单只包含一个菜单项。比如,当在网页上高亮文本时,Android只显示“复制”,所以用户不能使用“剪切”和“粘贴”文本

components-menus-menus-menus-03_large_mdpi

菜单依赖于它们距屏幕边的距离垂直和水平的调整位置。

components-menus-menus-menus-04_large_mdpi

如果菜单的高度使得菜单项不能完全显示,那么菜单会支持内部滚动。一个典型的例子是在手机横屏状态下查看菜单。

components-menus-menus-menus-05_large_mdpi

菜单可以是级联的。

components-menus-menus-menus-06_large_mdpi

下面这些动画演示了菜单的滚动和级联。

下拉

文本框下拉

应用工具条下拉

级联下拉

菜单项

每一个菜单项限制为单行文本,并且能够说明在菜单项选中时所发生的动作。

菜单项的文本一般是单个单词或者短语,但是也可能包含了图标帮助文本,比如快捷键,同时也可包含像复选标记之类的控件来标识多选条目或状态。可以参考列表控件

带有静态文本的菜单应当在菜单的上部放置最常使用的菜单项。

带有动态文本的菜单可能具有其它行为,比如在菜单上部放置预先使用的字体。顺序可以根据用户的动作而改变。

菜单项可以内嵌自己的子菜单。尝试着将菜单层级限制在一级,因为导航多级内嵌子菜单是困难的。

components-menus-menuitems-menu-items-01_large_mdpi

将动作菜单项显示为禁用状态,而不是移除它们,这样可以让用户知道在正确条件下它们是存在的。

比如,当没有重做任务时禁用重做(Redo)动作。当内容被选中后,剪切(Cut)和复制(Copy)动作可用。

components-menus-menuitems-menu-items-02_large_mdpi

菜单出现在所有的应用内部的UI元素之上。

通过点击菜单以外的部分或者点击触发按钮(如果按钮可见),可以让菜单消失。

通常,选中一个菜单项后菜单也会消失。一个特例是当菜单允许多选时,比如使用复选标记。

components-menus-behavior-menus-08_large_mdpi

菜单显示在触发它的元素处,当前选中的菜单项显示在触发元素的顶部。

不要重复显示选中的菜单项。

components-menus-behavior-menus-p-01_large_mdpi 要(Do)

components-menus-behavior-menus-p-02_large_mdpi 不要(Don’t)

菜单不要与触摸的位置水平对齐

components-menus-behavior-menus-p-03a_large_mdpi 要(Do)

components-menus-behavior-menus-p-03b_large_mdpi 要(Do)

components-menus-behavior-menus-p-04a_large_mdpi 不要(Don’t)

components-menus-behavior-menus-p-04b_large_mdpi 不要(Don’t)

尺寸标准

尺寸标准提供了不同大小和类型以及不同平台上菜单的尺寸。

移动设备

components-menus-metrics-menus-redlines-01_large_mdpi

不同的宽度

components-menus-metrics-menus-redlines-02_large_mdpi

级联菜单

components-menus-metrics-menus-redlines-03_large_mdpi

级联标尺

components-menus-metrics-menus-redlines-04_large_mdpi

非常感谢这些辛苦翻译的小伙伴!!未完待续~~~
文章转自:http://design.1sters.com/
========================关于学ui网=========================
xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!
评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Components(12滑块)

613 0

9月16日,昨天我把Android设计规范 Material Design所有的内容都给打印出来了,想要好好研究一下,真的好多呀~~接近300页,A4的,不过在公司打印,还好呀~~还是偶尔公物私用哈~~感觉自己萌萌哒(好想吐哟)~~真的要好好学习了~~

滑块

滑块控件(Sliders)

滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

连续滑块(Continuous Slider)

在不要求精准、以主观感觉为主的设置中使用连续滑块,让使用者做出更有意义的调整。

亮色主题

暗色主题

在滑动条(Bar)上图标相对于左边和/或右边的间距的呈现

带有可编辑数值的滑块

用于使用者需要设定精确数值的设置项,可以通过点触缩略图、文本框来进行编辑。

间续滑块(Discrete Slider)

间续滑块会恰好咬合到在滑动条上平均分布的间续标记(tick mark)上。在要求精准、以客观设定为主的设置项中使用间续滑块,让使用者做出更有意义的调整。应当对每个间续标记(tick mark)设定一定的等级区间进行分割,使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的,使用者不可对其进行编辑。

附带数值标签的滑块

用于使用者需要知晓精确数值的设置项。

亮色主题

暗色主题

非常感谢这些辛苦翻译的小伙伴!!未完待续~~~

原文:Sliders翻译:阿九(siton)校对:chenyusi

文章转自:http://design.1sters.com/

========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design

246 0

阔别多日,不知道小伙伴们,有没有想我呀~~这里补充上Android设计规范 Material Design的目录,方便小伙伴们阅读~~

Style

Layout

Components

Patterns

Usability

Resources

文章转自:http://design.1sters.com/

========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录

Android设计规范 Material Design-Resources(4调色板)

593 0

10月8日,今天开始上班了(你们知道,我不是在说我),大家都有假期综合症吧,希望大家可以伴随着Material Design的更新结束,而开启新的一天~!!话说,调色板,对于我这种色弱的人来说,简直就是一大利器呀,赶快下载,体验一把~~

调色板

下面提供下载的压缩包里包含可安装的Adobe Photoshop和Adobe Illustrator调色板,以及一个介绍了如何给Photoshop安装.aco文件和如何给Illustrator安装.ase文件的Read-Me.pdf文档。

Color Swatches– 0.13 MB (.zip)

非常感谢这些辛苦翻译的小伙伴!!马上就要完了~~~

原文:Color Palettes翻译:iceskysl校对:PoppinLp

文章转自:http://design.1sters.com/

========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn 海量APP截图,让你灵感爆发!

评论 (0)
请登录以参与评论。
立即登录