五种经典网页布局设计

时间:2018-12-09 06:39:56

  不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰

tags:
网站地址:

发布者资料: baihua


  不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。

  在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:“这个项目要从哪里着手呢?”伴随着这种犹豫的,是“做点前所未有的作品”的冲动。不过,很多时候,这些冲动和犹豫都在需求的磨合、设计的细化中,逐步淡化。相比大家也都发现了,网页布局在很多时候都是相似的,甚至可以说,有些布局模式是长盛不衰的。

  这些布局模式,或者说框架,几乎是“约定俗成”的,它们为用户所熟知,它们本身也更贴合用户对内容的识别模式和使用习惯。今天的文章,我们一同来聊聊五种拥有持久生命力的优秀网页布局,也许你的下一个网页设计项目可以直接从这五种布局模式入手,无需过多犹豫和纠结。

  无论屏幕多大,这种布局都能够为用户展示充足的内容,供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异,有的设计师会倾向于设计成固定宽或者横跨整个页面的布局,但是总体的模式都大同小异。

  这种布局设计干净清爽,有足够强的视觉表现力,并且常常采用的响应式设计,断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。

  原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特定的体验,下面的次一级元素能够做的很好的支撑。

  相关趋势:越来越多这类网页开始采用色彩丰富的插画式的图标,而扁平化的设计和这种布局页面有着天然的契合。

  单页式设计这几年非常火,它非常适宜于展现极简的内容,或者专注呈现一个主题。当网站的主题集中,内容也比较固定的时候,无需复杂的布局来呈现,单页单列式的布局足以应付一切。

  采用这种布局模式的时候,空间的控制至关重要,相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的,如果空间控制不合理会给用户一种混乱的感觉,如果过于紧密则会产生局促感。

  原理:单页式设计适合于小网站或者小型项目的展示,它可以用来制造一个简单的介绍页面,让简单的内容显得不那么单调,强化内容的形式感和重量感。对于内容简单的博客网站而言,单页式设计也是不错的选择。

  相关趋势:和单页设计结合最紧密的应该是动效设计和视差滚动,他们可以让单页式设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。

  那些被整齐分割出来的网页布局从来都没有过时过。无论是分割得细碎的网页区域还是大块的页面区块,大多都需要借助一套干净整齐的栅格来支撑。在此基础上,内容按部就班地被置于不同的区块中,被精心地组织展示出来。

  在设计师的作品集页面中,你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于,它可以同时呈现大量的视觉化的内容,看起来足够丰富又不会落于下乘。下面这个图库的效果看起来就相当震撼。

  在栅格中填充色彩,还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割,可供选择的方案有很多,不过千万要控制好栅格尺寸和间距。控制不好的细节,整个设计的平衡感可能会被破坏。

  原理:栅格的优势在于它的组织性,对于用户而言,它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容,在视觉上也更加协调自然。

  相关趋势:栅格很容易被人视为卡片这样的元素,可以为其加入翻转等各式各样的动效,呈现出更多的信息和视觉层次。

  研究表明,用户在浏览网页的时候,习惯于沿着F式的阅读轨迹来浏览信息,也就是说,用户喜欢从左到右阅读,然后向下移动,再继续从左到右阅读。

  这种F式的阅读模式对应的网页布局就是F式布局,最关键的信息靠左显示,从上到下尽量保持在一条线上。

  原理:人的行为很容易受到习惯的影响,而研究也证实了人思考、行为确实是模式化的。从左到右,自上而下,人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性,便于用户理解和交互。

  相关趋势:F式布局中侧边玩法很多,有的设计师会将导航与之结合,或者在页面顶部加上大图Banner。

  极简化的设计一直都在流行,它的流行不是没有原因的。开放式的空间让用户感觉更加轻松,也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层,可以让信息更有层次,也使得极简的页面拥有了细节。

  这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple 官网这样的设计。

  原理:极简化的页面中加入简单的几个分层,让页面有了视觉焦点,尤其是当设计者想要引导用户关注到某个关键的内容的时候,这种页面布局很很容易实现这一点。

  相关趋势:微妙的阴影和渐变常常被用在这样的页面当中,强化元素之间的层次感。虽然这些设计手法一度“过时”,但是现在大有卷土重来之势,而Material Design 这样的设计风格就是它们的冲锋号。

  许多设计手法、设计趋势都常常会被人质疑,但是如果撇开情感因素,从最基本的设计原理上来推导这些趋势的时候,能够从根本上判读这些设计手法是否真的是有价值的。

  今天所谈及的这些布局是经过时间洗炼的经典设计,挑选合适的设计趋势同这些布局结合起来,常常能够带来不错的效果。

  摘要:使用html和css实现简单的旅游网站布局,从而熟练地运用css样式,达到美观的布局效果。 HTML代码: a.html ...来自:wondering_cat的博客

  转载自:在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱...来自:这个少女IT男的博客

  网页布局设计基础一.网页布局的基本概念  最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知...来自:的博客

  网页布局是前端中一个基本概念,当一张空白的网页呈现在我们眼前时,如何把文字,图片等网页元素有规则地排列在网页中,就是网页布局要考虑的重要方面。好的网页布局能够让前端开发人员更好地把握网页的整体结构,提...来自:cgletufo的博客

  先说说三栏布局:整体高度已知,左右两边宽度固定,中间内容宽度自适应。 总共是有五种实现方式,分别是: 浮动解决方案、绝对定位解决方案、flexbox解决方案、table解决方案、网格布局解决方案。...来自:magi的博客

  网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动...来自:lyyo_cd的博客

  一、CSS盒子模型 CSS将每个元素看成是一个矩形盒子,占据一定空间。 盒子模型两方面理解:1.独立的盒子内部结构;2.多个盒子之间的香菇关系。 1.盒子模型概念 独立盒子模型由:内容...来自:Ranchonono的博客

  作者: 贾凡,用户体验设计师,GE数字集团 Z型布局是网页设计中比较常见的一种布局,之所以普遍使用,是因为它可以很容易的满足一个网站所有的需求: 网站 logo – 网站导航 – 网站内容和...来自:PredixCN的博客

  我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对...来自:何哲江的专栏

  当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨率用的哪款浏览器浏览窗口是否最大化是否启用占位置的浏览器的额外组件(如历史、书签、Google工具栏等等)乃至操作系...来自:上善若水

  主要采用流式布局flex布局实现。 在很多时候,移动端页面一个层常分列,但浏览器屏幕差别,用浮动,或者定位写老是出现一堆或大或小的差错,此时用流式布局就可避免这些错误。代码: ...来自:zjsfdx的博客

  扁平化网页设计的表现大多体现在配色、字体以及布局排版方面,这三样结合得当都能制作出漂亮的网站。在国内很多企业网站的布局架构几乎是一样的,最多就是LOGO和一点颜色变化,看不出什么特色和创新。 ...来自:natalie86的专栏

  . 提供多级侧边栏 相比于传统的顶部多级导航栏,侧边栏会让页面显得更加整齐易用。Carolina Herrera 的侧边栏设计则更有意思,它采用的是多级侧边栏,功能上不弱于前者,...来自:qs1571292935的博客

  1.CSS3响应式导航菜单 今天我给大家介绍一下如何使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一...来自:帅的相对论

  综合类前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识...来自:王永杰的博客

  由于原生带的dialog或者popuwindow弹窗确实有点丑,有时候完成不了UI布局和设计,所以整合了各种各样的popuwindow和dialog,居中,底部,带动画,有阴影,仿ios效果,自定义布...来自:panghaha12138的博客

  实战心得: 1.父元素不能撑起浮动子元素带来的影响 在没有实战之前,经常会看到书里讲到浮动元素带来的影响,其中之一就是父元素不能撑起子元素,书里经常会举这个例子 然后书上就会介绍如何清除浮动来让父元...来自:步步拾遗

  文字大小的的突破与约束 越来越多的衬线 增加使用手绘设计 gif图片,很好的吸引了用户的注意 真实信息 第一是界面的美观度,第二是界面之间交互设计的合理性和易用性。一目了然的明确想要什么 ...来自:的博客

  1.网页设计的布局 “国”字型布局: 国型布局也称为同型布局,布局结构与“国”字相似而得名 是一些大型网站所喜欢的类型 页面最上部分一般放置网站的标志和导航栏或Banner广告, 接下来是网站的主要内...来自:Mr_zhaoz的博客

  第一步(构思部分):想和看 想什么?呢,当然是想我们要创作出一个什么样的作品,可以是自己喜欢的产品,做个redesign什么的。也可以是一个大杂烩功能整合,但是尽量不要做差异太大的两种产品,...来自:ccit0519的专栏

  小编上次写了篇大屏数据可视化的文章《大屏做成这样,领导不重视你都难!》,围绕布局排版、配色、点缀以及动态效果等方面,阐述了帆软的一些经验,文章中酷炫的大屏效果引起了很大反响,非常多热心的用户留言咨询是...来自:u014514254的专栏

  视觉元素为什么很重要? 人是视觉动物,而网站是一个视觉媒体。任何一个网站的用户体验都会受到视觉元素的影响,这些视觉元素是UI设计的一部分,并作为视觉线索提示用户网站的交互方式。 本文将着重介绍5类最...来自:dlfeicui的博客

  DIV+CSS布局中主要CSS属性介绍: Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用...来自:91道奇技术

  角色的转换,带来了新的很多信息,也需要较多的转换。         沟通,在人之间的交际中,有特别重要的作用。作为工科出来笨鹅,加上本身就不太擅长交际,在合作模块会有较多的阻碍。阅读...来自:未来~超越自己

  设计好美观的画面还得要实现成为真正的网站,教你运用Photoshop切割、Dreamweaver编辑与CSS排版设定,完整披露专业网站制作过程,轻松掌握各式网站版面技巧+CSS排版才是王道! ■ 网页...来自:randyjin的博客

  可以通过 和 将 HTML 元素组合起来。 HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素。 编者注:“块级元素”译为 block level element,“内联元素”...来自:坐在那边看天空 的博客

  1 常见网页宽度: 950px、960px、1000px、1190px、1200px   2栅格化 栅格化并不是一个新的概念,大家关注的点往往是他表面的950、960和1190。左边的三个数据...来自:从菜鸟到菜菜鸟

  1、流动布局(html网页默认的布局方式) 特点: 1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。 2、内联元素都会在所处的包含元素...来自:superman__007的博客

  很多产品的信息量很大,又因为各种各样的原因设计师不能对内容进行轻易删减。如果不好好整理信息,会让界面越来越凌乱。我们可以这样做:把需要展示的信息都列出来 先不考虑信息之间的关系和顺序,大致列出即可。...来自:lucky_girl11的博客

  高大上的俯拍图 近年来俯拍图是营造网站设计感的流行手法之一。Munchery 作为一个美食类的网站,自然也不能落于人后,俯拍图不仅能呈现出美食的全貌,而且能够营造出整齐而优雅的质...来自:qs1571292935的博客

  这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo、导航条)、中部(页面主要内容、左右栏目)、底部(制作方介绍、超链接)。这是非常基础的一篇引入性文章,采用案...来自:杨秀璋的专栏

  当我们在浏览浏览器的时候,常常会放大/缩小浏览器的显示比例,或者在不同的设备上,所处的分辨率也不尽相同。因此,我们需要学习一个新的知识:弹性盒模型。 弹性盒模型 实现项目对齐,方向,排序(即使项目大小...来自:凛家Dear Love L的博客

  使用min-height设置最小高度时,必须给父元素设置高度,不然此设置会失效来自:lishu0927的博客

  准备工作 网站代码 服务器——腾讯云的CVM 域名——阿里云申请 远程连接服务器  云服务器,对应有映射出的公网ip windows使用git bash可以操作linux命令 通过ssh命...来自:magicwen007的博客

  我们首先看最终的效果图: 此效果应用的图片共3张,应该说用3张或是2和是最优化了;假如就用一张就有点变态了;呵呵…… 测试代码,CSS和内容都没有优化,但思路应该是对的! ...来自:tasty

  “T”结构布局形式。所谓“T”结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,整体效果类似英文字母“T”,所以称之为“T,形布局。这是网页设计中用得最广泛的一种布局方...来自:dqn811的博客

  如期而至,CSDN 2018 博客之星评选活动又跟大家见面了。正如我们一直坚持的主题“星星之火可以燎原”一样,点滴记录,精彩人生。一篇文章虽少,但它却能在无形之中帮助许许多多开发者,给予技术人以无限温...来自:CSDN 官方博客

  Sql表操作提升 一、前言         Sql是最重要的关系数据库操作语言,现在基本上任何与数据库相关的操作都离不开sql。所以说sql功能是很强大的。         但是Sql对表的操作...来自:愤怒的懒洋洋的博客

  版权声明:本文为章鱼哥原创文章,若要转载,请注明出处 以往我们使用Spring...来自:的博客

  一、Postman背景介绍 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具。今天给大家...来自:fxbin123的博客

  MyBatis常见细节问题 一、前言         MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置...来自:愤怒的懒洋洋的博客

  webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊。 方法一:(更新时间:2018/4/8)v3.3 注册时,在打开的Lice...来自:唐大帅的编程之路

  本教程对jetbrains全系列可用例:IDEA、WebStorm、phpstorm、clion等 因公司的需求,需要做一个爬取最近上映的电影、列车号、航班号、机场、车站等信息,所以需要我做一个爬虫...来自:昌昌

  13岁的北京学生张某,在去年12月27日19时新闻联播一则关于净化网络视听的新闻里,接受采访时说的话激起了轩然大波:“上次我上网查资料,突然弹出来一个网页,很黄很暴力,我赶紧把它给关了。”这个片段被C...来自:Kinb_huangwei的专栏

  迅雷下载有的电影电视剧的时候会出现:应版权方要求,文件无法下载,或者显示迅雷任务包含违规内容 无法继续下载。这个是因为版权方和迅雷公司交涉,迅雷公司通过技术手段阻止了迅雷任务的下载,比如下载最近的《人...来自:徐奕的专栏

  本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案。马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识...来自:wdlhao的博客

  现在越来越流行在线看视频了,但是对于我得收藏癖爱好者,还是希望可以有比较好的资源网站的,尤其是种子、磁力链网站。所以就整理了一份干净、好用的TOP10出来: 先推荐一个下载磁力链的工具: 马...来自:YXAPP的技术分享

  转载请标明出处: 本文出自方志朋的博客 错过了这一篇,你可能再也学不会 Sp...来自:方志朋的专栏

  在平时的工作中你或许会遇到这样的问题,给某个文件夹下面的所有的图片添加同一个字符串,如果一个一个去F2再CTRL+V这样就会烦得很,图片几个还好,如果是几百个图片那么工作的效率就会极低,windown...来自:pyf_914406232的博客

  1.在网上下载一个鼠标指针包,解压后在里面找到格式的文件, 2.右键菜单点击安装 3.点击确定安装应用鼠标主题包。 4.安装过的指针包就存在电脑里了,可以随时进行切换。只需...来自:小蓝枣的博客

  vue-cli3脚手架/单文件/环境搭建。vue3.x版本相对于2.x版本做了许多地方的优化,个人总结主要还是使用上使开发者更加一目了然,配置起来也更加的方便,减少了各种webpack里面的lo...来自:欢迎来到☆槿畔☆的博客

  vue3修改link中标签默认icon,vue3初次使用的时候不好好阅读配置难免会遇到一些坑,本人在项目完结的时候打算把浏览器的导航小icon图标给替换了,可是并没有那么顺利,那么如何在vue3中替换...来自:欢迎来到☆槿畔☆的博客

  win+p调出投影设置 仅计算机是不投影,都不往连接投影仪的接口输入数据。【投影仪的工作原理是接受计算机发出的数据,并显示出来】 复制是电脑和投影都显示。 仅投影是电脑不显示,投影显示,一种...来自:小蓝枣的博客

  Sql不常见关键字提升 一、前言 Sql是最重要的关系数据库操作语言,现在基本上任何与数据库相关的操作都离不开sql。所以说sql功能是很强大的。 我们常用的sql关键字不外乎 group by...来自:愤怒的懒洋洋的博客

  1:认识SwaggerSwagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法,...来自:sanyaoxu_3的博客

  1.1 1 【单选题】我国陆地领土面积排名世界第几?(C) A、1 B、2 C、3 D、4 2 【单选题】以下哪个国家不属于金砖五国(BRICS)?(B) A、中国 B、日本 C...来自:ling_wang的博客

  今天要谈的主题是关于求职,求职是在每个技术人员的生涯中都要经历多次。对于我们大部分人而言,在进入自己心仪的公司之前少不了准备工作,有一份全面细致面试题将帮助我们减少许多麻烦。在跳槽季来临之前,特地做这...来自:林老师带你学编程

  今天项目上线发现上传图片无法正常显示,报401权限问题在这里记录下解决办法 问题总结: 在Windows平台下如果PHP使用的是IIS的话那么php在上传文件时是先将文件上传到一个临时目录下的 ...来自:psw的博客

  在我们将Winform自带的边框隐藏之后,我们需要自己编写窗口的移动。 思路就是1.获得点击左键时当前鼠标的坐标 2.获得移动后鼠标的坐标 3.窗体的坐标=移动后的鼠标坐标-移动前的鼠标坐标 pr...来自:Maybe_ch的博客

  百度网盘不限速 点击下载 提取码:jsk0 百度网盘不限速 点击下载 提取码:jsk0 对于大多数人来说,每次在百度网盘下载东西的时候总会被限速,如果不想被限速就要充值百度网盘的SVIP,...来自:的博客

  先看效果图:【如果不懂代码,没关系,YHWHCSDN-以后我会告诉你!】喜欢的登陆下点个赞,要不作者都没动力了。 特色:霸气的背景,简约没有任何杂质的外观,细长的滚动条,当然,这是我自己设置...来自:小蓝枣的博客

  FFMPEG简介 FFMPEG堪称自由软件中最完备的一套多媒体支持库,它几乎实现了所有当下常见的数据封装格式、多媒体传输协议以及音视频编解码器,提供了录制、转换以及流化音视频的完整解决方案。市面上使...来自:的博客

  有时候我们在vue项目中需要用到有关scroll的动画,但是又没jquery那样的animate简单的动画方法,又要避免引入jquery的包导致过大,于是就用原生js模仿一个:(可用于返回顶部,锚点动...来自:欢迎来到☆槿畔☆的博客

  一、集合概述         对于集合,STL 的 set 相信大家都不陌生,它的底层实现是红黑树。无论插入、删除、查找都是 O(log n) 的时间复杂度。当然,如果用哈希表来实现集合,插入、...来自:WhereIsHeroFrom的博客

  从名字就不难看出,这是一款有着船新体验,门槛低,需要安卓手机就能正常运行。但相对应的,功能也比同类应用要强大,也更新了多个版本「解封助手、高品质音乐」等工具的软件。     一个奇鸽船新...来自:一个奇鸽最新版的小网站

  随着计算机语言的发展,Python也跻身于语言排行的常青树。要是说Python是最目前最火爆的语言,应该没有人反驳吧。在当下的人工智能浪潮中,Python可以说是C位出道,成功引起大家的注意的了。...来自:CSDN学院

  本帖最后由 古道吹西风 于 2017-8-28 22:11 编辑 百度的各种限制,相信大家都是苦难言,每年赚那么多的钱,还这样小气,开通会员也一样的下载慢,我只说“我去年买了个表”这个方法网上有教程,...来自:lemonix7的博客


最新评论

( 查看所有评论 )


声明

  • 本站提供网站模板镜像备份文件下载,本站不拥有模板的所有权。希望用户本着学习的态度使用,对于侵权行为,自行承担责任。