January 22, 2003

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

[敲打鍵盤]我的網頁哲學

設計網頁,得用心。

大家不要竊笑,這件事恐怕不是那麼容易做到的。我在講的是那種關於 1 pixel 的執著,是那種少按一個鍵、滑鼠少移動一公分、下載少一秒鐘的堅持。

從我開始寫 blog 以來,幾個朋友(像是 acerhlbSchee 等人)先後都在探討著 Accessibility(親和力;無障礙) 跟 Usability(可用性) 的議題。這些觀念在國內似乎相當難以推廣,今天早上當我在跟研究所助理解釋我設計網頁時考量的種種細節的時候,祇換來我想都沒想過的回應,像是:

「網頁不是萬能,你不應該放太多東西在上面。」 「首頁應該祇放概要性的敘述,新聞應該放到另外的地方去。」 「應該要另外建一個分類,把所有的相關鏈結放過去。」 「可是我們不想要把所有的更動都顯示出來,祇想要公開特定的公告。」 「你應該顧及到大部分的人都用 IE ,設計網頁時應該要以 IE 為準。」

國內許多網站,尤其是這種學校單位的網站,往往都會給人家這樣死板的印象;網站上放置的都是百年不變的無用資訊,彷彿網站祇是一個空架子、祇是一種趕流行。更糟的是,有些在位者不祇是誤解了網站的奧義,更加上了自己的無限幻想,好似任何東西前面加個 e 就可以瞬間蛻變;好似說一句「弄個留言板」就是在實踐雙向溝通了。

不,事情不是這樣的。

我依然相信「網路 13 秒黃金定律」這麼一回事。這個定律是在說:

無論頻寬如何變大、無論網路如何變快,一旦載入某個頁面所需的時間超過了 13 秒,使用者就會不耐煩而按下「上一頁」。

同樣地,我相信對於一般的網路衝浪者(surfer)來說,如果某個網站在 13 秒內無法讓她找到她所需要的資訊的話,她也會跳到其他網站。這裡暗指著幾件重要的事情:

  1. 網頁不應該太大:
  2. 除了不應該濫用圖片或多媒體之外,應當盡量使用 CSS 來減少 HTML 部分的容量;同時也該提供更精簡的 RDF 版本,用最少的位元提供最多的資訊。
  3. 文字尺寸及版面配色應適中:
  4. 文字太小或配色對比不當(對比過高或對比過低)都會使得閱讀不便;文字太大卻又會讓相同單位面積的網頁所能容納的資訊過少,而且還會使得版面變得太過擁擠。除此之外,各個不同等級層次的標題、內文,也應該有一致的字形變化規則,這樣纔能夠幫助讀者迅速掌握內容的層次。
  5. 呈現資訊的層次:
  6. 雖然眾多網頁瀰漫著 Splash Screen (就是以一張不具深刻資訊內涵的圖片,消耗讀者的寶貴時間/頻寬並且花額外的體力移動滑鼠或鍵盤以取得真正有幫助的資訊)搭配不知所云的「系所概況」(真正有找過資料的人就會發現,在這裡幾乎沒有可用的資訊)來當作網站的首頁;但是這樣子的規劃顯然祇適合那種祇會來一次的讀者。對於會常常來這個網站的讀者來說,他們更關心的是「哪裡有了變更?最近有些甚麼新消息?」因此把近期內發生的、相對重要的變化呈現在網站的首頁,顯然纔是正確的作法。
  7. 謹慎分類:
  8. 祇有一項內容的分類,就失去分類的價值了;同樣地,分類過多也形同沒有分類,太多層的分類也會窒礙資料搜尋。具時間性的項目,就該善用時間的特性來編排;超文本式的媒體就不該侷限於過於線性的編排。誰說分類不是奧義的?

當我在自己的網站上貼上了 XHTML 1.1, CSS Level 2.0, WAI-AAA WCAG 1.0 的認證小貼紙時,背後在做的事情就是上述這些:我願意花上幾天的時間,跟一堆標籤奮戰,為的是讓內容更容易被取得、讓文本更容易被解讀,讓讀者可以把精力專注在她們自己真正感興趣的議題上,而無須把時間浪費在她們所不需要的部分。

然而在這些略帶技術性的事項之外,在背後其實還有更重要的指導方針。或者說,有更重要的精神不能夠被忽略。

如果說網路改變了世界甚麼,絕對不是更炫麗的聲光效果,而是他讓「文本交流」更加容易了。是的,我們在討論的是資訊的共享。在網路世界中,「說出口的寫成文字的就不算秘密」絕對是發揮得淋漓盡致;如果妳真的想保有甚麼秘密,那麼妳就該把他們放在妳心中,或者用 GPG 加密。

