網(wǎng)站訪問者決定留下或離開可能只需要幾秒鐘。因此，初學(xué)者一開始可能會發(fā)現(xiàn)網(wǎng)頁設(shè)計(jì)非常棘手。因此，請考慮閱讀本文的其余部分，以了解各種初學(xué)者所犯的一些常見網(wǎng)頁設(shè)計(jì)錯誤以及如何解決這些錯誤。

(1)立即使用適當(dāng)?shù)脑O(shè)計(jì)軟件

(2)不考慮移動友好性

(3)缺乏明確的號召性用語

(4)模糊的品牌信息

(5)結(jié)論

立即使用適當(dāng)?shù)脑O(shè)計(jì)軟件

如果您考慮網(wǎng)頁設(shè)計(jì)，那么您首先想到的任務(wù)就是使用適當(dāng)?shù)能浖５?，這一步是很多初學(xué)者經(jīng)常犯的錯誤。換句話說，你不需要直接到你的電腦前開始網(wǎng)頁設(shè)計(jì)。

根據(jù)網(wǎng)站設(shè)計(jì)機(jī)構(gòu)的說法，完成一個網(wǎng)站所需的時間可能取決于某些因素。這些元素可能包括網(wǎng)站的整體規(guī)模、所涉及的資源以及要添加到域中的其他技術(shù)。因此，在使用您喜歡的軟件之前，您可能需要先與您的設(shè)計(jì)團(tuán)隊(duì)進(jìn)行協(xié)商和計(jì)劃。

但是，如果你一個人工作呢？盡管如此，您需要制定一個可能不需要使用數(shù)字工具的計(jì)劃。許多專業(yè)的網(wǎng)頁設(shè)計(jì)師甚至從一支筆和一張紙開始。如果您對哪個元素去哪里有一個清晰的了解，那將是最好的。

設(shè)身處地為訪客著想；然后，問問自己該網(wǎng)站是否會響應(yīng)您的需求。它的視覺吸引力是否足以讓您在首頁上停留幾秒鐘以上？在創(chuàng)建草稿時考慮這些問題。一旦你有了你的草圖，你可能會考慮創(chuàng)建一個模型網(wǎng)站來測試它的美學(xué)和功能。

不考慮移動友好性

如果您的網(wǎng)站不適合移動設(shè)備，您可能會錯過大量網(wǎng)絡(luò)流量。請記住，有幾個人使用智能手機(jī)比使用電腦更多，因?yàn)榍罢弑群笳吒o湊。

再次嘗試設(shè)身處地為目標(biāo)受眾著想。特別是，想象一下，如果您的訪問者正在通過他們的智能手機(jī)查看您的網(wǎng)站，而您的在線頁面不適合移動設(shè)備。您自己可能會發(fā)現(xiàn)經(jīng)常放大以閱讀每個頁面上的文本或單擊鏈接很煩人。

值得慶幸的是，現(xiàn)在各種網(wǎng)站構(gòu)建器都提供了自動解決方案，因此您無需為您的網(wǎng)站創(chuàng)建新代碼即可變得適合移動設(shè)備。但是，這并不意味著您應(yīng)該忽略其他元素。這些自動功能可能會有所幫助，但它們并不完美。

以下是一些編輯網(wǎng)站設(shè)計(jì)以使其比以前更適合移動設(shè)備的方法：

增加按鈕的大小和邊距

大約 45 到 57 像素。

不要將懸停狀態(tài)置于鏈接和號召性用語中。

在不放大頁面的情況下增加文本大小以提高可讀性。

增加導(dǎo)航菜單及其項(xiàng)目周圍的填充或空白。

缺乏明確的號召性用語

想象一下，您正在訪問一家在線零售商，但該商店的頁面沒有號召性用語。也許，您的下一步將是關(guān)閉選項(xiàng)卡或窗口并繼續(xù)您的一天。

但是，號召性用語為訪問者提供方向并有助于創(chuàng)造緊迫感。因此，您的受眾可能會比預(yù)期更長時間地停留在您的網(wǎng)站上。

號召性用語的一些示例是：

注冊時事通訊

在社交媒體上分享此頁面

免費(fèi)試用

閱讀更多文章

支持本站

但是，好的號召性用語和壞的號召性用語有什么區(qū)別呢？創(chuàng)建此現(xiàn)場元素時，請考慮以下因素：

將號召性用語放在明亮的按鈕中，以立即引起觀眾的注意。

字體大小應(yīng)該足夠大以引起人們的興趣。

它應(yīng)該從一開始就促進(jìn)明確的利益。

它應(yīng)該簡短而直接。

