本文为转载文章，以下内容来源于 September challenge #2 robin lhebrard I thought that the month of September would be the perfect moment to challenge myself. That’s why I had planed to draw everyday of the month and post it on social media.In short, I did 30 drawings in 30 days.This post is the second part of what comes out of it. Below you can see the thumbnails gallery which shows the evolution from the beginning to the end of t ...

目前我是一个Sketch的深度使用者，最近Figma非常火，很多设计的公众号文章都是在推他们。不知道是不是没什么可写了随便找的题材。但是它确实带动了一批。很多文章和视频的各种吹Figma吊打的，所以我也抱着试试看的态度去简单尝试了一下。 总结起来就是 1.Figma具备了难以置信的远程协作能力、跨平台能力、分享能力。 2.Figma有的功能Sketch几乎都有。很多功能确实Figma用户体验会更好，问题是差距还没有大到让Sketch用户转型的能力。对比Photoshop和Sketch的做UI的差距，Figma和Sketch也就是一个锦上添花。 3.对于高阶使用的用户而言Figma比Sketch更贵，对于简单使用的用户而言，Figma更便宜。 4.Figma组件库搭建需要收费（跨项目使用组件）。因为我在本地有着自己维护的Sketch Symbol（组件库）和Sketch Data（内容填充库），是个组件库重度用户，不付费的Figma对于我可能是无法使用的。 5.如果团队对协同要求很高，团队很多设计师维护一个sketch文档的情况比较多，强烈建议使用Figma。 6.如果团队设 ...

选择需要作为一个单元的图层，在工具栏中选择“制作网格”，输入行数列数间距等数值确认即可。 在Sketch中我们经常需要将一个元素复制成多份，并且这些元素还具备着相同的间距。这个时候我们可以使用Sketch的制作网格功能。 1.选择作为单元的图层/画板 2.在工具栏中选择”制作网格“ 3.进入网格工具，输入行数列数和边距 4.完成！ 注意：1.如果选择多个图层，那么会自动将选中的这些图层进行布局。 2.如果选择多个图层，会出现一个选项”复制图层以填充缺失的单元格“ 意思就是你设置的行列数所需要的单元数大于你选中的图层数。这个时候会复制你所选中的图层中层级最高的图层进行复制，来填充你所规定的网格。

将文字组件宽度设置为一个文字的宽度，这样每行为一个字，可以模拟垂直排版。字间距为行间距。 有的时候我们需要一些垂直排版的内容，这富有年代感气息的文字排版方式显得非常的古朴和文雅。常用在海报或者一些平面视觉作品之中。很难会用到UI作品中，但是一旦用到就很尴尬。专业的平面设计工具比如Photoshop、Illustrator等都有着直排文字工具，但是Sketch没有，怎么办呢？ 在Sketch中，将一段文本的适应性更为范围适应，然后将宽度设置为只能容纳一个字的宽度即可。例如： 我们可以将这段文字的行高作为垂直排版的字间距： 唯一的缺陷就是不支持换行，换行其实就是添加了一个文字罢了。所以在Sketch中做垂直排版的文字那么每一行都需要一个单独的文字组件。

选中文本，点击菜单中的字符→路径文字。之后将文字图层放到目标路径图层上部，移动文本图层接近路径。 虽然现代设计我们很少会用到路径文字，但是在用Sketch做一些视觉设计的时候我们偶尔会用到路径文字，那么怎么使用呢？ 1.首先我们先创建一个对应路径： 2.创建一个文本控件 3.点击菜单中的字符→路径文字 4.将鼠标拖拽到路径上 注意：文字图层必须在路径图层的上方。

本文为转载文章，以下内容来源于 Pliary - Plant Care Service behance Pliary - Plant Care Service플리어리는 식물의 성장을 관리할 수 있는 서비스 입니다.식물을 기르는 방법에 있어 중요한 3대 요소 중 하나인 물주기를 사용자가 직접 설정하고다이어리를 작성하여 실질적인 관리에 도움이 될 수 있는 식물 관리 서비스입니다.자세한 제작 과정은 Medium을 통해 확인하세요!iOS App Download > l Android App Download > l Pliary Medium >UX DesignJaehee Shin · Jiun UWireframeZookie LeeUI DesignJiun U · Jaehee ShinBrand Identity DesignJaehee ShinIllu ...

