著名的室內(nèi)設(shè)計(jì)大師Charles Eames曾說過，“細(xì)節(jié)并不只關(guān)乎它們本身，它們還構(gòu)成了設(shè)計(jì)?！钡拇_，每一個(gè)網(wǎng)頁都是由無數(shù)的細(xì)節(jié)構(gòu)成，而其中的內(nèi)容也是同樣由這些細(xì)節(jié)連接組織到一起。不論是提供信息服務(wù)的網(wǎng)站，還是APP的官方宣傳頁，任何一個(gè)優(yōu)秀的網(wǎng)站都能夠經(jīng)受得起挑剔眼光的洗禮，從圖片到布局，從字體到架構(gòu)。

網(wǎng)頁設(shè)計(jì)的細(xì)節(jié)至關(guān)重要，因?yàn)檎撬鼈兘o用戶留下好印象，這些細(xì)節(jié)支撐起網(wǎng)站的良好體驗(yàn)，提高易用性。正如同Eames所說，它們成就了設(shè)計(jì)，不注意細(xì)節(jié)會(huì)讓設(shè)計(jì)感流失。

優(yōu)秀的網(wǎng)站有著不一樣的亮點(diǎn)，但一樣地專注細(xì)節(jié)：《這樣才過癮！2014年最佳網(wǎng)站評(píng)選結(jié)果出爐

接下來，我們一同看看這11款設(shè)計(jì)驚艷的網(wǎng)站。它們的好設(shè)計(jì)源于細(xì)節(jié)，有的界面雅致，有的交互出彩。深入揣摩這些案例，也許你的下一個(gè)網(wǎng)頁設(shè)計(jì)作品會(huì)非常強(qiáng)大。

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

Basecamp 是一個(gè)基于網(wǎng)頁的項(xiàng)目管理工具。正如同它的介紹，速度和效率是至關(guān)重要的。

這是網(wǎng)站的驗(yàn)證界面，設(shè)計(jì)師巧妙的事先隱藏了確認(rèn)的按鈕，只有當(dāng)你輸入了正確的驗(yàn)證碼之后，OK按鈕才會(huì)出現(xiàn)。這種措施不僅提高了網(wǎng)站的性能，還通過讓按鈕從無到有，將“驗(yàn)證碼正確”的概念具現(xiàn)化，觸動(dòng)用戶，增加成就感。

COLOPHON PRACTICED BY NEOTERIC DESIGN

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

Navicon，也就是漢堡圖標(biāo)，已經(jīng)成為越來越多網(wǎng)頁設(shè)計(jì)導(dǎo)航模塊時(shí)的首選了。相比于傳統(tǒng)的導(dǎo)航欄，隱藏式菜單導(dǎo)航在設(shè)計(jì)和用戶體驗(yàn)上有著它獨(dú)到的地方。作為一個(gè)隨著移動(dòng)端設(shè)計(jì)發(fā)展而崛起的網(wǎng)頁設(shè)計(jì)元素，Navicon并沒有減弱它引導(dǎo)用戶的功能性，也沒有喪失它作為基礎(chǔ)網(wǎng)頁組件的重要性，還為設(shè)計(jì)師和開發(fā)者提供了更大的創(chuàng)作空間。

如何正確使用Navicon取決于項(xiàng)目的實(shí)際狀況，相對(duì)保守的站點(diǎn)可能不會(huì)考慮這個(gè)選擇，而不少追求時(shí)尚簡約、多平臺(tái)體驗(yàn)統(tǒng)一的新興網(wǎng)站可能會(huì)更加青睞Navicon，因?yàn)樽鳛閷?dǎo)航接口的它小巧而討喜，輕松配合大圖和時(shí)尚的網(wǎng)頁設(shè)計(jì)，并且隱藏起復(fù)雜的、零碎的導(dǎo)航內(nèi)容菜單。

