如果在過(guò)去的十年時(shí)間里，你一直關(guān)注互聯(lián)網(wǎng)，想必關(guān)注過(guò)這些網(wǎng)站吧，比如Reddit, Craigslist,Wikipedia, 4Chan, Hacker News, 以及 The Drudge Report。這些網(wǎng)站雖然涉及的行業(yè)領(lǐng)域各有千秋，但是卻有兩個(gè)共同點(diǎn)，一個(gè)是他們都非常受用戶歡迎；另一個(gè)，則是他們的外觀設(shè)計(jì)都非常難看。

網(wǎng)頁(yè)技術(shù)發(fā)展至今已經(jīng)有很多年了，如今的設(shè)計(jì)師手頭上也有各種工具和技術(shù)可以優(yōu)化網(wǎng)站。但是，那些廣受歡迎的網(wǎng)站，似乎和如今互聯(lián)網(wǎng)上的現(xiàn)代設(shè)計(jì)理念有些格格不入。

上圖：Craigslist網(wǎng)站目前的設(shè)計(jì)實(shí)在有些說(shuō)不過(guò)去

為什么這些網(wǎng)站看上去就像是上世紀(jì)90年代的設(shè)計(jì)呢？清晰的布局，細(xì)選的字體，以及互補(bǔ)的顏色都在哪里呢？

實(shí)際上，像The DrudgeReport 和 Craigslist這樣的網(wǎng)站已經(jīng)創(chuàng)立超過(guò)20年了（都是在1995年創(chuàng)建的）。上個(gè)月，維基百科網(wǎng)站剛剛度過(guò)15歲生日；Reddit創(chuàng)立將近10年，而綜合型討論區(qū)網(wǎng)站4chan誕生至今也將近13年了。

事實(shí)上，僅憑一眼看去，就判斷這個(gè)網(wǎng)站的設(shè)計(jì)究竟好不好，也不是件容易的事情。你可能會(huì)感覺(jué)一個(gè)網(wǎng)站看起來(lái)不錯(cuò)，但是好的設(shè)計(jì)絕不僅僅體現(xiàn)在美觀的頁(yè)面布局上，還需要考慮訪客該如何使用網(wǎng)站，它是否能幫助訪問(wèn)者找到自己需要的東西，或是完成正在處理的工作任務(wù)。

為了更好的理解這一點(diǎn)，筆者和Intelligent Interfaces公司聯(lián)合創(chuàng)始人、數(shù)據(jù)可視化部門主管阿米特·達(dá)斯進(jìn)行了交流，他認(rèn)為：

無(wú)疑，我們看到像Reddit, 4chan，等等這些網(wǎng)站，在設(shè)計(jì)上存在巨大差距。內(nèi)容消費(fèi)者可能對(duì)網(wǎng)站設(shè)計(jì)有著較高的期待，像一些用戶生成和聚合內(nèi)容App應(yīng)用及網(wǎng)站，比如Medium，F(xiàn)acebook，以及Twitter，他們的網(wǎng)站更注重設(shè)計(jì)，相比之下，內(nèi)容分類平臺(tái)Craigslist和Hacker News論壇的外觀設(shè)計(jì)則會(huì)讓用戶感到一定落差。

不過(guò)，最好讓我們來(lái)看看上述網(wǎng)站的現(xiàn)狀：這些網(wǎng)站似乎存活的時(shí)間都不短，而且都不是為了滿足消費(fèi)者預(yù)期在2016年剛剛建立出來(lái)的。作為一家公司，這些網(wǎng)站的屬性就是要處理由其用戶所帶來(lái)的流量。舉個(gè)例子，Reddit是世界上訪問(wèn)量排名第32位的網(wǎng)站，而Medium的排名則在400名開(kāi)外。

你總是能夠看到一些網(wǎng)站設(shè)計(jì)精美的新競(jìng)爭(zhēng)對(duì)手出現(xiàn)，他們希望能借此挑戰(zhàn)老網(wǎng)站。再舉個(gè)例子，房地產(chǎn)領(lǐng)域里的Trulia就希望能對(duì)抗Craigslist。但是你必須知道，房產(chǎn)交易里的巨大流量都是來(lái)自于有機(jī)搜索，然后到達(dá)Craigslist上的。而這，僅僅是Craigslist全球分類業(yè)務(wù)中的一小部分而已。

壞的設(shè)計(jì)是由哪些因素構(gòu)成呢？

很多難以使用的網(wǎng)站，都有一些常見(jiàn)的問(wèn)題，比如：

