高级感网页排版怎么做？Z型布局等9个创意教你

网页排版布局是指网页上所有视觉元素的排列情况, 借助对页面元素有意地定位, 我们能够控制这些元素之间的相互关系, 从而更有效地引导用户的体验流程, 它属于网页设计的关键构成部分之一, 直接关系到访问者在阅读注册页面时观察各个元素的先后顺序、确定哪些元素会占据主要的注意力位置, 以及最终呈现出什么样的视觉整体平衡效果。

在这篇文章里面, Pixso设计师这位人士, 他依据资源社区所提供的那些具体案例内容, 对具有高级感的网页排版布局创意, 一共介绍了9个, 我们应当一起进行学习。

1. Z型布局

采用这种呈现Z形走势的网页排版布局, 通常来说, 标志会被安放在主页面的左上角位置, 这么做的目的是让使用者能够非常迅速地看到并点击注册功能。而在页面完全相反的那一边, 也就是最右侧的那个角落, 一般会安排导航菜单以及特别醒目的号召性用语模块。

至于这个Z字母形状里所构成的一条从上延伸至下的对角线路径, 它贯穿了整个版面的中间部分, 这一带区域是专门用来摆放那些需要去抢夺读者眼球并且吸引大量注意力信息的最佳地方。这种在进行网页排版与布局时所采用的设计理念, 是特别适合那些拥有高度可视化特征的页面的。

此外, 它还是非常适用于那些为了实现特定转换目的而创建的登录页的。

就像Pixso资源社区里展现的那样, 首屏位置的左上角安置了LOGO标识, 右上方位置安排了作为联系用途的CTA按钮, 左下方同样配置了用来引导用户进行操作的按钮, 这种设计是完全遵循Z型网页排版布局原则来进行配置的, 因此访客在进入页面的第一时间就能够较为轻松地将视线集中并注意到这些关键信息点。

2. F型布局

当你在进行基于F模式的网页布局排版工作的时分, 应当特别留意的一点是, 要把那些比较重要的元素放在页面顶端折叠的位置上去, 原因就在于访客很有可能会在这个特定的区域多停留一些时刻, 像我们常见的标题内容, 副标题内容, 以及带有特色的图片, 这些通常会被归类为需要放置在这类重要位置上部的元素。

至于这种叫作F型样式的排版方式, 它更加适合用在那些主要内容还是以文字信息为主的网络页面上面去打个比方说博客平台里面展示多篇日志的主界面或者是打开某一篇具体的博文所显示出来的各个具体文章页面等等这类场景下面都比较合适采用这样的排布规则。

参照Pixso资源社区里的实际状况, 那些重要的组成部分全都摆放在所谓的“F”字型布局的笔画位置或者是转折的地方, 这种做法是符合大家看网页时的视线移动习惯的, 因此读起来让人感觉非常顺畅，好像流水一样不间断, 这样能够让人先从表面了解情况, 然后一步一步地、深入地接收并理解所传递的那些文字方面的信息。

3. 全屏图像布局

全屏图像网页排版布局通过使用超级大的视觉效果并将其放置在屏幕的前方并且放置在中间, 因此能够非常引人注目, 同时能够让访客感受到一种身临其境的感觉。那些大型的媒体功能, 比如视频, 可以在非常短的时间之内传达出非常多的信息内容。

这种网页排版布局在适配移动设备方面表现得也非常合适, 所以它简直非常适合那种希望突出特定细分市场或者产品、并且渴望拥有出色营销视觉效果的企业来使用。

如下文中Pixso资源社区中的相关图片所展示的那样, 整个网页屏幕页面范围内铺满了那些能够引发访客情感共鸣的照片, 其目的在于号召各位访客去关注全世界那些饱受饥饿问题折磨的孩子们。

4. 分屏布局

这种通过从屏幕的中间位置进行垂直切割而得出的分屏网页排版布局, 创造了完美的对称平衡效果。这种巧妙地分为两半的做法, 允许左边的部分和右边的部分分别表达完全不同的想法, 或者是允许这两部分从两个不同的角度去支持同一个想法。

这样的分屏网页排版布局非常适合那些需要提供两种截然不同类型的内容的网页, 也适合那些想要把文字和图片均匀地组合在一起的网页。

如下图所示, 在Pixso资源社区中, 左侧使用的是对比强烈的橙色, 而右侧则用的是墨绿色, 这两者形成了屏幕的分隔的视觉效果, 打造出了大胆且新奇的设计平衡。

5. 不对称布局

