正確的網(wǎng)站設(shè)計(jì)首頁(yè)可以成就一個(gè)網(wǎng)站，同時(shí)它也可以毀掉一個(gè)網(wǎng)站，因?yàn)檫@是你的訪客看到的第一個(gè)頁(yè)面。如果你做錯(cuò)了，大多數(shù)人都不會(huì)再去瀏覽你的網(wǎng)站設(shè)計(jì)了。

網(wǎng)站設(shè)計(jì)的首頁(yè)應(yīng)該清楚地傳達(dá)產(chǎn)品或服務(wù)的獨(dú)特賣(mài)點(diǎn)（USP），并專注于一個(gè)行動(dòng)呼吁（CTA），例如讓訪問(wèn)者注冊(cè)他們的詳細(xì)信息或進(jìn)行購(gòu)買(mǎi)。無(wú)論目標(biāo)是什么，都取決于網(wǎng)站設(shè)計(jì)的頁(yè)面，通過(guò)使用空白、對(duì)比色或更明確的方向線索來(lái)引導(dǎo)用戶。擁有很好的網(wǎng)站設(shè)計(jì)工具可以幫助你做到這一點(diǎn)。

清晰、簡(jiǎn)潔的標(biāo)題和子標(biāo)題以及有力、易于掃描的項(xiàng)目符號(hào)是今天的重點(diǎn)。網(wǎng)站設(shè)計(jì)的首頁(yè)應(yīng)該突出品牌，經(jīng)常加入英雄形象，以傳達(dá)產(chǎn)品或服務(wù)一眼，并直切要點(diǎn)，以避免用戶的注意力漂移。

考慮到這些，我們整理了一些特別有效的網(wǎng)站設(shè)計(jì)實(shí)例。

01.Angle2

（圖片來(lái)源：Angle2）

Angle2是一家烏克蘭數(shù)字設(shè)計(jì)機(jī)構(gòu)，其團(tuán)隊(duì)全心全意地相信品牌的力量。顯然，沒(méi)有什么比打造獨(dú)特的定制體驗(yàn)更能讓他們興奮的了，這種體驗(yàn)"散發(fā)出你品牌的DNA"，同時(shí)又能挑戰(zhàn)用戶界面的極限。

這個(gè)新的在線服務(wù)網(wǎng)站肯定支持這一說(shuō)法，它不僅推出了一些出色的作品，還帶來(lái)了兩種令人敬畏的效果。打開(kāi)一些巨大的蒙特塞拉特字體浸泡在#2AF8EB（或?qū)θ祟悂?lái)說(shuō)是青綠色）我們得到了一個(gè)印刷練習(xí)值得品味。這一技巧貫穿始終，并以一種高超的傾斜文本錯(cuò)覺(jué)傳達(dá)出"棱角分明"的感覺(jué)。

本質(zhì)上，這使用左和右元素在視口的中間形成50/50的比例。從這里開(kāi)始，一系列包裹在標(biāo)簽中的傾斜文本行應(yīng)用了translate3d CSS函數(shù)，并在懸停時(shí)使用TweenMax進(jìn)行了動(dòng)畫(huà)處理。通過(guò)在每側(cè)施加對(duì)比色，可以實(shí)現(xiàn)45度折疊的美學(xué)效果，從而定義了整體網(wǎng)站設(shè)計(jì)。

將明快的藍(lán)色調(diào)注入到主要是黑白的調(diào)色板中，也顯示了有品位的執(zhí)行，更多的樂(lè)趣留給了笑臉人物肖像的"團(tuán)隊(duì)"部分。在這里，當(dāng)你在每張照片之間切換時(shí)，你會(huì)發(fā)現(xiàn)一個(gè)令人難以置信的碎片化濾鏡。

02.MADCLEM

克萊門(mén)特?舍內(nèi)博（Clement Chenebault）的網(wǎng)站設(shè)計(jì)既有趣又流暢

自網(wǎng)站設(shè)計(jì)誕生以來(lái)，網(wǎng)站開(kāi)發(fā)人員和網(wǎng)站設(shè)計(jì)人員一直在努力探索可能的領(lǐng)域，試圖做一些新的或有趣的事情，并對(duì)網(wǎng)站是什么和它是如何工作的抱有著期望。這種自由精神的嘗試是怪異、狂野的網(wǎng)絡(luò)的一個(gè)標(biāo)志。