逛追波的人都会知道，很多人在评论UI设计作品的时候经常用clean（干净）来给予评价。UI作品干净会拉高设计感和档次感（所谓的‘高大上’）。 干净的设计主要用两种方法配合优秀的选图来完成。两种方法分别是阴影、留白。阴影和留白为卡片式APP设计带来了更多发挥的空间，过渡较好较浅的阴影给人干净的印象。 让我们来对比一下几种常见的设计方式 很普通的简约风格设计，将底部tabbar移到侧边的实验设计。页面有横划手势方便切换顶部tab。 如果配合了阴影+留白呢？ 仅仅增加了阴影，整个页面就有了空间感，相当于【三维留白】 留白过少会显得更加单调和拥挤，利用之前期刊提到的单侧大圆角和侧边导航来增加二维和三维的留白。 几乎所有的卡片式设计都运用了阴影感觉，增加三维留白的控件。注意，阴影边缘离卡片越近、不透明度高，说明卡片与底面越近。为了增加三维留白的控件，一般将阴影的不透明度调低、阴影模糊值调高、距离卡片的距离增大来保证三维留白的空间。但是注意不要留的太远，不透明度和距离之间的关系应接近现实。如果实在把握不了，Google的materialdesign可能会帮到你。 留白+阴影会给人乳化的感 ...

这周整理一下音乐类的产品设计。音乐类是几乎每个设计师都会尝试的产品（就像天气app等等）有很多有趣的设计可以用来分享。 这个设计打破了播放条只是直线的限制，并且通过上下滑动可以切换歌单等等的方便操作将专辑中的各个歌曲联系在一起。非常有创意的设计，但是没有歌词的显示，落地恐怕有点困难。但是这不妨碍他的创新点，非常令人震惊的进度条设计。 美观6分 实用4分 创新7分 入选 同样令人震惊的进度条设计，不仅是打破了常规和横向进度条，还将音频频谱放在进度条上，让用户更容易找到副歌部分。得益于纵向的进度条设计，进度条的可操作性就变得非常强。很棒的设计。同样没有歌词显示。但是整体画面使用了卡片阴影效果，这个效果的好处你会发现整个界面更加的简洁干净。十分喜欢这个作品。 美观7分 实用6分 创新6分 入选 常见的客户端的音乐类app设计稿都是采用大卡片设计，在国外这些作品之中很少能见到像国内大杂烩一样的界面设计。这个界面会有一点干净的效果，但是整体界面的信息密度还是比较弱，控制只有进度条和播放暂停可以控制，感觉不是很好。底部封面图的展示形式类似于几年前的win7效果，有点老套。 美观2分 实用1分 ...

首页的设计是用户除了开屏以外的直观印象，一个好的首页会让用户产生对该软件调性的直观认识，设计首页对于一个APP尤为重要。 我们在中国常见的APP都是那种堆叠和紧凑，每个点都要博眼球，每个颜色都是「不要像上吊似的」的老板喜好（上吊这句话来自得到）（据说容易过稿，后来跟风者认为别人都这么搞，还以降低用户学习成本为借口）。令人头大。上次看一篇文章说中国的APP普遍追求「大而全」国外的追求「小而精」，不否认环境的不同所造就的特色主义挨屁屁，但是作为一个对设计有追求的App，在头部市场已被占满的情况下，小而精的App才是新产品所应该做的。 那么在2019年7月，首页设计大多采用了banner改造+内容feed的搭配方式。这种操作是较为新颖的操作方式（至少在国内是这样）。有着不俗的界面视觉表现能力，并且界面逻辑清晰。我个人来讲非常喜欢。 人们已经看了太多的线性布局，看了太多了纵向滑动了。设计师在寻找突破的过程中找到了新颖的交互方案，在前沿领域不断探索。 （图片来自于互联网，版权归原作者所有。作者信息详见我的 Pinterest，仅供学习使用，请勿转载和商用。Hoocan 仅提供作品 ...

