本文主要通过日式网站的设计、色彩、文字、图片、元素这四个方面去解析。 适合所有愿意提升网页设计的小伙伴看。希望对大家有所帮助和提升。
来源：站酷
作者：俊敏
原标题：浅谈日式网站 我们需要学会哪些？
数英网对内容有所编辑
一.色彩
当我们看到小清新风格网站的时候，首先想到的一定是日式网站，因为年轻化的用户群占网站多数。
1
sarara：一家纯净水的网站主要突出网站的：静、纯、自然。
它的网站主题色系为蓝色系，主要由高饱蓝色到低饱蓝色的过度，加上明暗对比的强烈，直接了当地突出宣传的产品。
2
该网站的主要面向目标人群是大学生。
选择的人物是比较清纯、有活力的女生，让她告诉用户在炎热的夏季一瓶饮料给他们带来凉爽的感觉所带来的喜悦。
同样采用了蓝色系作为背景，紫色作为点缀色。画面的女主角传递出了清纯、可爱、运动、年轻的气氛！所以一样给用户传递出了清新的感受。
3
这也是一家日本矿泉水的官网。
运用了大量的蓝色系作为背景。画面中主要以蓝白对比来反衬人物，给人一种天然、阳光、愉悦的感觉，不知不觉就吸引了用户，自然突出了人物和产品。最后加上亮黄色的点缀吸引购买，成功增加了产品的购买率！
在设计小清新风格网页的时候可以吸取日式网站中的优秀元素：
1: 大部分采用蓝色系进行过渡
2: 增加色彩的对比。例如：亮蓝色和亮黄色等
3: 选择带有清纯、年轻化、清新、愉悦的人物来传达气氛
掌握了这些要领，相信各位设计一个接地气的日式小清新的网站。
二.图片
日式网站在处理页面中的图片的时候，有哪些规律呢？ 来看一些案例。
1
AIM info：网站团队栏目中运用的图片具有统一的调性。
主要体现在：她们的色调，人物视角， 及人物占有画面的比例，通过男女对比的先后顺序缓解视觉的疲劳。这样的处理方式会给用户一种专业、严谨、信任的感觉。
2
以下网站是一个传统服饰的网站。
网站中的图片运用了孩子的摄影角度。正面和面的对比，性别的对比，女孩和男孩错列顺序，色彩冷暖的对比，板块大小的对比，网站中小图片和大图片的对比，几何图形的对比，正方形和长方形的对比……这样的好处是让用户即使阅读这么多图片的时候仍旧感觉画面整洁舒服、条理清晰，并且保持很大的新鲜感，也不会感觉视觉疲劳。
3
网站中的图片使用近景远景的对比处理手法。
如下网站中的图片处理方式：
第一张：图片使用近景来表现食物的细节
第二张：采用远景来表现饭店的外观
第三张第四张：通过近景的手法来表现食物的加工过程
第五张：使用远景表现整个全景照片
第六张：使用近景来表现食物细节诱惑的感觉
第七张：使用远景体现整个参观的内部感觉
这样的处理手法使得整个画面中图多而不乱，增加了图片中的节奏感和层次，让用户不断有新鲜感去浏览图片。
4
以下网站也是通过近景和远景的方式来搭配图片的。
根据上面几个案例分析，可以得出在网站运用图片时可借鉴的几种方式：
1: 具有统一性。主要体现在色调、人物占有画面的比例、人物的造型、人物表情状态等。
2: 善用对比。主要体现在近景和远景的对比、冷暖色彩的对比、人物性别的对比、人物造型姿势的对比、形状大小比例的对比、利用图形来做对比等等
3: 突出主体，弱化背景！
三.文字
1
使用几何图形的形状比例来进行文字排版。
使用三角形比例进行文字文字排版
使用竖长方形比例来排版
使用横长方形比例来排版
使用六边形比例进行排版
使用正方形比例进行排版
使用圆形的比例进行文字排版
食品网站：文字进行竖排，有效地将主视觉和介绍性的文字结合起来，又不失美感。
同样使用竖排的文字方式进行排版的案例，使整个画面更加有贴切感。
2
使用图案和文字结合的方式进行排版，使文字更有趣味性，让页面更加紧密。
通过添加图形让整个文字变得更加丰富。
夸张的图形和文字内容进行结合展示，也很有趣味性。
3
使用图像和文字排版的案例
下图就是使用实景图像和文字进行设计的巧妙结合。夸张的人物模特和神情增加了文案排版的视觉冲击力，让原本单调的文字变得有活力。
根据以上几个案例可以总结出网站中文字排版可借鉴的几种方式：
1: 学会借鉴几何图形的比例来排版文字
2: 文字排版中巧妙地加入图形，不仅有创意还会让表达的信息内容更加易懂
3: 文字排版中学会融入来自生活中的图像元素，不仅会让视觉效果得到质的提升，还会使整个内容更加接地气
四.元素
网站中的线条以及几何图像的运用。
1
搭配文字一起运用。
下面网站为了突出数字部分，采用明亮的线条作为提示作用。不仅潮流，而且有效地抓住了用户的视觉和突出了重点。
同理，这里也运用了线条来突出文字的重要性。
2
按钮的运用。
下面的网页将线条运用在网页中的按钮上。告别实色为主的方式，利用线条更好地和整体融合。加强了按钮的透彻感也是非常新颖的展现方式。
3
网页整体的装饰作用。
线条的加入让下面的网页每一屏之前有了区分感！同时也吸引了用户的注意力，避免了两屏内容相互干扰。
4
利用线进行辅助修饰。
下面网站为了让整个信息更加的有条理的去展示，利用线条进行了分隔，避免了彼此的干扰。
5
网页中利用纯色方式来突出信息内容。
下面网站为了让用户第一视觉看到网站表达的重要内容，利用了纯色打底方式来修饰文字，成功地让用户第一眼注意到了它们。
下面案例为了将日式文字和英文进行区分，也采用了纯色的方式来区分和突出需要表达的信息内容。
6
利用纯色作为板块之间的区分，这是网站设计最常用的方式。
下面是一个网站的底部，为了让top到顶部的功能和底部板块信息得到有效的区分，采用了两种色彩来分离两个板块的信息，让原本杂乱的页面变得有条理。
下图网站也是采用不同的背景颜色，让画面变的有主次，富有层次感。
7
采用活泼的几何形状作为背景。
这种方式使得整个网页不单调，给用户一种活力青春的感觉，使模特和和整个画面结合得更加紧密。
8
加入科技的元素，让产品加分出彩。
下面网站是一家卖眼镜的产品，画面中流线型科技元素的加入，使得眼镜给用户先进、科技、现代的感受。
下面网站是一家市场杂志的模特网站，网站同样加入了现代科技感的元素，使整个网站变的潮流超前起来。
9
加入绘画元素让网站更富有活力和创新色彩。
下面网站是一家寺庙的景区网站，网站将平时在寺庙运动的人群， 使用绘画的方式唯美地展示出来，既不抢主体视觉，又为网站增加了几分色彩，真正地让用户看到此网站就想去当地体验一番。
下面网站的开场动画，利用绘画的方式来描述整个企业的历史及发展，既有历史感，又很有创新的感觉。
下面网站是一家卖苹果的网站，网站中背景采用大量种植苹果树景色的插画，搭配文字，简单而不失优雅，用简单粗暴的方式告诉用户我们就是卖苹果的。
10
让实景图片的元素融入网站，使网站更加接地气。
下面网站是一家婚庆公司的宣传网站，网站背景采用了新娘手捧鲜花的照片。设置透明度模糊展示，既不抢主视觉，又让背景和照片完美地融入和呼应，给用户一种淡雅幸福的感觉。
下面网站采用了生活照片元素，巧妙地融入网站中，给用户感觉就像在现场观看一样！
11
加入强烈的几何图形，让网站变得更有创意力。
下面是一家设计创意的公司，整个网站背景采用大量立体图形元素作为背景装饰，告别传统，加上炫酷的动效，足以说明是一家创意十足的设计公司！
根据上面几个案例可以总结出在网站中进行元素设计时可借鉴的几种方式：
1: 线条的运用，既可以起到装饰辅助分隔的作用，又可以作为重点信息突出
2: 背景纹理纯色的运用，有效的起到了网站分隔和区分对比的作用
3: 几何图形的运用，让你的网站更有新意
4:科技元素的运用，让网站的产品卖点更突出，优势更明显
5: 增加氛围，可以让网站变得更有青春活力
6: 实景图的运用，可以使网站更贴近生活
7: 手绘元素的运用，让网站更出彩
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（2条）