克萊門(mén)特·舍內(nèi)博（Clement Chenebault）的作品集網(wǎng)站MADCLEM延續(xù)了這一富有傳奇色彩的傳統(tǒng)：突破界限，將簡(jiǎn)單的彩色方格變成流動(dòng)的、可塑的液體團(tuán)塊。整個(gè)場(chǎng)地隨著你的每一個(gè)動(dòng)作而彎曲和凸出，當(dāng)你在凝膠狀的體塊中找到自己的路時(shí)，通過(guò)擴(kuò)展和收縮來(lái)展示組合作品的一小部分。該網(wǎng)站設(shè)計(jì)是一個(gè)有趣的，波浪島在一個(gè)通常單調(diào)的海洋相同的外觀網(wǎng)站設(shè)計(jì)師和開(kāi)發(fā)人員的投資組合。

03.IBM叢

IBM的Plex的單頁(yè)導(dǎo)航被設(shè)計(jì)成顯示新字體的最佳效果

IBM最近發(fā)布了自己的定制字體IBM Plex；這是自1956年以來(lái)公司字體的第一次更新，所以這是一件大事。為了向世界介紹這種字體，IBM請(qǐng)studio XXIX設(shè)計(jì)并建立一個(gè)網(wǎng)站來(lái)展示它。設(shè)計(jì)背后的想法是使用圖像、動(dòng)畫(huà)和攝影來(lái)講述Plex的故事，同時(shí)以令人興奮的方式展示字體。

很棒的是，很多網(wǎng)站都是用來(lái)測(cè)試字體和探索多種可用風(fēng)格的。因此，在您決定在項(xiàng)目中使用它之前，您可以在上下文中真正地了解它。該網(wǎng)站設(shè)計(jì)肯定是一個(gè)平面設(shè)計(jì)師和有點(diǎn)讓人想起投資組合頁(yè)面。特別是，盡管顯示了密集的信息，但您可以連續(xù)滾動(dòng)不同的部分，因?yàn)槟鷷?huì)看到一些有創(chuàng)意的滾動(dòng)觸發(fā)動(dòng)畫(huà)。

04.牛仔

騎他們！牛仔網(wǎng)站讓你關(guān)注最重要的東西：自行車(chē)

牛仔是針對(duì)美國(guó)城市居民的新一代電動(dòng)自行車(chē)，因此，它的網(wǎng)站必須是光滑的，以傳達(dá)產(chǎn)品的價(jià)值，這是一種尋求徹底改變一個(gè)以粗笨的自行車(chē)沒(méi)有吸引力而著稱的市場(chǎng)的產(chǎn)品。

該網(wǎng)站設(shè)計(jì)由上野創(chuàng)造，使用了大膽的字體、強(qiáng)烈的色彩、很棒的攝影，而且建得非常好，為用戶提供了一流的體驗(yàn)。自行車(chē)本身占據(jù)了中心舞臺(tái)，并立即吸引了用戶的目光。

自行車(chē)的過(guò)渡和放大功能，因?yàn)橛脩粝蛳聺L動(dòng)，保持微妙的自行車(chē)保持中心。專注于內(nèi)容而不是過(guò)度設(shè)計(jì)用戶體驗(yàn)也意味著網(wǎng)站可以在所有設(shè)備上快速加載，響應(yīng)速度也非?？臁Ｗ孕熊?chē)應(yīng)用程序有自己的頁(yè)面和功能之間的視差，提供的性能數(shù)據(jù)完美地揭示了產(chǎn)品的連接特性和設(shè)備邊界內(nèi)的視差。

05.接口愛(ài)好者

界面愛(ài)好者的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面使事情變得簡(jiǎn)單和干凈

為一個(gè)專門(mén)為"界面愛(ài)好者"設(shè)計(jì)的網(wǎng)站設(shè)計(jì)一個(gè)網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面絕非易事，但Facebook的設(shè)計(jì)師蒂莫西·阿丘巴卻做到了。該網(wǎng)站旨在激勵(lì)人們，提供UI設(shè)計(jì)工藝的實(shí)用建議，并慶祝不同設(shè)計(jì)師的獨(dú)特體驗(yàn)。