您還可以通過在號召性用語附近放置限時優(yōu)惠來增強(qiáng)這種緊迫感。例如，如果您的在線商店正在促銷促銷，請說明促銷結(jié)束的日期。

俯瞰列、網(wǎng)格和參考線

列、網(wǎng)格和指南是設(shè)計(jì)網(wǎng)站的基本元素，因?yàn)檫@些組件可幫助您的頁面保持清潔和有序。各種初級網(wǎng)頁設(shè)計(jì)師可能沒有看到使用這些組件的重要性，導(dǎo)致他們的網(wǎng)站結(jié)果看起來很混亂。

使用列垂直分割不同的內(nèi)容。這些元素有助于確保其他組件正確對齊。此外，列非常通用，因?yàn)槟梢愿鶕?jù)自己的喜好設(shè)置它們的尺寸。

因此，許多設(shè)計(jì)師傾向于在網(wǎng)站欄的兩側(cè)放置網(wǎng)格和指南。這些元素有助于為內(nèi)容提供喘息空間。否則，所有內(nèi)容都可能看起來很“緊湊”，因?yàn)槲谋竞蛨D像看起來像是擠在瀏覽器窗口中一樣。

另外，請注意，對于每個 Web 和圖形設(shè)計(jì)軟件，使用列、網(wǎng)格和指南的方法往往不同。例如，如果您在設(shè)計(jì)模型網(wǎng)站時使用 Adoe Photoshop，則可以通過選擇移動工具或按鍵盤上的“V”來放置參考線。然后，在將鼠標(biāo)拖動到所需位置之前，單擊水平或垂直標(biāo)尺。您應(yīng)該會看到一條線，可以幫助您在項(xiàng)目屏幕上定位某些項(xiàng)目。

至于列，您可以創(chuàng)建自定義形狀。調(diào)整這些形狀的大小以匹配您網(wǎng)站的偏好。

您可能還需要激活 Adobe Photoshop 上的“對齊對象”功能，以確保正確對齊所有元素。通過單擊“查看”激活此功能，然后選擇“對齊對象”選項(xiàng)。

模糊的品牌信息

永遠(yuǎn)記住，您的網(wǎng)站將與目標(biāo)受眾進(jìn)行交流。然而，許多初學(xué)者網(wǎng)頁設(shè)計(jì)師傾向于將品牌視為一個被低估的方面。

良好或出色的網(wǎng)站設(shè)計(jì)的基本因素之一是其講述故事的能力。講故事使網(wǎng)站能夠傳達(dá)吸引目標(biāo)受眾并在情感層面上與他們聯(lián)系的信息。

建立適當(dāng)?shù)木W(wǎng)站層次結(jié)構(gòu)應(yīng)該是為您的網(wǎng)站傳達(dá)故事的絕佳方式。用戶向下滾動時的元素流應(yīng)該解決目標(biāo)市場的動機(jī)和需求。換句話說，如果您不想讓其他人看到它，您可能不想建立一個網(wǎng)站。請記住，互聯(lián)網(wǎng)是一個相對公共的空間，因此您應(yīng)該考慮這樣對待您的網(wǎng)站。

以下是一些快速提示，可幫助您建立良好的網(wǎng)站層次結(jié)構(gòu)：

始終考慮簡單。不要過度復(fù)雜化或過度思考這個過程。讓您的網(wǎng)站快速傳達(dá)其信息，以免您的訪問者迅速失去興趣。

只保留幾個主要類別。根據(jù)經(jīng)驗(yàn)，您的主要網(wǎng)站類別不應(yīng)超過七個，除非您經(jīng)營的是在線商店。

旨在平衡每個類別的子類別數(shù)量。這樣做將使您的網(wǎng)站看起來井井有條，創(chuàng)造平衡并增強(qiáng)視覺吸引力。

提供良好或出色的站點(diǎn)層次結(jié)構(gòu)可以增強(qiáng)整體用戶體驗(yàn)。如果做得正確，您的網(wǎng)站可能會成為特定利基市場中的“首選”數(shù)字空間。

結(jié)論

好的網(wǎng)頁設(shè)計(jì)不僅僅是在互聯(lián)網(wǎng)上發(fā)布網(wǎng)站。它需要為不同的用戶散發(fā)出形式和功能。學(xué)習(xí)并理解上面提到的常見錯誤，您可能會創(chuàng)建一個可以吸引多個市場的網(wǎng)站，如果您是一名網(wǎng)頁設(shè)計(jì)愛好者，歡迎加入設(shè)計(jì)。

如果您需要建站服務(wù)，樂于為您服務(wù)。