如何覆盖蚂蚁设计的cechkbox来使用字体可怕的图标？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

B端产品设计规范

B端产品，为什么需要建立设计规范的总结，如下图所示。二. 如何做好 B 端产品设计的规范？对于项目设计评审前，建议产品设计师，先理解功能逻辑和产品设计思维，构思产品设计解决业务的方案。...在蚂蚁中后台的网页设计中被大量使用到，正确的使用中性色能够让界面信息具备良好的主次关系，提升用户好的阅读体验。下方中性色板一共包含了从白到黑的 8 个颜色。如下图所示。...后台系统在字体选择，中文：微软雅黑；英文：Arial即可。标题类一律用Medium，以突出层级关系，让信息更清晰。原因：字重 Medium 兼容性更强，在用微软雅黑这种字体时也能较好的显示正文。...控件里的文字，尽量使用大小统一的字体属性。 “微软雅黑”为主，“宋体”为辅的使用原则，用加粗的方式表达加强突出效果。菜单标题菜单标题字体大小:最小取 16px，最大取 20px。...所有字体样式颜色组合需要尽量通过 3:1 的 WCAG AA 标准。图标的思考：如下图所示。图标现在是制作完成后，上传到阿里巴巴的字体图标库中。前端调用起来更方便，调整图标的大小和颜色就好。

4.2K4 4

前端必备，响应式Web设计的9项基本原则

随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现，而不是抗拒流畅的网页体验。...为了简单起见，我们将着重讲布局（当然，响应式设计远远不止于此，如果你想进一步学习，可以搜索蚂蚁大喇叭学习）。响应式设计vs适应式设计看似相同实则不然。...web字体vs系统字体想让自己的网站拥有炫酷的Futura或Didot效果吗？那就是用web字体吧。...位图vs矢量图你的图标是否有很多细节，并且应用了很多华丽的效果？如果是，那就用位图。如果不是，考虑使用矢量图。如果是位图，使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。...但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有很多曲线，那有可能会比位图还大，所以要明智取舍。

5771 0

您找到你想要的搜索结果了吗？

是的

没有找到

ps切图必知必会

