Theme 的選擇及設計

WordPress 除了有良好的 plugin 架構外,另一個吸引人的地方就是有很多 themes 可供選擇,大部份一開始用 WordPress 的人(我當然是其中之一)都會在眾多的 themes 中選擇一個適合自己要求的 theme,WordPress Theme Viewer 就是其中一個 themes 的集中地,而且還會時常轉用不同的 theme。

用了一段時間就會慢慢心癢癢,想自行修改,甚至設計一個獨一無二的 theme,要這樣做當然要有一定的 HTML/XHTMLPHPCSS 甚至 javascript 等方面的認識,否則當然是事倍功半。

雖然現今 WordPress themes 多如繁星,但其實把 CSS 抹掉後,都只是一堆 HTML/XHTML code,當然同一個 theme 由不同人編寫 CSS 作外觀修飾,效果可以節然不同,這亦是有美學根底的人優勝的地方,而我就沒有這方面的天份了,但首要的選擇或設計條件是以什麼形式將文章及其他資料顯示出來。

WordPress theme 的設計由傳統的 two columns 慢慢演變,主要分兩個方向前進,一方面以多資訊顯示的方式,例如像報紙排版般 three columns 甚至更多 columns 的設計,另一方面轉向以文章內容作主導,one column 甚至單篇文章的主頁等,決定了最基本的排版選擇後,才容易設計 theme 的。

最近 one column 或者單篇文章主頁的設計有愈來愈多的趨勢,我自己亦有點偏好這類設計,但想到自己的文章質素,純感不太合適,因為這類設計會將注意力集中在文章本身,我自己有自知之明,轉用這種設計實在有點兒冒險,排版的選擇真的因人而異,個人喜好主宰一切,但有些原素我覺得值得討論的。

1. 固定闊度 vs 彈性闊度

除了內容為本的設計愈來愈多外,彈性闊度的設計亦開始增加,彈性闊度設計即是網頁會根據 browser 內顯示範圍自動調節網頁的闊度,令到使用者可以盡用 browser 的顯示空間,尤其是現今闊屏幕的 LCD 顯示屏愈來愈便宜,使用闊屏幕的人日漸增加時,呼叫使用彈性闊度設計的聲音亦愈來愈多。

我在 Cosine Inn 餘弦棧內曾提過這方面的意見,我對這種設計是有點保留的,雖然可以盡用屏幕,但我覺得當超過一定闊度時,眼睛要由極左看至極右才換行的話,實在有點不自然,我不知報紙選用多欄排版的原因是什麼,但我覺得當中可能跟我想的這理由有點關係,亦是有很多 one column theme 選用 480px 這種窄闊度的原因。

明眼人跟著可能會問我,那我現在的 theme 在每篇文章時是單欄的,雖然是固定闊度,那又如何?其實我自己都覺得有點問題,可以加大 margin 令到每行的字數減少,像 WordPress default theme 那樣,另一方法是加大字體以減少每行的字數,但會帶出第二個問題,待下一點再談。

2. 大字體 vs 小字體

大部份的 theme 作者都是使用外語的,所以很多時字體大小都是不適用於中文的,因為實在太小,下載後第一件事就是將字體調大,但字體大小又會如何取捨呢?

現在 Web 2.0 的網站大都有一個特點就是使用大字體, 而有些香港的 bloggers 亦有這樣的選擇,例如 JackyMadthiuClement 以及先至使用大字體的思存(雖然他因為某些原因已經將字體縮小了)。

大字體不用說是清晰及容易閱讀,但有些人會覺得不夠 elegant、浪費屏幕空間,及因要時常換行令到閱讀不夠效率等的相反意見,而自己亦慢慢覺得大字體的確有助舒緩閱讀時眼部壓力,有可能遲些會實行大字體計劃。

3. 淺色 vs 深色背景

至於背景用色方面,主要分淺色和深色背景,兩者皆有捧場客,但最近 456 Berea Street 說深色背景令眼睛很累,從而引起很多討論,我亦是第一次聽到有這樣的意見,真的很驚奇,我反而覺得只要反差不大的話,深色背景反而令眼睛更舒服,我亦有點偏好深色背景的,但因為我的 emoticons 用的 ID 有別於預設設定,再加上現在的 emoticons 不是透明背景,用在深色背景時會慘不忍睹,因而令我轉用深色設計的計劃有所卻步。