• ?較差的可識(shí)別性: 各種不同的字體和炫目的色彩會(huì)讓一個(gè)網(wǎng)站的可讀性變差，特別是一些需要發(fā)布較長(zhǎng)內(nèi)容的網(wǎng)站。
• 混亂的網(wǎng)站導(dǎo)航: 如果一個(gè)用戶在網(wǎng)站上無(wú)法搞明白如何找到自己所需，那么他們肯定不會(huì)在這個(gè)網(wǎng)站上停留太多時(shí)間。
• 較慢的反應(yīng)速度: 如果你的網(wǎng)站上有太多腳本，圖像以及動(dòng)畫，那么頁(yè)面打開(kāi)時(shí)間肯定會(huì)受到影響，繼而導(dǎo)致訪客流失。

細(xì)思上述三個(gè)問(wèn)題，就會(huì)發(fā)現(xiàn)它們都曾出現(xiàn)在一些所謂“設(shè)計(jì)不錯(cuò)”的網(wǎng)站里。

上圖：維基百科網(wǎng)站雖然不是那么可怕，但它可以大幅優(yōu)化改進(jìn)

維基百科網(wǎng)站看上去內(nèi)容實(shí)在太多，也顯得有些過(guò)時(shí)，但是上面的信息都清晰可辨。Reddit可能第一次使用會(huì)不太習(xí)慣，但是它是個(gè)真正的輕量級(jí)網(wǎng)站，而且內(nèi)容加載速度很快。

不可思議吧，上圖是2016年The Drudge Report網(wǎng)站的主頁(yè)

2008年，團(tuán)隊(duì)協(xié)作軟件開(kāi)發(fā)商Basecamp聯(lián)合創(chuàng)始人賈森·弗萊德就表示，TheDrudge Report網(wǎng)站的設(shè)計(jì)非常成功，他羅列了一些優(yōu)點(diǎn)，即便在今天看來(lái)也非常有價(jià)值，他說(shuō)道：“網(wǎng)站設(shè)計(jì)不耗時(shí)，易于維護(hù)，而且兼容性很強(qiáng)。此外，這個(gè)網(wǎng)站真的十分獨(dú)特?！?/p>

一個(gè)穩(wěn)定的設(shè)計(jì)往往需要考慮很多因素，比如得耗費(fèi)大量時(shí)間，迭代多次，經(jīng)歷無(wú)數(shù)反饋，并且要認(rèn)真地去執(zhí)行。好的設(shè)計(jì)難以日常維護(hù)，特別是當(dāng)你每天都需要服務(wù)大量用戶時(shí)，一個(gè)簡(jiǎn)單設(shè)計(jì)的網(wǎng)站似乎更有優(yōu)勢(shì)，畢竟你的用戶已經(jīng)都習(xí)慣了網(wǎng)站本身和功能。

上圖：Hacker News網(wǎng)站的布局是受到了UNIX實(shí)用程序列表Top的啟發(fā)

丹尼爾·加克爾在知名創(chuàng)業(yè)孵化器Y Combinator負(fù)責(zé)Hacker News（“黑客新聞”網(wǎng)站），他解釋說(shuō)，基于投票的鏈接聚合類網(wǎng)站一般都不會(huì)提供太多界面，他用Hacker News（HN）為例，闡述了其中原因：

HN強(qiáng)調(diào)內(nèi)容高于一切。一個(gè)花哨的界面會(huì)分散用戶注意力。文本是永恒的。HN的信息密度都經(jīng)過(guò)仔細(xì)校準(zhǔn)：很難擠出更多界面插入其他東西，而內(nèi)容太少又會(huì)讓人覺(jué)得網(wǎng)站量級(jí)不夠。

對(duì)于求知欲很強(qiáng)的用戶而言，HN的極簡(jiǎn)設(shè)計(jì)非常棒，而這也是該網(wǎng)站的指導(dǎo)精神。那就是讓讀者輕松訪問(wèn)，自己決定哪些是自己感興趣的內(nèi)容。

基于文本設(shè)計(jì)的網(wǎng)站，有一個(gè)好處，那就是頁(yè)面加載量較小，頁(yè)面打開(kāi)速度很快。用戶會(huì)關(guān)心很多事情，但實(shí)際上，網(wǎng)站設(shè)計(jì)者考慮的方面更多。

相比于“現(xiàn)代”網(wǎng)站，很多“經(jīng)典傳統(tǒng)”網(wǎng)站還有一個(gè)社區(qū)優(yōu)勢(shì)：這些網(wǎng)站吸引的，是關(guān)心實(shí)質(zhì)內(nèi)容的用戶，而不是那些獵奇的用戶。

