明字藏眼前

甚麼時候需要把想給人看的東西藏起來?

  1. 劇情透露(又稱 Spoiler,捏他)
  2. 問題答案(猜謎,IQ 題之類)
  3. 令人不安,容易惹起誤會或讓人看穿「原來你是色胚子」的文章或圖片(NSFW)

坊間流行的解決辦法有好幾種,詳列如下:

  1. 排版分頁
  2. 基本上這是常用的方法之一。透過超連結,作者可以將不想讓人一目了然的項目放在另一個分頁內,有需要的瀏覽者可自行按連結進入觀看。這個方法應該是眾多方法裡比較直接,要求技術也相對較低。此外,網頁排版系統如 WordPress 的 <!- – more – -> 也有同等效用。

    • 優點:簡單,懂一點網頁技巧便可做到。
    • 缺點:沒排版系統比較麻煩,作者需略懂網頁編寫語言,自己建立網頁控制。另外,僅適用於能自主操控排版的網頁使用,其他地方如新聞組和討論區便很難做到超連結的效果。
  3. 警告標示
  4. 這亦是非常簡單直接的方法。只要作者在文章標題或敏感文章前加上如 [NSFW] 或 [非喜勿進] 等標籤或警告字句,即可警惕讀者,避免誤闖。這方法同時可以和其他方法搭配使用,增強讀者的警覺性。

    • 優點:這應該是所有方法最簡單的。應用性也很廣。
    • 缺點:僅加上標示阻嚇力比較少,很難防止誤闖的讀者。而且,加上標籤會無差別劃分整篇文章,僅想令文章部份不可以一眼看到底的話這方法就辦不到了。而且,一般網頁討論區都不太刻意標示回應的標題,很多時候讀者都會跳過標題直接閱讀回應。
  5. 留白
  6. 留白則較常用於新聞組等傳統媒體上。這方法是指在敏感的文章之前大量加入換行符號 (\n),作者可以透過長壓回車鍵(Enter)做到。雖說較常用於新聞組上,但此方法也適用於網頁上。

    • 優點:簡單方便,應用層面同樣廣,阻嚇力也較警告字句為佳。
    • 缺點:大量佔用版面空間,很可能被誤以為在破壞版面(所謂「洗版」)。而且,文章的隱藏能力取決於解析度,瀏覽器設定等等不能由作者控制的因素。此外,一些層疊式的排版架構如網頁討論區和網誌,瀏覽者可能會因為要避免看見敏感的內容而錯過了敏感文章以下其他安全的資訊。
  7. 保護色
  8. 保護色的原理就好像變色龍一樣,作者將敏感文字的顏色設定成接近網頁底色或跟底色完全相同,達致保護效果。

    • 優點:操作簡單,只要讀者用鼠標一拉一劃,整篇文章即時浮現於眼前。感覺就像用魔術墨水寫字一樣。而且,不會額外佔用空間,阻嚇力也很高,畢竟會不小心選擇起來的機會很微。
    • 缺點:需版面配合。例如網頁底色是白色,便要選擇白色作字的顏色,如此類推。此衍生出一個問題﹐就是同一段內容,顯示的地方可能也有幾個。好像原網頁底色是藍色,放到 Google Reader 或手機上顯示,文字便變得很顯眼了(況且,在手機上也沒辦法highlight 吧)。另外,使用這種方法也得要軟件支援,有些討論區容許發文者自訂格式的程度比較少,作者也無發使用這種方法。又,這方法也僅容於文字,對圖片一類非能透過調整顏色的內容隱藏的內容也無用武之地。
  9. JavaScript 主動隱藏
  10. 有某些網站會利用 JavaScript 將某段文字隱藏,原理是改變容器(例:div)的 CSS display 或 visibility 屬性,讓其達到隱身效果。讀者有需要閱讀的時候可以點擊附近的顯示按鈕,轉變容器 CSS 屬性讓內容重現。

    • 優點:操作簡單,只要一按。而且因應 JavaScript 的複雜程度,更可以加入特效等 eye candy,同時不佔據任何版面空間。因為是容器關係,隱藏內容也不受限制,不管是 Flash 是圖還是 Java Applet,只要 HTML 支援就可以藏起來。
    • 缺點:應用只限網頁,而且還需排版軟件或討論區系統支援。此外,瀏覽器也是一種制肘。要支援這種隱藏方式,瀏覽器必須啟動或支援 JavaScript,而且一定要直接觀看。透過如 Google Reader 等會篩出 JavaScript 的網站也會讓隱藏文章無所遁形。
  11. 編碼加密
  12. 所謂加密,其目的並不是只讓特定的人讀到,而僅僅是令內文不能一眼明瞭,減低誤讀的可能性。其實此方法存在已久,最著名的就是 ROT13,將 13 個位後英文字母互換,眼睛多靈一看也只會看見一堆怪獸。可惜此法僅支援英文,對其他語言如中文就沒辦法了。後來互聯網上的華語世界開始逢勃,陸續有人開始研製不同的加密方法,諸如 DNA (以 ACTG 四字編碼),直條線,摩斯密碼等等。此外,將劇透以隱喻寫成謎語也是常見手法之一。

    • 優點:到處可用。而且解讀過程對讀者來說也是一種樂趣。
    • 缺點:難度過高可能會令人一時摸不著頭腦。而且,僅限於文字編碼。

