11.03.2010

黑底白字還是白底黑字?

有人留言說這個部落格的黑底白字版面讀起來不太舒服。事實上去年差不多這個時候我也因為類似的讀者意見試圖改成白色版面,結果後來又改回來。我想要是我不做些什麼,可能每年都會接到一樣的抱怨。

我同意這個黑色版面比我之前設計過的白色版面好看,不過我也同意我應該讓大家眼睛舒服一點。我目前還不確定要不要重新改成白色版面(或者至少把文章那塊背景改成白色),不過針對新留言提到的視覺暫留問題,我把字的顏色改得更深,也把文章字型調大,希望有點改善(你可以在這裡看到之前的樣子)。

我會考慮改版問題,在那之前,希望這些小修正能讓大家看得舒服一點。若你覺得這些修正沒有什麼幫助,還有另外兩個方法:
  1. Feedly訂閱
  2. 用Chrome的Clear套件
  3. Readability
如果這些方法能解決大部分的人的閱讀問題,我就可以保留這個大家習慣的黑底白字版面。

若你有任何意見或疑問,歡迎留言。

21 comments:

  1. 因為用了火狐+外掛 No color,看這篇網誌時是淺灰底、文章黑字

    ReplyDelete
  2. 我剛剛看你的螢幕截圖,發現你的CSS裡指定襯線字體「serif」做為指定字集。但是<html>裡卻沒有指定網頁語系,導致瀏覽器無法找到正確的字體來顯示(跟每個人的設定有關)。我現在看到的是西文襯線字+中文無襯線(黑體)字的詭異組合。麻煩加上lang="zh-TW"就可以解決。

    ReplyDelete
  3. 我比較喜歡黑底白字

    白底黑字的白色背景一大片很刺眼
    比黑底更用眼力

    ReplyDelete
  4. 這應該是一個科學問題,而且上網Google能找到不少資料,不過沒有肯定的結論:

    1.數位閱讀較適呈現模式—以15 至29 歲為例:研究指出「白底黑字」與「黑底白字」相比「較舒服」;然而在「易吸引目光」、「有效率」、「整體適合」方面,黑底白字較佔上風。(P.37~)

    2.在不同色彩對比下光滲現象對視覺銳度之影響:其實研究主題不是重點,重點是裡面列出了許多探討白底黑字和黑底白字的相關研究資料(P.26~)。

    ReplyDelete
  5. 接著是其他零散資料(不記得哪裡查到的)和我個人的經驗及comment:

    1.整體來看,較多研究支持淺底深字,但亦有少數研究支持深底淺字,另外也有研究認為二者無差異。

    2.在引用以上研究結論時,請務必注意,研究用的究竟是什麼底色和字色。

    事實上很少媒體使用真正的「黑底白字」,以BBS為例,預設的背景是#FFFFFF,而前景是#CCCCCC,嚴格來說是「黑底亮灰字」。

    3.亮底暗字和紙本的閱讀經驗較像;但早期的電腦螢幕就是從暗底亮字開始的,暗底亮字也和BBS、電影較接近。

    4.螢幕的設定可能有影響。至少支持暗底亮字的其中一個理由是,減少螢幕閃爍感。

    5.使用者的視覺能力也有影響。

    似乎有證據顯示,弱視者使用擴視機時,暗底亮字的閱讀效果好於亮底暗字。

    但也有研究認為,散光者閱讀亮底暗字效果較佳,推測是亮底使瞳孔較小;而瞳孔大小影響水晶體屈光效果,間接影響散光。

    6.使用暗底亮字,使用者可利用Google Reader等RSS閱讀器讀到亮底暗字的版本;反之則否。這也是可以考慮的。

    7.要說我的個人經驗,我個人認為黑底淡灰字(#CCCCCC左右)和淺底黑字差不多(管它淺綠淡黃淺藍淺紅淺紫),都比白底黑字好一點,後者比較容易感到閃爍和眩光。

    ReplyDelete
  6. 黑底白字好看太多了!

    ReplyDelete
  7. 我看黑底白字明顯比較吃力
    拿自己實驗多次
    差異非常明顯

    ReplyDelete
  8. 我曾經在看完雞蛋糕的內容後,再看其他東西時出現好多條紋干擾我的視線

    不過只有發生過一次所以不知道是不是黑底白字引起的

    ReplyDelete
  9. Tom:

    好主意,謝謝你。

    Ethan:

    你是說把lang="zh-TW"放進<html ...裡面嗎?我改好了,可以幫我看看有沒有弄對嗎?謝謝。

    陸仁賈:

    謝謝你提供那麼多資料!

    ReplyDelete
  10. 可以試著用白底白字或黑底黑字看看

    ReplyDelete
  11. 我覺得如果用西底白(灰)字的話,版面中就不要出現其它更亮的東西
    (像是左邊的彩圖)
    bbs的版面不會有整片的白(亮)色,看久也比整片白底黑字好一點
    古早的terminal也是暗底亮字的

    問題是大部份的browser的主題是亮的系的....
    要開全螢幕比較好

    ReplyDelete
  12. 對囉!現在已經正常了 :)

    ReplyDelete
  13. 這個版面很好看呀
    我是習慣白底黑字的人
    你是我唯一一愛逛的黑底部落客
    (講得好像我很大咖似的...)

    我是相當以貌取人的人
    部落格設計如果不合眼,
    我會直接跳過內容不看

    你的部落格很好看,
    黑底灰字(字體搞大了,贊啊!),
    再用一點點的粉紅做裝飾

    ReplyDelete
  14. 正文和comment大小差太多怪怪的,建議comment也調大一點

    ReplyDelete
  15. 關於字型大小的問題,有些瀏覽器可以自行設定「最小字型」,如Firefox和Opera,至於Chrome的最小字型設定以前的版本是有的,現在好像被拿掉了,但還是可以參考這裡來做設定(有不同作業系統的設定檔預設路徑)。

    ReplyDelete
  16. 我覺得這裡可以加上「列印」功能

    今天列印的時候,還要貼上貼下的去WORD檔,真有點麻煩

    讓喜歡紙本的人列印出來,就不用擔心黑底白字問題了

    ReplyDelete
  17. 頌:

    謝啦!

    G:

    那是個好點子,不過直接用瀏覽器的列印功能不行嗎?我用chrome列印,會自動變成白底黑字欸。

    ReplyDelete
  18. Kris:

    我是用IE,用瀏覽器列印就不只印內文而已,連左邊那一串都會列印下來

    我看到的是這個

    按列印後會跳出一個專門列印的版面,比較方便列印也省墨水囉

    忘了提,IE也會直接變成白底黑字,我只是覺得很不方便列印而已~

    剛剛預覽列印看了一下,列印這個頁面(包括回應)就要8頁

    我覺得本文的列印可以跟回應分開

    PS.我發現過沒幾分鐘再回應,之前的回應會被覆蓋耶!!!!!(好裡加在有先複製起來@@)

    ReplyDelete
  19. 不好意思,另外兩個方法中的第一點的超連結:「這是雞蛋糕在我的Google Reader上呈現的樣子,讀起來應該還不錯」看不到裡面的圖片

    ReplyDelete