让网站和APP更具动感的几点建议

7顶
0踩

2015-01-27 16:47 by 副主编 mengyidan1988 评论(1) 有6696人浏览

Web开发前端设计 CSS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

【编者按】本文来自Smashing Magazine，作者为Brolik的联合创始人、首席创意官Drew Thomas。文中介绍了Web中增加动感设计可带来的好处及进行动感设计的几点建议，如采用图层技术、运用前后过渡及开发单页面应用。他还通过CSS3代码演示，进一步说明了动感设计的实现方式。下面为文章的简译内容。

数字体验越来越注重对现实的模拟，每天都在进步。特别是对物理世界的模拟，使用得越来越广泛，把人与机器之间的距离进一步缩短。

Web动感的过去

Flash曾经有过一段光辉的历史，那是网络视频刚兴起的年代。但是过后人们发现很多内容其实是无效、速度慢、冗余的，Flash渐渐走了下坡路。随后JS和jQuery的出现，实现了较大的突破，但是使用起来还不十分方便。随着CSS3动画功能的出现，硬件设备性能的进一步提升，设计师们现在能随心所欲地透过层叠样式表来编写有趣的互动页面或App了。

Web动感的未来

动感页面和动感App为人们的生活带来了无限乐趣，那么有哪些技术值得关注呢?
Layers（图层）

图层技术可以说是应用得最为广泛的一项技术，这在iOS7中体现得淋漓尽致。比方说控制中心，从屏幕底部滑上来后，会覆盖当前部分屏幕。（可参见该网站上的视频演示）

图层的重要之处是方便设计师隐藏相关信息，在需要显示的场合快速显示，从而避免低效的整画面渲染，同时能够使用户有前后过渡进行缓冲而不会觉得太突兀。

Context（前后过渡）

这里不妨以Instacart iOS App来举例说明前后过渡的重要性。可参见该网站上的GIF演示，里面的物品图片从当前位置移动到一个新位置，下方再显示具体信息。这样的显示方式符合自然规律，让人觉得过渡自然。

另外一个例子是下拉式菜单，点击某个层叠图片后再显示出整个菜单列表。否则如果点击后整个画面突然被菜单项填满，那样的用户体验是十分糟糕的。GMail和Facebook App在下拉技术应用上可谓是佼佼者，大家不妨进去看看。

SPA（单页面应用）

当我们把动感和场景过渡加入到用户界面后，下一步应该会想如何控制它们使之构成一个整体。为了更好的实现页面到页面的过渡，单页面应用随之应运而生了。

例如我正在编写的一个网站：http://app.danceityourself.com，里面的登入和登出操作便使用到了SPA。里面使用JS为登入页面添加了一个动作类，触发了CSS过渡动画。

SPA的好处是过渡自然，高效，符合逻辑；让用户感觉正在访问的不像是一般的网站，而更像一个本地应用。

如何使用CSS动作

万事开头难，我的建议是先从最基本的开始入手，而不建议一下子就编写过于复杂和花俏的页面。

CSS过渡

在现实世界中，事物间的转化都是存在一定过渡的。反之，没有过渡的转化会让人觉得太突然。

我们先看下面这段代码：

button {
   margin-left:0;
}
button:hover {
   margin-left:10px;
}

它的意思是，当光标划过按钮时，该按钮会向右移动10像素。但是这是没有过渡的，给人感觉是瞬移式的，不太符合自然规律。完整的演示请点击这里查看，浏览器前缀等内容是必须的但下面例子里只含核心动作代码，以下不再累述。

接着请看添加过渡动画后的效果，演示链接：

button {
   margin-left:0;
   transition: margin-left 1s;
}
button:hover {
   margin-left:10px;
}

添加ease-out关键字，开启慢移功能后，这样看上去就舒服多了，因为大脑对于移动物体会有一定的延迟(残像效应)，添加延迟过渡动画后能够使大脑与移动物体的运动同步，从而感觉这就是真实的。更关CSS过渡动画的相关属性介绍，请点击这里进行查阅。

CSS动画

相比于场景过渡，CSS动画相对来说会稍微复杂些。什么时候会应用到呢？一般是为那些希望引起用户注意的页面元素添加动画效果。

请看以下的CSS动画例子，实现的效果是动态显示一个不断变大缩小的圆形。

div.circle {
   background:#000;
   border-radius:50%;
   animation:circleGrow 800ms ease-in-out infinite alternate both;
}
@keyframes circleGrow {
   0% {
      height:2px;
      width:2px;
   }
   50% {
      height:40px;
      width:40px;
   }
   100% {
      height:34px;
      width:34px;
   }
}

