February 25, 2012

傳送至 Kindle
互動式隨選列印/另存成 PDF

[黑客人生]配色與易讀性

黑底白字也可能是很好的設計,相對地,白底黑字不見得永遠是易讀性最高的版面。

有些讀者可能已經發現,上述這段話跟老貓(貓頭鷹出版社的老闆陳穎青先生)提出的論點有所出入。我這篇文章就是要來解釋為什麼如此。

首先,我想讀者諸君應該先了解我們兩人的背景:老貓是出版社編輯,多年來都跟紙本書打交道,對於紙本書的各種掌握,絕對是在我之上;老貓近年來開始想把出版產業帶到電子書世代,因此在他的部落格上可以看到許多他的想法與心得,以及他想從紙本書概念帶進數位媒體的「易讀性」討論。

我近年來的重心是網頁親和力,目前在醫院從事第一線醫療相關工作。我從三十年前開始看電腦螢幕,近十多年來幾乎所有的工作跟主要收入都是在電腦上完成;我主要在電腦上進行的是文字工作(以及寫網頁、程式),我曾經連續在電腦前工作超過七十二小時,我曾經連續數週每週產出十萬中文字的內容,我多年前就深刻體認到使用電腦這種工具的各種「環境配套」,2003 年的時候就帶領一群朋友團購護腕,也調整自己的英文鍵盤成 Dvorak

在我如此極端地在電腦上工作多年後,我可以告訴大家,我的雙手依然健康,而且,我上個月的健康檢查結果指出,我雙眼視力仍為 1.5,沒有一絲近視跡象。因此,我認為由我來討論「怎樣的配色,對眼睛最好」,是相當值得各位參考的。

為什麼我這樣一直看電腦螢幕,視力依然健全?我有幾個秘訣:多喝水(以及多上廁所)、注意環境光線(把檯燈照向螢幕後方的牆壁,不要照在螢幕上)、使用黑底白字的文字編輯器色彩配置。我即使到了現在,文字編輯器依然調整為黑底白字,這是唯一能讓我長時間工作的配色。(註:其實不見得是真的純白色與純黑色,或許用「深底淺字」與「淺底深字」比較貼切,但是為了方便,以下還是都用「黑底白字」與「白底黑字」的說法。)

為什麼是黑底白字?這個問題的答案很複雜,蘊含多重背景。生理上,這表示眼球承受的光線可以不要那麼多,讓我們把注意力很自然地放在「發亮」的部份;心理上,這始於黑客精神──「黑客說要有光,於是漆黑的視訊輸出上就有了發亮的提示符號」,用通電(發亮)來表達有東西的地方,再自然不過。這是出生於資訊時代的我們,本能的探索結果與認同。

但對於出生時還沒有個人電腦的一輩,這種文化上的魅力可不一樣。家母每次看到我使用黑底白字的文字編輯器,總是忍不住說著「黑壓壓的,好陰森恐怖!」因此,即使家母使用白底黑字的文字編輯器,雙眼總是特別容易疲勞,她還是選擇這種「看起來比較明亮開朗」的配色。

黑底白字的設計在實務上是存在的。不只是在黑客間或者資訊世代之後的使用者。我在醫院使用的醫療儀器,LCD 螢幕上顯示的畫面就是黑底白字(受限於保密條款,恕我無法把畫面貼出來),因為這樣的配色有助於臨床從業人員長時間在這種會發光的螢幕前工作,並且從畫面中提取有意義的資訊。

許多弱視使用者也必須使用作業系統內建的「高對比」配色──這個配色模式使用的正是黑底白字──纔能夠利用殘存的視覺,操作電腦。作業系統必須提供這樣的機制,內建黑底白字的配色,這是美國 508 公法規範下的義務。白底黑字不足以讓僅有殘存視力的使用者順利使用電腦。

(這邊容我抱怨一下,Google Chrome 是一種不尊重作業系統配色的瀏覽器,弱視使用者在作業系統選擇高對比配色後,會導致 Google Chrome 的部分內容完全無法閱讀;對此,Google Chrome 使用者的規避方式是:另外安裝用來處理高對比配色的延伸套件。去年的 Google Chrome 版本依然如此,我不知道現在的最新版本是不是仍然如此。)
圖:Google Chrome 在高對比配色下的悲慘結果

