雖然每個設計師在建立網站時可能有不同的計劃,但他們确實有一(yī)個共同的清單。無論您如何嘗試避免它,每個網站都應該(通常是!)包含一(yī)些元素。
從大(dà)量的空白(bái)和精美的圖像,到搜索功能和清晰的号召性用語,這些常見元素是用戶在輕松使用網站時所期望的。今天,我(wǒ)(wǒ)們來看看您應該在網站上優先考慮的九個元素,如何在下(xià)一(yī)個網站設計項目中(zhōng)使用每個元素的技巧。俗話(huà)說,“魔鬼在細節”。
1、空間
空間是最重要的設計工(gōng)具之一(yī),因爲它決定了一(yī)切——從流動到可讀性。設計師開(kāi)始以十年前我(wǒ)(wǒ)們在網絡上看不到的方式使用空間。更多的網站設計包括廣闊的空間、增加的文本行間距以及開(kāi)放(fàng)空間的整體(tǐ)使用。
關鍵的空間關系包括間距的一(yī)緻性。相似的元素應該包括相似的間距。段落中(zhōng)各行之間的空間量應該相同,環繞圖像的量也應該相同。
在爲用戶創建焦點時,空間也很重要。與擠在設計中(zhōng)較小(xiǎo)或較緊湊位置的圖像或文本相比,由空白(bái)包圍的圖像或文本會顯得更大(dà)、更重要。
同樣重要的是要注意空間并不總是白(bái)色的。它指的是缺乏元素,同樣可以是背景顔色或紋理。
如何使用它:例如,從導航菜單等關鍵元素開(kāi)始。确保元素的組織方式包括元素之間的設置間距。這将使每個按鈕或單詞單獨更清晰地突出。
2、簡單導航
導航不需要很複雜(zá)。它應該易于識别和使用。将導航菜單保持在最低限度也很重要,這樣您就不會讓用戶不知(zhī)所措。根據網站的類型,五到十個菜單導航項是您應該瞄準的最高端。
導航還包括幫助用戶浏覽網站的工(gōng)具。例如,具有視差滾動功能的站點通常包含方向箭頭以使站點更加用戶友好。人們越容易在您的網站上使用和導航,他們與之互動的時間就越長。
上面的例子展示了兩種截然不同的導航類型:Zola它包括一(yī)個簡單的菜單和進度導航,可點擊的文本作爲按鈕;Anet Design顯示了更時髦、更有創意的按鈕樣式。兩個站點的共同點是主導航永遠不會移動或更改,從而在每個站點上創建一(yī)緻性和流程。
如何使用:使用簡單的導航作爲您網站構建的框架。請記住,用戶希望從導航中(zhōng)獲得一(yī)些關鍵信息:了解他們在網站上的位置、返回(或回首頁)的方式和方向(如果您的網站具有不尋常或更複雜(zá)的界面)。
3、關于我(wǒ)(wǒ)們
對于小(xiǎo)型企業或網站所有者來說,告訴用戶他們是誰尤其重要。(這對于家喻戶曉的大(dà)公司來說不太重要,盡管它仍然是一(yī)種常見做法。)
“關于我(wǒ)(wǒ)們”頁面應該告訴用戶你是誰以及你做什麽。它可以概述公司的理念或目标或網站是如何形成的。此頁面也可以是客戶或用戶推薦和成功案例的地方。這種類型的頁面還可以作爲通往相關頁面甚至社交媒體(tǐ)資(zī)料的門戶。
關于我(wǒ)(wǒ)們頁面經常發生(shēng)的一(yī)個問題是它們變得冗長冗長。保持頁面簡單;爲用戶提供足夠的信息以使其感興趣但不會感到無聊。并記住保持設計有趣。
如何使用它:使用“關于我(wǒ)(wǒ)們”頁面爲您的品牌賦予一(yī)點個性。考慮包括您團隊的照片和簡短的公司傳記。
4、聯系方式
聯系信息通常以兩種方式之一(yī)顯示 - 在标題/主導航中(zhōng),或作爲帶有表單或擴展信息的聯系我(wǒ)(wǒ)們頁面。根據您的網站設計,這兩種選擇都可以很好地工(gōng)作。
關鍵是讓它高度可見,擁有聯系信息(例如電(diàn)話(huà)号碼、實際地址或聯系網站所有者的表格)可爲您的網站和業務增加合法性。如果用戶想要找到您并且網站上未明确列出信息,這可能會令人沮喪。
如何使用:将聯系信息添加到所有靜态頁眉或頁腳。如果您有實際的營業地址,請提供位置信息。考慮一(yī)個聯系表格,以便用戶可以直接從網站發送電(diàn)子郵件。
5、号召性用語(或注冊)
在大(dà)多數情況下(xià),網站是采取行動的門戶——進行銷售、提供信息、收集聯系信息。爲了确保這一(yī)行動,号召性用語提示需要明顯而有力。
首先,确定您的網站應該做什麽。然後設計它,使動作顯而易見并引導用戶使用它。顔色、對比度和空間等技術可以幫助引導用戶找到“正确”的按鈕。例如,Connect Mania 希望用戶下(xià)載應用程序。登陸頁面上滾動條唯一(yī)可點擊的空間将您帶到 App Store。
另一(yī)個流行的号召性用語是注冊表單。如果這是您的目标,請将表格放(fàng)在主要位置并突出顯示其大(dà)小(xiǎo)。使表格簡單且易于填寫。(如果您需要兩到三條以上的信息,請考慮使用後續電(diàn)子郵件,而不是複雜(zá)的注冊表單。)
如何使用它:使号召性用語顯而易見。展示位置應位于頁面的顯眼部分(fēn),并位于與其相關的項目旁邊。按鈕應采用對比色,并準确說明您應該做什麽:立即購買、加入、下(xià)載、免費(fèi)注冊。
6、搜索
您有多少次想要查找較舊(jiù)的信息或您記得在喜歡的網站上看到的内容?這就是搜索的用武之地。該工(gōng)具對于重複用戶至關重要。以不顯眼但易于使用的方式設計盒子。确保該框足夠大(dà),可以輸入您網站上的術語。如果您使用圖标進行搜索,則無需發明新東西;使用标準放(fàng)大(dà)鏡。
如何使用它:設計一(yī)個簡單的框,位于您網站的頂部以供搜索。右上角是最受歡迎的位置,使用該空間是預期的并且易于用戶找到。
7、信息頁腳
頁腳是您如何在不妨礙設計的情況下(xià)通過大(dà)量信息與觀衆聯系的方式。由于頁腳位于頁面底部,因此它是放(fàng)置小(xiǎo)型站點地圖、公司或聯系信息、鏈接和站點上下(xià)文的合理位置。
使頁腳有用并保持簡單。無論您選擇幾個按鈕還是鏈接式設計,頁腳都應該設計爲與您的網站相結合,但可能具有更簡約的感覺。使其易于使用。
如何使用它:一(yī)些最好的頁腳結合了上述許多元素。頁腳通常是在其他地方找到的元素的重複(例如在主導航中(zhōng)的頁面頂部添加搜索,然後在頁腳中(zhōng)再次添加搜索)。如果設計方案中(zhōng)沒有其他邏輯位置,它也可以引入上述一(yī)些元素并容納它們。
8、按鈕樣式
網站上的每個按鈕都應該可以識别爲按鈕。無論目的或位置如何,它們都應該具有相同的形狀、設計效果和感覺。對于具有大(dà)量可點擊項目的網站來說,創建一(yī)組獨特的按鈕可能是一(yī)項艱巨的任務。考慮使用設計套件來創建一(yī)組一(yī)緻的元素。
如何使用它:開(kāi)發一(yī)組您網站獨有的按鈕。創建一(yī)緻的顔色主題,每個按鈕都是單一(yī)色調或整體(tǐ)風格,如形狀或紋理。
9、精美圖片
人們喜歡在行動中(zhōng)看到事物(wù)。創建令人驚歎的視覺效果以吸引用戶訪問您的網站。出色的圖像或插圖是實現此目的的一(yī)種簡單方法。使用相對較小(xiǎo)的一(yī)組精美照片,您可以展示産品、人物(wù)等任何吸引用戶訪問您網站的内容。
上述兩個網站都在展示其産品和風格的圖像方面做得很好。這種類型的自定義圖像很重要。小(xiǎo)心使用過多的庫存圖片,因爲您的網站最終可能看起來像其他東西。
如何使用它:聘請攝影師或插畫師爲您的網站開(kāi)發和創建一(yī)組出色的圖像。依靠自定義圖像而不是庫存圖像來獲得獨特的視覺體(tǐ)驗。
結論
雖然有效的網站設計有很多重要的組成部分(fēn),但包括這十個關鍵元素可以産生(shēng)影響。小(xiǎo)心設計空間、簡單導航、關于我(wǒ)(wǒ)們、聯系信息、号召性用語、搜索、頁腳信息、按鈕和圖像。這些經常被忽視的細節可以成就或破壞您完整的網站設計。