合肥網(wǎng)站建設(shè)公司解開(kāi)您對(duì)SEO的曲解

　　在模板滿(mǎn)天飛的今天，開(kāi)個(gè)博客似乎是一件特別簡(jiǎn)樸的事情，不是么?平臺(tái)就在那兒擺著，博主只需要去發(fā)文就好了，這有何難?

　　但是實(shí)際的狀況是，網(wǎng)站和博客成千上萬(wàn)，想要用戶(hù)留意到你，關(guān)注你，并不是一件簡(jiǎn)樸的事情。你需要怎樣做才能從大量的同類(lèi)中脫穎而出呢?

　　打造一個(gè)漂亮的博客并不要求你從頭搭建整個(gè)布局，你可有充分運(yùn)用現(xiàn)有的模板，為它搭配上一個(gè)足夠漂亮又恰如其分的Banner圖，加上一個(gè)走心有趣的標(biāo)題，這樣一來(lái)可以更有效地吸引目標(biāo)讀者和用戶(hù)。想想看，當(dāng)用戶(hù)打開(kāi)一個(gè)網(wǎng)站的時(shí)候，最先展現(xiàn)出來(lái)的就是網(wǎng)站的頁(yè)頭，用戶(hù)是否會(huì)停留很大程度上在這一刻有了決定。設(shè)計(jì)一個(gè)足夠優(yōu)秀的網(wǎng)站頁(yè)頭長(zhǎng)短常有必要的。

　　那么到底要怎么做呢?空口無(wú)憑，讓下面50個(gè)設(shè)計(jì)案例為你展示一下效果吧。

　　1、功能說(shuō)明

　　博客The Everywhereist 的博主是一位重度旅游興趣者，她和她丈夫常常滿(mǎn)世界溜達(dá)，留下他們的印記，并在博客上直播他們的旅行。護(hù)照、輿圖、膠卷都是他們?cè)谌�世界旅游的明證，而博客Banner圖上的這些元素也足夠讓你信服。

　　2、讓標(biāo)題成為為你的標(biāo)志

　　52 Weeks of UX，單看名字你就知道這是一個(gè)全年無(wú)休的用戶(hù)體驗(yàn)相關(guān)的博客，它的頁(yè)頭足夠簡(jiǎn)樸也足夠光鮮，你很清晰你接下來(lái)閱讀的內(nèi)容一定是UX相關(guān)的文章。

　　3、類(lèi)型化的設(shè)計(jì)

　　Trent Walton 的網(wǎng)站就是這么做的，在標(biāo)題的選取上更加類(lèi)型化，這樣一來(lái)，網(wǎng)站上不同文章在標(biāo)題上有顯著的區(qū)分，也更加輕易吸引細(xì)分用戶(hù)。

　　4、展現(xiàn)動(dòng)效

　　動(dòng)效總會(huì)比靜態(tài)的元素更加吸惹人，而作為一個(gè)有逼格的網(wǎng)站博客，VOTD 會(huì)在你打開(kāi)網(wǎng)站的時(shí)候，加在一個(gè)漂亮的LOGO動(dòng)效，布滿(mǎn)質(zhì)感的LOGO在白色的背景上逐步展開(kāi)，這種動(dòng)效經(jīng)常會(huì)讓人愛(ài)不釋手。

　　5、使器具有表現(xiàn)力的字體

　　The Wanderlust Project 的頁(yè)頭就用了一種非常有性格的手寫(xiě)風(fēng)字體來(lái)書(shū)寫(xiě)標(biāo)題，這不僅非常抓眼球，而且當(dāng)字體運(yùn)用到配圖當(dāng)中之后，顯得網(wǎng)站還很有一致性。

　　6、白底黑字總不錯(cuò)

　　在網(wǎng)頁(yè)排版中，白底黑字這種經(jīng)典的搭配總歸是不會(huì)錯(cuò)的，不外字體的性格和排版的方式會(huì)決定整個(gè)網(wǎng)站的氣質(zhì)。The Socialite Family 就是一個(gè)典型的時(shí)尚網(wǎng)站，博文以時(shí)尚雅致的室內(nèi)設(shè)計(jì)為主，字體選取也優(yōu)雅得體。

　　7、讓LOGO處于中央位置

　　Premium Pixels 的網(wǎng)站中集合了大量的設(shè)計(jì)文章和資源，頁(yè)頭中最醒目的就是網(wǎng)站那個(gè)炫酷的LOGO，當(dāng)鼠標(biāo)懸停在上面的時(shí)候會(huì)變化。網(wǎng)站內(nèi)容很豐碩，也許你想要的資源。

