網站交互設計：「小清新」風格的視覺表現

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

「小清新」，近些年才流行起來的一個新名詞，用來描述一種文化現象，定義某一類音樂、文學、1980.html">攝影作品的風格，也隨之衍生成為對愛好這類風格的人的稱謂。 在平時工作中經常能聽到耳熟能詳的交談：「某某某的設計風格很小清新......」、「這個顏色太小清新了不太合適」......

其實作為10243.html">視覺設計師，我對這類風格在視覺上的表現一直很疑惑，究竟怎麼樣的設計才算是有小清新感覺的呢?難道這只是一種說不清道不明的感覺嗎?在最近參與的一次運營分享培訓時，也有運營同學問我， 怎麼樣才可以PS出有小清新風格的圖片呢，這也引發了我對這一類視覺設計表現的深入思考。 以下是我整理的幾方面內容，説明我提取對這一類風格在視覺表現層的關鍵點，只是一點拙見，一點設計感悟而已。

首先，在我們所能看到的「小清新」裡面，哪裡些元素是最有特色或者說代表性的?

為此我找了大量的帶有「小清新」tag的圖片，發現女人永遠是這一類風格圖片中出現頻率最高的，無論是背影還是傳說中的45度角，還有帶旅行元素的如老式的皮箱、鐵路、背包等，以及微單相機、陽光、有特色的靜物之類的元素， 並且在攝影手法上，大光圈、故意的過度曝光、逆光拍攝，隨意的lomo風格等等。

其次，除了上面提到的常見元素以外，色彩當然也是很重要的一方面。 但是從「小清新」的字面意思理解，她的用色完全就是淡淡的很清爽的那一類色系嗎?我通過她以及其他2個衍生的關鍵字做了一下情緒版的分析，並且通過Colorhunter這個網站提取了關鍵色彩並做了微調，在其中尋找到色彩上的變化。

再次，通過剛才的情緒版分析提取用色，發現其實在「小清新」的視覺用色中，色彩的飽和度並不高，並且從整個色立體模型來看，她處於明度軸最高位的下方，是帶有灰色調的，這也許為了更好的展示這樣的視覺風格所獨有的，或懷舊或憂傷的感覺。 以下圖兩種色彩模型為例：

冷色系

暖色系

最後，我們在web頁面設計中遇到的「小清新」設計風格，具體的表現在哪些地方呢?

1.色彩，這個上面已經提到過了這個風格在色立體中的位置，她也是使用者獲取資訊過程中最快能讓使用者感受到的。

2.頁面框架,根據上述的分析，這樣的設計風格對於頁面框架佈局毫不吝嗇的使用留白，或者簡單的線條對模組之間的關係進行分割，在這樣的設計風格方面，個人覺得豆瓣、網易印象派都做的挺不錯的。

3.關於質感，「小清新」的設計質感是羽量級的，或者說乾脆拋棄了質感的使用，取而代之的是乾淨整潔的大色塊。

4.圖形元素與質感一樣，也盡可能的使用了簡單的表現方式，比如圖形倒角、icon等無不簡約，但又不失細節。 總之，設計風格還是取決於產品本身的定位，風格必須與產品本身是匹配的。

最近感覺還是挺浮躁的，寫寫文章可以練心。 馬上要放假了，偷閒以這篇博文作為對前段時間一點設計心得的總結，不是設計高手，只是一個混跡設計圈多年的老油條，文中也許有詞不達意的地方，還請一笑而過吧。

來源：HTTP://www.aliued.cn/