网页制作如何增加矢量图标，老司机才知道的技巧
了解ttf字体文件本身的现有Unicode代码后，如果阿里巴巴图库中所选图标的Unicode代码与其重复，请点击左下角的修改按钮进行修改，今天小编主要给大家分享网页制作如何增加矢量图标，希望对你们有帮助！
众所周知，电脑中有两种图像，一种叫做点阵图（位图），另一种叫做矢量图。
点阵图放大图片时，看起来会模糊不清，但矢量图不会。因此，越来越多的人开始使用矢量图作为网页图标。许多人会遇到这样的情况，他们会在网站上下载一个带有矢量图标的字体文件，在后期开发中，图标需要不断更新和增加。如果继续下载ttf字体文件，它会占用大量空间，为了增加图标，会下载几个文件的情况。
首先，我推荐两个有矢量图标库的网站：
阿里巴巴矢量图标库、谷歌浏览器里的矢量图库
1.如何找到需要的图标
首先，进入网页：阿里巴巴矢量图标库；
在搜索框中输入所需的图标名称，如“主页”、“策略”，并确认；
找到你想要的图标，向上移动鼠标，选择左下角的“购物框”;
在右上角的“存储架”中，将出现一个已收藏的图标；
然后搜索“策略”，找到图标并将其放入“存储架”;
单击“登录”选择一种登录方法；
现在将鼠标移动到“存储架”存储，单击“另存为项目”，然后单击“保存”。
2.将图标添加到已有的字体文件
现在找到我们已经有的字体文件“new-iconfont.ttf”，用“fontlab”软件打开该文件；
打开后，可以看到ttf字体文件中的图标，每个图标都有自己的统一代码，因为每个图标的统一代码相当于自己的“身份证”。当需要使用外部文件中的图标时，需要此“身份证”;
双击其中一个图标，可以清楚地看到图标上方的“Unicode”，该图标是“E808”;
了解ttf字体文件本身的现有Unicode代码后，如果阿里巴巴图库中所选图标的Unicode代码与其重复，请点击左下角的修改按钮进行修改；
确认修改后，单击“下载到本地”并解压缩，将出现几个字体文件和css文件；
现在你可以使用Fontlab软件打开里面的ttf文件；
选择要增加的两个图标，然后单击鼠标右键中的“复制”，然后返回到先前字体的文件；
最后选择一个图标，右键单击选择“Append Glyphs”以增加所需的图标；
使用快捷方式Gtrl+Alt+G将其保存为ttf文件。
网站设计注意事项
域名的挑选必须精准反应出网站的性质，而且越简短越容易记忆越好，一个好的域名对SEO的优化有不可估量的作用。下面介绍网站设计注意事项，希望可以帮助到各位。
选择一个好的域名
域名的挑选必须精准反应出网站的性质，而且越简短越容易记忆越好。一个好的域名对SEO的优化有不可估量的作用。
选择一款适合自己的虚拟主机/空间/服务器
根据自己的项目选择一款适合自己的主机是非常重要的，小型项目放在空间也足够用。如果项目过大，IP流量多，放在云空间可能导致无法支撑用户访问，这时候就要放在云服务器上。所以我们需要要根据自己需求去选择一款合适的主机，既不浪费，又能支撑用户访问。
风格统一
用户可能会从不同的设备上访问你的网站，可能在桌面端上，笔记本电脑、平板电脑和手机上。而作为用户体验设计的工作目标之一，就是尽量确保无论在哪个设备上打开，都实现统一的风格。
导航清晰
导航是网页可用性的基石。如果用户无法通过导航找到自己想要的内容，那么无论网站设计多好，都是不达标的。所以要尽量确保导航清晰简洁，让人一眼就能明白。同时也有助于排名提升。
重点突出
搭建网站，必须要传达出你所想表达的东西。如果重点不够突出，完全达不到想要的效果，最终只会让人摸不着头脑，所以抓重点是非常重要的一点。
实用漂亮
网站必须要精美大方，才能吸引用户，同时实用性要强，外观不应该影响本身的实用性，不能为了美观而牺牲实用功能。如何追求二者和谐统一才是最重要的一点。
响应式网站设计的注意事项
1、轮播幻灯片：尽量隐藏导航
在桌面端上导航的存在可能没什么，但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。而诸如左右切换的按钮和标明浏览位置的圆点，最好是在光标移动上去之后再显示，这样的设计不仅可以避免用户分心，而且能避免内容和导航元素之间的冲突，降低整体设计的混乱感。
2、避免使用大量肖像类图片
如果你设计的图片库是类似网格布局的话，你可能会尽量挑选和横向的图片，或者方形的图像。这样的设计在兼容桌面端设计的同时，还可以让用户在小屏幕上更好地查看。人像类的图片在手机上适合纵向屏幕上浏览，如果横过来的话，图片会显得特别小，浏览会相当不方便。横向是最佳的，如果不行的话，使用方形的图片会是很好的兼容性方案。一个响应式的图片库的设计需要考虑多种因素，请务必牢记用户的不同浏览场景。
3、在移动端上支持手势操作
触摸屏上使用手势操作几乎是用户的本能了。所以，在设计响应式图片库的时候，滑动操作等手势操作赋予用户更多的权力，让体验更加逼真。在移动设备上使用箭头导航太过于乏味、老旧，手势交互更加自然也更符合真实的交互体验。
4、在移动端上禁用lightbox效果
Lightbox效果大概是桌面端网页上最常见的图片浏览模式，图片以弹出框的形式呈现出来，能随着屏幕尺寸和鼠标操作来缩放。在产品展示的页面当中，这种图片浏览模式的使用尤其广泛和频繁，但是在移动端上的时候，它可能会引起大量的用户体验上的问题：盖住其他的交互控件、无法退出、尺寸不合适等等。
5、让导航元素低调不招摇
如果你使用幻灯片的形式来展现大量图片组成的图片库的时候，导航就显得尤为重要了。用户肯定不想在等待加载中耗费太多的时间，他们依然会按照自己的速度点击，翻页，进入，退出，保持，等等。所以，当你要使用导航元素的时候，一定要设计在让他们觉得不碍事的地方。不要让导航的小圆点盖在文本或者链接上，并且避免复杂的控制方式，这样会分散用户注意力，并让整个页面的设计都趋于复杂。可点击跳转的导航小圆点能让用户快速跳转到他们想要去的地方，提升效率，降低无谓的消耗。当然，不要弄的太复杂！平衡最重要！
6、不要让图片和视频混淆
通常情况下，不同类型的媒体混到一起没啥问题，但是用户肯定不想翻看图片的时候，突然发现下一张图片变成了视频，突如其来的声音和额外的流量消耗绝对是他们不愿意碰到的事情！将视频和图片分割开来，让他们知道接下来的会是什么东西，不要让意外发生。
小心无大错，今天说的规则并不复杂，但是当你开始为图片库进行响应式设计的时候，这些鸡零狗碎的问题开始显现，在意想不到的地方影响整个设计和体验。以用户为重心，小心绕过这些坑，会让你的响应式网页更优秀，也更快搞定。
