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