上圖擷取自加拿大安大略(Ontario)省的選舉事務網站英文版首頁。這個網站相當值得我們的政府機關參考。
在視覺設計方面,首先值得注意的是整體的柔調配色。從第一眼開始,選舉投票事務一板一眼的形象消融於類屬大自然顏色的氛圍之中。對親和力的重視亦表 現在線條的處理上:框線的使用度被降到最低,而僅存的幾條分隔線以淡灰色處理,使整個頁面不致於被明顯切割。這種刻意營造的一體化的感覺隱然地指涉著 「community」。
一體化的設計亦表現在圖形的呼應,除了 logo 重複出現以外,banner 上的橫福照片(經過與頁面主色的濾鏡處理)與隨機投射在選票箱上的單張風景照一樣,皆取材自Ontario自然人文景觀與住民身影。美中不足的是右上方的 「search」等功能的框線。以設計者的功力而言,應該可以有更細膩的處理。此外,banner 下緣的「Youth」之紫色背景似宜再淡些,好使整個畫面更協調流暢。
除了好看之外,這個網站也相當好用。以首頁而言,其簡潔的配置有助 於閱覽者快速掌握方向。除了banner 與主體之上下區分以外,整個版面大致以縱走方式形成兩個部分。左邊區域由兩個logo串起一條射線下行,引導讀者投在主體部分上的視線。這部分是目錄式導 覽的天下,看完首頁的重要訊息後,使用者可選擇點選「Voters」、「Candidates, Parties and Others」、「Youth」、「Media」、「Tools」這五個使用者導向的分類項目,開啟新頁面繼續找尋資訊。
右邊則從頁面頂緣那一排字的左端向右、向下延伸,劃出一條弧線到「More information on」的左端,然後被閃爍跳動著出現的多國文字(即上圖「日本語」所在的區塊)所吸引而筆直往下行,到底部後又劃個弧線向左行至「 Top of Page」而連結到下緣的footer部分。這整個區域的主軸是「功能」:常用、速查、說明、聯絡方式等性質的連結都放在這部分。其中的一些連結若用左邊部分目錄式瀏覽也可以找到,但為了使用者方便起見,它們在首頁上多了個直接入口。
簡潔扼要的特色也表現於網站的總入口網頁。簡潔,但有變化:網站自動地從一系列Ontario 風景照中隨機抽選一張、再將它處理得像投影在選票箱上一樣,而象徵性地串起「Ontario」與「Elections 」。這個設計不僅改採縮小形式而再度出現在首頁上,亦見於該站之所有網頁,宛如船錨般地產生各網頁的向心力。總入口網頁圖形底下有兩行標語,分別導引使用者進入英文或法文版本的網頁。
從總入口到站內網頁,靈活變化不只表現在前述的風景照片投影上。使用者點 選目錄式導覽的主要分類項目後,網頁色調配合該項目的背景色而變化,而 banner 底圖照片也隨之改變(如左下圖)。此外,原來屬於首頁左欄位置的區塊到此被分為兩部分:左邊是子目錄,右邊則是文字內容。至於首頁右欄區塊部分則以留白處 理。這樣的配置法有三項優點:其一,可藉以區隔首頁與內頁;其二,將子目錄放在左邊的安排不言自明地提示使用者注意其目錄導覽功能;其三,由於內頁之文字 量比較多,把右方留白可以減少壓迫感(畢竟是地廣人稀的加拿大啊)。
相對於台灣不少政府機關網站偏好採用的炫目(但不見得總是好看的)動畫設計,這種處理方式應該比較省製作費、又少佔用使用者的時間吧?!Elections Ontario 不採用入口動畫,而巧妙地以像一次播放一張幻燈片地那樣在各網頁秀照片;相反地,我們各級政府網站在播放入口網頁動畫以後,站內網頁則少有變化、甚至有些流於呆板。兩種設計風格孰高孰下,實在不難判斷。
(本文附圖均擷取自 Elections Ontario 網站,並由作者縮小處理)
參考比較:
政府員工對資訊內容的認識相當貧乏,所以大部分的政府單位網站都蠻糟糕的
之前看到日本香川縣的網站,雖然沒有美感設計,卻做到了可以迅速提供訪客所需要的資訊。
http://www.pref.kagawa.jp/
看了我們國內縣政府的網站,flash動畫太多太雜,反而造成視覺上的困擾。
ykhuang 桑:
我想也是。
這種現象的背後有個結構性因素:過去那種僵化、單調、單向、貧乏的人文藝術教育內容與方式。現在還有地方首長要把教育倒退嚕回去那個時代,真是令人頭皮發麻呀!
beckett 桑:
嘿嘿,看來,對那些一心打扮得花枝招展的政府網站感冒者,不只我一人。
謝謝您介紹日本香川縣那個粉可愛い的網站。該網站給人一種俐落清爽的感覺,不會讓人覺得很累。
我認為,除非設計者有充份把握,政府網站宜以簡單、莊重、親切、容易使用為基本原則。
網路上有許多高竿的網站設計可供免費參考;至於公部門的主事者看不看、看懂看不懂,那又是別的層次之問題了…
沒用啦!
標開出去!前給它花下去!
一堆特效眩惑民眾—反正出錢的也是民眾,又不是自己薪水!
這樣就是e化資訊化了!
看膩了??沒關係!再標一次.反正又不是自己的錢.
小高 桑:
為什麼您把我欲言又止的話就這麼給說出了呢?
說實在的,台灣許多公部門網站的主事者,還停留在十年前的”個人烘焙機”觀念上,所以才會搞出那種網站出來。這種困擾……我最近真的很受夠~~Orz
Tiat 桑:
研考會與新聞局實在該來主辦一個總評鑑,選出最好與最差的十大,或像旅館評鑑那樣分級歸類。這也許會帶來一些改善。
一個令人激賞的選務網站(下)
有趣的是會上網站查資料的人通常不會太在意”聲光”效果,而在意”聲光”效果的人卻不太常進網站查資料。
我要的就只是能迅速查找的項目和適度的門面裝飾,過多的音樂動畫對我來說只是浪費頻寛。 -_-
AKIRA 桑:
您對網路使用者習慣的描述正呼應了俗諺所說的「內行的看門道,外行的看熱鬧」。
政府部門用的是納稅人的錢,其網站頻寛也不例外,不必要的網頁效果又花錢、又容易降低服務效益,且浪費使用者的時間…「故」監察院好像從未注意到這種事說。
幕容大:
以現行政府採購法的規範加上審計、會計法的助攻,
台灣政府網站就像小高桑說的,永遠處在無間地獄的循環啊~
網站規劃設計和維護綁在一起,
具有創意的小工作室就不會去淌混水,
更甚者連主機、硬體維護都一起包;
有膽的主管想找有功力一點的人來做,花多一點錢,
會計馬上出來機車,依據採購法不能採限制性招標…
那個環保局網站已經算一點的了,
這個才經典!據說已經是改版過的了…XD
歹勢~上一篇好像語法寫錯,
係家啦,最有錢的地方政府:http://www.taipei.gov.tw/
無差別 桑:
從我知道的幾個例子來看,現行採購法真的是綁手綁腳,大有修改的必要。一票機車立委整天只顧著拿一些雞毛蒜皮的事去整官員,這種最該作的事偏不作。真是受夠了這些人。
北市府以前那個版本搞得非常繁複,改版後的這個給我的第一印象是:凌亂。其次,在左側欄點選後,竟然都是另開視窗,實在沒道理。最後,網站上的「台北市年鑑」竟然是2005年版,真的是有夠混的。馬郝台北市政府本身就是個經典。
另,那個語法小問題已在後台修正過了。