里面使用了CSS关键帧技术，把关键帧动画添加到该圆形对象上。

实现过程包含了两个步骤。

第一，使用了animation属性，这有点类似于transition属性，但是能实现更多操作，Animation的详细描述请点击这里进行查阅。为circleGrow指定animation属性，每隔800ms执行一次循环动画。

第二，关键帧。透过设置百分比值0到100，控制了动画变化的速度。示例中分别在0%，50%，100%时对物体进行关键帧大小设定，结合步骤一的设置形成一个动态变换效果。

具体效果和完整示例代码请点击这里进行查看。

animation的包含的可选参数如下所示：

animation: [animation name (from keyframe block)] [duration] [timing function] [delay] [number of times the animation repeats] [animation direction] [fill mode]

相关的详细介绍请点击这里进行查阅。
使用CSS动画的关键点

过渡自然

以开车来说，现实中总不会启动瞬间就能达到100码吧？所以过渡是很有必要的。

建议多动手尝试ease参数，比照添加前后的异同。如果想观看更多过渡(时间)动画的示例，请点击这里进行查看。

参照物与比重

通常来说，大型物品比小型物品体重要大、速度要慢，所以要对页面元素进行评估，然后再设定相关的动作值和时间值。一如前述的按钮移动例子，一个小按钮在1s内移动10像素的确是太慢了，四分之一秒或更小的值会让人觉得更加自然。

写在最后

如果想实现更加复杂的效果，应该多动手操作，这样才能更加体会到个中的奥妙。只有站在用户的角度思考问题，不断减少现实和机器间的距离，那样才能做出更好的用户体验。

来自: CSDN

分享到：

7
顶

0
踩

评论共 1 条请登录后发表评论

1 楼肖泽文 2015-01-28 22:57

恩恩，涨见识了。。现在体验越来越高大上！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

增强用户体验让网站和APP更具动感的几点建议

在网页和App中增加动感设计将很好地提升用户体验。本文列举了可使用的动感设计技术，如如采用图层技术、运用前后过渡及开发单页面应用，还通过具体代码演示，介绍了实现方法。数字体验越来越注重对现实的模拟，每天...

android 配色方案,最实用的APP UI配色方案和APP常用的颜色搭配参考

在此，25学堂收集了一套非常实用的APP UI配色方案和一些APP设计常用的颜色搭配参考。感谢分享设计师onli (武汉 / GUI设计师)和简书作者Longwide 的分享。第一部分：APP常用的颜色搭配参考底层背景色，内容背景色 ,两...

App动效原理和应用设计

优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹，已然成为现下Web、APP产品交互设计和界面设计必不可少的元素。笔者想从常见基础动效、动效作用、动效的应用设计和动效评判四个方面简单谈谈对动效...

axture动画原型制作_5个方法让你入门 Figma 了解APP动画制作

APP设计软件中 Figma 是云瑞设计比较推崇的一个软件，而今天分享的是，5个方法让你入门 Figma APP 了解动作制作，这绝对是这个软件的高阶运用之一，肯定值得您去了解，enjoy！我喜欢Figma，它是其中的一种工具，从我...

深夜看了张一鸣的微博，让我越想越后怕

这几天抽空把张一鸣的所有微博看了一遍，发现2010年的微博最好，就是他30岁左右的时候，那时候刚创业没多久，在微博上认真分享自己的思考和观点。到了2012年附近，开始做今日头条，每天都是大...

iOS开发工具,ios开发类库

一个能够让你方便地将提醒用户评分的功能加入 App 的工具 Mantle 主要用来将 JSON 数据模型化为 Model 对象 MTLFMDBAdapter Mantle 和 FMDB 的转换工具 FMDBMigrationManager 支持 iOS SQLite 数据库迁移 ...

java 开发工具及其他使用工具介绍

让您的报告和演示文稿更闪耀！ Patterno Image Design Patterno 是一款创建各种背景图片的软件,可以帮助你创建用于网页、微薄等网页背景用途当然也可以用于电脑桌面背景。 iDraw Image ...

视觉设计：如何做好App的引导页？

因此各个公司都在努力将这几个页面设计好，从一开始就引人入胜。那接下来我跟大家一起来探讨关于引导页的设计。一、目的区分根据引导页的目的、出发点不同，可以将其分为功能介绍类、使用说明类、推广类、...

苹果 WWDC21 发布会全汇总，iOS 15更个性化，全家桶协作更有生产力