将原型设计图进行还原,承接UI,最终实现产品经理意图,实现静态页面效果展现从UI设计师那拿到psd文档,进行切图,抠图,测量,简单的图片处理操作(更改字体,吸字体颜色等操作),利用web技术(html...方法二:使用自由变换(推荐使用):在空白区选一个空白矩形框—>ctrl+T–>选择性的覆盖即可 ?...http请求,当然有的小图标,如果用字体图标也是可以的,这样比背景图还要好方法一:新建一个画布,然后依次的将所扣出的图标复制粘贴到新的图层即可(复制粘贴的图标,要把背景色去掉为透明背景) 方法二:新建一个画布...PS工具软件对文件操作,无论设计稿是psd文档还是png图片,利用ps软件的工具栏和快捷键,都可以实现快速的切图,对于切出来的图,保存格式也有所认识,以及如何抹掉图片中文字,添加前景色，和后景色,等简单的处理...,将UI设计师给出的材料(psd)文档,利用web技术将产品实现从0到1的过程,增强用户体验,可视化如何使用PS工具软件对文件操作,工具栏结合快捷键的使用如何从一张图片中切图,保存正确格式图片格式

2.9K2 0

UI & UX 小提示合集 -- 第一集

确保你使用的所有图标的风格一致如果界面上出现了图标，就要确保风格完全一致：样式，线种，轮廓，阴影。不要混搭。 4....界面中只用一种字体完全可行 -- 忽略酸民的偏见设计中只用一个字体绝对是可以的，并且这么做还可以帮助你达到更一致，更干净的设计效果。忽略掉“必须使用至少2种字体”那类声音。...你想要快速找到优质的字体组合吗？用Superfamilies 天上那是一只鸟吗？是个飞机吗？不是，是Superfamily！...用不易察觉的覆盖图层来增加文本和图像之间的对比度根据文本在图像上的位置，你可以使用覆盖整个界面的颜色叠加图层，也可以使用更细微的（从下到上，或从上到下）渐变叠加图层，来使两个元素之间的对比更加强烈。...设计的时候，情况允许的话，可以尝试使用文本的方式帮助用户理解你的设计，不要总是仅依赖图标。

4112 0

UI&UX17个小技巧合集

确保你使用的所有图标的风格一致如果界面上出现了图标，就要确保风格完全一致：样式，线种，轮廓，阴影。不要混搭。 4....界面中只用一种字体完全可行 -- 忽略酸民的偏见设计中只用一个字体绝对是可以的，并且这么做还可以帮助你达到更一致，更干净的设计效果。忽略掉“必须使用至少2种字体”那类声音。...你想要快速找到优质的字体组合吗？用Superfamilies 天上那是一只鸟吗？是个飞机吗？不是，是Superfamily！...用不易察觉的覆盖图层来增加文本和图像之间的对比度根据文本在图像上的位置，你可以使用覆盖整个界面的颜色叠加图层，也可以使用更细微的（从下到上，或从上到下）渐变叠加图层，来使两个元素之间的对比更加强烈。...设计的时候，情况允许的话，可以尝试使用文本的方式帮助用户理解你的设计，不要总是仅依赖图标。文章转载自uxdesign.cc，由摹客团队翻译。

4544 0

该从Sketch切换到Figma吗？两款工具深度对比

这就是它与设计标记完全一致的工作方式，您可以分别保存颜色，字体，阴影，并使用想要的样式的任何组合。这真的很有帮助，因为如果我决定更改颜色，在Figma中，如果您在一个地方改变它，它将在所有地方改变。...例如，如果您有一个带图标的按钮，则必须创建2个符号，一个带图标，另一个不带图标。 Figma组件有些不同，您可以更改替代，但也可以修改组件层，以及图层的属性。 ?...Figma组件实例，可以删除图标层并更改border-radius 003.设计协同如果多个设计师进行协作，那么选择合适的工具就非常重要。...Figma网站的屏幕截图让我们看看我们可以用Sketch做什么，我发现Sketch在这方面要好得多，Sketch有一个名为abstract的插件，它允许设计人员拥有版本分支系统，类似Github（针对开发人员...我个人更喜欢这种工作方式，但是有些设计师觉得它太复杂了。 004.设计交接我们如何将设计稿交付给开发人员呢？

3.1K3 0

Jekyll 社交图标集合创建

今天我们就来讲讲如何自己定制一套社交图标集合。...字体图标，顾名思义就是把所有的图标都变成了字体编码一样，只要我们在网页中引入字体图标文件就可以像用 Unicode 一样使用字体图标了。这种方式最好的一点就是，像操纵字体一样设置字体图标的样式。...当我们用 Lighthouse 类似的工具来测试网页的性能时，就可以很容易地发现请求代码的使用率情况。如果我们采用多个字体图标集合并用的方案，那么代码实际使用率可能就会很低。...如果我们觉得自己来手动管理、手动更新字体图标文件太麻烦了，其实也可以用阿里的 Iconfont 或者其他类似工具来在线管理字体图标集合。...点击收起在线链接旁边的下箭头可以看到预览字体，点击预览字体即跳转到在线预览页面，如下所示。这里提供了三种方式来使用创建好的社交图标集合，目前平台推荐的是Symbol 引用方式。

2K4 0

UI&UX17个小技巧合集

确保你使用的所有图标的风格一致如果界面上出现了图标，就要确保风格完全一致：样式，线种，轮廓，阴影。不要混搭。 4....界面中只用一种字体完全可行 -- 忽略酸民的偏见设计中只用一个字体绝对是可以的，并且这么做还可以帮助你达到更一致，更干净的设计效果。忽略掉“必须使用至少2种字体”那类声音。...结合字重，大小和颜色的组合使用，一个字体也完全可以创造出接受范围内的效果。 5. 空白是界面设计的好朋友，大量使用它，并且用好它空白空间，或者叫做负空间，你肯定已经非常熟悉了。...你想要快速找到优质的字体组合吗？用Superfamilies 天上那是一只鸟吗？是个飞机吗？不是，是Superfamily！...用不易察觉的覆盖图层来增加文本和图像之间的对比度根据文本在图像上的位置，你可以使用覆盖整个界面的颜色叠加图层，也可以使用更细微的（从下到上，或从上到下）渐变叠加图层，来使两个元素之间的对比更加强烈。

2673 0

高清ICON SVG解决方案（上） - 腾讯ISUX

，所以iconfont的这种表现效果很多用户和设计师无法接受。...上面的demo分别在不同浏览器下的效果，第一行用的是iconfont实现，下面三行都是用的SVG实现的图标，只是调用SVG时的方法不同：第一行是用inline SVG，将SVG直接写在html中来使用，...如何绘制高质量ICON 在上面的demo中眼尖的同学应该可以看出在FF下，inline SVG图标有一个出问题了，然而Chrome却是正常的： ?...iconfont.cn出了一个AI模板，其实这套模板就是给AI画了一套辅助线，帮助设计师按照栅格画ICON，我前面的案例就是用的他们提供的模板画的图标，第一个没问题，但是第二个出问题了。...---- 小结：本文介绍了字体渲染机制，并分析iconfont出现锯齿的底层原因，再到如何绘制高质量SVG ICON的步骤和输出了一套严谨的AI绘制图标模板。

3.2K4 0

Ways to Use Icons on Android (1)

3.依赖使用方式依赖使用方式是通过依赖一些封装好的第三方库来使用Material Design图标，例如项目MaterialDesignIcons和Iconify。...等图标都封装成简单可用的字体，通过自定义的TextView去解析自定义字体的文本来显示出图标。...该项目的设计非常好，易于扩展，它将来自Google的Material Design图标和来自Community的Material Design图标分拆成两个独立的模块以供使用。...[简易版本的自定义字体的TextView可以参考这篇文章] （5）如何扩展？...这个时候我们可以通过对Iconify进行扩展来实现，但是扩展之前我们需要制作出自己的图标字体文件，这个该如何制作呢？请看下节！

4652 0

Web开发人员在移动端的典型UX错误都有哪些？

例如，绿色通常与“是”，“前进”或“允许”相关联; 红色通常表示“不”，“停止”或“禁止”; “+”图标通常表示添加内容。尽量避免不能立即理解的符号，或者可以解释为两个不同的符号。...3.缺乏一致性另一个常见错误是在一种风格中使用了几种不同的字体和配色方案。没有必要重新发明轮子。习惯一种风格更容易，然后了解应用程序其他地方剩余元素的用途。...在此期间，一个人会对应用程序产生某种印象并决定是否在将来使用它。“哪里？”，“如何？”，最重要的是，“为什么？”是不应该出现的问题。...颜色方案，阴影或不同风格的存在可以将图标或按钮变成超现实（或简单可怕）的东西。正如一位聪明的人曾经说过的那样：“一个好的设计立即可见，一个优秀的设计是看不见的。”...无论公司活动的规模如何，基本规则都保持不变：您进行的测试和分析工作越多，结果就越好。

3732 0

在网站或桌面应用使用Font Awesome图标库

黑白的也好，彩色的也罢，如果用传统的“css + 图片”的方式来制作这些icon，我估计你至少得雇佣一个专业的设计师吧。一般的程序猿，包括前端程序猿，估计只能去搜索了，不会自己拿ps画。...比如，twitter用到的各种小icon：这种情况下，使用字体来实现图标就有很多优势：字体文件小，一般20-50kb；容易编辑和维护，尺寸和颜色可以用css来控制；透明完全兼容IE6；如何将icon...最关键的是要将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体，这并不是很麻烦。...，看具体情况*/ } 嗯，就是用实际元素占位，用伪元素+content属性显示icon，然后覆盖到实际元素上面，之后我们修改某个icon只需要更改css样式就可以了。...而对于字体，虽然WPF是直接支持的，但由于字体图标其特殊性，要将其显示为图标还是需要费点劲的。本文这里就以Font-Awesome为例，介绍一下如何在WPF中使用字体图标。