　　8、字體排版和插畫(huà)搭配起來(lái)

　　這個(gè)網(wǎng)站的內(nèi)容是關(guān)于如何給孩子們做飯的，網(wǎng)站頁(yè)頭不僅采用了主題相關(guān)的插畫(huà)，而且結(jié)合了效果不錯(cuò)的文字排版，結(jié)合獨(dú)特的配色，讓整個(gè)頁(yè)面看起來(lái)很好吃。

　　9、縮小頁(yè)頭字體

　　The New Minimum 是一個(gè)時(shí)尚數(shù)字雜志，纖細(xì)而現(xiàn)代的頁(yè)頭字體和有限的導(dǎo)航功能讓整個(gè)頁(yè)面看起來(lái)非常簡(jiǎn)約。

　　10、大膽勇敢用色

　　Joy the Baker 在頁(yè)頭文字底部使用了水彩質(zhì)感的襯底，讓整個(gè)頁(yè)頭的吸引力一下子晉升了上來(lái)。

　　11、高清大圖頁(yè)頭

　　一圖勝千言。I Am a Food Blog 作為一個(gè)美食類(lèi)博客，它的設(shè)計(jì)在同類(lèi)中并未幾見(jiàn)，設(shè)計(jì)師將導(dǎo)航欄縮減到非常小，然后用全屏輪播大圖充塞了整個(gè)界面，內(nèi)容點(diǎn)題，也布滿(mǎn)了視覺(jué)沖擊力。

　　12、加入紋理

　　Lark and Linen 是一個(gè)室內(nèi)設(shè)計(jì)的博客，設(shè)計(jì)師在頁(yè)頭標(biāo)題中選用了一種手寫(xiě)字體，并為字體疊加了富有質(zhì)感的紋理，這和博客的主題顯得非常的貼合。

　　13、文字加插畫(huà)

　　Keiko Lynn 這個(gè)站點(diǎn)同樣采用了靜態(tài)的插畫(huà)和文字標(biāo)題來(lái)設(shè)計(jì)頁(yè)頭，為了營(yíng)造俏皮可愛(ài)的氛圍，配色和字體樣式的選取都更加的鮮艷而花哨。

　　14、使用夸張的字體尺寸

　　大天然會(huì)更加醒目。這個(gè)名為 Good Moods 的網(wǎng)站將網(wǎng)站名稱(chēng)用超大的字體展現(xiàn)在網(wǎng)站首頁(yè)上，簡(jiǎn)直就是一個(gè)直接大膽勇敢的“你好”，即使在相對(duì)出位的這類(lèi)博客設(shè)計(jì)當(dāng)中也是相稱(chēng)少見(jiàn)的手法。

　　15、布滿(mǎn)創(chuàng)意的圖案

　　The Five O’Clock Cocktail Blog 是一個(gè)關(guān)于雞尾酒的博客，設(shè)計(jì)師在設(shè)計(jì)頁(yè)頭的時(shí)候，將雞尾酒羽觴的元素融入到頁(yè)頭，點(diǎn)題又視覺(jué)化。線性圖標(biāo)拼貼式的圖案不僅不會(huì)喧賓奪主，而且極具風(fēng)格化。

　　16、制造視覺(jué)縱深

　　Friend of Type 的網(wǎng)站中集結(jié)了很多涂鴉風(fēng)格的玄色圖標(biāo)，頁(yè)頭則采用了綠色的涂鴉字體作為區(qū)分，頁(yè)頭和遠(yuǎn)景的內(nèi)容之間加上淺暗影來(lái)營(yíng)造層次感和視覺(jué)縱深，讓整個(gè)網(wǎng)站顯得更加層次分明。

　　17、保持極簡(jiǎn)

　　Freunde Von Freunden是一個(gè)專(zhuān)注創(chuàng)意工作者專(zhuān)訪的博客，它的名字是德語(yǔ)，意為“朋友的朋友”。網(wǎng)站設(shè)計(jì)風(fēng)格極簡(jiǎn)而有品位，這種貫串始終的風(fēng)格在頁(yè)頭上體現(xiàn)出來(lái)，給人感覺(jué)也非常不錯(cuò)。

　　18、獨(dú)樹(shù)一幟的LOGO

