打造引人注目的作品集網(wǎng)站首頁英雄圖：六大關(guān)鍵要素

網(wǎng)站訪客對(duì)網(wǎng)站的第一印象往往在一瞬間形成。考慮到首頁英雄圖是大多數(shù)訪客首先接觸的內(nèi)容，您希望他們看到您的英雄圖時(shí)留下什么樣的印象呢？

為了充分利用這些最初的相遇，您的英雄圖需要經(jīng)過精心設(shè)計(jì)和執(zhí)行。它需要傳達(dá)您是哪種類型的創(chuàng)作者，提供您才能的預(yù)覽，并給訪客一個(gè)進(jìn)一步探索的理由。

要為您的作品集網(wǎng)站創(chuàng)建完美的英雄圖，需要關(guān)注六個(gè)要素。在本文中，我們將探討這些要素是什么，并通過BeTheme（全球最受歡迎和評(píng)價(jià)最高的WordPress主題之一，擁有264,000多次銷售和4.83星的評(píng)分）和其他品牌的預(yù)制網(wǎng)站示例，展示巧妙地將它們?nèi)诤显谝黄鸬母鞣N方法。

設(shè)計(jì)作品集網(wǎng)站的完美英雄圖

一般來說，無論您構(gòu)建的是哪種類型的網(wǎng)站，都會(huì)有六個(gè)要素共同構(gòu)成每個(gè)英雄部分。在使用這些關(guān)鍵組件創(chuàng)建英雄圖時(shí)，請(qǐng)考慮以下幾點(diǎn)：

1. 選擇最能反映您工作的圖像

您為英雄圖選擇的圖像應(yīng)該與您的工作類型直接相關(guān)。

例如，Lauren Waldorf Interiors是一家精品室內(nèi)設(shè)計(jì)工作室。因此，英雄部分包含已完成項(xiàng)目的幻燈片圖片庫：

對(duì)于攝影師、攝像師、網(wǎng)頁設(shè)計(jì)師和其他視覺藝術(shù)家來說，您可能有很多圖形可以在英雄圖中展示。對(duì)于從事其他類型媒體的藝術(shù)家來說，可能難以直觀地描繪您的工作。

在這種情況下，您可能決定將您的臉作為英雄部分的主要圖像，就像我們?cè)贐eDJ 2預(yù)制網(wǎng)站英雄圖中看到的那樣：

DJ 的臉為訪客提供了比一堆顏色和音樂相關(guān)圖形更有趣的視覺內(nèi)容。它還在作品和藝術(shù)家之間建立了直接聯(lián)系。

在設(shè)計(jì)英雄圖時(shí)，請(qǐng)考慮以下幾點(diǎn)：

• 本部分的主要主題是什么或誰？
• 圖像屬于前景還是融入背景？
• 圖像是否保持原樣，或者是否有方法使其看起來更具藝術(shù)性？

此外，您是否根本不需要圖像？例如，如果您是字體設(shè)計(jì)師或文案撰寫者，那么您可能決定跳過圖像，只讓您的文字說話。

2. 使用背景來提供更多關(guān)于您工作的細(xì)節(jié)

處理英雄部分的背景有多種方法。

在某些情況下，您的作品可能會(huì)占據(jù)背景。例如，攝像師可以在背景中放置其視頻的幻燈片。這不僅會(huì)使網(wǎng)站感覺生動(dòng)活潑，還會(huì)讓訪客快速預(yù)覽您的作品。

在其他情況下，您可能希望在英雄部分中稍微透露一下您的作品，例如來自BeInterior 6預(yù)制網(wǎng)站的此示例：

圖片庫占據(jù)了該部分大約四分之一的寬度。雖然設(shè)計(jì)師本可以使用彩色背景來框定作品，但他們選擇添加紋理照片。該圖紙不僅為背景提供了舒適的顏色，而且還以一種創(chuàng)造性的方式為室內(nèi)設(shè)計(jì)師的工作增加了背景。

您的另一個(gè)選擇是在背景中使用純色或漸變色（以及插圖），就像Mindgrub所做的那樣：

