為什麼維基百科的用戶界面設計不夠友好?

不是否定維基百科的內容。但是排版不友好,尤其是用大屏幕電腦瀏覽時會更為明顯。閱讀長段落時容易看岔行。為什麼會這樣?其實現在很少有網站採用這種排版設計了吧?


安利一個很棒的定製版維基百科 Wikiwand:http://lnc.hr/HsKVG

上面是直接訪問的地址,還可以安裝插件:https://chrome.google.com/webstore/detail/wikiwand-wikipedia-modern/emffkefkbkpkgpdeeooapgaicgmcbolj


左右頁面對比:

字體優化:

導航欄功能整合:

多國語言一鍵跳轉:


版式可調整:


超鏈接預覽:


利益相關:翻牆老司機,不是營銷狗

wikiwands開始內測移動版了!!!

我的推廣鏈接:Wikiwand for iPhone and Android

小七總有新發現~
(??????)??


題主你是來吐槽而不是來探索真理的。這樣的問題其實很好自己動手解決,如果你覺得某個網站看起來不舒服,你完全可以用 Stylish 之類的插件寫自定義 CSS,或者乾脆自己寫一個瀏覽器插件,比如我就做了個太空維基

其實也就是一些 CSS,以 Classypedia 為靈感,使用了豆瓣閱讀的配色。

其實也就是一些 CSS,以 Classypedia 為靈感,使用了豆瓣閱讀的配色。
維基百科本身就自帶有寫 CSS 換主題的地方(Help:自定義設置),不過為了兼容性和擴展性,我直接給做成了 Chrome 插件,目前在 https://github.com/anegie/Space-Wiki 開源,可以自己下載來安裝,後續我會放入 Chrome 應用商店。
自己動手,絕對是解決問題最好的辦法。


維基百科社群的缺少設計意識,專業設計師的影響力在「民主決策」下非常有限。

維基百科對色彩的濫用,不遵循版式設計的一些通用原則,糟糕的各種細小裝飾圖標,質量低劣的照片、圖表和表格,反人類的滿屏堆砌文字,貌似在各種語言版本的維基百科中都可以體會到,不同國籍和人種在這點上倒是完全沒有什麼差異。我認為,究其原因,是因為維基百科缺少專業設計師的設計和決策。或者說專業設計師的聲音很可能會埋沒在社群里的無秩序的嘈雜中。

其實在2010年中文維基首頁改版時候,Rex Chen在Type Is Beautiful就寫過一篇文章討論過設計的民主和獨裁問題。

民主程序對設計有意義嗎?
http://www.typeisbeautiful.com/2010/03/2239/

我堅持認為,專業的人做專業的事。設計也同這個世界上大多數職業一樣,需要很多年的學習和經歷才能做出一些正確的事,設計出合適的東西來。這包括從基礎開始的技能訓練,對設計發展史和流派的了解,對市場和人的理解,對設計和研究方法的學習,到思維訓練,深層次的哲學思考。沒有經過這些磨練的同學在做設計的時候很可能會出現一些明顯的不當處理甚至是錯誤。

不過問題還得解決。
我暗自覺得拖動窗口大小來解決有些削足適履之嫌。

我現在共享下我的臨時解決方法。
這個是結果:

首頁


(這是不是對維基百科改版的建議,因為改版建議需要考慮的限制條件會更複雜得多,需要考慮品牌識別的連續性,用戶的習慣還有伺服器壓力和資金等問題。這改給自己用的。)

對比現狀:

設置頁


編輯頁

我嘗試了一些現成的樣式,選了一個我覺得最適合普通讀者的。

實現請自行Google關鍵字:Stylish Classypedia
我在Safari中都實現了,想必大家的瀏覽器都沒問題。。

然後我只修改了個小數字:

#content {
width: auto !important;
max-width:900px;
padding: 22px 30px !important;
margin: 0px auto !important;
background: #fff !important;
box-shadow:0px 0px 20px 0px #ccc;
}

