说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

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

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

【编者按】本文来自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;}

添加transistion属性后,会在1s内使按钮向右10像素,但是这样看上去还是不够自然。

我们再对它做点改动,演示链接:

button {   margin-left:0;   transition: margin-left .25s ease-out;}button.moveRight {   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像素的确是太慢了,四分之一秒或更小的值会让人觉得更加自然。

写在最后

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

原文来自:Smashing Magazine

研发团队平稳度过“从小到大”并非易事 诺基亚品牌手机不久将消失 Stephen Elop回应不是木马 看七家科技公司Logo的最初模样 移动UI框架Fries:私人定制最Sexy的用户界面 必须Mark!最佳HTML5应用开发工具推荐 百度技术开放日感悟:看百度如何获取大数据时代的“船票” 谷歌亚马逊微软的烧钱游戏 拉手网CTO官冲:团购网在大数据应用上的探索 究竟谁真正关心比特币,不妨看看基于大数据的百万条推特分析 Firefox 29正式版:高度自定义模式、全新菜单和Australis UI 冼茂源:HBase在垂直搜索业务以及数据存储中的应用! 阿里云计算北京布点 全球第三个云数据中心开放 【走近讲师】友友天宇CEO姚宏宇:与行业结合是私有云厂商的重要出路 万亿移动支付产业的难点和痛点 削减硬件运营成本?亚马逊或自主研发ARM架构芯片 开源框架eMobc:XML开发原生移动应用so easy iOS应用安全开发,你不知道的那些事 市场化API的十个捷径 MongoDB和Cloudera结盟,欲征服大数据市场 红帽收购Inktank,将统一Gluster与Ceph? 那些巨头公司Logo是这么演变来的…… 以史为镜,剖析PaaS大迷局 “心脏出血”还不够?又曝OAuth和OpenID登录漏洞 走近讲师:搜狐于顺治讲述搜狐PaaS云平台实践之路 AppFlood 2014 Q1报告:亚洲和中东市场成为开发者出海首选 华为联合运营商构建能力开放平台 Facebook产品设计主管:揭秘公司如何招聘优秀设计师 【附信息图】美国因软件缺陷导致的十大事件 二十一世纪Windows简史 为什么用户体验和生态系统决定云公司的成败 三星Tizen,路漫漫其修远兮 400分求助:可供BCB调用的VC DLL应该怎么写? sql中,in(1,2)的1,2整体是什么类型?好像不是varchar型.多谢 关于PostMessage 求急:如何完整的移植Oracle8i数据库到另一台服务器?(在线等待) WScript.Shell需要安装吗? 高分求解:如何实现透明button 问一个菜鸟问题 问:windows form下的用户登录程序如何写? 自己做了个浏览器,请教大家怎么保存打开的网页? 这个程序要如何做!!! 中国从来就没有和“四大发明”沾上边 combo值的问题 我的程序界面元素很少, 我还需要学MFC吗? ERWIN如何连接到Oracle9i上 串口通信控件MSCOMM的安装,而不能使用?????? 在程序中如何得到连接网络的带宽和实际的传输速度? 在ActiveX中添加自定义事件,急!!!! 快被他气疯了!快来帮我一下! 不能启动sqlagent.exe,出现“找不到Ordinal”的提示?? 一个排列组合的问题,有点难度!!! 在程序中如何得到连接网络的带宽和实际的传输速度? 为什么程序员跳槽频繁? 不知是不是将记录锁住了 关于Win32编程时的位图问题 想找一個單論壇的asp論壇 不知道還能不能找到 字符串乱码&gt 和 &lt 我想在Shape控件中增加一个右键和一个双击功能,应该什么实现啊?? 菜鸟问问题:SQL的简单问题,在线等 那为神仙,做过画电路图的画图软件?里面的电路分析是怎么做的?帮忙指点一下 这个要如何安装呀Microsoft SQL Server 2000 Desktop Engine 小问题,能不能停止响应当前进程去进行别的工作?需要语句! 到小公司求职应该注意什么问题? gethostbyaddr()怎麼用的啊?我這樣用怎麼不行啊? 向大家请教一个简单的问题,见笑了 难题难题,怎么在j2me里面实现在一个java程序里面启动另外一个java程序? 请教oracle的jdbc驱动程序的类路径如何设置? 显示器不停的开关,进不了图形界面了,急。 打开水晶报表时显示“未将对象引用设置到对象的实例”,只有10分,全部送出 矩形坐标 【那个活活的,玩不玩了?】 怎么判断dbgrid中某个单元格的值是否符合要求 急,在线等,英文作业等着交,就剩160分了全给了!(只能放100分,气死我了) 请问大虾:在那里可下载installshield Professional 7及其东方语言包 怎么样把exe的C#项目文件转换成dll的呀?? 今天Broland来我们公司查盗版软件了,散糞 一个女孩问"你帅吗?" , 你想如何说? 向大家请教一个简单的问题,见笑了 卖书! 请高手来看这里的错误!! 怎么判断窗口移出屏幕了? 我树型的事件脚本不执行?还有几个其它问题。请大家帮帮忙! 世界十大频临灭绝植物有拉些 十个 王小波的黑铁时代讲的什么 家书抵万金前一句是什么 家书抵万金的前一句 跳棋怎么走 真正的跳棋怎么样 什么是跳棋? 成语:向上指,一颗心,向下指,一颗心 跳棋怎么下? 请问:怎样下跳棋?谢谢. 跳棋怎么下载 女子相亲时是弟弟洞房成哥哥 5年后提河北自锯病腿患者昨日在医院手术 约十杭州地铁3号线 为啥短了十公里(图)杭州发现外来有害生物福寿螺 对生态环冷空气吹开雾霾带来降温 昨天白天杭州\"流浪女诞龙凤胎\"续:父母很恼火台风吹高的菜价开始回落了 花菜走下坡台风“菲特”过后 完善农业保险成为焦事成于气正 业兴于风清 浙江开展正风金华市金东区换届试点中查处3起贿选案杭州市委常委会专题研究三季度经济形势记者探访两会驻地全国政协委员陆续抵达驻地 文艺界委员政协委员昨日陆续报到 文艺界老前辈受李彦宏:建议设立“中国大脑”计划 希新疆首次发现五羊纹彩陶 羊或是当时财外交部驻澳门副特派员会见澳门-缅甸友女星何琳晒婴儿脚丫照 留言:生命真的新疆和布克赛尔县住村干部给村民拜年陈雨露:新常态下中国经济发展的七大机【我的“两会”梦想】邓纯:希望孩子不三八节去哪儿?陪妈妈去种葡萄树摘草莓风过无痕之仗剑问天龙束法则飞羽惊雷魔兽世界盗贼异界游精灵玛雅尸天使世界保镖异界之猫行天下圣行者伪天使塔特泰尔星球的爱恋到异地去跳舞尼泊尔旅游马降龙碉楼群旅游赤坎影视城旅游林则徐纪念馆旅游福州森林公园旅游国际会展中心旅游港仔后海滨浴场旅游郑成功纪念馆旅游大七孔景区旅游银链坠潭瀑布旅游易水湖旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