11個極度專注細節的優秀網頁設計

 　　著名的室內設計大師Charles Eames曾說過，“細節並不只關乎它們本身，它們還構成了設計。”的確，每一個網頁都是由無數的細節構成，而其中的內容也是同樣由這些細節連接組織到一起。不論是提供信息服務的網站，還是APP的官方宣傳頁，任何一個優秀的網站都能夠經受得起挑剔眼光的洗禮，從圖片到布局，從字體到架構。

　　網頁設計的細節至關重要，因為正是它們給用戶留下好印象，這些細節支撐起網站的良好體驗，提高易用性。正如同Eames所說，它們成就了設計，不注意細節會讓設計感流失。

　　接下來，我們一同看看這11款設計驚艷的網站。它們的好設計源於細節，有的界面雅致，有的交互出彩。深入揣摩這些案例，也許你的下一個網頁設計作品會非常強大。

　　THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

　　Basecamp 是一個基於網頁的項目管理工具。正如同它的介紹，速度和效率是至關重要的。

　　這是網站的驗證界面，設計師巧妙的事先隱藏了確認的按鈕，只有當你輸入了正確的驗證碼之後，OK按鈕才會出現。這種措施不僅提高了網站的性能，還通過讓按鈕從無到有，將“驗證碼正確”的概念具現化，觸動用戶，增加成就感。

　　COLOPHON PRACTICED BY NEOTERIC DESIGN

　　在歐洲，在書中使用Colophons(題跋)可以追溯到15世紀的時候(中國就早很多了)，不過這個網站是為了將其運用到網站上去。這次，Neoteric Design分享了他們網站的制作筆記——各個部分的功能，從字體軟件到編程語言和內容管理系統。如果訪客想知道一個網站是如何構建起來的，那麼這個帶題跋的筆記可以幫助用戶方便快捷得了解這個網站的構建過程，滿足好奇心。

　　VERSATILE TYPOGRAPHIC GRID BY BERGER & FÖHR

　　2014年5月去世的先鋒設計師Massimo Vignelli曾說過，排版的柵格是“書的內衣”。其實由此推導，柵格系統又何嘗不是“網頁的內衣”呢?也正式它的存在，讓網站整饬而干淨。

　　在Berger & Föhr 為 Boulder當代藝術博物館的網站進行重新設計的時候，柵格系統的“內衣”作用是如此的鮮明。當你浏覽網頁的時候，圖片、文字段落、導航的邊緣都隱約看到柵格的痕跡，你會在這裡體會到對齊的力量。更重要的是，即使網站隨著屏幕響應的時候，柵格所施加的影響依然存在。

　　不論網頁的內容的屬性是啥，使用柵格來嚴格組織內容是首要的工作。

　　PRIDE IN PLACE CELEBRATED BY MAKER’S ROW

　　越來越多的歐美網站開始在團隊頁面中標注設計師的家鄉，聲明這個站點的“故鄉”。在足球領域，球隊的球員介紹頁面上，大家都喜歡“自豪地介紹球員來自……”，也正是這種“基於位置”的信息強化了整個隊伍的歸屬感和凝聚力。同理，設計師們的“故鄉”信息也有著同樣的作用。

　　DIRECT ACCESS BY TWLOHA TO SOCIAL MEDIA

　　社交服務是如此之多，動不動倆服務還會在圖標上撞個衫啥的，直接導致用戶在分享的時候點錯地方，而在歐美國家，這種情況更加嚴重。好在有TWLOHA，用帶字體樣式的文字LOGO替換圖標，識別度提高了，美觀度也有所保證。

　　DESIRE BY MINIMAL TO CONNECT

　　通常情況下，網站都會有個“Contact”頁面，國內我們通常稱之為“聯系我們”。但是MINIMAL設計師工作室換了個思路，他們將這個常用的詞改成了“Connect”，仿佛在說“來聊聊吧”。這是截然不同的感覺，傳達出他們期待與用戶溝通的強烈欲望。情懷?人性化。文案很重要。

　　NUDGES TO ACCESS DRAFT

　　當我們討論登錄/注冊頁面的時候，可以輕松腦補出頁面的造型——其實絕大多少的頁面都差不多，本質上也就是個表單。但是有人並不打算隨大流。曾經開發出著名應用Draft的Nathan Kontny，他在設計頁面的時候，將用戶的留言添加到表單右邊，將互動與溝通的氛圍呈現出來，吸引更多的潛在用戶來注冊。

　　從商業角度上來看，這個案例給了我們一個經驗：不要羞於展示用戶對於產品的贊譽。

　　COLORS OF CREATIVEMORNINGS

　　在這個名為CreativeMornings的網站中，每個章節都用不同的色彩標示出來，同作者頭像組合到一起。這種視覺元素貫穿於整個網站，這些色塊會有下拉菜單，並且有著各種不同的邊緣、形狀和好玩的樣式。加載內容的時候，還有漂亮的加載動效。大膽的用色，精致的細節，這個網站簡直是高大上的典范啊。

　　ULTRA-LEAN SIGN-IN OF PULLEY

　　設計這個網站的團隊曾經打造過著名的創意社區Big Cartel，而這個名為Pulley的網站本質上是一個電商APP，所銷售的內容是可下載的數字內容。

　　要下載內容，只需要密碼就可以了。基於網頁、無需登錄、輸入即可下載，這些設定降低了成本，減少了摩擦和錯誤，也使得體驗更到位。

　　PROJECT STORIES OF CRUSH LOVELY

　　StudioCrush是一個用來展示各種項目故事的網站。網站將敘述方式簡化了下來，每個項目本質上就是從開始(項目起源)到結束(項目交付)的過程，中間由關鍵的敘事線索(過程)橋接起來。

　　從諸多案例中挑選了這個例子，相比於“客觀”，作者更願意用“野心”來描述他的起始狀態;作為結論，沒有拖沓的視頻和描述，直接上圖讓大家一同來“欣賞”!就是這麼直觀，就是這麼任性!撇開干癟拖沓的內容，加上標簽，寫點干貨，呈現內容，讓故事可愛起來，這還不夠麼?

　　SIDE PROJECTS OF KNOED CREATIVE

　　這是一個關於公司目標和員工的頁面，其中寫了他們的使命、願景和目標。但是，不同於其他的類似設計，Knoed Creative通過這個“朝九晚五之外”的內容模塊展示了員工工作之余的生活和經歷，將這個公司多樣化的一面生動地呈現了出來。