黑暗模式在mac10.14中开始普遍铺开，凭借苹果设备出名的开发者的跟进能力，很快，大多数常用应用已经支持了夜间模式。在不久的将来，黑暗模式将很快在ios新版本上线。黑暗模式不仅很受男性受众和工作者的喜爱，而且因为厂商采用AMOLED屏幕黑色不发光可以节约电能消耗。下面就来赏析一下黑暗模式的设计。相信能给你带来一些启发。 黑金配色有着高端、奢华的感觉。该配色用得类似金属色感觉，并且在右侧柱状图的数据可视化上还添加了光源反光效果，将现实感融入到黑暗模式的设计中。 同样做数据可视化，这个作品采用了常见的线性+渐变的方式。用alpha蒙版塑造高饱和度高亮度颜色的渐变显得更具夜光、时尚、魅力。 采用了令人惊叹的拟物开关方式。将电灯的灯绳和开关结合在一起，非常巧妙的界面设计。出乎意料，还有温情和深度。 常见的背景模糊的毛玻璃效果，一般用于娱乐性强的媒体app。毛玻璃给人一种魔幻和虚幻的感觉。但是最近我们看mac10.14中正减少对毛玻璃的使用，可能这也是一个信号。 现在设计稿也越来越多的向黑暗模式适配了。我们可以在UI中国、站酷上看到很多UI作品都对黑暗模式进行了设计。 （图片来自于 ...

在商业化比较严重和开发能力的多重考验、时间的限制下，现有市场的APP总是以相同的框架、相同的结构出现。说的好听是为了减少用户的学习成本，说的难听就是不愿意花更多精力去创新。但是现在已经有越来越多的APP已经意识到了创新给产品带来的用户粘性，我相信不久的未来创新将会是产品的核心竞争力。 我非常喜欢的微信读书APP首页 在本期主要介绍几个我非常欣赏的创意布局，它们给我带来了很多灵感。相信下次我做的APP作品（提前透漏一下还是社交产品）不只是在产品功能上有足够的创新点，还一定会有更多的界面创意。我在这里面就不说过多的文字了，相信这些界面只要对于UI有一定敏感度的人都能发现属于自己的亮点。 标注「实验设计」说明这个界面是我特别推崇的实验性界面，可能浸淫了很商业化环境很久的老UI或开发会嗤之以鼻的界面。 左时间右内容 侧边留白的不对称设计（实验设计） 侧边留白的阅读类应用设计（实验设计） 横纵结合feed（我都想将我的新人人换成这类交互，当时可能没有这么大胆） 气泡蒙版设计 tabs按钮点击扩展（实验设计） 左侧留白不对称式设计（实验设计） ...

最近在设计APP的logo标志，所以将Appstore排名靠前的app图标都截了下来，方便参考和设计。 刚开始是靠着进入Appstore的网页来截图，但是有些图不能截图必须要进iTunes，但是最新版的还不支持应用预览。。。凉凉，所以另辟蹊径，找到两个Appstore图标的下载地址。 plafer iOS icon官网地址： 引用站外地址，不保证站点的可用性和安全性 icon-finder plafer iOS Icon Gallery官网地址： 引用站外地址，不保证站点的可用性和安全性 iOS Icon Gallery iosicongallery

在设计界面的时候为了将主界面更加简单易用，经常会需要隐藏一部分内容或者有组织的划分这些复杂内容。今天这篇文章主要分享的是通过层级隐藏的界面方式。 这是一个非常流行的隐藏方式，甚至动效都非常容易完成。 视觉表现方法就是使用大圆角为底部。但用户触发入口时将画面上移，露出在“底部“隐藏的二级内容。二级内容主要是用用黑色/亮度低的背景。 无论是功能组件还是列表都可以采用层级式隐藏的表现手法。 这样做的好处主要是在于每一个功能切换一个页面会让用户操作起来变得复杂，每加载一个页面不仅需要时间，而且体验会出现断层，不够流畅。使用这种层级式隐藏用户只需要使用上滑手势就能够看到隐藏的功能。 这种方式还会给人一种真实的错觉。让人感受到第一个接触的一级框架是在高处、点击之后就会展现低处的东西。这和我们拉开抽屉的现实行为和视觉刺激相同，人们很乐意接受这种交互方式。 现在手机屏幕大多采用圆角设计，那么将带有圆角的整体屏幕上移会让这种体验更加真实和惊艳。 当然，有高层级点击展开低层级这种，也有低层级点击展开高层级悬浮窗。这种就比较常见了，现有的商业化app基本都会考虑过这种方式。已经见怪不怪习 ...

