• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 总结了日式网站这4个优点后,我能把中文网站做得高大上了!

总结了日式网站这4个优点后,我能把中文网站做得高大上了!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含中文字体,日本网站,经验分享,网页字体,网页字体选择等相关知识,希望在学习及工作中可以帮助到您

本文通过分析日式网站的色彩、图片、文字和元素运用,帮你充分吸收日式网站的精华,让中文网站的设计也变得高大上!

色彩

当我们看到小清新的网站的时候首先一定会想到日式网站。

Sarara 是一家纯净水的网站,所以它的网站主题色系为蓝色系,主要由高饱蓝色到低饱蓝色的过度,加上明暗对比的强烈,直接了当的突出宣传的产品。

该网站的主要面向目标人群是大学生,所以选比较清纯活力的女生作为主角,采用蓝色系作为背景,紫色作为点缀色。

这也是一家日本矿泉水的官网,它也是运用了大量的蓝色系作为背景。

画面中主要以亮蓝色、亮黄色以及白色的对比,自然突出了人物和产品,最后加上亮黄色的点缀吸引购买。

总结:

  1. ?大部分采用蓝色系进行过渡
  2. 增加色彩的对比,例如亮蓝色和亮黄色等
  3. 选择年轻化的人物来传达气氛

掌握了这些要领,相信各位设计一个接地气的日式小清新的网站。

图片

日式网站在处理页面中的图片的时候,会哪些规律呢? 下面我们看看一些案例。

AIM Info 网站团队栏目中运用的图片具有统一的调性,主要体现在:

人物的色调,视角及人物占有画面的比例,通过男女的先后顺序缓解视觉疲劳,这样的处理方式会给用户一种专业严谨信任的感觉。

下面的网站是一个传统服饰的网站,通过孩子的摄影角度(一个正面和一个反面),女孩和男孩错列顺序,色彩的暖色和冷色,板块大小进行一个对比。这样让用户即使阅读这么多图片,依然清晰条理,还能保持很大的新鲜感。

下面网站中的图片使用了近景远景的对比处理手法:

第一张用近景来表现食物的细节
第二张用远景来表现饭店的外观
第三张第四张同样通过近景的手法来表现食物的加工过程
第五张用远景展现全景照片
第六张用近景来表现食物细节
第七张用远景体现整个参观的内部感觉

这样的处理手法 使得整个画面中图多而不乱,增加了图片中的节奏感和层次,让用户不断有新鲜感去浏览图片。

这个网站也是通过近景和远景的方式来搭配图片:

根据上面几个案例分析得来我们在网站运用图片可借鉴的几种方式:

  1. 具有统一性(主要体现在色调/人物占有画面的比例/人物造型/表情状态 等)
  2. 运用对比(主要体现在近景和远景/冷暖色彩/人物性别/人物的造型姿势/形状大小的对比等
  3. 突出主体,弱化背景。

文字

使用几何图形的形状比例来进行文字排版:

△ ?使用三角形进行文字排版

△ ?使用竖长方形排版

△ ?使用横长方形排版

△ ??使用六边形排版

△ ?使用正方形排版

△ ?使用圆形排版

这个食品网站将文字进行竖排,有效的将主视觉和介绍性的文字结合起来。又不失美感

通过特殊处理文字效果,突出重要内容,直接抓取了用户的视觉。

夸张的人物模特和神情,增加了文案排版的视觉冲击力,让原本单调的文字变的有活力。

根据上面几个案例分析得来我们在网站中进行文字排版可借鉴的几种方式!

  1. 学会借鉴几何图形的比例去排版文字
  2. 文字排版中巧妙的加入图形,不仅变的具有创意还会让你所表达的信息内容更加易懂
  3. 文字排版中学会融入来生活中图像元素,不仅会让你的视觉上得到质的提,还会让你整个内容更加的接地气

元素

网站中的线条与几何图像的运用。

下面网站为了突出数字部分,采用明亮的线条作为提示作用,这样不仅潮流,而且有效的抓住了用户的视觉,突出了重点。

这里也运用了线条来突出文字的重要性。

这个网页将线条运用在网页中的按钮上,告别实色为主的方式,加强了按钮的透彻感。

线条的加入让下面的网页每一屏都有了区分性,同时也吸引了用户的注意力,避免了两屏内容相互干扰。

下面网站为了让用户看到网站的重要内容,利用了纯色打底方式来修饰文字。

下面是一个网站的底部,为了让top到顶部的功能和底部板块信息得到有效的区分,所以网站采用了两种色彩来分离两个板块的信息,从而避免它们彼此的干扰,让原本杂乱的页面变的有条理。

下面网站是一家卖眼镜的产品,画面中让流线型的科技元素的加入,使得眼镜给用户先进科技现代的感受。

下面网站是一家市场杂志的模特网站,网站同样加入了现代 科技感的元素,使整个网站变的潮流超前。

下面网站是一家婚庆公司的宣传网站,网站背景采用了将新娘手捧鲜花的照片,既不抢主视觉,又让背景和照片完美融。

根据上面几个案例,我们在网站可借鉴的几种方式:

  1. 线条的运用,既可以起到装饰辅助分隔的作用,又可以作为重点信息突出
  2. 背景纹理纯色的运用,有效的起到了网站分隔和区分对比的作用
  3. 几何图形的运用,让你的网站更有新意
  4. 科技的元素的运用,让你的网站的产品卖点更突出,优势更明显

您可能想查找下面的文章:

  • WEB中文字体应用指南
  • font-family 中文字体的英文名称小结
  • 这篇字体设计教程,可能让你少赔几万
  • 新字体来了!一组适合儿童节的中文字体打包下载(个人非商用)
  • 优设×汉仪字库:适合母亲节使用的中文字体打包下载(个人非商用)
  • 学会这简单几招,字体设计也能萌萌哒!
  • 人工智能字体来了?!阿里×汉仪的全球首个人工智能中文字库面世!
  • 想做出中国风的字体设计?我总结了4个规律!
  • 想做好字体设计,先掌握这3个字体结构法则
  • 零基础做字体?巧用字库做出你的第一款字体设计!

相关文章

  • 2017-08-06视觉设计师成长的三个阶段小结
  • 2018-08-23高手的平面课堂!用一个实战案例帮你学会平衡构图
  • 2018-08-23怎样设计,才能抓住用户稍纵即逝的注意力
  • 2018-08-23这5个牢不可破的设计规则,是你打造优秀动效的标准
  • 2017-08-06设计观点 技术是设计能力的重要资本
  • 2018-08-237种不同类别对比,小程序和APP相比还有多大差别?
  • 2018-08-232017年,这5个网页设计风格可能会成为主流趋势
  • 2018-08-23用一个AI教程,帮你学会运用黄金分割绘制图形
  • 2018-08-23水彩自学第三集:水彩笔常见问题及测评
  • 2017-08-06行内元素、块元素都有哪些

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 实战改版经验!我们是怎样设计Foursquare Swarm 5.0的?
    • 用3个案例,让你学会移动端的长表单设计
    • 让你的原型不再Low!这个设计师出品的 Axure 原型组件库现在免费下载
    • 大型的视觉设计系统都是怎么设计出来的?
    • 18套精美的苹果风格免费图标素材分享
    • 腾讯出品!从零开始制作设计规范的实用指南
    • 水平滚动的网站设计 小结
    • 页面出现滚动条的时候如何让滚动条不影响页面宽度
    • 网站要怎样为越来越流行的语音交互而优化
    • Web 设计 实现干净代码的12条定律[图文]

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有