2010 年 Web 设计风 (上)
by liony
Web 设计是个变幻无常的行业,如今已经成为一个包含了美学体验,功能丰富的富媒体,事实上,当今的 Web 正处在黄金时代,我们拥有强大的新工具,唾手可得的丰富资源,庞大的设计社区,以及主流浏览器对 Web 标准的普遍支持。如今的 Web 风潮云涌,令人目不暇接。本文讲述了2010年{zx1} Web 设计风,这是{dy}部分。
1. 愉悦的设计
Web 设计师的工作是有效的传递思想,引导用户完成他们的任务并赢得他们的信任,我们有很多方法实现这些,如视觉之美,之惊奇,之愉悦,之难忘。令人xxxx的 设计会在你的品牌和用户之间建立起坚固的,可靠的情感纽带。
以下的这些示例站点,尽管名不经传,但它们在努力表达一些东西,试图融入我们的感受,它们拥有美丽的外观,而更重要的是,让人过目难忘。
: Bounty Bev 是一家软饮料公司,这是一个单页式网站,该站的设计简单,清晰,充满个性。
: Analog 为访问者带来很个性化体验,根据的 IP 显示你地理位置,并告诉你他们的工作人员中有谁离你最近(不过,根据测试,这个消息似乎并没有什么实际价值,不管访问者来自何地,离他们最近的似乎永远是 Alan 和 Jon – 译者)。整站的设计还是充满了乐趣感。
: 漂亮的设计,吸引人的视觉元素,富有创意的导航系统。
: 这是一个开发与设计社区博客,吸引人的动画与引人注目的效果,设计上保持了视觉上的一贯性,整体注重内容和个人感触。
: 小猴子视觉表征随处可见,使用 ASCII 字符动画显示{zx1}动态。
2. 快捷键导航
现代的 Web,越来越拥有桌面应用的特质,借助 JavaScript,传统的 Web 站点变得更富有交互性,键盘快捷键导航开始流行,其中最xx的例子是照片共享站点 Flickr 和 FFFFound。快捷键导航曾一度是 Flash 站点的专利,现在越来越多出现在基于 CSS 的站点, 是一个最典型的例子,还有更多站点也做得非常好。
: 基于 Flash,因此可以实现很高级的导航,按 c 到留言页,按 – 和 + 缩放图片,诸如此类。
: 一个社会化图片书签站点,按 j 和 k 前进或后退,使用 l 键为当前图片xx。
: 最早的图片书签网站之一,按 h 键返回页面顶部,按 v 改变视图,同样 j 和 k 表示前进和后退。
: 另一个基于 Flash 的站点,使用箭头键在不同项目之间穿梭,下箭头表示选择,上箭头返回。
: xxxx的新闻概要页拥有很好的键盘导航功能,使用箭头键在新闻间前进后退,使用 Shift 键缩放,返回顶部按 t,刷新当前内容按 r,选择新闻按 a 和箭头。
: 照片故事杂志,同样使用 j 和 k 在不同图片之间浏览。
: 一个单页式站点,使用箭头键在不同部分之间浏览。
: 使用左右箭头键导航。
3. Web的平面设计风
现代 Web 设计,还追求平面设计般的精致与创意,以下这些示例站点,拥有杂志和海报般的设计风格,醒目的题头,多栏,缩进,图片包围,旁注与脚注,诸如此类。
拥有两栏式结构,将文字和图片清晰地左右分开。
: 一个拥有出色设计和独特布局的站点,CSS 加 Table 布局,有时候,这是 Web 平面设计化的必要技术。
: 海报式设计,使用生动的图片替代文字,不好的一面是,用户界面不够有好。(Web 平面设计化的固有问题 – 译者)
: 杂志式布局,多栏,如果将页面打印出来,你也许不相信这是个 Web 页面。
: 非常精细的设计,大型图片横跨整个页面。
: 一个微妙的设计,大面积留白,多栏文字,从美学上看,更像一页书。
: 多像那些旧杂志的画面。
: 简单的网格布局,文字左右对齐,图片也漂亮,不过左右对齐式文字在 Web 上似乎不怎么行得通。
: 平面设计化的 Web 页面需要更多东西,背景图片与配色,CSS 式样,这个示例说明了这些。
: 另一个多栏式设计示例。
: 受平面设计影响
: 一个冷静的,简洁的设计