网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。
1.骨骼型
  网页版式的骨骼型是一种规范的、理性的分割方法,类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用,既理性、条理,又活泼而富有弹性。
2.满版型
  页面以图像充满整版。主要以图像为诉求点,也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及,这种版式在网页设计中的运用越来越多。

3.分割型
  把整个页面分成上下或左右两部分,分别安排图片和文案。两个部分形成对比:有图片的部分感性而具活力,文案部分则理性而平静。可以调整图片和文案所占的面积,来调节对比的强弱。例如:如果图片所占比例过大,文案使用的字体过于纤细,字距、行距、段落的安排又很疏落,则造成视觉心理的不平衡,显得生硬。倘若通过文字或图片将分割线虚化处理,就会产生自然和谐的效果。
4.中轴型
  沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。
5.曲线型
  图片、文字在页面上作曲线的分割或编排构成,产生韵律与节奏。
6.倾斜型
  页面主题形象或多幅图片、文字作倾斜编排,形成不稳定感或强烈的动感,引人注目。
7.对称型
  对称的页面给人稳定、严谨、庄重、理性的感受。
对称分为绝对对称和相对对称。一般采用相对对称的手法,以避免呆板。左右对称的页面版式比较常见。
四角型也是对称型的一种,是在页面四角安排相应的视觉元素。四个角是页面的边界点,重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角,也就控制了页面的空间。越是凌乱的页面,越要注意对四个角的控制。

8.焦点型
焦点型的网页版式通过对视线的诱导,使页面具有强烈的视觉效果。焦点型分三种情况。
(1)中心 以对比强烈的图片或文字置于页面的视觉中心。
(2)向心 视觉元素引导浏览者视线向页面中心聚拢,就形成了一个向心的版式。向心版式是集中的、稳定的,是一种传统的手法。
(3)离心 视觉元素引导浏览者视线向外辐射,则形成一个离心的网页版式。离心版式是外向的、活泼的,更具现代感,运用时应注意避免凌乱。
9.三角型
  网页各视觉元素呈三角形排列。正三角形(金字塔型)最具稳定性,倒三角形则产生动感。侧三角形构成一种均衡版式,既安定又有动感。
10.自由型
  自由型的页面具有活泼、轻快的风格

转载于:https://blog.51cto.com/dingpeng/194620

网页技巧-网页的版式设计---版式的基本类型相关推荐

  1. html5广告的版式设计,版式设计在平面广告中的运用

    版式设计在平面广告中的运用 版式设计已经成为当今社会信息传递的重要途径和工具,优秀的版式设计能够有效传达设计者的思想情感.美学追求.艺术修养,满足人们的审美需求.平面广告中的版式设计是以秩序化.艺术化 ...

  2. html设计网页技巧,网页设计技巧:网页表格设计技巧总结

    一个好的表格应该以易于理解,简单明了的方式传递大量的信息.真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用.从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性. ...

  3. 平面设计中的网格系统pdf_深入浅出,带你认识网格系统与版式设计

    设计分享 研习设 设计 Hello大家好,这里是研习设计分享. 时不时分享/新鲜/有趣/有料/设计资讯和案例,欢迎大家订阅关注!~ 预估阅读时间:10分钟 ME研习设小研研:今天,和大家深入浅出,带你 ...

  4. 什么叫版面_什么是版式设计?

    一.什么是版式设计 版式设计是现代设计艺术的重要组成部分,是视觉传达的重要手段,表面上看,它是一种关于编排的学问:实际上,它不仅是一种技能,更实现了技术与艺术的高度统一.版式设计可以说是现代设计者所必 ...

  5. 网页模板设计中5种常见的设计版式类型介绍

    在网页模板设计中,页面的排版是重中之重,布局设计不当会影响浏览网页的体验.同样的素材使用不同的设计排版方式,也会让页面设计风格发生翻天覆地的变化.所以,清楚如何设计页面版式,能提早确定各元素布局的位置 ...

  6. 网页版式设计与平面构图

    网页版式设计与平面构图 1.网页版式的基本类型主要有: 骨骼型.满版型.分割型.中轴型.曲线型.倾斜型.对称型.焦点型.三角型.自由型十种. 2.平面设计三要素: 创意: 是平面设计的第一要素,没有好 ...

  7. 《众妙之门——网页排版设计制胜秘诀》——第3章 设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计...

    本节书摘来自异步社区<众妙之门--网页排版设计制胜秘诀>一书中的第3章,第3.1节,作者: [德]Smashing Magazine 译者: 侯景艳 , 范辰 更多章节内容可以访问云栖社区 ...

  8. 计算机网络多元化媒体传达,网页版式设计的特征及其视觉元素

    网页版式设计的特征及其视觉元素发布者:本站     时间:2020-05-02 14:05:53 基本的静态网页版式都会将版式模块化的分布于页面中,如同报纸当中的编排一样,犹如一个个的屏幕和窗口.从版 ...

  9. UI界面如何制作?这些版式设计小技巧收藏好!

    本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 UI界面如何制作?这些版式设计小技巧收藏好!在做UI界面的时候,很多时候我们需要去看很多的产品进行竞品分析.市场调研 ...

最新文章

  1. c/c++标准预定义宏
  2. puppet开源的软件自动化配置和部署工具——本质就是CS,服务端统一管理配置...
  3. Windows Phone7 -- ApplicationBar具体使用说明(设置显示迷你模式和背景半透明模式)...
  4. lecture notes for investment bank internship
  5. Boost.Signals2 的有序插槽 hello world 示例
  6. boost::json::value用法的测试程序
  7. IDEA——必备插件指南
  8. audio语音相关的基础知识-VAD,ASR,AEC,AGC,BF等
  9. 窗体最小化时隐藏窗体_delphi基础
  10. AttributeError: module ‘hanlp.utils.rules‘ has no attribute ‘tokenize_english‘
  11. alot英文怎么读_漂亮的英文是什么英语怎么说
  12. 如何实现页面广告随时上下线、过期自动下线及到时自动上线
  13. 删除Mac中的Windows启动项
  14. Linux系统使用userdel命令删除用户
  15. 学波尔还是学王励勤?-----再谈正手弧圈的重心转移
  16. 嵌入式(stm32)学习之路---无源蜂呜器
  17. FTP(File Transfer Protocol,文件传输协议)
  18. 防火墙和NAT基础学习
  19. python有哪两种表现形式小练笔_小练笔的各种形式
  20. 解决COMSOL中表达式单位不一致问题

热门文章

  1. FusionCharts Demo
  2. inter幻影峡谷安装ubuntu18.04
  3. 银行存款业务 银行软件测试工程师必会
  4. Android6.0修改以太网IP
  5. 第一篇博客,天下武功
  6. HYSBZ - 1086:王室联邦(树上分块?)
  7. 毫米波频段射频器件的主要技术工艺趋势
  8. HC32F460 实现模拟U盘导入python脚本在19264点阵屏上绘图--RTthread移植
  9. python制作手机通讯录功能
  10. 逐步回归matlab函数,Matlab逐步回归