从一个轮播开始说细节的重要性
发布在形而上学2014年3月16日view:6469
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

从一个轮播开始说细节的重要性

严正声明:本文仅代表个人观点,如看完之后出现怀孕等迹象,本人概不负责.
偶然看到一句话:"细节不仅仅是细节,而是设计。"
深有感触.
今天要说的东西很小,从几个网站的轮播图来表达一些东西,希望能引起大家的一些思考.

首先是淘宝首页的轮播图:

淘宝首页地址: http://taobao.com

可能很多人都会认为这不就是个稀疏平常的轮播图吗,有啥好讨论的.
那我剖析几点给您瞧瞧.
设备:谷歌浏览器 ie8浏览器

首先要说的是界面部分:

1,可以发现从原来的大圆点变成了现在的小圆点.
有什么好处呢,用户可见的范围更大了.更多的着眼点在图片本身而不是那几个数字或者圆点下标.

2,还有就是从hover 事件变成了click事件.有什么好处呢,给了用户自己的选择空间.
以前的hover事件不可避免避免的一个问题就是误操作.现在变成click事件是不是就少了很多了.
跟大的一个原因是现在是小圆点,间距小,如果还有hover事件的话就有可能造成不必要的误操作.
就算是加了延迟,体验上也会稍微差一点点.

3,两侧箭头只有鼠标放入区域的时候才出现.原因也是为了让用户能更加清晰的看清楚焦点图而不被干扰.

其次是实现的方式部分.这里也是我重点要说的:
用谷歌浏览器打开.

f12看到.淘宝这里的轮播用的是:
css3的transition属性再加上-webkit-transform: translate3d(x,y,z);

这里就可见其用心之处了. 普通的轮播图基本都是通过js去改变left或者margin值的来实现动画效果.
而淘宝这里却用了css3的两个属性不得不说真的很棒.
以transform的translate3d的属性是可以开启硬件加速的.
相关知识可以百度下:css硬件加速.

以下是别人总结的用css3动画代替js模拟动画的好处.

  1. 不占用js主线程;
  2. 可利用硬件加速;
  3. 浏览器可对动画做优化(元素不可见时不动画, 减少对FPS的影响).

这里是不是就给我们提供一种思路呢?
在低版本浏览器中用js模拟动画.
而高级现在浏览器 完全的有部分动画是可以用css3去代替实现的.

吐槽点: 左右箭头的显示其实可以柔和点. 想不明白为什么不把小圈圈放到右下角呢?不是更加符合用户习惯吗?
可能有想法在里面.暂时没想明白.

接下来是苏宁易购的:

苏宁易购首页地址: http://www.suning.com/

没错苏宁易购的轮播图最大的亮点就是右下角的等待动画.这里真的可见其用心之处.
一个圈圈转完了刚好就是下一张展示的时间.
这个圈圈动画的实现原理极其巧妙.有兴趣的同志可以自己去研究下.
我会在文章的结尾贴上我抠出来的单个部分.

吐槽点:

  1. 现在的动画还只是机械的转动.如果鼠标滑进去的时候直接填满.然后鼠标移开整个区域再重新开始转,我相信不管是准确性还是体验上都会好一些.
  2. 然后是单张切换.高级浏览器其实可以用css3动画.

最后是一号店的:

一号店首页地址: http://www.yhd.com/

不得不说,一号店被沃尔玛收了之后体验上真的是提升了一大截.
整个轮播的动画做的非常的柔和.一些细节的很到位.真的挺用心的.

首先是鼠标滑进去之后两侧淡入的 左右箭头.

其次是下一张的进度条 给人感觉就是非常的舒服.

最后是吐槽点.轮播进度条下方的3个图这种交互还不如学天猫右侧的商品稍微动下.太突兀了.而且感觉毫无效果.
本身这种交互方式的作用应该是集中视觉焦点现在是奇奇怪怪的感觉.


最后:关于轮播图的语义化.可以去问机子..他是专家....
最最后:如果我们把3家的有点结合下.这轮播图的体验是不是就会好很多很多呢?欢迎讨论.

福利在此:

苏宁小圆圈

垃圾桶

后记:因为个人水平的限制,所以写出来的东西肯定也有一定的局限性.所以欢迎大家讨论吐槽以及批评.

评论
发表评论
暂无评论
WRITTEN BY
huugle
没啥好说的.
TA的新浪微博
PUBLISHED IN
形而上学

2b前端工程师教你怎么样不2b

友情链接 大搜车前端团队博客
我的收藏