美國策略專家Roger Ailes說：「7秒鐘」便決定了您在別人眼中的形象。

網站視覺設計的第一眼印象多重要？

根據《數位時代》12月號出版的 <發揮介面小巧思，對面網友看過來>，好的視覺設計能吸引網友的目光，並傳達品牌概念。賣場提供的平台和商品通常大同小異，藉由視覺設計，網路賣家才能建立訪客對網路商店「店面」的第一印象、進而引發消費意願。

視覺設計吸引訪客目光，但購物網站的資訊架構 (Information Architecture) 才是決定能否成功留住顧客、締造「轉換率」的關鍵。良好的內容組織和導覽系統讓網站的動線流暢、方便網友瀏覽資訊、查找商品；另一方面，越來越多網友使用關鍵字搜尋，購物網站也需要檢視標示系統、商品和標籤的命名是否迎合客戶的需求。

SEO專家awoo說：網友不用7秒鐘就決定了要不要再逛你的網站。
 
網頁在消費者眼中，甚至不用7秒鐘，就能決定對網站的品牌印象與好感度。
消費者常透過網站來了解一件商品、一間公司、企業，企業架設網站來跟網路上的消費者互動， 網頁視覺設計突出，才能迅速在消費者眼中留下好印象，傳達出企業的品牌形象與定位。
 
過去，實體店面是讓消費者認識商品與服務的方式。
網路崛起後，網路店面成了更划算的投資，省下店租、人事這些重要成本。 一開始，網站往往用來做品牌形象和發佈訊息，但隨著網路購物的興起，消費者開習慣上網找服務、買東西。 這樣銳不可擋的趨勢，讓大家開始注意『網路開店』的力量！
然而，在實體的世界裡，店面裝潢的好不好看，櫥窗擺設美不美觀，這些不只會影響消費者對店家的感受，也會影響消費者是否逛得久、時常回來光顧。
 

網路開店也是如此！
沒錯！您只有7秒讓消費者留下好印象，所以視覺設計的優劣，將會反映在您網站最後的業績成長。
我們就來比較看看如果您要租車，會對下列哪個網站印象深刻。
下面有三個租車網站，試問：一眼望過去，您會找哪一家服務？

租車網站第一號：

租車網站第二號：

租車網站第三號：

是不是選三號 ？！

以黑色帶出轎車的穩重與質感，網站資訊架構清楚整齊，提供租車搜尋。是不是比較吸引人呢！你看看，網頁視覺重不重要？

2010年CSS裸奔節就在4月9日！

awoo blog明天也會…脫光光見人。
明天，大家一起脫吧！

CSS裸奔節活動辦法

將你的網站的css樣式都去掉，包含所有的佈局， 顏色，背景什麼的就都沒有了(除非你使用table佈局)，只剩下html實體顯示出來。

CSS裸奔節的意義

從第一屆CSS裸奔節（2006年4月5日）開始，CSS裸奔節的意義在於：推動 Web標準、提倡簡潔為美、使用正確的 (x)html語義標記、良好的層次結構。

在html語義被極力推崇的今日，CSS裸奔節就格外的有意義！

CSS裸奔節的由來

為了推廣網頁標準以及帶動 CSS 的使用風氣，一位名為 Dustin 的外國 網友於 2006 年四月率先推出 CSS Naked Day 的活動，今年已是第5次舉辦，並得到許多網站和部落格的響應。希望透過這個活動，鼓勵網頁開發者使用正確的(x)html、語義標記，以及建構良好的層次 結構。

歷屆CSS Naked Day的舉辦時間

第一屆CSS裸奔節：2006年4月5日

第二屆CSS裸奔節：2007年4月5日

第三屆CSS裸奔節：2008年4月9日

第四屆CSS裸奔節：2009年4月9日

第五屆CSS裸奔節：2010年4月9日

(其實今年官方是沒有辦的，不過許 多熱心的網友還是有在號召喔！)

css naked day官方網站

現在教你如何脫掉…

一， jQuery語法：在你的head檔中加入
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
<!–
$(document).ready(function(){
  var cover=document.createElement(‘div’);
  cover = document.body.appendChild(cover);
  $(‘:last’).css({
    position: ‘absolute’,
    top: 0, left: 0,
    width: ’100%’,
    height: $(document).height(),
    zIndex: 9999,
    backgroundColor: ‘#fff’
  })
  .hide()
  .fadeIn(‘slow’, function(){
    document.title += ‘ (CSS Naked Day ver.)’;
    $.each($.makeArray(document.styleSheets), function(){
      this.disabled=true;
    });
    $(‘*’).removeAttr(‘style’);
  });
});

<!–
</script>

二，有關CSS Naked Day的外掛程式

如果你使用的是WordPress,可以使用WordPress CSS Naked Day外掛程式頁面下載後啟用即可。

 補充說明：CSS （Cascading Style Sheets）
