iWare網頁設計網誌

Twitter、Google、Facebook這一些我們生活中早就已經熟悉到不行的網路服務龍頭商，也曾經有過十分可笑的網頁設計造型。當年的網頁設計技術不像今日既豐富又多變，大多只能用十分單調的元素來做設計。

Twitter那怪異的綠色Logo造型真的讓人不敢恭維，與今日形象圖案的藍色小鳥相比真是差太多了！

Facebook看起來也十分的陽春，不僅畫面有著許多零亂的文字，還放了一張美國大學生的生活照片，就如創辦人當初所言：Facebook的初衷是為了每國大學生，想知道同學間的曖昧關係所創立的。

至於Google，跟今天的Google相比之下樣子還蠻接近的，比較大的差別是搜尋的選項看起來頗為難用外，還有一個大大的About Google更顯得當初創立亟欲一炮成名的那種怪異感覺。最後，他們確實擊敗了當年各家網路大公司如Excite、WebClawer、 Infoseek…成為搜尋引擎的龍頭。

一直以來，馬路科技與客戶配合的經驗十分豐富，也接手過各種大大小小的網頁設計案例。但不論哪一種客戶來訪，我們通常第一個想問客戶的問題就是：「您的網站想要什麼樣的風格」或是「有沒有哪個網站讓您看起來特別的欣賞」。

因此，我們整理了許多客戶心目中覺得十分完美的網站，與大家分享一下不同的產業、不同的網站之間有何差異，希望能夠讓千頭萬緒的客戶，能夠與我們一起欣賞網站，找到網站設計的趨勢與特色。

Apple一直是許多設計產業、3C科技產業、視覺藝術產業十分喜愛的設計風格，也有許多客戶希望我們朝著這個方向努力，以下是我們對於Apple的網站的部份觀點。

首先我們來到了Apple蘋果網站的首頁，他們的首頁直接呈現的，都是當時最重要的新品訊息。並且，網頁沒有複雜的Flash動畫，只有素雅、單純的產品示意圖片展示區塊，加上簡潔強勁的文字，俐落分明的視覺體驗打動了每個前來的消費者。

Apple的網頁所採用的視覺質感配色為白色系，不僅與他們的硬體產品色系相關連，也與Apple所開發的最重要應用軟體iTune介面設計如出一轍。Apple 的產品網頁設計，使用了大量的後製圖片，讓用戶一眼就知道他們的產品有什麼特色、該怎麼使用，以及如何購買。

技術的細節部份，除了在網頁的規格表內才會出現外，複雜的技術名詞只會在他們的Support專屬網頁才會出現。這一點我們也經常的鼓勵客戶，不要 一昧的把專業的名詞放在產品頁面上，當一個產品頁面太多資訊，會造成初次訪問者的排斥感，因此不妨將產品特色頁與專業的資訊分頁展示，有興趣的客戶便會自 己找尋。

當然，我們可以看到Apple的網站有很多網頁設計上的用心與細節，例如產品的配件、規格、比較表等，都是可以讓人一眼明白的貼心設計。

即使我們沒有蘋果那麼神通廣大的創意，也沒有鬼才Steve Jobs的加持，但是Apple網站的簡潔大器風格亦是許多企業主認為視覺傳達十分成功的網站。

客戶透過你的網頁來初步認識你的公司，不論是內容、圖片或是版面的畫面，都會影響客戶對於你的公司形象。所以企業的網頁十分的重要，只有製作出滿足客戶需求的網頁，企業才有可能取得客戶的初步信任，並且引發與您聯絡的契機。

只是，對於網路設計公司來說，設計網頁是天職；但是對於小企業來說，製作網頁可能是第一次經驗，因此我們可以簡單歸類出常見的中小企業網頁設計五大錯誤。

1. 差勁的瀏覽介面

這是一個網頁設計的細節項目，雖然初期製作時難以注意，但是不理想的瀏覽介面往往會讓使用者感到十分的挫折，並且產生對於企業的不良印象。

好的瀏覽介面，基本上必須能夠讓使用者願意長時間停留於網頁中找尋有用的資訊，這意味著網站必須具有易於閱讀的特性、充實的內容，以及導引客戶與公司聯繫的設計等，而這正是企業建立網站的主要目的。

好的瀏覽介面往往代表著易於使用度高，以及使用介面友善等眾多優點，這部份不妨可以參考許多成功的部落格以及企業網站，他們是如何安排瀏覽的介面，千萬不要設計出一個網站要令使用者思考該如何走到下一步，因為他們會考慮離開網站並找尋其他服務。

以下有幾個建議：
● 靈活的使用小圖示或圖案幫助導引，這可以參考馬路科技收集的免費圖片資源
● 善用階層式的設計，最重要的功能永遠放在畫面的最頂端，其次是內容置中，而最不重要的訊息如法律與使用者規範等放在最底部。
● 讓使用者知道自己身在何處，這一點可以用網站地圖呈現外，現在也有一種功能名為階層式選單的技術，這種普遍應用於網路論壇的層級技術，可以讓使用者很快的知道自己在哪。

