你一定要知道的48個網頁設計敗筆，讓你的網頁更完美

 7 / 16, 2012  實用秘招 , 推薦文章 , 網頁設計

網頁設計是一門很深的學問，因為你不但要去分析目標訪客、針對目標訪客做設計優化，還要考量到訪客在瀏覽時的方便度，就是用戶介面(UI)的設計要好。但是常常看到很多網頁的設計是充滿著不良的地方，慢慢的才會發現訪客默默的流失掉，因為你的網頁不夠親民、夠擾民。設計常犯的錯誤就是自以為設計的很便利操作，會這麼說的原因是因為你專業，那訪客呢？有你專業？

 

1.「秒殺」所有看你網站的訪客

很多網站經常在介面上拐彎抹角，加入一堆奇奇怪怪的元素在裡頭，拜託，不是每個訪客都這麼聰明知道你這頁面的重點在哪裡。所以，請你在設計網頁的時候把主要內容部分放的最顯眼，就像香腸一樣。要是你不能馬上讓訪客知道這個網頁在做什麼，是我的話會直接關掉網頁。

 

2.網站內容要言簡意賅，勿長篇大論

請記住訪客在看的是網頁，不是書。如果你想告訴訪客很多東西，想讓自己紅寫一堆資料分享，那我會建議你做成電子書讓訪客打包下載就好，沒必要放在網頁上。人的耐性並沒有你想像的那麼長，看累了自然就結束了。

 

3.字體別太雜，別搞藝術自以為很美觀

一個網頁上要有字體變化是正確無誤的，但是請不要使用雜七雜八亂的字體，排版也要清楚。你要知道，會來你的網頁都是因為你網頁中的內容，所以你應該要讓文字內容觀看舒適、別傷訪客眼睛。

 

4.承上一點，字別太小，要適中到最舒服的大小

請你明白這世界上近視、老花眼的很人多，請盡量不要使用小的字體，保持閱讀的舒適度。像滿多人的網誌字的大小都是15px，重灌狂人是1.1em、電腦玩物是16px（也有些是13px小號的字，看起來或許比較可愛吧，但是不是很建議就是。）。

 

5.不要使用target=”_blank”，不打開網頁在新的視窗

這點原文作者寫的不錯，我翻譯過來他是說：「如果訪客點一個連結讓他打開在新的視窗，你認為這樣訪客就不會離開你的網站。錯！要讓訪客自己決定想看什麼。甚至於為什麼瀏覽器會有上一頁的按鈕。不用擔心訪客跑去另一個網站了，他想要的話他一定會回來。」

這個論點有滿大的參考價值，對於大部分的人來說應該是這樣子沒錯，他想看的話的確會按上一頁回來，不要擔心訪客跑掉，如果你的外部連接不錯，可能訪客還會對你的網站印像加分，因為提供的他都想要。（不過我就是異類，每次點連結都會按著ctrl點，打開新分頁再看XD。

 

6.盡量減少使用CSS Hack

雖然CSS Hack能夠幫助你在製作網頁時某些效果的顯示，但是它並不是符合規範的一個動作。所以能讓不同瀏覽器相容的最好辦法：用最簡單、正確的程式碼。把程式碼簡化會有某種層面的減少不相容問題產生，就不需要用到CSS Hack了。真正的網頁設計應該保持相容性，而不是叫訪客把瀏覽器更新到最新版本，例如要你更新到IE9。不這麼做你可能會失去某些訪客，就算你不願意還是要做相容性的檢查。

 

7.沒有必要，千萬別叫訪客註冊

註冊對許多人來說是非常非常麻煩的事情，註冊代表對方會拿到你的資料，會有不好的感覺。重點是，訪客到你的網站來是需要看你網站的內容，不是來註冊的，如果需要註冊才能看的內容，我通常選擇不看，除非內容精華到極點。

 

8.承上點，如果註冊了，不要發垃圾訊息

如果你的網站是需要註冊類型的網站，請不要太頻繁的發郵件、edm等等，頻率要控制，否則當用戶收到很多沒有太大用處的郵件時，對你網站的印象會大大減分。

 

9.不要過度使用Flash動畫

Flash在網頁中的應用已經越來越少了，要做效果通常都改用jQuery來製作。另外，如果你要的效果一定要用Flash的話，請不要在旁邊有一直動來動去的東西，或是過多的效果，或許很炫，但這些都會造成使用者的不便利。

 

