iOS版也有一个纯文本样式的按钮，但它与安卓的全大写字母不同，并且字体更纤细。 ?...根据不同字体便可以判断你所使用的是安卓的应用还是ios的应用 如果你想自定义应用中的界面元素，请仔细根据你的品牌来设计，而不是把另一个不同平台的规范作为依据。...2、不要照搬平台特定的图标 每个平台通常都提供成套的常用功能图标，例如分享、新建文档或删除。当你把应用程序迁移到另一个平台时，应该把对应的图标替换成当前平台的特定图标。...你也应该注意到每个平台自身独特的风格：安卓系统图标通常使用较粗的笔触，而iOS乐于使用笔画较细的线形图标。以下是几个图标的对比图： ?...如果应用程序缺少某些功能和内容，尝试使用一些嵌入应用的浏览器；但是不要调出手机的浏览器，这样会导致用户失去方向并无法返回原先的应用程序。这会提高用户抛弃应用的概率从而转化率会降低。 ?
软件资源软件特色通过选择相同的文本提高工作效率【您现在可以选择文档中的所有文本框并一次更改文本特征。Select Same的扩展功能使您能够根据字体大小、文本填充颜色、字体样式和字体选择文本。...该软件可以帮助设计师在图标设计、徽标、字体、颜色、图标、壁纸、信息图设计等方面提高工作效率，而且操作也非常简单。...用户可以选择不同的笔刷类型和描边选项，例如粗细、颜色、线条风格等等。图层和组合：Adobe AI 中的图层和组合功能可以帮助用户管理和组织图标的各个元素和部分。...用户可以将不同的元素放在不同的图层中，也可以将它们组合在一起以创建新的形状和效果。总的来说，Adobe AI 提供了多种修饰图标的工具和功能，可以帮助用户轻松地添加各种有趣和创意的视觉效果。...【 Ctrl++ 】放大画面，选择【 钢笔工具 】进行字体调整，调整完之后用【 矩形工具 】在会字的上面画一个矩形，接着用【 文字工具 】打上sport，效果如图所示。
显然，这样的方式在有很多图标的网页中将发起很多 HTTP 请求，占用浏览器的并行请求数量，导致整体加载时间缓慢，体验很差。... 来通过不同位置匹配不同的图标进行显示。...图片来自https://www.smashingmagazine.com/2012/04/css-sprites-revisited/ 当一个项目图标很多时，图片会在整体下载完以后才显示，可能会导致一段较长的时间内所有图标都无法显示...在某些浏览器下，处于私有使用区的图标在默认字体下甚至会显示为一个方块字符。...在显示效果上，字体图标由于本质上被视为文本，将受到浏览器的文字抗锯齿算法的影响，在特定操作系统、浏览器、字体设置下视觉效果可能会不那么“保真”。
精灵图的优点很多，但是缺点也很明显 1.图片文件还是比较大的 2.图片本身放大和缩小会失真 3.一旦图片制作完毕想要更换非常复杂 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont...步骤： 字体图标的下载 字体图标的引入(引入到我们html页面中) 字体图标的追加(以后添加新的小图标) 3.1字体图标的下载 icomoon字库：外网，不需要登录即可下载 http:...color: pink; } 注意：标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样，这里均为 icomoon（如果上面改为pink,下面也是...如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。...4.css三角做法 我们要设定盒子宽高是0，并且指定边框，不同边框长度会造成不同的现象，最经典的是四个相同长度边框生成如下的第一个图。所以生成一个三角就可以让其他三个边框变为透明色，留一个就行。
总结： 如果遇到一些结构和样式比较简单的小图标，就用字体图标 如果遇到一些结构和样式较复杂的小图标，仍然选用精灵图 3.3 字体图标使用 字体图标是一些网页常见的小图标，我们直接网上下载即可。...因此使用步骤可以分为： 字体图标的下载 字体图标的引入（引入到我们html页面中） 字体图标的追加（以后添加新的小图标） 3.3.1 字体图标的下载 推荐下载网站： icomoon 字库 比较全面，国外服务器...3.3.3 字体图标的追加 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。...3.3.4 字体文件格式 不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。...2、菜单内容超出部分，用文本超出省略解决
对于QQ动漫项目来说，常见的控件类别包括：颜色、字体、图标、按钮、导航、状态栏、弹窗、列表、标签等等。每个项目所需要整理的组件不尽相同，原则就是对要复用的元素进行整理。...根据实际项目和设计师使用情况的不同，会有不同的命名形式，命名确保效率就好。 在梳理组件库结构命名时，先用思维导图描绘一份结构化地图，方便前期讨论及调整。...想回头修改的话，因为是最底层的原子需要逐个调整，所以代价是巨大的。 所以一定要开始设置字体组件之前就确定好行高，比如QQ动漫组件库中的文字行高统一用文字大小的1.5倍，并取偶数作为文本的行高。...图标规范也会影响组件库的整理和日常使用，在做图标组件时，需要定义好图标的最大范围和最小范围，嵌套起来使用才不会出错。图标的规范要严谨，同一个尺寸下的图标视觉面积要保持一致。...不然在大小这个层级就会出现，虽然是相同尺寸的图标切图范围，但图标的体量看起来却并不一致。 将纯色或渐变图标中的颜色剥离，并使用颜色组件进行嵌套，这样做既方便替换又能减少图标组件库的复杂度。
这个网页数据传输道理相同，所以我们的选择是将当前页面所需要的图标图片一次性打包传输，方 便使用。 所以，为了提高页面加载效率，这里我们就需要学习 CSS 的精灵图和字体图标。...1.2 精灵图 1.2.1 概念 精灵图，又名雪碧图，是多个小图标的集合图。 我们通过背景图片的设置，就可以使用精灵图。...1.2.2 步骤解析 1 、在精灵图上，找到要使用的图片，测量其宽高 2、以 div 为例，为其设置和图片相同的宽高（加边框仅为了方便演示） 3、通过背景图片引入，不能重复 4、因为现在显示的背景图默认为左上角...6 、通过为 iconfont 设置字体大小，改变图标大小（因为字体图标属于字体，但 font-family 不要使 用，无效果） 1.3.5 总结 字体图标可以解决精灵图修改难、图片大的问题...精灵图：负责页面通用的各种大中型彩色图标图片 字体图标：负责页面快速显示的各种小型图标图片 2. 拓展知识 2.1 文字阴影 字体图标允许我们为文本添加阴影。
图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计，而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例...在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。...命名规范 5.gif 很多UI设计师对于“命名”是没什么概念的，他们都是随随便便地用一些没有特定意思的字母去给页面命名，这是不好的。...而更重要的是，有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了...2 命名格式 一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图
color 图标的颜色，css支持的颜色格式都可以使用 3）图标与图片有什么不同 通过size属性，可以改变图标的大小： ?...如果文本是从后台动态取出来的，穿插的图标的类型也是动态取出来的，能否实现解析、渲染？这个问题留给读者朋友们思考。 2）icon图标是怎么实现的，原理是什么？...但是这种方法有三个明显的缺点：造成大量http请求；不方便修改颜色；放大图片会虚。 B）后来有聪明的工程师发明了精灵图，什么是精灵图？ 这是一个字译。...之所以在css里链接这么多字体文件，是为了兼容不同的浏览器。...如果想进行复杂的编辑，可以将矢量图下载下来，使用矢量图编辑软件，例如Sketch，进行编辑，编辑完成后导出svg格式，在上面这个位置上传，就可以替换原图标。 ? 这是使用矢量字体图标的方案。
s1.保持段落简短并突出关键术语 s2.将重要信息放在列表项的开头 s3.将行条纹添加到您的表格中 s4.编写独立的副标题 s5.用视觉多样性分解文本 12.最大化文本的可读性 显然，文本应该是可读的...s1.使用数学原理构建设计 s2.选择对比字体 当一些人选择匹配的字体时，他们会搜索一种看起来与现有字体相似的字体。但这是错误的做法。通常，相似性看起来像是一个错误。 相反，要慎重。...选择对比度明显的字体。如果您是新手设计师，您可以选择衬线与无衬线组合（衬线是字母末端的“树枝”）。 四、最大化所有用户和场景的兼容性 您的用户是具有不同目标的不同人。设计您的界面，使其适合所有人。...如果他们可以多次点击，他们会。相反，当用户单击它们时禁用按钮。这样一来，重复提交是不可能的。...s1.为小按钮添加透明边框 s2.为悬停弹出窗口和下拉菜单添加轻微延迟 s3.超链接整个菜单选项容器 s4.超链接主菜单、列表项和补充图标 通常，用户点击不可点击的项目。不要与那些错误作斗争。
浏览器限制并发下载数，就会导致超出并发限制的请求被迫进行排队，对于图标、图片、css、js 等小文件很多的页面来说，即使网速已经较快，这种排队也可能会持续很久。...在稍大点的项目中要解决这种冲突会相当麻烦。其二是如果这个图标出现很多次，它的内容就会在 html 中重复很多遍，体积也会相应的增大。 好在，svg 有一种机制可以解决这个问题，也就是use 标签。...这样一来，图标内容被重复很多遍的问题就解决了。...而且，这个图标的其它部分你仍然可以指定特定的颜色，比如图标主体部分跟随文字颜色，而某个特殊区域总是显示为蓝色。经过这样的处理之后，你不但可以弥补相对于字体图标的缺点，还可以更进一步，支持彩色图标了！...你可以用 svgo命令对单个文件或者整个目录做优化；可以手工使用，也可以把它集成到工具链里。 结语 这些图标技术，虽然出现时间上有先后，但并不是简单的替代关系，而是各有优缺点，适用于不同的场景。
，图标（尤其是实心图标） 一般都很 "重"，而且覆盖的面积很大 当你把图标放在一些文字旁边时，图标往往会给人突出的感觉 与文字不同， 图标的 "重量 "是无法改变的， 因此要创建平衡，就需要通过其他方式来淡化它...一个简单而有效的方法就是降低图标的对比度， 使其颜色更柔和 这种方法适用于任何需要平衡不同重量元素的地方，降低对比度就像一种平衡，即使重量没有改变，也会让较重的元素感觉更轻 # 利用重量补偿对比度...当你在设计一个几乎所有内容都是链接的界面时， 使用一种旨在让链接在段落文本中 "突显 "出来的处理方法，就会显得非常霸道 可以用更微妙的方式强调大多数链接，比如使用更重的字体或更深的颜色 有些链接可能根本不需要默认强调...，可以尝试绘制简化版的用户界面，去掉细节，用简单的线条代替小文字 # 不要缩小图标 绘制成较大尺寸的图标在缩小后也会显得模糊不清 更好的办法是按照目标尺寸重新绘制一个超级简化版的徽标 # 小心用户上传的内容...添加微妙的可重复图案 沿单边重复设计的图案也很好看 # 添加一个简单的形状或插图 可以尝试在特定位置加入一两个单独的图形， 而不是装饰整个背景 # 不要忽视空白状态 在用户创建内容之前，
最有效的改进方法可能就是采用分辨率更高、质量更高的图片来拼凑雪碧图，不过同时也会增大雪碧图的文件体积。...这会导致虽然只发出了一个文件 HTTP 加载请求，但是由于文件体积过大、加载速度慢，而给用户带来不好的使用体验。 字体图标 接着发展出了一种字体图标的东西来解决图片索引中存在的问题。...字体图标，顾名思义就是把所有的图标都变成了字体编码一样，只要我们在网页中引入字体图标文件就可以像用 Unicode 一样使用字体图标了。这种方式最好的一点就是，像操纵字体一样设置字体图标的样式。...Iconfont 会提供一个阿里 CDN 上的链接地址来直接使用你建立好的字体图标集合，这样一来基本上就解决了上面所说的维护难题。...Symbol 图标 实际上除了字体图标在不同设备、不同平台上有相同的效果之外，SVG 图标也具有类似的效果，这主要是因为 SVG 图标的矢量本质，即缩放不会产生任何失真。
使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。 swap:后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。...此处以给网页头图和网页背景添加图片渐变模糊为例，在中添加 考虑到还有部分读者的需求是指定页面，可以在对应文章或者page的markdown文件里写css代码： 鼠标指针样式替换 点击查看鼠标指针样式替换...鼠标指针的样式替换原理其实就是重设对应版块的cursor属性,在这之前我们需要准备好相应的.cur文件，即静态鼠标指针图标。...最好事先降低一下图标的分辨率到合适的程度。 然后就是正文了，依然是在custom.css中进行修改。用F12控制台左上方的箭头按钮获取对应块元素的id或者css。然后修改对应的cursor属性。...cur图标的路径引用方式和背景图片的引用方式是一样的，都支持图床外链和本地相对链接。以下是一些常用位置的更改示例。读者还可以自己定义更多块元素的具体图标。
5、body上加入line-height样式 导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。...FontAwsome5中 也提供了SVG的图标字体。...这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。...在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。
> 通过上面的方法，多客户端适配问题解决了，但我们使用了多张内容相同、尺寸不同的图标，这无疑增加了图片的数量。...字体图标的原理 字体图标的本质是一种字符，而字符又是字体渲染出来的，字体决定了我们在键盘上敲打的字符最终在页面上长什么样。...这就好比书法家写字，不同的字体就是不同的书法家，不同的书法家虽然都在写同一个字，但是由于字迹的不同，写出来的文字也就大不相同。 ?...总结一下字体图标的特点： 字体图标是矢量图，即使放大也不会变模糊。 字体图标可以通过 CSS 样式进行控制，使用更加灵活。 字体文件一般比较大，但可以将不用的字体删掉。...传统图标，简单粗暴，切好图就能用，但需考虑不同尺寸以兼容不同设备，图片的颜色不好更改。 字体图标，需要引入字体文件，然后编写特定的字符，可以很方便的修改颜色，但只能是单色。
5、body上加入line-height样式 导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。...FontAwsome5中 也提供了SVG的图标字体。...12、强制使用属性选择器显示空链接 这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。...在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。
插件 001.工具特征 两种工具几乎具有相同的功能，相同的快捷方式和相同的结构。如果您知道如何使用其中一个，则默认情况下您会知道另一个。 ?...当我想要创建文本样式时，sketch的文本/图层样式 不是原子级别的，我必须定义我想要的样式的所有情况，这些情况最终可能会导致非常长的文本样式列表。 ?...让我们来解释一下Sketch样式的工作原理：当定义任何文本或图层样式时，Sketch会以该样式保存所有属性，并且如果您对任何属性进行了任何更改，那么您将覆盖文本样式。...例如，如果您要使文本具有不同的对齐方式或不同的颜色。使用Sketch，您必须为每种情况创建文本/图层样式。 接下来看看Figma如何进行工作： ?...例如，如果您有一个带图标的按钮，则必须创建2个符号，一个带图标，另一个不带图标。 Figma组件有些不同，您可以更改替代，但也可以修改组件层，以及图层的属性。 ?
从集成的工具到文本编辑器，你的编辑器看起来几乎是平的和无缝的。 想象一个史诗般的主题加上史诗般的图标。 Material Theme Icons 是替换默认 VSCode 图标的绝佳选择。...设计的大型图标目录与主题融为一体，使其更加美观，这有助于你在资源管理器中轻松找到你的文件。 ? 2....） 缩进风格，这个扩展为文本前面的缩进着色，在每个步骤中交替使用四种不同的颜色。...自定义标题栏 这是一个很棒的视觉调整，改变了不同项目的标题栏颜色，以便轻松识别它们。...如果你处理可能具有相同代码或文件名的应用程序（例如react-native 应用程序和 React Web应用程序），这非常有用。 ?
line-height 大于 font-size时，会导致多余的空间 分布到文字的上下两侧，从而导致 文字垂直居中。因此，想要垂直居中时 可以通过line-height来做。...* 背景颜色(纯色) * 渐变色背景 * 多背景的叠加 指定两种渐变色 或 两张不同的图片 * 背景图片的属性(雪碧图) 雪碧图：把不同素材的图片 集中到同一张图片上，以减少http的请求...* cursor指针 非样式布局 - CSS Hack 用来处理特定浏览器的办法，来兼容不同浏览器，在一部分浏览器上生效的css。...important 优先级最高 内联样式 > 外部css表单 后写的优先级高 * 雪碧图的作用 把不同的图标合并到一张图上，减少http请求次数 提高页面加载性能。...如果这些小图标的颜色接近 可以减少 雪碧图的大小。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