2. 客戶積極聯絡的機制

很多中小企業製作好了網站，但是卻發現並沒有人透過網路與企業聯絡商務，我們看了一下原因之後，發現大部分的中小企業對於客戶聯絡機制製作得並不好，也沒有令客戶願意積極聯繫的動機設計，如此就會失去了客戶。

幾個簡單的設計，就能夠讓客戶很簡單的就與您聯繫。舉例來說：做一個「立即與我們聯絡」的按鈕是最基礎的，但也是十分搶眼的設計。如果再加強一點呢？例如「現在與我們聯絡，即享有優惠服務」，是不是看起來更為誘人呢？

以下有幾個建議：
● 利用不同的元素勾起客戶與你聯絡的動機，例如不同的文字顏色、圖案、文案等，都能夠讓客戶更有機會主動與你聯絡。
● 不要讓客戶猶豫點下去會發生什麼事情，因此設計聯絡的連結，文字務必清楚明白、圖片也需簡易好懂，過度抽象會引起客戶的焦慮。
● 不要使用過度，許多企業為了與客人聯繫，每個頁面都貼上了「與我聯絡」的圖案，這樣一來可能會讓客戶不認識你之前，就引發了反感。

3. 顏色與對比

大部分的企業不會把顏色與對比放在設計的重點，往往覺得只要看得順眼即可，不過我們的建議是應該要認真的看待對比這件事情。網路使用者閱讀文章的方式很多不同的因素與背景，其中有可能您的客戶年歲較大，對比度太低的文字對於他們來說閱讀十分的困難。

因此顏色與對比對於網頁設計來說，成為十分重要的設計元素，因為透過了這兩個設計，可以傳達您想給客戶的訊息，如：文字中的重點、產品的訊息、服務的優勢等等，都可以透過不同的對比呈現出來效果。

此外有幾個建議可以給您做個參考：
● 使用網路上提供的對比工具來協助您設計網頁
● 除了對比的工具以外，還有對比的情境設計網站，可以透過整體的畫面版型給您很好的建議
● 最簡單的顏色與對比的呈現方式，就是「讓重點看起來更不一樣」，例如不同的顏色、更大的尺寸、特殊的字體等等。

4. 貧乏的內容呈現

或許內容並非網頁設計所能控制的，但是內容與網頁設計卻是習習相關。因為大部分的中小企業不太熟悉如何將內容呈現在網路上，因此呈現的內容不是過多，就是過少，使得設計人員在版型的規劃上出現困難，進而使得讀者不易閱讀。

許多網路使用者看網站並非逐一看字，而是用快速掃描的方式瞄過一遍，然後再決定是否繼續閱讀，這表示第一眼的舒適度十分的重要。內容的層次設計就成為讓使用者觀看時，舒適與否的關鍵設計。

內容版型設計的部份可以注意以下的重點：
● 網頁留白的部份並非不重要，而可能是更重要的，原因在於人們不會花時間看空白的部份，進而會將焦點移到有文字與圖片的部份。
● 分段可以讓內容更容易閱讀，請利用重點標題、大標題、圖形文字等方式強調重點
● 排版可以使文字更容易閱讀，諸如字體的大小、行距、間距等設定都需要花費心思加以調整

5. 整體雜亂

最後提到雜論版的問題，大部分的中小企業並沒有十分完整的企業形象，也就是說素材十分的凌亂，不論是文字、文件檔案、照片、圖片都沒有一致的整體感，這樣的問題有時也會出現在網頁設計上。

此 外有些中小企業會安排使用多媒體的方式，如Flash動畫呈現企業的形象，不過好的Flash可以提昇企業的質感，但是不好的Flash動畫安排也可能會 毀了一個網站，這也是造成網站雜亂無章的問題。雜亂無章的網站會使觀看者快速的離開，過高的離開率會使得搜尋引擎認定網站品質不佳，會導致網站的排名日益 下滑。

如何克服雜亂的現象：
● 放上內容時，請務必先想想：這個東西有必要放在網站上嗎？如果放了該如何佈置會比較順眼？
● 將重點放在如何幫助客戶找到資料，而非一次把資料塞給客戶，因此可以想著將內容、廣告、促銷訊息區域加以區隔化。
● 將你的資料整理並且理出優先的順序，將最優先、第二優先的放至於明顯的版面，其餘的則斟酌安排之。

原文：

http://mashable.com/2011/04/10/5-web-design-mistakes/

去年我們曾經提到了網路設計的趨勢中，Flash仍有很大的多媒體優勢，不過HTML 5的潮流，可能讓Flash原本擁有的市占率優勢帶來極大的衝擊。

