恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Material Design-Layout-Principles
0.0°
2014-06-30 自译外文 规范/资料 原作者: Google 举报 72726 426 136 30

设计原则


Material design 采用了印刷设计中的一些基本工具,比如基准网格线和结构网格线。这种布局设计可以帮助视觉元素可以平滑伸缩,以达成跨平台一致的视觉体验,简化开发流程,并最终帮助设计师制作适用于各种屏幕的应用。


布局设计规范中,鼓励设计师在跨平台设计中使用使用相同的视觉元素、结构网格和整体的边距规则,在不同尺寸的屏幕上让应用有有一致的风格和体验。结构和视觉风格的一致,可以打造出跨平台、一致的使用体验,这些能够给用户提供一种熟悉感和安全感。

在探索布局细节之前,再次思考究竟什么是material design:一种基于卡片的设计。理解卡片的表现和制作的规则是非常重要的。


卡片艺术

在material design中,应用页面上的每个像素就像排列在轻薄的卡片上。卡片有着扁平的背景颜色,能够被用做一系列的用途。一个典型的布局由多个卡片张片组成。


卡片可以容纳像素和视觉元素(比如状态栏(Phone端:译者注)或者系统栏(Pad端:译者注),它们并不属于卡片。)。要让用户感觉视觉元素是印刷在卡片上的,而卡片是位于屏幕下方的。


卡片的排版

接缝,当两个卡片共用一个边长时,便出现了接缝。两个通过接缝组合在一起的卡片通常一起移动。



台阶式的层级


当两个卡片有着不同的Z-轴(x和y分别代表屏幕所在平面上的水平坐标和垂直坐标,而z轴则是垂直于屏幕

:译者注)次序时,这两个卡片便有了前后的层级。因此通,这两个卡片彼此独立的移动。


卡片 工具栏

工具栏是专注于当前页面功能操作的小卡片。 这些操作经常被聚集起来放置在工具栏的左侧和与右侧。与导航(抽屉菜单或者是返回箭头)相关的操作通常出现在左侧,而那些应用在当前页面内容的操作放在在右侧。

在工具栏左侧和右侧的操作所弹出式的卡片,永远不允许将原卡片割裂。然而,弹出的卡片,工具栏会限制它的宽度,不会长于整个卡片的宽度。


正确:

弹出的卡片,被整体的长度所限制。


不正确:

永远不允许弹出的卡片,将原卡片割裂。


工具栏随着卡片的变化而频繁的变化,,工具栏中呈现出来的内容与卡片的内容有关。当卡片滚动到工具栏的下方时,卡片将会在某个点停止,防止卡片滑到另一侧。(可滑动的卡片到了顶点是有限制的:译者注)

工具栏也可以开始呈现出与第二个卡片接缝连接,但是拉起形成下一个动作。这种变异形式被称为瀑布流。

另外,工具栏可以和缝隙一起,随着两个卡片的滑动而滑出屏幕。

最后,第二个卡片在滑动的过程中,可以覆盖工具栏。

工具栏有标准的高度,但是也可以更高。当工具栏变高,它上面的操作可以放在顶部,也可以放在底部。

工具栏一旦被固定,可以灵活地改变它的大小。在变化的时候,它快速(有阈值与回程)的在最大值和最小值(标准值)之间变化。   


悬浮按钮

悬浮按钮指的是和工具栏分开的圆形卡片。

悬浮按钮代表着一些额外操作。如果与内容相关的话,悬停按钮可以跨越层级(有优先权限:译者注)。


悬浮操作如果与两个卡片的内容都相关的话,可以优先于接缝。

永远不要仅为了给操作一个固定的点,而引入一个接缝。


响应式设计原则

当我们建立跨设备的布局设计时,我们需要考虑固定、液态布局等一些设计策略。

下面是些应遵循的简单原则:

1 遵守人的常识

2 更大的屏幕≠更大的认知能力

3 线的长度应该被容易理解

4 考虑边角距离

5 遵循使用常识:允许空格,不要将工具栏固定。

在多层次的系统中使用这些策略,就像屏幕层级和卡片层级。

维度感

像素级的深度感可以通过X-Y轴体现。然而,通过Z轴体现界面的深度感,效果更佳。打造具有深度感的界面,而不应该墨守成规,让界面中的元素位置固定,这显得很死板。

概念模型

从更高的层次上观察,每个应用其实是存在于不同空间和容器中的。

这就意味着,一个应用中的卡片不会插入到另一个应用中的卡片序列中,否则是Z轴空间的紊乱。

这也意味着,在一个应用中,操作和选项是隔离存在的。举例来说:在一个应用中删除一个列表不会在引起另一个应用的变化。

而容器的存在,让多个应用可以同时存在于同一界面,例如浏览器中不同的标签页。

在特定应用内,大多数元素会按照Z轴,排列出主要层级和次要层级。例如:一个按钮的悬停状态是次要层级,而其按压状态是主要层级。

在应用内其他元素在Z轴的排列有着固定的优先级,这意味着它们总是出现在其他元素的上面或下面,无论这些项目'沿z轴的相对位置。例如,浮动动作按钮总是出现内容和工具栏的上面,无论这个应用正在使用多少个卡片。

系统元素,比如状态栏和系统对话框,存在于一个单独的系统空间内,高于或低于所有的应用容器。

根据上文,系统元素可以不呈现在应用中(比如夜间模式),但是如果存在系统空间元素,它们有更高的优先级。例如,系统对话框,永远出现在当前应用的最上层。

布局考量

深度感不是为了装饰而存在,而是为了功能

在布局时,需要审慎考虑元素在Z轴的优先级,而不是它的绝对位置。

深入思考你的应用,了解它的层次和各个元素重要性,帮助用户将精力集中在完成任务中。


阴影

阴影包括两层:​​顶部阴影是为了打造深度感,底部阴影是为了提升清晰度。


更新:2014-06-30

下载
收藏

426人已收藏

王帆

站在巨人肩膀的前一步,是找到巨人

  • 13

    作品

  • 1189

    粉丝

  • 17

    关注

  • 亚马逊Alexa语音交互规范(五)
  • 亚马逊Alexa语音交互规范(四)
  • 亚马逊Alexa语音交互规范(三)
  • 亚马逊Alexa语音交互规范(二)

    猜你喜欢

      2014-06-30 自译外文 规范/资料 原作者: Google 举报 72726 426 136 30

      Material Design-Layout-Principles

      0.0°

      你确定要举报Material Design-Layout-Principles

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年06月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      136
      426
      30

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录