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

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

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

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

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

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

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

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

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

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

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

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

　　較差的可識別性: 各種不同的字體和炫目的色彩會讓一個網(wǎng)站的可讀性變差，特別是一些需要發(fā)布較長內(nèi)容的網(wǎng)站。

　　混亂的網(wǎng)站導(dǎo)航: 如果一個用戶在網(wǎng)站上無法搞明白如何找到自己所需，那么他們肯定不會在這個網(wǎng)站上停留太多時間。

　　較慢的反應(yīng)速度: 如果你的網(wǎng)站上有太多腳本，圖像以及動畫，那么頁面打開時間肯定會受到影響，繼而導(dǎo)致訪客流失。

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

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

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

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

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

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

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

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

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

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

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

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

　　有時，丑陋是難以避免的

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

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

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

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

　　不過，在優(yōu)化網(wǎng)站設(shè)計的時候，如果只注重重點(diǎn)內(nèi)容，其實(shí)對首次訪問網(wǎng)站的用戶并不利，因為他們無法找到一個最佳方式去利用自己最新探索到的信息源。Gackle解釋說：

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

　　改變總是好事嗎？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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