印象很重要。而且，對(duì)于網(wǎng)站而言，印象往往是至關(guān)重要的 - 如果用戶發(fā)現(xiàn)您的網(wǎng)站容易混淆，您可能會(huì)永遠(yuǎn)丟失它們。如果你正在運(yùn)行博客或在線雜志，這意味著你已經(jīng)失去了一個(gè)讀者。如果您經(jīng)營一家公司，這意味著您已經(jīng)失去了銷售。

　　那么，您如何建立一個(gè)能夠吸引用戶注意力并使他們保持足夠的參與度以閱讀更多文章，反復(fù)訪問您的業(yè)務(wù)或購買您的產(chǎn)品的網(wǎng)站？

　　在設(shè)計(jì)網(wǎng)站方面沒有靈丹妙藥，有多種方式可以創(chuàng)建一個(gè)外觀漂亮的網(wǎng)站。

　　但是，有一些主題和原則支持偉大的網(wǎng)頁設(shè)計(jì)，我們將幫助您將它們應(yīng)用到您的網(wǎng)站。

　　在本指南中：

　　網(wǎng)站設(shè)計(jì)原則

　　網(wǎng)站結(jié)構(gòu)

　　網(wǎng)站生成器模板

　　網(wǎng)站設(shè)計(jì)原則

　　您應(yīng)該記住的一個(gè)口頭禪是您的網(wǎng)站設(shè)計(jì)需要為您的訪問者工作。

　　我們采訪了營銷公司MVF Global的UX架構(gòu)師Saleh Kayyali。

　　Kayyali說，在開始構(gòu)建網(wǎng)站之前，你需要做兩件事：

　　您網(wǎng)站的目的是什么

　　您網(wǎng)站的用戶是誰

　　這些應(yīng)該告知您在網(wǎng)站上做出的每個(gè)決定，從名稱，主頁設(shè)計(jì)到內(nèi)容。如果您不確定誰將會(huì)查看您的網(wǎng)站，或者您的網(wǎng)站目的是什么，那么它可能對(duì)任何用戶都沒有幫助，也不會(huì)對(duì)您失敗。

　　Kayyali指出Snapchat是一項(xiàng)對(duì)其用戶和目的有深刻理解的服務(wù) - 在2017年11月重新設(shè)計(jì)之前。它的目的是促進(jìn)15-20歲之間的有趣，不敬的視覺交流。事實(shí)上，Snapchat對(duì)這個(gè)人群的定位如此之多，以至于許多老年人根本無法理解其實(shí)用性，甚至無法理解其如何運(yùn)作。

　　Snapchat在2017年底的重新設(shè)計(jì)表明，它從根本上誤讀了用戶和應(yīng)用程序的目的。隨著它變得越來越受歡迎，Snapchat的用戶群自然多樣化，這個(gè)更新的用戶群更容易接受贊助和特色內(nèi)容，無論是來自Vice還是華盛頓郵報(bào)。

　　但是，其核心用戶群不容易接受。Snapchat也忽視了它的目的 - 有趣的溝通 - 并且開始沉迷其平臺(tái)貨幣化。其核心用戶群反應(yīng)嚴(yán)重，估值損失超過10億美元。一切都是因?yàn)橹匦略O(shè)計(jì)。

       Snapchat重新設(shè)計(jì)

　　Snapchat重新設(shè)計(jì)之前和之后（信用：XDA開發(fā)人員）

　　因此，了解您的用戶和您網(wǎng)站的目的是值得的。但是，您如何首先了解這些中的任何一個(gè)？

　　了解你的目的

　　了解您網(wǎng)站的目的聽起來很明顯，但Snapchat顯示您可以獲得它的錯(cuò)誤。例如，假設(shè)您正在為銷售手工皂的公司建立一個(gè)網(wǎng)站。您網(wǎng)站的目的是銷售肥皂。

　　當(dāng)然，它可能還有其他方面，例如談?wù)撃愕姆试砼c傳統(tǒng)競(jìng)爭(zhēng)對(duì)手的可持續(xù)性。但是，如果你不賣肥皂，那么你的網(wǎng)站就不會(huì)成功。

