【网页设计】怎么设计小清新风格的页面和布局

发布于:2016-02-23 19:04

怎么样设计页面才有清新感觉?怎么样才可以PS出有清新风格的图片呢?这也引发了我对这一类视觉设计表现的深入思考。以下是我整理的几方面内容,帮助我提取对这一类风格在视觉表现层的关键点,只是一点拙见,一点设计感悟而已。

99c84cd5c943f75f6fb2c39f32067a9b001.jpg

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

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

640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy

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

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

冷色系

640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy

暖色系

640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy

那么,我们在web页面设计中遇到的“小清新”设计风格,具体的表现在哪些地方呢?

1.色彩,这个上面已经提到过了这个风格在色立体中的位置,她也是用户获取信息过程中最快能让用户感受到的。

2.页面框架,根据上述的分析,这样的设计风格对于页面框架布局毫不吝啬的使用留白,或者简单的线条对模块之间的关系进行分割,在这样的设计风格方面,个人觉得豆瓣、网易印象派都做的挺不错的。

640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy

3.关于质感,“小清新”的设计质感是轻量级的,或者说干脆抛弃了质感的使用,取而代之的是干净整洁的大色块。

4.图形元素与质感一样,也尽可能的使用了简单的表现方式,比如图形倒角、icon等无不简约,但又不失细节。总之,设计风格还是取决于产品本身的定位,风格必须与产品本身是匹配的。

来源:设计学


共有2条评论
正序查看
倒序查看
D'you know 我爱你 2016-02-23 19:41
回复

同学  你的图片显示不出来

正经的国小小 2016-02-24 09:48
回复

同学,图片要保存到本地之后再上传,还有水印啥的最后是弄掉

正经的国小小 回复 正经的国小小 2016-02-24 09:48
回复
最好是
单卓玉 回复 正经的国小小 2016-02-24 12:43
回复
好的

回复:【网页设计】怎么设计小清新风格的页面和布局

图片
视频

0

今日新帖

0

昨日新帖

1

帖子总数