插图式主页

作者: 阮一峰

日期: 2010年6月23日

最近,网站设计有一个新的趋势。

很多网站的首页,完全以一张图片作为主题,文字信息很少,只有几个主要链接,就像一张插图。我把这种主页称为"插图式主页"(illustration web design)。

Tripwire Magazine对这种设计做了总结,下面就是一些实例。

你可以看到它们的视觉效果非常漂亮,对访问者产生很强的粘性。而且,非常突出重点,诉求很明确,有效地达到了设计目的。

我觉得,这种设计是未来的潮流。十年前,Google亮相,首页上就是一个搜索框,别的什么也没有。十年后,设计师们开始觉得,除了搜索框,再加上一个图片主题,似乎更好。

=========================

1. 2ammedia是典型的插图式主页,上部是菜单栏,下部是三个主要功能,中间的一大块都用来做宣传。

2. dibiconference是一个互联网会议的主页,除了菜单栏以外,只放了一个购票链接,非常醒目。

3. culinaria是一家礼仪服务公司,主页简单到就是一张图和一句话。

4. alexantuna也是一个这样的例子。

5. krojacevaskola(网页设计公司)将一张暖色的照片作为背景,然后以两个大色块突出主要信息。

6. Josh Hemsley的个人主页,直接以脸部照片作为背景,很酷啊。

7. Gil De Los Santos的个人主页,也非常简洁漂亮。

8. Mike Condrick的个人主页,以三个色块突出主要内容。

9. Aneta Langerova的主页也很漂亮,但是Blog内容放在这么小的框里,实在很不利于阅读。

10. Alley Pfannekuchen的主页设计,一眼就能让人对这家餐厅产生好感,而且明白它的主要特色就是现代感。

11. marina yachting的主页就是一张图片,几乎看不出这是一个游艇俱乐部的网页,内容过分简洁了。如果左上角的徽标放大到100%高度,效果应该会更好。

12. the ship and the sea是一张关于大海和航行的CD,左边那两个数字是售价,点击进入购买链接。这个设计非常有现代感和艺术气息。

13. kawa.lviv.ua是咖啡馆。

14. psdchimp是一个分割PSD格式图片的软件,主页非常简单,左边是功能介绍,右边是一个卡通图片。

15. kmirza是一个提供版权服务的个人网站,主页上用一行大字说明了服务特色。

16. people82很规范的设计和布局。

17. Jasno i Glasno是一对夫妻的Blog,采用了卡通样式。

18. joby的个人主页,主要用来找工作,相信任何一个雇主都会不由自主,点进去仔细看。

19. ColouringCode的特色是右上角的Logo,下一步点击哪里,一目了然。

20. 690design是设计公司的网站,很简洁地列出了主要业务。

21. Lucia Soto的个人主页,突出了个人的姓名。

22. Stone Skipper是一个iPhone游戏,只要提供一个App Store的链接就行了。

23. Logo Design Monster是Logo设计公司。

24. Less Cruise是一次游艇旅行活动,突出了活动主题,以及时间和地点。

25. Paul Ramirez的主页很酷,除了名字以外,就没有文字了。

26. shark lab是水族馆的网站,非常好地突出了上方那段文字,使得访问者非读不可。

27.Jeannie Web是一家女性设计公司。

28. bam是一家设计公司,主页比较简单,但是颜色的对比效果比较强烈。

29. Kinetic Shadows的这个主页,很aggressive(进攻性的)。

30. Pigeon and Pigeonette是一本图画书的主页。

31. Creative People(设计工作室)的主页图片很奇特,令人印象深刻。

32. Alex Abramov(设计师)的个人主页。

33. Eric Johansson的主页很有特色,底部有一个拉动条,建议自己动手去玩一下。

UPDATE 2010.6.26

cnbeta有一篇《2010网页设计趋势》的译文,很好地总结了这种设计趋势的9个特征。

1)采用印刷式设计;

2)更多地采用衬线字体;

3)采用大字号的标题;

4)采用多列布局;

5)配图越来越大;

6)更多地用图表传递信息;

7)采用简约的设计;

8)单页布局,用一个页面表示内容;

9)巨型的留白空间。

===================

P.S.

一个告示。

上周,Feedburner被屏蔽,而我的Feed托管在上面。导致国内访问者无法打开,或者在Google Reader中点击后,出现提示:"抱歉,发生意外情况,阻碍了 Google 阅读器完成请求。"

我原以为,大家都知道怎么处理,就没提这件事。现在发现,还是有好多朋友不知道怎么办。

那么,如果你属于上面的情况,可以看看我新加的一个页面《Feed订阅方法》