首先是Flash的革新速度過慢，使得今年即將起飛的平板電腦、次世代智慧手機等裝置無法充分的發揮Flash的優點，甚至會帶來效能的延遲或是系統錯誤。原本Adobe承諾的手機版Flash軟體目前並沒有帶來太大的作用。即使在即將問世最新的Android 3.0智慧手機系統上，Flash的支援也遲遲尚未公佈讓用戶下載使用。

另外網站也察覺到這樣的趨勢，自然他們不可能將Flash的用戶排除在外。例如目前全球最大的影音網站Youtube早就提供了HTML 5影片的格式，如此不論是iphone或是ipad都能夠無阻的播放影片。這個趨勢連中國的影音網站都已經注意到了，例如土豆網也提供了HTML 5的影片服務，讓2011年的影音市場破除了Flash的限制。

原本2010年是Adobe Flash進軍手機產業的絕佳機會點，然而與Apple的爭議加上自身的變化不夠快，讓HTML 5有了機會。HTML 5未來除了是取代Flash成為多媒體網頁設計的主流標準外，從影音網站已經加速支援HTML 5的態勢分析，Flash要在行動上網市場取勝的機率可說是越來越小了。

自從1990年Internet推出了WWW到今天以來，網頁的錯誤總是十分的難免。其中又以404（找不到網頁）這樣的訊息最為常見。不過大部分的網頁只會出現制式的錯誤訊息，稍後我們會分享一些，世界頂級企業所設計的網頁中，所看到的不同錯誤訊息畫面。

雖然出現了網頁錯誤，是一個網站服務不穩定、或是設計不當的一個警訊，不僅對於瀏覽者會覺得不悅，搜尋引擎也會認為網站欠缺維護而會降低網站的分數，間接 會使搜尋的排名降低，但有時只要設計者的一些巧思，至少可以讓瀏覽者看到了錯誤畫面時，覺得企業是有歉意的，如此一來也可以使雙方的關係較為緩和。

以下是我節自一些國際知名的網站所設計的404錯誤畫面，有些大秀美女圖、有些則是採用視覺印象派的照片、更有企業的招牌掉了一半，且大方承認自己設計出 包了，請大家多多包涵…等訊息，不論哪一個看了之後都會讓人覺得火氣消了一半，真是相當的幽默，因此推薦大家可以參考看看，用在自己的網站設計上。

大部分的設計師，想要設計一個相片幻燈片的網頁，可能第一個想到的工具就是Flash，不過對於不熟悉Flash的一般人來說，製作相片幻燈片就是較為高深的工作，然而如今有一套不錯的軟體，能夠幫您做到客製化的相片幻燈片效果：Visual Lightbox。

Visual Lightbox這一套軟體的最大優點，就是使用JQuery的技術，製作出相片幻燈片，操作的介面十分的簡易，只要透過幾個簡單的動作，就能夠完成相片 的播放數量、控制排列、整理版面、播放順序…等都不是問題，比起許多網路相簿內建的幻燈片功能都更為豐富。

使用Visual Lightbox還有一個優點，那就是相容於更多平台，例如不支援Flash的iphone手機與ipad平板電腦。這一點對於日益普及的行動裝置來說，顯得十分的重要。此外也有加入相片文字註解的功能，也就是說這樣的相簿對於網路搜尋優化會更有幫助。

幻燈片可以具有多種效果：旋轉、放大、自動播放等功能一應俱全，設計好後也可以預覽成果。此外如果您不熟悉HTML語法，軟體也可以幫你自動的安插在網頁的檔案中，接著只要上傳到自己的FTP之後，就能夠看網頁多了幻燈片的效果，十分的便利

http://visuallightbox.com/

只要對於色彩十分講究的視覺設計師，一定都會有一本Pantone公司所推出的色彩參考書籍。也由於 Pantone對於顏色的詮釋十分的精準，因此許多產業指定使用Pantone所推薦的色彩，舉例來說，在日本就有Pantone色彩手機，而美國則有 Pantone的服飾，可見應用於日常生活之廣泛。

每年，Pantone也會推出年度的代表顏色，例如2010年的色彩是15-5519（海洋藍），視覺上的呈現就是碧海藍天的舒暢宜人感受。2009年的顏色則是14-0848（Mimosa，黃色的含羞草）。

2011年Pantone的代表色號為18-2120（金銀花），所代表的意義為：慶賀、自信、活力、勇於挑戰新世界。單純的精神，讓您迎接每一日的挑戰！

雖然我們不知道Pantone每年如何挑選顏色成為年度色彩，也不像時代雜誌挑選每年風雲人物那麼重大，相信大家過了新年之後就會忘記了Pantone，但對於設計師來說，多認識一個嶄新的特殊顏色，就能多為客戶提供設計上的選擇呢！