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

   最近我在優設網（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都為我們提高了極具參考價值的設計範例。

  

  

  

會呼吸的網站設計

   提到網頁中的留白設計，我最先想到的是日本設計。不論是網頁、包裝甚至是產品本身，日本的設計品像一個低調內斂的中年男子，或是一個白滿頭白髮的老者。
 
  和東方設計中的禪意留白不同，今天我們介紹的是一個丹麥網站B14，其中的留白設計與細節的表現，體現的是年輕人的活力與風趣。

網站鏈接：http://www.b14.dk/

   之所以說這個網站會呼吸是當我們打開這個網頁時，首先看到的是黑白灰的配色。這與我們先前介紹的以黑色、白色作為主視覺的網站似乎沒什麼不同。而當我們將滑鼠滑到圖片上時——

   ——圖片變成了彩色。這的確是一種讓人眼前一亮的表現方式，就像步入森林後深吸一口氣，感受到的是新鮮的大自然的氣息。

   

   我們在編排自己的作品集或是為客戶拍攝、製作產品型錄時，我們是否會習慣性地採用中規中矩的構圖？產品除了平放在白色桌面上，是否能打破束縛呢？B14為我們在拍攝方面提供了很好的範例。

   我個人認為，網頁的作用是傳播與推銷。一個網頁的背後所包含的技巧與手法，最終目的都是更好地呈現這個網站中的作品或是產品。產品所包含的生命力，通過攝影的手法加以呈現，將平面與立體、動態與靜態相結合，這樣的設計打破了原本白色網頁的平靜。這與東方式的設計最大的不同在於，運用了這樣年輕化的處理，表現了平靜的外表下小小的叛逆。

   這樣的叛逆還運用在網站的文案設計上

   當我們瀏覽完了這一系列的作品後，原本純白的畫面瞬間變成了黑色，整個網頁以兩欄式呈現：左邊一欄顯示的是下一個系列的作品相關資訊。而右邊一欄有一行字：“ 

Did we pique your interest?

（我們的作品讓你不爽了嗎？）外加一個小小的箭頭提示你”這裡可以讓你抒發不滿“

   這樣的語言不僅不會引起讀者的不滿，反而能讓大家莞爾一笑。網頁上的文字也是反映設計師性格的一個重要因素。

   在一些目錄功能的的選單設計上，B14從用的是常規的黑底白字，而當我們的滑鼠移動到選項上時，畫面中出現了該作品的某一畫面，高彩度的畫面打破了濃重的黑色，讓整個畫面在整齊產生變化，不會讓人覺得單調乏味。

不乏味的白——Hys-inc網頁分析

                                                         網站鏈接：http://www.hys-inc.jp/

   在連續分享了是三個黑色系的網頁後，今天為大家帶來的是來自日本的HYS公司的官方網站，該公司主要負責的是網站設計、互動性設計等具有科技感的設計。上圖是HYS公司的官網主視覺。和平面不同的是，真正體驗該網站時，頁面中間密集的點構成了一個不斷旋轉、放大縮小的球體。

   想要突顯自身品牌的現代感、科技感以及簡潔的質感，與白色契合度最高的字體之一，應該算得上是無襯線字體中的Univers以及Helvetica，該網站應用的英文字體與其這兩種字體相比更緊湊。這樣的字型運用在公司名片、信封、信紙上時顯得簡潔但不簡單。

   不論是網頁或是公司名片、信紙排版，HYS沒有呈現太多花哨的排版樣式，但白底黑字加上嚴謹整齊的排版，給人留下深刻的印象。我們提到過，黑色突顯了文字、圖片本身的特色，而白色的純粹使得黑色的前景字體被突顯，用戶需要了解的信息一幕了然。

   黑色的語言也許是個性、你不喜歡我就“don't bother me”，而白色則多了一份理智與平和。日本的設計常見白色，這和一個國家的人文素養有關。即使我們無法徹底悟出白色中包含的禪意，適當留白這一最基本的技能也是值得我們細細鑽研的。

 

    白色與黑色同樣具有極強的包容性，在HSY的網站的中我們看到了一系高彩度的作品，紅、黃、藍這三個基本色出現在以白色為底色的網頁中，相互之間並沒有產生干擾，明快的顏色為網站的整體視覺產生了輕鬆活潑的感覺。黑色搭配高彩度與白色搭配高彩度不同，個人覺得黑色較個性化、私人化，而白色帶有推廣性，更具親和力。

  在我們的既定印像中白色是質樸平靜的，這樣的印象運用在溫泉旅店或是生活類用品官方網頁上或許不會讓人感到乏味，但若是一個專攻與界面交互設計的設計公司，單單只有白色作為畫面主色調，便會顯得有些單調。該網站通過畫面中心動態的畫面、穿插在作品集中高彩度的色彩，打破了白色的靜謐。

 
   黑與白是兩個最常用但也被用濫了的色彩，在服裝搭配上我們若是穿一身黑衣服，我們便嘗試通過衣服材質的變化、不對稱、適當點綴其他色來打破黑色的沉悶，一身白也是相同的思路。網頁設計同理可得，在整體的黑或白中適當點綴打破整體的單調。但一切的前提是衣服的剪裁（也就是網頁的版面設計、文字可閱讀性）必須是精緻的。