2K2 0

适合前端开发和UI 设计的20多个最佳 ICON 库

在该网站上，我们可以找到有关如何启动和自定义产品的完整文档和各种指南。我们只需将链接粘贴到网站上即可开始使用该产品。...Iconmonstr通过其强大的搜索功能使搜索图标变得简单。我们还可以将自己喜欢的图标保存在个人收藏夹中，以备将来使用。...每个图标包都有详细的授权许可，这样设计人员和开发人员就可以确切地知道如何使用图标。用户还可以定制自己的图标字体。...它们首先被设计成一种图标字体，所以它是作为一种web字体嵌入的。...它提供了超过400万个图标，为用户提供了各种搜索选项，包括图标格式，价格，大小，背景等。还有多个月度付款计划-从$9到$49。我们也可以选择“随用随付”系统。

2.8K2 0

Flutter 上默认的文本和字体知识点

我们都知道在 Flutter 中可以通过 fontFamily 来引入第三方字体，例如通常会将 svg 图标转换为 iconfont.ttf 来实现矢量图标的入，而一般情况下我们是不会设置 fontFamily...来使用第三方字体，那默认情况下 Flutter 使用的是什么字体呢？...会出现这个疑问，是因为有一天设计给我发了下面那张图，问我 “为什么应用在苹果平台上的英文使用的是 PingFang SC 字体而不是 .SF UI Display ” ？...正如下图所示，它们的 G 字母在显示效果上会有所差异，比如平方的 G 有明显的转折线。 ? image 这时候我不禁产生的好奇，在 Flutter 中引擎默认究竟是如何选择字体？...具体分水岭就是 20pt , 即字体小于 20pt 时用 Text ，大于等于 20pt 时用 Display 。

