close

清楚地讓使用者知道系統將如何反應他的動作

 

瀏覽者每次按下一個連結按鍵以後,瀏覽器必須去遠端伺服器取得相關的文字、圖片或是聲音檔案,這些都很花時間,而且會打斷瀏覽者的思考,如果瀏覽者能夠在按下按鍵 (連結) 之前瞭解這個動作是什麼的話,可以讓使用者省掉一些冤枉路。


            
網頁的內容必須用標題、簡介、重點提示等等來分層次地介紹給瀏覽者;別一股腦地拼命講下去。

 

任何一個連結應該要清楚地說明它的目的:是到一個新的網頁,還是下載檔案,檔案的內容是什麼,大小有多大,網頁的內容與性質大概是什麼等等。

 

時時考慮使用者操作及資訊傳遞的效率

在網際網路上每一個使用者所能使用的頻寬差異很大,如果是透過電話線連上網路的話,很可能每秒只能傳遞數十K位元組,如果連線到國外的話很可能只有每秒數百個位元組,因此設計網頁時要時時想到如何讓使用者很有效率地瀏覽網頁的內容。

 

別把重要的資訊藏起來:

一個網頁並不是在炫耀它擁有那些資訊,而是要把這些資訊分享給瀏覽者,要仔細地設計瀏覽者目光及注意力的動線,讓重要的資訊自然地出現瀏覽者眼前,要讓他躲不掉,才能達到網頁傳遞資訊的目的。


讓每一個網頁儘量縮短:

短的網頁所需要的傳遞時間少,反應給瀏覽者的速度快,如果你有很多的文字資料要展現,儘量考慮階層式的網頁架構,影像檔案及 3D檔案也是很花時間來傳送的,可能的話用小一點、解析度較低的影像來取代,影像中不相干的景物可以將它裁切掉。


            
使用小縮圖影像來取代大的影像:

但是提供連結連到較細緻、解析度較高的影像上,讓使用者自己決定要不要看。


            
重複使用影像:

同一網站中重覆使用多次的影像通常只下載一次,所以可以重覆使用的影像儘量提昇其利用率。


           
在 HTML 中設定影像標注中的 width、height、以及 alt 參數,例如:

            <img src=http://foo.com.tw/foo.jpg
                     width=200 height=150"  alt="foo.jpg">

 

設定這兩個參數的話,可以使得瀏覽器在還沒有透過網路得到影像之前先編排文字資料,可以讓瀏覽者先看到文字的內容;如果設定 alt 之替代文字的話,也可以在影像還沒下傳之前先看到影像的替代描述。


            
使用交錯格式影像:

使用交錯 (interlaced) 格式儲存的影像在下載時會分為多個階段下載,每一階段下載後其影像會變得比較清晰,瀏覽者可以在影像還沒完全下載之前就看到部分的影像,感覺起來會比一般的影像下載的快一些。


            
使用 GIF 格式影像與 JPEG 格式影像的差別:

對於照片影像而言 JPG 格式壓縮得比較好,檔案比較小,下載的速度也比較快,但是對於表格、文字、線條、圖形等等色彩較少,邊緣銳利的圖片來說 JPG 壓縮因為是一種全彩、有失真的壓縮,會使得圖片看起來模糊、色彩不均勻,反之 GIF 檔是沒有失真的壓縮檔案,對於這類的圖片就比較適合。

 

考慮網際網路上使用者使用不同的硬體與軟體

