集册 Android&Java 技术笔记 官方Material design手册

官方Material design手册

—— Google官方Material Design手册(developer,spec)

欢马劈雪     最近更新时间:2020-08-04 05:37:59

192

Creative Vision

安卓系统、系统应用、谷歌核心应用,包括安卓开发者,都应牢记以下总体目标:

  • Enchant me:多层次的优美,流畅清晰的动画、松脆有意义的布局和排版、连图标都是一种艺术;应结合优美、简洁、功能目标,创造出使用简易但功能强大的APP;
  • Simplify my life:突出重点,简化操作;
  • Make me amazing:用新鲜技术打动用户,既简洁又优雅;

Android Design Principles

  • Enchant Me
    • Delight me in surprising ways:漂亮的界面、精心设计的动画、适时的音效...
    • Real objects are more fun than buttons and menus:让用户可以直接接触、操作APP内的事物
    • Let me make it mine:除了提供有价值、优美的默认外观/设置外,也适当提供自定义途径,当然,不能妨碍主要的功能
    • Get to know me:记住用户的操作/设置/选择,尽量避免用户重复同样的选择,将以前的选择放在快捷的位置
  • Simplify My Life
    • Keep it brief:内容描述尽量用短句,可读性才强
    • Pictures are faster than words:图片更能吸引注意力,以及表达内容
    • Decide for me but let me have the final say:尽最大努力猜测用户要执行的操作,先设置为默认值,而不是询问用户是否使用之;但要提供方便的取消功能,让用户拥有最终决定权
    • Only show what I need when I need it:将内容分割为小块,方便接收;隐藏不重要的信息
    • I should always know where I am:不同界面有明显区别,完善的导航,用动画暗示不同界面的关系,为执行中的任务提供反馈
    • Never lose my stuff:记住用户的设置/创造,并能轻易访问,在不同设备之间提供同步功能
    • If it looks the same, it should act the same:将功能的区别在视觉上明显体现出来,不要使用“模式设置”
    • Only interrupt me if it's important:只在重要的时候提醒/打断用户
  • Make Me Amazing
    • Give me tricks that work everywhere:使用一些通用的快捷操作/手势/标志
    • It's not my fault:当用户操作不当时,提醒需要温和、易懂,掩盖技术细节,能自动修正就是最好的
    • Sprinkle encouragement:将复杂操作拆分为简单的小任务,即便作用细微,也要为操作提供反馈
    • Do the heavy lifting for me:让新手用得像专家一样
    • Make important things fast:将最主要的功能放置在最突出的位置

Material disign principles

  • Material is the metaphor:给用户真实事物的感受,真实触感、纸与墨、贴近真实物理规律、光影、表面、移动、相互关系等,都是真实世界的暗示;
  • Bold, graphic, intentional
    The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.
    An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.
  • Motion provides meaning:移动用来聚焦注意力、保持一致性;反馈很微妙;转变动画很有效;

What is material?

  • Environment
    • 模拟3D世界,引入z坐标;
    • 模拟光影,结合key light和ambient light投射出的阴影;
  • Material properties
    • 物理属性
      • 只有宽高(xy)可以改变,厚度(z)固定为1dp;
      • 阴影体现的是元素的海拔高度(z),而不是颜色的变化;
      • 内容是显示在物质上的,而不是增加了物质的厚度;
      • 内容的行为独立于物质,但是受限于物质的边界;
      • 物质是实心的,输入事件(点击等)不能在物质之间传递,只能在最上层的物质上响应;
      • 多个物质元素不能同时在同一高度,要用阴影区分出它们的不同高度;
      • 物质不可穿过,改变高度时,不能穿过另一个物质;
    • 改变物质
      • 物质可以改变形状
      • 物质的变化都局限于其平面内
      • 物质不能折叠或者弯曲
      • 多个物质元素可以合并为同一个,只要在同一高度
      • 物质拆分、跨高度移动之后,又可以合并成一个
    • 物质的移动
      • 物质可以自发创建或销毁
      • 物质可以沿着任意轴移动
      • 沿着z轴移动通常暗示着和用户的交互
  • Objects in 3D space
    Material design中的元素和真实世界中的事物类似,可以叠起来,可以依附,但不能穿过,能投射阴影、反射光线;
    • 高度(Elevation)
      • 单位是dp,子元素的高度值是相对于父元素的,因为元素都是1dp厚,所以高度值是两个元素的顶部的距离;
      • 元素拥有默认的高度,App bar: 4dp,Floating Action Button: 6dp,Card: 2dp;
      • 默认高度不会改变,当改变一个元素的高度之后,应该尽快回到默认高度;
      • 同类元素的默认高度,在不同应用之间应该保持一致;但是在不同平台上可能不一致;
      • 响应式高度,改变高度以响应用户的输入(普通、聚焦、按下等),或者系统事件;
      • 动态高度变化,相对于默认高度,当需要响应时,变化一个偏移量,事件结束后回到默认高度;
      • 不同的阴影用来暗示不同的功能、区分不同的元素;
      • 阴影的变化可以用来暗示元素移动的方向;
    • Object relationships
      • 元素之间的关系:父子关系;
      • 每个元素有一个父元素(系统,或者其他元素),每个元素可以有多个子元素;
      • 子元素从父元素继承属性,兄弟之间继承的属性是相同的;

Animation

展开阅读全文