3.3K1 0

创建华丽 UI 的 7条规则第二部分 (2019年更新)

方法二：文本覆盖整个图像将文本放在图像上最简单的方法就是用遮罩将图片整个覆盖，如果原始图像不够暗，可以在整个图像上添加半透明的黑色图层。下图是一个时下流行的、用半透明黑色遮罩覆盖图片的示例。 ?...如果打开发工具并删除覆盖层，将看到原始图像太亮，对比度太大，文本难以辨认。但是用黑色半透明的图层覆盖，看上去就没问题了! 这个方法用在缩略图和小的图片上同样好用。 ?...本节没有策略或内容需要学习，只列出一些不错的免费字体供你下载和使用。这份学习指南是给学习者的，外面有超多免费的字体，所以就让我们用吧。...作者还没有把它打包成图标字体，但是有人在 Github 上放了一个字体版本，可以很好地跟踪原始设置（如果你只使用了套装中的10或20个图标，没有必要加载整个包）。...这意味着我总能看到别人是如何做到的，并从中挑选最好的。但是我们要从哪里挑呢？这里有： 1.Dribbble 这个特邀的“给设计师展示”网站有网络上最好质量的 UI 设计作品。

1.1K3 0

设计效能 | QQ动漫的设计系统之路

随着项目的不断发展，设计团队在不断壮大，设计师之间的协作也越来越多，相应的沟通和协作成本在不断增加。如何才能更高效的合作，并把设计质量和一致性做的更好，是我们需要去解决的问题。...解决流程分2步： 1）由一位设计师把组件库的原子级组件（主要包括颜色，字体，图标）先做好，并建立分类组件标准模板，其他设计师在这些模板基础上进行完善，保证组件库在逻辑层级统一。...想回头修改的话，因为是最底层的原子需要逐个调整，所以代价是巨大的。所以一定要开始设置字体组件之前就确定好行高，比如QQ动漫组件库中的文字行高统一用文字大小的1.5倍，并取偶数作为文本的行高。...图标规范也会影响组件库的整理和日常使用，在做图标组件时，需要定义好图标的最大范围和最小范围，嵌套起来使用才不会出错。图标的规范要严谨，同一个尺寸下的图标视觉面积要保持一致。...如果你的组件库之前用了很多切片来导出图标，可以用Automate插件直接清理或设置全局的切片，非常方便。

6442 0

C++ Qt开发：PushButton按钮组件

