文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material design无需照搬Google

最近，我们决定替换一下我们常备的邮件app原型，换成更迷人、跟上时代的东西——其中考虑采用了Google的material design原则。 但我们注意到。...尽管关于设计趋势的讨论，都倾向于将渐变、投影和拟物化融为一体， 于是，我们向用户展现了引人注目的渐变色，以示区分——包括app主图标中的条纹。...但颜色不必强烈反差来满足material的标准、达成目的——只要意图鲜明就可以了。 我们的邮件app最后用了相对简单、接近的配色，采用投影和渐变来区别于Google，同时创造并传达其意义。 字体 ?...Google Fonts上对的Roboto描述 表现了他们试图让它适用于所有人——他们用了少量词句描述，比如混搭、人文主义还有几何学。...Google的动画效果能给人启发，让人思考事物相互间如何关联与转变，UI元素如何帮助用户接受与登录，界面元素如何取悦用户（而非令他们分心）。 但要确保它最终确有启发性。

1.1K60

根据 OS 设计你的应用

极简设计 & 功能： iOS 的设计更专注于原始功能而非外观。简易的图标和布局最大程度上减少了用户使用手机时的认知成本。...第三，Material Design 常用一种类似“汉堡”的图标表示菜单栏，而 Apple 不常使用这种导航方式。...在这种情况下，产品设计人员的关注点从品牌特点转向了更贴近平台设计准则（因为用户习惯于自己使用的平台习惯）。他们更熟悉自己所使用平台的设计规则，所以一个专门为平台考虑的设计使他们更快接受你的应用。...这种对界面元素的应用不仅使两个平台上的功能保持高度一致，而且还符合各自的界面设计模式。 动图 ?...面向品牌的方法 专注于品牌而忽略平台规定的准则创建 UI 是最快，最容易，也是最经济的方法。这些 UI 组件将会自由的被设计创建，从而给予用户更个性化的的设计和交互体验。

1.3K110
您找到你想要的搜索结果了吗？
是的
没有找到

纯干货！谷歌MD深色主题设计规范详解（附Sketch官方文件下载）

但是在深色主题下，原本的光影关系就发生变化了，不同高程下的元素所对应的阴影程度也不一样。 元素越高，对应的背景被照亮的程度就越轻微 前景元素越高（它在隐喻层面上就越接近光源），表面就越亮。...1.元素控件层 2.覆盖叠加层 叠加层的另外一个优势在于，它可以让人更加便捷的分辨不同组件之间的高程，并且可以更容易观察到阴影。...这个 UI 界面中主色和次要色的变体。 强调色 在深色主题当中，深色的背景和元素占据了 UI 的绝大部分。...文本和图标色彩 当文本、图标等元素，被置于背景或者某个控件上方的时候，为了进行区分的时候，所应该使用的色彩。 在默认情况下，深色主题下的被置于色块上的文本和图标元素，色彩是以黑白两色为主。 ?...深色 UI 下使用文本和小图标时的基准色。

9.5K10

分享八个免费的Vue图标库，轻松修饰你的应用

/vue-awesome 里面包括数千个高质量，可自定义的图标，Vue-awesome将Font Awesome带入到Vue中，使开发者可以通过单个组件访问所有的免费图标。...Vue项目中使用Material Design 图标 该库不仅有出色的文档，而且用这些图标入门很容易。...Vuetify拥有100多个组成元素，带有响应式网格系统，并完全支持事件处理。...与其他库相比，它的内置图标库（Feather）也是一个巨大的特点。 官网：https://at-ui.github.io/at-ui ?...6. iView 这个我觉得就算我不介绍也有很多人知道，这个库在平时的开发中经常遇到，而且它也内置了许多组件和图标，同时也对不同的字体，图标大小，元素大小有良好的支持 官网 ：https://www.iviewui.com

6.9K21

简单了解下无障碍设计模式

Material design 的内置的无障碍功能将帮助你的应用适应所有用户。本节内容主要适用于移动端 UI 设计。有关设计和开发完全无障碍的产品的详情，请访问Google 无障碍网站。...为了使具有运动和视觉敏感性的用户能舒适地使用界面，请遵循 Material Design 运动规范，该规范支持 W3C 的以下运动指南： 如果内容持续移动、滚动或闪烁的时间超过 5 秒，则会暂停、停止或隐藏...样式 布局 Material Design 的触摸目标指南使那些无法看到屏幕、或者运动不灵活的用户能够点击应用中的元素。 触摸目标 触摸目标是屏幕中响应用户输入的部分。...使 UI 元素的标签可视化 屏幕阅读器用户需要知道屏幕中哪些元素是可以点击的。...要使屏幕阅读器大声朗读出组件的名称，请向组件（如按钮、图标、仅含图标不含可见文本的 Tab 选项卡）添加 contentDescription 属性。 标签化 UI 元素 1.