Navicon很單調(diào)么？并非如此。借助額外的打開過程動(dòng)效和抓人眼球的細(xì)節(jié)效果，Navicon擁有非常大的提升空間和設(shè)計(jì)可能性以及良好的用戶體驗(yàn)。更重要的是，它適用于各類導(dǎo)航：不僅可以清楚的傳達(dá)信息，而且有助于解決響應(yīng)速度方面的問題，并且能夠促進(jìn)網(wǎng)頁在多平臺(tái)設(shè)計(jì)上的統(tǒng)一。

如何設(shè)計(jì)一個(gè)靠譜的Navicon：《數(shù)據(jù)告訴你真相！漢堡圖標(biāo)并非最佳菜單方案》
深入了解不同的導(dǎo)航模式：《交互基礎(chǔ)知識(shí)科普！帶你認(rèn)識(shí)最熱門的12種導(dǎo)航模式》

接下來，我們通過一系列的網(wǎng)頁設(shè)計(jì)，來深入了解Navicon和隱藏式菜單導(dǎo)航的魅力。

eWebDesign

大圖背景和視差強(qiáng)化了網(wǎng)站視覺，Navicon菜單按鈕在右上角，點(diǎn)擊打開你會(huì)看到一個(gè)設(shè)計(jì)非常細(xì)致的導(dǎo)航菜單。

Sampedro

時(shí)尚的照片放置與網(wǎng)頁的頁頭，配合著時(shí)髦的Slogan吸引著用戶全部的吸引力。隱藏的導(dǎo)航欄是個(gè)理想的解決方案，它讓用戶將注意力從復(fù)雜的導(dǎo)航轉(zhuǎn)移到內(nèi)容上。

《情感化設(shè)計(jì)心理學(xué)中》作者唐納德·諾曼將情感化設(shè)計(jì)與馬斯洛的人類需求層次理論聯(lián)系了起來。 產(chǎn)品特質(zhì)也可以被劃分為功能性、可依賴性、可用性和愉悅性這四個(gè)從低到高的層面，而情感化設(shè)計(jì)則處于其中最上層的“愉悅性”層面當(dāng)中。因?yàn)槭袌錾喜煌放频耐惍a(chǎn)品在功能、質(zhì)量、價(jià)格等基本品質(zhì)方面已經(jīng)差別越來越小,尤其是消費(fèi)類產(chǎn)品,比如手機(jī)家電之類的,產(chǎn)品的同質(zhì)化趨勢非常明顯,競爭日趨激烈。 消費(fèi)者在購買產(chǎn)品時(shí),情感因素的影響也日益加大,這意味著如果產(chǎn)品具有相同功能、質(zhì)量和價(jià)格,消費(fèi)者會(huì)選擇更能觸動(dòng)其情感的產(chǎn)品。

這次又是別人家的網(wǎng)頁設(shè)計(jì)！之前混在一起看可能不覺得，單獨(dú)來看西班牙的網(wǎng)頁設(shè)計(jì)其實(shí)還是能察覺到他們的民族性格，時(shí)尚奔放，現(xiàn)代的設(shè)計(jì)下難掩躁動(dòng)與激情，令人著迷！

充滿活力，朝氣蓬勃，美麗四射，時(shí)尚風(fēng)情，這是西班牙給人的印象，也是來自西班牙的優(yōu)秀網(wǎng)頁設(shè)計(jì)給人的別樣體驗(yàn)。這些網(wǎng)頁獨(dú)特的瀏覽體驗(yàn)并非偶然，西班牙獨(dú)特的歷史和的歷史和多元化的文化賦予了這些設(shè)計(jì)不同凡響的風(fēng)格：意大利文藝復(fù)興、羅馬式的風(fēng)格、穆斯林文化、西班牙文化的黃金時(shí)代、巴洛克和洛可可，新古典主義以及，乃至于超現(xiàn)實(shí)主義，文化與思潮在西班牙匯聚，時(shí)代的印痕和眾多的藝術(shù)運(yùn)動(dòng)在此交疊。

于是乎，豐盈厚重的藝術(shù)氣息和文化積淀直接影響著每一個(gè)成長中的西班牙藝術(shù)家和設(shè)計(jì)師，他們的藝術(shù)作品中所蘊(yùn)含的創(chuàng)意和情感能如此不同，毫不奇怪。