10.不要在網頁中嵌入背景音樂

許多新手在初接觸網頁設計時，都會以為在網頁中嵌入音樂會讓網頁質感很高。這不對，播放音樂並沒有比較好，個人感覺會很煩躁、無法靜下心來閱讀文章，很吵。如果一堆網站都這樣做，真的會被吵死。

 

11.不要讓影音自動撥放

如果你需要在網頁中嵌入影片、音樂盒的話，請不要讓它自動撥放，一定要有一個播放鍵，點下才撥放。（自動撥放真的很煩，特別是還沒有停止鍵的）

 

12.別自以為很厲害，別太招搖

請不要在網站側邊欄或內文（尤其是首頁）中放一堆得獎事蹟、認證。這些東西不是訪客想看的，而且會讓你的網站看起來不專業。這些事蹟盡量放在「關於我們」的分頁就好，每頁都顯示請減少到最少。

 

13.網站勿複雜、複雜則無法成大事

請你使用最少、最簡便的步驟讓訪客看到你網頁的內容，不需要在首頁載入前還先有一個Flash影片特效。訪客需要的是網站的內容，在網站剛起步時請直接讓訪客看到重要的內容，不要使用在進去首頁前特別用「點此進入」再來進去首頁。

 

14.一定要留下聯絡方式

沒有留下聯絡方式的網頁幾乎等於在做白工，沒辦法幫你增加一分人氣、一分知名度。這不僅對自己不利，更對訪客不利，你可能因此失去許多機會。

 

15.不要讓上一頁鍵失效

這與第5點相同的道理，就目前的習慣大家還是按上一頁為主要，當你使用打開新窗口瀏覽網頁，你就犯了這個錯誤。同樣的，不要使用Javascript把一些功能給封鎖掉，這只能防君子，不能防小人，而君子，它必定會遵照你網頁的授權來走。

 

16.不要使用一閃一閃的文字

請不要使用閃來閃去的文字，這看起來很不舒服。

 

17.不要使用太複雜的網址結構

比較好的網址是包含易記憶的關鍵字，而網址後方的目錄也不要過度複雜，凸顯出關鍵字比較好。太長不僅對SEO不利、網址太長看起來也很奇怪。

 

18.使用CSS+DIV取代HTML畫表格(table)、使用CSS定義樣式

如果你要學網頁設計我會建議你HTML和CSS一定要一起學，使用HTML畫table框架的模式已經非常非常非常落伍了(幾年前的網頁很多是這樣做)。CSS比HTML的功能更多、更便利、更容易分析整個網頁的佈局。強調一次，不要使用HTML畫table框架。

 

19.請留意SEO(搜尋引擎優化)，但不要過度操作

這個時代，已經沒有人在記你的網址打你的網址了，大家都使用Google來查資料，所以當你在製作網頁時，請留意網頁的meta標籤，是否讓搜尋引擎Google對你的網站微笑。

 

20.少用不明顯的下拉菜單

沒錯，盡量讓訪客第一眼就能看到你網頁的所有資訊，不要拐彎抹角，使用超多層下拉式菜單自己為很漂亮，實際上，又有多少人會去實際看一次你的下拉菜單的每一個文字呢？如果要使用下拉菜單，最好在旁邊加個小圖示讓訪客看到這是下拉式的。

 

21.使用文字做為導航

當你在弄頁面內容時，請盡量使用文字來進行撰寫，能用文字表達的就使用文字表達，圖片是幫助參考的。有時我在找資料時，也被許多圖檔失連而得不到要的資料而困擾。

 

22.如果要連結到PDF文件，請說明清楚大綱內容

PDF載入是需要讀取的時間，你已經等了網頁讀取又有連結到PDF檔案再等一次，如果PDF檔的內容不好，那訪客真的會氣炸。請讓你的訪客認為看這個檔案真的有價值在，不然就寫在網頁好了。

 

23.不要太多圖片按鈕，使用CSS來刻就好

這就像Opera技術長說過的話：「Apple網頁上的按鈕應該採用CSS來製作，而不該是以圖檔製作」，圖檔載入需要時間，同樣的讓網頁多了更複雜的元素。能用CSS簡單辦到的就用CSS，不行再使用圖片。

 

24.避免在文章內文中插入Adsense廣告

