1.Android 平台的颜值标杆:Material You 应用大赏
2.Android设计规范 Material Design-Components
3.打造 Material 字体样式主题 | 实现篇
4.借助 Material You 为您的用户提供个性化的流畅体验
5.Android设计规范Material Design-Components
Android 平台的颜值标杆:Material You 应用大赏
在 Android 的众多革新中,Material You 以其独特的壁纸取色系统和深度融入 Google Pixel 设备的UI设计,成为了显著亮点。这套新UI不仅影响了系统界面的各个角落,如锁屏、启动器、dede餐饮源码搜索框和通知中心,还延伸至小部件的实时背景色效果。
Google 不仅致力于将 Material You 设计应用到 Pixel 机型上,还在自家应用中积极推进。电话、通讯录、短信应用虽然跟进速度不快,但已经可以看到搜索框、导航菜单和设置界面的调整,如动态颜色、圆角矩形按钮等,特别是拨号应用的底部导航栏设计有所提升。
日历应用和 Google 相册以其出色的设计适配,动态颜色和圆角设计使界面更具层次感。Chrome 浏览器在颜色和界面元素上有所改进,计算器和时钟应用则通过新样式和颜色提升了用户体验,尽管存在一些不尽人意之处,如底部导航栏的统一性问题。
第三方应用如 Sleep as Android 和 Tasker 在 Material You 的设计中展现出积极态度,而 Gboard 以小见大地展示了 Material You 的vue cli 源码解读核心理念。然而,有些应用如 Gmail 和 Keep 在底栏设计上有所保留,反映了对新设计的个性化处理。
对于 Material You 的未来,尽管存在一些应用间的适配不一致和设计冲突,OPPO、三星等厂商也开始跟进,预示着Material You 的影响力将进一步扩大。你对这些应用的Material You 设计有何看法?还有哪些应用也成功适配了 Material You?期待你的分享。
Android设计规范 Material Design-Components
9月日,明天又是周末了~~可怜我这个单休的人儿,还得早起呀~~学习~学习~GO~GO~GO~开关开关允许用户选择选择项。一共有三种类型的开关:复选框、单选按钮和 on/off 开关。
注释:下面示例中所示的图形环代表一个动画,并不是实际按钮的外观。
复选框复选框允许用户从一组选项中选择多个。
如果需要在一个列表中出现多个 on/off 选项,复选框是一种节省空间的好方式。
如果只有一个 on/off 选择,不要使用复选框,而应该替换成 on/off 开关。
通过主动将复选框换成勾选标记,可以使去掉勾选的操作变得更加明确且令人满意。
复选框通过动画来表达聚焦和按下的秒赞网页源码状态。
复选框动作
单选按钮单选按钮只允许用户从一组选项中选择一个。如果你认为用户需要看到所有可用的选项并排显示,那么请为排他选择使用单选按钮。
否则,考虑相比显示全部选择更节省空间的下拉。
单选按钮通过动画来表达聚焦和按下的状态。
单选框动作
开关On/off 开关切换单一设置选择的状态。开关控制的选项以及它的状态,应该明确的展示出来并且与内部的标签相一致。开关应该单选按钮呈现相同的视觉特性。
开关通过动画来传达被聚焦和被按下的状态。
开关滑块上标明 “on” 和 “off” 的做法被弃用,取而代之的是下图所示的开关。
仅在支持触屏操作的情况下,对在交互中被完全遮挡的元素使用外部径向扩张效果。桌面使用的是鼠标,你不需要这个额外的指示。
非常感谢这些辛苦翻译的小伙伴!!未完待续~~~
原文:Switches翻译:vincent4j校对:PoppinLp
文章转自: 学ui网发布高质量ui设计教程和设计分享,希望打造一个最好的ui学习教程平台!
APP截图站:app.xueui.cn海量APP截图,让你灵感爆发!
打造 Material 字体样式主题 | 实现篇
使用 Material 主题自定义组件,以确保观感与品牌一致,素材源码是什么涉及颜色、字体和形状参数。从版本1.1.0开始,Android中的Material设计组件库支持实现Material主题。主题包含颜色、字体和形状,允许调整以获得多样组件变体,同时保持其核心结构和易用性。
重点讨论字体样式主题的实现。Material Design提供种应用于应用中所有文字的样式,每种样式对应设计术语和字体样式属性,例如"textAppearanceBody1"。每种样式的属性有默认基准值,如文字尺寸、字符间距、大小写等。这些属性由Material组件用于设置组件文本元素样式,常见于TextView或其组合。
字体样式属性应用在布局和组件样式中。更多使用细节和多种样式化方案优先级,查阅Nick Butcher的文章。在MDC主题中,这些属性映射到样式上,如TextAppearance。熟悉AppCompat或平台中已知的海盗骑兵源码TextAppearance样式,MDC增加了此内容,允许根据主题变换不同文字样式。
选择字体样式是设计师的责任,了解每种样式及其应用场景至关重要。Material Design提供字体样式生成器,集成了Google Font,并可导出代码。字体样式资源由字体和TextAppearance样式组成。Android中可用资源及其声明注意事项详细说明。
XML和可下载字体的使用,字体存放于res/font目录下,通过@font/符号引用。可使用本地XML字体或可下载字体,Android Studio内置向导帮助使用可下载字体。从API 开始,Android支持使用可变字体,了解更多信息请查阅Rebecca Franks的文章。
TextAppearance样式在Android上等同于Material Design字体样式。自定义样式时推荐分离关注点,创建单一数据来源。这些样式支持与TextView相同的属性和值。字符间距计算遵循简单公式,将Sketch中的tracking值转换为合适的em值。MaterialTextView和行高API 中添加android:lineHeight属性,MDC通过MaterialTextView提供兼容性,无需直接使用。
额外字体样式,如设计系统要求超过种样式,可在Android中轻松实现,通过声明样式属性完成。覆写应用主题中的字体样式,设置优雅处理浅色和深色调色板,减少重复。在应用基本主题中覆写所需字体样式属性。MDC组件响应主题级字体样式覆写。
了解MDC组件如何响应主题级样式覆写,查看按钮等组件使用的文本标签样式。通过交互式Android项目构建Material主题,修改颜色、字体样式、形状值创建自定义主题。MDC开发者文档更新,包含设计术语和属性默认值,例如按钮文档的“Anatomy and key properties”部分。查阅MDC源码获取默认样式实现细节。
确保自定义组件支持样式主题化,使用MDC属性复用,保持一致性。自定义View中使用MDC属性,复用attr name,引用MDC主题样式的属性作为值。实现和分享已创建的字体样式主题,提交错误报告和功能需求至GitHub。使用下方二维码向我们提交反馈。
借助 Material You 为您的用户提供个性化的流畅体验
随着Android 的发布与Material You的推出,用户体验正变得比以往任何时候都更加流畅与个性化。此新设计实现了动感的触摸涟漪、丝滑的滚动与更宽的布局等体验。动态配色成为了最大亮点,用户只需选择最爱的壁纸,整个手机体验从主屏幕到喜爱的应用都将随之变化,更好地展现个性。Material You让个性化成为Android的核心特性,我们将继续基于此构建生态系统。开发者们正信心满满地加入此旅程,在其应用中为用户带来更个性化的外观与风格。
随着更多搭载Android 的设备在未来几个月发布,原始设备制造商(OEM)合作伙伴将与我们保持合作,确保关键设计API(尤其是动态配色)在整个Android生态系统中保持一致性,为开发者提供保障,让用户享受无缝体验。Material团队发布了“自定义Material”文章,包含Codelab与指南,帮助用户开始使用View或Jetpack Compose。我们邀请您关注Material Theme Builder与Material Color Utilities的持续更新,获取设计与实施所需工具。
Google应用(如Gmail、相册、Chrome等)采用相同的工具与指南,在其品牌体验中讲述色彩故事。我们期待您也能加入此行列。当您深入了解颜色如何与用户选择相协调,并在应用中使用动态配色后,欢迎通过Material Android问题跟踪页分享您的反馈。也欢迎您关注“Android开发者”微信公众号,获取更多最新内容。
若您希望向我们提交反馈,或分享喜欢的内容与发现的问题,请点击这里。您的反馈对我们至关重要,感谢您的支持!
Android设计规范Material Design-Components
9月日,是不是很奇怪,昨天才说可能要有段时间不能更新了,但是为什么今天又更新了,主要是因为小编我昨天眼拙,搬文章的网站改版了,没有找到,就以为没有了~~拖出去赏五十大板~~顺便告诉大家一个好消息~~校正全部完成了~~昨天说了列表,今天就来说说列表的控制~~~主要还是讲了列表控制的用法~~列表控制列表控制用法列表控制分为如下四种:
状态主操作(包括文本字符串)次要操作次要信息列表标题的元素要容易分辨,首先要注意阅读顺序,所以,状态和主操作放在标题列表的左边。在这里,列表里面的文本内容也被认为是主操作的操作目标的一部分。
不要把两个展示图标和操作图标放在一起,比如复选框和头像
如果列表的主操作是做导航作用的,那么就不要使用icon。列表它本身以及它的上下文就已经可以让用户明白这个列表的用处是什么。
次要操作以及信息应该放在标题的右边,次要操作通常要和主要操作分开单独可点击,因为越来越多的用户希望每个图标都能触发一个动作。
列表控制的类型复选框(Checkbox)复g选框既可以被定义成是主操作也可以是次要操作。
类型: 主动作/状态
单独可点击
Desktop on hover only
在这个列表中,复选框是主要操作和状态标志符
类型: 次要操作
单独可点击
当控制一系列的变量而不仅仅只是控制一个变量的情况下,考虑使用开关控件来替换。
在这个列表中,复选框是次要操作
开关类型: 次要操作
单独可点击
重新排序类型: 次要动作
通常都是单独可点击,视当前列表所处的模式而定。
该动作允许用户给列表中项通过拖动变换位置。通常,这个按钮出现在列表编辑的模式下。
展开/折叠类型: 次要动作
单独可点击
垂直展开或者折叠列表来显示或者隐藏当前列表
Leave Behinds类型: 其他
Leave-behind 是在当某一项列表被滑开之后的操作提示。Leave-behind可以被转换成一项操作。
无论从哪个方向滑动列表,都会出现操作图标。滑动了之后,操作图标就会居中显示于列表空白处。
不推荐的做法:导航列表控制通常情况下,列表本身的内容就已经隐含了导航信息,因此,列表里面就不需要额外的图标。
查看更多类型: 主要操作(连同行内其他内容)
非单独可点击
点击之后跳转到与当前列表相关详细信息的页面,通常这都是一个新的页面或者面板。
菜单控制的类型选中类型: 状态
非单独可点击
仅适用于菜单。用来表示当前列表是否通过不同的操作之后被选中。
内联信息类型: 次要信息
非单独可点击
仅适用于菜单。内联信息是列表中一小段文字用来提供当前标题相关的信息或者提示,比如快捷键。不能被删除。
非常感谢这些辛苦翻译的小伙伴!! 原文:List controls翻译:leiweibo校对:cxytomo
文章转自: 学ui网发布高质量ui设计教程和设计分享,希望打造一个最好的ui学习教程平台!
APP截图站:app.xueui.cn海量APP截图,让你灵感爆发!