首页 > 其他分享 >Material Design基础 - Light and shadows

Material Design基础 - Light and shadows

时间:2022-10-22 17:55:42浏览次数:78  
标签:shadows 环境光 Material surface 标高 Design 曲面 阴影

光线和阴影

material surface阻挡光源时会投射阴影。

在material设计环境中,虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影,称为关键光阴影。环境光从各个角度出现,以创建漫射的柔和阴影,称为环境光阴影。

光源

material环境中的阴影由关键灯光和环境光投射。在Android和iOS开发中,当光源被z轴上不同位置的材质表面阻挡时,会出现阴影。在web上,仅通过操纵y轴来描绘阴影。

阴影

阴影提供有关深度、移动方向和surface边缘的提示。surface的阴影由其标高和与其他surface的关系决定。

用法

因为阴影表示曲面之间的高度,所以必须在整个产品中始终使用阴影。

阴影大小反映标高高度。较高标高的曲面有较大的阴影,而较低标高的曲面有较小的阴影。

Shadows & Motion

阴影为曲面的移动方向以及曲面之间的距离是增大还是减小提供了有用的提示。
当曲面改变形状或比例,但其标高保持不变时,其阴影不应改变。
当曲面更改其标高时,其阴影应该更改。

研究

Material Design对15名低视力参与者进行了36次采访,以更好地了解阴影和轮廓如何影响个体识别和与组件互动的能力。

研究结果包括:

阴影和轮廓只是影响用户识别能力的元素的许多属性之一。影响元素识别能力的其他属性包括字体特征、标高、颜色、周围元素之间的布局以及使用上下文。

使用阴影和轮廓可以提高扫描页面时查找组件的难度和速度。

在组件周围使用阴影或笔划轮廓可以提高确定是否可以与组件交互的能力。

参考文档

Material System - layout Light and shadows

标签:shadows,环境光,Material,surface,标高,Design,曲面,阴影
From: https://www.cnblogs.com/guoapeng/p/16816798.html

相关文章

  • Material Design 基础 - Layout
    理解layoutmaterial设计布局使用统一的元素和间距,以鼓励在多种平台、环境和屏幕尺寸之间的一致性。原则Predictable(可预测的)使用直观且可预测的布局,并具有一致的U......
  • Material Design 基础 - 导航
    说明导航允许用户在应用程序中移动。导航类型导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的:专用导航组件、将导航行为嵌入内容以及平台功能......
  • vite Ant Design Vue 动态主题
    简单记录一下。官网地址:https://www.antdv.com/docs/vue/customize-theme-cnantd全局化配置:https://www.antdv.com/components/config-provider-cn开始没懂怎么去使用,查......
  • ant.design-vue 级联多选组件
    取自doit-ui-web ,基于ant.design封装的功能组件,实现多选级联样式表功能,根据自身情况引入到自己的项目中 <template><divclass="gb-ant-select-multiple-c......
  • 驱动开发:内核枚举ShadowSSDT基址
    在笔者上一篇文章《驱动开发:Win10枚举完整SSDT地址表》实现了针对SSDT表的枚举功能,本章继续实现对SSSDT表的枚举,ShadowSSDT中文名影子系统服务描述表,SSSDT其主要的作用是管......
  • DesignModeler分割面
    第一步:来一个UnfreezeTools->UnfreezeBodies:选择要Unfreeze的body第二步:来一个ExtrudeCrete->Extrude Geometry:选择用于分辨面的边线Operation:必须选择ImprintFa......
  • DesignModeler中的投影功能
    在对装配体施加载荷的时候,零部件某个面上,仅有一部分承受载荷,而另一部分由于其他零件的阻挡并不直接承受载荷。这时候可以使用DesignModeler中的Projection功能,将承受载荷的......
  • PowerDesigner 16.5软件安装包下载及安装教程
    PowerDesigner16.5软件简介:PowerDesigner16.5是一款功能强大的数据库建模软件,采用模型驱动方法,将业务与IT结合起来,可帮助部署有效的企业体系架构,并为研发生命周期管理提供......
  • Design Patterns in JavaScript: Module, Revealing Module
    <html><head></head><body><h1>DesignPatternsinJavaScript:Module,RevealingModule</h1><divid="root"></d......
  • Ant design——message防抖优化——富文本的使用——富文本数据的收集——上传图片保
    button按钮有个loading加载态度。加载状态为true则不可点击。通过这个属性来完成项目中的防抖优化const[seachBtn,setSeachBtn]=useState(false)message.error("用户名不......