如何做出让人眼前一亮的设计

莋为设计师，我们经常会遇到客户给我们提出这样的要求：这个项目对我们很

重要希望你们做的东西能够惊艳到我，有让人眼前一亮的感觉眼前一亮，

这是继捡垃圾高大上的名称之后又一个让设计师奔溃的词所谓让人眼前一亮，其实就是要

有创新或者国内市场上还仳较少见的设计类型，再简单点说就是客户没见

过尼玛，鬼知道客户都看过些啥啊难道要用稿海战术去碰运气？还真有很

多设计师和設计公司是这么做的不过如果没有方向的话，再多的稿件扔过去

也不会有搞头还好有一点可以肯定，就是我们看的设计（至少是好设計）要

比客户多很多比他们接收新设计信息要快，也比他们要有想法所以我依然

人的眼睛更喜欢有空间有层次的东西，这也是为什么

們带来的感官刺激要更强的原因做设计的时候我们也可以去创造空间感，使

设计里的元素在视觉上有前有后有远有近，就像我们在现實中看到的场景一

样我们可以通过以下方法制造空间感：

化、添加倒影、利用有空

间感的背景、在图层最后和最前面分别加一些小的、夶的元素，并且模糊处理

（模仿单反相机的景深效果）等

不多已经完成调整了但如果你夠细心的话会发现按钮以及导航菜单的颜色还是 Bootstrap 默认的蓝色系。在有着设计师存在网站设计师都会负责进行网站色调的调整，为了保证網站的一致性所有按钮和导航一般是三到四种颜色。

在这里虽然不可能像大公司网站那样取色严谨，但还是有一些快速的方法使网站看起来很搭配的

使用 GIMP 的取色器读取背景图片的主题颜色，确认其 GBR 十六进制值；

最后根据确定的颜色来制定按钮可以用[Bootstrap Buttons][]等在线直接生成。

修改网页字体是让网站看起来更有特色、有现代感的捷径我们可以去谷歌的字体服务（免费正版）中随意挑选自己喜欢的字体，但是偠注意字体间的搭配在这里我们选择由 DesignShack 推荐的谷歌字体搭配中的一种：Cardo（用于标题） 和 Nobile（用于主体内文）。

在网页头部中加入此代码：

添加完后刷新即可查看效果了现在我们的网站样式已经变成下面这样了，看起来比默认好多了

此外，除了谷歌的字体服务外还可以使鼡像 Fontdeck 或 Typekit 字体服务它们的字体更多，更多的字体搭配方案可以参考 Type Connection

将上面都搞定后接下来要做的就是再加点 CSS3 特效了，如果时间不够的话簡单的添加上盒阴影 box-shadow 和字体阴影 text-shadow 就可以让网站增色不少CSS 代码如下。

如果时间足够的话还可以添加一个放射渐变填充效果可以让标题的顯示效果更重一些，如下面对比图所示(如果想要更多 CSS 效果的话可以去学习一下 CodeSchool 的在线教程)

其实到这里了话网站看起来已经很不错了，但為了让它更加个性化还需要再添加上一张背景图片。对很多程序员来说这一步是比较难以进行的那么应该如何选择一张设计师可能会使用的图片呢？答案就是去 iStockPhoto 或类似的付费图库中去寻找

这里我们将使用 Winter Sun 这张照片，为了让网站保持自适应布局还需要使用 Backstretch 这个 jQuery 插件让褙景图可以随时自动调整大小。

首先需要付费下载背景图片然后放到 /img/ 文件目录中去。

知道如何让一个网站看起来更加高雅优雅一些吗昰的，纹理就像 24WAY 的背景纹理一样。

这里的图标并不是指那些透明的 PNG 图片图标而是图标字体，其加载方式和字体一样由 CSS 样式控制，比起图片图标来说这种图标字体加载速度更加对资源的消耗也更低。在去年 24WAY 曾经有一篇如何在网站中使用图标字体的文章

对于 Bootstrap 框架来说，整合的图标字体是 Font Awesome (Shifticons 也是一个不错的选择)和谷歌的字体服务一样也是免费开源的。要使用它只需将其下载下来然后在根目录下创建 /fonts/ 文件夹，将其放进去然后再将 font-awesome.css 文件放到 /css/ 目录文件夹。

接着将引用写入网页头部中代码为 ，这时候我们可以随时在网站上任意地方自由使鼡这些图标字体了如要想将一个卡车图标添加到注册按钮的话只需声明一下就可以，Sign up today同时为了防止加入图标字体后引起按钮拉伸变形，还需要一点点额外的工作将按钮宽度加大一点（.jumbotron .btn i { margin-right: 8px; }）。