1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。...根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。 ? ? 图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。 ? ?...当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。 ? 4 控制最小的间隙尺寸 图标的相邻元素之间空间在整个图标集中不应太小或不一致。...6 保持图标风格统一 下面的两幅图可以很好的展示正确的和错误的例子，比如一套家具的图标，如果一个图标的绘制角度是斜45°，那么其他的图标也尽量保持这样的角度。而不能一个是正视，一个是斜视。...静电杂谈：如何做一个“有特色”的UI设计师 交互工具哪个好用？来看看静电的具体分析~ 2019即将过半，UI设计师在激烈的从业环境如何提升 平面设计师如何快速转行UI设计行业？
它由 UI 图标、象形图和标志表示，并在各个领域中使用，因为它可以在占用小面积的情况下传达意义。 它受到许多设计师的喜爱，因为它比其他元素更容易赋予个性，并允许您尝试视觉原理。...在这篇文章中，我们总结了图标的属性以及UI设计中推荐的图标设计指南。 用法 在 UI 设计中，图标主要用作应用程序图标和系统图标。...它用于应用程序图标来表达您的品牌和系统图标，以便用户快速了解信息并根据信息采取行动。 风格 有线条、填充、彩色和图像方式来表达图标。目的因使用图标的空间而异，主要用于对动作进行反馈或增加注意力。...我倾向于使用表情符号或独特的图标。 重量 可以组合样式以创建不同的权重。如果服务主要是图片，图标的权重应该最小化，如果服务是面向文本的，重图标可以用来给用户带来视觉上的愉悦。...原文：https://bootcamp.uxdesign.cc/ultimate-guide-for-a-good-ui-icon-beefc840c2e5 作者：Jake Park 翻译：静电
2021年11月23日，出海融合云服务商MeshCloud脉时云（www.mesh.com.cn）宣布完成1亿元A+轮融资。...MeshCloud脉时云公司名为北京云联万维技术有限公司，成立于2017年，基于MeshCloud融合云SaaS平台、出海音视频/游戏/电商等行业垂直解决方案、高效的服务体系、海外公有云厂商的深度合作，...此轮融资由贵州省创新赋能大数据投资基金领投，老股东跟投。募集资金将投入到云架构师及产品研发团队扩充和并购，以及海外自有云基础设施的建设。...“天使轮以来，我们看到了MeshCloud团队面对市场机遇和选择不断迭代，团队不断吸纳优秀人才逐渐发展壮大，模式清晰，增长迅速。”真格基金CEO方爱之提到。 “出海是我们一直高度关注的赛道。
静电说：今天静电看到了一篇非常棒的问题，详细阐释了图标设计过程中方方面面的知识点，今天，咱们就来看看设计师Slava Shestopalov的文章： 1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一...根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。 图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。...当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。 4 控制最小的间隙尺寸 图标的相邻元素之间空间在整个图标集中不应太小或不一致。...6 保持图标风格统一 下面的两幅图可以很好的展示正确的和错误的例子，比如一套家具的图标，如果一个图标的绘制角度是斜45°，那么其他的图标也尽量保持这样的角度。而不能一个是正视，一个是斜视。...相同的原理适用于线性图标和填充图标。如果你把它们混为一谈，人们可能会认为它们具有不同的重要性或地位。当然，除非你刻意想要那个。例如，填充图标用于键命令，线图标用于其他命令。
例子：我的SAP UI5 Web Component开发而成的React应用上，显示了这个加号图标： ? 在React Component里引入加号图标： ?...pathData里包含的值，其实就是基于SVG绘制而成的加号图标在浏览器里对应的g标签的d属性，如下图所示： ?
例子：我的SAP UI5 Web Component开发而成的React应用上，显示了这个加号图标： [1240] 在React Component里引入加号图标： [1240] 在此处给ShellBarItem...icon属性赋以add按钮： [1240] 运行时效果如下： [1240] 我们再回过头看看在代码里导入的add.js的内容： [1240] pathData里包含的值，其实就是基于SVG绘制而成的加号图标在浏览器里对应的
e-icon-picker 图标选择组件 简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！ ?...示例图片 喜欢的欢迎star 项目地址 Demo 在线测试 在线API 安装 因为项目使用了element-ui的组件进行二次开发，所以在使用此组件前请安装element-ui组件库。...安装方式请参考element-ui官网的相关文档。element-ui官网 npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。...'; import 'e-icon-picker/dist/index.css';//基础样式 import 'e-icon-picker/dist/main.css'; //fontAwesome 图标库样式...另： 本人还有一个开源项目，在项目中的菜单管理使用了该图标组件，喜欢的可以去看看，帮忙点个star,非常感谢！
-- 引入样式 --> 想要本地引用就直接打开这两个链接去下载对应的...因为我的项目比较老，所以这里使用本地引用 图标异常问题 将上述两个文件引入后，样式可以正常使用，但图标无法正常显示。...找到地址https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/fonts/element-icons.woff后直接选中右键跳转，浏览器会自动下载该图标相关文件...；最后将下载好的图标文件放到css目录下的fonts目录下即可，没有则新建fonts目录，按照这个路径放图标文件都不用去改css中图标的路径。
简单的图标往往会比比复杂的图标有更多的转换。 例如，这2个图标似乎太复杂，因为它拥有太多的内容，信息量庞大，导致用户很难理解。...所以，开发者在选择应用图标时重点考虑的是其在APPStore的展现效果。 六、更新您的图标 不时更新您的图标非常重要。...通过查看竞争对手的图标样式，找到创意与灵感，然后提出完全不同于竞品图标的想法与改进建议，这样我们就有可能在APP的图标中领先竞争对手。...八、测试您的图标 当我们准备好图标后，不要认为我们的工作完成了，我们还需要找不同的人进行测试，让他们反馈这个应用图标是否有吸引力，是否好看。...在测试应用图标时，还要测试我们的APP图标在不同颜色的壁纸中会有什么样的效果，因为现在的智能手机都是允许自定义背景的，只有在大量的测试后，才能确定应用图标的使用。
当时项目开发都使用现成的UI组件，最初用Element UI，后来换成了Antd。无论换哪种组件，都帮助节省了很多开发时间，自己平时组件开发，最多就进行一些简单的标题、弹窗、表格的二次封装。...系统特性现今，UI组件库丰富且成熟，所以可能觉得日常开发中，通用组件会写的很少，其实不然。...不同展示类型，数值类、自定图标类、点状类。内容展示，标题、子标题、详情描述。rc-steps我在看Antd的源码时发现，有些组件底层用的第三方react-component中的组件。...自定义图标，参数icon表示步骤图标的类型，当它有值的时候，步骤条会显示成它的值。有两个特殊的图标：成功状态、失败状态，这两个状态的图标如果使用组件时没有进行自定义，会取内部定义的图标。...现在有Antd等优秀的UI组件库，好像是不用重复造轮子了。但是奔着学习的目的，去开发一套UI组件还是可以帮助提升技术的。当然这些都是给初级开发者的建议，大佬们，大佬们的技术能力，我还在努力追赶。
这个React应用左上角的react图标，以及右上角的小人图标，是如何显示出来的？
这个React应用左上角的react图标，以及右上角的小人图标，是如何显示出来的？ ? 把图片放到React应用的public文件夹下： ?
当界面设计定稿之后，设计师需要对图标进行切片，提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求，直接影响到工程师对设计效果的还原度，并且也是设计师重要的输出物之一。...图标切图输出 桌面图标切图输出 App 的桌面图标会被运用在很多不同的地方，比如手机桌面、APP store、手机的设置列表，所以 app 桌面图标需要很多个不同尺寸的切图输出。...两个平台对应的桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。...系统图标切图输出 一套图适配双平台：iOS平台（iPhone 6plus版本除外）和安卓平台公用 44*44px 切图素材，即可实现一套切图适配两个平台的开发。...APP内功能图标 图标是可以有留白区域的，建议图标尺寸尽量不要过多。 2. 图片类切图输出 图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。
vue-fontawesome-elementui-icon-picker 简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！ ? 选择图标 ?...选中图标 安装 npm install vue-fontawesome-elementui-icon-picker 全局注册 main.js中注册 import iconPicker from 'vue-fontawesome-elementui-icon-picker... 依赖 本组件依赖以下组件开发，若出现异常情况，请先对比你的版本依赖是否与本组件一致： "element-ui...": "^2.9.1", "font-awesome": "^4.7.0", "vue": "^2.6.10" 问题解决 若是选中的图标界面不展示，则有可能是你的项目中，引用的fontawesome...图标有问题。
立马跑到线上去排查，在自己电脑上登录进去看样式也没啥问题呀，然后审查元素才看到字体图标的 content 里确实是乱码： 自己在本地 build 打包看了下源码，dist/css/app.xxx.css...element-ui 的图标 css 文件 sass 版本更新到 1.39.0，并且修改 vue.config.js 配置文件的 css.loaderOptions.sass.sassOptions.outputStyle...这个不设置默认会是 compressed： 修改后的 vue.config.js 配置文件： module.exports = { transpileDependencies: ['element-ui...data、prependData、additionalData sassOptions: { outputStyle: 'expanded' } // fix: 解决 element-ui...输出方式删除所有无意义的空格、空白行、以及注释，将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式 修改后重新编译部署发现源码和浏览器中加载的样式都没问题了： element-ui
立马跑到线上去排查，在自己电脑上登录进去看样式也没啥问题呀，然后审查元素才看到字体图标的 content 里确实是乱码：自己在本地 build 打包看了下源码，dist/css/app.xxx.css，...里面的字体图标的 content 也确实是乱码：解决方式网上搜了下，很多人遇到这个问题，偶现发生，一般刷新下页面又好了，解决方式主要有3个：由 dart-sass 改回 node-sass自己额外引入...element-ui 的图标 css 文件sass 版本更新到 1.39.0，并且修改 vue.config.js 配置文件的 css.loaderOptions.sass.sassOptions.outputStyle...这个不设置默认会是 compressed：修改后的 vue.config.js 配置文件：module.exports = { transpileDependencies: ['element-ui...data、prependData、additionalData sassOptions: { outputStyle: 'expanded' } // fix: 解决 element-ui
具体可查看笔者的qiucode-UI的文档：qiucode-UI文档地址 本篇笔者将讲解在Vue项目中如何引入第三方图标库，如：Inconfont https://www.iconfont.cn...fontawesome https://fontawesome.io/ 登录到Iconfont官网，然后选择你想要的图标，添加到购物车里。.../packages/qiu-style/iconfont.css' 具体可查看笔者的qiucode-UI的文档：https://zhenqicai.github.io/qiucodeUI-docs/#
静电说：图标是我们UI设计师每天用到的最多的设计资源之一，不少同学对图标资源在哪里获取一直很苦恼，今天咱们推荐五个宝藏级别的图标资源网站，而且都是免费的，赶紧收藏用起来吧！ 001....Iconify 这个网站虽然看起来很丑，但是里边的图标资源真的很丰富。我们先看看网站吧。...Tabler 图标 简单好用 这个网站看起来很简单，就只是图标而已，我们可以英文关键字进行搜索，网站包含两千多个常用图标，也提供了SVG，PNG，和SVG代码。 003....Google Material 图标 另一个宝藏网站，由于它是google官网的内容，所以要访问他需要你用一些神奇的力量。...004.Unicon 大而全的图标网站，图标类型非常丰富，看下面的截图就知道了。而且大部分是免费的。当然他也有Figma插件。
尽管图标非常小，但图标会在App Store和Google Play中显示，向用户传达app的信息，并且安装后能在主屏幕上找到它，因此图标非常重要。...一个好的图标会让用户产生兴趣，提供信心，向用户保证应用可能对他有用。当用户安装应用程序时，图标的目标会发生变化。...此时它有助于让用户在主屏幕上的其他图标中找到自己，但是什么能使应用程序图标脱颖而出呢？ 关于这个主题有很多文章，其中大部分都与保罗兰德的设计原则有关。这并不奇怪！应用程序图标是一个品牌。...徽标和应用程序图标分别具有不同的目标，使用方式和要求。这并不意味着徽标不能与图标重叠。流行的应用程序通常在图标中使用徽标：比如Twitter，Medium，Reddit等。但他们不会无缘无故地这样做。...1，可扩展性 应用图标必须很小。这就是重点，用户无法对其进行拉伸检查。因此无论大小如何，图标都必须保持其易读性。比如，设置中的应用程序图标多小啊！ ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