如果你在內文插入廣告，必然的流量一大點擊率就會上升，或許短期內錢可以進來比較多。但是以長期來看的話，會讓部分看不慣廣告的人離開，要放廣告，盡量放在邊欄就好。（不過在中文網頁，沒有插入廣告在內文的網站滿少的＠＠

 

25.簡單的導航結構

訪客拜訪網站的目的不是了解你的網站複雜的結構，而是要取得它想要的資訊，這一點一再強調，結構一定要化繁為簡，使用最簡單的方法讓訪客看到你的網頁核心價值，越簡單，越好。

 

26.避免多餘的操作

不要讓訪客看你的網頁真正內容前先讓它看其他東西，例如彈出視窗，請求按讚、廣告等等，都容易讓訪客產生厭煩，請盡量避免前置動作，放訪客直接看到他要的內容，看玩了放一個讚鈕在旁邊也不遲。

 

27.拒絕使用「FrontPage」等即見即所得網頁編輯器

FrontPage常常是學校老師在教學時第一個用到的軟體，但是這個軟體真的不好，因為使用滑鼠拖拖拉拉出來的東西我保證不會比手動撰寫程式碼還好，而且它會產生許多沒有用處的程式碼，也不是使用DIV+CSS的結構，而是使用style=””來代替，更可怕的是在產生瀏覽器不相容的問題時，你要修改可是會累死人，因為你會看到一堆莫名其妙的程式碼。

 

28.保持網頁多瀏覽器兼容性

與第六點同樣的概念，既然要做網頁，就盡量讓顯示效果在每一個網頁中都相同，不要出現太大的錯誤情形，不管你想不想，這是要做的，檢查網頁不同瀏覽器的相容性。

 

29.在連結上要有有意義的說明文字

我們常常看到很多的網路作者在寫作時都用「點這裡」來取代一切的說明，並不是這樣不好，而是有改進空間，你應該讓訪客知道這個連結是何去何從，會連結到哪裡，保持有意義的連結，同時也能帶來一點點的SEO效果。

 

30.不要在瀏覽器狀態欄隱藏連結網址

這個目前已經比較少看到了，幾年前還會看到使用Javascript來隱藏當滑鼠移到連結上面在瀏覽器的狀態欄網址顯示，這會讓訪客迷惑這個連結，到底要不要點？這是什麼網站？有沒有毒？

 

31.讓訪客一眼就知道哪個文字是連結

訪客沒有時間去注意你在哪些文字上加了超連結，你要讓他們一眼看見哪個是連結，可以點，看到更多的內容。通常連結都使用藍色，比瀏覽器預設藍再淡一點（用預設藍感覺就沒那麼專業），如#06c看起來很舒服，適合當作連結的顏色，通常我們都會把底線去除，等訪客滑鼠移到上方時再顯示底線。

 

32.盡量不要給一般文字加上顏色，重點使用粗體代替之

這點在撰寫文章時要注意一下，盡量不要在文字上面加上顏色，當加多了，整個文章就會變得非常難以閱讀，也會很刺眼。如果是要註明文章的重點，請使用粗體字，不要使用顏色，別以為七彩繽紛很好看。

 

33.訪客點擊連結後，連結需換色

這點就是單純的網頁便利度的問題，當訪客點過的連結變色，能夠馬上知道這個連結有點過了，通常用在重複的連結會比較明顯，我想，除非記憶很差不然應該不會忘記吧。

 

34.不要使用GIF動畫圖片檔

當你使用了動畫圖片GIF檔，訪客一半以上的注意力都會被分散，所以不要在網頁中有會動的圖片，除非你就是要他點那個圖片，才會這樣做。而且，這會讓你的網站顯的非常不專業，有很多新手都喜歡讓網頁動來動去的，但那很不好。

 

35.圖片盡量都要有ALT和TITLE標籤

就如大家所知，ALT和TITLE標籤都有正確設定在圖片上對於SEO一定會有幫助，它可以幫助搜尋引擎蜘蛛了解圖片的內容。ALT標籤則是會在圖片失連時顯示出所設定的文字，也有幫助。

 

36.網頁請溫和，不要使用強大對比刺眼色彩