2021-06-08 06:32·爱范儿 ...从本场大会发布的内容来看，全新的 iOS 15、iPadOS 15 等多款操作系统，全面升级的互联操作，更智能的信息推送，的确称得上「闪耀」，不过也有年年岁岁花相似的感觉，毕竟近年来 WW.

网易云音乐APP分析

播放页面的胶片旋转虽然好看，但是有些时候想看专辑的时候就很不方便了，建议可以让我们直接点击一下专辑，弹出专辑图片。（ 3 ）结论：经过这么多工作，你一定有充分的理由给这个软件做一个评价 : 好，不错...

微信小程序相关知识点和云音乐项目制作遇到的问题及解决

微信小程序相关知识点和云音乐项目制作遇到,通过媒体查询的方式,也就是据屏幕的大小自动的调整页面的展现方式响应式的概念应该是覆盖了自适应，但是包括的东西更多了全局配置(),需要添加字段为某一个页面配置(比如说...

怎样让你的小孩更懂音乐

以致于，很多音乐app都时刻保持对用户的洞察，不仅让自己的产品能满足用户需求，更能提前想用户之所想，创造新的功能服务于“衣食父母”们。像大家都很熟悉的虾米音乐，前两天升级更新了新版。专门拍摄...

android 赛车游戏,有哪些刺激又好玩的赛车游戏APP？安卓赛车游戏推荐

没有PSP，那就用安卓手机吧~灵敏的陀螺仪带你领略急速行进的超跑动力，动感的音乐无缝对接，我们的目标是让速度发挥极致，快到虚化空气！有哪些刺激又好玩的赛车游戏APP？GT Racing 2(GT赛车2)《GT赛车2：实车体验...

有哪些值得推荐的数据可视化工具？

为什么推荐Excel，因为以下几点：可制定、学习起来简单、兼容性极强、普遍性等等。课程传送门（学完点个5星即可）Excel实战篇，让你的图表动起来 - 网易云课堂未经允许，禁止转载，更多Excel教程、模板，可以前往...

Github上关于iOS的各种开源项目集合（强烈建议大家收藏，查看，总有一款你需要）

现在也很多大的 App 在用，比如虾米音乐和 QQ 客户端。 PullToMakeSoup - PullToMakeSoup, 自定义下拉刷新的动画效果：煮饭, Yalantis新作！ TwitterCover - Twitter iOS客户端的下拉封面模糊效果。 Replace-iOS...

手势识别（一）--手势基本概念和ChaLearn Gesture Challenge

像点击(clicks)是GUI平台的核心，轻点(taps)是触摸平台的核心那样，手势(gestures)是Kinect应用程序的核心。和图形用户界面中的数字交互不同，手势是现实生活中存在的动作。如果没有电脑我们就不需要鼠标，但是没了...

蓝松SDK - 卡点视频制作介绍

卡点是卡的音乐中节奏切换的时间点, 在这些时间点上动态切换一个图片, 并给图片做各种动画,从而形成或调皮或炫酷或科技范或抒情或文艺等动感视频. (可向我们索取直观的视频效果) 用蓝松SDK实现的两种形式方式1....

基于ssm的网络教学平台（有报告）。Javaee项目，ssm项目。

重点：所有项目均附赠详尽的SQL文件，这一细节的处理，让我们的项目相比其他博主的作品，严谨性提升了不止一个量级！更重要的是，所有项目源码均经过我亲自的严格测试与验证，确保能够无障碍地正常运行。 1.项目适用场景：本项目特别适用于计算机领域的毕业设计课题、课程作业等场合。对于计算机科学与技术等相关专业的学生而言，这些项目无疑是一个绝佳的选择，既能满足学术要求，又能锻炼实际操作能力。 2.超值福利：所有定价为9.9元的项目，均包含完整的SQL文件。如需远程部署可随时联系我，我将竭诚为您提供满意的服务。在此，也想对一直以来支持我的朋友们表示由衷的感谢，你们的支持是我不断前行的动力！ 3.求关注：如果觉得我的项目对你有帮助，请别忘了点个关注哦！你的支持对我意义重大，也是我持续分享优质资源的动力源泉。再次感谢大家的支持与厚爱！ 4.资源详情：https://blog.csdn.net/2301_78888169/article/details/144929660 更多关于项目的详细信息与精彩内容，请访问我的CSDN博客！

2024年AI代码平台及产品发展简报-V11.pdf

2024年AI代码平台及产品发展简报-V11

7顶0踩