20个简单精妙的等分两栏式优秀网页设计

   借助栅格系统所提供的结构,网页页面在将内容组织得井井有条的同时,还可以兼顾到漂亮的布局和响应式的变化。这种情况在各类新闻、博客和网络杂志类的网站中并不鲜见。

  不过这些四四方方的区块呈现在用户面前的时候,通常是用炫酷的内容抓住眼球,布局设计大多隐于幕后发挥作用。当然,也有一些设计师会强化布局设计来吸引用户,栅格系统的自由度和兼容性就在此可见一斑。在这类页面设计中,有一种不算主流但也并非鲜见,别具一格同时也具有很大的拓展空间的布局设计,这就是今天我们要聊的两栏均分式页面布局。

  通常意义上的两栏式的页面布局其实很常见,但是它们大多都不会将两栏均分。等分式的设计需要设计师和站长有足够的胆量和魄力。这种网页可以设计得清爽可人,但是要有做好轻重对比、搞定视觉重心且避免用户的“选择强迫症”,需要设计师巧妙地运用各种设计技巧。今天,我们来看看这类网页设计 作品中成功的案例,从中汲取经验,总结技巧。

  Masi Tupungato


  壮阔而漂亮的风景图片占据着整个页面,色调相似的图片让整个页面的风格保持了一致性,左右布局的差异让页面视觉有了轻重之分,别致而有趣。

  Studio Meta


  Meta 工作室的网站设计颇为大气,漂亮的工作室外景直接占据了页面的一半成为了页面的视觉重心,右侧的文案也同样组织严密,没有使用过重的设计自然也不会喧宾夺主。

  Portfolio of Cihat Turhan


  Cihat Turhan 的作品展示页采用的是等分两栏式的……背景,一边是页面一边是代码,居中的文字介绍则正好暗示出了设计师的身份。网站的构思颇为精巧,美中不足的是对于移动端浏览支持不足。

  Wreck’s Valentines


  毫无疑问没一次情人节必然会牵涉到两个人,而页面等分也正好符合这个为请人们而设的渡假网站的设定。页面左侧维持不动,右侧形同我们常见的单页滚动式的设计,展示相关的细节。

  Formlets


  Formless 的首页借由左侧的插画来营造轻松愉悦的氛围,而将功能性的按钮布置于左侧,分工明确。

  Stolen Girlfriends Club


  这个名为被盗女友俱乐部的电商平台的页面设计颇为有趣,等分的页面两侧展示着不同的图片,它们不仅充当着展示的作用,当你鼠标移动到图片上的时候会看到相应的分类,也就是说它们同时还充当着导航的作用,别出机杼哦。

  World of Warships


  战舰世界的网页借助两栏式的布局来平衡视觉和文案,这种方案非常有效。尽管页面所含内容很多,但是轻重对比之下用户也能更为轻松找到他们想要的东西,避免在大量信息中迷失。

  Nicolas Tarier


  干净的页面设计反映出Nicolas Tarier的独特个性,略显不平衡的页面布局明显是设计师刻意为之,营造出有趣而俏皮的氛围。

  Spotify Valentines


  即使是互联网巨头,许多科技公司也无法抗拒情人节的吸引力。Spotify 因此创建了一个有趣的实验性的页面,歌曲配合着相应的色彩营造出别样的情绪,然后,轮到你在两首歌中作出选择了。

  Sparked


  Sparked 网站将一系列整洁的高素质图片封装到组织严密的栅格系统中,让简单的布局拥有了丰富的内容。

  Project 360


  页面在两个等分的区块中展示了一幅图片的两个不同的可能性,作为一个专注于创造壮观图景的项目,这样的展示方式非常贴合项目本身的属性。

  Elite Model Agency


  这个名为精英模特经纪公司的官方网站拥有一个极为简单的着陆页,直观的导航。看似原始的布局设计实际同样拥有华丽的一面,设计师用专业的摄影作品来承载网页令人惊艳的部分,直击用户的双眼。

  Taphome


  Taphome 的服务页等分为两部分,将数据块和图片互补并列来填充页面,也是暗示它们服务分为两个部分。

  Brandts


  Brandts的页面设计有动有静,左边的部分会轮播一组漂亮而惊艳的图片,左边的部分则保持静态,承载重要的文字内容。页脚的设计也很值得借鉴,仅呈现固定的内容,简约而漂亮。

  Pauw


  作为一个服装品牌,Pauw的着陆页采用的等分两栏式布局正好承载男装和女装,简约的页面设计配合着强对比的内容,男女模特承载着视觉重心,而黑白对比的文字内容则很好辅助着图片做好了说明,主次分明又不失均衡。同时,这样的设计也可以很好地兼容小屏幕。

  Nightcal


  页面布局等分使得网页的浏览者不用受到过多信息的冲击,这样的非入侵式的设计赋予了设计师更多的发挥空间。

  Nicolas Bussiere


  和之前很多案例一样,等分的空间虽然物理尺寸一样,但是内容在视觉上的不均衡营造出页面的重量感,内容的组织性更强,信息的传递也更加自然。

  Blondy


  即使呈现的内容不尽相同,但是等分式的两栏布局可以创造出“平衡”的概念,这样的布局也使得Blondy多种多样的内容以更有条理的方式呈现出来。干净整洁,用户不用一次从很多选项中进行选择。

  Eurovision


  尽管这个网站中仅有着陆页使用了等分两栏式布局,不过这种暗含“竞争”意味的布局反而呈现出一种有趣的对比效果。

  So Creative


  许多设计师会将自己的作品展示页做成两栏式的,可以一次展示两个作品,而且可以尽可能多地呈现细节又不会浪费页面空间,易于区分。至于用户会先看哪个,就要看用户喜好了。

  结语

  等分两栏式的页面设计重点在于视觉设计上。复杂的栅格布局自由灵活,单页设计直接有冲击力,但是它们也更容易让人审美疲劳,这个时候不妨试试等分两栏式的设计,开开脑洞试试新布局,也许会有意外之喜。