有時(shí)，丑陋是難以避免的

下面我們來(lái)談?wù)剝?nèi)容繁多的中國(guó)網(wǎng)站，來(lái)自Econsultancy咨詢公司的杰夫·拉杰克認(rèn)為，和英文頁(yè)面不同，在中文里沒(méi)有大寫字母也沒(méi)有空格，因此網(wǎng)頁(yè)看起來(lái)更像是加密電文，繼而導(dǎo)致給人感覺(jué)比較混亂。

上圖：日常的QQ主頁(yè)，看上去比絕大多數(shù)網(wǎng)站的內(nèi)容還要繁多

此外，中文也很難打，互聯(lián)網(wǎng)連接中文字符速度也非常慢。這也是為什么很多網(wǎng)站會(huì)在自己的頁(yè)面上加載鏈接，這樣可以減少用戶訪問(wèn)的頁(yè)面數(shù)量，更快找到自己所需要的內(nèi)容。

但是如果在Reddit和The Drudge Report這樣的網(wǎng)站頁(yè)面里“塞滿”鏈接，肯定不是明智之舉。另一方面，雖然內(nèi)容繁多導(dǎo)致網(wǎng)站不夠美觀，卻能讓用戶一眼掃描“海量”內(nèi)容，最大化了網(wǎng)站訪問(wèn)的時(shí)間價(jià)值。

不過(guò)，在優(yōu)化網(wǎng)站設(shè)計(jì)的時(shí)候，如果只注重重點(diǎn)內(nèi)容，其實(shí)對(duì)首次訪問(wèn)網(wǎng)站的用戶并不利，因?yàn)樗麄儫o(wú)法找到一個(gè)最佳方式去利用自己最新探索到的信息源。Gackle解釋說(shuō)：

黑客新聞網(wǎng)站設(shè)計(jì)的一個(gè)劣勢(shì)，就是會(huì)讓新訪客感到“神秘”。一開(kāi)始，用戶可能會(huì)覺(jué)得比較有趣，就像是解謎。但好景不會(huì)太長(zhǎng)，當(dāng)網(wǎng)站規(guī)模變大，如果依然采用這樣的策略可能會(huì)導(dǎo)致訪客感覺(jué)自己被孤立。網(wǎng)站設(shè)計(jì)的復(fù)雜性，不會(huì)讓內(nèi)容變得更清晰，因此不建議這樣做。

改變總是好事嗎？

如果我們最喜歡的網(wǎng)站設(shè)計(jì)失敗了，肯定會(huì)覺(jué)得不開(kāi)心，此時(shí)唯一的解決辦法可能是徹底優(yōu)化網(wǎng)站。不過(guò)值得注意的是，重新設(shè)計(jì)網(wǎng)站可能無(wú)益，甚至?xí)?dǎo)致用戶流失。還記得“掘客”網(wǎng)站鼻祖DIGg在推出新頁(yè)面時(shí)，流量下降了34%嗎？

對(duì)于重新設(shè)計(jì)網(wǎng)站這件事，達(dá)斯解釋了為什么它并不是個(gè)包治百病的解決方案：

對(duì)于那些訪問(wèn)量較大的網(wǎng)站，一個(gè)小小的設(shè)計(jì)改變可能會(huì)導(dǎo)致巨大影響，因此企業(yè)必須重視這一點(diǎn)。最近一個(gè)典型例子就是Reddit，他們開(kāi)始測(cè)試一個(gè)新網(wǎng)站設(shè)計(jì)，這說(shuō)明如今的網(wǎng)站設(shè)計(jì)團(tuán)隊(duì)已經(jīng)開(kāi)始意識(shí)到設(shè)計(jì)需要被用戶接受認(rèn)可的重要性。

許多人都建議Reddit徹底優(yōu)化網(wǎng)站設(shè)計(jì)，但理想的做法是，每次優(yōu)化一點(diǎn)，每次改動(dòng)一個(gè)組件，這樣就不會(huì)立刻造成巨大影響，也不會(huì)影響任何交易指標(biāo)。

當(dāng)然，大幅改動(dòng)網(wǎng)站設(shè)計(jì)也可能會(huì)帶來(lái)成功。DeviantArt是一個(gè)展示與分享各類藝術(shù)創(chuàng)作的大型國(guó)際性社群網(wǎng)站，當(dāng)網(wǎng)站運(yùn)營(yíng)了幾年之后，他們決定大幅整頓，并推出全新的品牌策略。不過(guò)，DeviantArt旗下產(chǎn)品的核心并沒(méi)有改變，他們內(nèi)部頁(yè)面模板的優(yōu)化依然是循序漸進(jìn)的，更沒(méi)有匆忙修改，而是每次優(yōu)化一個(gè)元素。

