《众妙之门——网页设计专业之道》——第2章 网页设计趋势2.1 微妙的互动

简介:

本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第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)按钮添加小图标是十分有益的。例如,考虑添加一个锁的图标(意为安全)来说明该登录是安全的。


1aa8ba83efb9209bad1abdcbc7a4a9d3c486f935

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


22762428c9acda34d0cf1952ee3b1a5fbe6405ab

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


852c1dcffe4e51be247c04cf5339508a743a391a

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


e70252252d474e86753ab4a229612be4099b90a6

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

353ef8187e1a3f791ae7bc113f1b3c91f025cec6

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


a165c90465b2c88724b3608e1e3496469c5e1639

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


d28152083f96894d25a3b9648b88a490d52237a6

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


648d97193700596538a3aa65d137313396447880

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

414288c661a02061a0d1e25aa5cdd3c20e3768a4

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


a751d37fb5e5611ea870005914ec39953028f301
相关文章
|
1月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
45 3
|
Web App开发 Windows
10种破除网页设计师障碍的实用方法
相关阅读: 参加IE9开发大赛 赢取现金大奖 微软最顶级平台技术会议PDC10全程视频播放 Microsoft Web平台——优秀项目展示 Windows Phone 7 MSDN开发中心 微软Web平台优秀项目精选推荐: 世界顶级论坛、社区程序:bbsmax论坛 世界上最大的自承载博客工具:Wor...
850 0
|
Web App开发 JavaScript 前端开发
《游戏设计师修炼之道:数据驱动的游戏设计》一2.1游戏玩法和“趣味因素”
本节书摘来华章计算机《游戏设计师修炼之道:数据驱动的游戏设计》一书中的第2章 ,第2.1节,(美)Michael E Moore著 傅鑫陈征戴锋等译更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1163 0