4.7K40

不懂设计的产品不是好开发

然而，Material指南允许我们定制UI组件的颜色，以增加应用程序中的品牌辨识度，并使设计师同事们感到高兴。例如，我们可以选择卡片的颜色作为primary color，以更加强调品牌。...警告，和接近目标是与黄色相关的。 安全、积极变化、达到目标与绿色相关。 有时我们需要比交通灯颜色更多的颜色。在不同的背景下挑选颜色通常是开发者失败的地方，或者说是感到压力很大的地方。...根据Material指南，在暗色主题中，随着elevation的增加，表面的颜色会变得更浅。例如，在暗色主题中，背景色应该比card和sheet的颜色有更低的值。...比起光栅图像，我更喜欢矢量图像，因为它们是可伸缩的，而且尺寸更小。 Material图标也可以在Web和Flutter项目中作为图标字体使用。...考虑到品牌形状，ATA将使用圆形图标，Biohack将使用尖锐图标，Codeland将使用填充图标。 Conclusion 在这篇文章中，我解释了主题属性和相应的Material设计指南。

2.5K20

PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

Material Theme UI 主题界面插件 Material Theme UI主题界面插件，旨在提供基于 Material Design设计语言的用户界面主题。...主要功能包括： 外观样式： Material Theme UI 插件会为代码编辑器添加 Material Design 风格的外观样式，包括按钮、边框、工具栏等元素，以及配色方案。...增强用户体验： Material Theme UI 的目标是提供一种清晰、现代的用户界面，从而增强用户的使用体验，使编辑器更加舒适和易用。...Theme UI更改完主题后字体会和默认大小不符，需要在Editor—> Color Scheme—>Color Scheme Font中更改字体大小 Atom Material Icons美化图标插件...主要功能包括： 图标替换： Atom Material Icons 插件会替换 Atom 编辑器中原有的文件类型图标、文件夹图标等，使用 Material Design 风格的图标。

2.1K30

移动体验设计6大禁

是为了使我们的生活更方便。但当一个应用无法满足这一要求时，用户肯定就会离它而去。一个应用的成功是受多种因素影响的，其中整体移动用户体验是最重要的影响因素。绝佳的用户体验是一个应用程序成功的关键。...1、请勿盲目模仿其它平台的UI元素和字体 当你在安卓或ios平台上创建应用时，不要从其他平台上照搬有鲜明主题的UI元素，也不要模仿它们的特定行为。...安卓中的UI元素（上）和ios中的UI元素（下） 相比于Material design，ios应用通常外观扁平，不使用厚度和阴影。...iOS版也有一个纯文本样式的按钮，但它与安卓的全大写字母不同，并且字体更纤细。 ?...安卓常用功能图标（上）ios常用功能图标（下） 3、不要把网站的体验复制到应用程序上 用户对移动应用的交互模式和界面元素有特殊的期待。

2.1K130

Material 还是扁平化？开发者还有第三个答案

只不过，Apple更收敛，谷歌在动画、图标、色彩上相对丰富一些。 极简化设计让用户只需关注内容本身，设计师必须克制表达欲望，产品团队则要控制业务诉求，一切都要为用户需求让步。...有信App采取极简设计，让UI本身承载的信息流足够轻，正如其给图标的新名字“氢-icon”所表述的意境一样，用户聚焦在沟通所需的信息本身。...它的图标设计遵循了Material Design的“轻量级拟物化要求”，辅以文字描述，让用户一看就明白，还采取了“断点设计”起到画龙点睛的效果。...就豆瓣App和有信App的整体UI来看，豆瓣App设计拟物化设计更多一些，更丰富；有信App设计则比扁平化设计还要扁平，更极简。 极简设计是未来。...有信App同样没有拘泥于Material Design或者扁平化设计的条条框框，而是进行了自我演绎，寻找更适合自身和更贴合用户的设计语言。

98260

新Sketch图标背后的故事：如何为Big Sur重塑风格

“我们试图探索尽可能多的想法，看看我们可以用新样式做什么？” 上个月，我们发布了Mac应用程序的版本Sketch 70，其中包含针对macOS Big Sur的UI更新。...这些是第一个在图标中包含Sketch UI元素的想法。普雷克斯（Prekesh）尝试在菱形和侧边栏中增加一些透明度。 随着概念工作的不断进行，窗户和钻石的隐喻一直存在。...随着工作的进展，两个设计映入了我们的眼帘，两者的背景相似-一个使用与我们目前的钻石非常接近的元素，另一个使用更立体的方法。 自从图标重绘工作开始以来，Prekesh还致力于开发新的3D钻石版本。...钻石本身也是一种传承-Prekesh对图标进行了重新绘制，以改善对比度并使其更具活力。另外，新的，更深的阴影使它感觉好像真的在UI前面浮动。...最后，团队决定设计一种更接近Xcode的蓝色macOS图标的设计。 “我们的实验版本始终包含我们正在开发的最新功能，Glenn （设计团队的另一位成员）想到尝试一些表明它确实在“那里”的东西。