對(duì)于數(shù)字創(chuàng)意人員來說，這可能是您的最佳選擇。雖然您可以展示您為客戶構(gòu)建的網(wǎng)站屏幕截圖或您開發(fā)的UI套件，但您可以使用此空間來創(chuàng)建您自己的數(shù)字杰作。您可以將為客戶創(chuàng)建的作品保存到另一個(gè)部分或頁面。

3. 設(shè)置字體樣式，使您的聲音清晰明了

即使您沒有編寫出現(xiàn)在英雄部分的文本，您所做的美學(xué)選擇也可以向潛在客戶傳達(dá)與文字本身一樣多的信息。

有多種方法可以為您的英雄信息添加聲音。首先是您使用的字體類型。例如，BeDetailing 4預(yù)制網(wǎng)站使用名為Italiana的Google字體：

這家汽車美容公司直接表達(dá)了對(duì)經(jīng)典和復(fù)古汽車的喜愛。措辭、汽車圖像和優(yōu)雅的書法風(fēng)格字體都向我們傳達(dá)了這一點(diǎn)。

另一個(gè)需要考慮的是，句子的樣式如何改變您的信息在閱讀者腦海中的聽感。例如，Get Em Tiger做了很多事情來改變他們的英雄圖像文本在閱讀者腦海中的聽感：

首先，主要標(biāo)題全部大寫。這種樣式的文本通常被解釋為響亮而大膽。

其次，“STAND OUT”一詞以橙色突出顯示。這旨在替代通常用于在純文本中創(chuàng)建強(qiáng)調(diào)的斜體或粗體。

此外，副標(biāo)題以句子形式書寫。當(dāng)訪客閱讀此內(nèi)容時(shí)，它很可能會(huì)在他們的腦海中采用更友好、更輕松的語氣。

4. 確定顏色的作用

當(dāng)您準(zhǔn)備好為您的作品集網(wǎng)站創(chuàng)建英雄圖時(shí)，您可能已經(jīng)確定了您的品牌顏色。

通常，品牌調(diào)色板可用于設(shè)置按鈕樣式以及為網(wǎng)站的關(guān)鍵區(qū)域添加強(qiáng)調(diào)。但是，您可能決定大量從中提取來創(chuàng)建您的英雄部分，就像G Sharp Design所做的那樣：

此英雄部分的調(diào)色板相對(duì)簡單。然而，占據(jù)設(shè)計(jì)主導(dǎo)地位的鮮艷紅色和黃色使人們無法將目光從它身上移開。

雖然這種色彩奇觀非常適合這家機(jī)構(gòu)，但它可能不適合其他類型的創(chuàng)意人員。例如，像BePhoto 2這樣的攝影預(yù)制網(wǎng)站使用深色主題：

英雄圖的中心有一個(gè)照片滑塊，每張后續(xù)照片都會(huì)顯示出鮮艷的色彩。因?yàn)榫W(wǎng)站的其余部分以柔和的深灰色和象牙白色文本進(jìn)行樣式設(shè)置，所以照片會(huì)立即吸引人們的注意。

因此，當(dāng)您決定自己的調(diào)色板時(shí)，請(qǐng)自問以下問題：

• 您需要多少種顏色？
• 您將使用品牌調(diào)色板中的哪些顏色？
• 您想引入其他顏色嗎？
• 每種顏色在設(shè)定情緒、激發(fā)行動(dòng)等方面將扮演什么角色？

顏色不必面面俱到才能有效。這完全取決于您需要它在此部分為您做什么。

5. 通過交互使其更令人印象深刻

如果沒有動(dòng)畫，您的英雄圖只不過是一個(gè)靜態(tài)廣告牌。

現(xiàn)在，靜態(tài)廣告牌廣告沒有什么問題——當(dāng)它超過200平方英尺并且距離地面超過10英尺時(shí)。但是，如果沒有廣告牌在現(xiàn)實(shí)世界中所擁有的宏偉存在感，網(wǎng)站上的靜態(tài)設(shè)計(jì)可能會(huì)顯得毫無生氣且缺乏靈感。