但是光有黑底白字就是最佳方案了嗎?絕對不是。

讓我們回到黑客的世界。許多人堅持使用黑底白字的工作環境,但你會注意到有更多人在找尋「適合用來寫程式的字型」。黑客需要迅速有效地分辨字母、數字、符號,看出 0 與 O 的區別、1 與 l 與 I 的區別;以及,需要能在自己慣用配色中表現良好的字型。不是所有的字型都適合黑底白字,因為每個字型在處理筆劃邊緣的微小像素(sub-pixel)方式不同,導致有些字型特別適合在深色底色上表現,有些字型則僅能在淺色底色上使用。

到此為止,我們注意到「配色」這件事扣著許多環節,包括:環境背景(在明亮的戶外跟在幽暗的酒館內絕對不同)、螢幕類型(會發光的 LCD 跟不發光的電子紙絕對不同)、文化背景與審美觀(不同世代、不同族群有不同的偏好)、字型等。任何一項條件改變,都會劇烈影響到「哪一種配色閱讀起來最舒服」。

現在讓我們回過頭來,看看老貓提出的論點,想想易讀性。

老貓特別強調白底黑字、特別抵制黑底白字,我認為這多少受到紙本書世代的審美觀影響(請想想家母的例子);老貓的一個立論依據是「電腦畫面為什麼會從 DOS 時代的藍底,變成微軟或蘋果視窗的白底」;我的想法與老貓不同,我認為這個變化是因為電腦產業想把更多的軟、硬體賣給原本不使用電腦、但是對於紙本世界很熟悉的人,以及因為電腦開始用來當成桌上出版及印前系統,有輸出紙本內容(列印)時的「所見即所得」需求,這才開始「白底化」。

老貓接著又提出一份研究文獻作為他的立論靠山:〈Interface Design and Optimization of Reading of Continuous Text〉,由 Paul Muter 在 1996 年發表,是《Cognitive Aspects of Electronic Text Processing》這本書的其中一章。

但是讀過這篇文獻後,我覺得其中有相當多可疑之處。這份研究關於配色的推論是這樣的:Paul Muter 首先引用 Frenckner 在 1990 的研究,指出「閱讀紙本媒體」的情況中,白底黑字的閱讀速度比較快,且多數讀者也偏好這個配色。接著 Muter 又引用一堆 1980 年代的研究,指出讀者「在 CRT(陰極射線管)螢幕上閱讀的速度,比在紙本閱讀的速度慢」。最後 Muter 引用自己跟 Maurutto 在 1991 年的研究,說「除非這個 CRT 螢幕有夠大的尺寸、夠高的解析度、使用白底黑字,則在 CRT 螢幕上閱讀的速度就可以達到紙本閱讀的速度」。

在這篇文章中,關於「白底黑字或黑底白字哪個好」的討論不多,只有〈Polarity〉那一小節的一小段文字,引用的研究都是 1980 年代的,主要的論點在於白底黑字「可以減低光學扭曲、增加視覺銳利度、增加對比敏感度、增加適應速度、增加景深、減少外部光源的反射干擾」,但是也說這樣的配色「會增加感受到閃爍的風險,除非有夠高的復新率」。

這篇文章的推論是否適用於今日世界?回顧一下我先前提到的幾個環節,撇開文化與審美觀的差異,我們至少要思考二十多年前的 CRT 螢幕與現今的 LCD 螢幕是否具有相同的顯示特性?當時使用的字型科技與現在的字型科技是否相當?兩個問題的答案都是否定的,這會造成很大的差別。

網友 Markus C 針對這個議題也貼出一篇《Readability Of Websites With Various Foreground / Background Color Combinations, Font Types And Word Styles》,這是 Alyson L. Hill 在 1997 年做的研究,在這個研究中除了比較不同的色彩搭配外,也比較不同的字型與不同字體的影響。

Hill 的這個研究比較的是不同搭配下的反應時間,反應時間越快表示易讀性越佳。結果顯示:沒有任何一種配色擁有顯著較佳的易讀性。由此我們更可以懷疑前述 Paul Muter 提出的說法是否適用於今日世界。