zh.wikipedia.org/w/index.php?title=CSS&variant=zh-hant
根據維基百科的詮釋，是 W3C 定義 和維護的標準，一種用來為結構化文檔添加樣式的計 算機語言。 CSS 最主要的目的是將文件的結構與文件的顯示分隔開來。

引用來源

引用來源二

  這是一篇真人真事的故事，一個發生在知名"網路"遊戲公司的故事。

  話說，某天早上的晨間會議，董事長想知道如何大量取得某一網路社群名單，由於技術上仍存在許多問題，會議頓時陷入了僵局。突然間～！董事長靈光一閃，指著一位資深網頁設計師甲男大聲一喊：XXX，你不是很會電腦嗎？去當駭客，把名單拿來吧！
當場甲男楞住了！頓時不知該哭還是該笑～心想：

『我勒x＃＄％＆，我怎麼可能會呀～』

   但看著董事長寄予厚望的神情，又不敢當場讓董事長丟臉，於是在會後的一週提出了辭呈。這事或許誇張了一點，不過老闆叫MIS去換燈管與換插頭的事情也聽說過許多遍了。這事件清楚點出了台灣網路技術人才職務權責與專長界線劃分不清楚，是常態，也是悲哀。
在台灣的網路環境裡面，我們得承認某種程度的通才，是必然。不過只要沒有界線的延伸，上述的事件，只會不斷不斷的重演罷了。

連網站設計公司都搞不清楚的界線
   一般的企業主會搞不清楚這些界線，勉強都還可以接受（不要呀！）。但是到了專門承接網站設計的公司，若還是搞不清楚呢？我們現在立即可以到104看看大部分網站設計公司應徵網頁設計師或視覺設計師的條件。

   工作範圍包含了：有創意的視覺設計，網站動線，CSS切版，Flash效果與其他網站用的到的互動效果。技能要求要具備：視覺要屌是基本，熟悉W3C也要懂Javascript與jquery，最好AS也熟～哇哈哈。

  以上的描述，一點兒都不誇張，不少公司會提到80%以上的要求，似乎演變成了一種錄取"應該"要的條件。光是上述的職務說明，細分至少可以拆成六種不同的專業人才：視覺設計（創意設計），介面設計師，互動設設計師或UI設計師，資訊架構師，前端工程師，AS程式設計師等。原本是六個不同工作崗位的專長，專業的網站設計公司卻要求他們的網頁設計師要如此通才，這會專業嗎？怎麼可能～

接案價格低不是永遠的藉口
   我們知道網站設計公司第一個反駁的就是這句話。非常能夠理解，畢竟awoo以前也曾有十來個人的網站開發團隊。
   不過，當我們看到什麼叫做完整團隊架構的時候，又怎麼能夠容忍這一切呢？就不請六個人，也要四個吧～Right?並且就我們的經驗，細分得宜，流程上往往比一人身兼多職快的多，更重要的是團隊激發出來的作品，是振奮人心的！

   接案價格低？那就多接點案子，或是接價格高點的案子，輔佐不斷優化作業流程的精神，就撐的過去的～
   加油！網站設計公司就是有這樣的責任與義務，給業主最完整的服務團隊。（業主也請多開點預算啦XD）

通才型人才是不易在頂尖公司生存的
   自詡為通才型人才的朋友，根據我們的經驗，也許您永遠不愁找工作，但要爬上所屬領域的頂尖公司，機會卻是小的。
   舉我們實際的例子來說：以前在應徵網頁設計師的時候，總是看到很多資管系畢業的通才型人物，什麼都會一點。但是看到他們的"視覺"作品，往往都是令人搖頭的，就算有少看起來還可以的，但只要一跟傳統設計科班出來的，還是差的遠了。其實就我們的認知，程式設計師與視覺設計師，人格特質上本來就是南轅北轍，完全不一樣的人，怎麼可能兩種功夫都是"頂尖"，一定會有其中一項落在"一般水平"或"還可以用"而已。

  除非..您是天才。
  這道理其實不難懂，在大聯盟（頂尖公司）要求身一位好投手又要是好打者，那是不可能的發生的事情。就算有些投手打擊率還不錯，也只達到我們說的"一般水平"，並不是真正的好打者。

   您可以想像當王建民很驕傲的跟總教練說：我打擊也不錯耶！總教練的回答會是什麼嗎？專心把伸卡球找回來吧～所以，準備要投身網路界或已身在網路界的您，建議在專業領域要不斷精修再精修，弄懂每一個該懂的小細節，不厭其煩的重複做好每一個基本動作，這才是對的。通才只能是一小段過程，就像青棒會出現投手兼當第四棒一樣，但不應該是永遠的路線，這樣的選手是永無法在大聯盟大放光芒的。

