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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐

  • 如何做好B端产品的体验走查?我总结了这4个方面。

    本文作者通过实践,整理出一份较为成熟的 B 端产品的设计走查流程,和大家分享一下我个人的经验,也希望能得到你的反馈和交流,让我们之后的体验走查能更有成效。 一、什么是体验走查 1. 概念 体验走查是设计走查的…

    2023年3月2日 SEO操作
    05
  • 网站视觉与交互的关系

    1、 前期:确定页面上设计的需求目标,明确客户和用户的需求与期望等; 2、 中期:对前期的数据进行分析、整合,制定方案、逻辑,以及框架的搭建等; 3、 後期:对於视觉和交互的原型进行设计,风格、元素、内容、…

    2022年6月9日
    0137
  • 设计师必看:六个免费UI图标设计的资源网站

    图标,是网页设计和APP设计中最不可缺少的元素之一。一个小小的图标,可以方便用户点击和对网站功能的划分。在设计产品的时候,网页设计师总会寻找各种各样的图标,以满足产品的设计需求,这样就会非常浪费时间和精…

    2022年6月25日 建站资讯
    0353
  • 表单页面设计如何抠好细节

    一、可选与必填的混淆 在进行表单页面设计时,应当尽量表单中避免加入可选填的字段。若要加入,需要明确告知用户哪些字段可选,哪些为必填的。建议将选填字段控制在1-2个之内。 二、慎用重置按钮 “重置”这个按钮,…

    2022年6月25日
    0139
  • 如何把psd格式转为html。

    将PSD格式转换为HTML涉及多个步骤,可以通过以下方法进行: (图片来源网络,侵删) 1、使用Adobe Photoshop CC2017的Extract功能: 确保您的Adobe Photoshop是最新版的CC2017。 在Photoshop中打开您的PSD文件。 选…

    2024年6月25日
    04
  • 用户体验设计不乐观的体现

      一般来说,常见的网页对话模式大抵流程是: 使用者点击页面的某个按钮; 按触发之後进入禁用的状态; 将用户的触发请求发送到伺服器; 伺服器返回资讯到页面; 页面刷新,反映给使用者返回的状态。 这样的对…

    2022年6月25日
    0113
  • 网页设计趋势:2021年UI设计色彩流行趋势总结

    每年设计圈中流行的色彩都会有微妙的差别,前几年因为扁平化设计风格的关系,大多设计作品的用色都略偏柔和。但看多了难免会有些单调乏味,於是从今年开始,渐变色彩逐渐大行其道,使整个作品有种眼前一亮的感觉。…

    2022年6月25日 建站资讯
    0274
  • 聊聊圆形进度指示器

    循环转动的动效进度条也是界面设计时比较常用到的类型之一,局限性在於没有很明确时间和进度去告知用户是否能够完成。一般建议使用这种进度指示器,加载时间比较适宜控制在2-10秒,不然会降低用户体验。再者,建议…

    2022年6月25日
    0123

联系我们

QQ:951076433

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