我們或許需要更多研究,但是其實研究很難進行。為什麼呢?心理學者 Travis Proulx 在 2009 年發表一篇研究《Connections From Kafka: Exposure to Meaning Threats Improves Implicit Learning of an Artificial Grammar》,提出當讀者遇到讓讀者感到困惑費解的內容時,會遭遇 Proulx 所謂的「意向威脅」,此時反而會提高讀者的求知慾,使讀者的理解能力增強。Daniel M. Oppenheimer 在 2010 年的研究也指出,比較難閱讀的字型,反而能讓讀者記住內容。

換句話說,易讀性其實是一種很難測量的性質,你不知道測量出來的數據優勢,到底是來自較佳的易讀性,或者來自較差的易讀性。

如果我們看看網路上更多的「易讀性」龍頭,還會發現一些有趣的現象。

首先讓我們看看 Amazon 的「Kindle Cloud Reader」網頁應用程式,這是 Kindle 電子書閱讀器的網頁版本。Kindle 電子書採用電子紙顯示器,這種顯示器的特性是他本身不會發光,而是像真正的紙張一樣,藉由外部光源照射及反射,讓讀者的眼睛看到顯示出來的內容。

由於電子紙的特性使然,採用電子紙媒介的數位內容,就跟現實世界中的紙本書一樣,最適合採用白底黑字(這我絕對是同意的)。而 Kindle Cloud Reader 為了「重現 Kindle 上的閱讀體驗」,所以在內容的呈現上也是採用白底黑字。但是,除此之外,Kindle Cloud Reader 的其他介面卻是採用黑底白字的配色:
Kindle Cloud Reader 的主畫面及訊息內容都採用黑底白字
如果在現代的電腦環境上,真的白底黑字擁有絕佳的易讀性、黑底白字如此十惡不赦,Amazon 應該就不會做出這樣的設計決策。

另一個提到易讀性就一定會講到的是由 Arc90 實驗室釋出的「Readability」套件。這個套件的功能是把任何網頁轉換成更具易讀性的版面,除了提供 Firefox、Chrome、Safari 等瀏覽器的套件,並成為 Safari 瀏覽器內的 Reader 功能外,Opera 瀏覽器的使用者也可以安裝相同核心的 cleanPages 擴充套件。

Readability 提供的設定功能,表達出一個很重要的意義:白底黑字與黑底白字,不見得孰優孰劣。所以他讓使用者根據自己的偏好來選擇,同時提供三種白底黑字(Newspaper、Novel、eBook)以及兩種黑底白字(Inverse、Terminal)配色:
圖:cleanPages 擴充套件的設定畫面及顯示範例

對我來說,「易讀性」就跟其他的好問題一樣,沒有簡單的答案。這是一個網頁設計師必須面對的設計考驗,你必須根據你的目標族群、你的目標族群主要使用的設備特性、你手上擁有的字型、你的設計意圖、你的審美觀,來調配出「最富易讀性」的搭配。

以我來說,如果我的網頁要設計給我這樣的人、在現代的 LCD 液晶螢幕上看,我會選擇黑底白字;如果我要設計給電子紙、電子墨水,或者我要設計給 CRT 螢幕的使用者,或者我專門針對熱愛紙本書質感的人看,或者必須讓網頁上的內容幾乎跟紙本輸出一模一樣,我會用白底黑字。如果我要設計給手機使用者看,我可能又會有不同的設計決策。

然後,基於我的「親和力」背景,我一定會讓使用者能夠根據各自的需求,改變我的網頁配色方式。(最起碼也要讓列印用樣式表與螢幕用樣式表採用各自適合的配色。)這個使用者需求可能來自不同使用者族群的不同審美觀、不同的呈現裝置特性、不同系統上的字型呈現差異,甚至是讀者的「心境」變化,都有可能。我們都知道要在明亮的地方閱讀,對眼睛最好、閱讀體驗最舒適;但是我們有時候偏偏想要在燈光昏暗的地方,啜飲一杯小酒,隨著煙霧瀰漫,讓自己進入作者的恍惚境界。

