何領域都會有各式各樣相關聯的網站，比如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;
	}
}