现在的位置: 首页 > 综合 > 正文

想做什么样的首页?只有你想不到的,没有我做不到的

2013年10月13日 ⁄ 综合 ⁄ 共 2899字 ⁄ 字号 评论关闭

设计师只要钩钩小指就能牢牢抓住用户的眼球,赢取他们的忠诚。清晰的视觉结构,反复推敲后的印刷样式并适度运用图片是吸引用户的关键所在,因为这些因素能大大提高用户的浏览体验。

因此为了达到持久的积极影响,我们开始普遍使用颇具实用性的基础法则。

不论怎么样,传统的解决方案是枯燥乏味的,而创新的解决方案可能很有感染力,因此为了吸引更多的访客,设计师们冒险尝试使用与众不同的革新方法,毕竟在传统和创新之间,设计还是有很大创意空间的。我们观察着他们的设计,发掘新的方法,并收集起来,所以你无需再费时整理。

再说了没有一个页面比首页更重要,我们都很想知道设计师们在设计首页的时候用了哪些方法,现在就让我们来小窥一下突破常规,非同寻常的个性首页吧。

1.动态、交互、个性
Leo Burnett显然喜欢用铅笔,至少在绘制网站设计草图的时候喜欢用铅笔。第一个基于flash的网站LeoBurnett.ca把铅笔作为鼠标指针,用户可以用它操控3D,看上去十分漂亮,交互性很强,而且用户用起来也方便。

Capitalcomm网站上的导航项排成一行,用户可以通过拖拉菜单来查看内容,十分出挑的设计,值得研究一下。

Yammat.com网站上基于flash的导航上都有一块橡皮或橡皮筋,一旦点击了一个链接,整个页面都会动起来,而且每个页面的背景图片都是不同的。

交互式的垂直导航菜单。 SectionSeven.com让你体验看网页像看书一样的感觉。

Flaboy.com 网站上的导航菜单会抓住你的鼠标指针不放,然后自动转到特殊的浏览页面。精细的设计,精细的工具。

导航菜单可以变得很华丽,MHQ.nl网站证实了这一说法(这个网站的头块招牌还是我们以前的那篇文章呢)

2.用全新的方法浏览网站
如果浏览网站无需点击任何链接,结果会怎么样?哈哈,很有趣的尝试,设计师们正在做这个试验呢。

3.运用增强型的界面设计
Jason Hickner 就用令人惊异的样式和周全的动态交互设计出了滑动导航。
Screenshot

4.换个角度看网页
Davor Vaneijk的网站提供了一个非同寻常的设计视角,用户在锐角角度下看到了基于图标的导航。
Screenshot

Mathieu Badimon也运用了相似的方法。
Screenshot

Lance Wyman用螺旋样式展示了他的作品,最新作品被放在了最显眼处。导航菜单有助于更明确的选择内容,这些效果由Flash支持。
Screenshot

5.利用可视因素
“One Laptop per Child”网站的首页并不很醒目,图片代表着网站中不同的版块,导航菜单上也有图标,一个与众不同却十分有趣的概念。
Screenshot Startseite
Screenshot Startseite

6.利用视觉冲击力
73dpi.net 用图片而不是文字传达它所要表达的信息,所有的图片一个接着一个,没有任何评论和描述。
73 dpi, Screenshot

Basism 网站运用布局合理的格子来排列内容,描述是隐藏起来的,但是一旦图片处于悬停状态,描述就会显现出来。这是基础Flash所达到的效果。
Screenshot

7.大量使用标签云
Search the Beat是个音乐搜索网站,有着大量标签云,首页大约有150KB的文字。
Screenshot Searchthebit

说到标签云,代理商 Wieden +Kennedy根据客人的“分量”和职位,运用标签云来介绍他们的客人,用户同样可以用鼠标查看导航内容。这是个基于Flash的解决方案,虽然在实用性上有些缺点,而且过于华丽,但却是个十分有趣的理念。
Screenshot Startseite