就簡易和普及度來說,似乎編碼最佳。但編碼法不可能隱藏圖片(除非使用符號拼砌圖畫),也只有加上警告字句,留白,JavaScript 方法方可做到。為安全計,建議這幾種方法可配合運用,例如警告 + 留白,警告 + JavaScript 等等。

我恨死了你不當我是人

Captcha!

我最討厭填 Captcha。而且是難看到死的 Captcha。十次裏有八次會填錯的 Captcha。

Captcha 本來是阻擋機器人的工具。但是不知怎樣近來的 Captcha 越搞越複雜,要不是字跟底色相近,便是選上難以判斷的字,好像大階和小階相近的 W,C,O,P,還有 0 和 O、1和 l。單這樣就夠難看了,那個白痴設計還生怕你太聰明,視力太好,換上不同字體,再把字扭來扭去,最後成了編在搜尋頁面上的象形文字魔咒。

前天入手 Half-Life Orange Box,因為遇到一點小問題找支援系統無果,決定跑到官方論譠找資料。怎知道論譠搜尋奇怪的嚴格,就連找舊文章也要解決 Captcha。試了十多次只有三次成功猜中,卻將我導到一塊白屏… 結果還是要乖乖把個人資料奉上。

至於 Team Fortress 2 的試玩後感,也許早上再寫。

為藝術而犧牲

某公共交通公司的網站真叫人火大。我只是想找一下路線,規劃一下明天應該要乘甚麼,怎樣順利的到達試場去。然而一鍵進網址,沒有簡單的連結列,反倒迫人家看一個想很炫但又不知所云的 Flash 短片。究竟你們是為我們這些瀏覽者著想,還是只是想滿足自己腦袋內那些不著天際的藝術細胞呢?

我從來是一個很講實用的用家。實用永遠排第一,美感只在其次。在實用之餘又保留一點美感,那當然最好,MacOS X 是一個很好的例子。犧牲實用性,只為了表達美感不正是「要靚唔要命」嗎?

話說回來,這個網站真的沒考慮我瀏覽器的小命。看,拜這個網站所賜,現在整個瀏覽器又沒有反應了。

網頁設計

首先,本文說的是設計,不是技巧。技巧在坊間多種註明「網頁設計」書籍上均會提及,反而,真正的設計守則往往會被忽略。技巧,便是裝修課程;設計,是編排 和顯示內容的方法。設計有甚麼重要性?設計好的網頁,會吸引讀者經常來訪,甚至會獲得來訪者發自內心的讚歎。反之,設計差的網頁,來訪者可能會不待網頁顯 示完成便把瀏覽器關掉。

至於怎樣才是一個好設計呢?設計最主要圍繞著人體工學(Human Engineering) 的原則,要使用者覺得方便,舒服就可以。雖然聽起來很容易,互聯網上卻有不少網頁做不到這一點。這是由於設計者以自己的角度出發去設計,但卻毫不理會其餘 的來訪者。設計者們沒想到,自己不多會看自己的網頁,看得最多的卻是別人啊!

以下是設計網頁者通常犯的幾個錯誤:

1. 撞色和用色
很 多人以為其他人能和自己一樣能清楚地從黃色裏分辨出粉紅色,青色分辨出粉藍色等等。不知道是設計者為了照顧色盲的瀏覽者,還是自己患上色盲呢?至於用色 方便,這類設計者也有很獨特的一套。他們喜歡 colourful,便同時間在網頁用上十多種顏色,名符其實令人感到「目不睱給」(太傷眼,我懶得看)。

2. 底色花紋
這種設計更甚於以上提過的設計。有人會把某一幅小圖(例如明星相)作背景並列顯示,效果有如昆蟲的複眼,同一幅圖出現過百次,而網頁上的字也因而看不清楚。

3. 音樂和影片
這個也不算是很嚴重的問題,只是在自己聽音樂的時候,突然間來首亂入歌有點不爽吧。而且,不能停,也不能不下載,很不民主啊。

4. Javascript 和 Popup
Javascript 本身不是不好,只是甚麼時候也來兩三個 alert(),感覺有點像中毒,很擾人!有時彈出視窗更為可惡,但就沒那麼幸運了。他們大多數給防彈出視窗管理程式吃掉,來訪者也就看不到設計者給他們的重要訊息。

5. 圖片
有 好些網頁設計者會貪一時方便,貼幅留有底色,跟網頁底色格格不入。我想是提醒其他來訪者那圖片是從其他網頁偷回來吧。而某些網頁會給來訪者「叉燒包」 (找不到圖片),這個我想設計者也不想留下的,只不過沒小心檢查全部連結自己看一次,才要來訪者吃個包…… 此外,有些設計者為了想使用者對自己設計的網頁留下深刻印象,便放了十多幅大圖片在同一頁顯示出來。這對我來說實在太深刻,因為我得謹記不要再到同一個網 址,以免系統資源給耗盡。

6. Frame
網頁表框其實頗方便的,可讓來訪者看右邊內容的同時可以把左邊或上面的 navigation 停留在同一個位置。可是,我想有人過為濫用這個好處,一頁版面同時有幾個 frame,當然最後適得其反。

7. 橫捲動
事實上,人類較喜歡由上到下看東西,所以報紙文章左到右的寬度不會超越一個人的視野。但是,某些人卻沒留意到自己網頁的內容可以橫跨人家的螢幕……

大概寫到這裏,再想到便開始寫另一篇新的。