　　了解您的用戶

　　Kayyali解釋說，一旦確定了網(wǎng)站的目的，您需要查看您想要吸引的人的類型。

　　例如，如果您銷售手工皂，那么您的目標(biāo)受眾可能不會(huì)是15-20歲，就像Snapchat一樣。相反，您的用戶可能是30-50歲，可支配收入更多，可用于肥皂。

　　一個(gè)有用的提示是通過創(chuàng)建所謂的角色來將目標(biāo)用戶分解為不同的組。正如Kayyali所說，這些是“代表一組用戶的普遍化，虛構(gòu)的人”。

　　創(chuàng)建這些角色的方式是研究您的市場(chǎng)。看看與您類似的其他網(wǎng)站：您是否想要效仿另一家肥皂公司 - 例如Burts Bees？如果您已經(jīng)構(gòu)建了自己的網(wǎng)站，是否可以調(diào)查現(xiàn)有用戶以了解他們是誰以及他們喜歡什么？或者與家人和朋友討論您的網(wǎng)站以及您網(wǎng)站發(fā)布的圖片。

　　通過積累這些知識(shí)，您將能夠找到用戶的需求。他們想快速購買花式肥皂并繼續(xù)前進(jìn)嗎？他們只購買與他們有親和力的品牌嗎？可能他們甚至想要重復(fù)肥皂訂單？

　　無論你發(fā)現(xiàn)什么，你都需要先把這些需求放在首位。

　　網(wǎng)站結(jié)構(gòu)

　　但是，在設(shè)計(jì)網(wǎng)站結(jié)構(gòu)時(shí)，這意味著什么呢？作為一個(gè)例子，我們將堅(jiān)持使用我們想象中的肥皂店。

　　我們建議在Tech.Co.使用網(wǎng)站建設(shè)者。這些現(xiàn)代工具提供了簡(jiǎn)單，便宜和簡(jiǎn)單的方法來自己構(gòu)建網(wǎng)站。

　　像Wix這樣的網(wǎng)站提供了很棒的模板，可以為您提供網(wǎng)站的核心架構(gòu)。盡管如此，考慮用戶如何從主頁，選擇產(chǎn)品，購買它，仍然值得勾勒出您理想的網(wǎng)站。

　　您應(yīng)該考慮盡可能簡(jiǎn)化此過程，同時(shí)請(qǐng)記住，人們可能希望在最后一刻添加產(chǎn)品，或者稍后再回到訂單。

　　當(dāng)然，這會(huì)因每個(gè)網(wǎng)站而異。由于我們只銷售肥皂，我們希望允許用戶靈活地修改訂單，或者在選擇和購買產(chǎn)品之間來回跳轉(zhuǎn)。但是，如果我們是一家航空公司，我們需要一個(gè)更加規(guī)范的系統(tǒng)，幫助我們的用戶正確預(yù)訂機(jī)票。

　　Kayyali說好的網(wǎng)站“消除認(rèn)知努力”。這意味著，雖然用戶完全了解他們?cè)谀木W(wǎng)站上所采取的決策和行動(dòng)，但這些決不應(yīng)該讓您感到辛苦。

　　網(wǎng)站美學(xué)

　　你可能會(huì)對(duì)我們說這個(gè)很無聊，但想想你的用戶。

　　如果您的用戶正在尋找一家生產(chǎn)可持續(xù)天然肥皂的肥皂公司，那么他們希望在您的網(wǎng)站上看到這一點(diǎn)。想想自然的圖像，看起來健康的人，以及對(duì)您的環(huán)保信譽(yù)的參考。但是，如果您的肥皂公司銷售經(jīng)過嚴(yán)格測(cè)試的臨床肥皂，您可能需要更簡(jiǎn)約的美學(xué)，這表明科學(xué)的清潔度。

