找回密码
 加入怎通
查看: 656|回复: 8

[站长八卦] 网页设计中最常见的11的设计排版形式

[复制链接]
阿繆 发表于 2017-07-14 17:55:34 | 显示全部楼层 |阅读模式
如何设计网页可以更好的展现企业形象, 突出视觉的中心。下面这几中形式经常出现在网页设计当中,重心型、中轴型、分割型(分上下分割和左右分割)、倾斜型、骨骼型、满版型、曲线型、对称型、三角形、四角型和自由型。我们来一一分析这几种排版运用于网页设计中的优点。
( Y7 x# `! Z* _0 e6 x5 b8 Y1、重心型6 W( X2 O- k; K, a+ {/ S4 f8 I
重心型版式的网页容易让浏览者产生视觉焦点,界面效果强烈且突出。重心型又可以分以下三种形式。" z& V8 p  M1 r2 l2 d$ S
A、直接以独立而轮廓分明的形象占据版面中心。

; {: H1 W& _1 B. j& h5 o+ W 2017621143538210.jpg 2 G8 `  S" e* e! T( C
B、向心:视觉元素向版面中心聚拢的运动。
7 X- n& j4 b' z" U$ ~
2017621143557299.jpg 4 G* }* L' h+ {- h6 ^7 L( b
C、离心:犹如将石子投入水中,产生一圈圈向外扩散的弧线运动。
/ Y2 @" {9 _8 Z. S+ g. l. t 201762114368411.jpg

7 ^# R: X8 p- \. c, {1 h# i+ l2、中轴型* i6 K+ N( ^/ e8 [" `2 [) c2 I
中轴型的网页设计,是将图形做水平或垂直方向的排列,文案以上下或左右配置。水平排列的版面会给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。垂直排列的这种排版方式比较常出现。
' A- Q1 n3 t/ @: v8 v. I2 ~8 w
2017621143632160.jpg 7 _8 Y, C+ F2 E
3、分割型
; Y6 i- O* \: X分割型主要可以分成上下分割和左右分割。相比较,左右分割型的网站会比较常见。# P$ J6 |$ F* R) _- T7 y; V
A、上下分割5 l+ e8 M& ]1 H1 H  Y8 r: C& ]
上下分割,顾名思义,就是把整个版面分为上下两个部分。可以在上半部或下半部配置图片,另一部分则配置文案。配置有图片的部分感性而有活力,而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。
- l9 h3 Z: x1 T( J, E9 a* c
2017621143648268.jpg ' ]6 h" E. |( ]4 J' @. h! k6 T
B、左右分割
4 A* ^6 V/ x, v左右分割,就把整个版面分割为左右两个部分,分别在左或右配置文案。当左右两部分形成强弱对比时,则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题,也自然不如上下分割的视觉流程自然。不过,倘若将分割线虚化处理,或用文字进行左右重复或穿插,左右图文则变得自然和谐。

& w* i( x" \9 S. j6 F) M 201762114375113.jpg # F$ S# `: G) Y) E3 h
4、倾斜型
/ d5 \8 m- A! q# v5 }' I5 k& k倾斜型的网站比较少见,这样的网站偏个性化一些,多在一些设计公司或是运动品牌的网站中出现。版面的主体形象做倾斜设计,造成版面强烈的动感和不稳定因素,这种设计比较引人注目。
$ g6 N+ U# ~/ K
2017621143724486.jpg & ?; @1 N$ ^2 J! v. B& V3 l
5、骨骼型2 V+ e$ u' V8 v8 Y8 J4 s" F6 F4 A
骨骼型比较在传统网站当中比较常见,它是一种规范的界面分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。说到这个,就可以想到栅格系统,实际上这两者是差不多意思的。% _3 f  b- p4 K- |- C" ?
骨骼型的网站会给人以严谨、和谐、理性的美。每一个区块经过相互混合后的版式,既理性、条理,又活泼而具弹性。

: D2 L2 c/ y, i4 ?# I1 O) m: ? 2017621143742111.jpg
0 H! G5 A9 e% R7 B/ m" H7 [6、满版型
, u$ s' u; }0 }7 `6 x% Z) n% E满版型的网站近几年也越来越多见,通常是版面以图象充满整版,主要以图象为诉求,视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉。
! m( I+ ?2 P" k7 \0 G! ^. ?$ q
2017621143816749.jpg
% ^0 `4 D( f# D* B  S7、曲线型
6 {7 q( f, r9 I' z( J' ^! R  i图片或文字在版面结构上作曲线的编排构成,产生节奏和韵律。

2 K6 Y% b3 N# I 2017621143835166.jpg
' K$ \8 `+ C1 S' v8、对称型: L2 o, m% \: d8 p, `
对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。

; m+ u/ s( e" W' b8 K9 P; N 2017621143850945.jpg ' F5 C7 t8 k: C3 A3 K: |2 j# D7 j
这个网站是绝对对称,比较少见,这样的网站看久了会比较单调。
0 }# A9 x5 Y0 e7 U: W; v1 C' R/ w9、三角形4 _/ ~2 g" P! h! H4 I) U
在圆形、四方形、三角形等基本形态中,正三角形(金字塔形)是最具安全稳定因素的形态,而圆形和倒三角形则给人以动感和不稳定感。
9 M- n* U  e  ^5 y& e8 G
201762114396282.jpg 3 L, R: g0 P( x/ _5 I' P( B4 z* s& l
10、四角型
# g6 F: e( J9 }# l$ q) g3 e四角型指在版面四角以及连接四角的对角线结构上编排的图形。这种结构的版面,给人以严谨,规范的感觉。
5 i4 Z! l# x0 [3 o: H# s2 n
2017621143922730.jpg / q+ [( y  M3 g" w* _4 x
11、自由型
$ h% u* Y4 J3 _) J' T( k自由行结构是无规律的、随意的编排构成,有活泼、轻快之感。

4 V% f3 s* N3 \) ^* I3 A 2017621143943393.jpg
- d9 w/ V' O- A2 O以上简单给大家分析讲解了常见的几种网页形式,每种版网页设计并非以一种表现形态出现,比如四角型的网站可能会结合对称性的出现或是中轴型,所以大家在分析一个网站的时候不要以单一的一种视角去分析。因为一个网站的设计可能同时存在好几种版式形式。
* y- v* q) v) _5 f
不同的排版可以给人不同的视觉感受,好的排版会给整个网站“锦上添花”。版式也没有绝对的好坏,只有适合和不适合。希望今天给大家分享的内容可以帮助到大家。
8 q& G) e; [% u' L; b,
6 C' O+ v$ e2 \& ?+ y

暂时无法加载帖子列表

回复

使用道具 举报

心中的季节 发表于 2017-07-14 17:57:12 | 显示全部楼层
我是来坐沙发的!
回复

使用道具 举报

友链专用Q 发表于 2026-01-16 08:16:34 | 显示全部楼层
学习到了,之前一直没注意过这个点,受教了
回复

使用道具 举报

iquwe 发表于 2026-02-10 13:51:57 | 显示全部楼层
刚好遇到类似问题,看完这个帖子心里有底了
回复

使用道具 举报

LK-划时代 发表于 2026-03-09 07:58:38 | 显示全部楼层
这个分享太实用了,刚好能用到,感谢楼主!
回复

使用道具 举报

yadeaweb 发表于 2026-03-13 13:16:53 | 显示全部楼层
楼主辛苦了,整理这么多内容,必须点赞收藏
回复

使用道具 举报

西万路小混混 发表于 2026-07-14 04:26:06 | 显示全部楼层
分析得很透彻,很多细节都说到点子上了~
回复

使用道具 举报

www-co9co-com 发表于 2026-09-11 14:25:10 | 显示全部楼层
说得很实在,没有夸大其词,这种真实分享太难得了
回复

使用道具 举报

182052724 发表于 2026-10-17 06:06:00 | 显示全部楼层
这个思路很新颖,打开了新世界的大门,谢谢分享
回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-11-1 04:12 , Processed in 0.045640 second(s), 28 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表