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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐

  • 用户体验设计的五项大忌 如何设计留存率高的网站

    影响用户体验的网站设计有哪些?网站拥有良好的用户体验,很大程度上在转化率和用户留存率都有着不错的数据表现,另外在网站优化上也能获得不错搜索引擎排名。所以,作为网页设计师,应该多参考用户的反馈,重新审视…

    2022年6月25日 建站资讯
    0241
  • 表单页面设计须重视这两个要素

    清楚的告知用户如何输入的格式和内容 在表单页面设计当中,应该同事表明这个字段的标题,以及提供帮助用户输入的格式、内容的提示。因为缺少标题或者提示,用户会疑惑,输入的成本和错误的机率就会非常非常的高。因…

    2022年6月11日
    0143
  • 如何从几何图形增强视觉对比?

    规则与不规则 大多数的图形,可以被有效地分为具有几何意义的几何图形,规则的和不规则的。一般建议在网站设计的时候,在均匀地使用规则图形後,可以合理的使用一些柔和的非规则几何图形。 锐角边与曲线边 简单来说…

    2022年6月25日
    0117
  • 两点创建让网页设计进程加速

    创建准则 简单来说,就是根据客户的需求和资料,对网页设计项目先设定一些具体的标准,如色彩、图标、布局、方式等。以此提供强有力的根据和参考。这样做的好处不仅仅是提高网页设计的效率,还能够让网页设计最终效…

    2022年6月25日
    0115
  • 网页视觉效果需注意的三个系统

      配色系统 选择网页设计项目的主要色调时,最好确定好网页的调性、用户群以及所要传达的氛围。主要色彩影响着整个网页设计项目的风格,因此一定要反复确定主要的配色方案。其次,辅助色一般建议选择到1-3种即…

    2022年6月25日
    0214
  • 12种常见的网页布局设计详解(多图)

    为什么了解网页布局很重要?网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。这里将介绍12种常见的网页布局形式,例如卡片式、分屏布局、网格布局……一起来看看吧!1、卡片式网页布局卡片式布局被…

    2023年3月1日 SEO操作
    013
  • 如何做好网页头部内容设计?来看设计师的总结。

    无论作为设计师还是普通浏览者,大家观看一个网站时最先接触到的就是网页的头部区域,这部分内容为网站的其他各个方面设定了基调,在网页设计中起着非常关键的作用。尤其是如今简洁设计比较盛行,多数时候把头部内…

    2023年3月1日 SEO操作
    07
  • 网页设计新风格诞生:什麽是彩虹光感风格

    很多人听到彩虹光感,可能脑海中会浮现出无数个下图这样的彩虹…… 网页设计风格 当然,小编今天所介绍的彩光光感风格,绝对不是上图那个已经过时的彩虹1.0设计时代。如果你在UI设计过程中已经厌倦目前的…

    2022年6月21日 建站资讯
    0134

联系我们

QQ:951076433

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