　　這也值得研究設(shè)計(jì)趨勢(shì)。例如，由于計(jì)算機(jī)害羞的用戶可以立即理解不同元素的功能，因此曾經(jīng)非常受歡迎的擬態(tài)風(fēng)格。網(wǎng)站中的Skeuomorphism是明確設(shè)計(jì)屏幕項(xiàng)目以模仿真實(shí)世界的對(duì)應(yīng)物 - 例如此頁面上的日歷和記事本。

　　Skeuomorphic網(wǎng)站設(shè)計(jì)

　　這被平面設(shè)計(jì)取代，平面設(shè)計(jì)強(qiáng)調(diào)可用性，清晰，清晰描繪的元素具有明顯的目的 - 如下面的網(wǎng)站。平面設(shè)計(jì)網(wǎng)站也傾向于在移動(dòng)設(shè)備上更好地工作。

　　圍繞平面設(shè)計(jì)建立的網(wǎng)站示例，最近我們看到很多設(shè)計(jì)利用陰影和滾動(dòng)紋理而不是簡(jiǎn)單的扁平元素。這些對(duì)于維護(hù)用戶在網(wǎng)站上的參與度非常有用。畢竟，滾動(dòng)比點(diǎn)擊更容易 - 特別是在移動(dòng)設(shè)備上。但是，值得確保滾動(dòng)的目的仍然很明顯。

　　滾動(dòng)設(shè)計(jì)示例網(wǎng)站配色方案

　　一旦您建立了網(wǎng)站的一般美學(xué)，您就可以選擇一種配色方案。這不一定需要保持一致 - 但它確實(shí)需要反映您的品牌。

　　事實(shí)上，更改配色方案有助于區(qū)分您銷售的產(chǎn)品。例如，看看Apple改變每個(gè)iPhone的顏色主題的方式。

　　iPhone X iPhone 8 iPhone 7產(chǎn)品頁面再次，選擇配色方案在很大程度上取決于用戶的文化。Snapchat雖然相對(duì)落后于優(yōu)雅，卻堅(jiān)持使用大膽的原色，使其在年輕觀眾中如此受歡迎。

　　谷歌的網(wǎng)站顏色極簡(jiǎn)主義，突出了其品牌標(biāo)識(shí)的大膽原色。這提供了一致性，并清楚地表明其無數(shù)產(chǎn)品中的哪些產(chǎn)品具有哪些功能。

　　華碩'游戲玩家共同體子品牌嚴(yán)重依賴黑色和紅色，使其產(chǎn)品和網(wǎng)站看起來很嚴(yán)肅，甚至是男子氣概 - 正是其用戶所追求的。

　　為您的網(wǎng)站選擇字體

　　如果你想，你可以在字體和字體方面讓自己陷入兔子洞。

　　例如，Serif字體在每個(gè)字母的末尾都有很少的線條。Sans-serif字體，就像我們?cè)赥ech.Co上使用的Arial一樣，沒有這些小行。

　　等寬字體使所有字母占據(jù)頁面上相同的水平空間 - 例如，這意味著“l(fā)”與“m”一樣寬。腳本字體有許多子類（基本上是模仿手寫的字體）。

　　Blackletter字體具有寬而重的字母，還有裝飾字體，如bauhaus，專為海報(bào)和標(biāo)志設(shè)計(jì)。

　　就像我們說的那樣，在選擇字體時(shí)會(huì)有一個(gè)兔子洞。

　　但是，只要您根據(jù)用戶的文化和您想要?jiǎng)?chuàng)建的品牌類型選擇字體。它不必在您的網(wǎng)站上保持一致，但有明確的理由選擇為什么不同的部分將具有不同的字體 - 它需要反映網(wǎng)站該方面的目的。

　　回到我們想象中的肥皂公司 - 我們會(huì)避免使用諸如Times New Roman之類的襯線字體作為標(biāo)識(shí)和標(biāo)題，因?yàn)樗鼈兛梢允抢鲜降模ǔ沁@是您想要的體驗(yàn)）。顯示Cooper Black等字體可能適合徽標(biāo)和導(dǎo)航按鈕。但是，對(duì)于冗長(zhǎng)的文本，如產(chǎn)品描述或條款和條件，您需要一種易于閱讀的字體，如Arial。