想学高级网页排版布局创意？这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社区里所呈现这般, 网页的排版毫无固定模式, 主要视觉乃是杂志风格的商品大幅图片, 下方的左侧是占据较大空间的标题, 描述文案排列于右侧, 整体给予人强烈的秩序感觉, 页面显得既通透又干净, 文艺氛围扑面而来。

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