設(shè)計(jì)將重點(diǎn)放在內(nèi)容上，并使用了一種平衡的布局，靈感來(lái)自于Achumba的初戀：打印。他表示："界面愛(ài)好者的設(shè)計(jì)基于取自報(bào)紙版面的一個(gè)簡(jiǎn)單的三欄網(wǎng)格，既簡(jiǎn)單又干凈。"美麗的人像攝影吸引了游客，并強(qiáng)調(diào)了網(wǎng)站對(duì)個(gè)人故事的興趣。

為了構(gòu)建這個(gè)站點(diǎn)，開(kāi)發(fā)人員Iheanyi Ekechukwu利用了Tachyons，這是一個(gè)功能強(qiáng)大的CSS框架，允許對(duì)設(shè)計(jì)進(jìn)行細(xì)粒度控制。結(jié)果是一個(gè)華麗的，最小的設(shè)計(jì)，沒(méi)有任何花哨的東西。

06.谷歌字體

谷歌直接引導(dǎo)您查看字體，沒(méi)有任何麻煩

谷歌字體最初于2010年推出，現(xiàn)在全球每天有超過(guò)150億次的瀏覽量，使用超過(guò)135種語(yǔ)言。谷歌字體網(wǎng)站是干凈的，完全響應(yīng)，使用材料設(shè)計(jì)的網(wǎng)格和造型。

設(shè)計(jì)師Yuin Chien在她關(guān)于這個(gè)項(xiàng)目的博客文章中解釋說(shuō)："通過(guò)構(gòu)建處理比例、顏色和字體搭配的能力，我們邀請(qǐng)每個(gè)人在他們的項(xiàng)目中發(fā)現(xiàn)和無(wú)縫使用字體。"她是對(duì)的；界面誘人又美觀。它也是直觀和有趣的探索。

至關(guān)重要的是，它不會(huì)強(qiáng)迫你為了獲得字體而費(fèi)盡周折；它們就在網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面的頂部，準(zhǔn)備好讓你玩了。您可以直接輸入頁(yè)面的文本字段來(lái)測(cè)試它們。如果你被各種各樣的選擇弄得不知所措，谷歌可以讓你很容易地縮小范圍，為字體類別設(shè)置勾選框，為樣式、厚度、斜度和寬度設(shè)置方便的滑動(dòng)條。

07.麻省理工學(xué)院技術(shù)評(píng)論

《麻省理工學(xué)院技術(shù)評(píng)論》保持簡(jiǎn)單

所以很多網(wǎng)站都想盡辦法用一些花哨的技巧來(lái)吸引那些頁(yè)面瀏覽量，找到一個(gè)能讓事情變得簡(jiǎn)單的網(wǎng)站是一種解脫。麻省理工學(xué)院的《技術(shù)評(píng)論》（Technology Review）首次發(fā)表于18世紀(jì)末，它有著悠久而令人自豪的傳統(tǒng)，其網(wǎng)站經(jīng)過(guò)精心設(shè)計(jì)，展示了優(yōu)秀的藝術(shù)作品，讓人樂(lè)于閱讀。

網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面讓人賞心悅目，你可以從一個(gè)大膽的封面故事、三個(gè)次要故事和一份名為"下載"的當(dāng)天頭條新聞?wù)斜黹_(kāi)始。這使得訪問(wèn)者能夠以一種嚴(yán)肅的方式快速地了解到什么是重要的。

右上角的大紅色訂閱CTA也會(huì)立即吸引你的眼球，將訪問(wèn)者引導(dǎo)到付費(fèi)網(wǎng)站選項(xiàng)，而不會(huì)妨礙他們享受免費(fèi)內(nèi)容。

08.Resn

神秘的"降落"打破了傳統(tǒng)網(wǎng)站首頁(yè)設(shè)計(jì)的大部分規(guī)則

