流畅性 本篇是基于 FDCon2019 上《让你的网页更丝滑by刘博文》的复盘文。...Time Slicing 下面是另外一种使页面流畅的方法 —— Time Slicing(时间分片)。 观察 Chrome 的 Performance, 火焰图如下, ?
Material Theme UI 主题界面插件 Material Theme UI主题界面插件，旨在提供基于 Material Design设计语言的用户界面主题。...增强用户体验： Material Theme UI 的目标是提供一种清晰、现代的用户界面，从而增强用户的使用体验，使编辑器更加舒适和易用。...Theme UI更改完主题后字体会和默认大小不符，需要在Editor—> Color Scheme—>Color Scheme Font中更改字体大小 Atom Material Icons美化图标插件...Atom Material Icons美化图标插件，它提供了一套 Material Design风格的图标集，用于美化编辑器界面并提升用户体验。...主要功能包括： 图标替换： Atom Material Icons 插件会替换 Atom 编辑器中原有的文件类型图标、文件夹图标等，使用 Material Design 风格的图标。
前言 今天大姚给大家分享一款基于Material Design风格开源、免费（MIT License）的Avalonia UI控件库：Material.Avalonia。...Avalonia介绍 Avalonia是一个强大的框架，使开发人员能够使用.NET创建跨平台应用程序。...它使用自己的渲染引擎绘制UI控件，确保在Windows、macOS、Linux、Android、iOS和WebAssembly等不同平台上具有一致的外观和行为。...这意味着开发人员可以共享他们的UI代码，并在不同的目标平台上保持统一的外观和感觉。 项目特点 功能描述：提供了一套完整的Material Design样式和控件，用于定制Avalonia应用程序。...易于配置：支持在设计时和运行时轻松配置颜色板，遵循Material Design指南。 图标支持：全面支持Material Design图标包（需单独安装，以保持库体积小巧）。
极简设计 & 功能： iOS 的设计更专注于原始功能而非外观。简易的图标和布局最大程度上减少了用户使用手机时的认知成本。...第三，Material Design 常用一种类似“汉堡”的图标表示菜单栏，而 Apple 不常使用这种导航方式。...在这种情况下，产品设计人员的关注点从品牌特点转向了更贴近平台设计准则（因为用户习惯于自己使用的平台习惯）。他们更熟悉自己所使用平台的设计规则，所以一个专门为平台考虑的设计使他们更快接受你的应用。...这些针对平台的设计使新用户很容易能理解这些交互该如何完成。 Spotify Spotify 是一个流行的音乐播放应用，它有着针对品牌很鲜明的设计。...面向品牌的方法 专注于品牌而忽略平台规定的准则创建 UI 是最快，最容易，也是最经济的方法。这些 UI 组件将会自由的被设计创建，从而给予用户更个性化的的设计和交互体验。
是为了使我们的生活更方便。但当一个应用无法满足这一要求时，用户肯定就会离它而去。一个应用的成功是受多种因素影响的，其中整体移动用户体验是最重要的影响因素。绝佳的用户体验是一个应用程序成功的关键。...1、请勿盲目模仿其它平台的UI元素和字体 当你在安卓或ios平台上创建应用时，不要从其他平台上照搬有鲜明主题的UI元素，也不要模仿它们的特定行为。...安卓中的UI元素（上）和ios中的UI元素（下） 相比于Material design，ios应用通常外观扁平，不使用厚度和阴影。...iOS版也有一个纯文本样式的按钮，但它与安卓的全大写字母不同，并且字体更纤细。 ?...因此你需要努力去达到这些期望，并且使你的应用程序更加令人愉悦，而不是令人厌烦。提高用户体验不是一次性的任务，它是一个持续性的工作。
然而，Material指南允许我们定制UI组件的颜色，以增加应用程序中的品牌辨识度，并使设计师同事们感到高兴。例如，我们可以选择卡片的颜色作为primary color，以更加强调品牌。...根据Material指南，在暗色主题中，随着elevation的增加，表面的颜色会变得更浅。例如，在暗色主题中，背景色应该比card和sheet的颜色有更低的值。...在演示的应用程序中，我几乎把所有的UI组件都应用了形状，以达到演示的目的，这绝对是不推荐的。 截至目前，Material Design有两种形状样式：圆角和切角。...比起光栅图像，我更喜欢矢量图像，因为它们是可伸缩的，而且尺寸更小。 Material图标也可以在Web和Flutter项目中作为图标字体使用。...考虑到品牌形状，ATA将使用圆形图标，Biohack将使用尖锐图标，Codeland将使用填充图标。 Conclusion 在这篇文章中，我解释了主题属性和相应的Material设计指南。
/vue-awesome 里面包括数千个高质量，可自定义的图标，Vue-awesome将Font Awesome带入到Vue中，使开发者可以通过单个组件访问所有的免费图标。...Vue Material Design Github地址: https://github.com/robcresswell/vue-material-design-icons 这是一个很棒的库，它可以帮助你在...Vue项目中使用Material Design 图标 该库不仅有出色的文档，而且用这些图标入门很容易。...官网：https://vuetifyjs.com/ 在图标方面，Vuetify使用了Material Design和Font Awesome库。...与其他库相比，它的内置图标库（Feather）也是一个巨大的特点。 官网：https://at-ui.github.io/at-ui ?
下载：360,000+ 产品特色： 跨平台统一UI设计 精简的材料设计风格图标，按钮和布局 图像化构建 谷歌的宗旨之一是”Fast is better than slow”....而其将大目标细化分为更小的步骤巧妙地回避了外观的复杂性，使整体体验感觉更舒适。 值得庆幸的一点是，这样的效率并不都是以牺牲Airbnb的视觉吸引力为代价的。...下载：4,616,329 产品特色： Material Theming 智能选择常用回复 精致材料设计风格图标 新增侧边栏 Gmail作为日常生活中的常用邮箱工具，大家并不陌生。...作为2017年谷歌材料设计奖得主之一，momondo的安卓应用程序很好的展示了如何在手机应用程序中体现材料设计的基本原理。并且，跟随谷歌材料设计这个主题，也在不断激发新的安卓手机应用设计方向。...同一集的信息在不同设备上会有所不同，其响应式的UI设计适用于平板电脑，智能手表或手机屏幕。
Transit移动应用中的图标 稍作调整将带来很大的改进： ? 调整后的剪贴板图标 处理多个形状时，请在它们之间留出足够的空间。更细更多的笔触，将使图标更复杂，更难以阅读。...004.简洁 谷歌的Material Design在其系统图标指南中很好地说明了，下面的图明显过于复杂了： ? 过于复杂的船形图标（来源：Material） 下图就是很好的表现方式： ?...Telegram的图标简洁有趣： ? 电报图标 有时，UI图标会采用更具象的表现形式。这些Yelp图标是用来为用户展示热门食物搜索的一种令人愉快的方式。泰国食品图标中的虾非常精致： ?...苹果应用程序图标 005.一致性 为了使图标家族达到和谐，请始终保持相同的样式规则。 在iOS 13之前，Apple的图标具有各种笔触，填充和大小： ?...首先要清楚，使图标可识别和可读。切勿牺牲图标代表的清晰度。 •简洁。使用尽可能少的细节。每笔动作都要简洁明了，以传达所要表达的本质。 •风格。
从下面的对比图中，我们可以体会到两种设计语言的差异： Material Design 如果说拟真代表设计语言的一个极端，而扁平代表设计语言的另一个极端，那么Material Design则居于两者之间更偏右的位置...，：厚度无限薄（1dp），面积 无限大，能变换造型，也能按照规律移动 —— 你可以把它当做一张纸（事实上，Material Design 曾一度传说要改名为Quantum Paper - 量子纸）：...使用强调色 在大色块上绝对不要使用强调色，对动作按钮、开关或滑动条之类的组件应当使用强调色： 五、图标/Icon Google提供了适用于Material Design的图标字体，我们可以直接在前端样式表中使用...，只需要应用上面定义的material-icons样式： face 上面的示例创建了一个笑脸图标，face用来指定要显示的图标，也可以 使用其对应的数字编码...： 具体的图标名和编码，参阅Material Icons官网（需FQ）：https://www.google.com/design
Material Design 如果说拟真代表设计语言的一个极端，而扁平代表设计语言的另一个极端，那么Material Design则居于两者之间更偏右的位置： ?...二、材料/Material Material Design 里的材料/Material实际上是一种虚构出来的材料，：厚度无限薄（1dp），面积 无限大，能变换造型，也能按照规律移动 —— 你可以把它当做一张纸...五、图标/Icon Google提供了适用于Material Design的图标字体，我们可以直接在前端样式表中使用@font-face引用这些字体： ?...在页面中要使用图标字体，只需要应用上面定义的material-icons样式： face 上面的示例创建了一个笑脸图标，face用来指定要显示的图标...，也可以 使用其对应的数字编码： 具体的图标名和编码，参阅Material Icons官网（需FQ）：https://www.google.com
萧醇： 其实最一开始是把 Material Icons 作为对标对象的，当时 Material Icons 只有一套图标，其中部分图标为面型风格，部分图标为线性风格，杂糅在一起，没什么章法；而我想做的图标库两种风格一一对应...，这样在一些 UI 场景中可以用于状态切换，算是核心卖点。...RemixIcon 借鉴了 Material Icons 的尺寸标准，也是 24dp，但在此基础上，重新调整了它基准图形的网格关系，使得图标看起来更加「矮胖」一点，也更方正饱满。...圆角基准也从 2dp 改为了 1dp，同时统一了图形复杂度，所以相比于 Material Icons，RemixIcon 看起来风格会更统一、简约且精致硬朗一些。...发展到现在主要是靠缘分；我俩脸皮也都比较薄，性格使然，硬广不是我们的风格，而在推广和裂变方面又都不是很擅长。
免费下载 此模板使用MDBootstrap构建，是一个功能强大且免费的UI工具包，包含400多个素材UI元素，600多个素材图标，74个CSS动画，SASS文件，模板，教程等等。...完全响应式的设计使它可以在各种尺寸的屏幕上完面呈现。 2. MaterialKit -材料设计模板 ?...此模板使用MDBootstrap构建，包含500多个素材UI元素，600多个素材图标，74个CSS动画，SASS文件，模板，教程等。 4....包含400多个素材UI元素，600多个素材图标，74个CSS动画，SASS文件，模板，教程等。 5. Material Admin –后台管理模板 ?...免费下载 Material Admin是完全使用Bootstrap框架构建的免费管理模板，提供按钮、图标、表格、排版等基础组件。
只不过，Apple更收敛，谷歌在动画、图标、色彩上相对丰富一些。 极简化设计让用户只需关注内容本身，设计师必须克制表达欲望，产品团队则要控制业务诉求，一切都要为用户需求让步。...有信App采取极简设计，让UI本身承载的信息流足够轻，正如其给图标的新名字“氢-icon”所表述的意境一样，用户聚焦在沟通所需的信息本身。...它的图标设计遵循了Material Design的“轻量级拟物化要求”，辅以文字描述，让用户一看就明白，还采取了“断点设计”起到画龙点睛的效果。...就豆瓣App和有信App的整体UI来看，豆瓣App设计拟物化设计更多一些，更丰富；有信App设计则比扁平化设计还要扁平，更极简。 极简设计是未来。...有信App同样没有拘泥于Material Design或者扁平化设计的条条框框，而是进行了自我演绎，寻找更适合自身和更贴合用户的设计语言。
在Vue中使用UI框架是一个很好的组合，因为它使开发人员更加专注抽象通用组件，从而提供了一个可维护的、高效的开发过程。...Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。...他们现在正在加快步伐创建更复杂的组件，例如日期选择器或数据表，它们肯定会像他们当前的产品一样具有创造性。...Ionic 官方网站： https://ionicframework.com/docs/vue/overview Ionic 是最早提供 Vue3 支持的 UI 框架之一，Ionic 更倾向于移动 UI...，团队知道如何迎合和维护一个优秀的 UI 框架。
前言悬浮操作按钮（Floating Action Button, FAB）是一种在 Android 和 Material Design 中使用的 UI 元素。它用于触发特定屏幕的主要操作。...下面我们就来详细介绍一下还如何实现这个悬浮按钮需求。创建悬浮操作按钮如何 SwiftUI 创建一个类似 Twitter App 中的悬浮按钮。...示例运行截图如下：悬浮按钮位于屏幕的右下角接着，是需要实现需求中的第二步，使按钮与内容视图对齐到右下角。...示例运行截图如下：使悬浮按钮呈现圆形接着，是需要实现需求中的第三步，使悬浮按钮具有圆角形状，并在中心具有一个图标。目前的情况位置是正确的，但外观还不符合要求。...总结在本文中，我们学习了如何在 SwiftUI 中创建一个悬浮操作按钮，它是 Android 和 Material Design 中常用的 UI 元素。通过逐步实现悬浮按钮的各个特性来完成这个过程。
为了使开发者能够构建更加精美的 Flutter 应用程序，1.20 版本提供了多项 UI 增强功能，包括期待已久的: autofill 支持; 对 Widget 进行分层以支持平移和缩放的新方式; 新的鼠标光标支持...icon font tree shaking 会删除未在应用程序中使用的图标，从而减小尺寸。将其用于Flutter Gallery 应用程序时，我们发现它使应用程序大小减少了100kb。...和Cupertino图标的图标元数据，包括图标名称和预览图标; 这与我们自己用于 Android Studio / IntelliJ 和 VS Code 扩展的元数据相同；我们认为这在构建自己的工具时可能会觉得有用...Typesafe platform channels for platform interop 为了响应用户调查中插件作者的普遍需求，最近我们一直在尝试如何使 Flutter 与主机平台之间的通信对于插件和...随着性能的提高，新的和更新的小部件以及工具的改进，我们只能做到更突出。我们要感谢社区贡献者的数量不断增长，而且不断壮大，使每个 Flutter 版本都可以比以前的版本更大，更快，更强大。
小部件是用于构建UI的类。 小部件用于布局和UI元素。 撰写简单的小部件来构建复杂的小部件。 Flutter的布局机制的核心是小部件。...您在Flutter应用中看到的图像，图标和文本都是小部件。 但是你看不到的东西也是小部件，例如排列，约束和对齐可见小部件的行，列和网格。 您可以通过构建小部件来创建布局来构建更复杂的小部件。...本例中的其余UI由属性控制。 使用其color属性设置图标的颜色。 使用文本的style属性来设置字体，颜色，重量等等。...例如，您可能更喜欢ListTile，而不是Row，而ListTile是一个易于使用的小部件，具有前导和尾随图标属性以及最多3行文本。...您可能更喜欢ListView，而不是列，您可能更喜欢ListView，这是一种列状布局，如果其内容太长而无法适应可用空间，则会自动滚动。 有关更多信息，请参阅通用布局小部件。
下面介绍如何使用IDEA主题插件进行主题更新。 IDEA主题更换 1....IDEA主题插件——Material Theme UI 2.设置插件主题 3.Compact设置 4.高颜值ICON设置 5.看看最后的整体效果 1....IDEA主题插件——Material Theme UI Material Theme UI是一款主题插件，具有强大的主题更换功能，同时也拥有多方面的主题选择。...setting->Plugins->Material Theme UI 2.设置插件主题 在IDEA进行设置路径如下 File > Settings > Appearance & Behavior...安装如下插件 Atom Material Icons 安装好之后，可以根据个人喜好 ，选择自己喜欢的图标主题 5.看看最后的整体效果
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
