說不定就是你——全球最醜網站設計分析

   最近我在優設網（http://www.uisdc.com/）上看到一篇有趣的文章，其中盤點了2015年全球最醜的網站設計。我將這些網站的缺點做了分類，在看過那麼多的優秀網頁設計後，我們不妨來看看這些“最醜”網站究竟醜在哪裡。

  一、排版混亂

 

   說這個網站是“the world's worst website ever"真的一點都不為過。排版混亂的網站讓人抓不到重點，閱讀性也極差。雖然在設計這個網頁的時候，設計者將每一部分內容都用特定顏色的框加以區分，然後我們還是無法抓住其瀏覽動線。因此在設計網頁時，我們要通過我們的排版設計為讀者規劃出一個合理舒適，一目了然的閱讀動線。

二、內容龐雜

   對你沒有看錯，這是一個叫arngren的購物網站首頁。如此多的圖片不僅讓人頭暈目眩，更讓我們立刻失去繼續瀏覽的興趣。這樣的錯誤往往出現在購物網站的設計上。

   尤其是一些購買年貨的網站或是購物商城的官網，太多的產品種類導致商家忍不住想把所有的商品圖全部放在同一個頁面上。這樣過於熱鬧的設計往往會分散產品本身的優點，全部都是重點意味著沒有重點。也許在設計這類網站時我們可以適當取捨，突出其中一個最具代表性的反而能引起消費者繼續購物的慾望。

 三、內容閱讀性差

   如此絢爛的配色除了能讓人眼睛不適外沒有絲毫的功能。也許設計師的初衷是希望通過彩虹讓人心情愉悅，但如此高明度高彩度的彩虹實在無法讓人有好心情。

   網站配色也是決定網站生死的關鍵性因素。太白的紙張不適合閱讀，太多亮色網頁會讓我們頭痛。柔和的配色不僅讓讀者有耐心看完網站上的所有內容，對讀者的眼睛也是很好的保護。太刺眼的顏色例如熒光色並不是完全不可取，在乾淨純粹的主視覺上適當點綴一些鮮明活潑的顏色也能起到畫龍點睛的效果。

  四、太多讓人分心的元素

   我們常常會在網站中穿插一些動畫，而這些動畫數量影響了一個網站的品質。上面兩張圖都是典型的失敗案例。同一個頁面中太多的元素一起動我們的眼睛就會無法集中在文字內容的閱讀上。這和圖片的使用是同樣的規則：少即是多。


  五：令人費解的元素

   假如忽視網站文字的顏色，以及七彩的菜單顏色，當你第一眼看到網站Banner時你是否會像我一樣對這個畫面的設計目的產生疑惑？

  我們在瀏覽網站時希望每張配圖都有明確的主旨，至少在信息的傳達上是清晰明確的。上圖這個網站的Bannner讓人困惑的地方在於四種樣式的文字、四張看似毫無關聯的圖，這樣的主視覺真的能傳達出這個網站的核心概念嗎？

   左上角那個誇張的面孔實在不是什麼讓人舒服的配圖，加上一個空空的浴缸，更讓我們覺得畫面詭異之極。

   冰冷、堅硬、不銹鋼質感，雖然那個置中的選單莫名其妙，但我們能一眼看出這是一個賣五金類產品的網站……錯！這是一個賣尺子的網站，更費解的是，整個網站沒有一張產品圖。

   雖然我們提倡“少即是多”然而這應該是個沒完成的網站吧？

  上述案例是否使你大跌眼鏡？在我們的設計網站時也常常犯類似的錯誤，不論是配色、選圖、排版，我們都希望把自己的技巧統統展示在同一個網站甚至是同一個頁面上，這樣過度設計的下場往往極其慘烈。在看了太多成功的案例後，一些失敗的案例也許會給你更深的體會。

    

  

買不買看首頁——購物網站首頁設計

   女生上網最愛做的事情之一，也許就是網購。不論是品牌官方網站，或是設計師的原創獨立品牌，即使是一家小小的服裝店在設計店鋪首頁時都希望能在最短的時間內呈現出最與眾不同的特質。可以說首頁的優劣從一定程度上展現了這家網店的品質。

   PS:今天選擇的幾家店鋪都是個人定期關注的，有一定的主觀意見。其中涉及到價格的部分均做了遮擋處理。
 

圖一

圖二

圖三

圖四

   購物網站大致上分兩類：首頁展現個性與特色（如圖一～三），或是首頁開門見山亮出優惠活動（如圖四）。在我看來兩種手法都很有吸引力——當我們對這家店的商品還沒什麼了解時，促銷活動會吸引我們在這個網站上繼續停留；同樣，強烈的個人風格也會讓消費者產生一探究竟的好奇心。

  