一個網站要討好的人比您想像中的多
網站在製作之前，設計公司通常會對網站的目標族群進行分析與定義。
簡單的說就是清楚瞭解您的網站是為誰而設計的。通常一個網站不會只為了單一族群而設計，會有您預設會來看網站的客戶，內部員工（包含您自己），同行，甚至於政府相關機關等等，我們通常稱為網站關係人。當然，設計公司在製作網站的時候，某部分也會為了自己來設計。原因很簡單，只要設計突出，以後可以當此產業的代表作，藉此吸引更多同行來找設計公司。好，既然一個網站是為了那麼多人而設計，那麼要怎麼滿足各種不同族群呢?

討好替您賺錢的人
誰替您的網站賺錢，那就為他設計，這句話是我們常常掛在口中的。客戶第一，
這概念就是這麼簡單明確。所以，當我們準備開發一個新的網站的時候，如果情況允許，通常會對這個網站即將要迎接的客戶，進行簡單的訪談，藉此真正了解他們對網站的期望與需求是什麼，確保網站未來的規劃，能夠符合他們的需求。也可以顛倒來說，這個網站是在了解目標族群的需求之後，基於他們的需求，
下去進行功能的規劃與開發。

您喜歡不代表您的客戶喜歡
您聽起來或許都很合理，甚至可能會大聲的說：本來就是該這樣，客戶優先！
不過，實際的狀況往往是，迎合您的需求大於客戶真正的需求。
指著設計公司的鼻子高聲吶喊：這不是我要的感覺，我要XXX我要XXX
這就是災難的開端，噩夢的開始！！
很多專案在我們開發之初，對目標族群都進行了深入訪談，
進而針對訪談後的結果，進行網站的規劃與設計。
但是到最後，這些結果往往都會被您（業主）的感覺推翻。
原因是：您覺得應該要怎麼樣才對。更精確的說，就是您個人喜歡怎麼樣。
舉個例子來說：網站的首頁，您就是覺得要有一段開場的動畫，歌功頌德公司有多偉大，多有規模，技術多好，老闆次人中之龍。在這裡要跟您說，開場動畫是網站使用者最討厭的事情之一，97%以上都會直接跳過不看，甚至覺得干擾。
我們從許多數據中得知，公司簡介是網友最不關心也最不感興趣的網站內容。
所以，您覺得很爽的事情，通常就是客戶很不爽也不在乎的事情。
感到很驚訝嗎 ? 改變吧！

打開心胸，迎接客戶
所以，您的網站要能夠邁向成功之路，第一步就是打開心胸，傾聽客戶的聲音，了解他們實際的需求，捨棄自我的喜好，學著去從客戶的想法裡面，讓網站的規劃更貼近客戶實際使用。
Google就是無時無刻在傾聽蒐集客戶回饋的公司，向Google學習吧！加油

使用性大師Jakob Nielsen日前接受WDD網站的專訪中，談到了許多個人經驗與對網頁使用性的看法。
在上一篇部落格中，awoo提到了網頁下載速度要快的重要性，因為消費者愈來愈沒有耐心了。在WDD的專訪中，Jakob Nielsen也提到了相同的觀點。

「現在是寬頻上網時代了，人們點擊網頁的時候，網頁下載速度不應該超過1秒鐘…」使用性大師Jakob Nielsen說。

網頁瀏覽速度一定要快、快、快！
由於寬頻上網，不像過去可能受限於頻寬，使得網頁下載速度很慢。然而，現在網站還是常面臨網站下載速度不夠快的問題，源自於網站使用大量的動態、圖片，甚至是使用FLASH架站。
您的網頁是否放了太多圖片？太多動態影像(FLASH、GIF)？使得網頁跑得很摱？

使用性測試除了網頁瀏覽效率，還能從測試中了解使用者，對網頁的易讀性、網站具記憶性、網頁出錯率與滿意度做出分析。

測試網站使用性的最好方法是什麼？
找值得信賴的受測者，讓他在您面前使用您的網站。然後，閉上嘴仔細讓他說出對網站的看法。
簡單來說，使用性測試您只需要5個受測者，就能發現足夠的使用性問題。

儘管是這麼簡單的方法，還是很少網站做得到。因為您不能請朋友或同事做使用性測試，您真正該找的是那些對您的網站一無所知的使用者，他們不能草率了事，要實際去使用，而且您不能影響受測者，不能提示他們該如何操作。
閉嘴傾聽使用者是整個測試的重點，所以最好找那些富有經驗的測試團隊去做，遵守基本原則，客觀地進行使用性測試。

網頁內容多、小功能多是否符合使用性
現在許多網頁都充滿了許多內容，像是最新消息、Twitter、plurk推文、RSS 訂閱等等，這些功能有些看似符合消費者的需求，然而網頁中只要東西愈多，就愈難維持良好的使用性。
簡潔始終是最好的選擇！
但如果您的網站使用者真的需要那這麼多內容與功能，就更需要不斷進行使用性測試，才能有效改善網站的使用性。

更多訪談內容，請見引用來源。