是的，我们真的需要傻大黑粗。 很多设计师知道傻大黑粗是设计趋势，但是只是知道它的空壳而不懂内涵和灵魂。只能照搬照抄，结果却差强人意。 首先为什么“傻大黑粗“成为了趋势？ 傻大黑粗的核心目标就是增强对比。人们在越来越浮躁的社会。时间很紧，几乎没有时间去享受生活，那么路边的广告、海报、网页的匆匆一瞥如何能让他们印象深刻？ 人们的记忆始终保持4个左右的工作记忆内容（其实低于公认的7个），那么简单粗暴的一句话、一个单词、一个词语对人的记忆远超于一个段落（即使是内容丰满、跌宕起伏、引人入胜的段落）。 段落写的再好，只是能增加转化率。但不得不面临的问题是，你已经将近九九成的用户拒之门外，即使转化率超高，也不会超过百分之一。（指海报等） 但是超短的短语、一句话即使没有造成转化，也进入了人们的记忆中。然后通过高频率反复出现、反复洗脑，那么就完成了从工作记忆到长期记忆的转化。人们会下意识的将你的产品作为优先选择。 这种设计已经成为趋势，人们被抖音、快手等产品不断刺激着并寻找刺激点。当网站使用这种所谓“傻大黑粗“的形式，无非增强了用户的视觉刺激。一时刺激一时爽，一直刺激一直爽。 在版式方面，大多数设 ...

对于设计与艺术的界限我们很难去清晰界定，但是艺术是设计的探索方向，算是先行者。类似于实验电子的感觉。所以我将这类还没有被市场所认同的探索性设计叫做 实验设计 这周介绍的实验设计方式就是大圆角设计了。据心理学实验表示，人们对于圆弧的东西更加喜爱，所以圆角矩形比矩形更讨喜我们就见怪不怪了。那么在最近这段日子突出视觉张力的时候，强烈的大圆角自当应走入人们的视野中来。 为了追求个性，人们渴望打破长期以来设计对对称的崇尚，用打破对称来表达自己对对称时代的不满，充分的表达了年轻一代设计师对于张扬的热忱。我对这种采用大圆角非对称的UI组件称之为： 单侧大圆角设计 我们很少见到现有app通过对与屏幕横向做文章的，因为碍于手持抓我的原因，一般手机的横向像素寸土寸金，所以一般采用市场上较为普遍和安全的feed流设计，这样做的好处就是能够在纵向添加内容。但是导致了市场上普遍app的设计趋同。 针对有艺术渴望的UI设计师来说，在横向像素做文章意味着大量的留白（在纵向滑动的情况下留白的面积依然用百分比来形容，而不是单独的像素数了）。所以如何把握留白的尺寸，既能增强设计感，又能保证空间资源不浪费。 当然， ...

通过抠图的方式在app展示内非常出效果，抠图可以在二维扁平化的UI稿中体现出空间感，让人爱不释手。 公众号内原文标题： Hoocan 01 | 趋势设计-抠图大法好，突围设计方式的运用 我称这种设计方式为：突围 人们越来越渴望跳出扁平化这个行列，但是仍然想保留扁平化所带来的高效率更清晰直观的优点，如果想让你的作品更加出彩，可以尝试抠图展示这种方式。做动效的时候可以做一些视差效果。 抠图大法的首个要素就是出画框，抠图的内容一小部分（约4分之一到3分之一）突破了界限，让人有一种从矩形（圆角矩形）的束缚中脱离的感觉。非常有设计感。 这种方式也有一定的局限性，在视差效果的落地上对开发要求比较高。虽然有很高的视觉效果但是牺牲了一定的操作便利性和效率。如果在交互上使用突围方式很可能违反了用户的使用习惯，用户需要适应。并且突围在交互上的效率不如直接的瀑布流形式，占用空间大、浪费的空间比较多。所以这种方式是一种设计感很强但是实用性一般的设计方法。 所以看你所做的app类型。如果是公司官方商城、文学、音乐、影视、设计类的应用可以推荐应用这种方式作为一个提案，一定会让大家眼前一亮。 抠图 ...

Hoocan在公众号中发布了，我在博客中再发一遍。 在如此忙碌的日子里，又要忙毕设又要上班，但还是有一个想要运营公众号的执念。在2014年2月就注册了第一个微信公众号，到了17年6月再次换号，后来为了换公众号的微信号在17年7月注册了现在的这个号。运营公众号这个想法已经扎根很多年了。 我在给自己的公众号做一个定位：我是要用公众号做自媒体来盈利吗？显然不是，我不想通过公众号盈利，所以就不需要那么多人来关注。我是要用公众号做我的作品发布渠道？虽然不想这样，但是我确实这么干了。。 这么长时间我都想做公众号，但是一直没维护的原因其实就是没给它找一个比较好的定位。它究竟要干什么？要做什么内容？佛系不需要别人看还是需要推广？ 想了很久吧。这应该是第二次重启公众号。之前作为作品分发感觉没什么用（我的作品都发在UI中国上），现在我给予了这个公众号一个全新的定位。 因为我有每日查看优秀国内外作品的习惯，并且遇到好的作品都会分享。之前一直在pinterest上分享我所喜欢的pin图，截止到写文章的时候我的月阅读量已达到13万。 但是我觉得我只能分享照片作品，却不能将我的理解和观点发出来。所以我找到 ...

