水平矩形icon 举例：宽28px高21px，圆角1px，内部均为直角，主线条2px，辅助线条1px 竖直矩形icon 举例：宽24px高26px，圆角1px，内部均为直角，主线条2px，辅助线条1px...如何制作字体图标 我们现在用的字体图标平台是阿里巴巴旗下的Iconfont，我们先来看一下它的制作指南。...然后导出为svg文件。 最后打开iconfont页面，上传svg文件并选择去除颜色并提交。...那设计师应该如何交付字体图标呢 这时候字体图标的强大之处就体现出来了，感谢阿里爸爸提供这个平台～～ 我们只需要选择开发需要的图标项目，下载到本地就可以，会自动生成一个文件包，给到开发就好了。...到此，字体图标的整个制作流程就完成了，这个流程基本上可以适用，除非某些大型公司有自己特别的规范和标准。
本文讨论的是Power BI表格矩阵的正方形空间决策。 所有的图表均占据矩形空间，少数图表占据矩形空间中的一种特殊形态-正方形。常见的正方形图表有气泡图、环形图、华夫饼图、排名图等。...在使用表格矩阵制作SVG图表时，既可以把图表度量值放在值区域（表格为列，矩阵为值），也可以放在条件格式图标。 那么，这两个空间如何选择？当正方形图表作为独立图表展示时，选择值区域。...当正方形图表需要和其它图表组合展示时，把正方形图表放在条件格式图标较为妥当，下方表格中的排名、环形图、气泡图均在条件格式图标。...这么做的主要原因是，同一个表格中，条形图、大头针图、瀑布图这样的图表是扁平化的，而正方形图表要求的显示高度要大于这些扁平图表，这会使得图表美观性很差。...而条件格式图标不影响整体的图像高度，显示效果上比较统一。下图最右侧值区域增加环形图后，破坏了表格整体结构。
举个例子，当我们在创建一组图标时，每个图标相互之间的视觉平衡是非常重要的，如果我们直接将图标嵌入方形区域，那么面积更大、更像方形的图标视觉权重也会更大。 ?...因此我们可以通过补偿不同形状图标的面积来平衡视觉，允许较小的图标超出图标区域之外，并在较大的图标和图标区域之间留出一些空间。 ? 下面这组图标在视觉上是完全平衡的。 ?...第一种，是矩形对齐方法，这当然是没错的，因为你切出来的svg/png就是矩形的，工程师开发时看到的也是矩形。而在第二个方案中，我们移动了图标的位置，使图标锐利的突出与圆形边缘等距。 ?...- 要点： 具有尖锐边缘的形状应该更大或更长，以便与相邻的矩形保持平衡。 用大写高度对齐法通常是对齐文字与背景按钮的有效方法。 要让三角形图标与按钮对齐平衡，可以用其外接圆与背景按钮对齐。...应该将多个SVG组合在一起，在代码中包含特殊的公式或脚本，或者使用像Apple的应用程序图标一样把png放在一个统一的蒙版上。
可以看到，在Android上，应用图标可以是方形、圆形、圆角矩形、或者是其他任意不规则图形。 本来就是两家公司不同的设计理念，也说不上孰高孰低。...没问题，由于应用图标的设计分为了两层，手机厂商只需要在这两层之上再盖上一层mask，这个mask可以是圆角矩形、圆形或者是方形等等，视具体手机厂商而定，就可以瞬间让手机上的所有应用图标都变成相同的规范。...SVG格式的图片都是使用AI、PS等图像编辑软件制作之后导出的，基本没有人可以手工编写SVG图片。...好的，那么现在剩下的问题就是，我们如何才能对自己的应用图标在Android 8.0系统上进行适配？...再来看预览区域，这个就十分简单了，用于预览应用图标的最终效果。在预览区域中给出了可能生成的图标形状，包括圆形、圆角矩形、方形等等。
1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。...根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。 ? ? 图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。 ? ?...6 保持图标风格统一 下面的两幅图可以很好的展示正确的和错误的例子，比如一套家具的图标，如果一个图标的绘制角度是斜45°，那么其他的图标也尽量保持这样的角度。而不能一个是正视，一个是斜视。...如果节点定位准确，图标边缘看起来很清晰。这个非常必要，保持整数吧！ ? 9 清理SVG图标中的垃圾代码 我们都知道SVG图标最终是一串代码。...静电杂谈：如何做一个“有特色”的UI设计师 交互工具哪个好用？来看看静电的具体分析~ 2019即将过半，UI设计师在激烈的从业环境如何提升 平面设计师如何快速转行UI设计行业？
：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。...根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。 图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。...6 保持图标风格统一 下面的两幅图可以很好的展示正确的和错误的例子，比如一套家具的图标，如果一个图标的绘制角度是斜45°，那么其他的图标也尽量保持这样的角度。而不能一个是正视，一个是斜视。...看看下面两幅图，哪幅图是正确的呢？ 相同的原理适用于线性图标和填充图标。如果你把它们混为一谈，人们可能会认为它们具有不同的重要性或地位。当然，除非你刻意想要那个。...如果节点定位准确，图标边缘看起来很清晰。这个非常必要，保持整数吧！ 9 清理SVG图标中的垃圾代码 我们都知道SVG图标最终是一串代码。
因为 2 倍图适配 3 倍图时要乘以 1.5, 适配 1 倍图时要除以 2, 并且保证 1 倍/ 2 倍/ 3 倍图尺寸值都是偶数,能满足要求的最小数是 4； ?...图标栅格 以 2 倍图 44*44px 为例，常见方形、圆形、水平矩形、竖直矩形图标为保证视觉大小一致，通常实际设计尺寸并不一样，可通过图标栅格关键线来进行规范，这里推荐一篇聊一聊iOS系统图标栅格&带你绘制系统图标...网站图标除可收藏下载外还提供图标编辑器对图标进行编辑微调，编辑完成后可导出为 SVG 或转 PNG 格式，各种大小尺寸一应俱全。 ?...网址：www.iconfinder.com 03 最大的免费图标库-Flaticon 最大的免费图标库，提供 PNG、SVG、EPS、PSD 和 BASE 64 格式供选择下载。...网址：https://icons8.cn 05 easyicon图标库 easyicon 收录了超过 400,000 万个以上精美 SVG、PNG、ICO、ICNS 等免费图标，内容相当丰富，网站提供英文
编辑文字 如您所见，文本不是相对于矩形居中。要解决此问题，请按住Shift并同时选择矩形和文本。 ? 选择两个对象 接下来，找到Inspector顶部的Align按钮，然后选择下面列出的两个按钮。...导入向量 让我们学习如何导入矢量文件并进行编辑。我在The Noun Project下载了Will Deskins设计的可爱猴子图标。点击这里直接下载SVG。...下载并解压缩SVG文件后，将其直接拖到Sketch画板中。 ? 将SVG拖动到画板 选中图标后，让我们在屏幕左侧的“图层”菜单中进行一些调查。...我们将为袜子猴子图标制作第三种款式。为此，您必须在图层组中选择三个单独的图层，如下所示： ? 创造袜子猴子风格 单击“创建新共享样式”并键入“Sock Monkey”。 ?...应用风格 接下来，通过展开图层组并选择构成图标的三个图层来选择另一只猴子。然后转到右侧的Inspector，选择Layer Styles下拉列表，并选择刚刚创建的“Sock Monkey”样式。 ?
很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。...二、通过border-radius绘制圆环 我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。...需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。...设置为0 0 50 50，表示截图区域为左上角坐标为(0, 0)，右下角坐标为(50,50)的矩形区域内，即会截取这个区域内的矢量图，然后将截取的矢量图放到svg的可显示区域内，同时会根据svg可显示区域的大小等比例进行缩放...字体图标下载后，将解压后的内容拷贝到项目中，并引入其中的iconfont.css到页面中，给要显示字体图标的元素加上iconfont类样式，字体图标会有一个对应的unicode编码，通过::before
这是麦肯锡系列第七篇，前六篇如下 Power BI模拟麦肯锡客流转化漏斗图 Power BI模拟麦肯锡多种正方形图表 Power BI模拟麦肯锡华夫饼百分比图 Power BI模拟麦肯锡前后对比气泡图...这个气泡图有三个特点： 1.半圆显示 2.数据标签和类别标签同时显示 3.半圆底部有一条淡淡的灰色线条进行大小比较提示 前期已经分享过如何在Power BI制作全圆气泡，半圆气泡原理是一样的，只需要把圆的下半部分遮盖...实现方式是度量值嵌入SVG矢量图。首先看全圆怎么做？...> " 圆使用SVG的circle标签；中间的横线可以使用line标签，也可以如示例使用rect，也就是说一个很窄的矩形；数据标签和类别标签均使用text生成。...也可使用ImageByCloudScope视觉对象用作卡片图。 接下来的问题是，圆如何变成半圆？ SVG有图层的概念，在圆的下半部分进行图层叠加，放一个白色的长方形在圆的上方，且在类别标签的下方。
既然无法绕过，设计师就要学会如何去「适配」人类的视觉惯性画出“正确”的界面。 一. 物理尺寸与视觉尺寸 长宽 400px 的正方形与长宽 400px 的圆形哪一个更大?...当我们追求“看起来一样大”这个目标的时候，某些形状的物理尺寸应该更大一些。 ? 这个现象对于界面造成的影响会有哪些呢?...以下这种彩带样式的图相信大家都做过，要让整个图看起来平衡、整齐，就要利用上这种现象，有意识地加长需要加长的部分，才能做到对齐。 ? 我们再看一个实验例子，带背景的文本要如何进行对齐。...如下图，播放按钮也有三个角，那么做它的对齐工作也要注意啦。左边图那枚按钮就是直接点对齐的产物，看起来非常奇怪，对吧? ?...记住这些点 边缘有角的图形要拉长一些才能在视觉上与方形边缘的长度对齐。 制作文字按钮时一定要记得调整行距。 有角 icon 的对齐方法是保证每个角到边的距离相等。
Power BI内置了若干条件格式图标，但是没有任何一个可以用作气泡图，因为无法改变大小。 以下给出6个自定义气泡图标度量值，供读者使用，原理是将UNICODE用SVG矢量图包装。...图标选取的时候其实可以是任意UNICODE符号，但是建议选择圆形或者方形。 使用方法非常简单，复制下方的度量值到你的模型，将度量值中的[增长率]替换为你的指标。...调整完后，在表格矩阵如下图将你的指标的条件格式图标对应为刚才复制的图标度量值，也可将图标度量值标记为图像URL直接放到表格。 1....实心正方形 ---- 气泡-实心正方形 = VAR MaxValue = MAXX ( ALLSELECTED('店铺信息'[店铺名称]), ABS([增长率])) VAR CHART =...十六宫格 ---- 气泡-16格子正方形 = VAR MaxValue = MAXX ( ALLSELECTED('店铺信息'[店铺名称]), ABS([增长率])) VAR CHART =
Scratch有一个预先制作的sprite库，可以用在项目中，但是您也可以使用内置的paint程序或内置的vector应用程序绘制自己的sprite。 如何绘制大象 使用矢量绘图不需要绘图技巧。...查找圆、椭圆、三角形和矩形。使用照片或正在绘制的对象的实时模型可能会有帮助。 我将通过解释如何绘制苹果来演示在Scratch中绘制矢量精灵的所有要点，但是您可以将此方法应用于任何要创建的对象。...要打开Scratch的矢量绘图应用程序，请单击蓝色Scratch Cat图标，然后选择画笔图标。这将创建一个新的精灵画布。...选择矩形工具。在画布上创建一个长而薄的矩形，在其中放置茎。 2. 使用“节点”工具来塑造矩形，使其类似于茎。把填充物换成你想要的颜色。 3. 使用箭头工具选择杆。...这将以.svg文件的形式下载图形。 图片16.png 要在Scratch项目中使用图像，请返回“代码”选项卡。您的新精灵将与项目的其他精灵一起出现在右角。
提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。...图像类型 组成 优点 缺点 位图 像素 只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象 缩放和旋转容易失真，同时文件容量较大 SVG 数学向量 文件容量较小，在进行放大...、缩小或旋转等操作时图象不会失真 不易制作色彩变化太多的图象 下面让我们来对比一下位图和SVG图片使用方法的异同。...这个例子里集合8个24×24 图标在一个大小为192×24 图片中。...在使用之前，我们先创建一个很简单的SVG，包含三个独立图标：一个绿色的圆形、一个红色的方形和一个蓝色的三角形。 <?xml version="1.0"?
《Power BI 新功能：切片器添加地图》介绍了添加图像，本节介绍添加按钮填充背景。 框选效果 当切片器选中元素时，元素出现红色框选。...用PPT画一个椭圆，另存为SVG矢量图，按钮状态选择已选定： 填充图案选择刚才绘制的椭圆，设置即完成。 图标填充效果 当选中元素时，圆圈由空心变为实心。...依然是填充图像，按钮状态为默认时填充一个空心圆SVG图标，选定状态时填充一个实心圆图标。 圆形图标可以自己用PPT画，也可以在字节跳动的资源库下载。...修改办法很简单，使用在线SVG编辑服务将圆圈右边留白。 比如原图像大小为48*48，可以修改为200*48，与切片器长宽比大致相同。这样修改后的圆圈在切片器会自动显示为在左边。...勾选效果 勾选的原理和上方圆圈填充相同，默认状态添加空心正方形图标，选定状态添加对勾正方形图标，下图示例图标同样来源于字节跳动。
列表链接样式属性一览: list-style-type 属性：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字、字母或罗马数字。...list-style-image 属性：允许为项目符号使用自定义图片，而不是简单的方形或圆形。...body> 执行结果: 0x02 链接相关样式属性 描述: 在网页中基本都会使用标签来规定，鼠标点击后调整的新的域名站点，此章作者为链接添加样式来实现常用的功能，比如说导航栏、选项卡, 以及演示如何使用相关属性来制作一个高大上的跳转链接...例如: 默认的的链接样式为，具有下划线，未访问过的 (Unvisited) 的链接是蓝色的, 访问过的 (Visited) 的链接是紫色的, 而悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标...示例演示: 示例1.在链接中包含图标以及模仿按钮功能、链接提示用法等示例 body { margin: 0 auto; font-size
它由 UI 图标、象形图和标志表示，并在各个领域中使用，因为它可以在占用小面积的情况下传达意义。 它受到许多设计师的喜爱，因为它比其他元素更容易赋予个性，并允许您尝试视觉原理。...在这篇文章中，我们总结了图标的属性以及UI设计中推荐的图标设计指南。 用法 在 UI 设计中，图标主要用作应用程序图标和系统图标。...网格 眼睛将图标与视觉网格和轮廓分开。视觉网格是指允许相同大小区域内各种形状的图标具有相同权重和重心的网格。几何解构的对象是根据由圆形、正方形、矩形和等边三角形组成的网格产生的。...实际的数字设备是平面的，如果主要用于平面卡片空间的图标给人一种空间感，可能会感觉到认知失调。尽管它是在有限的基础上使用以引起特别注意，但不建议这样做。 熟悉度 无论平台如何，我通常都使用相同的图标。...对于下面的播放按钮，图形工具与图层末端对齐。但实际上，三角形需要调整，因为它们的重心与圆形或正方形不同。
字体图标就是为了解决这些问题而来 字体图标的优点： 1，可以做和图片一样的事情，如改变透明度，旋转等 2，字体图标本质是文字，可以改变其字体颜色，设置阴影等 3，字体图标体积更小 4，兼容性强，几乎支持所有浏览器...字体图标使用流程 1.UI人员设计字体图标效果图.svg格式——-> 2.上传生成兼容字体文件包——-> 3.下载字体包——-> 4.将字体包引入到HTML文件 一般可省略前两部直接从第三方网站免费下载即可...常用网站 1.icomoon字库(http://icomoon.io) 允许用户选择图标，根据svg制作字体，且种类繁多；由于是国外网站，打开速度较满 2.阿里icon font 字库（http://...www.iconfont.cn） 使用字体图标 接下来以icomoon为例讲解字体图标的使用 打开网站 点击箭头指示按钮，出现如下界面 点击右边列表”new set from selection...“可选择你自己的svg图用于转换为字体图标 成功添加一个字体图标 除此之外，你还没有选择此网站中其他图标 选择完成点击下载成字体图标 生成字体图标，点击下载生成字体包 将fonts
——“一画胜千言”维基百科 如果我们要用一句话来说明图标的作用，没有比这个成语更适合的词了。本篇文章，我们就来聊聊关于图标的一些事情。...---- 一个图标的生命周期（工作流程） 关于图标的生命周期，在我个人所经历的开发项目中，有以下两种： 第一种方式：图标库(选择阶段) -> 图标使用（开发阶段） 第二种方式：图标设计...原因很简单，因为我们需要先知道服务的对象是谁，才知道如何正确的为它服务。...，以方便制作雪碧图，这个过程可以由开发人员自己完成，也可以由设计师来做（设计师可以根据源文件中心导出一张包含所有图标的PNG文件制作）。...制作雪碧图的工具有很多，我比较常用的在线雪碧图工具是：Sprite Cow，或者是NodeJS平台下的构建工具插件，如：webpack-spritesmith。
Power BI的按钮功能可以为图标设定一个动作，比如返回上一步，跳转书签，跳转一个网页链接等等。 默认的按钮样式如上图所示，有9种。...如何自定义按钮 ---- 自定义的方式是，在“插入”选项卡下，使用内置图标新建一个按钮，在样式设置中，图标类型选择自定义，上传你准备好的图标图片即可。...图标的大小默认为完全填充，也可以自行修改： 另外一种方式是在按钮“填充”选项卡下填充自定义图片，优点是可以改变透明度，缺点是无法调整大小。 2....如何选择按钮格式 ---- Power BI支持的图标格式非常多，比如jpg、png、gif、svg。推荐使用svg的图标，原因是SVG是矢量图，可以无损调整大小。...下方这两个图标，左侧是SVG格式，右侧是PNG格式，稍微放大后PNG已经有点模糊。 以下推荐几个图标资源，阿里和字节的支持PNG和SVG下载，iconoir和iconer支持SVG下载。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