4. 簡約 vs 花巧/豐富

簡約或花巧當然是個人意願主導,但可以用兩個層面來說,外表及內在,外觀可以十分簡約,但內裡的理念可以很豐富的,例如最近的 Sandbox theme 便是一例。而本地亦有數位 bloggers 奉行簡約主義的,JackyMadthiu林子揚 便是其中一份子,想要簡約的 theme design,plaintxt.org 便是其中一個好去處。

而喜愛花巧豐富的人,一類喜愛將小玩意放在 blog 上,極端的整條 sidebar 都充斥著玩意,另一類會著重視覺效果,用圖像來修飾外觀,web designer 其中一個強項便在這範疇發揮出來。

而我本人就偏向外觀簡約,因為沒有美學根底,又不懂使用 Photoshop 這些繪圖工具,其實是有點兒被迫簡約的,因而我希望在實用性方面有所改善。

5. 實用性

Blog 的實用性原素其實有很多,例如 tagging、archive、「相關文章」、「最新留言」、「隨機文章」等等很多很多,每種原素都有 plugins 代勞提供,但其實細心一想,以上的功能並不是必須的,讀者使用的機會率不是很多,反而最多機會使用的其實是留言系統,因為當文章或留言有討論價值時,讀者便會參予其中,所以我覺得是很重要的一環。

現今留言大部份的留言設計都是同一個模式,就是首先顯示留言,留言以時間順序排列,最後才是留言表格。當然我亦見過一些 blog 留言設計是留言以時間倒序來排列,不過不是 WordPress 的 blog,而是一些 Blog Service Provider (BSP) 的,但這種設計令讀者要從最後的留言看到最開頭的留言才能跟到留言的先後次序,實在不便。

另一款留言顯示方式就是 threaded comment,當中的 plugin 以 Brian Threaded Comment 至為著名,這種顯示形式像 forum 那樣,每一個留言都像 forum 內獨立的 thread,在每一留言內可以有其跟進留言,雖然這種系統可以對號入座地留言,但留言的時間性便盪然無存,很難知道最新留言在那裡,所以我只是最初用過一段短時間便放棄了。

以另一方式令讀者清晰顯示留言的對頭人就是「引用」功能,將留言的內容 quote 起來,有助其他讀者知道留言的來龍去脈,而且可以保留留言時間的順序,所以我較為喜歡,暫時我用過的 Quote plugin 以 Quoter 比較好,除了可以引用留言外,還可以引用網頁內的任何內容,再加上彈性的設定,真的不錯。

當一些文章的留言很多時,有人想到將留言分頁的顯示,每一次載入的資料量減低,載入時間便可以縮短了,所以便出現了 Paged Comment plugin,這種方式無疑是不錯,不需要太多的 scrolling 便可觀看留言,我亦曾經考慮過使用,但當配合一款當紅的技術時,便有點無所適從了,我所指的是 Ajax

在講 Paged Comment 加 Ajax 的問題前,我想首先談談 Ajax Comment,以前使用 Ajax comment 是需要自行修改 theme files 的,對一些人來說的確有點不便,現在就方便多了,因為有 plugin 可用,其一是 AJAX Comment Plugin,但這個 plugin 有點不好的地方,就是不能和 Spam Karma 2 共用,當然有解決方法,只需稍作修改便行,當然使用 Akismet 是另一個選擇,使用 Ajax 亦引伸出支援 javascript 的問題,當用戶關閉了 browser javascript 支援時是無法使用 Ajax 的,亦令很多設計者會兼顧當關閉 javascript 支援時的情況,但現今 Web 2.0 網站紛紛出現,快到了不用 javascript 不行的時代,我亦開始不太著意這個問題。

