那些让我们上瘾的日本网站设计,到底好在哪里?!

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注