时间: 2024-11-03 21:04:30

20个简单精妙的等分两栏式优秀网页设计的相关文章

20个以细腻动画取胜的优秀网页设计

  动画今年是热门,像一场跳跃腾挪的表演,久看也不免厌倦.在这波浪潮里,有一小股设计师别出心裁,给网站加了细腻而不恼人的动画,一方面给网站添了生气,不致沉闷,一方面顺应潮流,锦上添花,实在是聪明得紧,来学习一下. 目前很多网页设计已经运用新的HTML5视频以及CSS3+JS来实现很棒的动画效果,不过我们在使用动画时也不能太弦,可以适当的并且有意义的去使用,这才不会分散网站访客的注意力. 网页设计中如何合理使用动画效果呢? 我们可以参考今天整理的20个融合细微动画的优秀网页设计作品,这些网页使用了

20个使用隐藏式菜单导航的优秀网页设计

  Navicon,也就是汉堡图标,已经成为越来越多网页设计 导航模块时的首选了.相比于传统的导航栏,隐藏式菜单导航在设计和用户体验上有着它独到的地方.作为一个随着移动端设计发展而崛起的网页设计 元素,Navicon并没有减弱它引导用户的功能性,也没有丧失它作为基础网页组件的重要性,还为设计师和开发者提供了更大的创作空间. 如何正确使用Navicon取决于项目的实际状况,相对保守的站点可能不会考虑这个选择,而不少追求时尚简约.多平台体验统一的新兴网站可能会更加青睐Navicon,因为作为导航接口

左右两栏式WEB标准(DIV+CSS)布局代码

菜单层固定宽度,内容层自适应.. 以下是代码:<html> <head> <title>Nice and Free CSS Template 2</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html { padding:0px; margin:0px; } body {

2014年最佳的20个优秀网页设计

  就要同2014年说再见了,是时候回顾一下这一年里的伟大设计了!著名的设计博客Designmodo评选出了年度最佳的20个优秀网站,这些优秀的网页不仅设计精心,而且紧跟时下流行的设计趋势. 网页设计师们总会热衷于追随最新的设计趋势,所以你能在这些优秀的网页中看到这些趋势--扁平化设计.极简风.视差滚动.视屏背景,等等.这些设计优秀的网站的另一个共同的特性,就是对移动端的良好支持--响应式设计.真正优秀的网站,总会支持尽可能多的设备. 那么接下来我们就一起来看看2014年最佳的20个优秀网站,了

CSS实例教程:简单的的滑动导航栏效果

文章简介:CSS实例教程:简单的的滑动导航栏效果. 由于网页字体的限制,以及对导航栏美观的需求,使用background-repeat来做一个简单的文字导航栏已经远远不够了.在很多场合,导航栏的背景是一个图案,字体也不再是单调的宋体,这就需要我们把导航栏的整体效果做图在网页中使用. 今天我们就来做一个简单的的滑动导航栏效果(不知道应该叫它什么^_^),效果如下图:   思路:通过改变链接鼠标悬停状态(hover)的背景图片,来达到把鼠标放上去有高亮显示的效果. 方法:在本例中,我们是通过调整各链

两栏DIV+CSS标准布局代码

一款两栏式DIV+CSS标准布局代码,详细如下: 代码如下:<html> <head> <title>Nice and Free CSS Template 1</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html, body{ padding:0px; margin:0

20个精巧走心的单页滚动网页设计案例

  单页滚动 也算是目前网页设计 中一个独立的类别了,导航.菜单等网页元素的设计也有一套独特的手法.极简风的导航栏设计其实算不上太多,毕竟导航栏的部分应该是包罗万象并且常驻页面的.而汉堡菜单的存在让导航具备了更优秀的隐藏性,摆脱了滚动条.分页和复杂的下拉框,让页面更整洁,为视觉设计留下更大的空间,留住了用户. 另外非常值得注意的一点是,即使导航设计足够隐蔽,用户也不会在页面间迷失,他们比我们设计时所设定的"普通用户"要聪明太多.网页出现的20多年来,大家已经习惯了自上而下的浏览,在没有

20个来自美国最优秀的网页设计

  美国不仅是世界上最的国家之一,也是世界上最大移民国家,来自全世界各地,不同肤色.不同种族.不同宗教信仰.不同文化背景的人在这里共存,这也早就了美国纷繁多样的文化现象和高度的文化包容性,同样也使得美国在设计领域有着其他国家无法比拟的创新理念,碰撞和融合下的独特美感. 虽然美国的历史相对其他的国家要短不少,但是美国的发展历程更具故事性,也是各种艺术与文化运动的温床,欧洲的现代主义.现实主义.印象主义.抽闲表现主义都在美国有着比较长足的发展(有意思的地方在于,音乐和设计领域许多东西都是欧洲萌芽,美

word2013怎样分两栏插入目录

  分两栏插入目录步骤如下: 步骤一:打开需要编辑的文档.在首页选定空白内容,这点最为重要,决定了能否完成的问题.然后依次"页面布局"."分栏".最后到"更多分栏".如图所示. 步骤二:在弹出的界面里,选取"两栏"."分隔线".以及最重要的,"应用于:所选文字".如图所示. 步骤三:完成上面步骤以后,在"引用"菜单下,选择"目录".这过程要注意光标