　　假如你的網(wǎng)站擁有一個(gè)設(shè)計(jì)足夠優(yōu)秀的LOGO就讓它展現(xiàn)出來(lái)吧，Good Design 就將自家的LOGO置于頁(yè)頭正中心，醒目而到位。

　　19、漂亮的手寫(xiě)字體LOGO

　　很多時(shí)尚類(lèi)的網(wǎng)站會(huì)采用這樣的頁(yè)頭設(shè)計(jì)，手寫(xiě)風(fēng)格的LOGO加上簡(jiǎn)約的導(dǎo)航設(shè)計(jì)，將自家品牌的氣質(zhì)借由強(qiáng)烈的對(duì)比和個(gè)性化的設(shè)計(jì)表現(xiàn)出來(lái)，配合公道的留白與品牌化的配色，網(wǎng)站會(huì)給人一種雅致而專(zhuān)業(yè)的感覺(jué)。

　　20、設(shè)計(jì)一款獨(dú)特的圖案

　　現(xiàn)在很多網(wǎng)站的LOGO會(huì)采用抽閑而藝術(shù)化的圖案，優(yōu)雅、獨(dú)特而且布滿(mǎn)了現(xiàn)代風(fēng)，這樣的圖案可以很好地和時(shí)下流行的現(xiàn)代風(fēng)結(jié)合到一起，但是又不會(huì)給人過(guò)強(qiáng)的品牌LOGO的感覺(jué)。

　　21、字體搭配

　　和撞色是一個(gè)道理，兩種不同風(fēng)格的字體在有的場(chǎng)合會(huì)營(yíng)造出強(qiáng)烈的錯(cuò)位感，這種錯(cuò)位感假如拿捏得好會(huì)非常吸引眼球又不會(huì)顯得太出戲。Homey Oh My 這個(gè)網(wǎng)站的頁(yè)頭就是這樣來(lái)營(yíng)造視覺(jué)重心的。

　　22、漂亮的輪播圖

　　簡(jiǎn)約的導(dǎo)航、整飭的標(biāo)題和漂亮的輪播圖是 Harper and Haley 的首頁(yè)的特色，而其中最吸惹人的是輪播圖的選取。

　　23、闊別中心的標(biāo)題

　　別出心裁的標(biāo)題設(shè)計(jì)也長(zhǎng)短常吸惹人的，就像Lust For Life的頁(yè)頭設(shè)計(jì)一樣，左對(duì)齊的標(biāo)題不僅采用了獨(dú)特的手寫(xiě)字體，而且是動(dòng)態(tài)的。

　　24、極簡(jiǎn)化

　　和保持簡(jiǎn)約的風(fēng)格不同，Lined and Unlined 的網(wǎng)站設(shè)計(jì)更偏向于極簡(jiǎn)化的設(shè)計(jì)，最大限度的簡(jiǎn)化整體設(shè)計(jì)，字體和色彩盡量簡(jiǎn)樸，讓真正有趣的內(nèi)容凸顯出來(lái)。

　　25、居中放置LOGO

　　Lauren Liess 也是一個(gè)經(jīng)典優(yōu)雅的設(shè)計(jì)博客，和同類(lèi)的時(shí)尚網(wǎng)站不同，占據(jù)兩行的LOGO被放大置于中心，不同的樣式更加能吸引用戶(hù)的留意力。假如你的LOGO也類(lèi)似于此，不妨采用相似的設(shè)計(jì)。

　　26、優(yōu)雅而鮮亮的外觀

　　清爽、簡(jiǎn)約并且以字體為主，La Dolce Vita 的博客就是這么做的，優(yōu)雅又光鮮的設(shè)計(jì)令人過(guò)目難忘。

　　27、只使用一種字體

　　Mine is Yours 是一個(gè)極簡(jiǎn)風(fēng)的網(wǎng)站，它不僅總體風(fēng)格如斯，而使用單一字體營(yíng)造出無(wú)與倫比的同一度。在這個(gè)案例中，少等于多的設(shè)計(jì)理念體現(xiàn)的非常透徹。

　　28、簡(jiǎn)樸的配色方案

　　Maiedae 在左上角使用了一個(gè)可愛(ài)的手寫(xiě)字體LOGO，而網(wǎng)站更加專(zhuān)心的地方在于為了凸起內(nèi)容，網(wǎng)站非圖片部門(mén)的配色設(shè)計(jì)得足夠簡(jiǎn)樸，讓用戶(hù)打開(kāi)頁(yè)面之后第一時(shí)刻會(huì)關(guān)注到圖片和內(nèi)容。

