分享網頁設計的基本原則-上
網頁 (Web page) 在全球資訊網 (WWW) 系統中可以有各種不同的功能:
多媒體資訊傳遞:簡單的網頁可以用平面或是 3D 的方式來傳達聲音、影像、動畫、視訊、虛擬時境的多媒體資訊。
互動的佈告欄:網際網路上來觀看網頁的人可以在網頁上留言,藉以和其他來觀看的人或是網頁的製作人溝通。
資訊系統之介面:網頁本身可以是一個資料庫、GIS 系統、或是應用資訊系統的人機介面,允許使用者在遠端透過網路來操作該系統。
不論其功能為何,網頁是一個網路資訊系統的人機介面,一個網頁的基本目的是給使用者瀏覽,它負有讓使用者清楚瞭解系統所呈現資訊的任務,它也要讓使用者產生對資訊系統所提供資訊的興趣,並且提供適當的互動管道,讓使用者與資訊系統維持適當的互動。
設計一個電腦系統的人機介面所需要遵循的一般通則在設計網頁時都需要注意到,就人機互動的功能面來說,網頁受限於瀏覽器的特性,所提供的平面或是 3D 的表現方式都有固定的框架,不能做太多的變化,而且資訊的來源都是遠端的機器,必須考慮資料傳遞的時間延遲,在這樣子的框架下要有效率地達成傳遞資訊給使 用者的目的,必須要特別考慮下面這些增加整體系統可用性 (usability) 的設計原則:
全方位地規劃一個網頁
在網頁上提供製作者及維護者的基本資訊
用有效的方式和網頁的瀏覽者溝通
幫助使用者迅速地找到他要的資訊
清楚地讓使用者知道系統將如何反應他的每一個動作
時時考慮使用者操作及資訊傳遞的效率
考慮網際網路上使用者使用各種不同的硬體與軟體
讓你的網頁看起來更舒服
強調互動性
維護你的網頁
注意一些 HTML 的小細節
全方位地規劃一個網頁
網頁的目的是為了和使用者溝通 (單向或雙向地傳遞資訊) ,在製作一個網頁時請無時無刻牢記此點,來看你的網頁的人通常不是像逛街一樣毫無目標,而是為了尋找一些特定的資訊而來,使用者不是為了崇拜你製作的一些 很炫的媒體效果而來,所以就像設計一般電腦系統的人機介面一樣,你必須
瞭解系統的使用者:
是哪些人會來看你的網頁 (他們共同的特質是什麼? 年齡? 專業? 教育程度? )
他們會在哪裡 (在區域網路內呢? 還是廣佈全世界? )
他們的目的是什麼?
你想要呈現給他們什麼樣子的資訊?
你想要如何來呈現這些資訊?
你需要由使用者的角度來看 "我到底在這個網頁上要得到什麼資訊?" 這樣的問題,如此在設計的過程中你所做的決定才能夠滿足潛在的使用者。
訂定網頁的目標
告知瀏覽者資訊
教育瀏覽者
娛樂
獲得瀏覽者的回饋
提供瀏覽者討論的空間與基本內容
不管怎樣,每一個網頁一定要有一個目標。
網頁是一個溝通的工具,如果你沒辦法替它找到一個有意義的目標,或是目標分歧的話,那你應該要考慮放棄製作這個網頁或是使用多個網頁來達到不同的目標。
網頁內容與網頁頁面的設計互為表裡
就像一般的平面媒體一樣,撰稿和美術編輯是有不同責任的,資訊的內容是網頁的內涵,是網頁的精髓,美工藝術設計有畫龍點睛之效,是網頁的外表,缺一不可,但是內涵必須為主,其它的設計方能依附其上,加強資訊傳遞的效果,加快資訊傳遞的速度。
網頁中各種媒體的運用千萬不要喧賓奪主,讓網頁的主題為之失色,同樣地其它附帶的資訊,例如廣告,或是其它的連結,不要蓋過網頁的主題。
如何呈現網頁的主題
就像一般電腦系統的人機界面一樣,製作網頁在一開始時需要由瀏覽者熟悉的領域中構思一個隱喻 (metaphor) 來介紹你的主題,以便瀏覽者迅速地建立正確的心智模型,如此能夠加快使用者接受你所要呈現的資訊,加深此資訊在瀏覽者腦中的印象,各種媒體的運用之基本目 的是為了引導瀏覽者的注意力專注在你所要表達的主題上,不是要分散瀏覽者注意力在各個相關的內容上。
在網頁上提供製作者及維護者的基本資訊
網頁這種新興的資訊傳播媒體是不經過任何人審核的 (moderated) ,所要展現的內容是完全自由的,完全由網頁的製作者自己決定,內容的正確性與適當性也完全由網頁的製作者自己負責,當我們閱讀一網頁時,是否相信它的內容 必須由我們自己根據網頁的內容來判斷,一般情況下瀏覽者首先根據網頁製作者的身份與其所屬機構來做第一層的篩揀判斷此資訊的可靠度,然後瀏覽者會根據網頁 本身的邏輯性來判斷資訊的可信性,再與瀏覽者自己的知識相互印證來判斷資訊的正確性,最後瀏覽者會根據網頁維護的狀況與網頁中提供的互動性來判斷所提供資 訊的即時性。
在設計一個網頁的時候設計者除了盡力維護資訊的正確性與即時性之外,必須想辦法來加強與瀏覽者相互間的溝通,加強瀏覽者之間的溝通,建立瀏覽者的信心,例如:
列出作者或是連絡人:包括作者或是連絡人的名字、所屬機構、電子郵件信箱、網頁位址、或是其它的聯絡方式。
列出公司或是組織名稱:如果此網頁是某一個組織或是公司資助來建立的,請清楚地表明該組織之企業識別符號或是其名稱。
列出網頁之 URL:一般的瀏覽器在列印網頁是會將網頁之 URL 列於首頁,以便瀏覽者日後可以知道此網頁文件之來源,不過這個功能大部份都是瀏覽器的選項,因此也有可能不自動印 URL,此時設計者最好是自己在網頁上列出 URL。
列出網頁修改或是維護的時間:讓瀏覽者知道網頁最後修改的時間或是修改的過程,可以幫助瀏覽者判斷資訊相對之可用性。
考慮使用較多互動的網頁元件:給予瀏覽者更多表達意見以及得到更多資訊的管道。
用有效的方式和網頁的瀏覽者溝通
在確定好網頁目的、主題、瀏覽對象之後,切記網頁是溝通的工具,任何溝通都要盡力使得溝通有效,以免浪費時間,瀏覽者在全球資訊網的大海中好不容易 走到你這一個網頁上,你用細心的設計與美觀調和的畫面來顯示真誠的態度之外,也要用簡捷有條理的方式展現你的主題,確保你的目的能在瀏覽者的耐心用完之前 完全達到,以下是幾個該注意的重點:
降低文字的篇幅:
大多數人線上閱讀文章時的速度要比閱讀印出來的文章要慢,網頁上大部份的文章是希望瀏覽者線上閱讀,並且讓瀏覽者隨時保持互動性,可以決定是否要讀下去或是跳到更適當的地方去閱讀,因此內容要儘量縮減。
儘量以標題摘要文章內容:
這是瀏覽者決定是否要閱讀此段文章的關鍵,如果可以的話,儘量以條列式的方法分層表達,將重點一一標出,在適當的地方再輔以較詳細的說明。
斜體字、粗體字、不同顏色的字要小心使用:
雖然這是在文字段落中提醒瀏覽者注意某些文字的好方法,可是這也常常使得頁面零亂,使得文字的篇幅不自覺地增加,如果可以的話應該儘量用條列式的方法,替瀏覽者把大綱整理出來。
超連結 (hyperlink) 文字常常也就是關鍵詞:
關鍵詞的詳細說明應該放另一個頁面上,如此可以階層式地化解篇幅的壓力,同時關鍵詞的本身和其所在的句子,也說明了該連結將引導瀏覽者到什麼樣子的畫面上去。
網頁中的文章請使用固定的風格:
例如:人稱、相關名詞及其翻譯、字詞的用色、同義字,如果是英文的話,其大小寫、拼法、連線等等在網頁中都需要用固定的表示方法,不要任意轉變。
使用瀏覽者熟悉的名詞:
依據你所定義的使用族群,選用適當的詞語,不要不經意地使用專業的詞語或是你個人所熟悉的詞語。
使用互動式元件時必須選用能夠清楚地代表該選項或是動作的詞語:
所謂互動式元件是指瀏覽者可以操作的螢幕上顯示物件,例如:表單中的 Radio Buttons、Push Buttons 等等,這通常是很困難的,在一個按鈕上所保留的空間通常是很有限的 (例如:確定按鈕) ,如何選用簡單的詞語代表將會進行的動作? 在 select 中的每一個選項所代表的特性也可能很難用一個減捷的名詞來說明,但是無論多困難,不可以為了頁面空間配置而犧牲掉清晰度,如此可用度 (usability) 會急速降低。
在設計互動式界面時必須使用清楚、建設性的訊息:
在設計一個使用者可以輸入資料或是回答問題的網頁時,通常會使用 CGI 或是 JAVA、JAVA Script 等等技術,因為使用者不單單只是接受資訊,還要提供資訊,常常可能發生一些系統無法處理的狀況,必須提供一些訊息給使用者。
任何錯誤訊息或是狀態訊息的目的都是希望使用者能夠瞭解目前的狀況,做出系統所希望的反應,例如:常常看到的瀏覽器錯誤訊息 "Error 404:File not found" 就是一個使用者很難瞭解的訊息,使用的詞語完全是電腦專業領域內的名詞,也沒有告訴使用者該如何反應,下面這樣子的訊息會好一些: "The page you requested is no longer at this location, please click the Back Button of the browers to go back to the refering page and inform the page owner!"
注意網頁中標題、圖片與文字段落讀序的安排:
就像一般的平面媒體一樣,標題與圖片引導瀏覽者視線及注意力,必須小心有系統地由使用者的角度來設計。
幫助使用者迅速地找到他要的資訊
在瀏覽超文件或是超媒體時大多數的瀏覽者很快地就在錯綜複雜的連結中迷失了,也許方才看到某一個資訊覺得很重要,但是跟著某一個連結下去卻再也回不 來了,甚至由最上層網頁重新走一遍也不一定找得到同樣的那一頁。在瀏覽超文件時像是一腳踏進濃密的叢林,沒有任何指標、任何方向,這時比較有用的是你的短 期記憶,而不是組織能力,有時很多實際世界中的路癡,到了網上多維的世界中反而神勇異常呢?
不管怎樣,在頁面的設計上一定要想辦法幫助使用者認識網頁的架構,希望瀏覽者能夠自由自在的瀏覽而不會迷失,由於全球資訊網透過網路傳輸的架構,每 一次跟隨一個連結都需要一定的時間,因此一個簡單的檢驗原則是不管瀏覽者目前身在何處,如果要尋找某一個特殊的資訊的話,最好能在三個連結之內找到,這個 要求成為 網頁設計 者在設計頁面及組織資訊時一個很基本的原則,以下我們討論一些輔助瀏覽者的頁面設計原則:
使用一致的關鍵字:
在網頁中使用一致的關鍵字,不管是英文還是中文,都盡量用一致的名詞來闡釋或描述一個概念,這個理由很簡單,因為大多數的搜尋引擎 (Search Engine) 都是藉由關鍵字出現的次數來比較某一網頁的內容是否與查詢的內容相關,因此如果你使用一致的關鍵字的話,當使用者以該關鍵字查詢時這個網頁出現的機率就高 得多了。
建立超連結目錄表:
如果網站上不只一頁網頁,替所有的網頁做一個超連結目錄表能夠幫助瀏覽者快速地掌握資訊的組織。
顯示瀏覽者目前瀏覽的位置:
超連結連在一起的網頁很可能不是一度空間或是二度空間的關係圖可以清楚表示出來的,可是一般情況下我們在組織資料時會根據某一兩個主軸來準備呈現資 料,因此我們可以用這些主軸來描述網頁之間的架構,可以用樹狀圖或是階層圖來繪製這個結果,然後在圖上 (不見得是圖片,也可以是文字) 標示瀏覽者目前的位置,如此有助於瀏覽者在實際瀏覽過程中組織整體的資訊。
盡量避免讓瀏覽者使用捲動軸和調整視窗大小:
使用者常常希望看到全貌以便瞭解資訊呈現的順序與架構,但是一個大的網頁常常要讓瀏覽者使用捲動軸,大的表格和圖片常常強迫使用者調整視窗的大小, 甚至太大的圖片在某些環境下只能用捲動軸來觀看其全貌,這些動作都需要時間,也影響使用者的專注力,更讓瀏覽者產生一種無法掌握的感覺,讓瀏覽者必須多花 一份心力去組織、重新建構這一頁內資訊的心智模型 (mental model) 。
使用清楚的標題 (TITLE) 標注 (tag) :
HTML 中< TITLE> 的標注是各個瀏覽器在記錄書籤 (bookmark) 時所記下相對的文字說明,如果你的 TITLE 標注能夠清楚的描述你的網頁內容的話,使用者記下書籤後,可以很輕鬆地再找到你的網頁。
請注意:很多標題在你整體瀏覽你的網頁時可能具有明確的意義,但是單獨看這個標題就可能會變得毫無意義,瀏覽者過一段時間後光看標題可能完全無法回 憶當初看到的頁面是關於哪方面的,因此在設計的時候你應該考慮將標題和內容分開來單獨思考一遍,是不是完整,例如:有時副標題前需要主標題以釐清其關係, 有時甚至需要公司名稱、計畫名稱、作者姓名等等。
在網站的深度和廣度之間做一個適當的選擇:
網頁的縱向連結愈深,表示資訊分層整理的愈詳細,表示資訊的深度夠,不是膚淺的文字組合,但也可能表示瀏覽者可能無法理解太深入的資訊;網頁橫向的 連結愈多,表示相關輔助資訊蒐集的很齊全,但是也可能表示網站主題定訂的太廣,資訊範疇擴展得太大,可能會超過瀏覽者所能重建的心智模型,因此對不同的瀏 覽族群而言,必須以適當的深度與廣度來呈現網站上的資訊。
使用適當的導覽按鍵 (影像或文字之超連結) :
如前面所述,設計者常常會依照幾個主軸來安排資訊,例如在一個虛擬的藝術館的網頁中,作品除了依照畫風與畫派來排列之外,也可以依照年代來排列,或 是依照畫家來排列,針對某一種特殊的排列方法可以獨立設計一個超連結目錄頁,在所有的頁面上置入連結連回此目錄頁,甚至可以在所有的頁面上置入依此主軸之 前進及後退按鈕,讓瀏覽者輕鬆地挑選喜歡的資訊瀏覽方式。
避免瀏覽者無法離開某一頁的窘境:
不要讓瀏覽者發現他除了鍵入 URL 或是使用瀏覽器提供的 GOTO (至) 或是 BACK (後退) 按鈕才能離開得了某一網頁,進入這樣子的網頁中,好像走進一個陷阱一樣。如果你的網頁本身沒有提供瀏覽者適當的操作選項,瀏覽者需要藉由瀏覽器提供的功能 來瀏覽你的網站時,瀏覽者需要很熟悉瀏覽器所提供的功能,而且當瀏覽者使用不同的瀏覽器時所見到的操作介面就不一致了。
使用 HTML 的內部連結:
如果某一個網頁的資料內容很多 (一整個螢幕放不下的話) ,請整理一個超連結目錄頁連結到每一個子題上,每一段結束時也應該讓使用者可以重新回到超連結目錄頁上。
如果你的網站有很多網頁的話,請你考慮在每一頁內提供連結來連結到下列重要的網頁上:
a. 你的首頁 (home page)
b. 內容連結頁 (TOC, Table Of Content)
c. 索引頁 (index page)
d. 搜尋頁 (local search page)
不管使用者在瀏覽任何資訊時,上面這些連結最好能夠都一致地呈現出來:
這些導覽性的連結是幫助使用者在你的網站中尋找資料的,最好能夠一致地呈現在畫面中固定的地方,不要讓瀏覽者四處去尋找這些導覽性的連結,當然你在設計時也要注意考慮畫面的大小,不要放太多的導覽連結進去。
提供相關資訊的連結:
我們製作一個網頁通常都會有參考資料或是相關資料,大部份的使用者對於相關的資料通常也會有興趣的,提供相關網頁的連結對瀏覽者是一大幫助,應該儘量提供相關的連結,不過也不要為了湊數而隨便連結,同時應該對所提供的連結做簡單的解釋以及整理。
參考文獻:
1.位元文化,2002,XML 技術實務,台北:文魁資訊股份有限公司。
2.林宥吟,2002,延伸性企業報告語言之產業應用-以資產管理產業為例,私立中原大學會計系碩士班未出版論文。
3.李果益,2001,JAVA 技術手冊,台北:美商歐萊禮股份有限公司台灣分公司。
資料來源:squall.cs
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了