那麼,既然網路的優勢是建立在交換上,安排網頁內容的時候就沒有道理窒礙資訊的流通。現行的著作權法很容易限制住作者的創作權,因此我在我自己的 blog 上利用了 Creative Commons License 聲稱了開放使用的範圍。同樣地,對於這樣一個學術單位的網站來說,「開放」更應該是必要條件。把資源花在刀口上,把事務處理透明化,時時更新、常常更新,這些纔是讓網站充滿活力的秘訣。

對於做出好網站,我需要學的還很多;但是我仍要大聲疾呼,這些東西並不真的那麼不可近人,祇是需要妳(尤其是位居掌權者的人)花一點點時間去瞭解罷了。而這,也應該是這些人應該有的素養,不是嗎?

其實我記得我好像有寫過這個題目。之所以會再一次地把這個題目翻出來,主要是因為今天早上跟研究所裡的助理溝通到滿肚子怨氣所致。助理們:如果妳們祇是想要做出會淪為死水的網站,對不起,妳們找錯人了。

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

光看這篇文章就不會覺得jedi作為blog第一有什麼好奇怪的。這種書寫的氣魄連google都要甘拜下風。

由 躲同學 發表於 January 22, 2003 10:24 PM
[ 2 : 靜態鏈結 ]

寫得好, 給你拍拍手. 要能夠明確地把這些要點都說出來, 也滿不容易的, 但是很容易讓人理解在這麼多辛苦的背後, 所隱藏的意思到底是什麼.

挑個小錯誤, 是 pixel, 不是 pixal. :)

由 路人甲 發表於 January 23, 2003 10:31 AM
[ 3 : 靜態鏈結 ]

Jedi++ # well written
plasmabal++ # 不愧是是電漿:b

「你應該顧及到大部分的人都用 IE ,設計網頁時應該要以 IE 為準。」說這句話的人要砍頭。我以前作網頁的時候也是如此無知的想,現在知錯了。(到旁邊面壁思過)

由 acer 發表於 January 23, 2003 12:59 PM
[ 4 : 靜態鏈結 ]

plasmabal++ # 已改正 ^^
同時謝謝大家的支持與愛護:p

Jedi 發表於 January 23, 2003 02:53 PM
[ 5 : 靜態鏈結 ]

系所網頁, 公家網頁, 乃至於什麼數位圖書館網頁, 都應該好好想想.

由 hanteng 發表於 January 24, 2003 03:38 PM
[ 6 : 靜態鏈結 ]

回头看看,的确这样。
我基本同意,希望皀‹到更多补充。

叶子 發表於 January 27, 2003 03:21 PM
[ 7 : 靜態鏈結 ]

給朋友看改版後版面,對方一直說很醜,我就問:你用 ie 嗎?結果換來一句「全世界的人都用 IE!」-______-

我連砍他的頭都懶了...

由 ipa 發表於 January 28, 2003 11:51 AM
[ 8 : 靜態鏈結 ]

我認為親和力是很重要的.
我正在學習以 HTML & CSS 寫我在電腦上的第一份日記 - 把日記從paper => computer.有這個丁算, 是受了CSS 的在網頁設計上的精簡和美觀所感動.所以開始時我是先學CSS,再學HTML.加上受到Kynn 的 LiveJournal的設計的影響, 所以我能体會到CSS 對親和力& HTML的structure 之幫助.

由 Aaron Law 發表於 April 9, 2003 05:42 PM
[ 9 : 靜態鏈結 ]

本身也是網站的維護者,你這篇大作真是讓我心有戚戚焉~~

麥克 發表於 June 15, 2003 02:53 PM
[ 10 : 靜態鏈結 ]

引自金紅小築

『網路上最多的是個人網站,約佔八、九成,大約可分兩類,一類是插花型,通常可能是指定學生做的作業,或是有興趣製作網頁的人所推出的成品,剛作好時很熱鬧新鮮,圖像、音樂、甚或動畫俱全,有些網頁也羅列了許多精彩的文章,但大都後繼乏力,主要的原因是站主在熱情消失後,便無心再呵護或增添新材料,於是變得跟「插花」一樣,生命非常短暫!
  另外一種是盆栽型,剛開始並不起眼,但站主持續的施肥、澆水,逐漸成長出特殊的風格,並展現出生命力,主要原因是站主有夢,把網站當作達成理想的工具,因此才會孜孜不倦地耕耘,就像最近台灣網路上,很流行的一篇文章所說:「生命是一種長期而持續累積的過程」,我覺得個人網站經營也是一樣,需要有目標和長期且持續的付出,但這類網站常是鳳毛麟角,除非有人帶路,否則不易尋找。 』

