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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 確定顏色的作用

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

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

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

雖然這種色彩奇觀非常適合這家機(jī)構(gòu)，但它可能不適合其他類(lèi)型的創(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)自問(wèn)以下問(wèn)題：

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

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

5. 通過(guò)交互使其更令人印象深刻

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

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

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

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

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

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

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

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

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

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

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

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

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

還有一種選擇是鼓勵(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)目的案例研究頁(yè)面。

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

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

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

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