CSS禅意花园 —— 设计

毕业对于论文困难群众来说真是太困难了，目测大家的平均字数都在2.5万左右。昨天“去中财的课程杠杆”花了我一天时间，今天，居然还发了生产实习报告的通知，我真吐了口血。真是，前有狼，后有虎。在将“本文一共有五章”改为“本文一共有五个章节”后，我动手写这篇读书笔记。这篇读书笔记主要是CSS禅意花园第二章的内容，特别鸣谢把这本书共享给我的学长/学姐（PS: 就是把这本书放在六楼书架的前辈）。仅以此弥补一下我大一打的瞌睡！

介绍

《CSS禅意花园》是2003年左右发布的，它是为了推广当时的“新技术”CSS。我们可以访问： http://csszengarden.com/ + <设计序列号> 查看每位设计师提供的设计。所有的设计都是基于同一个html文本的，设计师通过提供不同的CSS对这个html进行修饰。这里不得不感叹这些设计师神一样的设计思路。如下图：

设计

2.1 Atlantis(亚特兰蒂斯)

这个设计介绍的排版、分割线什么的大家都懂，而统一与象征手法，就屠龙之技，从略。可以访问： http://www.csszengarden.com/028/ 进行查看。

 

2.2 Zunflower

这一个设计主要讲了阴影和形状的使用。可以访问： http://www.csszengarden.com/026/ 进行查看。

首先，阴影（或者说间隔空间）的使用带了了许多好处：

1. 它给人以三维立体的空间体验，缓解了平面元素过多带来的压抑感。

2. 它能够拉近作品与人之间的距离，至少从心理的角度是这样的。

3. 它有时能够引导观赏者的视线。

其次，是形状的使用给人带来的心理效应：

1. 圆弧形，象征着女性的温柔，给人带来柔软的感觉。

2. 三角形，象征着男性的阳刚气息。

3. 正方形，给人以稳重的感觉，能够很好地稳定住画面。

 

2.3 Springtime(春天)

这个设计主要讲了色彩的使用。访问： http://www.csszengarden.com/083/

首先，颜色深会给人带来沉重的感觉，颜色浅则会给人带来欢快的体验。以下是几个重要的颜色分类：

1. 积极色 —— 橙色、黄色

    橙色象征着愉快与幸福，男性会比较喜欢。

    黄色容易让人联想到温暖与乐观，女性会比较喜欢。

2. 基础色 —— 黑白灰

    灰色的使用，参考这篇文章： http://www.xueui.cn/appreciate/interface-appreciate/gray-used-in-the-app.html

    黑白就没什么好说，我感觉。

3. 鲜明色 —— 红、蓝、绿

    红色，能够给人带来兴奋感，让画面更有激情。

    蓝色和绿色则是冷色调，能够让人安静下来，蓝色代表安全和稳重，绿色则是大自然与健康的象征。

2.4 Viridity (翠绿活力)

这个设计体现了图案、材质和对比度给人带来的不同体验。访问链接： http://www.csszengarden.com/022/

其实，我感觉这个设计不太符合我的审美。这边就放两幅莫奈的画顶替一下好了。

1.  图案，尤其是在某一个范围内，相对小的图案的填充，能够满足大家对于细节的需要。

2.  材质，它给人以触觉上的体验

3.  对比度

     对比度太高，画面中的噪音会很强，会给人带来视觉上的紧张感。

     对比度适中，人们会感到很舒适。

     对比度过低，会给人以压抑、毫无生气的体验，有时，我们会通过降低对比度的方式弱化一些元素。但千万切记，低对比度非常影响用户的可读性。

     说到对比度，不得不说最稳妥的经典设计“白底黑字”。它的好处在于，没有噪音，可读性很高。

2.5 Ballade(叙事曲)

这个设计我很喜欢，主要是引导视线。访问： http://www.csszengarden.com/068/

就是这样啦！