現(xiàn)在，讓我們來(lái)看看一個(gè)頁(yè)面，它忽略了大多數(shù)的網(wǎng)站首頁(yè)設(shè)計(jì)規(guī)則，但還是成功了。從來(lái)沒(méi)有人會(huì)排隊(duì)使用標(biāo)準(zhǔn)的用戶界面模式，設(shè)計(jì)機(jī)構(gòu)Resn建立了一個(gè)以"水滴"為中心的網(wǎng)站首頁(yè)，一個(gè)神秘的、閃閃發(fā)光的淚滴狀多邊形，作為進(jìn)入Resn心靈的入口。

點(diǎn)擊并按住鼠標(biāo)，你就可以得到一個(gè)不同的灰度，蘋(píng)果主題的萬(wàn)花筒；一種帶有顯靈板的蝙蝠，用它的x射線激光束剝?nèi)ヅf畫(huà)中人物的肉；一個(gè)有趣的管；一個(gè)迷幻的益力多，分發(fā)奇怪的剪貼畫(huà)；天知道還有什么。

Resn打破了創(chuàng)建網(wǎng)站首頁(yè)的許多常規(guī)規(guī)則，但其結(jié)果足夠令人信服，如果這類事情讓你感到滿意，你可能會(huì)繼續(xù)挖掘，如果不是，你也不會(huì)浪費(fèi)他們的時(shí)間。對(duì)于吸引公司想要合作的客戶來(lái)說(shuō)，"The Drop"可能是一個(gè)完美的過(guò)濾器，它確實(shí)是一個(gè)你可能永遠(yuǎn)不會(huì)忘記的華麗的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面。

09.現(xiàn)在和正確的

每一塊面板都是一個(gè)誘惑

"現(xiàn)在與正確"網(wǎng)站以其精心布局的精美圖片，觸及了它的核心受眾：迷戀文具的人。

圖形紙的背景，淺灰色的顏色和經(jīng)典的字體通道，一個(gè)學(xué)校練習(xí)本的氛圍和每個(gè)面板顯示一個(gè)美麗的產(chǎn)品。在頂部的菜單欄中，股票被精心地分成不同的類別，你很容易就會(huì)點(diǎn)擊所有的類別，首先是標(biāo)題有趣的"蜉蝣"部分。

10.單型

與該公司本身一樣，Monotype的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面也是關(guān)于排版的力量

"我們是type背后的公司，"Monotype的登陸頁(yè)上寫(xiě)道，其低調(diào)而巧妙的設(shè)計(jì)與這一自信的聲明相輔相成。整個(gè)頁(yè)面的左半部分都是該公司的使命宣言，還有一個(gè)巧妙的轉(zhuǎn)變：通過(guò)下拉菜單，你可以看到各種字體、各種粗細(xì)和樣式的文本，從而了解Monotype的功能。

頁(yè)面的右側(cè)是指向Monotype庫(kù)、企業(yè)許可證和公司新聞的鏈接，其中有不同字體的大"M"圖標(biāo)，其作用類似于下拉帽。柔和的深褐色調(diào)色板使重點(diǎn)堅(jiān)定地放在字體上。

11.LS的作品

LS的制作吸引你在與華麗的蘇格蘭地點(diǎn)的行列

LS Productions是一家總部位于蘇格蘭的靜態(tài)和動(dòng)態(tài)服務(wù)制作公司，它知道自己最大的資產(chǎn)是什么，這也是你訪問(wèn)它的網(wǎng)站時(shí)會(huì)看到的內(nèi)容。一個(gè)充滿窗口的循環(huán)播放的視頻展示了該公司的一系列工作，全部設(shè)置在美麗的地點(diǎn)。向下滾動(dòng)，您將了解它的三個(gè)主要服務(wù)：運(yùn)動(dòng)，靜止和位置。

到目前為止，網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面已經(jīng)完成了它的工作。下面的一切——本周的華麗地點(diǎn)，"與團(tuán)隊(duì)見(jiàn)面"部分——只是裝飾門(mén)面。如果你想要雇傭LS的制作人員，那么你已經(jīng)進(jìn)入了一個(gè)主要的服務(wù)頁(yè)面，在那里你會(huì)發(fā)現(xiàn)大量相關(guān)的、呈現(xiàn)良好的信息，讓你相信這家公司是合適的。

