布局是网站的基石。其作用是指引用户浏览网站各组成部分、指明关键内容。布局同时也是网站外观的关键。因此，内容的布局需要认真仔细的思索。

　　一套原创且新颖的布局能够显著提升网站的用户体验，但也不要让创意影响到了网站的可用性。和往常一样，我们要设身处地的站在用户的角度进行思考：我们希望他们最先看到什么?应当如何最有效地传达讯息?在设计开始前，以上的问题是必须要提出来的，因为布局将负责形成设计的其余方面。

　　下面的几个网站的布局不走寻常路，尽管称不上完美，不过浏览这些网站，兴许能够给你带来创意的火花。

　　Beurre & Sel

　　这个网站实在漂亮。背景为自动播放的幻灯片，主导航栏位于页面顶部。随着鼠标向下滚动，导航栏会缩小但仍然固定在页面顶部。在其下方是五彩缤纷的公司自产饼干清单，同时也是子菜单中的按钮。随便点击一种口味的饼干，就会有相关信息覆盖子菜单，以便用户点击浏览各种口味。顶部的导航栏和子菜单固定在页面三栏网格内的中间一栏，可以保证用户的注意力始终集中在中心位置。

　　Hackery, Maths & Design

　　在页面加载的同时，会有一个有趣的3D线性动画填充屏幕。箭头代表着动感与流畅，并可鼓励用户向下方内容滚动鼠标。下方的内容分布在三栏网格中，其中两栏为主要内容，另有一个较小的侧边栏。但是这种布局并不会让产生局限感，相反带来比较开放的感觉，其原因是使用了宽敞的空间和圆角。这个网站的布局让用户感到非常舒服。

　　The Drawing Room

　　个人非常喜欢这个布局，简单但又不失有趣。这家工作室将自己的作品以大小不同，相互堆砌的菱形展示于页面之上。最中央的菱形为公司标志，表现并不突兀，不会分散对作品的注意力。把鼠标悬停在任意一个菱形上时，其中会显示该作品的说明介绍。这个简单的单页网站布局简约而不失创意，同时使用简单方便。

　　We Love Noise Luke Finch

　　的作品集具有有趣且友善的布局。这一网站看似凌乱四散，但却打破了过于简洁没有新意的局面。过渡效果可以让你对其项目有所简单了解，另外还可以使用箭头进行导航。左上角的心形是整个网站的导航中心，其可在主页上旋转变成一个“i”。在浏览网站时，可以在心形上悬停鼠标退出。

　　Ende

　　这个布局极具动态效果。在加载时，首先映入眼帘的是一副古怪的照片，同时页面会提示你向下滚动。滚动后会显示导航栏并随后固定于页面顶部。个人非常喜欢它的透明导航栏，能够更进一步打开页面，展现其后方的内容。网站的内容四散在页面各处，尽管网站有着一定的结构，但其中每个部分都采用了不同的背景色。这个网站非常显眼地使用了三栏网格，但有关团队成员的部分却突破了网格，以一种异常有趣的方式运用了屏幕空间。

　　Edward Carvalho Monaghan

　　来点颜色怎么样?这个作品集网站正经有个性，在浏览过程中你会发现其确实异常突兀而有趣。其最值得一提的地方是风格的一致性。这个网站实际上就凝聚成了一套完整的作品，其一方面表现了设计师的风格，另一方面也承载了作品集中的各幅作品——这也正是此类网站真正应当发挥的作用。网站的标识完整表现出了全部配色方案，同时，闪动的动画也给网站带来了动感。

　　Huys

　　这个网站在布局方面有着独到的魅力，页面右侧就好像是信纸的信头，其中说明了网站身份和功能等各种必要信息，而页面左侧可以垂直滚动，并具有类似公寓楼窗户式的布局，正贴合了公司的业务。点击鼠标后，用户将跳转到一个更具博客风格也比较方便导航的布局页面。

　　KathArt

　　KathArt 采用了非常棒的视频布局。这一简约但却行之有效的设计在展示其团队成员的同时四处渗透着自己的个性。在介绍过程中，其团队成员均表现为工作状态，就好像你和他们同处办公室一般。其导航巧妙地采用了时间轴方式，以便你轻松跟踪视频进度。

　　Wacom

　　Wacom 的目标受众广泛，其中既包括专业人员，也包括非专业的创意人员。作为网站不可或缺的组成部分，其布局营造出了用户友好的体验。左侧的导航栏在鼠标悬停时会最小化，并可展示各种不同的可使用内容。用户可随心操纵控制，选择自己想要看的产品，不会被强迫观看任何销售辞令。主页布局简单，并可引导用户查看最适合自己需求的产品。我个人很喜欢网站上伴随产品的巧妙手绘元素。

　　Amsterdam Dance Event

　　这个网站的布局非常有助于展现网站所涉及活动的态度和精神。导航栏一直延伸到页面左侧，形成横跨整个网站的参考节点。以强烈并具有视觉刺激性的图片组成的幻灯片采用旋转效果，同时展现有关网站活动的节庆、场地和会议宣传导读。从激励用户的角度来说，这个方法行之有效。

　　随着你向下滚动，下方的内容会滑过幻灯片，并将子菜单从底部带到顶部。网站的每个部分都有横跨屏幕的banner，作为当前部分具有视觉吸引力的介绍。文章的其余部分都在网格中呈现。网格中的各行排列并不完美;每列起头都比上一列略矮一些，堪称又一个细微但有效的视觉设置。

　　Cropp

　　Cropp 具有大胆张狂的个性，正如其布局所展现。鼠标悬停在任意图片上时，图片会像素画并变得难以识别，从而牢牢抓住人的注意力。顶部的导航栏在所有页面均保持一致，而主页则基本上就是导航栏中各个选项的高调视觉呈现。这个网站的布局牢牢抓住了像素化这一创意，其所有照片和视频都以方块形式安置，很像是经过像素化后的图片。

　　Neue Yorke

　　Davy Rudolph 作品集的网格布局简单、简约，让用户感到非常直接而自然。其每个页面都只有两种颜色，并且为当前页面所独用。在点击任一项目作品后，作品展示将变成页面主角，同时主导航面会消失。对于一个作品集网站采用这种方法，我个人最赞赏的是其既有个性，同时个性又不至于抢占设计师作品的风头。

　　Juliana Bicycles

　　作为一家销售自行车的商店，Juliana的设计颇为不寻常。在加载时，屏幕上会填充一副美丽、饱满并充满温暖感的照片。网站布局分为四个部分，均隐藏在导航图标后方。其设计比较具有女性风格，但文字样式大胆、强烈、洒脱。自行车上的3D悬停效果也是个不错的点。

　　Esquire

　　这个网站的布局简单、清爽、易于理解。Esquire的大标题就是单调的黑与白。其文章导读使用彩色，能够吸引读者眼球。悬停特效也很简单，在导读标题下方有说明内容。导航栏位于网站中间位置，功能上很类似报纸通过折页位置上方的内容引起读者的兴趣。其图像、颜色和简介标题也很能吸引用户注意。

　　Institut Choiseul

　　Intitut Choiseul 采用了很有趣的块状布局，彼此之间就像拼图一样契合。层叠式外观以及色块能够有效确立风格。继续向页面下方滚动，其布局转换成比较传统的网格形式，但其实每个故事都位于一个大小各不相同的块内，营造出一种有趣而动态的美感。不同的色块标志着网站的不同内容，因此比较方便导航和阅读。这家网站从质量上说比较精良，和自身设立目的相符。