比較兩種行銷手段，後者的風險在我看來略微高與前者。展現個人風格很容易出現消費者覺得這個風格不適合自己，而轉戰下一家店鋪的情況。反而是類似於“X折”、“活動”、“滿X送X”的標語能刺激消費者進行衝動消費。

圖五

  就我個人而言購物網站的色調與主視覺是影響我繼續瀏覽的最主要因素，尤其是我初次瀏覽這家店鋪，對品牌、商品一無所知的情況下。

  

圖六

  如上圖所示的這家商店的首頁，個人覺得信息過多。主視覺由三欄七個畫面構成，最主要的畫面雖然所佔篇幅較大，但僅僅透過這一畫面我們無法對這家店的商品產生想像。尤其是中間與右邊兩欄的圖片色調是輕柔溫暖的，而左邊一欄圖片的顏色偏重。作為消費者我希望品牌官網中的信息，能讓我產生聯想，對商品有個初步的嚮往。

圖七

   購物網站很多是如圖所示長條形的。就我個人而言，我比較不希望購物網站的首頁過長、內容瑣碎。尤其是服飾類購物網站。在設計這一類的網站時我們可以通過推出的時間、色系等多種方式將商品歸類。

  圖七這家網站在我看到首頁時會覺得這是某位攝影師的個人網站，但這個網站的可取之處在於，圖與圖之間的關聯性很強。同一系列的服飾通過圖片的色調、版面的安排等都能得到很好的表現。

圖八

圖九

  圖八和圖九相較之下我個人更傾向於圖八的設計，美意季的商品不論從色彩上或是佈局上都有關聯性，由一個主視覺同領幾個相關聯的圖片，這樣的設計為網頁的整體佈局營造了律動感，使顧客在瀏覽時不會顯得無聊。

圖十

   圖十所呈現的是一家集合了多個設計師品牌的店鋪，雖然我本人對這些設計師的的作品多少有些了解，但對於一個新的顧客在我看來這個網頁在特徵表現上有些欠缺。雖然每個設計師的作品主視覺都用藍色的方框來表現統一性，網頁的版面也在規律中有所變化，但就我而言，我會一時抓不到每個設計師的最獨特的品質。網站很長，內容很多但又沒有非常獨特的地方，這樣的購物網站風險很大。

   

  以後當我們猶豫要不要繼續深入瀏覽一個購物網站時，看一看這個網站的首頁設計，說不定你就會有清晰的答案。

  

實用性網站設計

 

   網站鏈接：http://tangentgc.com/

   

   今天為大家介紹的是一家來自瑞典的衣物、鞋類清潔保養品牌Tangent GC的官方網站。

   如果要問哪個品牌給顧客純淨、天然的品牌印象，我們首先想到的也許就是無印良品，我餓每年今天為大家帶來的是另一個品牌的官方網站，和無印不同的是，這個瑞典品牌主打衣鞋清潔保養品，不論是網站結構或是網站中的產品、店面圖都給我們帶來簡約純淨的印象。

   Tangent GC的官網以白色為主色調，除了產品本身的色彩外，網站中的圖片以黑白灰這三種無彩色為主，而產品本身的咖啡色、橄欖綠等色彩自然柔和，給你健康的生活氣息。

   整個網站的架構並不復雜。首頁是由主視覺，兩欄式文字介紹和圖片以及產品、店面圖組成。從這幾次的網站介紹中我們不難發現，設計師越來越精簡首頁傳達的訊息、簡化首頁的結構。首頁往往採用一張滿版圖或是一段簡潔的文字敘述，在最短的時間內傳達出品牌的核心精神。

  不論是黑色或是白色，純色的使用往往能突出我們想要傳達的品牌訊息，將視覺焦點集中在產品本身上。黑色與白色被頻繁運用也絕不是偶然，這兩種顏色最大的共同點是有很強的包容性，有彩色搭配無彩色往往能突出前者的個性。

   這樣的頁面設計不僅讓我們充分感受到產品的細節，更讓我們感受到品牌所傳達出健康的生活理念。

   在前幾次的網頁分析中我們提到的留白的運用，在 Tangent GC的官網中也得到了充分地應用。不論是分頁設計或是主頁設計， Tangent GC的官網大多採用兩欄式設計。這樣的處理在日本的網頁設計中也十分常見，在東方人看來左右虛實的對比充滿了禪意。簡單來說，這樣兩欄式的變化不僅讓網頁架構同中存異，更具靈活性，同時也讓網頁內容得到了充分的呼吸。

   對我個人而言，也許是語言的緣故，我對其中介紹設計師理念介紹的部分有些無法適應。同樣是兩欄式的設計，個人覺得也許可以多補充一些該設計師的作品或是這一品牌商品的細節圖，來打破較長篇幅的文字給人閱讀上的疲勞感。

不論是欄位的設定或是網站的配色，Tangent GC都為我們提高了極具參考價值的設計範例。