何领域都会有各式各样相关联的网站，比如PPT，就会有图片素材网站、模板素材网站等等。

网站有很多，一个个收藏也很麻烦，这才有了网址导航。它的出现在很大程度上方便了我们寻找各领域的垂直网站。

那么究竟有哪些既实用又便捷，界面清爽而内容优秀的导航呢？今天三顿就来给大家推荐一些我自己在用的网址导航。

-------------------------------------------

PPT类

做为一只热爱PPT的三顿，首先要给大家推荐的当然是PPT类的网址导航啦。有关PPT的网站，无非技巧、灵感和素材这三个方面，哪么去哪里可以找到这些网站呢？

▼ www.hippter.com

一直给大家推荐，也从未被超越过。三顿和身边的设计师小伙伴都在用的一个资源导航。页面经过很多次的改版，非常清爽。

推荐它的最大理由是内容全、覆盖面广，不管是模板图片素材，还是PPT的灵感创意收集，都能在里面找到对应的网站。

除此之外它还推荐了很多大神的微博和作品集，完全可以满足大家的PPT学习需求。

这个导航也推荐了很多有趣好玩的小工具，等待你去发现哦。

▼ thestocks.im

这是一个综合性的素材搜索引擎，涵盖了大部分国外主流的素材下载网站，非常全面，并且所有网站都是无版权可以直接下载使用的。

本来这个网站只支持搜索图片，而最近经过升级后，图标、配色、样机乃至字体素材都可以在这个网站中进行检索。

当然，因为是国外的网站，虽然不用翻墙但是打开速度比较慢。相较于它强大的功能，三顿觉得还是可以接受的。

-------------------------------------------

设计类

设计类网址导航推荐的网站会和前面的稍有重叠，当然也多了很多专业的内容，给大家做一个推荐。

▼ hao.uisdc.com

这个网站的标语叫设计从这里开始，的确是这样，内容覆盖了多个领域，非常经典而实用的一个导航。

值得称赞的是它在页面底部为大家准备了很多优秀的设计类文章和辅助工具，比如取色器、参考线插件等等。

▼ idesign.qq.com

腾讯出品，一个非常有特色的网址导航。和传统的导航不同，它采用的是一种订阅的模式，定期推送优质内容。

大家可以从左侧自主选择订阅源，登陆后还支持自行添加。省去了在各个站点来回切换的烦恼，关注的站点有更新也能第一时间看到。

当然，它也没有摒弃传统导航，在上方导航栏选择网址，就可以看到全面的网站推荐，非常给力。

-------------------------------------------

新媒体运营

▼ www.toolfan.cn/gongzhonghao.html

和刚才的Hippter导航是同一位作者，收录了很多与新媒体运营有关的网站和实用工具，比如二维码美化，短连接生成等等。

-------------------------------------------

音视频

做为一只非常无聊的三顿，听歌看电影也是必做的功课之一。那么哪里可以找到这类的资源呢？给大家推荐两个导航。

▼ www.zaimusic.cn

一个非常全面的音乐类网址导航，各种音乐收听网站都能在里面找到。

惊喜的是，除了网站外还整合了很多优质的音乐类公众号，满足大家不同的需求。

▼ www.dydh.org

这是一个电影类的网址导航，除了目前的主流视频媒体外，还提供了很多电影网站及电影资讯。

-------------------------------------------

综合类

上面这些都是三顿比较喜欢的导航，那么如果大家想找到更多其他领域的网站可以去哪里呢？这就给大家推荐一些综合性的网址导航。

▼ gate.guokr.com

果壳网出品，界面非常的小清新。各种领域的网站都有涉及，不管你是一个程序猿还是一个背包客，还是一个像三顿这样爱生活爱学习的五好少年，都能在这里找到相关的网站。

很有意思的是在页面右上角还有一个随机访问的功能，点击一下就可以打开你自己的发现之旅。

▼ weavi.com/10981/

这个是由知乎作者@鲁思宣自己做的一个网页，名字叫导航网站的导航。