網頁如果有一些刺眼的圖片是真的會讓人想關掉網頁，寧可不看文章也不要讓眼睛不舒服。特別是在網頁背景圖片，不要使用紅白點格、藍白點格等等非常非常刺眼的顏色。如果你發現有這種情形發生，請你馬上把顏色換掉，換成溫和的顏色，要選好的顏色就是參考他人的網站，自己再變化一下。

 

37.不要使用POPUP彈出視窗

現在許多瀏覽器都已經有防跳窗的功能了，因為惡意網站總是利用跳窗來載入不正常的東西，而且會妨礙訪客瀏覽網頁。使用POPUP彈出視窗是一個很爛的決定。

 

38.避免過度的Javascript、jQuery使用

Javascript是最邪惡的程式語言，因為他的標準非常不統一，常常會造成不同瀏覽器的兼容問題，也非常容易和其他Javascript產生相衝的問題，jQuery的版本也非常難搞，因為某些功能是在舊版開發的，所以與新版程式碼常常會有很大的問題，DEBUG是非常邪惡的英文字。

 

39.在網頁底部提供更多資訊

不知道大家有沒有這個習慣，就是看網頁一定會拉卷軸到最底部，確認過沒有其他內容後才離開。透過這點，許多國外企業網站常常在頁底放連絡資料、更多介紹文、粉絲團嵌入、首頁等等功能，這些都有可能讓訪客有更多的資訊，讓訪客停留於網站的時間更長，黏著度更高。

 

40.文章別一直換行，請善用標點符號

有時候會看到某些部落格的文章，打一行字後就馬上換行，這樣的排版方式我都一直質疑他到底會不會寫作文，會這樣寫嗎？文章應該善用標點浮號，讓網頁不會看起來那麼長，要一直往下拉很麻煩。

 

41.網頁不要橫式拓展

目前滑鼠的滾輪也只能讓網頁繼續往下拉，並沒有往左往右拉的功能，所以網頁的橫式寬度請不要過大，盡量橫向1000px就夠了，就現狀還是滿多人使用1024*768解析度。

 

42.避免語法打錯字、邏輯錯誤

某些標籤你打錯字或沒有正常關閉或許不會察覺到，但是這終究是不好的習慣，當你在修改網頁時有可能因此出現錯誤，影響網頁整體的品質。別以為你不會犯這個錯誤，當你網頁一寫多的時候就會產生錯誤了。

 

43.避免驗證題目太難、驗證碼不易辨識

之前曾經看過驗證問答還有乘法、除法的，或是驗證碼整個給他歪到一個不像樣的地步，這都是很不好的，也許還需要動員全家才能解出這個驗證碼…所以，驗證碼別太難，適中就好，不是所有人都很會看驗證碼。

 

44.不要變更已經公開網頁的網址

更改已經公開的網頁的網址如大家所知對SEO不好，同時也對有把網址加入到書籤、我的最愛的讀者帶來不便。

 

45.(WordPress)盡量不要使用過多的外掛

這點WordPress架熟的讀者應該都知道，雖然外掛真的很方便對於新增功能，但WordPress外掛安裝太多是真的會拖慢網頁載入速度，而且會有更多的安全性風險，除了不方便寫在佈景的功能以外，其他能不裝就不裝。

 

46.除了內文，其他區塊盡量減少圖片

網頁內文要圖文並茂這點我非常同意，也有利於SEO。但是其他地方，如側邊欄的地方，就盡量不要使用圖片做出效果，應該要使用CSS，並做到最簡化，「簡單風」是未來的趨勢，千萬別把網頁製作的太複雜、用太多圖片。用太多圖片會拖慢載入速度。

 

47.勿使用太複雜的導航文字

導航的文字真的不需要複雜，不需要像是一個成語一樣，只需要最簡單的幾個字就好。如「關於我們」、「連絡我們」、「訂閱我們」，其實這個還可以更簡單，把我們去掉也可以。

 

48.不要放太多的廣告

這點沒做到的人大概都是被金錢給迷惑，因為他們寫部落格的目的為金錢的成分很重。重點是，廣告太多不僅容易讓訪客對你的網站印像差、還會佔掉取多網頁版面。不過適量的廣告是非常ＯＫ的，畢竟能夠多買杯珍奶嘛～XD。

以上列出４８點比較重要的，在網頁設計中易犯的錯誤，就同開頭所說，不是完全正確，當然也沒有標準答案，只有最好的方法。

---

文章出處:

http://fundesigner.net/48mistake-webdesign/