著名的室内设计大师Charles Eames曾说过，“细节并不只关乎它们本身，它们还构成了设计。”的确，每一个网页都是由无数的细节构成，而其中的内容也是同样由这些细节连接组织到一起。不论是提供信息服务的网站，还是APP的官方宣传页，任何一个优秀的网站都能够经受得起挑剔眼光的洗礼，从图片到布局，从字体到架构。

网页设计的细节至关重要，因为正是它们给用户留下好印象，这些细节支撑起网站的良好体验，提高易用性。正如同Eames所说，它们成就了设计，不注意细节会让设计感流失。

优秀的网站有着不一样的亮点，但一样地专注细节：《这样才过瘾！2014年最佳网站评选结果出炉

接下来，我们一同看看这11款设计惊艳的网站。它们的好设计源于细节，有的界面雅致，有的交互出彩。深入揣摩这些案例，也许你的下一个网页设计作品会非常强大。

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

Basecamp 是一个基于网页的项目管理工具。正如同它的介绍，速度和效率是至关重要的。

这是网站的验证界面，设计师巧妙的事先隐藏了确认的按钮，只有当你输入了正确的验证码之后，OK按钮才会出现。这种措施不仅提高了网站的性能，还通过让按钮从无到有，将“验证码正确”的概念具现化，触动用户，增加成就感。

COLOPHON PRACTICED BY NEOTERIC DESIGN

在欧洲，在书中使用Colophons（题跋）可以追溯到15世纪的时候（中国就早很多了），不过这个网站是为了将其运用到网站上去。这次，Neoteric Design分享了他们网站的制作笔记——各个部分的功能，从字体软件到编程语言和内容管理系统。如果访客想知道一个网站是如何构建起来的，那么这个带题跋的笔记可以帮助用户方便快捷得了解这个网站的构建过程，满足好奇心。

《情感化设计心理学中》作者唐纳德·诺曼将情感化设计与马斯洛的人类需求层次理论联系了起来。 产品特质也可以被划分为功能性、可依赖性、可用性和愉悦性这四个从低到高的层面，而情感化设计则处于其中最上层的“愉悦性”层面当中。因为市场上不同品牌的同类产品在功能、质量、价格等基本品质方面已经差别越来越小,尤其是消费类产品,比如手机家电之类的,产品的同质化趋势非常明显,竞争日趋激烈。 消费者在购买产品时,情感因素的影响也日益加大,这意味着如果产品具有相同功能、质量和价格,消费者会选择更能触动其情感的产品。

这次又是别人家的网页设计！之前混在一起看可能不觉得，单独来看西班牙的网页设计其实还是能察觉到他们的民族性格，时尚奔放，现代的设计下难掩躁动与激情，令人着迷！

充满活力，朝气蓬勃，美丽四射，时尚风情，这是西班牙给人的印象，也是来自西班牙的优秀网页设计给人的别样体验。这些网页独特的浏览体验并非偶然，西班牙独特的历史和的历史和多元化的文化赋予了这些设计不同凡响的风格：意大利文艺复兴、罗马式的风格、穆斯林文化、西班牙文化的黄金时代、巴洛克和洛可可，新古典主义以及，乃至于超现实主义，文化与思潮在西班牙汇聚，时代的印痕和众多的艺术运动在此交叠。

于是乎，丰盈厚重的艺术气息和文化积淀直接影响着每一个成长中的西班牙艺术家和设计师，他们的艺术作品中所蕴含的创意和情感能如此不同，毫不奇怪。

以为计算机里有Photoshop，你就是设计师？使用Photoshop的方式百百种，你是设计了一年还是设计了十年，从细节就可以看得出来（附上老鸟设计师常用的几个快捷技巧） >>>

除了大量使用快捷键是基本以外，老鸟设计师跟菜鸟设计师在使用Photoshop时有着各种不同。McCann Prague在他们的征人启事上加入可爱的idea，让你看见他们想征的老鸟跟菜鸟设计师之间的差别。

第一次碰Photoshop时的版本

老鸟：Photoshop 6.0

新手：Photoshop CS 5

图层的整理

老鸟：群组、上色分类。

新手：无。

引导线的使用

老鸟：简单明了、了解响应式网页设计。

新手：过度使用。

是说从Photoshop版本来看，他们想征的老鸟应该是创意总监等级了吧！

附网易同学分享的Photoshop技巧秘籍：

