設(shè)計(jì)趨勢(shì)！知名網(wǎng)站的首屏設(shè)計(jì)趨勢(shì)(4)

當(dāng)一個(gè)用戶(hù)登錄你的網(wǎng)站，他第一件事情一定會(huì)注意到你的網(wǎng)站的頭部信息。無(wú)論他是一個(gè)小的導(dǎo)航欄，或者是一個(gè)大的圖片全屏輪顯，網(wǎng)站頭部的設(shè)計(jì)無(wú)疑是全站布局中非常重要的一個(gè)環(huán)節(jié)。大多數(shù)網(wǎng)站頭部的設(shè)計(jì)傾向于給訪(fǎng)問(wèn)者留下非常深刻的印象并且最好能夠更幫助他更好的推廣這個(gè)網(wǎng)站的品牌。一個(gè)好的網(wǎng)頁(yè)首屏設(shè)計(jì)可以給每一位訪(fǎng)問(wèn)者留下一個(gè)長(zhǎng)久的不可磨滅的印象。

在這篇文章里，我想分享幾個(gè)非常有用的小技巧來(lái)幫助網(wǎng)頁(yè)設(shè)計(jì)師們實(shí)現(xiàn)一個(gè)高大上的頭部標(biāo)題設(shè)計(jì)。最好的方法就是把側(cè)重點(diǎn)集中到網(wǎng)站的內(nèi)容上，并且著重強(qiáng)調(diào)重要的部分，使這部分內(nèi)容在整個(gè)頭部設(shè)計(jì)里面有獨(dú)具特色的凸現(xiàn)出來(lái)。另一方面還要注意，設(shè)計(jì)的時(shí)候還要兼顧擴(kuò)大品牌的影響力。

超大背景圖片Hero Images

近幾年在首屏設(shè)計(jì)中使用一個(gè)大的全屏圖片變得越來(lái)越司空見(jiàn)慣，快速發(fā)展的互聯(lián)網(wǎng)使資源的下載前所未有的快速�，F(xiàn)在背景圖包含一個(gè)1920x1080的圖片讓他適應(yīng)任何屏幕的尺寸是相當(dāng)簡(jiǎn)單的。

hero image是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)術(shù)語(yǔ)是一個(gè)特定類(lèi)型的網(wǎng)頁(yè)橫幅。hero image是一個(gè)大型橫幅的圖形,突出放在一個(gè)web頁(yè)面,的前面和中心的位置。

hero image往往是訪(fǎng)客在網(wǎng)站上遇到的第一視覺(jué)。它的目的是概述網(wǎng)站的最重要的內(nèi)容，通常包含圖像和文本,可以靜態(tài)也可以是動(dòng)態(tài)的。

hero image與banner相比更典型，他經(jīng)常被放置在第一屏的重要位置。經(jīng)常是用一些有震撼力的攝影圖片，被用于產(chǎn)品的促銷(xiāo)、公司或者個(gè)人的推廣。品牌一直是它的一個(gè)決定性的因素，但是hero images的并不總是關(guān)于品牌，他們的目的也是為了拉近訪(fǎng)問(wèn)者，使他們跟網(wǎng)站的關(guān)系更密切。

例如在WooCommerce的主頁(yè)上我們就可以看，hero image不一定非要和WooCommerce自己有關(guān)。這張圖像為電子商務(wù)商店?duì)I造出一個(gè)預(yù)設(shè)的情節(jié)，并提出一個(gè)解決方案的來(lái)出售他們的產(chǎn)品或服務(wù)。理想的情況下這個(gè)圖片將吸引企業(yè)者們的注意并提出他們想要的解決方案。例如讓W(xué)ooCommerce為他們經(jīng)營(yíng)線(xiàn)上的商店。

