产品设计:Material Design 学习笔记二

news2024/11/23 3:30:12

5、图标

桌面图标

桌面图标尺寸是48dp X 48dp。

桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。注意避免以下问题:

①不要给彩色元素加投影

②层叠不要超过两层

③折角不要放在左上角

④带投影的元素要完整展现,不能被图标边缘裁剪

⑤如果有折痕,放在图片中央,并且最多只有一条

⑥带折叠效果的图标,表面不要有图案

⑦不能透视、弯曲

常规形状可以遵循几套固定栅格设计。

小图标

优先使用Material Design默认图标。设计小图标时,使用最简练的图形来表达,图形不要带空间感。

小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。

小图标同样有栅格系统。线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。

小图标的颜色使用纯黑与纯白,通过透明度调整:

黑色:[54% 正常状态] [26% 禁用状态]

白色:[100% 正常状态] [30% 禁用状态]

6、图片

选用图片

描述具体事物,优先使用照片。然后可以考虑使用插画。

图片上的文字

图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间,浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。

可以使用半透明的主色盖住图片。

提取颜色

Android L可以从图片中提取主色,运用在其他UI元素上。

图片加载过程

图片的加载过程非常讲究,透明度、曝光度、饱和度3个指标依次变化,效果相当细腻。

7、文字

字体

英文字体使用Roboto,中文字体使用Noto。

Roboto有6种字重:Thin,Light, Regular, Medium, Bold 和 Black。

Noto有7种字重:Thin,Light, DemiLight, Regular, Medium, Bold 和 Black。

文字排版

常用字号:

● 12sp 小字提示

● 14sp(桌面端13sp) 正文/按钮文字

● 16sp(桌面端15sp) 小标题

● 20sp Appbar文字

● 24sp 大标题

● 34sp/45sp/56sp/112sp 超大号文字

长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/91272.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Debug怎么用

文章目录前言一、打断点运行Debug二、页面重新运行功能三、回到代码看断点前言 提示:这里可以添加本文要记录的大概内容: 因为最近有个项目注册不好使,想看看哪的问题,所以用debug看看程序走到了哪 提示:以下是本篇文…

docker部署mysql初始化数据库