網路上瀏覽者可能用不同廠牌不相容的各型電腦,大家雖然都有統一的全球資訊網界面,但是各自的檔案系統、編輯排版系統、影像處理系統都是不一樣的。 如果考慮檔案資料、文件資料,或是執行檔下載的話,最好是提供各家廠牌電腦共通的版本,例如:文件檔可以用 PDF 檔,否則至少應該標明所下載的檔案適合在什麼樣子的機器與作業系統上使用。


            
網路上有的機器是只能看英文的,有的機器是能夠看到中文的。因此最好能夠準備英文和中文的兩個版本,否則至少要有英文的基本說明。


            
有的使用者的網路連線頻寬很大,有的使用者頻寬很小,在頻寬很小的網路上的使用者很可能會藉由瀏覽器所提供的功能選擇不自動下傳影像,但是沒有影像圖片的 網頁有時是很無味的,如果連一些導覽按鈕都看不到的話甚至是完全無法操作的,所以如果可以的話設計者可以考慮提供幾個版本的網頁:一個有正常解析度的圖 片、另一個則有低解析度的圖片、一個只有文字界面的網頁,讓使用者自己根據自己的配備來選擇。


            
不同的電腦系統上可能安裝不同的字型,不同的瀏覽器上可以設定不同的字體大小,瀏覽器視窗的大小也可以由瀏覽者自己設定,這些都使得相同的網頁在不同的電腦上顯示的樣子不同。

 

HTML 是一種動態的文件排版格式,不管瀏覽器使用多大的字體,瀏覽器的視窗有多大,文字都可以重新在視窗內編排,因此設計網頁的人不能夠假設某一段文字應該出現 在視窗內的什麼地方,設計者也不應該使用絕對的字體大小、某一種特殊的字體、或是假設視窗該有多大,在設計時網頁內字體的大小可以用相對的,例如 normal size, H1, H2, …, H6, size=+1, size=-1 等等,避免用 size=4 這種絕對的方式來指定字體的大小。

 

另外某些 HTML 編輯器讓你很方便地修改字型的種類,例如楷書,於是變相地鼓勵設計者運用不同的字型來表現網頁的內容,可是真正顯示在瀏覽者頁面上的字型是瀏覽者系統上安 裝的字型,如果該系統上沒有裝你指定的字型的話就用預設的字型,如果你使用字型表現什麼效果的話使用者完全看不到,所以請避免用特殊字型。

 

在運用表格及圖片時 HTML 可以讓你用百分比的方式指定元件的大小,這是相對於瀏覽器頁面大小的,如果你使用絕對的點數來指定大小的話,使用者視窗太小時就無法看到整個頁面,必須以 捲動軸來操作。當然實際的效果也必須看頁面中要表現的內容而定,不過儘量不要假設使用者的瀏覽器視窗超過 640×480 個像點。

 

讓你的頁面看起來更舒服

 

不要隨便更改超連結的顏色:

HTML 允許 網頁設計 者更改頁面中超連結的顏色,包括未檢視過的連結及已檢查過的連結,有時網頁設計者更改背景顏色或是背景影像時必須一併更改連結的顏色,以便瀏覽者可以清楚 地檢驗頁面上所有的連結,但是一般來說色彩視覺效果的設計常常需要一些美工的專業知識才能勝任,隨便調整的話不見得能夠達到你想要的效果,反而是對使用者 造成一種負擔,使用者切換到你的網頁時所有連結的顏色都不一樣了,需要花時間嘗試錯誤、重新適應,如果一定要更改的話,至少也要讓整個網站上所有的顏色運 用一致,使用者才不會無所適從。


            
換列字元:

 HTML中換列字元是當成空白 (white space) 字元來處理的,由上二節的討論,你知道HTML是一種動態的排版語言,使用者看到的網頁內文字編排方式和設計者在檔案內看到的文字編排方式是不一樣的,尤 其是換列的地方更是不一樣,因此一般為了避免換列的地方多出一個空白,造成頁面中字元間隔不均勻的現象,在 HTML 的文件中我們常常會一段話一直打到底,完全不換列,或是在每一個標點符號後面換列,來避免這個問題。


            
使你的網站中各個網頁的外觀一致 (顏色及配置) :