78330

动效设计原理:从卡通动画到UI动效 - 腾讯ISUX

在这种情况下，第一步的元素是图标，第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接，且没有前后关联。如果用户第一次使用Windows，这样的界面跳转需要理解一阵子。...由于没有突然的视觉变化，动画降低了用户被UI界面吓到的机会，从而减少了不安全感。因此，使用动画不仅有助于用户理解界面，提高使用效率。而且还使界面的体验更愉快更舒适。...所以白雪公主这个角色，却因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。...(白雪公主因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的，而白雪公主则特征不明显。...和卡通一样，UI界面必须让用户理解，并在必要时突出一些细节。采用夸张的方式，使UI界面中的某些对象可以更容易理解，更加“现实”，从而使UI界面更吸引人。 (在图片社区项目中，我们对通知使用了动效。

1.7K20

动效设计原理:从卡通动画到UI动效

在这种情况下，第一步的元素是图标，第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接，且没有前后关联。如果用户第一次使用Windows，这样的界面跳转需要理解一阵子。 ?...由于没有突然的视觉变化，动画降低了用户被UI界面吓到的机会，从而减少了不安全感。因此，使用动画不仅有助于用户理解界面，提高使用效率。而且还使界面的体验更愉快更舒适。...所以白雪公主这个角色，却因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。...(白雪公主因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的，而白雪公主则特征不明显。...和卡通一样，UI界面必须让用户理解，并在必要时突出一些细节。采用夸张的方式，使UI界面中的某些对象可以更容易理解，更加“现实”，从而使UI界面更吸引人。 ? ?

2.6K80

7个设计师必知的图标设计原理，收藏了！

Transit移动应用中的图标 稍作调整将带来很大的改进： ? 调整后的剪贴板图标 处理多个形状时，请在它们之间留出足够的空间。更细更多的笔触，将使图标更复杂，更难以阅读。...-设计师会进行类似的调整以平衡图标。要更正上面的示例，请稍微移动元素： ? 所以，请不要仅仅相信数据，也要相信你的眼睛。...004.简洁 谷歌的Material Design在其系统图标指南中很好地说明了，下面的图明显过于复杂了： ? 过于复杂的船形图标（来源：Material） 下图就是很好的表现方式： ?...苹果应用程序图标 005.一致性 为了使图标家族达到和谐，请始终保持相同的样式规则。 在iOS 13之前，Apple的图标具有各种笔触，填充和大小： ?...首先要清楚，使图标可识别和可读。切勿牺牲图标代表的清晰度。 •简洁。使用尽可能少的细节。每笔动作都要简洁明了，以传达所要表达的本质。 •风格。

1.2K10

程序员看过都说好的资源网站，你懂得！

Palette 5、Material UI 6、Mbitson 7、Material UI Colors 8、Paletton 9、Adobe Color CC 10、Coolor 七、图标篇 1、Iconfont...边框花纹素材、艺术字、主图… 网站：http://588ku.com/ 2、90设计网   90设计是专注电商设计的淘宝素材库,设计交流、学习与分享一体的平台,让电商设计(淘宝美工)找灵感和素材更效率...色彩搭配的网站 网站：http://peise.net/tools/web/ 2、UIgradients   UIgradients是一个提供免费渐变色效果的站点，以分享美丽渐变色彩为主，里面接近上百种渐变配色方案...网站：https://www.materialpalette.com/ 5、Material UI   Material UI是一个收集材料设计颜色，社会和平板UI颜色，地铁和HTML颜色，材料设计图标和...mcgpalette0=%233f51b5 7、Material UI Colors   Material UI Colors是一个材质UI颜色，调色板材料设计网站。

4.3K10

静态网页托管平台的选择

Material Design Lite Material Design Lite (MDL)是谷歌根据自己的Material Design设计风格开发的精简版Web UI框架, 虽然市面上有很多基于material...MDL的官网和git仓库, 以及material的官方字体图标: https://getmdl.io/ https://github.com/google/material-design-lite https...jinhengyu.github.io/ 看完之后如果不够舒适…其实也可以在此之上二次开发, 不用标记版权, 因本身就是我一时兴起的作品哈哈, 更多截图请看进入demo目录 卡片布局 卡片布局(Card Layout)是经典的UI..., 你之后在填写data.json的时候有几点需要注意: 标题不能太长, 控制在2~20个字符之间 背景图可压缩, 但最好以淡色为主(为了突出logo) logo请裁剪成透明png, 同时宽高比尽可能接近...data.json中存放着所有的数据, 也就是所有的url, 源码拿到手之后修改下这个文件之后就能上手用了, 为了方便我使用js的形式描述data.json: // data.json是一个列表对象, 其中每一个元素是一个

1.3K30

【软件开发规范七】《Android UI设计规范》

Material Design相关 Material Design，中文名：质感设计，是由 Google 推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致...2.3 动画 Material Design 重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。...注意避免以下问题： 不要给彩色元素加投影 层叠不要超过两层 折角不要放在左上角 带投影的元素要完整展现，不能被图标边缘裁剪 如果有折痕，放在图片中央，并且最多只有一条 带折叠效果的图标...，表面不要有图案 不能透视、弯曲 ** 小图标 ** 优先使用material design默认图标。...** 提取颜色 ** ​编辑 Android L可以从图片中提取主色，运用在其他UI元素上。

4.9K20

为啥你的UI界面感觉乱？这7个常见问题一定要避免

适当的填充和间距可使布局看起来整洁有序，同时使读者更容易阅读和理解信息。 ‍ 在逻辑块周围应设置相同大小的空间（例如，在顶部和底部以及左侧和右侧）。...这将把重点放在最重要和最大的元素上。最大的文本（标题）周围有较大的空间。但是这个空间应该更接近跟随它的相关元素。 ?...成熟的设计师更倾向于克制的做设计。比如将文字缩小到8px甚至更小，使用浅灰色阴影（因为它看起来不错）。虽然它更适合我的UI界面布局，但是它忽略了有视力障碍的访客。...这是因为有时为了使元素形成对比，您需要使用空格分隔它们。 ‍ 留白对于使您的内容易于用户阅读很重要。当然，留白可能会被不正确地使用：有太多的留白或将太多的内容塞满了一个很小的区域。...这就是为什么选择正确的视觉图像以符合元素含义的原因非常重要。 您需要使用非常简单且通用的图像来讲述故事，每个人都可以理解。您需要将这些图标与UI的整体样式进行匹配。

1.2K40

这四种最最常见的按钮类型，设计师必须掌握

按钮可能是现代图形用户界面中最常见的功能元素。尽管它很受欢迎并且很简单，但这个 UI 对象可能很难设计。 本文将为大家介绍 4 种不同类型按钮的美学以及使用它们的上下文。...这意味着如果你所有的 UI 元素都是方形的，那么按钮也不应该是个例外。 视觉一致性是创造良好用户体验的关键。 提供视觉反馈。提供有关交互的视觉反馈至关重要。...它使幽灵按钮适用于深色和浅色主题。 浅色和深色背景上的幽灵按钮 3.单一图形按钮 顾名思义，仅图标按钮是没有标签的按钮；它仅由图标表示。...在悬停时显示工具提示以描述图标按钮 4.悬浮按钮 悬浮按钮（FAB-Floating Action Button），是一种由 Google Material Design 推广的按钮。...但大多数时候，最好避免这样做，因为它会使 UI 看起来更复杂。相反，最好坚持一个简单的方法——一旦用户点击/轻敲 FAB，他们应该触发主要操作。 FAB 不一定是一个完美的圆圈。

3.3K10

学UI时卡在了动效这关？看谷歌设计师如何为你出招！

动效还可以加持到图标、Logo、插画等元素上，来赋予 UI 以个性，但是 UI 本身的可用性的优先级是一定要高于视觉和动效的表达。...文本、图标、图像等UI元素被置于一个容器内 在 UI 界面当中，如果一个转场动效牵涉到诸如按钮、卡片或者列表，那么这种动效通常都会基于这些容器来进行设计。...2、UI元素在容器内缩放，过程中基于宽度自适应调整。容器内的元素被固定在容器的顶部，会随着顶部的延伸而自然延伸，并且所有元素都会被遮盖在容器内。这样的设计，让元素和容器之间的相互关系更加清晰。 ?...引人瞩目的动效，通常更加适合和小图标、LOGO、加载器和空状态等元素或者界面搭配。...缓动本身描述了动效的加速和减速的速率特征，绝大多数的动效可以直接采用 Material Design 中的标准缓动就行了，这是一种不对称的缓动类型，这种缓动的特征是开始加速快，然后较为缓慢地减速，这样会让用户更容易注意到整个变化的结果

1.4K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券