就像我們今天看到的其他元素一樣，有多種方法可以為您的英雄圖設(shè)計(jì)添加運(yùn)動(dòng)和交互。

例如，Awesome Inc是一家動(dòng)畫和設(shè)計(jì)工作室。如果我們?cè)谶M(jìn)入網(wǎng)站后看不到他們引人注目的動(dòng)畫作品，那就太奇怪了：

另一方面，如果您是一位不做動(dòng)畫工作的創(chuàng)意人員，那么就沒有理由將其做到這種程度。但這并不意味著您的英雄圖應(yīng)該沒有運(yùn)動(dòng)。

例如，BeModel 3預(yù)制網(wǎng)站具有動(dòng)態(tài)英雄圖設(shè)計(jì)：

動(dòng)畫的不僅僅是圖片滑塊?；瑝K的調(diào)色板會(huì)隨著照片的變化而同步變化。

即使這對(duì)于您來說似乎有很多動(dòng)作。如果是這樣，還有更微妙的方法可以使用動(dòng)畫使您的英雄圖感覺更具吸引力——例如向按鈕添加懸停變換或向部分添加過渡動(dòng)畫。

6. 選擇一個(gè)單一的號(hào)召性用語

最后但并非最不重要的一點(diǎn)是，您需要弄清楚訪客的下一個(gè)邏輯操作是什么。

一種選擇是讓他們繼續(xù)向下滾動(dòng)頁面。如果是這樣，您甚至可能不想包含號(hào)召性用語按鈕。大多數(shù)訪客在看到他們需要看到的所有內(nèi)容后會(huì)自然地開始滾動(dòng)。

另一種選擇是邀請(qǐng)他們?cè)L問您網(wǎng)站上的另一個(gè)頁面。如果是這樣，應(yīng)該是哪個(gè)頁面？在作品集網(wǎng)站上，您可能希望訪客訪問您的作品集或服務(wù)頁面。

例如，BePhotography 2預(yù)制網(wǎng)站將潛在客戶引導(dǎo)至作品集頁面：

還有一種選擇是鼓勵(lì)訪客在給他們提供去其他地方的選擇之前與英雄圖互動(dòng)。如果您的英雄圖提供用戶可以互動(dòng)的作品幻燈片，這將非常有用。這就是Perky Bros的做法：

訪客的光標(biāo)將根據(jù)他們懸停在滑塊的哪個(gè)部分而改變外觀。在屏幕的左側(cè)或右側(cè)，會(huì)出現(xiàn)一個(gè)藍(lán)色箭頭，讓他們知道還有更多作品可以探索。在屏幕中央，“查看項(xiàng)目”字樣出現(xiàn)。單擊后，訪客將被帶到該項(xiàng)目的案例研究頁面。

設(shè)計(jì)一個(gè)能夠體現(xiàn)您創(chuàng)意作品的英雄圖

英雄圖的設(shè)計(jì)在作品集網(wǎng)站上尤其重要，因?yàn)樗粌H需要反映訪客將在您的網(wǎng)站上找到的內(nèi)容，還需要反映您作為創(chuàng)意人員的才能。因此，您必須確保創(chuàng)建的英雄圖能夠適當(dāng)?shù)貫槟於ɑA(chǔ)。

使用BeTheme之類的WordPress主題的好處在于，它帶有101個(gè)預(yù)制作品集網(wǎng)站。每個(gè)網(wǎng)站都配有手工制作的英雄圖設(shè)計(jì)，這將使更新我們上面討論的六個(gè)關(guān)鍵組件變得容易。

(此處可以添加常見問題解答部分，內(nèi)容與原文FAQ部分一致，但語言表達(dá)可以更精煉或更符合中文習(xí)慣。)

通過關(guān)注以上六個(gè)要素，并巧妙地運(yùn)用圖像、背景、字體、顏色、互動(dòng)和號(hào)召性用語，您可以創(chuàng)建出完美的英雄圖，為您的作品集網(wǎng)站留下深刻的第一印象，吸引更多潛在客戶。

以上是如何為您的投資組合網(wǎng)站創(chuàng)建完美的英雄圖像的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！