本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第2章,第2.1节,作者: 【德】Smashing Magazine 译者: 赵俊婷 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第2章 网页设计趋势
2.1 微妙的互动
尽管消极的言论很多,但是我们依旧相信Flash在现代网页设计中仍占有一席之地。现在,我们观察到HTML/CSS网站和Flash网站已经明确分开。尽管HTML/CSS已经成为基于文本的Web标准,但是重点却要放在信息消费上,而Flash正在通过它丰富的视听效果和丰富的用户交互来支配着娱乐和多媒体网站,但是这并不意味着HTML/CSS网站仅限于单纯的用户交互。我们看到越来越多的HTML/CSS网站变得交互、有趣和优秀,更多的动画用于视觉反馈(如鼠标悬停或点击时),视觉效果被用于更加微妙的用户体验。当然,这些效果都依赖于JavaScript库。尽管如此,基于CSS的设计师往往会避免使用极端的交互,而是有节制地使用微妙的交互,以达到精致的效果。
CoTweet
CoTweet网站是一个很好的例子,简洁、有吸引力,并且拥有响应式按钮。虽然鼠标悬停效果比较微妙,但是点击效果却是醒目的。请注意“注册”(Sign Up)按钮和“了解更多”(Learn More)按钮在文本颜色和尺寸上的区别,还请注意“注册”按钮上醒目的黄色丝带,非常夸张却并不突兀。这就十分微妙,所以,为用户行为号召(call to action)按钮添加小图标是十分有益的。例如,考虑添加一个锁的图标(意为安全)来说明该登录是安全的。

Veerle Pieters
Veerle最近翻新的设计十分惊艳。链接、内容版块和插图都在鼠标悬停时巧妙地做出反应,包括:不同的透明度、混合动画、突出链接、更改背景图片、色彩淡出、呈现评论和更改导航。其设计十分诱人,具有吸引力和响应力。Veerle的设计还使用了键盘导航。业内都相传,这是一个美妙的、一流的设计。

Fuel Brand Inc.
Fuel Brand Inc的官方网页具有多种漂亮的动画:鼠标悬停时图像尺寸发生变化、背景图片的变化、幻灯片被用作导航交互式提示和其他显而易见的特效等。交互式技术似乎也在公司官方网站的设计中极为流行。

Malcolm Reading Consultants
这又是一个运用趣的微妙互动设计技术的网站:三张并列在顶部的图片自动垂直滚动,同时也更新着顶部水平导航的背景图片。值得一提的是,此处并没有使用Flash。

LifeGear Mockup
这是一个交互式展示产品的模拟动画。许多电子商务网站现在也开始更多地利用交互的方式展示产品。

Carsonified: 100 things
Carsonified集成了微妙的色彩过渡和淡入淡出效果,用于快速展示会议上发言者的信息。

Harmony Republic
这个网站巧妙地应用了交互式悬停效果和丰富的版式,但是由于Flash网站的性质,造成文本管理麻烦且加载时间过长。其实这个网站可以用JavaScript轻易地设计出来,以便于文本的复制和粘贴、灵活的字体大小和native鼠标交互(例如,从指针到链接悬停的改变)。

arc 90: Meet the Team
这是一个拥有交互式设计元素的“关于”页面。鼠标悬停时图片会发生更改:访客可以通过职位来轻松地筛选团队成员,筛选出的图片消褪成灰色。

SPD
此网站也拥有微妙的悬停效果。在这个作品集网页中,每个项目都占据了一格。刊头总共有18个格子,当用户将鼠标悬停在某一个格子上方时,它就会扩大以填补6个相邻的格子以显示所选项的额外信息。这里并没有使用Flash技术。再次申明,微妙的交互是相当有益的。

Duplos
另外,还可以更深层次地使用交互。在Ricardo Mestre的作品集网页中,设计元素缓慢地悬浮在页面上。你能发现那个危险的Twitter-birdie怪物吗?当然,此处也没有使用Flash技术。