這段就是可以通過改變max-width來限定內容最大寬度,我覺得900適合我的習慣。大家可以根據自己需要改。

由於一般不是維基百科的貢獻者,所以一欄的布局沒有了sidebar的干擾信息,也沒有條目開頭的各種編輯提示框,甚感欣慰。我覺得維基百科之後的改版需要考慮不同用戶的使用場景和所需的信息的不同,對於非編輯者,可以隱藏一些內容以提升可閱讀性。

最大的不便是少了語言切換欄,這幾乎讓我覺得維基百科一半的樂趣都消失了。只能暫時關閉stylish來切換,相比用原來的樣式,這點麻煩還是值得的。

我想在這裡跪求各位前端大神,幫忙完善這段代碼。讓「語言切換」,在滑鼠hover過去的時候,在左邊的灰色區域顯示出來吧。

------12.24號更新------
嗯。意外收到好多贊同,謝謝啦。:)
對於評論中的一些問題,我在這裡統一回復一下。
因為是為了回答問題「為什麼難受」,所以主旨句是「維基百科缺少專業設計師的設計和決策」,也就是這個問題的答案。

之後給出的那個script,並不是本人的作品。在這裡還需要感謝原作者Nathan Black。我暫時不清楚stylish的版權設定,著作權由原作者保留。

我之所以給出這個例子,一個是為了共享下我是如何折騰這個東西的,給需要折騰的人;二是為了支撐下我之前的論點。

這個script當然還有在設計上改進的地方,我也可以指出很多處。它絕對不是也不應該是維基百科未來的樣子。儘管離題了,我還是說一下從這個script中可以看出來的改進策略,拋磚引玉供大家討論:

  1. 至少需要設定max-width,提升可閱讀性(readability)。為了自適應各種屏幕解析度和設備,引入「響應式網頁設計」(responsive web design)的作為其 design approach。
  2. 簡化樣式。通過一些全局CSS的高優先順序設定,捨棄一些原來的貢獻者提供的沒有必要的顏色,樣式。(請仔細體會對比我給的script例子)
  3. 所見即所得編輯。現在的edit按鈕已經向那個方向邁進了。但是做得還可以更加深入徹底一點。消除「編輯」和「閱讀」模式的鴻溝。
  4. 針對不同目標用戶做出不同的呈現和響應。

如果你是設計從業者,還在用「感覺」,「審美」,「好看」,「丑」,「體驗」來討論問題,請仔細考慮你是否擁有足夠的competence。


寬屏時代的老問題:固定寬度和自適應的網頁布局設計,各有哪些優劣?
之所以形成爭論,因為幾個選擇有利有弊。
1. 固定寬度(比如Google結果、新浪新聞頁),內容本身瀏覽感受良好,但旁邊空白太大。
2. 自適應(不設寬度),像wikipedia,整體兼顧各種情況,但整體都不那麼好。
3. 智能自適應,比如http://amazon.com,比如天貓搜索結果頁,隨著不同的寬度動態調整是否顯示邊欄、中間商品顯示幾列等等。這種效果最好,但只適用於網站內容完全由自己設計,內容偏向眾多小塊的情況。

維基百科不是沒有技術,也不是沒有美工。其採用的極簡界面也並不代表裡面沒有現代效果和複雜js調整在裡面。
維基百科面臨的關鍵性問題是:內容豐富多彩,乃至亂七八糟,完全是社群提供的。

有一些積重難返的意味在裡面:當初幾乎沒有寬屏,現有的設計使用起來很好;當寬屏普及了,想去修改整個裡面各種圖片、模板的格式,想去改變整個社群使用習慣,難度就變大了。

對於中文維基社群來說,能充分考慮考慮首頁在不同解析度下識別情況,在評選「優良條目」「特色條目」時候做一些解析度感觀要求,就已經不錯了(我編纂條目提交「優良條目」時,就被要求圖片縮小以適應小屏幕)。想讓所有人在所有地方都做得足夠好,完全不可能,也太拘束。