2020新年特供色：竹红用于诠释一个崭新的2020年，精心构思的经典中国红辅以硝烟的熏染，使得不仅充满了喜悦和欢腾，还蕴含了些许年代感和时光飞逝的伤感。 竹红有着非同凡响的影响力，它不仅能够让人更加活泼的渴望未来，还有一些谨慎和沉淀。历久弥新的竹红更多的体现了经典和繁华。它并不是浮萍无根，深邃的内在体现着力量。竹红降低了人们对红色的敏感，它没有十分耀眼，并且绝不平淡。 也许世界对于你或令人兴奋或沉闷无奇，但竹红不仅激励着我们的自信，还鼓舞人们将乏味变得充满幸福。竹红色照亮道路，却没有令人浮躁。竹红在细微之处寻找平衡，展现它非同凡响的力量。 关于如何使用它？

Sketch有一个模仿XD的超好用的一个功能，Data。我经常用它为组件提供数据。今后我会花一些时间将一些我使用的资源库进行共享。这篇博客就是来介绍资源库是如何添加的。下载的内容格式一般为txt文本格式：作为文本内容的替换 包含大量图片的文件夹：作为图片内容的替换 建立文件夹首先建立一个固定的不随意移动位置的文件夹作为资源库的文件夹。 在Sketch中选择偏好设置，进入资源库 选择Data-添加资源库 如果是图片那就添加文件夹，如果是文本就添加文本。 相关阅读：如何建立资源库？ 如何将资源库（Data）导入到Sketch? 如何插入资源库（Data）中的资源?

文本类型资源库 文件格式：txt 数据每行一个，例如 0-10 数字组成的资源库 1234567891012345678910 图片类型资源库文件格式：文件夹 每个图片为一个数据，堆到资源库中 相关阅读：如何建立资源库？ 如何将资源库（Data）导入到Sketch? 如何插入资源库（Data）中的资源?

为什么要使用Sketch资源库 目前自动填充一般使用的是SKetch的资源库（Data）填充，另一种就是使用插件填充。使用资源库填充的优点就在于资源都是由你进行收集整理，资源质量可控；但是缺点也是这一点，你需要自己去收集资源。所以用哪一种看看你如何权衡。当然小孩子才做选择，设计师应该“我全都要”。添加资源库 如果你还没有添加资源库请访问：如何将资源库（Data）导入到Sketch?，去添加资源库。 选中需要填充的元件 在toolbar中选择资源库（Data） 选择一个资源库因为我选中的是文本元件，所以只能选择文本类型资源库 选择成功会自动填充 填充图片为相同道理 非常高效率的设计功能。赶快试试吧。 相关阅读：如何建立资源库？ 如何将资源库（Data）导入到Sketch? 如何插入资源库（Data）中的资源?

在使用蓝湖的过程中一直会出现各种各样的bug活着体验上的问题。有的时候我们给图层编一个组、加一个symbol等都无法查看蓝湖的标注。其实除了我们常用的单（双）击以外，也可以使用右键单击的方法来进行查看。 右键单击需要查看的组件，选择选中图层，你就可以看到以设计师的视角的图层列表。选择你要查看的组件所对应的图层。 选择之后可以按照鼠标悬浮来显示指定组件的位置。

本文为转载文章，以下内容来源于 用惯英文版 如何让Sketch53以上中英文互换 tianshi198892 使用「终端」输入命令 切换到英文defaults write com.bohemiancoding.sketch3 AppleLanguages '(en)' 切换到中文defaults write com.bohemiancoding.sketch3 AppleLanguages '(zh-CN)'

