◎輸入組
◎校對組
◎網路組
◎資訊組
◎發行組
◎研發組
虛幻與真實——佛教網際網路專題之一
「由眼球追蹤分析談起，簡介網頁設計的幾個概念」 李志強 ◎眼球追蹤分析 在今年五月間，一份由史丹福大學及 Poynter學院所發表的論文(*1)顯示超過四分之三的網頁瀏覽者最先注意的是首頁上的文字，而只有兩成多的瀏覽者先瀏覽網頁上的圖片，這項研究的結論造成了許多人的震驚，因為這和對傳統印刷品的眼球追蹤研究結果相反：傳統的印刷品讀者傾向先看圖片，然後才轉到文字閱讀。 雖然研究的主要對象是新聞站台，但是仍提供我們許多的思考空間，而最重要的發現，也許就是指出踏實有用的文字對網上讀者最具吸引力，照片與圖畫跟文字相比，則相差甚遠。 在這份研究上網者眼球運動軌跡的分析報告中指出，讀者瀏覽網頁的第一眼中，百分之七十八是落在文字上，只有百分之二十二是落在圖片或是其他型式的呈現上。而也有大部份第一眼看圖片的讀者隨即轉向搜尋文字資訊。 一般來說，讀者會先瀏覽標題，頭條新聞及相關的結論。而且常常直到第二次是第三次造訪(visit)網頁時，才會仔細瀏覽圖片的內容。而實驗中以寬頻的網路連接，因此排除了因下載速度而造成的差異。 再則，簡潔且切中要點的標題，也是吸引目光的焦點之一，許多的讀者對於此類的標題感到讚賞，而好的導讀文章或接引介面也會大大的影響到內文的點閱機會。 第三，讀者習於只瀏覽短篇的摘要，而不直接瀏覽全文。而瀏覽全文時一般只會瀏覽其中的四分之三的內容。然而如果和一般印刷品比較起來，這個數字確是十分的驚人，因為一般的印刷品僅有20%-25%文稿內的文字被閱讀。(*2) 第四、適度的使用照片是最佳的策略，而整合在文稿中或是使用互動式的圖畫則能達到較好的效果。如果標題放在圖片之中，則有被忽略的可能。另外還有一點值得注意的，就是使用者懂得捲動畫面去尋找有趣的東西，然而適當的導讀則是吸引讀者最好的利器。 最後，研究報告中也指出，讀者經常開啟兩個以上的網頁，並交互瀏覽。(Interlaced browsing) 其中一部份的原因，自然是為了充份利用上網的時間，然而這也表示讀者可同時在不同的網站中瀏覽以尋求更豐富的資訊，這一點則是傳統印刷品所不及的。
一、信任(Trust)： 對於非新聞性的站台而言，信任相形之下較為重要。因此提升可信度，減少行話、不必要的標語和過份的商業氣息變得較為重要。 二、瀏覽時間(Time)： 大部份的讀者會花在瀏覽其他站台的時間可能較新聞站台為少。因此更清楚的標題顯得十分重要。 三、瀏覽內容(Words)： 一般說來，除了刊物型的網頁之外，讀者們較不習於瀏覽長篇大論，新聞站台亦是如此，但是其他的站台相對的讀者瀏覽的更少。 由於閱讀習慣使然，事實上這項研究的結果在非新聞性的站台上亦可適用。雖然新聞報導的描述方式(倒金字塔型)和一般文章的內容不盡相同，但是網路瀏覽的習慣分析卻能帶給我們不同的思考方向。不過網站內容性質及上網讀者的行為模式，事實上將會是網頁設計的重要依循，這一點筆者將留在後面再談。 ◎好的網頁設計 什麼是「好的網頁設計」呢? 這個問題也許見仁見智，筆者並不願為網頁設計定一個規範，事實上這是不可能也做不到的。如果反過來，提出網頁設計上可能的錯誤也許較為簡單，但是在這兒筆者願就個人淺見對「好的網頁設計」提出十項簡單的大原則供大家參考： 一、時間即客戶 Time and Trade Wait No Man! 【下載時間】 快捷而不受時空環境的限制，是網際網路的主要特性之一。一個好的網站必需顧及網站本身及使用者的瀏覽效率，因此伺服器的速度、網頁下載的速度、網頁呈現的速度等等是非常重要的指標。一個好的網頁設計，原則上會依循30秒40K的限制，但是首頁的要求似乎更加嚴格。 加速下載的時間，不但要考量頻寬及檔案的大小，也要同時考量上站的人數。以Yahoo為例，同一時間內有許多來自世界各地的人連上網路查詢，因此如何控制每一頁的大小，如何減少伺服器的負擔便相形重要。之前台灣曾發生新網站正式對外公開就因上網人數過多而當機的事情，雖說這是人氣旺盛所造成，但也顯示出網站設計時未妥善考量到流量的問題。 一個好的網站在設計之初便應考量流量的問題，並且妥善的管理伺服器與網頁。 【更新】 除了連結的時間之外，資料的更新也是非常重要的一環。好的網站會保持最新的狀態，而不會造成「不生不滅」的情形。過期的網頁資料常常會令讀者沮喪，尤其是以每日更新為號召的站台更是如此，而時效性也常常是一個新聞網站能否成功的關鍵之一。 對一般的網站來說，讓使用者一上站就知道更新了什麼，也是很重要的事情。 【快速的回應】 除了更新要快，下載要快之外，如果有任何的客戶服務或是商務咨詢，回應也應該保持快速。如果讀者投書回應如同石沈大海，網站的評價便會受到傷害。在後段文章之中，我們會提到讀者也是參與網站的重要一環。 【快速的維護】 除了上述三項之外，一個好的網站也必需有快速且完善的維護機制。尤其是流量大且具高商業價值的站台，如果當機一分鐘，損失將是無以計量的。很不幸的，這樣的站台通常也是駭客們攻擊的主要目標。 由於讀者有許多的選擇性，也不見得時常上站，有時因為一時的主機無法正常連結，便會失去他們。尤其是正在執行網際商務行為時，如果發生當機的事件，傷害將會更加嚴重。 維護，是網站最重要的課題。 二、顯要的提示 【簡要的標題】 前文提及，讀者瀏覽時，首要的重點將是充滿資訊的文字，尤其以簡單扼要的標題、結論與介紹最引起讀者的興趣，圖檔在此扮演著較弱的角色(雖是這樣說，但並非表示圖檔沒有作用，有時圖片具有非常大的價值)。 讀者在五秒鐘之內便可決定是否離開(one click away)，因此如何留住讀者的視線將是網頁(尤其是首頁)設計上的重要前提。 【以導讀代替全文】 試著不要一開始就丟一大堆的資料給讀者，利用導讀的方式將長篇文章或是產品做一個簡介，試著在網站中放上網站的導覽，試著將長編的產品介紹分成幾個次項，以超連結的方式以避免讀者花費太多的時間在不必要的主題之上。 【加上提示文字】 一般在應用程式設計時，設計者為了讓使用者能更有效的運用，會加上提示文字，甚至What's this?的輔助說明。而網頁設計也應具有同樣的功能，一般來說，使用Img 標記中的Alt 屬性，及link標記中的title 屬性，便能達到類似Tooltip 的功能。 【適當的連結標示】 當我們在閱讀本文的時候，遇到許多較深的名詞或是技術，或是其他的資訊時，適當的加上超連結，有助於使用者進一步的研究。等等，這原本不就是HyperText 的用意嗎? 沒錯，但是偶爾我們會看到一大段文字均有超連結，但因斷行或其他的原因，使人分不清究竟是一個連結或是好幾個不同的連結。我們可視超連結為一種特殊的標點符號，在使用上清楚的標明有助於理解和閱覽。 【減少不必要的遮掩】 由於網頁科技與瀏覽器的發展，許多人利用JavaScript等技術製作了許多炫爛的效果，然而事實上這些效果有時卻會對瀏覽造成干擾。有些網站喜歡將游標設定成動畫圖檔，或是在游標之後跟隨一長串的動態文字，如果這些效果並無法增加與使用者的互動，筆者建議儘量不要使用。尤其是在閱讀本文時，常常會造成遮住文章的情況，而使得讀者必需進一步的移動游標，有時幌動過於厲害，也會造成讀者的分神與不適。 三、有效的連結 【當連結失效時】 有的時候網站的連結會失效，例如檔案不存在，連結的站台無法連結上等等，這都會讓讀者平白往返於網頁之間而造成時間的浪費，因此有效的連結將是讀者評估一個站台的重要指標之一。 目前有許多工具可以替我們檢查是否有失效的連結存在，通常發生這一類的問題，常是設計時不注意所導致(例如使用絕對位址)，或是連結到其他的站台所引起。前者是設計階段便可避免的，而後者則可用技術性的方法減少沮喪，例如提供不同的下載點，不同的鏡像站或是提供較多的介紹。 【減少『建構中的網頁』】 怎麼又是under construction? 相信讀者們也常常有這樣的經驗，許多的連結點選進去，竟出現建構中的字樣，這是一個常見的問題，卻不常發生在大的網站上。如果真的有必要放置尚未完成的資訊標題在網頁上，筆者建議此一標題不要設置超連結，並直接的在文字旁標示尚在建構中，以免讓讀者白【連】一場。 【回到首頁】 在每一頁固定的地方提供回到首頁(或上一頁)的連結，這也許看起來不是一件重要的事情，尤其是在使用frame的網頁中，我們可以用其他的frame來達到這個目的，但事實上這件事卻很重要。 我們並非只是單純的考慮由首頁連結進來的讀者，還需要顧及使用書籤、瀏覽記錄以及由各式搜尋站台或是其他友站連結進來的讀者們。另外，當讀者深入了好幾層的連結之後，以最便利的方式回到起點，便相形的重要。 提供首頁連結，將是避免讀者迷路的好方法。 然而對於使用Frame 的問題，雖然目前的瀏覽器普遍均支援Frame 的功能，但是對於Bookmark等等仍會造成一些小小的困擾，另外也可能會造成連結到內頁有關侵權的問題，筆者建議審慎的評估使用。 【清楚的架構】 一個好的網站會有清楚的架構，讓使用者在瀏覽之際不至於迷路或是摸不著分向，因此適當的分類、標示與連結便成為不可或缺了。如果有一個連結的標示是「聽雨軒」，您會做何感想呢? 清楚的架構是讓讀者易於徜徉在網站豐富資源最佳的嚮導。 四、閱讀的慣性 網際網路的讀者習慣性定律： 「讀者花費了絕大多數的時間在其他的網站上，因此他們會預期你的網站也是如此。」~~Jakob Nielsen(*4) 【延續一般性規範】 延續一般性的規範，意指儘可能的依循大家所習慣的瀏覽模式。例如在超連結底下加上底線，用藍色表示未拜訪的連結等等。筆者曾為某佛教單位設計網頁時，發生師父找不到連結的糗事。另外，瀏覽器是否支援，或是否需要額外的外掛程式，也是需要考量到的一點。 如果一個網站的首頁，所有的連結都放在一個flash 檔裡，這就表示設計者放棄了尚未安裝相關支援程式的讀者。 【閱讀的舒適性】 電腦螢幕的解析度較紙本或是一般的印刷品為差，因此如何提供讀者舒適的閱覽環境，目前仍是許多專家在努力的事情。在微軟提出ClearType 的方式，提供電子書字型的解決方案之後，Adobe 也提出了CoolType的方案，明年可望能與大家見面。不過就筆者所知，目前這些方案似乎並不適用於中文。(*5)在這些方案尚未進一步發展之際，我們難道就束手無策了嗎? 當然不是。 傳統上我們可以用調和的背景及前景色來減少對讀者的衝擊，或是調整字距來增加文字辨識的解析度。例如之前常常見到的中文字元間加半型空白的方案，或是用紅色來標示重大的標題等等。(紅色是許多動物的警戒色，是非常適合用以引人注目的顏色。) 而排版上，儘量減少排出視窗的範圍之外而需要移動橫向的捲軸，並且留意在不同的視窗大小或是螢幕解析度下的差別，例如表格的寬度使用相對的百分比而不使用絕對的長度等等。 如何提升閱讀的舒適性是一個很大的課題，現在利用CSS 的技術已經能有效的呈現出不同的排版格式。另外像是首頁適度的留白，而不要放滿許多的資料，也是十分有效的方式。縮排的應用，表格與條列等等，都能讓閱讀更有效率。 當然，好的文章撰寫是提升閱讀舒適性的根本作法之一。 【回到上一頁】 網際網路的閱讀習慣，傳統印刷品有很大的不同，尤其是網際網路的連結提供了許多的可能性。為了方便使用者往返於不同的網頁之間，儘量的避免無法回到上頁的情況發生。(*6) 什麼情況會造成無法回到上一頁呢? 一、開新視窗 其中開啟新視窗有時候有其必要性，但就清除快取區的做法，就讓筆者無法理解，難道留住讀者的方法，就只能阻斷他人的退路嗎? 【沿用電腦的使用習慣】 除了沿用網路的習慣與紙本的習慣之外，電腦亦有其特別的使用習慣。例如，當游標變成手指時，我們會知道這是一個可點選的連結，當游標變成沙漏時，我們知道需要花費一些時間。一個好的網站，將會沿用這些習慣。 【輔助性的連結】 這兒稱為輔助性的連結，是指像【回到頁首】或是【下一主題】等等的連結，有助於讀者瀏覽。尤其是在長篇的全文之中，或是連續性或相關性的主題時，提供這些連結對讀者有很大的幫助。 五、正確與信用 【正確的內容】 正確的內容指的不僅是文稿的內容，也同時指HTML文件的內容。 網路的便利性讓我們可以很快的取得資料，但也經常流傳著許許多多的謠言，一個好的網站會避免刊登不實的言論，並負責其社會監督的責任。然而這個要求對於使用Spider抓取網頁內容的部份搜尋引擎而言，可能無法很容易的執行檢核，因此需要建立良好的回饋機制，以減少這方面造成的障礙。 另外，如果網頁刊登一則明日大拍賣的消息，但是拍賣卻在下個星期才舉行，這個網站的下場大家可想而知。因此提供正確的訊息是網站內容中必備的要件。 再則，除了內容正確，訊息無誤之外，網頁的本身也必需是正確的。一個因發生JavaScript執行錯誤的網頁，可能會使得讀者離開，畢竟在您的網站之外，讀者還有許許多多的網站可以瀏覽。而標記的錯誤也可能造成亂碼，因此好的網頁設計必需要詳細的檢查以避免這類錯誤發生。 【信用至上】 不承諾可能無法實踐的事情。 這句話也許該反過來說，只承諾可實踐的事情。 所謂的信用，即是完成對使用者的承諾，尤其對電子商務站台最為重要。筆者曾在某站台提供優惠的時限裡上網訂閱雜誌，然而確無法正確的完成信用卡交易。於是筆者打算利用其他的方式付款，並寄信件給站方的服務人員，結果連續好幾封信都石沈大海，導致優惠期限過期。 對電子商務沒有信心是普及電子商務所面臨的最大問題之一。(*7) 【網路倫理】 另外，目前流行的電子報訂閱系統，也曾經因為網路垃圾信件的影響，造成讀者不願意訂閱，深怕因為訂閱此類的電子報而將個人的資料外流，產生不必要的困擾。由此可見，信心仍在電子商務的發展中扮演重要的一環。而尊重網路倫理，則是建立信用及建全網際商務環境的重要基礎。 六、搜尋與保存 【當資料量過大時】 當讀者無法很輕易的在網站上找到所需要的資訊，這時就該考慮是否要建立檢索系統。通常的建議是當網站大於一百頁時，便該建立搜尋的系統，但是這個系統並非是一般人可以建置。幸好目前許多提供電子商務的站台均設有相關的系統可供顧客租用。 如果無法提供檢索功能，也應該設法將內容分門別類，以便利讀者瀏覽。以筆者常常瀏覽的網站FreeVBCode為例(*8)，您可檢索網頁內容，並提供程式碼內容分類、依性質分類(如最新，最熱門分類)，如果搜尋不到，亦提供連結到其他程式庫的分類，同時也提供同一作者不同作品的分類。每個月更會選出當月最佳的程式與作者，這就是最好的例子。讀者可藉由這些資訊快速的找到需要的程式，當然，這些尚無法保證一定很容易找到。 搜尋或是檢索系統本身也是一門很大的學問，就以佛經的檢索而言，如何處理跨版本、跨標記檢索，或是取代同義字或是同義辭，乃至進階的模糊搜尋等等，都超出本文討論的範圍。 【過去式的價值】 資料應該保存多久呢? 網際網路的快速發展，似乎讓我們無法有足夠的時間回顧過去，而人們利用網際網路的習慣也漸漸的失去耐性。以BBS 為例，最常發生令人困擾的事情就是炒冷飯。常常有些問題被一而再再而三的提出來，甚至人們不會主動的去查閱精華區或是FAQ ，人們希望能快速的找到所需要的答案。 如果有一個好的搜尋引擎，也許便可減少這個問題的發生，而如何有效的撿選過去的資料加以保存，則是另一個值得關注的課題。 目前有少數的機構投注大量的財力務力人力從事過去百年間報紙的電子化，不過這是另外一件重大的工程，而非本文討論的主題。 【備份】 定期並時常做備份是一個好的站台必需做的工作，就算是家用電腦也需定期整理並製作重要的備份。通常忽略了這件事情可能要付出重大的代價，例如遺失重要的客戶資料，或是花了許久建立的統計資訊必需重新來過。 當讀者再次造訪時，如果得再花一次時間重新輸入已經註冊的資料，會造成客服部門不小的壓力呢! 七、在文字之外 網際網路非但可以傳遞訊息，更在網路上發展出了許許多多的行為，如網際商務，網際教學等等。而在WWW發展之後，更使得網路由單純的文字或是位元的傳送，更進一步支援影音多媒體。甚至有人預測在將來會出現網路家庭、虛擬愛人等等。(事實上有許多已經成為事實，甚至連虛擬性愛都已出現，實在是令人驚訝。筆者是在閱讀某部日本漫畫時看到類似的概念，不過該漫畫主要是討論神祕學。) 就本文最前面所提及的介紹，眼球運動分析的結果，讀者在閱讀新聞網站時傾向先看文字，至這並不表示除了文字之外都不重要。其他的許多呈現方式仍值得我們進一步的探討。 【用的多不如用的少，用的少不如用得好】 用這句話來形容圖檔在網頁中扮演的角色再適合不過。如果說螢幕的解析度在72dpi 左右，一個用於報紙上所拍攝的清晰照片，在網頁中可能要佔據相當大的版面，如果縮小可能看不清楚，如果裁剪可能讓一群人的合照只剩下一個人的頭。因此在處理上網頁上用的圖片，需要經過撿擇並加工處理。 使用圖片的時機，最好能達到和本文緊密結合(指的是內容相關性)，並且具有醒目的效果為宜。 【大圖片與小圖片】 當然，對於專門提供圖片資料的站台，這樣說有失公允，許多提供圖片的站台甚至提供優良的圖片檢索引擎。不過有幾點建議可以提供大家參考： 第一，就是加註說明。不但要加註取代文字的說明，最好也加入本文的說明，就如同許多書本上註明圖片內容一樣。(如圖一：大正藏封面) 第二，如同以導覽簡介長篇文章一般，以簡圖或小圖加上連結的方式來顯示大圖檔或是較多的圖檔。 第三，提供大量圖片的站台，如能提供檢索或是分類，將能減少使用者的負擔。 另外，請記得不要在網頁上縮小圖檔的顯示區域，因為雖然圖檔看起來較小，但是下載的時間仍然沒有改變，較好的做法是另外做一個小圖檔。(*9)而利用Gif 檔來呈現，也可以考慮減少所用的色盤數目。法鼓山全球資訊網的 Logo就是一個很好的例子(*10)。 【互動】 互動是另一項網站的重點，如何提供互動，也決定了一個網站是否能夠長久的經營。 所謂的互動並非單指提供網際商務、互動性的網路遊戲或是聊天室，而是泛指網站與讀者之間的互動，讀者與讀者之間乃至於網站與網站之間的互動。 簡單的互動方式，如提供留言版以接受讀者的回饋、提供讀者上傳資料、讀者評分、問卷調查及網站訊息及連結交換等等。 【惱人的廣告視窗】 許多的免費站台要求網站需加設彈出式的廣告視窗，而這也造成了使用者的不便，好的網站應儘量減少這類的視窗。 【其他資源】 除了文字、圖檔和音效之外，還有許多有趣的技術，如Flash 動畫檔，虛擬實境，線上播放等等，除非您是專門提供這些資訊的站台，不然建議您審慎的使用這類資源。 最近國內的房屋仲介業者打算以360 度的環繞影像來介紹房屋，這對於了解房屋的環境，提供了重要的資訊，但是如果您想介紹自己，也許使用XYZ三個方向的照片就足夠了。 八、額外的服務? 【E-Mail與電子報】 也許您聽過這樣一個不成文的規定，就是在網站的首頁，建議放置連絡人的電子郵件信箱連結。這代表著讀者可以很快的找到網頁的負責人。 網站並非一定需要提供額外的服務，然而目前提供電子報發送似乎已經成為一個新的趨勢。 當網站更新時，提供讀者新的訊息，當網站有活動時，通知讀者相關的內容……… 然而面對這麼多的電子報，讀者該如何接受呢? 筆者建議，如果在能力所及的範圍，對於這一類的訊息發送，可提供多樣的選擇。例如當亞馬遜書店有新書的消息時，會提供喜歡這位作者的讀者相關的資訊，如此一來，讀者便可以快速的得到他所想要知道的消息，而無需花費時間來判斷內容是否是讀者所需要的。 【適當的放置廣告】 廣告一直是讓人煩惱的。網站需要靠廣告來增加收入，但是如何讓讀者感覺到網站並非利用他們當做賺錢的工具，則並非容易的事。如果想要增加廣告的點選率，那麼如何放置廣告就更加的教人費心。 廣告設計的本身就是一項值得注意的事情，在眼球運動分析的報導中指出，在先瀏覽圖檔的讀者之中，先瀏覽橫幅式廣告占有不小的比例，這代表此類廣告確時有吸引人的效果，然而報告中也建議在輪播廣告的動畫之中不要忘了每個頁面最好都有廣告商的標題，以免讀者忽略。 另外，如果一個網頁中放置了十個廣告，並且佔據了主要的頁面中央，這便會造成讀者的困擾而減低了再次點閱的機會。建議將廣告放在固定的地方，並減少廣告在網頁上占據的篇幅。畢竟讀者並非是上站來找廣告的。您可觀察許多成功的大型網站，應能發現放置廣告的模式。 九、安全性與著作權 【安全性】 除了前文提及有關電子商務交易的安全性之外，網站本身的安全性也值得重視。除了駭客攻擊之外，病毒也是需要防範的對象。 筆者的一位作家朋友，一次因為誤開了一封帶有E-mail病毒的信件，而造成了他的讀者群和親朋好友中電腦病毒的慘狀，甚至有些網站負責人因為開了他的信件使得網站當機。 一個好的網站，對於安全性應當十分重視，當然這也是一個十分專業的問題。不過請記得，不要在網站中提供含有電腦病毒的檔案哦。 【著作權】 尊重著作權應是網頁設計者基本的素養，而網站的連結也應避免不必要的困擾。如果連結的資料並非是本站所提供，在連結時請注明出處，在取得對方同意之前，避免直接連結內頁在框架之中。 如果您有使用Frame 來設計網頁，開啟新視窗是一個可行的辦法。 十、讀者是誰? 網頁透過伺服器，網際網路(有線無線)及瀏覽器，扮演著網站資訊與讀者之間溝通的橋樑。 「了解顧客真正要的，通常顧客不曉得他要啥，直到你把成果給他，他才知道你沒有給他他要的。換句話說，顧客祇知道他不要什麼，但不清楚他真正要什麼。沒有一個好的定義，將需要大量的維護。所以做定義的人要了解什麼需要做，做出來像什麼。幸好諾亞知道，沒有在下大雨時，還在努力建造。」~~摘譯自MSDN About.com 的成功，也許可以顯示出導讀的威力。以瀏覽搜尋引擎查詢資訊的人們為例，可能大多數的人對於查詢到的一大堆網站列表並不熟悉，如何進一步的讓查詢者了解，或是進一步的了解查詢者的需求，About.com的模式均是一個很好的範例。 然而在此筆者願意提出一點，網頁設計的目的，是在於充分的讓資訊與讀者達到溝通，這應該是網頁設計的第一要件，也是網頁設計完成前最後一項審視的重點。 所謂好的網站，不外是成功的扮演資訊與讀者的溝溝橋樑。 「有無數的方法可以改善網站的基本結構，這些方法需以網站讀者的行為模式與網站的資料內容為分析基礎。」~~ Studio Archetype公司(*11) Studio Archetype公司位於美國舊金山，以替世界級的大公司設計網站聞名，其成功的主要原因，就是在設計網站前，會先和客戶廣泛討論，以「定義」這個網站，然後才著手設計，針對每個公司的性質，服務及客戶群加以規劃。 日前筆者瀏覽佛教圖書館館訊的報告中，作家王尚智先生提到所謂「讀者研究」的相關事項，筆者深有同感。(*12) 事實上了解讀者並加以分析，對於多數的網站能提供相當多的改善和助益。 「最重要的，每一個網際網路的服務均需針對他們特定的使用者及需求進行工作分析。你有許多種方法可以組合各式各樣標準化的使用者界面，但是好的站台會以讀者所希望切入的方式設計。」(*13) 筆者願用上述這段話來定義好的站台和一般的站台的差別。其實對於一個新聞站台而言，提供大量即時且正確的資訊，讓讀者充份的了解是主要的目的，因此讀者習於先瀏覽重點文字就成為網頁設計不得不考量的重點。但這並不表示圖檔和其他的方式呈現就是不好的，這必需依是否能有效的達成溝通而定。 以上林林總總的提出十項原則，其實說穿了也就只有一項：所謂好的網站，不外是能更有效的扮演資訊與讀者的溝溝橋樑。 ◎優良的網站範例 就以上所提，有沒有網站是符合優良網頁設計呢? 其實這一類的網站絕不在少數，但是如果和所有的網站個數相比，可能比例不高。以下介紹兩個「經典」站台和大家分享： Yahoo Full Coverage Yahoo的設計，雖說外表感覺平凡無奇，但是卻是十分優良的設計，尤其是用實用性的觀點來觀察。當然，我們不會以一個網站賺不賺錢為根據，但是無可否認的，一個賺錢的網站，想必有其獨到之處。 如果有一句話能形容Yahoo 的成功之處，那就是Yahoo 盡情的發揮了網際網路的優點，取代去對抗其缺點。我們可由Yahoo 每個網頁的大小、下載的速度、結構化的設計、顯示出關鍵辭的位置及不斷的連結、連結、連結，就可以看出Yahoo 符合了讀者來到Yahoo 所想達到的：快速的搜尋相關的連結。 當然，也有一些事情漸漸的造成困擾，例如許多好的站台在Yahoo 找不到，站台並沒有一個很好的等級評估，無論是由點選率或是交互引用的次數，或是提供主題的導覽等等，而這些功能在其他的站台上可以找得到。 Yahoo 的設計也許在外觀看起來不美麗，但卻是發揮網際網路效益最佳的範例之一。(*14) Guardian Unlimited 二○○○年 EPpy 新聞網站大賽最佳設計獎 這個網站的設計，無疑令人賞心悅目。此站出自名設計家 Neville Brody與 Roger Black 的精心製作，在顏色運用、版面配置、網站規畫、分類層級、趣味的內容與清晰的架構上，創造了另一種典範。 新聞網站的設計，和檢索網站不盡相同，目的是讓讀者能夠很容易的找到有興趣的題目，了解最新的消息，因此瀏覽的環境自然比Yahoo 此類站台更重要。而合適的分類與導覽則是另外一個成功的重點。(*15) ◎一切才正要開始 我們應該抱著什麼樣的心情來面對網頁設計呢? 是我能提供什麼? 或是我想讓別人知道什麼? 還是讀者想看什麼? 每一種不同的網站有不同的需求，連接著不同的人、事、物及環境，如果真的有一把放諸天下皆準的尺，那麼不會有那麼多的網站設計公司，也不會有今日蓬勃發展的網際網路環境。 使用者的習慣隨著時代正在演變，昨日不好的網頁不保證今日依然不受歡迎，最顯著的例子就是讀者已經普遍接受移動捲軸以尋找更多的資訊。而通訊媒介的發展，伺服器及瀏覽器的進步，均提供了更多的可能性。然而無論如何，我們應該了解網頁扮演著溝通的角色，無論是讀者與讀者，讀者與網站或是網站與網站之間的溝通。 我們並無法預期未來十年的資訊科技會將人類的生活帶到什麼樣的環境之中，也許不久的將來，我們可以用手機選擇一部電影，並以自己為主角，身歷其境的去體驗原本只能在螢光幕上看著別人主演的故事。 然而筆者盼望野人獻曝所提的觀點，能對國內的佛教網際網路提供拋磚引玉的效用。如何能讓佛法和讀者產生更有效的碰撞(足夠的能量和適當的位向)，似乎仍待進一步的努力。 曾有學者對於敝會的網站設計責難筆者，並認為唯有讓三歲小孩都看得懂的網站才是好的網站，這是值得參考的提議，卻未必正確。 筆者僅以這句話作結： There is only one World Wide Web. 作者： 李志強，中華電子佛典協會發行組組長 參考資料： 以下的參考資料是筆者就手邊查得到的資料做一整理，事後加在本文中補充，然而有更多資料的出處不易查得，您可由以下的網站進一步連結，以得到更多的資訊。 (*1) (*2) (*3) (*4) (*5) (*6) (*7) (*8) (*9) (*10) (*11) (*12) (*13) (*14) (*15) (*16) 如何用CBETA經文製作桌布? 如果您想要在一開機時便能看到經文，或是將螢幕的桌面換成喜歡的經文，以下介紹幾個方法，提供您做為參考。 一、使用圖檔： 其實最簡單的方式就是使用圖檔。您只要選定圖檔，無論是在IE瀏覽時，在圖片上按滑鼠右鍵，選擇「設成桌面底色圖案」，或是直接在桌面上按右鍵，選擇「內容」，並設定背景的底色圖案均可(按「瀏覽」可選擇圖檔)。 然而，要如何製作經文圖檔呢? 在這兒介紹一個簡單的方式，提供大家參考。 首先，您可瀏覽中華電子佛典協會Word經文，選擇喜歡的經文，依照自己的喜好排版，例如「直排」、加注「注音」(Word 2000繁體中文版加上微軟新注音輸入法)或是分欄、分段等等。請記得儘量讓經文能在一個頁面之中顯示。 此時請進入「整頁模式」，以便讓螢幕上出現排版過的畫面。調整好適當的大小之後，按下<print screen>鍵(複製整個螢幕內容)或是<Alt-print screen>鍵(複製目前最上層執行視窗的內容)，畫面便會被貼到剪貼簿之中。 此時您可使用任何繪圖或編輯軟體來編修，但在這裡我們利用「附屬應用程式」中的小畫家來處理。 請點選「開始」>「程式集」>「附屬應用程式」>「小畫家」。 開啟小畫家之後，可在編輯區按<Ctrl-V>，把剛才複製的圖檔貼上。如果貼上的畫面大於目前的畫布大小，小畫家會問您是否要放大點陣圖，此時選擇確定，就可以看到圖檔被貼進來。 您可反覆的嘗試幾次，以得到滿意的效果。 接下來，您可利用小畫家提供的功能，對於選取的區域進行編修，如反轉，扭曲或是色彩轉換(反白)等等功能，最後再存檔即可。 當然，您也可以加上其他的圖檔，或是不同的經文等等。如果您使用專業的繪圖軟體，則能得到更好的效果。如PhotoShop，Painter或是PhotoImpact等等。 二、使用Active DeskTop 在Windows 98之後，微軟視窗系統以IE做為顯示的核心，整個桌布也可以使用瀏覽器的方式來呈現。設定時您可在桌面上點選滑鼠右鍵，並開啟「Active Desktop」的「開啟Web畫面」。 當您使用Web畫面為桌布時，您能直接連結到網際網路，甚至開啟好幾個視窗呢。在這裡，我們介紹簡單的方式來呈現。 您如果有現成的HTML檔案，可以將檔案複製到C:\windows\Web\Wallpaper子目錄底下，這兒所放的就是以HTML呈現的桌布。 設定時您依然可以直接在桌面上按右鍵，選擇「內容」，並設定背景的底色圖案(按「瀏覽」可選擇圖檔或是HTML檔案)。此時您還能夠選擇Web頁籤，設定出現在桌布上的瀏覽器，設定完成後可直接在桌面上改變大小並移動位置。 ◎使用Active DeskTop有什麼好處呢? 使用Active desktop事實上具有許多功能，在這兒我們想提及的是使用瀏覽器可以呈現較為動態的桌布，例如Gif 98a的動畫檔案，midi音樂，DHTML的動態網頁設計，互動式多媒體等等，當然，您還能做網頁連結。 您可將Active desktop當成一個網站，並依喜好直接選擇連結。 ◎如何製作HTML檔? 製作HTML檔案有許多的方式，您可用NotePad直接輸入HTML，或是使用各式網頁編輯工具(如IE附的FrontPage Express)，甚至複製在CBETA網站上的經文皆可。這兒同樣地只介紹較簡便的方式，您可瀏覽CBETA經文的Word版，並選擇「檔案」的「另存新檔」，存成HTML格式，或是「另存成web畫面」。 如果您有其他的工具，也能直接將Doc檔轉換成HTML檔案。如果您覺得使用Word產生的HTML太過於龐大，可使用 MS office HTML Filter 來減小檔案大小。 如果您使用HTMLhelp版本，則可針對某一欄存成HTML檔。您可在瀏覽區中選擇「檢視原始檔案」，並另存成HTML檔。如果要存缺字連結，則得在圖檔上選擇另存圖片。 ◎設定選單和自動播放功能 由於網頁設計是一個複雜的主題，在這兒我們只介紹簡單的方式，提供一個超連結選單及定時輪播的設定。 首先，您可利用下列HTML碼，製成一個簡單的HTML檔案，提供陽春型的選單連結： <HTML> 此時您將要連結的檔案位置寫在href="~~~~"之中，並將要顯示的項目放在<a>~~~</a>之間。如果您使用網頁編輯軟體，亦能很快速的製作這樣的表單。 如果您希望能夠輪播，可以加入下列的標記： <html> 我們新增了Head標記，其中Title是網頁的名稱，而<meta http-equiv="Content-Type" content="text/html;charset=big5">是設定網頁為繁體中文，而<meta HTTP-EQUIV="REFRESH" CONTENT="2;URL=http://ccbs.ntu.edu.tw/cbeta/">則是設定在 2 秒中之後，網頁自動轉址到 URL的位置，這兒則是CBETA的網址。 如果您覺得這個方法太麻煩，也可以使用JavaScript是其他方式來製作輪播的效果哦，不過這部份的內容超過本篇的範圍，待日後有機會再和大家分享。 結語： 使用圖檔或是Active DeskTop均能將現有的CBETA經文呈現在桌面上，讓我們一開機就能直接看到喜歡經文，實在是一件有趣的事情。也許有些朋友覺得把經文放在桌面上感覺起來怪怪的，但筆者卻覺得這有很好的警醒作用哦。 問：如何在編輯時刪去CBETA的Word版標記？ 常有朋友提及如何在編輯Word經文時，消去黃底的隱藏標記。除了之前提供如何隱藏此標記不顯示之外，這兒提供一個簡單的方法，將Word檔中的標記去除。 首先，您打開一個Word經文檔案，並選取您要處理的文字，複製到自己的文件中。當然，如果您要處理整份經文，就可省去這個動作。 第二，選取工具列選單的「格式」>「選項」，選取「檢視」頁籤，並勾選「格式化標記」的「隱藏文字」，這時按「確定」。 第三，此時回到Word之中，您會發現經文的部份會出現黃底的標記，以及書籤(大正藏校勘符號)。(此時使用CBETA 巨集工具無法消去) 第四，此時我們可利用Word提供的格式化取代的功能，將具有隱藏屬性的標記或是特定的樣式刪除。 以Word 2000為例，請選擇工具列選單的「編輯」>「取代」(或直接按Ctrl- H)。 如果您的選單中「搜尋選項」未顯示，可按「較多」鍵，此處已經轉成「較少」鍵。 第五、接著，請在「尋找目標」中輸入「^?」共兩個字元，代表每一個字元。並點選最下方的「格式」選項。 第六、如果您想消去所有的隱藏格式，請選擇字型，並且只勾選「隱藏」屬性。 按「確定」之後，會出現詢問的畫面，此時按全部取代即可，至於「全半形相符」選項則可有可無。 第七、如果您想刪去標記的部份，而保留校勘符號，或是只想刪去某些特定的樣式，則可利用以下的方法。在取代的格式選項中，不要選擇「字型」，而選擇「樣式」。此時選擇「CbetaTAGS」樣式，按確定。此時再按「全部取代」即可。 第八、最後關閉取代視窗，便可得到去除標記的經文。當然，如果檔案愈大，取代所需的時間就會愈久哦! 在這裡要跟各位介紹本協會新成立的一個討論園地－－CBETA 之友電子報(CBETA Friend)，此討論區是以半開放型的方式做為網友們溝通的目的，底下一一介紹相關的事項。 【目地】 CBETA 之友電子報與現在您正在閱讀的 CBETA News 不同，CBEA News 是由CBETA 對外以月刊方式發佈消息，並且不定時發送最新的快訊供各位參考，而 CBETA 之友電子報則是提供網友們一個自行交換 CBETA 電子佛典相關訊息的園地。 【規範】 CBETA 之友電子報之所以稱為半開放型，是因為任何人都可以發送資料給所有訂閱的網友，但本區將會設有一版主負責過濾不適當的言論與廣告，以免各位收到不必要的信件。 目前尚無特定之規範，希望大家的討論範圍在： o CBETA 電子佛典的正確性探討 本電子報不希望有下列的內容. (這些內容會被版主刪除) x 廣告信函 【訂閱與取消的方式】 想訂閱本電子報的朋友，可依下列步驟進行即可： 1.拜訪「梵網」電子報整合系統，其網址在 http://mlist.iyard.org 2.點選 CBETA 中華電子佛典協會 3.進入後會看到三份電子報： 「中華電子佛典協會」是內部試用，並無對外提供訂閱。 4.進入後，可看到基本介紹及「訂閱」，「取消訂閱」與「閱讀舊信」的功能，依您的需求選擇即可。 【發送與接收訊息】 訂閱成功之後，就會自動由您的 email 信箱收到最新的討論，若想閱讀以前的舊信，亦可至「梵網」電子報整合系統(http://mlist.iyard.org)瀏覽。 若想加入討論，則直接寄信至 cbeta_friend@mlist.iyard.org 即可，不論是訂閱用戶與否，都可以向本電子報發送消息。此外，CBETA 網站(http://ccbs.ntu.edu.tw/cbeta)的留言版亦與本系統結合，任何留言只要經由版主同意，皆一併交由 CBETA之友提供訂閱戶參考。 【感謝】 感謝「梵網」電子報整合系統提供這麼方便好用的功能，讓有心於佛典電子化的朋友能不分時空而眾志成城的一起努力，也感謝過去以來許多朋友不斷提供各種建議。 除了本電子報，梵網亦逐漸開發中並提供佛教相關電子報，也歡迎各位網友參考。
|