快速總結一下:環境背景、螢幕類型、文化背景與審美觀、字型、讀者當下的心境,都是設計「易讀性」時要考量的變數,沒有任何一種配色方式可以穩贏不敗。

所以,無論如何,我絕對不會說黑底白字或白底黑字「一定不是好設計」。

(+) 於 所發表 |
[創用 CC 授權條款]
配色與易讀性〉由 Jedi 製作,所有內容如無特別聲明,一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
相關文章:
歷史上的今天:
迴響
[ 1 : 靜態鏈結 ]

我個人的經驗是,螢幕本身品質和設定也有很大影響。好比說我在實驗室可以連續看好幾個小時的螢幕而不感到眼睛不適,相反的,在老師的辦公室中因為不同的螢幕,就比較容易感到雙眼疲憊。

t7yang 發表於 February 25, 2012 09:21 PM
[ 2 : 靜態鏈結 ]

我的經驗是黑底白字的螢幕看一陣子後馬上轉移視線
則會有「鬼影」殘留在視覺上
令人感到很不舒服

由 光 發表於 February 25, 2012 11:08 PM
[ 3 : 靜態鏈結 ]

沒想到那麼久的老文章還要Jedi寫長文回應,我真是太感動了。不過你恐怕混淆了易讀性和易識性(legibility)。但這應該不是你的錯,因為你文中提到的(Readability Of Websites With Various Foreground / Background Color Combinations, Font Types And Word Styles及以下)那幾篇論文,自己就先混淆了。

那些論文討論的都是易識性,最容易辨認,最快反應時間等,而這些測試跟易讀性沒關係。易讀性的適用範圍是 長篇文字 ,而不是一行字、一句話、一個標題,或者幾張投影片。

不幸的是這些學者混淆了易讀性與易識性,連帶讓我們也跟著一起混淆(以至於你連Kindle的黑底介面也要拿來當證據。前端目錄介面,和書稿內文閱讀,這兩者的閱讀需求差別應該是非常遠的)。

我很尊敬你對網頁親和力的執著,也因為這個緣故,所以我很認真拜讀了你的文章,因此我很擔心你對易讀性的混淆,可能會影響你所推廣的網頁親和力,那就真的太可惜了。

其他容易流於意氣之爭的討論我就不提了,免得大家傷感情。我建議還是先理解一下易讀性和易識性的差別,再討論配色問題可能比較好些。

oc 發表於 February 26, 2012 09:04 AM
[ 4 : 靜態鏈結 ]

我一定要來澄清一下,我在文中強調過的幾點:

1. 由於我對親和力的追求,所以本文絕對沒辦法徹底撇開親和力,單看易讀性。我希望讀者都能明白這一點。(翻譯:我對易讀性的看法一定是有所偏頗的)

2. 對於易讀性,我在文中沒有提出任何有效且直接的學術研究。

2.1. 我認為 Paul Muter 的研究(即老貓提出的那篇)無法適用於現今的情境。

2.2. 我提到 Alyson L. Hill 的研究,並且說明這個研究中比較的數據是反應時間,該學者認為那就是易讀性的定量分析,但其實我覺得不對勁(所以很高興老貓回應那其實是易識性的定量分析,感謝!)然而這個研究本身有個有趣的地方,在於配色不會單純影響使用者,配色與字型與字體的組合也會造成很大的差異。我希望如果有人想做易讀性研究,也要注意這部份。

2.3 我後來又提到 Travis Proulx 和 Daniel M. Oppenheimer 的研究,那些研究更不是在處理易讀性。我提到這些研究,是希望能夠說明,跟閱讀有關的行為表現有很多陷阱,想要定量分析「易讀性」的朋友請務必小心,想清楚你要測量的是什麼。

3. 至於 Kindle Cloud Reader 的黑底介面,當然是拿來呼應老貓提出的「DOS 進到 Windows 的底色變化」囉。不過老貓的回應中,也有提到我在本文一直想強調的:不同的閱讀情境、不同的文體格式,就會帶出不同的閱讀需求,在易讀性設計的決策也可能有很大的不同。

