當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  網(wǎng)站運(yùn)營(yíng) >  正文

網(wǎng)站交互設(shè)計(jì):“小清新”風(fēng)格的視覺表現(xiàn)

 2012-10-07 10:14  來源: aliued   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

 

“小清新”,近些年才流行起來的一個(gè)新名詞,用來描述一種文化現(xiàn)象,定義某一類音樂、文學(xué)、攝影作品的風(fēng)格,也隨之衍生成為對(duì)愛好這類風(fēng)格的人的稱謂。在平時(shí)工作中經(jīng)常能聽到耳熟能詳?shù)慕徽劊?ldquo;某某某的設(shè)計(jì)風(fēng)格很小清新……”、“這個(gè)顏色太小清新了不太合適”……

其實(shí)作為視覺設(shè)計(jì)師,我對(duì)這類風(fēng)格在視覺上的表現(xiàn)一直很疑惑,究竟怎么樣的設(shè)計(jì)才算是有小清新感覺的呢?難道這只是一種說不清道不明的感覺嗎?在最近參與的一次運(yùn)營(yíng)分享培訓(xùn)時(shí),也有運(yùn)營(yíng)同學(xué)問我,怎么樣才可以PS出有小清新風(fēng)格的圖片呢,這也引發(fā)了我對(duì)這一類視覺設(shè)計(jì)表現(xiàn)的深入思考。以下是我整理的幾方面內(nèi)容,幫助我提取對(duì)這一類風(fēng)格在視覺表現(xiàn)層的關(guān)鍵點(diǎn),只是一點(diǎn)拙見,一點(diǎn)設(shè)計(jì)感悟而已。

首先,在我們所能看到的“小清新”里面,哪里些元素是最有特色或者說代表性的?

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

 

其次,除了上面提到的常見元素以外,色彩當(dāng)然也是很重要的一方面。但是從“小清新”的字面意思理解,她的用色完全就是淡淡的很清爽的那一類色系嗎?我通過她以及其他2個(gè)衍生的關(guān)鍵詞做了一下情緒版的分析,并且通過Colorhunter這個(gè)站點(diǎn)提取了關(guān)鍵色彩并做了微調(diào),在其中尋找到色彩上的變化。

 

再次,通過剛才的情緒版分析提取用色,發(fā)現(xiàn)其實(shí)在“小清新”的視覺用色中,色彩的飽和度并不高,并且從整個(gè)色立體模型來看,她處于明度軸最高位的下方,是帶有灰色調(diào)的,這也許為了更好的展示這樣的視覺風(fēng)格所獨(dú)有的,或懷舊或憂傷的感覺。以下圖兩種色彩模型為例:

冷色系

 

暖色系

 

最后,我們?cè)趙eb頁(yè)面設(shè)計(jì)中遇到的“小清新”設(shè)計(jì)風(fēng)格,具體的表現(xiàn)在哪些地方呢?

1.色彩,這個(gè)上面已經(jīng)提到過了這個(gè)風(fēng)格在色立體中的位置,她也是用戶獲取信息過程中最快能讓用戶感受到的。

2.頁(yè)面框架,根據(jù)上述的分析,這樣的設(shè)計(jì)風(fēng)格對(duì)于頁(yè)面框架布局毫不吝嗇的使用留白,或者簡(jiǎn)單的線條對(duì)模塊之間的關(guān)系進(jìn)行分割,在這樣的設(shè)計(jì)風(fēng)格方面,個(gè)人覺得豆瓣、網(wǎng)易印象派都做的挺不錯(cuò)的。

 

3.關(guān)于質(zhì)感,“小清新”的設(shè)計(jì)質(zhì)感是輕量級(jí)的,或者說干脆拋棄了質(zhì)感的使用,取而代之的是干凈整潔的大色塊。

4.圖形元素與質(zhì)感一樣,也盡可能的使用了簡(jiǎn)單的表現(xiàn)方式,比如圖形倒角、icon等無不簡(jiǎn)約,但又不失細(xì)節(jié)??傊?,設(shè)計(jì)風(fēng)格還是取決于產(chǎn)品本身的定位,風(fēng)格必須與產(chǎn)品本身是匹配的。

最近感覺還是挺浮躁的,寫寫文章可以練心。馬上要放假了,偷閑以這篇博文作為對(duì)前段時(shí)間一點(diǎn)設(shè)計(jì)心得的總結(jié),不是設(shè)計(jì)高手,只是一個(gè)混跡設(shè)計(jì)圈多年的老油條,文中也許有詞不達(dá)意的地方,還請(qǐng)一笑而過吧。

        來源:

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門排行

信息推薦