網頁設計最需要注意的三個小細節

20150712

對現在的初學者來說網頁設計的入門是越來越簡單,網路上隨便搜尋就有許多的教學或免費工具,但也因為這些太速成的便利性讓一些初學者忽略了設計上的小細節;這些細節雖然對於平常人來說是完全無感,可是對一些特殊族群來說卻是非常重要的。

連結文字一定要用藍色

很多設計者喜歡幫自己網站內的連結改成其他的顏色,大部分的讀者看到不同顏色的文字會滑過去看看是否有連結,但是當一個文章裏面有太多顏色的時候,反而會讓讀者覺得每一個有顏色的字似乎都只是裝飾作用而已,建議應該要幫有連結效果的字加上底線,以方便讀者辨別是否有連結效果。

也許有人會問為什麼網頁的連結文字都是藍色?為什麼不是紅橙黃綠其他顏色?因為對色盲來說紅色或綠色等顏色容易造成混淆,但藍色比較不會有這樣的問題;紅色或綠色雖然醒目,卻不如藍色能讓幾乎每個人都可以看到。

臉書創辦人祖克伯其實也是紅綠色盲,他在2010年接受《紐約客》雜誌訪問時曾告訴記者藍色是他看得最清楚的顏色,也因此臉書商標 LOGO 主要顏色是藍底白字。

在處理色盲的問題上利用顏色之外的指示會更有效,例如底線就是一個不錯的設計;為了美觀拿掉底線,對一般人也許影響不大,但有時候可以再試試看一些方法,尤其是把連結文字改色以後,底線的效果就更加重要了。

不要鎖滑鼠的右鍵

鎖滑鼠右鍵一般都是為了防止他人盜文或盜圖,但這個動作只能防君子無法防小人,反而會影響到一部分使用者的正常閱讀,有些讀者習慣閱讀文章時會邊閱讀文字邊用滑鼠選取正在閱讀的哪一行文字,當你鎖住滑鼠右鍵後選取文字功能也同時被鎖定了,如果你的部落格剛好是文字較多的類型,對於讀者來說真的很容易迷失在茫茫字海之中。

雖然這個動作並不會影響到網站美觀,也不會像連結文字一定要用藍色般影響到色盲的族群,但是卻會影響到閱讀的舒適度,網站閱讀的舒適度是許多設計者很容易忽視的一環,如何知道自己的文章是否符合閱讀的舒適度,建議各位可以多多參考一些實體新聞或雜誌所架設的網站,他們在閱讀舒適度上會有比較專業的設定。

網頁在不同環境下的連線速度

雖然現在的網路連線品質越來越好,但並非所有人都可以在網路滿格的狀態下上網,所以更該注意網站內容使用的圖片尺寸、使用網頁特效的多寡。

圖片過大是網站塞車最大的元凶,很多人應該都碰過用手機板連線網路時,明明網站的文字都跑完了,但是圖片卻遲遲沒有出現,通常這都是因為圖片過大的關係,金城老師碰過有部落客的一篇文章光圖片就超過 50MB,閱讀一篇文章等於是下載了一整張 MP3 的音樂專輯,如果是用家用電腦看也許不太有感,但是在上下班時間的捷運車廂內,或者較偏遠的網路弱勢地區,那種網路讀取的無力感就會很明顯了。

網頁特效則是造成電腦卡住的原因之一,大家應該都碰過開啟某些部落格時瀏覽器會變得特別的卡卡,這並不是你家電腦太老舊的問題,而是網頁使用的一些特效把電腦的效能吃光了。

最常見的案例就是早期一些 FLASH 製作的網站,所以設計者在製作網站時應該考慮在美觀和效能之間抓到一個平衡,如果你不是活動類型網站,請盡量以閱讀為前題來設計你的網站方是上上策。