网站布局创新设计:网站可读性和可用性完全结合(2)

五个网站实例

那么怎样可以把创造性、可读性和可用性这些特性完美的组合在一起？我们可以看看下面这些网站、他们在做一些新颖的、意想不到又相当精彩的事情。

Lowdi正在做一件了不起的工作，通过一些不同寻常的图形打造视觉的趣味性。每个色块不仅有一些特定形式的圆角（或是 反向的圆角），同时这些色块的形状也和公司所销售的产品相似。即使你不去看屏幕上的Lowdi盒子，你也会想到他。通过滚动，这个盒子（实际上是一个扬声 器系统）通过一系列弹出式气泡与你进行交流。这个想法有趣、新鲜，引人入胜。

网站地址：https://lowdi.com/

Steve Vorass在他的个人作品网站上采用了流行的 “隐藏式导航“ 进行设计。网站在屏幕的顶部简单的展示了项目、作品、联系方式几个模块的导航，但是页面中的图片也同样具有导航功能。每张不同的图片都会跳转到不同的项 目。更为重要的是，当你的鼠标悬停在图片上方时，每张图片都会提示点击后打开的内容。整个网站的设计十分简洁，这些意想不到的动画效果同样如此。

网站地址：http://stevevorass.com/

Caava Design在图片的选择和图形的趣味化上都有出众的表现，但更富具创意之处在于滚动的设计。整个网站的设计基于时间轴这一表现形式。点击每张图片都会展 示另一维度的信息内容。其特别之处在于你甚至不需要通过时间轴来进行导航和了解网站。网站结构清晰，设计精良。

网站地址：http://www.caavadesign.com/

Joint自身定位为创新的商业设计。而他的网站说明了这一点。每个页面都提供了可点击的选择区域来进行导航。设计简 洁，仅仅使用了灰白色系（不包括博客中的彩色照片），但是鼠标悬停动画效果和网站的可读性是令人惊叹的。当你在选择如何浏览网站时，这会令你想要不断地进 行点击。

网站地址：http://www.jointlondon.com/

Ballantyne将精美的图片、有趣的图形和酷炫的滚动效果结果在一起，来吸引用户的注意。这个时尚零售网站的案例 告诉我们在展示海量产品的同时如何有趣的展示公司信息。每次向上滚动三张图片时，下方会展示一张新的图片。滚动会持续在几屏内，让你忍不住去看接下来会出 现什么。除此之外，这种富有个性的斜边造型令整个图片流的呈现更具有线性，也更有趣味。

网站地址：http://www.ballantyne.it/

总结

多年以来，我一直听到设计师在说：不会再有什么原创理念了。这种想法很糟糕。每一天，新的技术和设备都在改变着我们对于网页设计和设计流程的思考。离开舒适的位置，走出去来一场头脑风暴，然后把想法带回到工作中，要确保包含可用性所必不可少的全部元素。

另外要记住，一些“疯狂”的想法可能会失败。那没什么大不了。归纳总结、不断学习，然后开始下一个伟大的想法。

原文作者：CARRIE COUSINS
原文链接：http://tympanus.net/codrops/2013/01/24/creative-layouts-and-interactions-in-web-design/