如果固定了寬度,當瀏覽唐朝之類裡面多個左右模板、圖片的時候,相互擠壓就比較明顯。


還有清華大學歷史之類裡面的超寬大圖時,則會覺得很憋屈,明明都用寬屏了卻還得拖動很久。


最嚴重的莫過於世系圖了,由於世系圖的複雜性,甚至不得不讓所有人都得橫向拖動。對這種圖來說,顯示空間越大越好。


說個題外話,wikipedia是支持將詞條導出為pdf的,之後pdf的排版效果非常好,在導出那裡。大家可以試一試。


根據某些維基百科內部的總結,似乎是大顯示屏的使用者沒有把字體調大,導致覺得每一行文字都很長,然後覺得沒有定寬頁面好看?

似乎解決方案可以是:按ctrl++或者ctrl加滾輪鼠標來把字體變大。


Wikipedia 的頁面製造工具是MediaWiki。因為MediaWiki這個工具很久都沒用大的改變,所以Wikipedia 的頁面風格也就一直維持現在這個樣子。
另外,如樓上「夜未」回復的所說,多語言支持是個問題。 同樣的排版,英文排版可能看上去不錯,而中文排版看上去就不是那麼美觀了。

ps. MediaWiki是個挺不錯的開源工具,在美國很多軟體開發的documentation,或者是大學出去教育目的資料文件都是基於MediaWiki的。 這個鏈接是一個學校的課程網頁: Module 1 - CSE330 Wiki
可以看到頁面右下角有個黃色的小Logo 「Powered By MediaWiki」。 所以整個頁面看上去也很有Wikipedia的風格。


維基百科由一家非營利性的基金會運營,您可以提供捐助。
Keep Wikipedia Free

維基百科目前的排版確實沒有充分考慮用戶感受,用戶看上去也挺難受的,但是在資源有限的情況下,維基百科還是做到了讓網站免費,並由志願者不斷提供給全球讀者相對獨立、客觀的各種詞條解釋。可能在當下更好的排版對於維基百科而不是最緊急重要的事。我想,即使它排版很糟糕,大家還是會願意去看維基百科,而不是百度百科。
當然能改善排版就更贊了~
贊同樓上說專業的人干專業的事,如果有專業的設計師願意給維基百科提供免費改版設計,可以試試看聯繫維基百科。


你如果註冊一個賬戶,在參數設置中將「大字體」選項強制關掉。這時字體會變小,不同行數之間的間隔會變大。可能會幫助你解決排版亂、看錯行的原因。


簡單點:

1)如何制定一個全世界人通用並適應全球所有語言的寫作平台?這個難度很大哦?
2)漢字,由於比劃多。段落和字距之間所造成的審美疲勞及視覺壓力也是問題。
3)網頁頁面的優化問題,及使用習慣。(簡潔+便利+一看就懂=現在的頁面)
4)地球部分貧苦地區的人,還有使用的電腦顯示器的解析度是:800X600
5)政策問題(XXX)

針對以上幾條,發現問題會變成長尾……所以用最傳統的方式,以最簡單和最笨的方法來處理這個問題。把版式讓給所有寫文章的人及後來編輯的人。

老外是不懂漢子的美,更不懂中式排版,它只會跟你說:希望中國的內容貢獻者們不要嫌棄這個程序有點土,它只是一個工具而已。維基百科不需要外表上的美,它需要一種態度上的美。


對於維基百科用戶界面醜陋的批評,Gardner 說樸素的界面是網站的特色而不是 bug,「維基百科一直是某種樸素、笨拙和手工製作風格的網站」,她表示樸素「是笨拙魅力的一部分」,網站不是營銷人士設計的,不是為了向你兜售商品,網站簡陋的界面隱含著對用戶作出的保證:它不會利用用戶賺錢。