說到底,我只是覺得不是對於所有的讀者、在所有的閱讀需求下,黑底白字都是個易讀性較差的選擇。因此若有人讀了老貓的文,吸收那些寶貴的易讀性經驗同時,卻因此直接捨棄黑底白字,那會是非常可惜的事。故寫此文,希望大家能在這個議題上多保持開放心胸,多考慮不同的相關環節,用心做出好設計。

Jedi 發表於 February 26, 2012 09:34 AM
[ 5 : 靜態鏈結 ]

>所以,無論如何,我絕對不會說黑底白字或白底黑字「一定不是好設計」。

其實我覺得黑底白字的網頁,在只看字的時候比較舒服。
但是常常要放上照片的話,因為照片通常是亮的,所以對比又太強,反而會覺得不舒服。(至於照片放到超過網頁寬那是另一回事了)

Applepig 發表於 February 29, 2012 12:48 PM
[ 6 : 靜態鏈結 ]

3Q very much ^^

由 nice 發表於 August 21, 2015 01:18 PM
[ 7 : 靜態鏈結 ]

搜尋是否有一勞永逸設定瀏覽網頁黑底白字時來到這裡...

因長時間上網,早已自覺黑底白字能讓眼睛較舒服,尤其在看全文字網站時,也較能長時間閱讀,有些網站為白底又無法設定背景,看到後來常覺得刺眼而疲勞,故此搜尋解決之法。

感謝Jedi大提供「Readability」套件資訊,急可不耐地去下載,現在「The Readability Chrome Extension has been replaced by Mercury READER」,雖然字體、文字大小及背景設定功能皆有縮減,可喜的是仍有黑、白背景可選擇(字體只剩SERIF、ANAS,對中文幾無差異,文字大小只有小、中、大)。

來回報一下使用體驗,以點擊率排行前五的文學網站來說明:

1.豆瓣:使用後,他人回覆也一並去除,且大多數文章圖文皆保留,但少量文章只剩標題,圖文皆被去除。
2.360doc.com:圖文皆保留。
3.起點中文網:文字保留,但上一章、下一章連結也去除了。
4.晉江原創網:同起點。
5.縱橫中文網:同起點。
註:以上網站,「換行」都保留,未影響閱讀,但晉江會保留每個段落後面的亂碼文字。

除了以上網站外,其餘部份小說網站會保留上一章、下一章的連結,但幾乎全部小說網站都會將「換行」也去除了,文章變成全部連在一起不利閱讀,且它在某些文字網站(例:天涯論壇)使用,會連文字也去除了,所以不是適用於全部網站的工具。

因為Mercury READER會將網頁變成只剩文字,故在閱讀完該網頁後,須回上頁或回復功能才能繼續閱讀,且每個網頁皆須再點Mercury READER圖示才能作用,但若文章所在網站每換頁都有須點按關閉的廣告,Mercury READER尚算不錯的工具。

由 olive 發表於 February 28, 2017 12:29 PM
[ 8 : 靜態鏈結 ]

我目前(2017/02/28)日常使用的瀏覽器是 Vivaldi,沿用 Google Chrome 的延伸套件「Dark Reader」,請參考。

這個套件的缺點可能是會強制把它認為是背景的圖片也反相。

Jedi 發表於 February 28, 2017 01:07 PM
[ 9 : 靜態鏈結 ]

再次感謝Jedi大,已下載「Dark Reader」使用,心得只有「感動得想哭」,安裝後連Google瀏覽皆可黑底閱讀實在太棒了。

因較少網站背景會大塊的用純黑底,試了一些個人常瀏覽的網站,皆無此問題,太感謝了^^

由 olive 發表於 February 28, 2017 11:06 PM
[ 10 : 靜態鏈結 ]

延伸閱讀:英國政府網站親和力部落格的這篇《How users change colours on websites

Jedi 發表於 March 27, 2017 11:08 PM
給我迴響吧!
個人資訊








是否記住個人資訊?



請依上圖輸入檢核碼:
迴響





Jedi.org: 部落格 | Weblog | 三太子 | 討論 | MTBook | 網頁親和力 | 深入親和力 | 簡報原力:AV | 履歷 | + | @ | Flickr | Lytro | tumblr | NSFW