“小清新”风格的视觉表现

标签: 杂七杂八 视觉设计 | 发表时间:2012-09-27 06:36 | 作者:zhang qun
出处:http://www.aliued.cn


“小清新”,近些年才流行起来的一个新名词,用来描述一种文化现象,定义某一类音乐、文学、摄影作品的风格,也随之衍生成为对爱好这类风格的人的称谓。在平时工作中经常能听到耳熟能详的交谈:“某某某的设计风格很小清新……”、“这个颜色太小清新了不太合适”……

其实作为视觉设计师,我对这类风格在视觉上的表现一直很疑惑,究竟怎么样的设计才算是有小清新感觉的呢?难道这只是一种说不清道不明的感觉吗?在最近参与的一次运营分享培训时,也有运营同学问我,怎么样才可以PS出有小清新风格的图片呢,这也引发了我对这一类视觉设计表现的深入思考。以下是我整理的几方面内容,帮助我提取对这一类风格在视觉表现层的关键点,只是一点拙见,一点设计感悟而已。

首先,在我们所能看到的“小清新”里面,哪里些元素是最有特色或者说代表性的?
为此我找了大量的带有“小清新”tag的图片,发现女人永远是这一类风格图片中出现频率最高的,无论是背影还是传说中的45度角,还有带旅行元素的如老式的皮箱、铁路、背包等,以及微单相机、阳光、有特色的静物之类的元素,并且在摄影手法上,大光圈、故意的过度曝光、逆光拍摄,随意的lomo风格等等。



其次,除了上面提到的常见元素以外,色彩当然也是很重要的一方面。但是从“小清新”的字面意思理解,她的用色完全就是淡淡的很清爽的那一类色系吗?我通过她以及其他2个衍生的关键词做了一下情绪版的分析,并且通过Colorhunter这个站点提取了关键色彩并做了微调,在其中寻找到色彩上的变化。

再次,通过刚才的情绪版分析提取用色,发现其实在“小清新”的视觉用色中,色彩的饱和度并不高,并且从整个色立体模型来看,她处于明度轴最高位的下方,是带有灰色调的,这也许为了更好的展示这样的视觉风格所独有的,或怀旧或忧伤的感觉。以下图两种色彩模型为例:

冷色系

暖色系

最后,我们在web页面设计中遇到的“小清新”设计风格,具体的表现在哪些地方呢?
1.色彩,这个上面已经提到过了这个风格在色立体中的位置,她也是用户获取信息过程中最快能让用户感受到的。
2.页面框架,根据上述的分析,这样的设计风格对于页面框架布局毫不吝啬的使用留白,或者简单的线条对模块之间的关系进行分割,在这样的设计风格方面,个人觉得豆瓣、网易印象派都做的挺不错的。

3.关于质感,“小清新”的设计质感是轻量级的,或者说干脆抛弃了质感的使用,取而代之的是干净整洁的大色块。
4.图形元素与质感一样,也尽可能的使用了简单的表现方式,比如图形倒角、icon等无不简约,但又不失细节。总之,设计风格还是取决于产品本身的定位,风格必须与产品本身是匹配的。

最近感觉还是挺浮躁的,写写文章可以练心。马上要放假了,偷闲以这篇博文作为对前段时间一点设计心得的总结,不是设计高手,只是一个混迹设计圈多年的老油条,文中也许有词不达意的地方,还请一笑而过吧。

相关 [小清新 视觉] 推荐:

“小清新”风格的视觉表现

- - 阿里巴巴(中国站)用户体验设计部博客
“小清新”,近些年才流行起来的一个新名词,用来描述一种文化现象,定义某一类音乐、文学、摄影作品的风格,也随之衍生成为对爱好这类风格的人的称谓. 在平时工作中经常能听到耳熟能详的交谈:“某某某的设计风格很小清新……”、“这个颜色太小清新了不太合适”……. 其实作为视觉设计师,我对这类风格在视觉上的表现一直很疑惑,究竟怎么样的设计才算是有小清新感觉的呢.

[v] 小清新:Love Story

- Yu - 煎蛋
精心拍摄/剪辑的两段视频,同步得似乎身处两地的恋人彼此已连为一体. 很抒情的视频,由 ansoncool 童鞋投稿. YouTube上的原名叫Splitscreen: A Love Story. 完全由NOKIA N8拍摄,NOKIA短片获奖者. 一日一狗 puppy love. © 煎蛋 / 投稿 | 图片托管于又拍网.

