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
许多设计师会将自己的作品展示页做成两栏式的，可以一次展示两个作品，而且可以尽可能多地呈现细节又不会浪费页面空间，易于区分。至于用户会先看哪个，就要看用户喜好了。
等分两栏式的页面设计重点在于视觉设计上。复杂的栅格布局自由灵活，单页设计直接有冲击力，但是它们也更容易让人审美疲劳，这个时候不妨试试等分两栏式的设计，开开脑洞试试新布局，也许会有意外之喜。
designmodo
译文地址：优设
优设译者：@陈子木
相关推荐
-
20个分屏式网站设计欣赏
小编:网站的设计表现方式由很多种,今天来介绍一种分屏式.这种设计两边的信息可以包含相同类型的元素,可以呈现不同属性的媒体内容,完美的解决了需要同时呈现两个不同内容的需求,这种UI界面在视觉设计可以很有 ...
-
怎样关闭Apple ID 的两步式验证
怎样关闭Apple ID 的两步式验证,相信很多使用苹果手机的朋友们对此都很感兴趣,下面就和大家来分享一下,希望可以帮助到大家. 操作方法 01 首先打开以下网址appleid.apple.com,输 ...
-
IE9快速打开锁定在任务栏上的网站
结合Windows 7的快捷功能，可以使用这个超速打开多个锁定网站的方法： 首先，你可以将锁定的网站从左到右排列的任务栏。 然后按住Win键，用指尖滑过键盘上方的数字键，网站图标就都亮了，网站也被依次 ...
-
Word分栏时最后一页分为行数相等的两栏的方法
使用word分栏功能时，当最后一页内容不能占满整页时，将会出现如下图所示的情况，文字全部集中到了页面左侧。 下面将介绍将最后一页也分成行数相等的两栏的方法。 首先，选中需要分栏的内容【注意：一定不要选 ...
-
Word2013文档如何分两栏插入引用目录
Word2013文档如何分两栏插入引用目录
-
wps两栏怎么变一栏?
上图,是分两栏,使其变为一栏的方法: 单击页面布局---->分栏---->一栏,如图所示. 而这不是分栏,是双页显示,变为单击显示的方法: 选择视图选项卡,单击单击页(或100%)按钮即可 ...
-
word如何将文档分成两栏或者更多?
word如何将文档分成两栏或者更多? 1.打开我们需要进行编辑的文档,一般是需要把文档里面的内容分开 2.在打开的文档上方菜单栏里面寻找页面布局,并单击 3.单击之后,在页面布局的下方会出现一个子菜单 ...
-
如何将word文档分为两栏
如何在word中分栏呢?下面小编就告诉你如何把word文档分为两栏吧. 首先打开需要分栏的word文档,在菜单栏中选择页面布局,单击. 单击之后,在页面布局的下方会出现一个子菜单,在这个子菜单里寻找分 ...
-
office2010 怎么将word排版两栏显示
我们在报纸上看到最多的就是分栏样式,这种样式是最常见,也是最普遍的排版方式.所有学习Word排版,这项技巧是必须要掌握的.在word2010中为了适应文档的需要,我们需要将其分为两栏,这该如何操作呢? ...