另一方面，達(dá)斯又拿亞馬遜作為范例，他們每次頁(yè)面優(yōu)化只變動(dòng)一點(diǎn)點(diǎn)，“每次亞馬遜網(wǎng)站設(shè)計(jì)變動(dòng)，都是非常細(xì)微的，以至于一些每天訪問(wèn)亞馬遜的用戶都無(wú)法察覺(jué)。但是如果你比較一下一年前的亞馬遜網(wǎng)站，就會(huì)發(fā)現(xiàn)他們的改變其實(shí)非常明顯?！边_(dá)斯提示說(shuō)。

加克爾闡述了黑客新聞網(wǎng)站是如何優(yōu)化網(wǎng)站外觀的：

我們更喜歡“溫水煮青蛙”的方法——在小處做改變——而不是做大變動(dòng)。和所有用戶一樣，我們也不喜歡變化。實(shí)際上，在過(guò)去的兩年里，我們網(wǎng)站設(shè)計(jì)做了很多變化，但通過(guò)合理的方式，有時(shí)用戶體驗(yàn)幾乎沒(méi)有什么明顯的差異。如何在不做大變動(dòng)的前提下，在網(wǎng)站上增加新設(shè)計(jì)，搞明白這個(gè)要旨其實(shí)非常有趣，就像一個(gè)程序員知道如何在不改動(dòng)代碼的前提下，生成一個(gè)全新的功能。

我最喜歡的改變，就是在網(wǎng)站上發(fā)現(xiàn)一些不必要的功能，然后把它拿掉。YC和黑客新聞創(chuàng)始人保羅·格拉漢姆就是這樣一個(gè)極簡(jiǎn)主義者，每次當(dāng)我們找到一些沒(méi)用的東西，然后刪除之后，他就像是打了一場(chǎng)勝仗。

當(dāng)然啦，有時(shí)我們也會(huì)在網(wǎng)站上增加一些功能，不過(guò)，一旦驗(yàn)證發(fā)現(xiàn)這些功能沒(méi)有用，我們會(huì)毫不猶豫的把它刪掉。有時(shí)，自由的感覺(jué)不僅僅是在網(wǎng)站上增加新功能，而是反復(fù)簡(jiǎn)化網(wǎng)站，黑客新聞網(wǎng)站就是利用這種方法收獲了很好的效果。

有一件事我們不會(huì)做的，就是追趕設(shè)計(jì)潮流。這么做非常耗力，因此還不如把功夫下在如何提示網(wǎng)站內(nèi)容質(zhì)量上，而這，也是用戶希望你做到的。

上圖：黑客新聞重新設(shè)計(jì)了網(wǎng)站，推出一個(gè)“可視化標(biāo)尺”，可以展現(xiàn)出每天文章的受歡迎程度

由于對(duì)比了一些其他網(wǎng)站，許多黑客新聞的粉絲也希望他們能夠優(yōu)化頁(yè)面設(shè)計(jì)，甚至還提交了自己的設(shè)計(jì)想法，對(duì)于這些粉絲，加克爾回應(yīng)說(shuō)：

因?yàn)楹诳托侣劸W(wǎng)站看上去有些過(guò)時(shí)，有時(shí)人們會(huì)提議讓我們重新設(shè)計(jì)網(wǎng)站。有些人還告訴我們一些其他App應(yīng)用和網(wǎng)站上有的，但是黑客新聞網(wǎng)站上沒(méi)有的功能。當(dāng)然啦，其中不少功能都很棒，不過(guò)這些功能所要達(dá)到的目標(biāo)和黑客新聞網(wǎng)站的目標(biāo)并不一致。比如有些網(wǎng)站上會(huì)增加顏色和圖像，但這么做會(huì)導(dǎo)致信息密度下降。

實(shí)際上，黑客新聞創(chuàng)始人格拉漢姆先生已經(jīng)做得很好了，他的很多重新設(shè)計(jì)理念都符合黑客新聞網(wǎng)站的目標(biāo)。我們更關(guān)注的，是如何優(yōu)化基礎(chǔ)架構(gòu)。不過(guò)，如果有人能證明我們的想法不對(duì)，也是件很有趣的事。

你知道哪些設(shè)計(jì)丑陋，但卻廣受歡迎的網(wǎng)站嗎？不放在評(píng)論欄里告訴我們吧。

作者@Abhimanyu Ghoshal

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@創(chuàng)業(yè)邦，?譯者@shark