除了推荐了很多有意思的网站以外，还为大家整合了各行各业出色的导航网站，如果大家看完三顿的文章还不过瘾，可以去这里翻一翻。

-------------------------------------------

三顿对好的网址导航的界定第一是覆盖面广，该有的网站都要有。第二是功能多样，除了网站推荐外应该有自己的特色。第三是界面清爽，少点广告啊！

而以上就是三顿精选给大家的一些网址导航，当然每个人的偏好都不同，我更建议大家自己动手做一个专属你的网址导航。

▼ 推荐：navi.chenqiwei.com/

使用方便，将自己常用的网站添加到键盘上的每一个字母中，以后按下这个字母就可以达到设置好的网站，非常适合作为浏览器的首页。

今天的安利就是这些，希望对大家有所帮助。当然三顿相信你们也一定有自己喜欢的导航，也欢迎留言补充哦~

<svg width="0" height="0">
			<defs>
				<filter id="goo">
					<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
					<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
					<feComposite in="SourceGraphic" in2="goo" operator="atop" />
				</filter>
			</defs>
		</svg>
		<div class="target">
			<div>
				<i id="ball1" class="ball"></i>
				<i id="ball2" ref="ball2" class="ball"></i>
			</div>
		</div>
<div class="menu">
			<div class="menu-item" @click="updageMenuItem(0)">
				首页
				<span :class="{'menu-item-bg': menuActive==0}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(1)">
				发现
				<span :class="{'menu-item-bg': menuActive==1}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(2)">
				消息
				<span :class="{'menu-item-bg': menuActive==2}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(3)">
				我的
				<span :class="{'menu-item-bg': menuActive==3}">
					<i class="iconfont"></i>
				</span>
			</div>
		</div>

<script>
updageMenuItem(index) {
			this.menuActive=index;
			let ball2=this.$refs.ball2;
			Array(4)
				.fill(0)
				.map((item, it)=> {
					ball2.classList.remove('active' + it);
				});
			setTimeout(()=>{
				ball2.classList.add('active' + index);
			},100)
		}
</script>

<style lang="less" scoped>
.profile {
	height: 100%;
	background: #aaaa7f;
	font-size: 14px;
	.menu,
	.target {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50px;
		left: 0;
	}
	.target > div {
		filter: url('#goo');
	}
	.menu {
		display: flex;
		z-index: 5;
		background: #fff;
		.menu-item {
			flex: 1;
			color: #333;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			padding-bottom: 10px;
			position: relative;
			span {
				position: absolute;
				height: 35px;
				width: 35px;
				background: #aaaa7f;
				border-radius: 50%;
				left: 0;
				right: 0;
				margin: auto;
				top: 0;
				opacity: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				i {
					color: #fff;
					font-size: 20px;
				}
				&.menu-item-bg{
					animation: menuItemBg .5s .2s forwards;
				}
			}
		}
	}
	.ball {
		width: calc(100% + 60px);
		height: 50px;
		border-radius: 0;
		background-color: #fff;
		position: absolute;
		left: -30px;
		margin: auto;
		z-index: 1;
	}
	#ball2 {
		left: 0;
		top: 0px;
		width: 50px;
		height: 50px;
		margin: auto;
		border-radius: 50%;
		&.active0 {
			left: calc(((100% / 4) - 50px) / 2);
			animation: ballUp .5s forwards;
		}
		&.active1 {
			left: calc(((100% / 4) - 50px) / 2 + 100% / 4);
			animation: ballUp .5s forwards;
		}
		&.active2 {
			left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 2);
			animation: ballUp .5s forwards;
		}
		&.active3 {
			left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 3);
			animation: ballUp .5s forwards;
		}
	}
}
@keyframes ballUp {
	from {
		top: 0;
	}
	to {
		top: -25px;
	}
}
@keyframes menuItemBg {
	from {
		top: 0;
		opacity: 0;
	}
	to {
		top: -15px;
		opacity: 1;
	}
}