(完)

珠峰培训

优达学城

留言(23条)

这个设计风格在08年就开始流行起来,同时流行起来和它配套的是scroll的风格。

潮流这种东西很难说能流行上十年~ 阮兄你应该是一时喜欢上了。我自己设计的时候过了一段时间就不太感冒这种风格了。

今天您推荐的http://www.thesixtyone.com/ 也是一个非常棒的插图式主页

另外,为防止Google reader出现"抱歉,发生意外情况,阻碍了 Google 阅读器完成请求。"
推荐大家用https方式访问
即https://www.google.com/reader

我以为上一篇地图的设计是偶然,没想到阮兄真的开始关注设计了。

我以为上一篇地图的设计是偶然,没想到阮兄真的开始关注设计了。

---------------------------------------------
这些东西都可以 connecting the dots 阮兄互联网创业

第14个的服务见很多,感觉应该是提交PSD格式的网站画稿,由他们负责做成XHTML+CSS的页面..

这种网站访问量比较小还好说,访问量大了带宽很是问题。

所有的设计你可能一时感冒喜欢某一种风格,但是到了最后肯定发现还是最简单的那种耐看。

和主题无关的两个问题:

1、找了半天,都没有找到返回个人主页(不是 Blog)的链接。

2、留言者的档案页如何来的,没有看到类似的注册页面。

看了一下,只要是发表过留言的就会留下 user 页,里面列出了以留言者名字排序的留言。但以留言者名字组织留言不准,我看到以“小马”名字的有些留言并不是我留下的。 :)

还有很多不是图,而是flash的,见许多奢侈品牌的网站。
其实就是把杂志的风格放网站上了,做平媒设计的简直就是轻车熟路

缺点:
带宽不够会影响用户体验
图和flash为主体的页面,导致网站无法通过SEO优化获得流量,这其实很负面。

引用小马的发言:

和主题无关的两个问题:

1、找了半天,都没有找到返回个人主页(不是 Blog)的链接。

2、留言者的档案页如何来的,没有看到类似的注册页面。

1. 点击文章标题下面的作者那一行,就可以返回。但是,目前好像没有返回到那个页面的必要。

2. “留言者档案”就是把相同用户名的发言,都放在一页。所以,为了与他人区别,最好不要使用很容易雷同的名字。

15. kmirza是一个提供版权服务的个人网站,主页上用一行大字说明了服务特色。

这个翻译出错了, copy-write 不是 copyright.

www.InsideGFW.com

也很喜欢这样的网页。以前有人总结为“海报式”网页,名称似乎更贴切些。

阮大哥,我仍然可以使用Google Reader订阅Feedburner来读你的feed。只要将http协议改成https就可以了。

这样的主页有个最大的毛病,就是装载速度慢,消耗资源。

别人浏览器访问这样的主页,99%的数据都是这些图片数据,而真正对于用户有用的数据,可能只有1%。这种设计,是犯了web page design的大忌啊。

要是别人是通过手机,iPhone, BlackBerry来访问,估计等了几十秒钟,都打不开首页这张大插图。甚至会让别人手机浏览器直接挂掉。

感觉就是杂志广告的那种排版嘛。

不认同博主的观点:

1.强有力的视觉冲击不是产生用户黏性的关键,关键是满足特定用户核心需求。

2.你所谓的“插图似网页”并不是未来主要趋势,趋势是趋于高效率,无论是简洁还是丰富都是为更高效的达到设计意图。

第15 copywrite应该是文案的意思

那十条趋势概括得真好,我一开始看到这种主页,配合少少一些交互,时下流行的玻璃特效之类,效果就很亮丽。
我认为这种设计的流行是与大屏幕显示器与彩色大屏的移动终端的流行分不开的。
也没有那么难打开,其实说到底还是很简单的一种网页,没有很难打开的。

很多网页设计学生在毕业时的毕设都是采用这种方式制作的,只是页面的美工效果没这么好而已,至少我印象中我05年毕业那会儿就已经有人的作品就是学校的一张足球场了

非常好,这个非B2C那类的一时浪起;而是web 发展的的一个大趋势吧,国内用的比较多的应该属于,服装等等高端吧

这种风格的区域性还是比较明显的。
国外(尤其欧洲)很多网站或多或少有这种影子:简洁、大图片、主题突出,
反观国内,网站更倾向于更加紧凑、给出更多的信息、提供更多的功能。

那你为什么不把自己的博客改一改呢……
再加一个ADOBE的:http://www.adobe.com/cn/

A hint precisely what net marketing and advertising talking about.

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接