任何網(wǎng)站設計的九個(gè)關(guān)鍵元素發(fā)布者：本站     時(shí)間：2022-02-22 14:02:06

雖然每個(gè)設計師在建立網(wǎng)站時(shí)可能有不同的計劃，但他們確實(shí)有一個(gè)共同的清單。無(wú)論您如何嘗試避免它，每個(gè)網(wǎng)站都應該(通常是!)包含一些元素。

從大量的空白和精美的圖像，到搜索功能和清晰的號召性用語(yǔ)，這些常見(jiàn)元素是用戶(hù)在輕松使用網(wǎng)站時(shí)所期望的。今天，我們來(lái)看看您應該在網(wǎng)站上優(yōu)先考慮的十個(gè)元素，每個(gè)元素的完美設計示例，以及如何在下一個(gè)網(wǎng)站設計項目中使用每個(gè)元素的技巧。俗話(huà)說(shuō)，“魔鬼在細節”。

1.空間




空間是最重要的設計工具之一，因為它決定了一切——從流動(dòng)到可讀性。設計師開(kāi)始以十年前我們在網(wǎng)絡(luò )上看不到的方式使用空間。更多的網(wǎng)站設計包括廣闊的空間、增加的文本行間距以及開(kāi)放空間的整體使用。

關(guān)鍵的空間關(guān)系包括間距的一致性。相似的元素應該包括相似的間距。段落中各行之間的空間量應該相同，環(huán)繞圖像的量也應該相同。

在為用戶(hù)創(chuàng )建焦點(diǎn)時(shí)，空間也很重要。與擠在設計中較小或較緊湊位置的圖像或文本相比，由空白包圍的圖像或文本會(huì )顯得更大、更重要。

同樣重要的是要注意空間并不總是白色的。它指的是缺乏元素，同樣可以是背景顏色或紋理。

如何使用它：例如，從導航菜單等關(guān)鍵元素開(kāi)始。確保元素的組織方式包括元素之間的設置間距。這將使每個(gè)按鈕或單詞單獨更清晰地突出。

2. 簡(jiǎn)單導航





導航不需要很復雜。它應該易于識別和使用。將導航菜單保持在最低限度也很重要，這樣您就不會(huì )讓用戶(hù)不知所措。根據網(wǎng)站的類(lèi)型，五到十個(gè)菜單導航項是您應該瞄準的最高端。

導航還包括幫助用戶(hù)瀏覽網(wǎng)站的工具。例如，具有視差滾動(dòng)功能的站點(diǎn)通常包含方向箭頭以使站點(diǎn)更加用戶(hù)友好。人們越容易在您的網(wǎng)站上使用和導航，他們與之互動(dòng)的時(shí)間就越長(cháng)。

上面的例子展示了兩種截然不同的導航類(lèi)型：Zola它包括一個(gè)簡(jiǎn)單的菜單和進(jìn)度導航，可點(diǎn)擊的文本作為按鈕;Anet Design顯示了更時(shí)髦、更有創(chuàng )意的按鈕樣式。兩個(gè)站點(diǎn)的共同點(diǎn)是主導航永遠不會(huì )移動(dòng)或更改，從而在每個(gè)站點(diǎn)上創(chuàng )建一致性和流程。

如何使用：使用簡(jiǎn)單的導航作為您網(wǎng)站構建的框架。請記住，用戶(hù)希望從導航中獲得一些關(guān)鍵信息：了解他們在網(wǎng)站上的位置、返回(或回首頁(yè))的方式和方向(如果您的網(wǎng)站具有不尋?；蚋鼜碗s的界面)。

3. 關(guān)于我們





對于小型企業(yè)或網(wǎng)站所有者來(lái)說(shuō)，告訴用戶(hù)他們是誰(shuí)尤其重要。(這對于家喻戶(hù)曉的大公司來(lái)說(shuō)不太重要，盡管它仍然是一種常見(jiàn)做法。)

“關(guān)于我們”頁(yè)面應該告訴用戶(hù)你是誰(shuí)以及你做什么。它可以概述公司的理念或目標或網(wǎng)站是如何形成的。此頁(yè)面也可以是客戶(hù)或用戶(hù)推薦和成功案例的地方。這種類(lèi)型的頁(yè)面還可以作為通往相關(guān)頁(yè)面甚至社交媒體資料的門(mén)戶(hù)。

關(guān)于我們頁(yè)面經(jīng)常發(fā)生的一個(gè)問(wèn)題是它們變得冗長(cháng)冗長(cháng)。保持頁(yè)面簡(jiǎn)單;為用戶(hù)提供足夠的信息以使其感興趣但不會(huì )感到無(wú)聊。并記住保持設計有趣。

如何使用它：使用“關(guān)于我們”頁(yè)面為您的品牌賦予一點(diǎn)個(gè)性?？紤]包括您團隊的照片和簡(jiǎn)短的公司傳記。

4. 聯(lián)系方式







聯(lián)系信息通常以?xún)煞N方式之一顯示 - 在標題/主導航中，或作為帶有表單或擴展信息的聯(lián)系我們頁(yè)面。根據您的網(wǎng)站設計，這兩種選擇都可以很好地工作。

關(guān)鍵是讓它高度可見(jiàn)，擁有聯(lián)系信息(例如電話(huà)號碼、實(shí)際地址或聯(lián)系網(wǎng)站所有者的表格)可為您的網(wǎng)站和業(yè)務(wù)增加合法性。如果用戶(hù)想要找到您并且網(wǎng)站上未明確列出信息，這可能會(huì )令人沮喪。

