發(fā)現(xiàn)一個(gè)糟糕的網(wǎng)站很容易，但弄清楚什么使網(wǎng)站變得好看可能是一個(gè)謎。雖然糟糕的網(wǎng)站會(huì)有一個(gè)混亂的頁面結(jié)構(gòu)，布局混亂，信息質(zhì)量低，但好網(wǎng)站的基本要素更難以發(fā)現(xiàn)和隔離。
那么，是什么讓一個(gè)好的網(wǎng)站？在Tech.co，我們已經(jīng)與網(wǎng)站設(shè)計(jì)方面的專家交流過，以幫助回答這個(gè)問題，并為您提供最好的成功機(jī)會(huì)。
判決？我們發(fā)現(xiàn)最好的網(wǎng)站確實(shí)要求用戶少思考。他們通過確保以清晰，簡單和有效的方式理解并滿足用戶的需求來實(shí)現(xiàn)這一目標(biāo)。
考慮到這一點(diǎn)，最重要的建議是在開始制作或更新之前勾勒出您的網(wǎng)站?？紤]用戶如何繞過您的網(wǎng)站，從主頁到其他每個(gè)頁面。
良好網(wǎng)站設(shè)計(jì)的核心還有標(biāo)準(zhǔn)原則。其中包括確保您的網(wǎng)站可以在計(jì)算機(jī)，手機(jī)和平板電腦上運(yùn)行，并確保視覺元素（包括字體和圖像）的一致性。
想建立自己的網(wǎng)站？你需要適合這項(xiàng)工作的工具。有關(guān)我們的專家評級，請參閱我們的網(wǎng)站建設(shè)者對
必須擁有一個(gè)偉大的網(wǎng)站
現(xiàn)在，創(chuàng)建一個(gè)偉大的網(wǎng)站沒有靈丹妙藥。但是，如果您在創(chuàng)建下一個(gè)博客，電子商務(wù)網(wǎng)站，投資組合或商業(yè)網(wǎng)站時(shí)堅(jiān)持這7條原則，您會(huì)發(fā)現(xiàn)創(chuàng)建一個(gè)好的網(wǎng)站比您想象的要容易。
明確目的?- 確保您知道您的網(wǎng)站的用途，重要的是，不是
清晰的受眾?- 確定您的網(wǎng)站的目標(biāo)對象。你知道你的觀眾是什么樣的嗎？他們喜歡什么？做上班嗎？他們多大了？他們使用了哪些其他網(wǎng)站？所有這些信息以及更多信息對于構(gòu)建最佳網(wǎng)站至關(guān)重要。
直觀的導(dǎo)航?- 您可以輕松了解如何繞過您的網(wǎng)站嗎？
正確的風(fēng)格?- 您的網(wǎng)站應(yīng)該是獨(dú)特和獨(dú)特的，同時(shí)仍然吸引您的用戶
高質(zhì)量的圖像?- 如果您的圖像不好，您的網(wǎng)站也不會(huì)看起來很好
正確的字體?- 確保您的字體符合一般風(fēng)格，并且清晰易讀
正確的話?- 您的網(wǎng)站看起來很神奇，但如果沒有一個(gè)字是有意義的，那么設(shè)計(jì)就無所謂了
獎(jiǎng)勵(lì)：如何建立自己的優(yōu)秀網(wǎng)站?- 立即開始創(chuàng)建自己的在線杰作
1.明確目的
當(dāng)您構(gòu)建自己的網(wǎng)站時(shí)，您必須準(zhǔn)確了解您的網(wǎng)站將要執(zhí)行的操作。例如，如果您想創(chuàng)建一個(gè)銷售產(chǎn)品的網(wǎng)站，那么銷售產(chǎn)品應(yīng)該是您的絕對優(yōu)先事項(xiàng)。你做出的每一個(gè)決定都應(yīng)該問自己 - 這會(huì)幫助用戶購買我的產(chǎn)品嗎？
一個(gè)了解其目的的網(wǎng)站（好吧，一個(gè)應(yīng)用程序，真的）的一個(gè)很好的例子是Snapchat。其目的是促進(jìn)15-20歲之間的有趣，不敬的視覺交流。而且，Snapchat的初始設(shè)計(jì)清楚地表明，它旨在讓孩子們分享照片和視頻，使用一個(gè)簡單的大型相機(jī)按鈕來拍攝自己的照片，以及一種易于瀏覽的方式來訪問朋友發(fā)送給您的內(nèi)容。
然后，Snapchat開始沉迷于一個(gè)新的目標(biāo) - 通過其平臺(tái)貨幣化。它將實(shí)際用戶發(fā)送的故事和圖像降級為來自Vice和華盛頓郵報(bào)等出版商的贊助內(nèi)容。提示立即反彈并且用戶群下降，這是從來沒有恢復(fù)過來的。故事的寓意：如果您想成功，請始終記住您的網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序的主要目的。
2.清除受眾
確定誰將使用您的網(wǎng)站對于建立一個(gè)好的網(wǎng)站也至關(guān)重要。如果您能夠了解哪些人將訪問您的網(wǎng)站，閱讀您的博客文章，購買您的產(chǎn)品或查看您以前的工作，那么您可以構(gòu)建適合他們的網(wǎng)站。
建立您的受眾群體的樣子比您想象的要容易。從古老的常識(shí)開始。例如，如果你正在銷售手工皂，那么你的目標(biāo)觀眾將不會(huì)是15-20歲，就像Snapchat的那樣。相反，您的用戶可能是30-50歲，可支配收入更多，可用于肥皂。
Tech.co如何測試網(wǎng)站建設(shè)者
一個(gè)有用的提示是通過創(chuàng)建所謂的角色來將目標(biāo)用戶分解為不同的組。這些是代表一組用戶的普遍的，虛構(gòu)的人。
創(chuàng)建這些角色的最佳方式，特別是如果你剛剛開始，就是研究你的市場。
看看與您類似的其他網(wǎng)站：您是否想要效仿另一家肥皂公司 - 例如Burt's Bees？如果是這樣，找出什么樣的人訪問Burt's Bees。
調(diào)查您的用戶或目標(biāo)用戶，以了解他們是誰以及他們真正喜歡什么。
與家人和朋友討論您的網(wǎng)站及其競爭對手以及他們給予的印象。
如果您已經(jīng)進(jìn)行了一些銷售或擁有現(xiàn)有讀者，那么您可能擁有有關(guān)您網(wǎng)站當(dāng)前受眾的數(shù)據(jù)。您可以通過付款平臺(tái)或Google Analytics等工具訪問此內(nèi)容。
有了這些信息，您可以根據(jù)現(xiàn)有受眾的需求調(diào)整內(nèi)容，或吸引新內(nèi)容。
他們想快速購買花式肥皂并繼續(xù)前進(jìn)嗎？價(jià)格對于他們來說比成分更重要還是更重要？他們只購買與他們有親和力的品牌嗎？可能他們甚至想要重復(fù)肥皂訂單？現(xiàn)在你會(huì)知道的。
3.直接導(dǎo)航
一旦確定了網(wǎng)站和目標(biāo)受眾的目的，您就可以創(chuàng)建網(wǎng)站結(jié)構(gòu)和導(dǎo)航，以便讓這些受眾盡可能輕松（并實(shí)現(xiàn)網(wǎng)站的目的）。
請記住，我們說最好的網(wǎng)站字面上不需要用戶思考？站點(diǎn)結(jié)構(gòu)在減少從頁面A到頁面B所需的認(rèn)知努力中起著巨大的作用。
獲得導(dǎo)航點(diǎn)的網(wǎng)站的一個(gè)很好的例子是維珍航空。頁面加載后，您會(huì)看到一個(gè)路由選擇器。一旦您選擇了路線，修改航班選項(xiàng)和預(yù)訂只需不到15次點(diǎn)擊。這非常簡單。
相比之下，請嘗試取消您的亞馬遜帳戶。無法從“我的帳戶”部分關(guān)閉您的帳戶，甚至也無法在“聯(lián)系我們”頁面上關(guān)閉您的帳戶;?這個(gè)過程不明確。
這兩個(gè)都是故意的：維珍航空公司希望盡可能簡單地預(yù)訂航班。另一方面，亞馬遜希望盡可能地關(guān)閉您的帳戶。因此，在創(chuàng)建網(wǎng)站時(shí)，您需要讓用戶盡可能輕松地訪問您希望他們看到的網(wǎng)站的主要部分 - 無論是購買產(chǎn)品，預(yù)約還是向您發(fā)送電子郵件。
在Tech.co，我們建議使用網(wǎng)站構(gòu)建者來創(chuàng)建您自己的網(wǎng)站。最好的網(wǎng)站構(gòu)建器可以輕松創(chuàng)建具有不同頁面類別和子部分的可導(dǎo)航網(wǎng)站結(jié)構(gòu)。
4.正確的風(fēng)格
在為您的網(wǎng)站選擇設(shè)計(jì)風(fēng)格時(shí)，您需要再次考慮您網(wǎng)站的目的和您網(wǎng)站的用戶?？紤]這兩個(gè)男裝網(wǎng)站之間的差異：OiPolloi.com和MrPorter.com。兩者都向時(shí)尚意識(shí)的男人出售服裝，但他們這樣做的方式完全不同。
波特先生
Porter先生提供干凈，無憂無慮的網(wǎng)站風(fēng)格，旨在展示其銷售的高品質(zhì)，奢侈品及其提供的服務(wù)。另一方面，Oi Polloi提供了一個(gè)不同的主張 - 它確實(shí)提供了一個(gè)更友好的面孔，但它仍然可能讓那些不熟悉該品牌的人感到害怕。Oi Polloi的網(wǎng)站沒有波特先生那么冷淡，但與此同時(shí)，它的設(shè)計(jì)特別考慮到了“人群”。
Oi Polloi
它也值得關(guān)注一般的網(wǎng)頁設(shè)計(jì)趨勢。例如，滾動(dòng)紋理和“扁平”元素是很棒的設(shè)計(jì)風(fēng)格，可以讓您的網(wǎng)站在2019年保持新鮮感，并且使其更易于使用。
一般來說，你應(yīng)該避免基于skeuomorphism的設(shè)計(jì)風(fēng)格。Skeuomorphic設(shè)計(jì)指的是設(shè)計(jì)用于模仿真實(shí)物品風(fēng)格的物品，同時(shí)提供不同的功能。例如，下面的網(wǎng)站模仿其預(yù)訂預(yù)訂部分的記事本和紙質(zhì)日歷。這些元素都不適合移動(dòng)設(shè)備，它們可以使您的網(wǎng)站看起來很俗氣，這可能會(huì)讓一些用戶望而卻步。
skeuomorphism的一個(gè)例子：在設(shè)計(jì)你的網(wǎng)站時(shí)避免這種情況。
5.高品質(zhì)的圖像
一旦您確定了網(wǎng)站的總體設(shè)計(jì)，您就可以繼續(xù)使用各個(gè)設(shè)計(jì)組件。
所有最好的網(wǎng)站都有圖片，無論是展示他們銷售的產(chǎn)品，創(chuàng)造某種情緒，還是展示其他東西，都需要高品質(zhì)。
模糊的圖像，或過度依賴無趣的股票圖像，將使一個(gè)網(wǎng)站看起來很業(yè)余。相反，你應(yīng)該選擇一種風(fēng)格并堅(jiān)持下去。看一下Apple網(wǎng)站上的圖片。它們都是反映品牌的清晰圖像，并且針對特定產(chǎn)品的用戶。
例如，MacBook Air的頁面在淺色背景上顯示圖像，以強(qiáng)調(diào)該設(shè)備輕便且便于攜帶。
另一方面，Mac Mini使用更暗，更加情緒化的圖像來強(qiáng)化它是專業(yè)人士的強(qiáng)大設(shè)備。
6.正確的字體
字體可能看起來相對無關(guān)緊要。但是，用戶將大部分時(shí)間花在閱讀（或至少掃描）文本的網(wǎng)站上，這意味著它是您要?jiǎng)?chuàng)建的網(wǎng)站的重要組成部分。
例如，有線和?衛(wèi)報(bào)都使用襯線字體（每個(gè)字母末尾帶有小線條的字體）強(qiáng)調(diào)它們是嚴(yán)肅的出版業(yè)務(wù)，具有既定的存在和嚴(yán)肅的新聞權(quán)重。但是，Wired會(huì)在其標(biāo)題和standfirsts中刪除serif字體。為什么？在頁面上留下最深刻的印象。Sans-serif字體通常更容易引起注意，更容易閱讀。
另一方面，Verge堅(jiān)持使用無襯線字體。這可能是因?yàn)樗l(fā)布了一系列故事 - 包括300字左右的新聞文章，一直到2000多個(gè)長讀 - 并且它需要一種適合所有人的字體。Sans-serif字體看起來也更現(xiàn)代，設(shè)計(jì)更干凈，更簡潔。
在構(gòu)建網(wǎng)站時(shí)，您應(yīng)該嘗試使用不同的字體樣式來找到合適的字體。請記住始終牢記您網(wǎng)站的目的和用戶。選擇不尋常的，風(fēng)格各異的字體對于品牌名稱來說很好，但是你不希望在草書樣式字體中使用長段文本。
7.正確的話語
所以，你已經(jīng)選擇了你的設(shè)計(jì)，你已經(jīng)對圖像進(jìn)行了排序，并且找到了正確的字體（或字體）?，F(xiàn)在，您需要使用正確的字詞填充您的網(wǎng)站。
同樣，用戶和目的是您為網(wǎng)站制作的任何副本的最前沿。您需要確保它具有吸引力，易于閱讀并且具有一致的音調(diào)。如果您網(wǎng)站上的某個(gè)頁面是以Buzzfeed列表的形式編寫而下一頁寫成法律合同，那么您的用戶將會(huì)被您的網(wǎng)站混淆并關(guān)閉。
確保您的副本是明確的。如果您正在銷售產(chǎn)品，請向您的用戶提供他們需要了解的產(chǎn)品信息。如果您正在努力為您的企業(yè)鼓勵(lì)客戶，請考慮從其他客戶那里獲取推薦信，并明確您的業(yè)務(wù)所提供的服務(wù)。
無論您正在做什么，您的副本都應(yīng)該指導(dǎo)用戶采取行動(dòng)而不會(huì)過度使用 - 無論是購買產(chǎn)品，預(yù)約還是查詢服務(wù)。
建立自己的偉大網(wǎng)站
如果上述所有內(nèi)容聽起來既復(fù)雜又令人生畏，那就不應(yīng)該。數(shù)百萬人使用網(wǎng)站構(gòu)建器（如Wix和Squarespace）創(chuàng)建和管理自己的網(wǎng)站。
網(wǎng)站建設(shè)者可以非常輕松地創(chuàng)建設(shè)計(jì)精良的網(wǎng)站，其中包含模板，拖放編輯器以及用于額外功能的大量工具和插件。
一些網(wǎng)站建設(shè)公司，包括Wix，甚至可以通過他們的人工設(shè)計(jì)智能服務(wù)為您創(chuàng)建網(wǎng)站的基礎(chǔ)。另一方面，Squarespace使您管理網(wǎng)站結(jié)構(gòu)變得輕而易舉，并提供市場上一些最專業(yè)的網(wǎng)站模板。