我真的很喜歡使用hero images去完成相關(guān)的內(nèi)容設(shè)計(jì)。他能夠使突出網(wǎng)站的用途，并且使圖片看起來(lái)更有震撼力。明顯的當(dāng)下最重要的問(wèn)題就是找一張非常適合這個(gè)項(xiàng)目的照片，如果你是一個(gè)攝影師這就簡(jiǎn)單多了，但是對(duì)于像我們這些不會(huì)拍照的渣渣就可以考慮用購(gòu)買(mǎi)一些買(mǎi)斷式的圖片解決了（盜圖什么的真真的不好，現(xiàn)在這種圖片都不是很貴，從我做起支持正版哈~）~例如Unsplash 海洛創(chuàng)意之類(lèi)的。

清晰的導(dǎo)航鏈接 Legible Navigation Links

想要首屏設(shè)計(jì)顯眼，最重要的元素莫過(guò)于導(dǎo)航了。除非你設(shè)計(jì)一個(gè)單頁(yè)的布局，那么很可能你需要一些鏈接去控制這個(gè)網(wǎng)站而非導(dǎo)航，并且許多單頁(yè)的設(shè)計(jì)應(yīng)用了滾動(dòng)的鏈接設(shè)計(jì)。

對(duì)于用戶(hù)來(lái)說(shuō)一個(gè)簡(jiǎn)單易讀的導(dǎo)航是非常重要的。人們希望能夠快速的識(shí)別頁(yè)面并作出選擇。鏈接可以加粗，加線(xiàn)框、下劃線(xiàn)，或者鏈接和背景用對(duì)比色等等，這一切都是為了讓他們更容易閱讀。

舉一個(gè)設(shè)計(jì)工作室1minus1的例子，他們創(chuàng)作的一個(gè)黑白對(duì)比的配色方案。并且這個(gè)導(dǎo)航鏈接的放了一小段注釋文字。這可能對(duì)用戶(hù)體驗(yàn)沒(méi)什么幫助，但是他增強(qiáng)了總體設(shè)計(jì)的感覺(jué)。

Kin HR是另一個(gè)網(wǎng)站，他使用了一種不同的導(dǎo)航形式。鏈接加粗并加了線(xiàn)框的效果被放在頁(yè)面的右上角。他們用了一個(gè)灰色的字體在鼠標(biāo)放上去的時(shí)候加了一個(gè)變白的效果，這樣的設(shè)計(jì)讓導(dǎo)航充滿(mǎn)活力（這個(gè)效果在css里只需要在標(biāo)標(biāo)標(biāo)記上加上hover 定義鼠標(biāo)滑動(dòng)的后字體的顏色就行~這屬于網(wǎng)頁(yè)制作前端的知識(shí)哈~咱只要知道就行~）。另一方面當(dāng)前頁(yè)面的鏈接有下劃線(xiàn)的效果來(lái)表示位置，并沒(méi)有只依賴(lài)內(nèi)容。易讀性是鏈接設(shè)計(jì)最快也是最簡(jiǎn)單的方式。當(dāng)你在設(shè)計(jì)自己的導(dǎo)航菜單時(shí)一定要記住這些。

引人注目的品牌設(shè)計(jì)Noticeable Branding

品牌對(duì)于公司的重要性不言而喻，不管哪一個(gè)公司他們都需要一個(gè)吸引人眼球的品牌設(shè)計(jì)。訪(fǎng)問(wèn)者們記住的事物一定是一些引人注目的，他會(huì)從一大堆熟悉的logos里脫穎而出。

Theme Trust的標(biāo)志是讓人難忘的，它大到你的目光立刻回聚焦到上面。他同樣是一個(gè)既簡(jiǎn)單又優(yōu)秀的標(biāo)志案例，沒(méi)有過(guò)多的修飾。標(biāo)志應(yīng)用了“T”型盾牌圖形，并且他們的圖標(biāo)還添加一些多重空間的設(shè)計(jì)，例如文字的粗細(xì)對(duì)比。尋找新的方法來(lái)讓網(wǎng)站品牌在首屏更突出。永遠(yuǎn)不要小看一個(gè)優(yōu)秀logo的力量。