harrison 發表於 June 15, 2003 04:12 PM
[ 11 : 靜態鏈結 ]

:)
真是棒
狠是受用
要來努力了。:D

喵哥 發表於 July 14, 2003 05:48 AM
[ 12 : 靜態鏈結 ]

該是反璞歸真的時候了,別忘了要以資訊作為考量的主體.

由 GOOD 發表於 July 29, 2003 11:17 PM
[ 13 : 靜態鏈結 ]

我總是覺得要有這份心去寫網頁,就得先要從讀英文書來學寫網頁。對嗎?

Aaron 發表於 April 14, 2004 03:43 AM
[ 14 : 靜態鏈結 ]

倒不是崇尚英文。不過閱讀一手的原文文件,往往比較不會囿於翻譯失真所帶來的囹圄。另一方面,新的技術往往也會率先被寫進這些原文文件裡。

祇不過很巧地,這些文件都是用英文撰寫罷了。

我是覺得覺得閱讀英文文件還挺自在的人,就不妨直接閱讀英文文件;反之則可以找譯得較好的翻譯文件。現有技術所帶來的可能性已經太多,其實不需要真的追得多緊,就有很大的努力空間了。

把基礎打穩了,後面的事也就輕鬆許多了。

咦,我怎麼扯到這邊來了?

Jedi 發表於 April 14, 2004 04:02 AM
[ 15 : 靜態鏈結 ]

「你應該顧及到大部分的人都用 IE ,設計網頁時應該要以 IE 為準。」

這句話聽起來沒錯...

不過我倒是發現了這個主流媒體的網站 竟然宣示著 Best View in Mozilla
(就在左欄的最下面)

很令人感動吧!

WilLiao 發表於 April 16, 2004 09:31 PM
[ 16 : 靜態鏈結 ]

不是 8 seconds rule 吗?

Che Dong 發表於 April 19, 2004 06:14 PM
[ 17 : 靜態鏈結 ]

確切的秒數其實不真的很重要(笑)

Jedi 發表於 April 19, 2004 07:38 PM
[ 18 : 靜態鏈結 ]

Re: Jedi(14)
我非常同意關鍵不在英文,只剛好是不部份的文件都是用英文撰寫的,所以我才會說要讀英文文件才比較好。當然,還是要讀原文文件才能避免翻譯失真所帶來的失誤(其實還是有的,只是我不會追究自己因翻譯失真所帶來的責任/不會知道自己是否翻譯失真 (笑) )。

不過像我這種讀英文文件還挺不自在的人為何會推崇英文文件呢?是因為人家的技術比我們的先進,也因文化使然他們比我們較願意把成果分享。

不過技術先進是一回事,書寫得不好讓讀者無法讀得起勁又是另一回事。依我所見,大部份的英文書的「可讀性」都很高(當然也有眼高手低的作品),反之,大部份的中文書都寫得很沒力(但也不可以一概而論。就像我最近開始認真學習使用Linux,發現鳥哥寫的書可謂中文Linux書中的一股清泉。)。所以,我才會推崇英文書。

由 Aaron 發表於 April 22, 2004 04:55 AM
[ 19 : 靜態鏈結 ]

我覺此文章太棒了,提醒了我很多事情,多謝你!
可以給我轉載嗎?我會在文章後貼出處。望批!先謝!

smalltomato 發表於 November 6, 2004 10:45 AM
[ 20 : 靜態鏈結 ]

To smalltomato:

It's licensed under CC

Jedi 發表於 November 6, 2004 11:15 AM
[ 21 : 靜態鏈結 ]

讲的比较到位

jokname 發表於 January 6, 2006 04:16 PM
[ 22 : 靜態鏈結 ]

感謝,獲益良多

尼森網頁設計 發表於 July 19, 2007 09:40 AM
[ 23 : 靜態鏈結 ]

jedi:
感謝你在臺師大圖書館的精采演講及無私的分享!回程之後還瀏覽blog,果然很棒!也邀你至我的部落格留言:可否建議或還可再加何種功能?謝謝部落格之父,也祝天天開心

Alice liao 發表於 July 23, 2007 03:27 PM
給我迴響吧!
個人資訊








是否記住個人資訊?



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





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