就像分屏的效果一样, 这种看起来很潮的网页排版设计, 也把整个网页的空间给拆开做了划分。不过, 被分开的那些部分, 在大小的对比和视觉分量上, 并不是平等的。

正是因为从一边到另一边出现了这种不对称, 但又能保持平衡的变化位置, 就给画面带来了动态的感觉, 让整体设计变得更有生气。对于那些想要展现出更现代化、更新颖的面貌，并且一心一意想在提升用户使用积极性方面下功夫的网站来说, 采用这种不对称的网页排版布局是个非常好的选择。

如下图所示, 在Pixso资源社区中, 网页的图文排版呈现出不规律的变化, 时而左图右文, 时而左文右图。在描述文案的位置方面, 也存在上时下下的情况。这种不对称的布局让页面充满了动感, 使访客的视线在这种不平衡的状态下流动。这种做法有效地打破了原本珠宝页面可能存在的沉闷感。

6. 单栏布局

这个网页的排版布局把里面的所有东西都塞到了一个纵向的竖条里面，这种单栏的页面设计方式属于简单又直接的那种样式, 而如果用的是带有导航功能的单列页面排版设计的话, 访问者就能非常清楚地明白, 通过往下滑动屏幕可以去查看更多的内容信息，所以在处理那些文本量非常大的网页的时候, 建议采用单栏这种页面排版方式来呈现内容, 与此同时一定要使用图片、空白区域、大标题或者小标题这些元素对文字内容进行有效的区分和间隔。

对于那些内容篇幅很长的网页, 还有就是会按照时间顺序来展示相关内容的网页来说, 这确实是一个非常不错的关于网页排版布局方面的理念。

如下图所示, 在Pixso资源社区中, 导航菜单采用单栏网页排版布局的方式呈现。访客能够非常清晰地对网站内容进行浏览, 与此同时, 优秀的用户体验也会让访客愿意再次回到这个时尚的运动网站中来。

7. 盒子布局

基于框或者是基于网格的方式, 把多个内容合并到一个几何设计里面, 这被称作盒子网页排版布局。每一个框都指向不同的网页, 用户可以在那些网页里了解关于他们感兴趣的主题的更多情况。如果一个网页包含许多重要的内容, 那么这种网页排版布局就是非常理想的选择。

打个比方来讲, 盒子类型的网页布局安排方式, 简直可以说是那种用来展示个人图形设计作品集的完美解决办法没跑了。为啥这么说? 因为你完全可以做到非常方便地操作一下, 去链接那个主页里每个小方框的设计部分。这样做的目的, 是为了让那些小方框能够顺利指向不同的项目详细页面。

如下图所示, Pixso资源社区的主页被划分成了三个区域, 每个区域都装载了不同的信息, 用户如果点击了其中的任意一个区域, 就可以跳转到专门的二级内容页面去查看。

8. 卡片布局

卡片网页排版布局, 这种做法和那种基于框的网页排版布局非常像, 它用多个框, 或者说用其他矩形容器来显示不同的内容, 这个网页排版布局在很大程度上是不分层的, 这意味着没有任何一项会过于突出, 所有信息都得到同等的注意, 这种卡片网页排版布局, 对于那些内容丰富的网页来说是个不错的方案, 特别适合视频博客, 或者在线商店。

就比如像Pixso社区里面所展示的那样, 每一个关于家具的图片, 它们都被嵌入进了那个椭圆形的卡片之中, 那些个不同的椭圆形卡片在视觉感受上是平起平坐的, 这种做法是创意十足地去展示出了每一个家具各自所具有的独特形态样子, 同时也让主页的整体视觉效果变得更加丰富了。

9. 杂志排版

杂志排版网页的排版布局是基于多列网格来创建复杂的视觉层次结构的。通过实施可以单独修改的容器, 杂志网页排版布局可以让你把主要标题放在优先位置, 而不是把重点放在次要的文案上。

杂志网页排版布局将F模式与更复杂的网格结合起来, 这样可以将大量信息分解为易于阅读的内容, 同时保持秩序感并拥有干净、整洁的设计。所以, 杂志网页排版布局是内容密集型网页的一个好选择。

就像您在Pixso社区里看到的那样, 网页的排版完全没有被规矩束缚住。主视觉位置放的是那种杂志风格的商品大图, 非常突出。下面的部分呢, 左边是占据了好大块空间的标题, 右边则摆放着描述文字的文案。整体上给人一种特别强烈的秩序感, 页面看起来既通透又干净, 文艺的气息一下子就能扑面而来。

继续浏览有关 网页排版布局创意设计 的文章