通常我們會用 Table 或是 Frame 來配置頁面,不同的網頁中資訊的內容當然是不一樣的,但是頁面的架構是一樣的,瀏覽者可以在相同的地方找到標題、導覽的元件,而不會每到一個網頁就好像外地人,完全不知如何操作。

 

在顏色的選用上不要太極端,黑色、暗紅色的背景給瀏覽者的感覺和明亮的粉彩色系當然是不一樣的,在你的網站上的各個網頁在色系的選取上也需要有整體 性,不要變成一個大雜燴,像是一堆摔爛了的顏料罐,很多顏色雖然有刺激感官的效果,但是看久了就會麻痺,甚至會緊張,找個專家談談,別隨便使用。


            
圖片和文字整體編排的方式最好一致:

如果你將圖片夾雜在文字當中,那就一律如此,如是你讓文字將圖片包圍起來,在整個網頁中也要維持一致,如果你在頁面上讓圖文分離,各佔一行的話,那也需要維持整體的一貫性。
            


文字對齊的方式要一致:

各個段落向左對齊、置中對齊、或是向右對齊的方式必須一致。

       

強調互動性

全球資訊網的架構中雖然最主要強調的是單向資訊的傳遞,但是它也提供了雙向互動的方式,包括即時性的互動:像 CGI 與表單、JAVA 界面、以及非即時性的互動:像 e-mail 的連結,讓瀏覽者不只單方面的閱讀網頁上提供的資訊,也能夠提供一些他所知道的資訊,讓瀏覽者能夠回饋、參與網頁內資料的更新,讓瀏覽者能夠有再回來看看 的動機。

 

提供意見討論的佈告欄或是留言板:讓眾多瀏覽者可以針對網頁的內容或是論點來抒發自己的看法,眾多瀏覽者可以藉由此一網頁相互溝通心得,可以由各種不同的角度來探討同一件事,這是瀏覽者所以喜歡常常光顧你的網頁的一大動機。


            
如果可能的話,可以請一些相關的專業人士評論你的網頁,做為網頁的序言,甚至邀請他們定時在留言板上提供看法,或是主持意見專欄。


            
提供電子郵件地址,鼓勵使用者提出意見。


            
提供簡單的評量表格,針對網頁的編排、資訊內容的合適度、深度與廣度請瀏覽者做一評論,並提供目前的統計資料。


            
可以根據使用者的意見,整理所謂的 FAQ (Frequently Asked Questions) 來提供使用者參考一些綜合的問題與解答。

 

維護你的網頁

網頁是資訊傳播的工具,但是資訊是需要小心去維護、更新的,大家都知道去瀏覽一個維護得很好的網頁就像是去參觀一個乾淨整齊、百花齊放的花園一樣, 是很賞心悅目的,同時你在引用此網頁提供的資訊時也比較能夠放心,因此一個網頁設計出來以後必須經常性的去維護它、去灌溉它,網頁是活的,是會慢慢成長 的,眾多瀏覽者的意見與互動會激發出智慧的火花,能夠讓網頁的內容茁壯,也能吸引更多的使用者前來。

 

謹慎地檢查打字:

不要有打字的錯誤或是語法和詞語的誤用,最好請一個人仔細地閱讀過一遍
            


測試網頁呈現的效果:

在不同的網路連線情況下表現如何?  (反應時間如何? ) 在多人同時使用的情形下表現如何? 如果瀏覽者使用不同的瀏覽器,甚至純文字的瀏覽器效果如何? 使用者視窗的大小會不會影響到資訊的呈現? 在不同的作業平台下表現如何?  (在純英文的 UNIX 系統上表現如何?


            
不要濫用 "建構中 (Under Construction) " 的標示:

很多人在建構網頁的時候只要覺得還有一些資訊沒有補齊的時候,或是怕別人覺得網頁的內容很空洞,就乾脆放一張會動或是不會動的圖畫寫著 "施工中" 或是 "建構中",瀏覽者現在如果在網頁上看到這樣子的標示,通常都有一種危險不要擅闖的意念浮現出來,可能會意識到這個網頁的資訊內容也許不完全正確,也許網 頁的主人是新手,也許網頁是空洞的連結雜燴而已。別再這樣用了,大方地說你預定何時完成嘛,現在所有的公共工程都有這樣子的標示喔! 或者乾脆就說短期內不打算進行建置,需要相關資料者請 email 或電洽 ×××。


            
定期檢查網頁中的連結:

全球資訊網是一個變動很大的資料庫,很多連結一小段時間後都會改變,最主要是因為網站的資源可能在持續的擴充下無法應付而必須將某些網頁分家,或者 也可能是網路負荷、伺服器負荷的問題,也可能是由小而大,成立新的公司了…,不管怎樣,請用一些軟體來檢查這些連結,例如FrontPage,或是某些網 站也提供這樣子的服務,或是乾脆你自己一個一個的檢查。

 

定期更新你的網頁:

在你的網頁上留下最近更新的時間,已更新的次數,下一次預定更新的日期甚至保留過去變動的資料,在一個獨立的回顧網頁中讓瀏覽者比對,在定期更新的過程中你可以在更新的資料前後做一些醒目的提示,例如: "New" 圖示,來提醒瀏覽者注意。


如果你運用一個網頁來宣布事項的話,請務必將刪除過期無效的資訊。


如果你在網頁上放置一些讓使用者下載的執行程式或是含有巨集的文件時,請注意定時掃毒:

不要讓你的網頁成為電腦病毒寄居的場所。

       

注意一些 HTML 的小細節

 如果你自己編寫 HTML 文件的話,請在適當的地方加上註解:

 

HTML 的語法很簡單,可是在複雜多層的頁面設計下,HTML 文件是很難看懂也是很不容易維護的,請在適當的地方加入註解,例如:

            </UL><!-- end of level 2 list>

            </TABLE><!-- end of outer table>


請考慮不同的瀏覽器功能的差異:

HTML 是一個不斷在演進的標注語言,有些瀏覽器可能上市一兩年後就看不懂新的 HTML 的語法了,例如 Cascaded Style Sheet,有些瀏覽器可能不支援 JAVA Script 或是 Active X 元件,請在適當的地方加上保護的措施,例如:

            <SCRIPT LANGUAGE="javascript">

            <!---
            .....
            //-->
            </SCRIPT>

 

對於 HTML 的瀏覽器而言,一個看不懂 TAG,例如:<SCRIPT…> 對於不支援 SCRIPT 的瀏覽器而言,是完全沒有意義的東西,也不會影響到文件的編排;同樣地一個看不懂的參數,例如:<IMG SRC=…WIDE=20 HIGH=40>中的 WIDE 及 HIGH 就是沒有意義的參數,Cascade Style Sheet 就是以這種方式來擴充 HTML,因此有用到 或是 CSS 的網頁在沒有支援或是 CSS 的瀏覽器上可能只是失色,也可能根本失去了基本功能,在設計時請務必考慮此項差異。

 

            當連結 <A> TAG 和別的 TAG 巢狀地使用時,<A>TAG 請放在最內層。
            請用相對的字體大小。
            請用一般的字型。
            請用相對的方式來指定表格的寬度及高度。
            請在圖片內指定 width 及 height 參數。

 

 

 

參考文獻:
1.位元文化,2002,XML 技術實務,台北:文魁資訊股份有限公司。
2.林宥吟,2002,延伸性企業報告語言之產業應用-以資產管理產業為例,私立中原大學會計系碩士班未出版論文。
3.李果益,2001,JAVA 技術手冊,台北:美商歐萊禮股份有限公司台灣分公司。

 

資料來源:squall.cs

 

piece2巨群


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 巨群資訊 的頭像
    巨群資訊

    巨群資訊

    巨群資訊 發表在 痞客邦 留言(0) 人氣()