8.动态交互和艺术品
Vault49网站用Flash手法来展现它的作品,页面被分割成6个部分,互相之间都建立了导航系统,虽然设计颇费心思,但这个网站却运用了讨厌的弹出窗口,受到Firefox浏览器阻截。
Screenshot Startseite

Cappen.com 运用了图解、艺术品和周全的网站结构,使用户使用起来更方便。
Screenshot Startseite

9.交互性和易于用户使用
Shopcomposition.com 是个只有一个网页的网站,在运用了多项合一的解决方案后,在首页上就能看到所有的产品。
Screenshot

10.运用印刷样式
这个方法虽然不太常用,但却很出挑,如果文本stripes框架有链接(但通常是没有链接的),那么用户就能看到文本,虽然信息量不是太大,但还算与众不同,然而如果运用Flash技术,可能会出现其他情况。
Screenshot Startseite

对于那些懂得欣赏文字的人来说,基于Typography的解决方案是最好的,但也有个缺点:在没有stylesheet的模式下,导航也消失了。
Screenshot

Neil Duerden网站上也运用了相似的理念。
Screenshot

11.使用文本标记效应
 Andy Rutledge的网站就用了文本标记效应。Andy用一段长长的文字作为标题,有时一个吸引人的设计运用三种颜色就足够了。
Screenshot

Mostardesign网站上也使用了相似的技术,整个设计都是建立在背景图片和醒目的文本上的。
Screenshot

Eoghan Mccabe的悬停效果着实让访问者大吃一惊,没有悬停状态文本的网页看上去真的很乏味,最重要的是用绿色标记突出重点,字体索性就大点。
Screenshot

12.用你的网站做试验
Shaun Inman 使用色彩和饱和度来说明网站内容的新旧状态(或相关重要性),我们每天都离不开色彩,冬天是蓝色的,而到了春天就变成了绿色,夏天褪成黄色,秋天就转换成了桔红色,随着时间的流逝,色彩也渐渐暗淡。
Screenshot

AListApart.com网站上每个内容都有自己独特的色彩设计,“图片:圣诞节用红色和绿色,Jakob Nielsen写给我们的文章都用蓝色下划线标出来。”
Screenshot

13.让用户自己浏览网页
Rinzen 网站为访问者精心设计了一个主页,主页上的导航栏由许多种有色像素组成,其中每个像素都指向了一个特定的位置,页面最上方的工具提示显示了像素的链接位置。
Screenshot

 Mstudio网站上也有这么一个导航栏,以三维平板纸的样式展现在大家面前。
Screenshot

Catalogtree 网站设计出了一种最不可思议的导航菜单,字母(请在这里输入)左边有个小动物让用户输入码符号和数字,一旦返回键确认了输入的内容,新的页面也就随之导入了。

使用这个网站很不习惯,在浏览器中却很少出现问题,无法使用这种导航栏的用户可以使用索引链接,页面上所有的内容一目了然。虽然在操作上还存在问题,但让用户输入他们想要访问的页面的想法很值得称赞。
Screenshot

Post Typography的首页是个溅射屏幕,告诉你这个网站是关于哪个方面的。
Screenshot

里面的页面看上去像一个个按键的集合,但实际上它们确实是链接。

Screenshot

乍一看KEEN并没有觉得有哪些不同,然而网站除了用滑动数据块代替传统的导航栏外,所有的信息都在一张网页上出现,无须一次次的刷新。
Screenshot

Screenshot Startseite

14.保守行动,注重细节
The Tangerine Tree网站虽小,但却注意到了各个微小的细节,但有些地方好像做的太过了点。
Screenshot

15.使用非常规解决方案
导航菜单应该放在哪里?左边还是右边?上面还是下面?对了,为什么不放在页面正中呢? Nonstep就把导航菜单放在了一个固定位置,从不更换,即使页面在滚动,导航菜单的位置也变。导航菜单很简单,点击上面的链接,内容马上出现在你所指的位置,背景颜色也随之改变。
Screenshot

随你信不信,但这确实是个 weblog。不但页面看上去像Windows的记事本,功能也像。导航菜单作为下拉菜单出现在窗口的顶部。
Screenshot

 

抱歉!评论已关闭.