　　29、可愛(ài)又簡(jiǎn)短直接

　　固然良多Tumblr 博客都采用的是這樣的布局，但是你必需承認(rèn)相對(duì)較窄的頁(yè)寬和可愛(ài)的配色會(huì)讓頁(yè)面顯得賞心悅目又難忘。

　　30、一個(gè)名稱(chēng)就夠了

　　有的時(shí)候繁復(fù)的設(shè)計(jì)不如一個(gè)簡(jiǎn)樸的直擊來(lái)得靠譜，而Panic Blog 也算得上是個(gè)中高手了，一個(gè)帶有浮雕效果的標(biāo)題就給人感覺(jué)非常不錯(cuò)。

　　31、來(lái)個(gè)圖文混拍的Banner

　　文藝風(fēng)十足的Little Green Notebook就適合這樣圖文混拍的Banner，這種看起來(lái)經(jīng)由處理的頁(yè)頭布滿(mǎn)了暖和的觸感，走心又漂亮。

　　32、讓圖片和內(nèi)容聯(lián)系緊密

　　我們常說(shuō)要讓圖片和內(nèi)容相互聯(lián)系關(guān)系，但是要怎么設(shè)計(jì)才夠緊密呢?開(kāi)開(kāi)腦洞，像 Design Tripper 一樣，點(diǎn)題又能讓人會(huì)心一笑，獨(dú)特又不覺(jué)得突兀。

　　33、利用柵格

　　利用柵格系統(tǒng)來(lái)制作故事板，這在Tumblr 中也可以實(shí)現(xiàn)，這樣的設(shè)計(jì)可以將標(biāo)題和內(nèi)容有機(jī)地整合到一起。利用柵格不僅可以讓布局更加整飭，而且讓那個(gè)用戶(hù)更輕易導(dǎo)航。

　　34、移除頁(yè)頭

　　假如沒(méi)有頁(yè)頭的話(huà)，那么這個(gè)網(wǎng)站的打開(kāi)體驗(yàn)會(huì)如何?這個(gè)網(wǎng)站就是如斯做的，去除頁(yè)頭之后，漂亮的圖片和內(nèi)容組成了這個(gè)全屏式的頁(yè)面，直接而富有沖擊力。

　　35、用標(biāo)題和內(nèi)容來(lái)籠蓋

　　This Is Glamorous 是一個(gè)關(guān)于時(shí)尚和室內(nèi)設(shè)計(jì)的網(wǎng)站，優(yōu)雅的手繪字體標(biāo)題和內(nèi)容以更加緊湊的方式籠蓋了頁(yè)頭，極簡(jiǎn)之余還會(huì)給人一種優(yōu)雅而直接的瀏覽體驗(yàn)。

　　36、LOGO和圖片的結(jié)合

　　玄色的LOGO和淺色的Banner圖結(jié)合到一起作為頁(yè)頭，比擬于文字標(biāo)題+鏈接的常見(jiàn)展現(xiàn)形式更加有趣而視覺(jué)化。假如你的LOGO足夠漂亮，多展示一下又有何妨呢?

　　37、漫畫(huà)式的Banner

　　有插畫(huà)師的網(wǎng)站就是好，The Thirsty Wench 的頁(yè)面就將標(biāo)題和漫畫(huà)插畫(huà)結(jié)合到一起，考慮到這是一個(gè)和酒相關(guān)的網(wǎng)站，這大膽勇敢的風(fēng)格仍是與之非常搭的呢~

　　38、繁復(fù)之美

　　在主流設(shè)計(jì)都追求簡(jiǎn)約美的今天，使用繁復(fù)而優(yōu)雅的頁(yè)頭也是一種不跟隨的立場(chǎng)。借助柵格和大量的文字標(biāo)題來(lái)設(shè)計(jì)的頁(yè)頭使得The Rivet Press的首頁(yè)顯得華麗整潔而令人印象深刻。

　　39、讓標(biāo)題無(wú)比醒目

　　對(duì)，這么做是有點(diǎn)簡(jiǎn)樸粗暴，但是字體夠漂亮，色彩夠鮮艷，這做又有什么不好呢?富有吸引力，有趣，讓頁(yè)面有了視覺(jué)重心。

　　40、使用對(duì)比