談回為何 Paged Comment 加 Ajax 時會變得無所適從?以我所知,現是好像沒有 Ajax Paged Comment 這類 plugin,我自己就不懂怎樣修改或編寫,而 Binary Blue Theme 是我見過第一個 theme 內置 Ajax Paged Comment 功能的,轉另一頁留言不用整頁 reload 的確是很方便,但從這 theme 亦顯露出 Ajax 某方面的短處,就是沒有 permanent URL,因為留言以分頁顯示,再加上 Ajax 後,每篇留言亦因而失去了 permalink,令我對這功能不作考慮。

最後提的有關留言系統設計就是留言表格位置問題,最近有兩款設計令我想「參考」的:

兩者的設計理念其實是大同小異,就是方便回應留言,不用 scroll 到最底的留言表方可開始,又可以在留言時再細讀回應的留言,避免誤會留言者的意思,著實方便,我就偏好 snook.ca 那種設計,因不用 mouse click 便可留言。

後話

這篇文章估不到會愈寫愈長,真的是長篇大論,大家能有耐性看到這裡真是奇跡,希望不會把大家悶透吧,但我再細心想想其實是有點自相矛盾,因為當普羅大眾習慣使用 feed reader 或 Microformat 普及時,theme 的重要性會變得愈來愈低,網頁會轉往真正的 content-centric,只得內容而沒有 layout,那麼到時 web designer 存在價值在那?我這篇文章亦變成廢話一大堆了。