以為計(jì)算機(jī)里有Photoshop，你就是設(shè)計(jì)師？使用Photoshop的方式百百種，你是設(shè)計(jì)了一年還是設(shè)計(jì)了十年，從細(xì)節(jié)就可以看得出來（附上老鳥設(shè)計(jì)師常用的幾個(gè)快捷技巧） >>>

除了大量使用快捷鍵是基本以外，老鳥設(shè)計(jì)師跟菜鳥設(shè)計(jì)師在使用Photoshop時(shí)有著各種不同。McCann Prague在他們的征人啟事上加入可愛的idea，讓你看見他們想征的老鳥跟菜鳥設(shè)計(jì)師之間的差別。

第一次碰Photoshop時(shí)的版本

老鳥：Photoshop 6.0

新手：Photoshop CS 5

圖層的整理

老鳥：群組、上色分類。

新手：無。

引導(dǎo)線的使用

老鳥：簡單明了、了解響應(yīng)式網(wǎng)頁設(shè)計(jì)。

新手：過度使用。

是說從Photoshop版本來看，他們想征的老鳥應(yīng)該是創(chuàng)意總監(jiān)等級(jí)了吧！

附網(wǎng)易同學(xué)分享的Photoshop技巧秘籍：

技巧1：快速標(biāo)注尺寸

你是否曾在制作規(guī)范中，讓標(biāo)注尺寸搞的頭暈眼花！你是否曾在視覺走查中，讓標(biāo)注尺寸弄的怒氣報(bào)表！此時(shí)已經(jīng)陷入了無限的腦補(bǔ)中，不能自拔……..

Photoshop越來越強(qiáng)大了！試圖掌控它的全部特性是不現(xiàn)實(shí)的（更何況有那么多隱藏的功能?。敲次覀儾环潦詹匾幌麓笊駛兛偨Y(jié)的這120個(gè)PS技巧，偶爾翻看一下，讓自己的設(shè)計(jì)更強(qiáng)大更！

這120款技巧覆蓋了PS絕大多數(shù)的主要功能，這些功能你很熟悉，但是明白它們的細(xì)節(jié)，掌控發(fā)招的捷徑，修圖作畫的時(shí)候說不定能收獲奇效呢！

在此之前，我們不妨先快速溫故一下PS的基本功能：《PS速成秘籍！如何在兩小時(shí)內(nèi)搞懂PHOTOSHOP基礎(chǔ)工具？》

01、旋轉(zhuǎn)樣式

Cmd/Ctrl+Shift+Alt+T 是一個(gè)神奇的快捷鍵，可以幫你制作出驚人的萬花筒圖案，當(dāng)你使用它的時(shí)候，可以復(fù)制當(dāng)前圖層，并且同時(shí)重復(fù)之前的旋轉(zhuǎn)、放大等操作。正如下圖所演示，使用這一快捷鍵可以輕松地將一束炫光化作一個(gè)漂亮的萬花筒。在操作的時(shí)候，你先用Cmd/Ctrl+T和適當(dāng)?shù)男D(zhuǎn)，回車確定，然后使用這組快捷鍵，直到完成整個(gè)樣式。

簡單有效的導(dǎo)航欄設(shè)計(jì)能夠極大的提高用戶體驗(yàn)，不僅能讓用戶更快找到他們想要的內(nèi)容，還能適當(dāng)分擔(dān)搜索引擎的壓力。常見的導(dǎo)航設(shè)計(jì)我想大家都已經(jīng)非常熟悉了，今天我們要分享的一些有趣的、原創(chuàng)的、甚至具有一定開創(chuàng)性的導(dǎo)航欄設(shè)計(jì)方案，這些優(yōu)秀的設(shè)計(jì)非常引人注目，令人難忘。這些網(wǎng)站的導(dǎo)航欄設(shè)計(jì)，比起傳統(tǒng)的導(dǎo)航會(huì)相對(duì)更復(fù)雜一些，但是絕對(duì)會(huì)令你眼界大開。