　　和上面的案例有異曲同工之妙，Deaf Pigeon 的頁(yè)面讓背景的所有元素都顯得柔和，僅僅是讓網(wǎng)站名稱(chēng)和遠(yuǎn)景那個(gè)巨大的紅色斧頭凸起顯示，目的明確，對(duì)比強(qiáng)烈，層次分明。

　　41、漂亮的LOGO

　　Decor8 的漂亮 LOGO被置于整個(gè)博客的正中心，這就是我們之前所說(shuō)的經(jīng)典而簡(jiǎn)樸的解決方案。

　　42、居中顯示風(fēng)格化設(shè)計(jì)的標(biāo)題

　　作為一個(gè)夸大女性的博客，The Chronicles of Her 將標(biāo)題用口紅來(lái)書(shū)寫(xiě)出來(lái)顯得性感無(wú)比，將它居中顯示在頁(yè)頭，醒目又有性格。

　　43、用空間制造層次感

　　這個(gè)網(wǎng)站同樣使用了單一字體設(shè)計(jì)，而為了制造層次感，設(shè)計(jì)師充分運(yùn)用了空間和留白來(lái)實(shí)現(xiàn)差異化。Ceeesk 的頁(yè)頭就是另一個(gè)值得學(xué)習(xí)的案例。

　　44、視覺(jué)化的字體選取

　　關(guān)注經(jīng)典汽車(chē)搜集的博客 Car Crush 使用復(fù)古的經(jīng)典字體來(lái)呈現(xiàn)它的標(biāo)題并不為過(guò)，而網(wǎng)站設(shè)計(jì)的巧妙之處在于，它很好地同復(fù)古的汽車(chē)圖片結(jié)合到一起，組成了頁(yè)頭，一箭雙雕。視覺(jué)化的字體和視覺(jué)化的圖片讓整個(gè)頁(yè)頭顯得風(fēng)格凸起。

　　45、只使用LOGO

　　作為一個(gè)功能單一到只搜集圖書(shū)封面的網(wǎng)頁(yè)而言，在頁(yè)頭加上復(fù)雜的導(dǎo)航似乎并分歧適，左上角使用一個(gè)簡(jiǎn)樸的LOGO是如斯地符合網(wǎng)站的調(diào)性。

　　46、嘗嘗現(xiàn)代風(fēng)

　　現(xiàn)代、極簡(jiǎn)的風(fēng)格并不單調(diào)，假如你想用這種風(fēng)格來(lái)吸引用戶(hù)的話(huà)，多看點(diǎn)類(lèi)似的案例非常有必要。70% Pure 的設(shè)計(jì)就非常的微妙，值得你學(xué)習(xí)。

　　47、字體與紋理的結(jié)合

　　又一個(gè)標(biāo)題字體與紋理結(jié)合的案例，良多時(shí)候找個(gè)有個(gè)性的字體搭配個(gè)有質(zhì)感的紋理就可以很好地表現(xiàn)一個(gè)LOGO。

　　48、放大標(biāo)題字體

　　簡(jiǎn)樸的放大往往能收到奇效，這似乎在極簡(jiǎn)風(fēng)的網(wǎng)站中效果還有所加成，就像Beauty is Boring 這個(gè)網(wǎng)站的設(shè)計(jì)。

　　49、內(nèi)容引用

　　將你的博客中的一部門(mén)有趣的內(nèi)容摘掏出來(lái)，引用都頁(yè)頭也能讓你的博客顯得非常的獨(dú)特，24 Ways 的網(wǎng)站就采用了這樣的方式，用醒目的色彩來(lái)強(qiáng)化引用的效果，別出心裁。

　　50、色彩光鮮的色塊

　　這和上一個(gè)案例有異曲同工之妙，頁(yè)頭使用色彩光鮮的色塊背景可以可以標(biāo)題文本構(gòu)成視覺(jué)對(duì)比，強(qiáng)化排版效果，吸引用戶(hù)留意力。

　　結(jié)語(yǔ)

　　網(wǎng)站頁(yè)頭的設(shè)計(jì)方式千奇百怪，但是想要吸惹人的目的是一樣的。不論是傳統(tǒng)的對(duì)比式的設(shè)計(jì)，仍是劍走偏鋒的思路，都可以讓你的網(wǎng)站給人留下印象，重要的這種設(shè)計(jì)方法是否符合你的網(wǎng)站的風(fēng)格和特性，能否搔到用戶(hù)的癢處，留下回味無(wú)限的印象。