為什麼很多人會背pi,卻很少有人背e?
因為到了學e的時候,他們就意識到背那玩意沒用了。
我覺得上維基百科的人的品味一般不會去糾結於排版問題,所以他們就把重點放在了內容的可靠性上了吧。


維基百科對我們的重要性不言而喻,無論是在生活中還是學習中,如果要獲取對某一話題的初步認識,維基百科一般都是那個最便捷且相對可靠的信息來源。可惜的是,或許是因為太過關注內容本身,維基百科的頁面設計是非常簡陋的,單調、擁擠的排版很難讓人舒適閱讀並迅速找到所需信息。

常見的改善維基百科顯示效果的方法有兩種:一是利用各瀏覽器自帶的閱讀模式,二是安裝瀏覽器插件。但是,前者自定義靈活性較小,且依賴於瀏覽器的支持,主流的 Chrome 瀏覽器就沒有內置閱讀器功能;後者可定製性強,但載入插件需要消耗額外的資源。另外,兩種方法的共同弊端在於不具有跨平台性:配置好的閱讀環境無法在不同電腦上同步,對於移動端也缺乏良好的支持。

其實,作為一個自帶 geek 屬性的服務,維基百科本身已經提供了強大的外觀定製功能。利用這一功能,經過一番簡單的設置,就能達到下圖中這樣更美觀、易讀的效果。

注意:維基百科的各項設置需要登錄才能訪問。註冊過程非常簡單,在此不贅。

基礎設置:改變皮膚、字型大小和對齊方式

登錄後,點擊頁面右上角的 Preferences/參數設置 鏈接打開設置,然後切換到 Appearance/顯示 選項卡。可以看到,維基百科共提供了五種皮膚供用戶選擇。然而,它們中的絕大多數都只會讓本就簡陋的頁面變得更加復古……

唯一比較符合當下設計審美的,大概只有 MinervaNeue 這款皮膚,它實際上就是維基百科移動版頁面的桌面端移植。選中該選項,然後點擊頁面底部的 Save/保存 即可應用該皮膚,其效果如下:

可以看出,界面的整潔度和可讀性已經比之前高了不少。不過,這樣的效果仍然不能讓人完全滿意。例如,字型大小還是過小,在電腦屏幕上看起來較為吃力;沒有兩端對齊,文本塊的右側邊緣看起來不夠整齊等。要進一步完善效果,就要用到自定義 CSS 的功能了。

再次進入設置頁面,點擊 MinervaNeue 主題右側的 Custom CSS/自定義 CSS 鏈接。由於我們是第一次修改該主題的樣式,將會直接跳轉到創建頁面。

在代碼框中輸入下列內容:

.mw-body {
font-size: 1.25em !important;
text-align: justify;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

這段代碼的作用是將正文部分的字型大小修改為 1.25 em(可以反覆嘗試出最適合自己的值;維基百科默認值是 0.85 em,小得喪心病狂),並開啟兩端對齊和英文連字元。

輸入完成後,點擊頁面底部的 Save page/發布頁面 按鈕。這時,再刷新維基百科的頁面,就可以看到修改後的效果了。

優化正文字體

在如上優化的基礎上,可以進一步改進的是正文字體的顯示效果。默認配置下,維基百科只要求瀏覽器調用 Serif (無襯線)字體,而沒有指定具體的字體名稱。實踐中,這種將決定權完全交給系統的做法往往效果不盡如人意,而且在不同配置環境下的表現很不統一。

為此,我們在上述代碼中加上一行:

font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;

這樣,無論在什麼操作系統中打開,都能看到正文顯示為較高質量的黑體。

另外,相比於黑體/無襯線體,宋體/襯線體通常被認為更適合長文閱讀,不易引起疲勞感。如果想讓維基百科內容顯示為宋體,可以將上述代碼改為:

font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;

效果如下:

(上面的字體回退順序參考了此 GitHub 項目,在此感謝。)

當然,你也可以改為自己喜歡的字體,如思源宋體:

font-family: Source Serif Pro, Source Han Serif, serif;

注意:

  1. 維基百科不同語言版本雖然賬號是互通的,但偏好設置和自定義 CSS 卻相互獨立。因此,你需要為自己常用的每種語言版本(如中文和英文)重複一次上述設置。
  2. iPad 上的 Safari 瀏覽器默認訪問的是移動版頁面;如果想在 iPad 上看到同樣的效果,需要在詞條底部切換為桌面版。(如果想在 iPad 上使用自定義字體,可以參考少數派之前發表的這篇文章。)

進階操作:「移花接木」借用 Stylish 效果

當然,上面步驟所實現的效果是比較基礎的,CSS 的潛力遠不止這些。前面提到的頁面美化插件 Stylish,其原理就是額外載入一段自定義的 CSS 代碼,以達到修改頁面外觀的效果。因此,既然維基百科本身支持自定義 CSS,我們完全可以「移花接木」,借用他人已經寫好的樣式文件,達到不藉助插件實現複雜效果的目的。

為此,我們先安裝 Stylish 插件,然後在 UserStyles 網站(Stylish 插件的樣式庫)上搜索 Wikipedia,從中挑選一個符合自己口味的,例如這個採用仿 Material 設計的主題,點擊 Install Style 安裝。

然後,在 Stylish 插件的設置頁面,切換到 Manage 選項卡,找到我們剛才安裝的主題,點擊 Edit進入編輯模式。

這時,我們就能看到該主題所採用的 CSS 代碼了。需要注意的是,大多數主題的 CSS 代碼都不止一段,每段根據不同規則適用於不同的頁面,這可以從其下方的 Applies to 選項中看出。就維基百科的主題而言,只有那些適用於 wikipedia.org 全站的 CSS 片段才是用來調整詞條頁面的外觀的;我們只需要這些片段。

將上述片段複製出來後,對維基百科關閉 Stylish 插件,並切換回默認的 Vector 主題,點擊其右側的 Custom CSS/自定義 CSS 鏈接。

將找到的 CSS 代碼按照前述方法依次複製進代碼框並保存,刷新頁面,就能看到換上新裝的詞條頁面了。

你可以在此獲取該主題的 CSS 代碼。


我以為是典範,你覺得很彆扭,這就是世界。


wiki的排版確實很蛋碎,不過反正人家提供的內容質量很高。
上wiki這種網站,我反正根本是不在意他頁面長成什麼樣的。
--------------------------------------
我想說的是,誰TM能把wiki那sb一樣的搜索做的不那麼反人類啊!


可是我看維基百科看一下午不會覺得難受。而百度百科那排版,我看幾分鐘就渾身難受。


嗯,這就是wiki的味道。


哼哼,看到這個問題的第一反應就是知乎的字體怎麼還這麼小?……


天下沒有免費的午餐。如果人家提供了免費的午餐,而且美味可口,何必非得糾結它是裝在一個漂亮的盤子里還是普通的陶瓷碗里?


看維基的定位,「提供用戶想要知道的內容」 這個層面上很滿足用戶了。

就「排版為什麼那麼難受」這個來說,影響因素:字體,字型大小,字間距,背景,字體顏色,圖文樣式。。。(我在無聊的時候,對比了百度、sogou等和google的搜索結果對比,google的特別舒服。對比後,發現字間距,標點(全半形)鏈接色,同樣是藍色,也有讓眼睛很舒服的藍和刺眼的藍。然後把這些因素調到和google值一樣,就舒服了。)有些設計是很「敏感」的設計,敏感的人感覺得出來,多數人對一些設計上的改變並無察覺。

如果維基認為「內容為王還要易讀,並要給用戶美感」的時候,就會改了。


推薦閱讀:

為什麼很難聘到前端工程師?

TAG:網頁設計 | 前端開發 | 維基百科 | 排版 | 用戶界面設計 |