不乏味的白——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結合自身的使用體驗以中肯的措辭向滑雪愛好者們介紹了與滑雪相關的系列產品。這為我們提供了很好的參考——在設計網頁內文時太過華麗的詞句會讓人產生抗拒的心理，尤其是產品介紹，單純背景色配上產品圖是最有說服力的簡介。

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

另一種黑

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

   上一篇文章結尾時我們留下了這樣的疑問：當我們希望自己的個人主頁以黑色為主色調，但能彰顯出科技感與現代感時該如何設計我們的網頁？今天為大家推薦的是日本DJ, KENJI ENDO的個人網站。

   

    整個網站以黑色作為背景色，網站中的主要文字內容均選擇了簡潔、現代感的字體，使網站在視覺上顯得利落有科技感。個人覺得文字方面唯一的遺憾是作者在個人介紹方面採用了大篇幅的文字敘述，黑底白字讓我在閱讀時易陷入視覺疲勞。也許我們在操作個人介紹時可以選用表格式或是畫出明確的時間軸，並搭配以這一時期的主要作品。分條敘述與適當配圖都更易引起讀者的閱讀興趣。

 過於密集的文字編排會讓讀者抓不到重點，產生厭煩情緒。適當簡化文字敘述，用圖表、時間軸等方式呈現能讓資訊更有條理。

                                                                          

   相比之下這四行文字醒目有氣勢，與文字內容想傳達的理念相符。

      

   作為一名DJ，KENJI ENDO的個人主頁上也充滿著音樂的律動感。整個網站雖然為單頁設計，但網站中偶許多有趣的互動式設計。例如，當我們將滑鼠滑到設計師的個人照片上時，照片周圍會出現用細線構成的倒三角形。同樣的設計思路體現在網站的字形變化上。

  

   當我們將滑鼠移到網站首頁DJ的名字上時，原本規矩的英文字母便如同四射的煙火般，向四周釋放出細線，這些線隨著滑鼠的移動改變方向。這樣的設計不僅大大提升了網站閱讀的趣味性，更能使原本黑色的網站視覺顯得活潑起來。當我們在設計以深色為背景色的網站時，除了適當點綴活潑、鮮亮的顏色外，互動式設計也是不錯的選擇。通過這一案例我們不難發現，以細線組成的幾何圖案在視覺上並不會顯得單薄，適當數量的線條、幾何圖案帶給我們的是現代、靈活的視覺體驗。

   網站另一特質便是操作簡便。當我們對KENJI ENDO的作品產生興趣想與他做更深一步的交流，或是有問題想請教他時，在網站的底端右方有一個Contact區，我們可以輸入我們的名字、email、相對KENJI ENDO說的話，點擊submit便可直接發送。這樣的設計也許可以運用在一些服務性質的網站。當我們有建議時無需大費周章從郵箱中寄信，在網站中便可完成反饋的操作。

   當我們想快速找到個類信息的菜單時我們可以點擊網頁左上角的icon，如何關閉這一頁面？我個人通常會在頁面右上角尋找關閉頁面的icon，但在KENJI ENDO的網站中，當我們想關閉這個畫面時只需要點擊頁面的任意一處即可。

   通過今天對日本DJ KENJI ENDO的個人網站能介紹，我們掌握了幾個處理黑色或是暗色調為背景色的網頁的技巧：通過互動體驗讓暗色調的網站不再沉悶；在內文的處理上盡量避免過多的文字；簡潔的無襯線字體，可以讓網站的視覺風格顯得有科技感；細線與幾何形的運用能讓畫面看上去更豐富、靈動，也能打破圖片規矩的四方造型。

FFFFOUND! —— Come here to find your ideas

                                                   
 Hi!大家好！今天為大家帶來一個值得收藏的網站：  FFFFOUND!（http://ffffound.com/）

 

 FFFFOUND! 曾被 《TIME》評為2008年度50個最佳網站之一

“ Ffffound is the rare image site that showcases photos and illustrations you'll actually want to browse every day. It's both random and beautiful and never feels stale.”

 FFFFOUND!   是一個完全由用戶創建的網站，所有的內容及圖片均由註冊用戶通過瀏覽器插件在互聯網 found（找）到，這或許可以解釋為什麼網站的 logo是一個彎腰拾東西的人物剪影。

    FFFFOUND!   主頁顯示的是這個時間段內被最多人found的圖片，這些圖被壓縮到大約500像素的寬度，並附有原始網站鏈接和網頁title。

   一張主要圖片較大，右側顯示三幅相關圖片。整個網站的涵蓋面很廣，包括平面設計、繪圖插畫、攝影作品、字體、和影視截圖等方面，Gif動畫也是網站的一大特色。

   

      點擊 ABOUT 就會出現詳細的網站使用說明

   

   注意網站右上角的四個選項

     分別代表：圖片排列方式；回到頂部；上一張圖片；下一張圖片 我們可以通過括號內的字母進行快捷操作。

  

   不少網友覺得 FFFFOUND! 的網頁界面幾乎是瀏覽器默認式樣，無視覺設計感可言。我個人覺得與類似的圖片書籤類網站相比，FFFFOUND！的設計減弱了網站的視覺設計，簡潔、整齊的頁面設置突出了圖片內容，讓讀者更容易把注意力放在圖片本身上。

   目前 FFFFOUND! 註冊依舊需要邀請，不過也許隨性地瀏覽才是 FFFFOUND!  的魅力所在。無聊時就去 FFFFOUND!  逛逛吧!