當(dāng)然，我們推薦這些網(wǎng)站并不只是因?yàn)閷?dǎo)航欄設(shè)計(jì)，這些優(yōu)秀的網(wǎng)站通常在技術(shù)使用和信息呈現(xiàn)上也做得非常突出。和很多酷站一樣，只要你深入探究，一定會(huì)獲益匪淺。

Jova

Jova的網(wǎng)站設(shè)計(jì)非常清爽，導(dǎo)航欄的設(shè)計(jì)均衡并且結(jié)構(gòu)妥帖。

設(shè)計(jì)師使用細(xì)線構(gòu)成的線框柵格來構(gòu)建網(wǎng)站導(dǎo)航，經(jīng)典的黑白配色，加上清晰銳利的英文字體，構(gòu)建出優(yōu)雅迷人的外觀，在柔和的背影映襯之下，給人深刻的印象。

小時(shí)候，很喜歡蝴蝶，感覺這是大自然最神奇的賦予，當(dāng)它們雙翼張開，總是禁不住欣賞它們那種美麗的優(yōu)雅以及多姿的色彩。

更重要的是，這種天生的對(duì)稱感，美得令人窒息。

對(duì)稱風(fēng)格

完形主義——一種人類行為理論，描述了人類排列視覺數(shù)據(jù)的思維結(jié)構(gòu)——認(rèn)為人類會(huì)很自然的把看到的東西按順序排列。

換句話說，我們的眼睛傾向于捕捉那些組織有序、風(fēng)格圓滿的視覺元素。這也就是我們所謂的對(duì)稱感。對(duì)稱風(fēng)格的物體有一種天生的平衡感、優(yōu)雅感，對(duì)稱在設(shè)計(jì)中能體現(xiàn)出一致、有序、穩(wěn)定的特質(zhì)。很多知名品牌都采用了對(duì)稱式設(shè)計(jì)，雖然不是很獨(dú)出心裁，但是至少讓人感覺大氣、穩(wěn)重。

前幾天分享的2015年春夏流行色人氣很高，今天直接放干貨，@AnyForWeb_UDC 的同學(xué)根據(jù)2015年的色彩大致趨勢走向，結(jié)合相關(guān)的設(shè)計(jì)經(jīng)驗(yàn)，作出了以下網(wǎng)頁配色預(yù)測分析，來看看有哪些亮點(diǎn)吧。

提前搞定2015年的設(shè)計(jì)好文：

一、Metro和柔和鮮嫩的色彩

Odam Luiran的網(wǎng)站是Metro風(fēng)格，這種風(fēng)格尤其適合一些比較鮮嫩柔和的顏色，扁平化網(wǎng)頁設(shè)計(jì)在2014年中的流行讓柔和色彩的用途變得越來越廣泛。這樣的色彩基調(diào)將在2015年得到進(jìn)一步的延續(xù)，馬卡龍色系也許會(huì)常常出現(xiàn)在網(wǎng)頁設(shè)計(jì)中。

二、偏灰的冷色系粉彩

偏灰的冷色系色彩是一種看起來比較百搭的顏色，但是實(shí)際上，要將這類顏色使用的恰如其分卻并不是一件容易的事情。這類色彩表現(xiàn)的比較中性，所以搭配任何顏色都不會(huì)顯得突兀，但也不算出挑，而要讓色彩之間真正融合，應(yīng)該選擇清淡的粉彩系透明色，讓網(wǎng)頁看起來清新脫俗。

還有哪些搭配方法？阿里前輩在前，就不多說咯：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》

低多邊形現(xiàn)在火得一塌糊涂，前段時(shí)間優(yōu)設(shè)推薦了這篇《這效果超火！教你創(chuàng)建高大上的多邊形字體》，短短一月，超過20萬人閱讀學(xué)習(xí)，今天我們繼續(xù)收集一組設(shè)計(jì)帶感的多邊形網(wǎng)站，同學(xué)們可以收藏學(xué)習(xí)一下。

特別提醒：對(duì) www.soleilnoir.net 這類文案與動(dòng)效齊飛，驚艷共傳奇一色的神站，童鞋們請(qǐng)務(wù)必用谷歌或者火狐打開。

Sanissimo

Vauxco