網頁設計

關於網頁設計的技術或相關資訊分享

網頁設計 - 每個剛起步的網頁設計師都應該知道的10件事(上)

10 Things Every Web Designer Just Starting Out Should Know

 

在製作一個網站時會有很多的問題,所以網頁設計師常常必須扮演多重的腳色,並且要非常了解如何建構一個有效實用的網站佈局。

大多數你在網頁設計所學到的教訓(lesson)都來自工作經驗,學習是一個反覆的過程,並且沒有比犯錯更好的方式來獲得知識(從錯誤中學習)。

在這篇文章中,我們將討論10個必要的與常態的做法,這是每一個新手的網頁設計師都應該知道。

 

1. 優化網頁圖片讓頁面讀取速度加快

學習如何透過選擇正確的格式去優化你的網頁圖片,並確保檔案大小在可行的範圍內是足夠小的。

雖然現在人們已經都在使用寬頻連線,但仍然有人使用撥號網路上網。

此外隨著行動裝置技術的普及,但行動裝置卻不一定支援像寬頻一樣的速度,圖片的檔案大小可能引起網頁下載時間變慢,是有可能把瀏覽者趕走的。

這邊有個技巧,就是選擇適合的文件格式:圖片如果有單純的(solid)顏色,那最好存成PNG檔或者GIF檔;如果圖片是連續性的色調(如照片)則最好存成JPG格式。

 

Optimize Web Graphics for Better Page Load Times

 

有很多的工具可以幫助你進一步優化你的圖片,降低他們的檔案大小。

可以參考這個工具列表來幫助優化你的圖片。

透過盡量將圖片的數量減到最低並且聰明的使用圖片,並且盡你所能的減小檔案大小,將可以大大的減少頁面的讀取時間和改善網頁的效能。

 

2. 保持乾淨和簡單

一個好的網頁設計不光只是看起來悅目而已,還包含對使用者而言也要友善的。

一個乾淨,簡單的網頁設計通常最終會成為一個可用性高的網頁設計,因為它在與瀏覽者的互動中不會使其產生混淆。

當頁面上有太多的網站功能和組件時,將會分散網站瀏覽者的注意力而失去原本瀏覽網站的目的。確保每個頁面元素都有一個目的,然後問自己以下問題:

    • ‧這個設計是否真的需要呢?
    • ‧這是什麼元件是做什麼用,它如何協助用戶瀏覽?
    • ‧如果我突然刪除此元件,大多數人會希望它回來嗎 ?
    • ‧如何把這些元素和目標、消息和網站的宗旨互相配合?

儘管它可能為您的網站拿出一個超級棒的新概念或界面設計模式,你還是要確保該設計對你的用戶而言仍然是方便和直觀的。

人們習慣於通用性(common)的互動模式,網站功能,和網路介面,如果你的設計的確很獨特,確保它不是太模糊和令人難以理解。

有創意,而且還保持簡單。

 

3. 導覽將是你最重要的設計

一個網站最重要的部分就是整個網站的導覽-沒有它,無論在哪個頁面中,使用者都會發生卡在這個頁面離不開的狀況。

有了這明顯的實際方向,我們將討論一些當建構網站導覽時重要的點。

 

首先,在網站的導覽架構上,它是非常重要的需要投入足夠的時間和很多規畫。

這是常識,但仍然令人吃驚的是,有多少的網站認為設計網站導覽是理所當然的呢?

擺放位置、風格、技術(使用javascript或只有CSS?)、可用性和網頁易讀性,這些是當你製作導覽設計時需要考慮的部分。

 

再來,你的導覽設計應該沒有CSS的狀況下也可以運作,這是基於文字基礎的瀏覽器相容性。

你可以盡量去嘲笑文字基礎的瀏覽器,但他們還是流行在很多的移動設備上。

也許更重要的是,沒有CSS的導覽功能對螢幕瀏覽者來說也是令人激賞的(99.99%的情況下)

 

CSS disabled.

 

接著是導覽功能應該容易進入和使用的,而不需要為客戶端技術如JavaScript或Flash,用戶可能沒有啟用或安裝等各種原因,包含安全性或公司政策而造成無法瀏覽。

 

所以有一個導覽系統可以放置的良好位置是必須要的,例如放在一個顯眼可見的地方。

一個好的導覽功能事只要網頁載入就出現,而不需要滑鼠再向下滾動。

這是為什麼頁面要保持乾淨和簡單的重要作用,一個複雜且非常規的設計可能會讓使用者混淆。

即使只有一瞬間,用戶也必須從不會納悶:「哪裡是網站的導覽處?」

 

最後,對網站建立階層架構,多層次的管理。確保它易於在父層與子層之間導覽。

此外,不管在哪一個網頁當中也應該能很容易到達最高層的頁面(例如網站首頁)。

最主要的目標就是你的網站導覽,盡可能的減少動作、行動和努力而讓使用者到達他想要瀏覽的內容。

 

4. 聰明的和有條理的使用字體

雖然有成千上萬的字體在那裡,但你真的能用的只是一小部分(至少直到完全支持對 CSS3主要瀏覽器)。

所以有一個設計點是堅持使用網頁安全字體。

如果你不喜歡網頁安全字體,可以考慮逐步增強的網頁設計,利用sIFR那樣或Cufon

 

保持字體的使用是一致的,確認標題和段落的內容一制。

使用留白、調整行高、字體大小和字母間距屬性,以內容輕鬆愉快的閱讀和掃描。

 

也許一個網頁設計師常常犯的錯誤就是使用不對的字體大小。

因為我們想盡可能的將內容都塞在一個網頁中呈現,所以我們有時設置字體大小而讓使用者感覺到不舒服。

如果可能的話,盡量保持字體大小12px以上,特別是對段落內容。

雖然很多沒有遇到因為字體太小而造成閱讀上的困難,但是想想老人家、近視眼和其他類似視覺障礙的族群吧。

 

5. 了解色彩的運用

談完字體,我們還需要指出使用正確顏色的重要性。

例如,黑色文字在白色背景,如果使用高對比度,橙色背景上的紅色文字會令你的眼睛感到緊張。

此外,使用一些對特殊形式色盲的用戶友善的顏色(檢查工具稱為Vischeck,將幫助您測試對於某些類型的色盲)。

 

Color contrast.

 

有些色彩足合只適合運用在前景色的部分,而不適合當作背景色。

舉個例子來說,深藍色的文字搭配粉紅色的背景與粉紅色的文字搭配深藍色的背景,都是使用兩種一樣的顏色,但應用在不同的部分則影響了它的可讀性和閱讀的舒適度。

重要的結論就是,不僅要使用良好的色彩組合,而且要將它應用到頁面上正確的地方。

 

Color combinations.

 

總結以上的五點:我們必須要提升網頁讀取的速度,並且保持網頁的簡單與乾淨。

再則是有明顯的導覽功能,不會讓使用者在你的網站中迷路。

然後針對網頁閱讀的友善性,善用字體的選擇以及顏色的搭配。

接下來另外的五點,則讓我們在下篇中分享。

Reference:10 Things Every Web Designer Just Starting Out Should Know

Please enable the javascript to submit this form