如何使用：將聯(lián)系信息添加到所有靜態(tài)頁(yè)眉或頁(yè)腳。如果您有實(shí)際的營(yíng)業(yè)地址，請提供位置信息?？紤]一個(gè)聯(lián)系表格，以便用戶(hù)可以直接從網(wǎng)站發(fā)送電子郵件。

5.號召性用語(yǔ)(或注冊)





在大多數情況下，網(wǎng)站是采取行動(dòng)的門(mén)戶(hù)——進(jìn)行銷(xiāo)售、提供信息、收集聯(lián)系信息。為了確保這一行動(dòng)，號召性用語(yǔ)提示需要明顯而有力。

首先，確定您的網(wǎng)站應該做什么。然后設計它，使動(dòng)作顯而易見(jiàn)并引導用戶(hù)使用它。顏色、對比度和空間等技術(shù)可以幫助引導用戶(hù)找到“正確”的按鈕。例如，Connect Mania 希望用戶(hù)下載應用程序。登陸頁(yè)面上滾動(dòng)條唯一可點(diǎn)擊的空間將您帶到 App Store。

另一個(gè)流行的號召性用語(yǔ)是注冊表單。如果這是您的目標，請將表格放在主要位置并突出顯示其大小。使表格簡(jiǎn)單且易于填寫(xiě)。(如果您需要兩到三條以上的信息，請考慮使用后續電子郵件，而不是復雜的注冊表單。)

如何使用它：使號召性用語(yǔ)顯而易見(jiàn)。展示位置應位于頁(yè)面的顯眼部分，并位于與其相關(guān)的項目旁邊。按鈕應采用對比色，并準確說(shuō)明您應該做什么：立即購買(mǎi)、加入、下載、免費注冊。

6. 搜索





您有多少次想要查找較舊的信息或您記得在喜歡的網(wǎng)站上看到的內容?這就是搜索的用武之地。該工具對于重復用戶(hù)至關(guān)重要。以不顯眼但易于使用的方式設計盒子。確保該框足夠大，可以輸入您網(wǎng)站上的術(shù)語(yǔ)。如果您使用圖標進(jìn)行搜索，則無(wú)需發(fā)明新東西;使用標準放大鏡。

如何使用它：設計一個(gè)簡(jiǎn)單的框，位于您網(wǎng)站的頂部以供搜索。右上角是最受歡迎的位置，使用該空間是預期的并且易于用戶(hù)找到。

7. 信息頁(yè)腳







頁(yè)腳是您如何在不妨礙設計的情況下通過(guò)大量信息與觀(guān)眾聯(lián)系的方式。由于頁(yè)腳位于頁(yè)面底部，因此它是放置小型站點(diǎn)地圖、公司或聯(lián)系信息、鏈接和站點(diǎn)上下文的合理位置。

使頁(yè)腳有用并保持簡(jiǎn)單。無(wú)論您選擇幾個(gè)按鈕還是鏈接式設計，頁(yè)腳都應該設計為與您的網(wǎng)站相結合，但可能具有更簡(jiǎn)約的感覺(jué)。使其易于使用。

如何使用它：一些最好的頁(yè)腳結合了上述許多元素。頁(yè)腳通常是在其他地方找到的元素的重復(例如在主導航中的頁(yè)面頂部添加搜索，然后在頁(yè)腳中再次添加搜索)。如果設計方案中沒(méi)有其他邏輯位置，它也可以引入上述一些元素并容納它們。

8. 按鈕樣式





網(wǎng)站上的每個(gè)按鈕都應該可以識別為按鈕。無(wú)論目的或位置如何，它們都應該具有相同的形狀、設計效果和感覺(jué)。對于具有大量可點(diǎn)擊項目的網(wǎng)站來(lái)說(shuō)，創(chuàng )建一組獨特的按鈕可能是一項艱巨的任務(wù)?？紤]使用設計套件來(lái)創(chuàng )建一組一致的元素。

如何使用它：開(kāi)發(fā)一組您網(wǎng)站獨有的按鈕。創(chuàng )建一致的顏色主題，每個(gè)按鈕都是單一色調或整體風(fēng)格，如形狀或紋理。

9. 精美圖片





人們喜歡在行動(dòng)中看到事物。創(chuàng )建令人驚嘆的視覺(jué)效果以吸引用戶(hù)訪(fǎng)問(wèn)您的網(wǎng)站。出色的圖像或插圖是實(shí)現此目的的一種簡(jiǎn)單方法。使用相對較小的一組精美照片，您可以展示產(chǎn)品、人物等任何吸引用戶(hù)訪(fǎng)問(wèn)您網(wǎng)站的內容。

上述兩個(gè)網(wǎng)站都在展示其產(chǎn)品和風(fēng)格的圖像方面做得很好。這種類(lèi)型的自定義圖像很重要。小心使用過(guò)多的庫存圖片，因為您的網(wǎng)站最終可能看起來(lái)像其他東西。

如何使用它：聘請攝影師或插畫(huà)師為您的網(wǎng)站開(kāi)發(fā)和創(chuàng )建一組出色的圖像。依靠自定義圖像而不是庫存圖像來(lái)獲得獨特的視覺(jué)體驗。

結論

雖然有效的網(wǎng)站設計有很多重要的組成部分，但包括這十個(gè)關(guān)鍵元素可以產(chǎn)生影響。小心設計空間、簡(jiǎn)單導航、關(guān)于我們、聯(lián)系信息、號召性用語(yǔ)、搜索、頁(yè)腳信息、按鈕和圖像。這些經(jīng)常被忽視的細節可以成就或破壞您完整的網(wǎng)站設計。