void setIcon(const QIcon &icon) 设置按钮的图标。 QIcon icon() const 获取按钮的图标。...PushButton 的使用有两种方式，读者可以直接在图形界面上面拖拽来使用，也可以通过new QPushButton的方式动态的创建生成。...先注释掉上面添加的代码，然后进入设计模式。...，如果读者学过前端应该知道使用CSS如何美化按钮，QSS也支持CSS中的各种事件，我们以按钮的普通状态，按下抬起为例，将如下QSS设置到组件上。...QSS来实现并不需要导入样式图，这种方法比上面用图标作为背景的好处就是可以不需要设计背景图，而且在样式不设置字体的情况下，可以随意更改文字以及文字的大小、位置、字体等显示效果。

3771 0

小众笔记软件『蚂蚁笔记』Windows 客户端新版（v2.8.0）

本人从很早就开始有摘录整理搜索到的资料的习惯，最早是使用 Word，后来使用 “麦库记事”，也用了一两年了，后来 “麦库记事” 倒闭了，就开始使用这个 “蚂蚁笔记” 了，至今应该有五年多了，一直购买着...，蚂蚁笔记具有以下亮点（冒号后为本人的主观评价，供参考，图片大部分为官网图片）： 1、多平台：我主要是用 Windows 的，网页的偶尔用，安卓的比较简陋，基本没怎么用，其它的没用过。...下面这个就是蚂蚁笔记的文字编辑条，依次的功能为：段落（标题一、标题二这种）、字体颜色、背景颜色、加粗、斜体、下划线、删除线、图片、思维脑图、代码块、行内代码、项目符号、编号列表、左对齐、居中、右对齐、...我先来列举几个（2024.01.21）：Trilium 没有 “标题一”、没有字体对齐功能；印象笔记没有段落功能；微信公众号后台编辑器也没有段落功能；知乎文章编辑器没有字体对齐功能。...（内置的两个账号之一，可以改掉默认的名称和密码来使用）能看到 “后台管理” 入口：这就相当于打开了一个新世界的大门，什么流量限制、大小限制，都是浮云，先进入后台再说（说句题外话，后台是看不了笔记的，可以看到

2441 0

【技巧】ionic3修改自定义图标

便于归类，从自己的文章拷贝过来：【Appetite】ionic3实录（三）修改自定义图标常见图标有图像图标和字体图标两种，在移动端，字体图标对比图像图标有不少优点，所以一般采用字体图标为主...而字体图标的优缺点(使用图标字体的优点与缺点 | 骤雨打新荷)摘录如下，有兴趣可了解下：图标字体的优点： 1、扩展性更强：图标字体可任意缩放、改变颜色、产生阴影或透明效果。...图标字体的缺点： 1、由于图标字体只能被渲染成单色或者CSS3的渐变色，使得它不能被广泛使用。 2、很多精美图标字体是收费的，不过精美开源的免费图标也越来越多，并提供下载使用。...免费的字体图标库很多，在这里我们打开阿里的图标库网站iconfont，随便找一个图标库（选图标库而不是选图标，是为了让图标风格一致）： ? image.png 加入购物车，并下载代码： ?...image.png 修改的内容，是为了可以用ionic的方式来使用这些自定义图标(其中，注意前缀是ion-ios-，不是icon-ios-)；注释的内容，沿用ionic的，这里没必要使用；

1.2K3 0

从 Web 图标演进历史看最佳实践

一、使用独立图片在过去有很长一段时间，前端是通过引入图片来承载图标。在没有 CSS 支持的时代，用标签引入图标图片是唯一的可能。...同时，SVG 是文本文件，同时诸多支持矢量编辑的设计工具都支持通过 SVG 导出，设计师可以直接交付给工程师使用，也不再需要生成字体文件，大大缓解了可维护性上的痛点。...那么我们很自然地就可以通过设计图标组件来对底层方案进行一层封装，暴露给前端更简单直接的 API 来使用图标。要注意的是，这并没有在根本上改变 web 图标渲染的方式，底层依然是基于前文提到的各种方案。...整个大体系下跨团队的设计师并没有很好地共享图标资源，存在一定的重复设计。...通过我们的插件导出在线标注稿后，标注稿上就会自动标注图标在图标平台中的唯一标识符，这也是我们用来生成图标组件时用的标识符，前端工程师通过它就能直接从图标组件包中引入对应的图标组件。

1.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