28 Responses to “Theme 的選擇及設計”

  1. 1399

    貓頭鷹編輯老貓在老貓學出版寫了以下一篇文,並實際運用在其 blog 的設計和文字編排,很值得參考喔...

    傳統編輯對部落格新手的寫作建議:一個呼籲
    http://b-oo-k.net/blog/blog.php/2006/8

  2. 1400

    深色與否還是看配色功力。若否,白色底都可以很難看。

  3. 1401

    關於彈性闊度的問題﹐這種設計的好處就是在於彈性﹐讀者可以依據個人對於每行長度的喜好而調節視窗大小。有人不喜歡要眼睛左右掃閱讀﹔有人卻不喜歡短行令到文章長﹐時常要 scroll ﹐所以個人覺得彈性闊度比固定闊度更能照顧不同讀者的需要。

  4. 1440

    one column的话,原先sidebar里的东西如何处理便有些难办啊,可能需要设计一些expand section用来存放这些。

    深色和浅色,我还是偏向浅色,图片的显示效果比较好,而且我觉得大部分浏览器的默认主题是浅色的,一个浅色的窗口,嵌入一个深色的网站不是很搭。这点我在使用windows XP系统主题的时候时常发现,有些深色主体样式desktop clean的时候是很好看的,但是explorer打开后,一块白色的窗口背景就很突兀了,要考虑到窗口颜色。

  5. 1441

    不够其实可以设计在bg区域一个电灯开关,点击后切换css,达到用户根据自己的习惯切换深浅。另外字体的大小问题也可以这样解决 :)

  6. 1403

    [quote comment="11570"]關於彈性闊度的問題﹐這種設計的好處就是在於彈性﹐讀者可以依據個人對於每行長度的喜好而調節視窗大小。有人不喜歡要眼睛左右掃閱讀﹔有人卻不喜歡短行令到文章長﹐時常要 scroll ﹐所以個人覺得彈性闊度比固定闊度更能照顧不同讀者的需要。[/quote]

    這個都是看情況而已,以我為例,我會用 Firefox 的 tab browsing,當然不只同時瀏覽一個網頁,如果是一個 one column 的 theme,用了 flexible width,在瀏覽其他網頁理所當然的 browser window 闊度,在看這個 one column theme 就會顯得過闊了,要特此轉換 browser window 闊度的話我覺得不太方便,再細想我覺得 flexible width 在 2-column 甚至更多 columns 的 theme 會比較適合。

  7. 1404

    [quote comment="11575"]one column的话,原先sidebar里的东西如何处理便有些难办啊,可能需要设计一些expand section用来存放这些。[/quote]

    那當然要設計一些地方擺放原本 sidebar 的資料,但我現在覺得那些 sidebar 的東西使用率究竟有多少,其實極有可能很低呢。

    [quote comment="11575"]深色和浅色,我还是偏向浅色,图片的显示效果比较好,而且我觉得大部分浏览器的默认主题是浅色的,一个浅色的窗口,嵌入一个深色的网站不是很搭。这点我在使用windows XP系统主题的时候时常发现,有些深色主体样式desktop clean的时候是很好看的,但是explorer打开后,一块白色的窗口背景就很突兀了,要考虑到窗口颜色。[/quote]

    我自己又不覺得有圖片時會效果不好,因為我見過很多外國 blogs 用深色底色有圖片時也效果很好啊,這果真是個人喜好。

  8. 1405

    [quote comment="11576"]不够其实可以设计在bg区域一个电灯开关,点击后切换css,达到用户根据自己的习惯切换深浅。另外字体的大小问题也可以这样解决 :)[/quote]

    電燈開關便正正是 snook.ca 的設計,至於切換字體大小我都曾在某些 blog 見過。

  9. 1406

    [quote post="284"]但我現在覺得那些 sidebar 的東西使用率究竟有多少,其實極有可能很低呢[/quote]

    大部分确实不高...-__- 最新帖,随机帖,最新回复等等也可以放在blog底部区域。但是rss订阅方面的,meta区域里的一些东西还是有些用处的。其实可以参照http://www.cssdev.com/的隐藏留言表格,做一个user panel,在home,page时候,打开一个区域,里面放sidebar的一些东西。如果在single的时候,打开一个留言表格。

  10. 1717

    天佑這篇寫的真好
    尤其是當喜歡編修theme跟安裝plugin的我,有時真會發現在blog塗塗改改之餘,
    就功能外觀與排版取捨是件很有趣的事,也常常考量到你在文章提及的那些想法...

  11. 1429

    很有心機的文章呢。

    雖然 RSS 減少用家瀏覽網頁的次數,但還是要到本身網頁留言,theme 的設計考慮始終不可少,一點貼心的方便,其實更勝千嬌百媚的華麗外表。

    另外個人覺得會留意 sidebar 上的東東的用家越來越少,所以我的 sidebar 都很簡潔。

  12. 1431

    真難得有興致寫這麼長的文章,多謝 Robbin 和 Clement 的欣賞。

    [quote comment="11586"]天佑這篇寫的真好
    尤其是當喜歡編修theme跟安裝plugin的我,有時真會發現在blog塗塗改改之餘,
    就功能外觀與排版取捨是件很有趣的事,也常常考量到你在文章提及的那些想法...[/quote]

    真的很有趣,但我時常停留在想的階段,因為很難決定那一款做法會好些,執行力不足再加技術不足,唉。

    [quote comment="11591"]很有心機的文章呢。

    雖然 RSS 減少用家瀏覽網頁的次數,但還是要到本身網頁留言,theme 的設計考慮始終不可少,一點貼心的方便,其實更勝千嬌百媚的華麗外表。

    另外個人覺得會留意 sidebar 上的東東的用家越來越少,所以我的 sidebar 都很簡潔。[/quote]

    雖然貼心的設計較華麗外表重要,但一個美麗的外表可以令人一眼看後決定會否離開呢。

  13. 1742

    Hi buddy! Thanks for this lengthy but thought-provoking article. Here, I wanna throw in my own 2 cents into the discussion.

    One-Column Design and Minimalism:

    Recently, I have finally satisfied my desire of owning a single-column blog template. Before switching to single-column design, I did think about where to put all the stuff that used to be in the sidebar, at the time I was using many plugins and it was really a great challenge to accommodate all of them in the new single-column design. Finally, I gave up on accommodating them into the new design, instead I started to think whether they are actually essential for the visitors of the site, are they really useful or are they a block of information that visitors rarely pay attention to. I used myself as an example, when I go to a blog, the first I noticed is the latest entries, nothing else. Only when the first entry grabbed my interest, then I start reading few more latest entries, and on rare occassions I actually dig in into the past. With this in mind, I started a process of elimination of all my plugins, I felt that my blog was bloated. Personally, nowadays when I visit a blog with too much things going on, I feel a bit uneasy and overwhelming. At the end, I have cut down to 10 plugin, and most of them are internal enhancements, only few actually add content blog on the front page, for instance Most Commented plugin.

    Sorry for this lengthy comment, I hope I have contributed a little into the discussion.

  14. 1738

    @AsceticMonk:不要這麼客氣,我希望多聽其他人在這方面意見,我和你一樣,很多時到訪其他 blog 時主要是看文章內容,很少留意其他地方,所以開始懷疑 sidebar 的作用,亦因此想轉用 one-column 或 one post 首頁的設計。

    你的新 theme 確實不錯,因為你用 one-column theme,所以我想知你對 fixed width 和 flexible width 的意見。

    題外話,雖然你的 blog 間中會有中文文章,但在你 blog 留言是否用英文較為合適?

  15. 1739

    About the language of comment, I don't have any particular preference, I think both English or Chinese is fine, just pick the one you are most comfortable with. The reason I write most of my stuff in English is because if I type in Chinese, it would probably take me ages to finish just one sentence. I am really slow when typing in Chinese, never practiced enough.

    Personally, I preferred fixed width, especially when the design is one-column layout. Most of the flexible width designs I've seen on the web are used to accommodate multi-column layouts, for instance Phu Ly. But, if your design is single column, I don't see how flexible width can benefit you much. Instead, just pick a reasonable width for the only column you have. On my site, I pick 500px for the content, not including margin and other decorative stuff around, just the content block is 500px. I think that's good width to pick, and also if you host images on Flickr, that's one of the dimensions.

  16. 1344

    @AsceticMonk:因為你的 blog 大部份應該是英文讀者,用中文留言的話恐怕他們不明白呢。

    真的有點心癢癢轉用 one-column layout。

  17. 1493

    我也偏好單篇顯示的theme, 但我的blog有太多玩意,
    要是用one column就要把東西左塞右塞, 所以最後還是用要簡單,
    又沒什麼功能的three column theme.

  18. 1478

    我也偏好單篇顯示的theme, 但我的blog有太多玩意,
    要是用one column就要把東西左塞右塞
    <-Becky, 大家咁話!:)
    不過三欄式, 我自己覺得要左望, 中望, 右望, 好似多o左d,
    而且亦會有深逼o既感覺, 所以唔敢用~ :)

  19. 1395

    sidekick, 我都覺得三欄式唔多靚o架, 尤其係兩行sidebar夾住content o個種...
    但係冇咩辦法, 3 columns theme選擇又唔多, 2行o既... 又唔多夠用喎!

  20. 1689

    我想,我应该是属于你说的:"喜愛花巧豐富的人"吧?
    在Ajax的comment那里来的,也在寻找“Paged Comment 加 Ajax”
    的解决方法,我现在用的是"Paged Thread Comments",
    想也加入Ajax但不行...谢谢你提供的分析。

  21. 1531

    [quote comment="12063"]我想,我应该是属于你说的:"喜愛花巧豐富的人"吧?
    在Ajax的comment那里来的,也在寻找“Paged Comment 加 Ajax”
    的解决方法,我现在用的是"Paged Thread Comments",
    想也加入Ajax但不行...谢谢你提供的分析。[/quote]

    本來想說用 Ajax 的都不算花巧吧,反而是實用性佔多,但到訪了你的 blog 就不得不認同你的說法,因為你的 banner 用了 Flash。:tongue1:

  22. 2206

    我也是個愛花俏的人吧~~
    哈 每次來你這裡都能學點東西回去 謝謝^__^

  23. 2304

    不知道 ajax comment plugin 和 spam karma 2 有什么相容问题呢?

  24. 2251

    [quote comment="17397"]不知道 ajax comment plugin 和 spam karma 2 有什么相容问题呢?[/quote]

    我不知現時有多少個 Ajax Comment plugin,之前我只是知道這個,同時使用它和 Spam Karma 2 的話,留言雖然會在按 <Submit> 時儲存,但不會顯示出來。

  1. 1402 AK47 | 爱MyDonews的人 » 天佑的wordpress文章,关于Theme选择和设计
  2. 1913 rein:喵的 » Blog Archive » 【wordpress】改theme是一條艱辛的路(未完)
  3. 2179 wordpress模版的选择,修改和设计 - 博客联盟
  4. 2723 部落格(Blog)建站技術資訊網站集 « LLee記事本

Leave a Reply