網頁設計-蓋婭科技有限公司 -- 網頁設計 - 每個剛起步的網頁設計師都應該知道的10件事(上)
正在加載......
X
 
會員帳號 :
會員密碼 :
忘記密碼    加入會員

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR

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

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

網站製作, 簡約設計, 網頁設計

July 1st, 2009 by John Urban


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.


  總結以上的五點:我們必須要提升網頁讀取的速度,並且保持網頁的簡單與乾淨。再則是有明顯的導覽功能,不會讓使用者在你的網站中迷路。然後針對網頁閱讀的友善性,善用字體的選擇以及顏色的搭配。接下來另外的五點,則讓我們在下篇中分享。


: NT 0
   

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR


蓋婭科技網站導覽

站內搜尋

Loading

協力廠商

最後更新 : 01/19/2016

gotop