會呼吸的網站設計

   提到網頁中的留白設計，我最先想到的是日本設計。不論是網頁、包裝甚至是產品本身，日本的設計品像一個低調內斂的中年男子，或是一個白滿頭白髮的老者。
 
  和東方設計中的禪意留白不同，今天我們介紹的是一個丹麥網站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的網站的中我們看到了一系高彩度的作品，紅、黃、藍這三個基本色出現在以白色為底色的網頁中，相互之間並沒有產生干擾，明快的顏色為網站的整體視覺產生了輕鬆活潑的感覺。黑色搭配高彩度與白色搭配高彩度不同，個人覺得黑色較個性化、私人化，而白色帶有推廣性，更具親和力。

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

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

一秒跌入銀河系——Mikkel Bang官方網站分析

   網站地址：http://mikkelbang.com/

  暗黑的風格、奇怪的字體——這一定是某個奇怪的設計師奇怪的個人主頁。然而今天為大家介紹的是滑雪運動員 Mikkel Bang 的個人主頁。對，你沒有看錯！他的確是個滑雪運動員！

  

  和傳統印象中的滑雪運動員最不同的是，Mikkel Bang的個人主頁充滿了設計感。不論是主字體或是整體色調，雖然我們暫時還不知道黑色背景上的白點是什麼，但黑白的配色以及在Mikkel Bang名字後的那個驚嘆號，都給我們強烈的視覺衝擊。

 平面圖局限了我們對網站3D效果的直觀感受，強烈建議大家親身感受這個網站的裸眼3D魅力！

  整個網站的選單被設計成了漂浮在宇宙中的幾個元素——照相機、放映機、獎杯、吉他……

這些元素環繞在地球四周，我們可以通過移動滑鼠360度旋轉整個畫面，而不必等那些漂浮物“漂”到我們眼前再進行點選。通過滑動滑鼠滾輪我們能放大、縮小整個畫面，這樣的設計讓我們彷彿置身與宇宙中，同時那些漂浮着的小物件也吸引我們一個個進行點選。

  我最欣賞Mikkel Bang的個人網站地方在於它的與眾不同。和更知名的運動員的個人官方網站不同，年輕的Mikkel Bang在網站遮體視覺有著強烈的個人風格。從字體設計到插畫風格，都和宇宙這一主視覺有著很好的契合度。字體設計結合了幾何圖案與現代感的無襯線字體，讓我們聯想到外星人的文字，但又有極強的辨識度。

  

  這樣的視覺設計來自Mikkel Bang的三位朋友。運動員在其中一個版面中特別感謝了這三位好友的幫助。畫面中的三個icon分別連結了三位設計師的個人網站，三位分別負責的是插畫、網頁以及字體設計。有趣的是三位設計師的網站風格截然不同，但結合了三人創作的Mikkel Bang個人網站卻像是出自同一個人的設計。

    Mikkel Bang的個人網站另一亮點是其中有不少推薦的商品，但通過設計後這樣的廣告沒有讓人產生排斥。Mikkel Bang結合自身的使用體驗以中肯的措辭向滑雪愛好者們介紹了與滑雪相關的系列產品。這為我們提供了很好的參考——在設計網頁內文時太過華麗的詞句會讓人產生抗拒的心理，尤其是產品介紹，單純背景色配上產品圖是最有說服力的簡介。

  我們已連續三次分享了以黑色作為主視覺的個人網站設計，黑色不僅能解決配色問題，還能讓我們將視覺焦點集中在商品或是作品本身上。雖然都是黑色系，但三者都有強烈的個人風格——黑色並不是單調嚴肅的色彩，黑色可以包容任何顏色，它同時能呈現出奢華、科技、大氣等多種你想要的視覺效果。