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/

就是這樣啦!

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章