第一印象很重要。而且，對于網(wǎng)站而言，第一印象往往是至關(guān)重要的 - 如果用戶發(fā)現(xiàn)您的網(wǎng)站容易混淆，您可能會永遠(yuǎn)丟失它們。如果你正在運行博客或在線雜志，這意味著你已經(jīng)失去了一個讀者。如果您經(jīng)營一家公司，這意味著您已經(jīng)失去了銷售?！ ?/p>
那么，您如何建立一個能夠吸引用戶注意力并使他們保持足夠的參與度以閱讀更多文章，反復(fù)訪問您的業(yè)務(wù)或購買您的產(chǎn)品的網(wǎng)站？
在設(shè)計網(wǎng)站方面沒有靈丹妙藥，有多種方式可以創(chuàng)建一個外觀漂亮的網(wǎng)站?！ ?/p>
但是，有一些主題和原則支持偉大的網(wǎng)頁設(shè)計，我們將幫助您將它們應(yīng)用到您的網(wǎng)站。
在本指南中：
網(wǎng)站設(shè)計原則
網(wǎng)站結(jié)構(gòu)
網(wǎng)站生成器模板
網(wǎng)站設(shè)計原則
您應(yīng)該永遠(yuǎn)記住的一個口頭禪是您的網(wǎng)站設(shè)計需要為您的訪問者工作?！ ?/p>
我們采訪了營銷公司MVF Global的高級UX架構(gòu)師Saleh Kayyali?！ ?/p>
Kayyali說，在開始構(gòu)建網(wǎng)站之前，你需要做兩件事：
您網(wǎng)站的目的是什么
您網(wǎng)站的用戶是誰
這些應(yīng)該告知您在網(wǎng)站上做出的每個決定，從名稱，主頁設(shè)計到內(nèi)容。如果您不確定誰將會查看您的網(wǎng)站，或者您的網(wǎng)站目的是什么，那么它可能對任何用戶都沒有幫助，也不會對您失敗?！ ?/p>
Kayyali指出Snapchat是一項對其用戶和目的有深刻理解的服務(wù) - 在2017年11月重新設(shè)計之前。它的目的是促進(jìn)15-20歲之間的有趣，不敬的視覺交流。事實上，Snapchat對這個人群的定位如此之多，以至于許多老年人根本無法理解其實用性，甚至無法理解其如何運作?！ ?/p>
Snapchat在2017年底的重新設(shè)計表明，它從根本上誤讀了用戶和應(yīng)用程序的目的。隨著它變得越來越受歡迎，Snapchat的用戶群自然多樣化，這個更新的用戶群更容易接受贊助和特色內(nèi)容，無論是來自Vice還是華盛頓郵報。
但是，其核心用戶群不容易接受。Snapchat也忽視了它的目的 - 有趣的溝通 - 并且開始沉迷其平臺貨幣化。其核心用戶群反應(yīng)嚴(yán)重，估值損失超過10億美元。一切都是因為重新設(shè)計。
Snapchat重新設(shè)計
Snapchat重新設(shè)計之前和之后（信用：XDA開發(fā)人員）
因此，了解您的用戶和您網(wǎng)站的目的是值得的。但是，您如何首先了解這些中的任何一個？
了解你的目的
了解您網(wǎng)站的目的聽起來很明顯，但Snapchat顯示您可以獲得它的錯誤。例如，假設(shè)您正在為銷售手工皂的公司建立一個網(wǎng)站。您網(wǎng)站的目的是銷售肥皂?！ ?/p>
當(dāng)然，它可能還有其他方面，例如談?wù)撃愕姆试砼c傳統(tǒng)競爭對手的可持續(xù)性。但是，如果你不賣肥皂，那么你的網(wǎng)站就不會成功?！ ?/p>
了解您的用戶
Kayyali解釋說，一旦確定了網(wǎng)站的目的，您需要查看您想要吸引的人的類型。
例如，如果您銷售手工皂，那么您的目標(biāo)受眾可能不會是15-20歲，就像Snapchat一樣。相反，您的用戶可能是30-50歲，可支配收入更多，可用于肥皂。
一個有用的提示是通過創(chuàng)建所謂的角色來將目標(biāo)用戶分解為不同的組。正如Kayyali所說，這些是“代表一組用戶的普遍化，虛構(gòu)的人”。
創(chuàng)建這些角色的最佳方式是研究您的市場。看看與您類似的其他網(wǎng)站：您是否想要效仿另一家肥皂公司 - 例如Burts Bees？如果您已經(jīng)構(gòu)建了自己的網(wǎng)站，是否可以調(diào)查現(xiàn)有用戶以了解他們是誰以及他們喜歡什么？或者與家人和朋友討論您的網(wǎng)站以及您網(wǎng)站發(fā)布的圖片?！ ?/p>
通過積累這些知識，您將能夠找到用戶的需求。他們想快速購買花式肥皂并繼續(xù)前進(jìn)嗎？他們只購買與他們有親和力的品牌嗎？可能他們甚至想要重復(fù)肥皂訂單？
無論你發(fā)現(xiàn)什么，你都需要先把這些需求放在首位。
網(wǎng)站結(jié)構(gòu)
但是，在設(shè)計網(wǎng)站結(jié)構(gòu)時，這意味著什么呢？作為一個例子，我們將堅持使用我們想象中的肥皂店。
我們建議在Tech.Co.使用網(wǎng)站建設(shè)者。這些現(xiàn)代工具提供了簡單，便宜和簡單的方法來自己構(gòu)建網(wǎng)站。
像Wix這樣的網(wǎng)站提供了很棒的模板，可以為您提供網(wǎng)站的核心架構(gòu)。盡管如此，考慮用戶如何從主頁，選擇產(chǎn)品，購買它，仍然值得勾勒出您理想的網(wǎng)站?！?/p>
您應(yīng)該考慮盡可能簡化此過程，同時請記住，人們可能希望在最后一刻添加產(chǎn)品，或者稍后再回到訂單?！ ?/p>
當(dāng)然，這會因每個網(wǎng)站而異。由于我們只銷售肥皂，我們希望允許用戶靈活地修改訂單，或者在選擇和購買產(chǎn)品之間來回跳轉(zhuǎn)。但是，如果我們是一家航空公司，我們需要一個更加規(guī)范的系統(tǒng)，幫助我們的用戶正確預(yù)訂機(jī)票。
Kayyali說最好的網(wǎng)站“消除認(rèn)知努力”。這意味著，雖然用戶完全了解他們在您的網(wǎng)站上所采取的決策和行動，但這些決不應(yīng)該讓您感到辛苦。
網(wǎng)站美學(xué)
你可能會對我們說這個很無聊，但想想你的用戶?！ ?/p>
如果您的用戶正在尋找一家生產(chǎn)可持續(xù)天然肥皂的肥皂公司，那么他們希望在您的網(wǎng)站上看到這一點。想想自然的圖像，看起來健康的人，以及對您的環(huán)保信譽(yù)的參考。但是，如果您的肥皂公司銷售經(jīng)過嚴(yán)格測試的臨床肥皂，您可能需要更簡約的美學(xué)，這表明科學(xué)的清潔度?！ ?/p>
這也值得研究設(shè)計趨勢。例如，由于計算機(jī)害羞的用戶可以立即理解不同元素的功能，因此曾經(jīng)非常受歡迎的擬態(tài)風(fēng)格。網(wǎng)站中的Skeuomorphism是明確設(shè)計屏幕項目以模仿真實世界的對應(yīng)物 - 例如此頁面上的日歷和記事本?！ ?/p>
Skeuomorphic網(wǎng)站設(shè)計
這被平面設(shè)計取代，平面設(shè)計強(qiáng)調(diào)可用性，清晰，清晰描繪的元素具有明顯的目的 - 如下面的網(wǎng)站。平面設(shè)計網(wǎng)站也傾向于在移動設(shè)備上更好地工作。
圍繞平面設(shè)計建立的網(wǎng)站示例最近，我們看到很多設(shè)計利用陰影和滾動紋理而不是簡單的扁平元素。這些對于維護(hù)用戶在網(wǎng)站上的參與度非常有用。畢竟，滾動比點擊更容易 - 特別是在移動設(shè)備上。但是，值得確保滾動的目的仍然很明顯?！ ?/p>
滾動設(shè)計示例網(wǎng)站配色方案
一旦您建立了網(wǎng)站的一般美學(xué)，您就可以選擇一種配色方案。這不一定需要保持一致 - 但它確實需要反映您的品牌?！ ?/p>
事實上，更改配色方案有助于區(qū)分您銷售的產(chǎn)品。例如，看看Apple改變每個iPhone的顏色主題的方式?！ ?/p>
iPhone X iPhone 8 iPhone 7產(chǎn)品頁面再次，選擇配色方案在很大程度上取決于用戶的文化。Snapchat雖然相對落后于優(yōu)雅，卻堅持使用大膽的原色，使其在年輕觀眾中如此受歡迎?！ ?/p>
谷歌的網(wǎng)站顏色極簡主義，突出了其品牌標(biāo)識的大膽原色。這提供了一致性，并清楚地表明其無數(shù)產(chǎn)品中的哪些產(chǎn)品具有哪些功能。
華碩'游戲玩家共同體子品牌嚴(yán)重依賴黑色和紅色，使其產(chǎn)品和網(wǎng)站看起來很嚴(yán)肅，甚至是男子氣概 - 正是其用戶所追求的?！ ?/p>
為您的網(wǎng)站選擇字體
如果你想，你可以在字體和字體方面讓自己陷入永無止境的兔子洞?！ ?/p>
例如，Serif字體在每個字母的末尾都有很少的線條。Sans-serif字體，就像我們在Tech.Co上使用的Arial一樣，沒有這些小行?！ ?/p>
等寬字體使所有字母占據(jù)頁面上相同的水平空間 - 例如，這意味著“l(fā)”與“m”一樣寬。腳本字體有許多子類（基本上是模仿手寫的字體）?！ ?/p>
Blackletter字體具有寬而重的字母，還有裝飾字體，如bauhaus，專為海報和標(biāo)志設(shè)計?！ ?/p>
就像我們說的那樣，在選擇字體時會有一個真正的兔子洞?！ ?/p>
但是，只要您根據(jù)用戶的文化和您想要創(chuàng)建的品牌類型選擇字體，您就會成為贏家。它不必在您的網(wǎng)站上保持一致，但有明確的理由選擇為什么不同的部分將具有不同的字體 - 它需要反映網(wǎng)站該方面的目的?！ ?/p>
回到我們想象中的肥皂公司 - 我們會避免使用諸如Times New Roman之類的襯線字體作為標(biāo)識和標(biāo)題，因為它們可以是老式的（除非這是您想要的體驗）。顯示Cooper Black等字體可能適合徽標(biāo)和導(dǎo)航按鈕。但是，對于冗長的文本，如產(chǎn)品描述或條款和條件，您需要一種易于閱讀的字體，如Arial。
歡迎訪問更多網(wǎng)站推廣,網(wǎng)絡(luò)營銷,網(wǎng)站優(yōu)化,SEO相關(guān)內(nèi)容
.png)