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

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

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

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

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

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

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

COLOPHON PRACTICED BY NEOTERIC DESIGN

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

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

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

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

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

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

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

第一次碰Photoshop時的版本

老鳥：Photoshop 6.0

新手：Photoshop CS 5

圖層的整理

老鳥：群組、上色分類。

新手：無。

引導線的使用

老鳥：簡單明了、了解響應式網(wǎng)頁設計。

新手：過度使用。

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

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

技巧1：快速標注尺寸

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

“儀表板”、“大數(shù)據(jù)”、“數(shù)據(jù)可視化”、“數(shù)據(jù)分析”——越來越多人和企業(yè)，開始運用他們的數(shù)據(jù)來做一些有趣的事情。在我的職業(yè)生涯中，有幸參與一大批數(shù)據(jù)為重的界面設計，我要在此分享一些觀點，講講如何造就這種特殊且有意義的產(chǎn)品。

Photoshop越來越強大了！試圖掌控它的全部特性是不現(xiàn)實的（更何況有那么多隱藏的功能！），那么我們不妨收藏一下大神們總結的這120個PS技巧，偶爾翻看一下，讓自己的設計更強大更！

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

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

01、旋轉(zhuǎn)樣式

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

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

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

Jova

Jova的網(wǎng)站設計非常清爽，導航欄的設計均衡并且結構妥帖。

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

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

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

對稱風格

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

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

什么是DPI？什么是PPI？

DPI（Dots Per Inch）是測量空間點密度的單位，最初應用于打印技術中，它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會產(chǎn)生不清晰的圖片。

后來DPI的概念也被應用到了計算機屏幕上，計算機屏幕一般采用PPI（Pixels Per Inch）來表示一英寸屏幕上顯示的像素點的數(shù)量，而DPI也被引入。

安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96，Mac的初始值是72，雖然這個值從80年代起就不是很準確了。 一般來說，非retina桌面（包括Mac）的PPI的取值區(qū)間在72-120之間，因為這個取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比 例。

這里有一個應用實例： 27寸Mac影院顯示屏的PPI是109，這表示在每英寸的屏幕上顯示了109個像素點。斜角長是25.7英寸（65cm），實際屏幕的寬度大概是23.5英寸，23.5109約等于2560，因此原始屏幕分辨率就是2560*1440px。

我知道23.5109不是恰好等于2560.實際上是23. 486238532英寸。要是用每厘米的像素點計算，會更加準確，但是這里你知道就行。