Google Translate 也 “小清新” 了

- SuRe - 谷奥——探寻谷歌的奥秘
继Google Calender、Gmail、Google搜索、Google Maps之后,Google Translate也进化到小清新界面. 大片的留白,规矩的按钮,浅灰配色,搭配硬又黑的Sandbar. Google Reader还是Google News. © musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011.

Google Docs 测试“小清新”界面

- chitsaou - 谷奥——探寻谷歌的奥秘
Google Docs终于也放出小清新界面了,不过现在依然处于测试阶段,你需要进入Google Docs后点击查看新界面的提示按钮,才可看到全新的文档列表界面和文档编辑界面:. 新的文档编辑界面还在顶部增加了Collaborate菜单,方便你共享文档. © musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011.

Chrome Web Store 迎来“小清新”

- Yousri - 谷奥——探寻谷歌的奥秘
Chrome Web Store终于迎来了自己的“小清新”改版,界面非常简化,完全突出了网页应用,而且一眼即可看出哪个应用已经安装了(注意上图的Angry Birds应用截图上有一个绿色条带小钩钩儿). 打开网页应用的界面,是一个浮动层,看起来很漂亮,但似乎无法在新窗口打开. 另外,进入这个地址(https://chrome.google.com/webstore/user/purchases)即可看到所有已经购买/下载的网页应用/扩展喔,跟Android Market似的.

PICOOC的小清新与大数据

- - TECH2IPO创见
今年可以说是可穿戴科技的元年,三星、高通发力可穿戴科技,国内的许多厂商也纷纷不甘寂寞. 可穿戴的热潮也顺势带热了健康医疗这一概念. 因为可穿戴的出现,第一次让个体生理指标的计量化成为了可能. 然而智能健康设备绝不仅仅是将用户数据精确的采集然后做成图表放在网站上,已经有不少人抱怨运动追踪器的鼻祖 Fitbit 就是一个只能在不同的设备上看数的计步器而已.

小清新的七夕 不一样的情人节

- Yosef - 每日鲜果精选
有没有想过小清新的七夕会是什么样的呢. 如今,小清新成为了一种品质精神、生活态度,在我们的生活中时刻蔓延,并幻化成不同的模样. 我想,小清新的七夕能在中国传统节日的基础上多几分洋气. 七夕早起或晚睡前的时候和自己喜欢的人听听小清新,定会有不少美妙的收获. 如果再文艺点,就将小清新进行到底. 从着装到歌曲,从吃的到玩的,让小清新的风弥漫整个七夕.

Gmail 的新主题允许用户预览“小清新”效果

- Zhenbo Xu - 谷奥——探寻谷歌的奥秘
昨天我们还在 YY Gmail 的小清新界面会是什么样子,今天一早 Google 已经给出了官方答案—— Gmail 新增了两个主题,可以允许我们马上预览新的界面,进入 Gmail 设置中的 Theme,选择 Preview 或者 Preview(Dense) 马上就可以看到效果. 当然这两个主题还处于很早期的阶段,和某些 labs 项目会有不兼容的现象.

谷奥: Google 部分产品测试 “小清新” 登录界面

- Zik. - 谷奥聚合——谷奥主站+谷安 aggregator
现在,当你准备登录Gmail的时候,可能会在登录界面下方看到一行字说让你点击“Preview it”测试新的“小清新”风格登录界面. 如果你加入了测试,那么Gmail、Google Docs和Google Reader等一系列Google产品的登录界面都将变成“小清新”,当然你要是不喜欢也可以回到以前的界面,不过只是一个登录界面,无所谓吧.

谷奥也玩“小清新”,旧貌换新颜

- 安得米 - 谷奥——探寻谷歌的奥秘
Google正在紧锣密鼓的将旗下众多产品换到小清新界面,我们谷奥也不能拖他们的后腿(怎么说的好像是一家人似的),于是乎──谷奥也小清新了. 感谢西乔的整站和logo设计,感谢阿福的模板制作,感谢Google一直挺住没有倒闭破产被自杀,感谢广大读者的支持. 照例的,我就不贴新站的截图,逼那些常年泡在Google Reader里的潜水家们出来换口气儿.