一、前言 在使用docker部署mysql服务时,往往需要在创建容器时新建database,在需要在创建实例的过程中希望初始化sql脚本。 mysql官方镜像支持在容器初次启动时自动执行指定的sql脚本或shell脚本(注意:只有初次启动时才能自动执行&…

【正点原子I.MX6U-MINI】通过tftp从Ubuntu中下载zImage 和设备树文件 | 从网络启动Linux系统

从网络启动linux系统的唯一目的就是为了调试!不管是为了调试linux系统还是linux下的驱动。每次修改linux系统文件或者linux下的某个驱动以后都要将其烧写到EMMC中去测试,这样太麻烦了。我们可以设置linux从网络启动,也就是将 linux 镜像文件和…

【OpenCV-Python】教程:5-3 光流

OpenCV Python Optical Flow (光流) 【目标】 了解光流的概念和用 Lucas-Kanade 算法估计光流我们将使用cv2.calcOpticalFlowPyrLK()这样的函数来跟踪视频中的特征点。们将使用cv2.calcOpticalFlowFarneback()方法创建一个密集的光流场,可以用于前景检测。 【理论…

[附源码]Python计算机毕业设计高校心理咨询管理系统Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

Java+SSH实验室预约系统(含源码+论文+答辩PPT等)

该项目采用技术: 后台:SpringSpringmvcHibernate 前台JqueryMy97DatePickercssjs 使用了MySQLTomcat等相关技术 项目含有源码、文档、配套开发软件、软件安装教程、项目发布教程等 本系统的用户可以分为三种:管理员、教师、学生。以下针对三种…

协同共进 | 中睿天下入会工业信息安全产业发展联盟

近日,中睿天下加入“工业信息安全产业发展联盟”,成为新一批会员单位。 工业信息安全是网络安全、国家安全的重要组成部分,涉及工业领域各个环节,涵盖工业控制系统安全、工业互联网安全、工业数据安全等各领域,直接关系到经济发展…

u盘出现fat32如何恢复文件?告诉你两种好方法

u盘由于体积小、内存大等优势,在日常生活领域应用的很多,但是使用过程中,总会遇到这样或那样的问题,比如u盘显示fat32打开啥都没有了?或者u盘出现fat32而无法访问的情况,这时如果里面有重要的数据怎么办呢&…

Activiti 工作流引擎

一、什么是工作流? 工作流:指业务过程的部分或整体在计算机应用环境下的自动化。是对工作流程及其各操作步骤之间业务规则的抽象、概括描述。在计算机中,工作流属于计算机支持的协同工作(CSCW)的一部分,后者是普遍研究…

win7无损合并分区,win7合并磁盘分区

电脑的操作系统是win7的,如果磁盘分区太小或者说磁盘分区不合理,需要对磁盘分区重新分区,其中合并磁盘分区就是解决方法之一,那么,有没有关于win7无损合并分区的操作方法呢? 一、利用Windows自带的功能来合…

Matlab|基于BP神经网络进行电力系统短期负荷预测

目录 摘要 一、电力负荷数据导入 二、输入输出数据归一化 三、建立和训练BP神经网络 四、 使用测试数据进行负荷预测 五、Matlab代码实现 摘要 使用BP神经网络实现简单的电力负荷回归预测任务。主要的步骤为:导入数据、数据归一化、建立BP神经网络、训练BP神…

熹乐科技范维肖CC:基于开源 YoMo 框架构建“全球同服”的 Realtime Metaverse Application

前言 在「RTE2022 实时互联网大会」中,熹乐科技创始人 & CEO 范维肖CC 以《基于开源 YoMo 框架构建“全球同服”的 Realtime Metaverse Application》为题进行了主题演讲。 本文内容基于演讲内容进行整理,为方便阅读略有删改。 大家好,…

chatGPT的爆火,是计算机行业这次真的“饱和”了?

近日,chatGPT这一生成式AI爆火,这款号称神仙级别的自动语言生成式AI发布短短5天内,就吸引了100万用户,在官方描述中,chatGPT是一个“可以连续回答问题、承认自己的错误、挑战不正确的前提并拒绝不适当的要求”的对话模…

【GO】 K8s 管理系统项目[API部分--Deployment]

K8s 管理系统项目[API部分–Deployment] 1. 实现接口 service/dataselector.go package serviceimport ("sort""strings""time"appsv1 "k8s.io/api/apps/v1"corev1 "k8s.io/api/core/v1" )// dataselector 用于排序,过滤…

第11讲:vue脚手架集成ElementUI

一、创建vue路由项目并添加ElementUI支持 ElementUI官方网站:ElementUI组件 创建路由项目请参考:路由开发 使用如下命令集成ElementUI npm i element-ui -S在src/main.js文件中引用ElementUI import Vue from vue import App from ./App.vue import …

创建第一个QT程序demo

双击Qt Creator 9.0.0 (Community)图标,打开软件。该图标所处位置为(如果是默认安装到C盘下面的话):C:\Qt\Tools\QtCreator\bin\qtcreator.exe 或者从开始菜单栏启动(开始菜单栏的启动图标本质上也是一个快捷方式&…

记录windows上的VSCODE 远程到linux编译代码机器上的一些问题

设置windows SSH 到linux时免密码登录的方法: 将C:\Users\Administrator.ssh\id_rsa.pub中的公钥字符串复制,追加到linux ~/.ssh/authorized_keys文件中。 问题: rootlocalhost:~/.vscode-server/bin/6261075646f055b99068d3688932416f2346d…

[附源码]Node.js计算机毕业设计服装创意定制管理系统Express

项目运行 环境配置: Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境:最好是Nodejs最新版,我…

【Redis技术探索】「底层架构原理」探索分析服务数据同步持久化机制

📚背景介绍 ✒️ Redis数据恢复的介绍 通常情况下redis的数据全部存储在内存中,数据库一旦故障发生重启数据会全部丢失,持久化功能在于能够有效地避免因进程退出造成的数据丢失问题,在下次重启时利用之前持久化的文件即可实现数据…

【学习打卡】ZFNet深度学习图像分类算法

文章目录引言可以学到什么为什么叫ZFNetZFNet的网络结构简介方法:可视化反卷积反池化反激活反卷积训练细节大小裁剪层可视化特征可视化第 1 层第 2 层两边的对应关系更深的层第 3 层第 4 层第 5 层特征演化特征不变性实验简介图的分析模型改进:AlexNet局…