柏小小從開始運用HTML作網頁到現在會寫程式掛資料庫也已經有了一段不短的時間了，看過的網頁也可說不計其數，說白一點我看過的網頁搞不好比我吃過的豬排便當還多
在瀏覽一些網站作品的時候，我常常會去注意他們的頁面構思和佈局，發現其實越是專業的網站或部落格，甚至人氣越高的部落格，整體頁面給人的感覺越清爽，頁面佈局越簡單、整齊！
我想這意味著一個訪客潛意識中比較容易去接受的視覺觀感，但有的時候網頁（尤其是部落格這類專屬個人的頁面）製作者可能基於分享、甚至是炫燿的心理，在網頁上加入了過多特效、音樂、影片等等，雖然這無可厚非，但有的時候已經影響到訪客的權益而不自知。
從網頁設計者的角度看，當然會希望網站做的出眾，讓訪客印象深刻，但一般最常犯的卻往往也是這一點 - 矯枉過正，充實的不是內容，而頁面特效小工具等卻充實了一堆令頁面除了真正的內容之外，還塞了很多雜七雜八的東西，看起來頂多像是一間麻雀雖小、五臟俱全的雜貨店，而非整潔明亮、乾淨清爽的百貨公司。
這是個CLASS（格調）和奇檬子的問題。
我們做網站，作部落格，目的是什麼？當然是給所有人看的！試著認真的去瀏覽自己的頁面，從訪客、從一個客戶的角度來看自己的作品，而非將自己主觀的、喜歡的硬塞給訪客
我稍微歸納整理出幾個柏小小最不能接受的網頁設計方式讓大家參考一下
1.自動播放音樂的網站： 因為柏小小一開電腦就是要配音樂，我相信一定有不少朋友也有這樣的習慣，當你在聆聽自己喜歡的音樂時，突然網頁開出更大聲的音樂擾亂興致，還會想看下去 嗎？假如網頁的音樂不是訪客喜歡的又關不掉，那事情更大條！要我的話二話不說直接關了！不是說不能放背景音樂，而是要放的話就讓讀著有一個選擇接受的權 利，非必要不要設定自動播放，就算要設定也要提供音量和關閉的選擇，那種隱藏的播放器更是鴨霸中的鴨霸！
記住：你喜歡的不見得所有人都喜歡，可能他喜歡你的內容，卻痛恨你的音樂
2.使用花花綠綠的顏色配置：過多的顏色種類很容易造成視覺上的疲勞，也許作者的本意是想讓網頁看起來鮮豔多姿，但因為審美觀有點問題而弄巧成拙，顏色一般來說用3-5種相近或相對的色系就夠了，過多又隨性搭配的顏色還不如只用黑白雙色印刷的好，好好的一個網站本身不用搞得像藝術名畫，尤其直接使用照片當背景卻沒有做單色淡化處理造成連閱讀都有困難
3.使用動畫當背景和素材：雖然說動畫用在網頁上可以增加一些活潑氣息，但是最多點綴一下就夠了。我曾經看過有部落格看起來像黃金夜總會還是電子花車，背景是一閃一閃亮晶晶，邊框是百花盛開和千草搖擺，連字體都閃閃爍爍看差點沒變親民黨（台語：瞎掉），一個好的版面配置可能因為這東西而完全搞砸整體質感， 失敗中的失敗！
4.使用過多種指標樣式：滑鼠指標樣式也只要兩種就夠了：一般狀態和超連結狀態，我曾經看過有的網站這裡是手指，那裡是十字，換了頁又變成亂七八糟的形狀，完全搞不清楚文字的狀態，要不然就是拖一條彩色閃閃發光的長尾巴還在眼前晃來晃去，整個氣氛就因為那一根而讓我毫不猶豫的按下Ctrl+W（我是用 FireFox）。
5.使用注音(火星)文：這是最不知道怎麼講的...看到這類的東西我只恨Google為什麼不開發火星文翻譯系統，還有另一種火星文叫做「綿延不絕！標點無視君」，顧名思義就是從頭Rap到尾像在數饒舌，全文沒有一個標點符號讓人看到眼睛脫窗屁股脫肛，幸好這種類型大都發生在討論區、論壇，我的靈魂之窗才 沒有離家出走太多次
6.濫用字體：粗體、標準體、斜體通通一起來，甚至細明體、標楷體共存，或是這行用紅色、那行又換一種顏色，看起來不但沒有比較活潑反而還很凌亂
7.濫用特效：這其實和第三點有異曲同工之妙，只是進化到使用JavaScript等程式來實現，又沒有做妥善規劃，突然出現一張飛過過夜空，好像看電影的時候在有蒼蠅在旁邊亂飛
8.網頁太肥：網頁上所有元素都是需要使用者下載回去才有辦法計算、呈現，圖片盡量以真正的縮圖來表示，不是調整尺寸而已，而長條型的背景可以用1px的圖素作延伸有效的縮小網頁元素的容量加快載入速度，否則要是遇到還在用56k老古董的訪客...等到鬍子都變白了！
綜合以上幾點，會令人難過的網站不外乎是讓訪客感覺到沒有被尊重，我想除了上面提到的之外，還可以補充幾個大原則：
1.色系、樣式統一：可以幫助讓訪客一眼就了解這個區塊是屬於何種內容，比較不會有漫無目的尋找的窘況
2.考慮訪客電腦的使用狀況：要放音樂的時候，請選擇能夠調整音量和停止/暫停的播放器，非必要別設定自動播放，如果真的希望大家去聽又怕訪客找不到播放器，可以選擇將他放在明顯的位置或用明顯的文字或記號來當標地
3.少用動畫：需要動畫點綴盡量以不影響閱讀為原則，例如標題的山水圖片作個水面波動特效就很漂亮了，沒有必要還加上個雪花紛飛還搞個黑底白字，其他除了強調之外，動畫是能不用就盡量不要用
4.版面設計以現行主流趨勢為優先考量： 例如現在螢幕的主流已經在19吋以上，解虛度也多半在1280寬度以上，還在沿用1024寬度已經趨向少數，所以 柏小小在這裡的模板就採用1152的寬度來設計，其實1280和1440的螢幕解析度看起來感覺都不錯，還有現在用火狐的使用者也越來越多，更講究一點還 可以為IE和FF之間做不同的設定(在CSS中使用 !important)
5.需要用圖片當背景最好做單色化+淡化處理：否則彩色鮮豔的相片很容易造成字體辨識不易、閱讀困難
最後，網頁是公開的，是做給全世界人看，不是只給台灣人看，或是給自己看
在設計的時候，請站在訪客的角度來看網頁，會不會造成某些特定的困擾？看了會不會傷眼？我想這是一個受歡迎的網站/部落格的一個很重要的因素，因為這是讓訪客不至於一來就想走的最重要因素：要讓訪客一眼不至於感到不適，甚至還感到很舒服或很有興趣，沒有困擾就是開始接受的第一步，否則縱使有再好的內容也沒幾個人看，沒錯吧？
在瀏覽一些網站作品的時候，我常常會去注意他們的頁面構思和佈局，發現其實越是專業的網站或部落格，甚至人氣越高的部落格，整體頁面給人的感覺越清爽，頁面佈局越簡單、整齊！
我想這意味著一個訪客潛意識中比較容易去接受的視覺觀感，但有的時候網頁（尤其是部落格這類專屬個人的頁面）製作者可能基於分享、甚至是炫燿的心理，在網頁上加入了過多特效、音樂、影片等等，雖然這無可厚非，但有的時候已經影響到訪客的權益而不自知。
從網頁設計者的角度看，當然會希望網站做的出眾，讓訪客印象深刻，但一般最常犯的卻往往也是這一點 - 矯枉過正，充實的不是內容，而頁面特效小工具等卻充實了一堆令頁面除了真正的內容之外，還塞了很多雜七雜八的東西，看起來頂多像是一間麻雀雖小、五臟俱全的雜貨店，而非整潔明亮、乾淨清爽的百貨公司。
這是個CLASS（格調）和奇檬子的問題。
我們做網站，作部落格，目的是什麼？當然是給所有人看的！試著認真的去瀏覽自己的頁面，從訪客、從一個客戶的角度來看自己的作品，而非將自己主觀的、喜歡的硬塞給訪客
我稍微歸納整理出幾個柏小小最不能接受的網頁設計方式讓大家參考一下
1.自動播放音樂的網站： 因為柏小小一開電腦就是要配音樂，我相信一定有不少朋友也有這樣的習慣，當你在聆聽自己喜歡的音樂時，突然網頁開出更大聲的音樂擾亂興致，還會想看下去 嗎？假如網頁的音樂不是訪客喜歡的又關不掉，那事情更大條！要我的話二話不說直接關了！不是說不能放背景音樂，而是要放的話就讓讀著有一個選擇接受的權 利，非必要不要設定自動播放，就算要設定也要提供音量和關閉的選擇，那種隱藏的播放器更是鴨霸中的鴨霸！
記住：你喜歡的不見得所有人都喜歡，可能他喜歡你的內容，卻痛恨你的音樂
2.使用花花綠綠的顏色配置：過多的顏色種類很容易造成視覺上的疲勞，也許作者的本意是想讓網頁看起來鮮豔多姿，但因為審美觀有點問題而弄巧成拙，顏色一般來說用3-5種相近或相對的色系就夠了，過多又隨性搭配的顏色還不如只用黑白雙色印刷的好，好好的一個網站本身不用搞得像藝術名畫，尤其直接使用照片當背景卻沒有做單色淡化處理造成連閱讀都有困難
3.使用動畫當背景和素材：雖然說動畫用在網頁上可以增加一些活潑氣息，但是最多點綴一下就夠了。我曾經看過有部落格看起來像黃金夜總會還是電子花車，背景是一閃一閃亮晶晶，邊框是百花盛開和千草搖擺，連字體都閃閃爍爍看差點沒變親民黨（台語：瞎掉），一個好的版面配置可能因為這東西而完全搞砸整體質感， 失敗中的失敗！
4.使用過多種指標樣式：滑鼠指標樣式也只要兩種就夠了：一般狀態和超連結狀態，我曾經看過有的網站這裡是手指，那裡是十字，換了頁又變成亂七八糟的形狀，完全搞不清楚文字的狀態，要不然就是拖一條彩色閃閃發光的長尾巴還在眼前晃來晃去，整個氣氛就因為那一根而讓我毫不猶豫的按下Ctrl+W（我是用 FireFox）。
5.使用注音(火星)文：這是最不知道怎麼講的...看到這類的東西我只恨Google為什麼不開發火星文翻譯系統，還有另一種火星文叫做「綿延不絕！標點無視君」，顧名思義就是從頭Rap到尾像在數饒舌，全文沒有一個標點符號讓人看到眼睛脫窗屁股脫肛，幸好這種類型大都發生在討論區、論壇，我的靈魂之窗才 沒有離家出走太多次
6.濫用字體：粗體、標準體、斜體通通一起來，甚至細明體、標楷體共存，或是這行用紅色、那行又換一種顏色，看起來不但沒有比較活潑反而還很凌亂
7.濫用特效：這其實和第三點有異曲同工之妙，只是進化到使用JavaScript等程式來實現，又沒有做妥善規劃，突然出現一張飛過過夜空，好像看電影的時候在有蒼蠅在旁邊亂飛
8.網頁太肥：網頁上所有元素都是需要使用者下載回去才有辦法計算、呈現，圖片盡量以真正的縮圖來表示，不是調整尺寸而已，而長條型的背景可以用1px的圖素作延伸有效的縮小網頁元素的容量加快載入速度，否則要是遇到還在用56k老古董的訪客...等到鬍子都變白了！
綜合以上幾點，會令人難過的網站不外乎是讓訪客感覺到沒有被尊重，我想除了上面提到的之外，還可以補充幾個大原則：
1.色系、樣式統一：可以幫助讓訪客一眼就了解這個區塊是屬於何種內容，比較不會有漫無目的尋找的窘況
2.考慮訪客電腦的使用狀況：要放音樂的時候，請選擇能夠調整音量和停止/暫停的播放器，非必要別設定自動播放，如果真的希望大家去聽又怕訪客找不到播放器，可以選擇將他放在明顯的位置或用明顯的文字或記號來當標地
3.少用動畫：需要動畫點綴盡量以不影響閱讀為原則，例如標題的山水圖片作個水面波動特效就很漂亮了，沒有必要還加上個雪花紛飛還搞個黑底白字，其他除了強調之外，動畫是能不用就盡量不要用
4.版面設計以現行主流趨勢為優先考量： 例如現在螢幕的主流已經在19吋以上，解虛度也多半在1280寬度以上，還在沿用1024寬度已經趨向少數，所以 柏小小在這裡的模板就採用1152的寬度來設計，其實1280和1440的螢幕解析度看起來感覺都不錯，還有現在用火狐的使用者也越來越多，更講究一點還 可以為IE和FF之間做不同的設定(在CSS中使用 !important)
5.需要用圖片當背景最好做單色化+淡化處理：否則彩色鮮豔的相片很容易造成字體辨識不易、閱讀困難
最後，網頁是公開的，是做給全世界人看，不是只給台灣人看，或是給自己看
在設計的時候，請站在訪客的角度來看網頁，會不會造成某些特定的困擾？看了會不會傷眼？我想這是一個受歡迎的網站/部落格的一個很重要的因素，因為這是讓訪客不至於一來就想走的最重要因素：要讓訪客一眼不至於感到不適，甚至還感到很舒服或很有興趣，沒有困擾就是開始接受的第一步，否則縱使有再好的內容也沒幾個人看，沒錯吧？
推薦上專欄
沒有留言:
張貼留言