这个是群里有人问的问题，找了很多ico生成的网站，在这里推荐一个。 1.将设计软件中制作的图标生成PNG格式的图片。 2.使用PNG转ico格式在线转换器进行格式转换 引用站外地址，不保证站点的可用性和安全性 在线转换图标文件 aconvert 3.上传png图片并选择尺寸 4.右键单击输出文件，选择链接存储为 1还有其他问题可以到我的公众号给我留言，如果对这个文章感到问题可以在下方评论。```

Sketch不支持旋转画板，蓝湖也不支持。当你的设计稿是横屏但是需要竖屏的标注（便于开发）时，土方法是通过sketch的横竖屏切换进行变更。但是更改完里面的元素并没有旋转： 更改之前： 更改之后： 当然，还有人会选择选中画板中的所有元素，然后cmd+G建立群组，然后再旋转。这样虽然能解决一时问题，但是非常难以修改。一些部分也会出现半个像素的像素不对齐情况。在这里推荐使用symbol来进行画板旋转。 1.选中画板并创建组件 2.创建一个纵向画板 3.将该画板组建插入到新建的画板 4.旋转组件即可 通过这种方式之后将旋转后的画板进行上传，修改的时候更改横版的内容即可。是一种上传和更改非常方便的方法。 1还有其他问题可以到我的公众号给我留言，如果对这个文章感到问题可以在下方评论。```

移动端适配全屏播放能考虑到是采用计算StatusBar的高度来进行适配。为了旋转屏幕时防止左侧旋转和右侧旋转位置位置不同，所以全屏状态下的左右两次均留出StatusBar的高度。可以注意到bilibili的进度条距离左侧屏幕边缘约有52（44+8）pt。 （疑似采用状态栏高度计算的斗鱼） （疑似采用状态栏高度计算的bilibili） （疑似采用状态栏高度计算的爱奇艺） 当然，因为大多数视频资源均为16:9，所以部分播放器还可以考虑使用按照屏幕宽度进行比例计算设置播放器按钮的位置。来减少播放器控件直接显示在视频上而不是在视频、黑边各有一部分造成的割裂感。 （疑似采用屏幕宽度比例的优酷） （疑似采用状态栏高度计算的腾讯视频） 采用何种适配方式主要取决于大多数资源的类型。如果大多数为电影等比例大于16:9的视频，那么使用按照状态栏高度计算法更加适合；如果大多数视频使用16:9的视频，那么使用屏幕宽度的比例计算方法更为合适。

非常喜欢该作者的怪诞插画风格。 作品地址： 引用站外地址，不保证站点的可用性和安全性 Could I have done things different? behance Could I have done things different? This is a series of illustrations about a question I ask myself. With Love 🌼

本文为转载文章，以下内容来源于 中文文案排版指北 sparanoid 空格「有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。 与大家共勉之。」——vinta/paranoid-auto-spacing 中英文之间需要增加空格正确： 在 LeanCloud 上，数据存储是围绕 AVObject 进行的。 错误： 在LeanCloud上，数据存储是围绕AVObject进行的。 在 LeanCloud上，数据存储是围绕AVObject 进行的。 完整的正确用法： 在 LeanCloud 上，数据存储是围绕 AVObject 进行的。每个 AVObject 都包含了与 JSON 兼容的 key-value 对应的数据。数据是 schema-free 的，你不需 ...

这是基于bootstrap框架的断点 设备 断点区间 设计稿宽度 手机 0-576px 576px 平板 576-768px 768px 笔记本 768-992px 992px 独立显示器 1200px以上 1200px 相关阅读：响应式布局设计

很多小伙伴使用iconfont来做为app/网页中的图标，但是这些设计小伙伴使用的是Sketch来进行设计。如果你是用illustrator来进行设计，那么直接生成的svg不会有任何问题，只需要注意以下几点： 1.最好扩展你的图标（转曲）2.将多个相连的路径合并3.不要使用剪切蒙版4.不要使用渐变色 绘制规则： 当然，在sketch做完的图标需要放到Ai中才能生成完好的svg进行上传。这得益于Ai强大的svg兼容性。具体的步骤如下： 一、下载iconfont模版立即下载 二、在sketch中选中图标，选择复制svg代码 三、打开下载的模版文件 四、cmd+V（ctrl+V）粘贴代码 五、缩放至合适大小从模版的辅助线中我们可以看出这个辅助线目的是为了每个图标的面积相同，这样的话从视觉观感上来说图标的大小也会趋于一致。 长方形图标示例 纵向图标示例 正方形图标示例 圆形图标示例 六、存储为svg格式 默认的选项就可以 七、上传图标选择我的项目 选择上传图标至项目 上传svg文件 填写图标信息 图标就上传成功了！ 以上就是本教程的全部内容。感兴趣的朋友可 ...