如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

来优设一年多了，前几天优设哥跟我说可以聊聊自己的工作，今天花了一点时间写出来，与同学们共勉。

幸运就像七彩祥云

先说一下我跟优设的结缘。

那时候很喜欢一个作家，将他的作品、访谈、书信都看了又看，还专门新开了一个微博，每天发一点他写的东西。有一天在凤凰网上看到他的专题：

突然就有了个想法，为什么不创建一个网站，把路遥老师相关的作品资料都搜集起来，作为祭奠呢？

当下就有了自学的动力，于是百度找教程，从各个网站转战到贴吧，始终没有发现一个像正规军的网站，在贴吧还让一个“高手”骗了10块钱，郁闷之余，想到微博上可能有这方面的人才，抱着碰运气的想法，到上面搜了网页设计，第一个推荐的就是优设，跟着到官网看了一下，感觉“哎呦，这网站像正品”就关注了。

在设计网站的时候，图片资源会在很大程度上帮助你设置站点，以及颜色，排版或者更多内容的基调。如果图片视觉元素没有和设计正确的结合，他很可能会破坏你原本想呈现的感觉。

著名的室内设计大师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的网站设计非常清爽，导航栏的设计均衡并且结构妥帖。

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