12.奧尼爾

奧尼爾的網(wǎng)頁(yè)上滿是照片，賣(mài)得很好

美國(guó)生活方式品牌奧尼爾主要關(guān)注兩件事：沖浪和滑雪。它在美國(guó)的網(wǎng)站通過(guò)一個(gè)以圖片為導(dǎo)向的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面，向你展示了它的服裝系列和運(yùn)動(dòng)裝備，通過(guò)令人驚嘆的巨浪和白雪覆蓋的山脈的照片。

如果你知道自己想要什么，網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面頂部的一組下拉鏈接可以直接把你帶到你想要的地方，但在那下面的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面會(huì)用幾個(gè)大的、以圖片為導(dǎo)向的區(qū)域鏈接和Instagram圖庫(kù)來(lái)引誘你。這一切足以讓你沖到海灘——或最近的山頂——但前提是先準(zhǔn)備好奧尼爾的裝備。

13.Hipstamatic

Hipstamatic的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面顯示了該應(yīng)用程序的功能

對(duì)于復(fù)古模擬攝影應(yīng)用Hipstamatic來(lái)說(shuō)，最重要的是展示酷炫的功能，以及應(yīng)用的外觀、感覺(jué)和直觀的導(dǎo)航，以盡可能吸引用戶的時(shí)尚感。

在頁(yè)面的頂部，一個(gè)滾動(dòng)的圖片庫(kù)展示了現(xiàn)實(shí)中的"Hipstamatic美學(xué)"，而一個(gè)巨大的iPhone展示了最新版本的應(yīng)用程序，帶有老式的經(jīng)典模式和新的推廣，有更多最新的功能。在這之下，一條新的約束帶總結(jié)了Hipstamatic現(xiàn)在的全部?jī)?nèi)容："制作美麗的照片"，一個(gè)大的CTA會(huì)指引你到應(yīng)用商店。

14.蘋(píng)果

蘋(píng)果的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面以精美的產(chǎn)品圖片為中心

毫不奇怪，毫無(wú)爭(zhēng)議的工業(yè)設(shè)計(jì)大師們可以拼湊出一個(gè)像樣的網(wǎng)站，而Apple.com毫不費(fèi)力的簡(jiǎn)單性甚至為它贏得了一支D&AD黑鉛筆。

主頁(yè)瀏覽了該公司廣泛的產(chǎn)品系列，并聚焦于當(dāng)前的一個(gè)熱門(mén)產(chǎn)品。除了頂部簡(jiǎn)單的導(dǎo)航欄，它只是漂亮地拍攝了產(chǎn)品照片、產(chǎn)品名稱和口號(hào)。這里甚至沒(méi)有一個(gè)CTA——蘋(píng)果很明智地認(rèn)為，它的技術(shù)嫻熟的用戶將知道圖像和文本被超鏈接到更多信息。這是一個(gè)真正的有節(jié)制的大師班。

15.Pinterest

Pinterest如此出名，它的網(wǎng)站設(shè)計(jì)的首頁(yè)頁(yè)面不需要努力推銷(xiāo)自己

Pinterest知道自己想要什么，也沒(méi)有心情拐彎抹角：要么注冊(cè)，要么什么都不做。這家廣受歡迎的在線剪貼簿對(duì)自己的品牌和迅速增長(zhǎng)的聲譽(yù)有足夠的信心，不會(huì)過(guò)于擔(dān)心推銷(xiāo)自己，也不會(huì)讓用戶有機(jī)會(huì)瀏覽一些展板，以免誤入歧途。

在注冊(cè)卡的背后，Pinterest的一個(gè)精彩攝影剪貼簿誘人地向上滾動(dòng)著，讓人領(lǐng)略到為用戶提供的服務(wù)。這是一個(gè)精簡(jiǎn)和美化的版本，你實(shí)際上得到的-沒(méi)有冗長(zhǎng)的描述，廣告或repin信息雜亂的這個(gè)版本的主頁(yè)。

生成CSS（9月26日）是一個(gè)倫敦會(huì)議，致力于所有的事情CSS -現(xiàn)在預(yù)訂你的機(jī)票！使用代碼WEBDESIGNER2獲得10%的折扣