网页设计技巧:常见的排版布局分割技巧

随着各种各样风格的网站不断出现,网页布局已不必再拘泥於固定格式。大多数网站都会把内容安排到多个列中,想杂志或报纸那样,当然也有不少搞个性化,创出新意。但无论选择哪种布局方式,都不能够忽视页面的用户体验。下面,就让Inspirr Creation为大家整理常见的排版布局分割技巧。

技巧一:纵向居中分割页面

网页设计技巧:常见的排版布局分割技巧

使用纵向线分割页面时,如果居中就等於均等分割;但视觉偏向左边时,页面会更具母性,即内向型;相反,如果视觉偏向右边时,页面则具有父性或外向型。

技巧二:纵向分割且左侧面积大

网页设计技巧:常见的排版布局分割技巧

当页面被纵向分割时,左右排布的内容就会具备一种包含时间性的隐喻。左侧面积较大时,会表现出过去、经典的感觉,或暗含「过去」的属性。

技巧三:纵向风格且右侧面积大

网页设计技巧:常见的排版布局分割技巧

右侧面积较大时,所带来的感受就会显得更加外向和攻击性,有种「面向未来」的感觉。因此这种分割布局会呈现出一种「向前」的感觉。

技巧四:横向居中分割页面

网页设计技巧:常见的排版布局分割技巧

横向居中的分割线,会将页面分成上下两个均匀部分,这种布局方式同样具有「时间性」,上部代表未来,下部代表过去。当核心信息放在上半部分,就会呈现一种明确的指引性。

技巧五:横向分割且上部面积大

网页设计技巧:常见的排版布局分割技巧

上部面积较大时,上部所带来的压力感让页面显得稳定平和,在「时间性」方面,会呈现对未来的希望和期待感。

技巧六:横向分割且下部面积大

网页设计技巧:常见的排版布局分割技巧

下部面积较大的布局,靠下部分会自然而然成为视觉的重心,给用户一种压抑的感觉,更容易展现出权威性和经典感。

技巧七:不作分割的全屏式布局

网页设计技巧:常见的排版布局分割技巧

这种布局,背景图片本身的视觉效果会被最大化地呈现,视觉效果更加开阔,体验更具沉浸感,更加生动,细节也变得更加丰富,冲击力也更为明显。

技巧八:对四周进行切割居中布局

网页设计技巧:常见的排版布局分割技巧

将四周围均匀切割後,留白会使居中的视觉元素更加引人注意,自然而然就会更加聚焦而非沉浸,这种分割方式非常适合呈现特定内容的时候使用。

技巧九:采用倾斜分割布局

网页设计技巧:常见的排版布局分割技巧

相对於前面的布局来说,倾斜式分割布局会更加新颖,时尚而错落,而且更具有速度感。如果均匀分割,内容不同属性相似,会让两块区域具有明显的对抗性;如果两者内容互为辅助,则会有一种独特的融入感。

对於布局选择,既没有一成不变,也没有任何一种布局能满足各方面的需求,因此在选择布局问题上,我们应该根据自己的需要去选择,这样才能符合设计师和用户对网站的要求。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/43458.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
InspirrInspirr订阅用户
上一篇 2022年6月25日 23:42
下一篇 2022年6月25日 23:42

相关推荐

  • 如何在电商设计中玩得出色 合理利用黑色的搭配规律

    提到电商页面设计,你会想到色彩缤纷的页面?还是诱惑力十足的优惠产品呢?但是如果电商页面设计以黑色为主色,不知你是否会点击呢?其实很多电商页面设计,除非产品类型需要或产品本身就是黑色。难带,黑色就真的…

    2022年6月25日
    0145
  • 快速提升 UI 设计效果的 6 个小技巧(UI 设计集-11)。

    在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 8 个实用性很强的 UI 效果提升小技巧,是系列文章的十一篇,原文最早发布于 marcandrew.me …

    2023年3月1日 SEO操作
    02
  • 可视化大屏如何设计?详解可视化大屏UI 设计7个重要知识点。

    上期《可视化大屏设计如何设计?可视化大屏设计快速入门指南》给大家普及了可视化大屏设计的概况,从硬件、GIS 数据、三维建模、动效设计、图形技术、渲染引擎的技术架构等六个方向的总结。今天给大家分享可视化中 …

    2023年3月1日 SEO操作
    053
  • 品牌网站设计,不只是这么简单。

    20世纪,世界上最伟大的发现,网络肯定是其中之一。如今大大小小的公司,都想搭上这台快车,透过建设一个网站,扩展销售平台,提升销售额。 但是,许多网页设计公司只关注于网页设计本身,忽略了企业希望了解通过网…

    2019年5月13日
    0233
  • 增强网站对比:形状与颜色

    形状:假设你的网页设计当中的元素全是矩形,只有唯一的圆形,那麽就能够很快的从用户的视觉上跳脱出来。因此,合理的运用元素的形状,能够很好的提高网站的对比程度!比如,钝化照片的边缘,又或者把内容或者图片…

    2022年6月9日
    0118
  • 网站建设中交互如何应对需求和目标

    当网站建设的项目在立项的时候,都会需求建立一个明确的设计目标。而网站建设会有迭代的过程,也就意味着会有多个需求出现,也就会有多个目标需要完成。 简单来说不如举个“注册”的例子:“注册”就是属￿网站建设自身…

    2022年6月25日
    0118
  • 探索网页设计中体积背景的美和力量。

    凭借巧妙的设计创意和卓越的开发技能,数字动画已经连续举办了好几届。你还记得那些可以在多个维度中探索的场景吗?好吧,主流似乎不会放慢脚步,也不会消失。体积背景就是证明,这是一股真正鼓舞人心、越来越科技…

    2023年2月20日 SEO操作
    00
  • 网页设计师的新设计资源。

    12月你好!今天就来给网页设计师们推荐一系列新的工具和资源吧,同时里面还有很多节日主题的元素设计,希望这些工具资源能帮忙网页设计师们,让其运用到你的项目当中。如果真的可以,那就太好了!HumaaansHumaaans…

    2023年2月16日 SEO操作
    04

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息