固定導(dǎo)航欄Fixed Scrolling Menus

隨著web瀏覽器不斷地更新?lián)Q代，一些特殊效果也變得更加普遍多見(jiàn)。固定導(dǎo)航欄就是這樣的一個(gè)效果，他被一些有名的現(xiàn)代的開(kāi)發(fā)人員們發(fā)現(xiàn)，他是一個(gè)導(dǎo)航在網(wǎng)頁(yè)的任何地方都可以被找到的最快的解決方案。這么便利的發(fā)現(xiàn)都?xì)w功于css3和jquery的快速發(fā)展。（css3和jquery是網(wǎng)頁(yè)制作方面的知識(shí)~）

Ausdom這個(gè)網(wǎng)站有一個(gè)非常有趣的固定導(dǎo)航欄。當(dāng)你第一次登陸到頁(yè)面時(shí)，所有的導(dǎo)航鏈接好像都是在首頁(yè)hero image的頂部右側(cè)里面的，導(dǎo)航鏈接是一個(gè)白色的字體鑲嵌在比較暗背景上。

當(dāng)你開(kāi)始滾動(dòng)鼠標(biāo)，導(dǎo)航條就將會(huì)彈出來(lái)，并跟著你移動(dòng)到你鼠標(biāo)滾動(dòng)任的頁(yè)面。他用的一個(gè)白色的背景顏色，所以logo和文本鏈接也跟著變成了一個(gè)新的顏色。這是一個(gè)相當(dāng)酷的設(shè)計(jì)風(fēng)格，他使頁(yè)面保持完整性，讓導(dǎo)航在任何的位置都能被輕松的找到。

另外一種混合式的導(dǎo)航，你可以嘗試添加自己的設(shè)計(jì)風(fēng)格，讓固定導(dǎo)航欄更具有創(chuàng)意。例如Drew Wilson網(wǎng)站在他的頂部應(yīng)用了滾動(dòng)導(dǎo)航條，并且在導(dǎo)航條上上應(yīng)用了多云模糊的效果。導(dǎo)航上鏈接不多，因?yàn)榫W(wǎng)站只有一個(gè)頁(yè)面，但是他仍然是一個(gè)創(chuàng)造性的設(shè)計(jì)嘗試，在最快的時(shí)間里吸引了你的眼球。

靈感總結(jié)~

掌握上面的這些設(shè)計(jì)技巧，讓你更快的做出一個(gè)優(yōu)秀的首屏設(shè)計(jì)。這些首屏主要是靠?jī)?nèi)容、標(biāo)志或者導(dǎo)航的設(shè)計(jì)來(lái)吸引眼球。因?yàn)橛脩?hù)傾向于有趣的這些標(biāo)題頁(yè)面元素完美展示如何在初次訪(fǎng)問(wèn)者點(diǎn)燃的好奇心。容易被那些有趣的標(biāo)題元素和完美的頁(yè)面展示吸引，最完美的首屏設(shè)計(jì)要在在初次就點(diǎn)燃訪(fǎng)問(wèn)者的好奇心。

Daniel Filler

Grain & Mortar

Playground Inc.

Sellfy

Kiawah Island

Localfu

Statsiv

n+1

Seed Spot

LeShopo

Picsell

Góralski Domek

Clouder

Circle

Paleo Granola Sola

Cuppa

Photoshop Etiquette

CUPS Annual Report

Pastini Pastaria

Metaverse Mod Squad

關(guān)于作者

Jake Rocheleau是一個(gè)有創(chuàng)意的作家和UI設(shè)計(jì)師。你可以在twitter@jakerocheleau或者你可以訪(fǎng)問(wèn)他的個(gè)人網(wǎng)頁(yè)JakeRocheleau.com.