技巧1：快速标注尺寸

你是否曾在制作规范中，让标注尺寸搞的头晕眼花！你是否曾在视觉走查中，让标注尺寸弄的怒气报表！此时已经陷入了无限的脑补中，不能自拔……..

“仪表板”、“大数据”、“数据可视化”、“数据分析”——越来越多人和企业，开始运用他们的数据来做一些有趣的事情。在我的职业生涯中，有幸参与一大批数据为重的界面设计，我要在此分享一些观点，讲讲如何造就这种特殊且有意义的产品。

Photoshop越来越强大了！试图掌控它的全部特性是不现实的（更何况有那么多隐藏的功能！），那么我们不妨收藏一下大神们总结的这120个PS技巧，偶尔翻看一下，让自己的设计更强大更！

这120款技巧覆盖了PS绝大多数的主要功能，这些功能你很熟悉，但是明白它们的细节，掌控发招的捷径，修图作画的时候说不定能收获奇效呢！

在此之前，我们不妨先快速温故一下PS的基本功能：《PS速成秘籍！如何在两小时内搞懂PHOTOSHOP基础工具？》

01、旋转样式

Cmd/Ctrl+Shift+Alt+T 是一个神奇的快捷键，可以帮你制作出惊人的万花筒图案，当你使用它的时候，可以复制当前图层，并且同时重复之前的旋转、放大等操作。正如下图所演示，使用这一快捷键可以轻松地将一束炫光化作一个漂亮的万花筒。在操作的时候，你先用Cmd/Ctrl+T和适当的旋转，回车确定，然后使用这组快捷键，直到完成整个样式。

简单有效的导航栏设计能够极大的提高用户体验，不仅能让用户更快找到他们想要的内容，还能适当分担搜索引擎的压力。常见的导航设计我想大家都已经非常熟悉了，今天我们要分享的一些有趣的、原创的、甚至具有一定开创性的导航栏设计方案，这些优秀的设计非常引人注目，令人难忘。这些网站的导航栏设计，比起传统的导航会相对更复杂一些，但是绝对会令你眼界大开。

当然，我们推荐这些网站并不只是因为导航栏设计，这些优秀的网站通常在技术使用和信息呈现上也做得非常突出。和很多酷站一样，只要你深入探究，一定会获益匪浅。

Jova

Jova的网站设计非常清爽，导航栏的设计均衡并且结构妥帖。

设计师使用细线构成的线框栅格来构建网站导航，经典的黑白配色，加上清晰锐利的英文字体，构建出优雅迷人的外观，在柔和的背影映衬之下，给人深刻的印象。

小时候，很喜欢蝴蝶，感觉这是大自然最神奇的赋予，当它们双翼张开，总是禁不住欣赏它们那种美丽的优雅以及多姿的色彩。

更重要的是，这种天生的对称感，美得令人窒息。

对称风格

完形主义——一种人类行为理论，描述了人类排列视觉数据的思维结构——认为人类会很自然的把看到的东西按顺序排列。

换句话说，我们的眼睛倾向于捕捉那些组织有序、风格圆满的视觉元素。这也就是我们所谓的对称感。对称风格的物体有一种天生的平衡感、优雅感，对称在设计中能体现出一致、有序、稳定的特质。很多知名品牌都采用了对称式设计，虽然不是很独出心裁，但是至少让人感觉大气、稳重。

什么是DPI？什么是PPI？

DPI（Dots Per Inch）是测量空间点密度的单位，最初应用于打印技术中，它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上，计算机屏幕一般采用PPI（Pixels Per Inch）来表示一英寸屏幕上显示的像素点的数量，而DPI也被引入。

安装Windows操作系统的电脑屏幕PPI的初始值是96，Mac的初始值是72，虽然这个值从80年代起就不是很准确了。 一般来说，非retina桌面（包括Mac）的PPI的取值区间在72-120之间，因为这个取值区间能够确保你的作品在任何地方都能保持大致相同的比 例。

这里有一个应用实例： 27寸Mac影院显示屏的PPI是109，这表示在每英寸的屏幕上显示了109个像素点。斜角长是25.7英寸（65cm），实际屏幕的宽度大概是23.5英寸，23.5109约等于2560，因此原始屏幕分辨率就是2560*1440px。

我知道23.5109不是恰好等于2560.实际上是23. 486238532英寸。要是用每厘米的像素点计算，会更加准确，但是这里你知道就行。