【转】页面细节处理心得
一个页面的细节,从重构的角度去看,页面的精细度,代码的可读性、扩展性,为下游服务的代码注释,交互接口样式的书写,代码的压缩,图片的优化等都可以归为细节处理,我的理解是,刚才提到的细节处理是每个重构工程师都应该具备的基本技能,不能算是真正意义上的细节,好的细节处理应该是从用户出发,应该是发自内心对用户的一种关怀。下面有两个小例,都是我们做页面时常见的板块,如果我们细心处理一下,也许会让用户会倍感贴心。
轮播图
如上图,轮播图上切换按钮(如上图小方块按钮)是用户对轮播图进行交互的重要入操作点,重要程度毋庸置疑,在分析设计稿的时候发现,按钮的可点击区域太小了,只有22×2!要用户完成图片的切换显然是一件非常痛苦的事,这会给用户带来不愉悦的心情。因此,我们得想办法让点击区域变大
可能的解决办法:
1、建议产品让视觉设计师把按钮改大一点。
知会产品后,我们会先用代码把按钮调大,给出截图让视觉设计师看。
高为3像素,视觉没问题,但点击区域还是太小,如下图:
高为4像素,点击区域勉强可以接受,但视觉设计师觉得按钮太大,视觉效果不佳,如下图:
结果设计师还是坚持用原来的按钮大小
如果重新设计按钮,改变按钮的表现形式呢? 显然不可行,视觉设计师不会为了一个小改动而轻易改变视觉风格,即使设计师同意,改完之后设计稿要重新给产品审核,通过审核之后再给重构,显然这个方法的沟通成本和改动成本都太高了,性价比不高。
2、保留原设计,通过CSS来控制
轮播图这类按钮的结构我们一般会这样写:
要实现色块区域是22×2,实际可点区域是22×12,两个方法:
1、用背景图:这个色块比较简单,纯色方角,样式完全可以控制,没有必要用背景图;
2、用样式控制:为了使可点区域高为12像素,那么作用元素的标准盒子有以下几种方式
A、height+padding;
B、height+border;
C、height+伪元素(E:after / E:before);
由于背景色会作用到padding区域,考虑兼容高低端浏览器,A方式不适用,B和C都可以用
我们先看一下B方式—- height+border,CSS代码如下:
运行代码后会发现,IE6和IE7显示正常,但是Chrome、Firefox、Opera、IE7+的border区域也填充了背景色,囧
(Chrome、Firefox、Opera、IE7+)
(IE6、IE7)
我们再看一下C方式—-height+伪元素(E:after / E:before),CSS代码如下:
这回Chrome、Firefox、Opera、IE7+显示正常了,但是IE6和IE7并不支持伪元素E:after和E:before,色块消失了:
(Chrome、Firefox、Opera、IE7+)
(IE6、IE7)
因此,我们只好用B方式(height+border)对IE6 和IE7 作hack处理了,最终代码如下:
到此,轮播图按钮的可点击区域由原来的22×2增加到了22×12,是原来的6倍,这样用户就可以很容易地完成图片的切换,舒心的操作。
线上效果:http://daquan.xunlei.com/download_channel.html
导航
站点导航,一般都会有3态的设计:常态,Hover态,选中态。为了美观,很多产品都喜欢把链接虚线框去掉:
于是我们在a标签加一个CSS样式outline:none,把点击虚线框去掉。但是IE6和IE7不支持这个属性,为了兼容IE6和IE7,在a标签加上hidefocus=”true”属性,甚至有不少同学可能会加上对用户非常不友好的onfocus=”this.blur()” 。
onfocus=”this.blur()”和hidefocus=”true”都可以实现去掉IE6、IE7的点击虚线,但是前者会使链接聚焦触发时失去焦点,焦点重新回到文档的最开始。而后者是IE的私有属性,不会使链接聚焦触发时失去焦点
为什么我们要强调链接的聚焦?考虑到视障人士会用到读屏软件,读屏软件会读出获得聚焦的标签里内容,而onfocus=”this.blur()”中断了视障用户的Tab键路径,导致Tab光标无法聚焦页面的下一个控制器(链接、表单域、object等)。
下图为该文章中去除虚线框方法对比图
其实,正如《盲人站长深恶痛绝的onfocus=”this.blur()”》作者所写
本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:【转】页面细节处理心得
一条评论
嗯。。。前2天也在cued那边看到了。