数极客首页

迅雷CUED:页面细节处理心得分享

迅雷CUED:页面细节处置心得分享

一个页面的细节,从重构的角度去看,页面的精密

度,代码的可读性、扩展性,为下游效劳
的代码注释,交互接口样式

的书写,代码的紧缩
,图片的优化等都能够

归为细节处置
,我的了解

是,刚才

提到的细节处置
是每个重构工程师都应该具备的基本

技艺
,不能算是真正意义上的细节,好的细节处置
应该是从用户动身
,应该是发自内心对用户的一种关怀

。下面有两个小例,都是我们做页面经常
见的板块,假定

我们认真

处置
一下,或许
会让用户会倍感贴心。

轮播图

迅雷CUED:页面细节处置心得分享

如上图,轮播图上切换按钮(如上图小方块按钮)是用户对轮播图中止

交互的重要入操作点,重要水平

无须
置疑,在剖析

设计稿的时分
发现,按钮的可点击区域太小了,只需

22×2!要用户完成图片的切换显然是一件十分

痛苦的事,这会给用户带来不愉悦的心情。因而

,我们得想办法

让点击区域变大

可能的处置

办法

1、倡议

产品让视觉设计师把按钮改大一点。

知会产品后,我们会先用代码把按钮调大,给出截图让视觉设计师看。

高为3像素,视觉没问题,但点击区域还是太小,如下图:

迅雷CUED:页面细节处置心得分享

高为4像素,点击区域勉强能够

接受

,但视觉设计师觉得按钮太大,视觉效果不佳,如下图:

迅雷CUED:页面细节处置心得分享

结果设计师还是坚持用原来的按钮大小

假定

重新设计按钮,改动
按钮的表现方式
呢? 显然不可行,视觉设计师不会为了一个小改动而随意

改动
视觉作风
,即便

设计师同意,改完之后设计稿要重新给产品审核,经过
审核之后再给重构,显然这个办法

的沟通本钱
和改动本钱
都太高了,性价比不高。

2、保管

原设计,经过
CSS
来控制

轮播图这类按钮的结构

我们普通
会这样写:

迅雷CUED:页面细节处置心得分享

要完成
色块区域是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代码如下:

迅雷CUED:页面细节处置心得分享

运转
代码后会发现,IE6和IE7显现
正常,但是Chrome、Firefox、Opera、IE7+的border区域也填充了背风光
,囧

迅雷CUED:页面细节处置心得分享

(Chrome、Firefox、Opera、IE7+)

迅雷CUED:页面细节处置心得分享

(IE6、IE7)

我们再看一下C方式—-height+伪元素(E:after / E:before),CSS代码如下:

迅雷CUED:页面细节处置心得分享

这回Chrome、Firefox、Opera、IE7+显现
正常了,但是IE6和IE7并不支持伪元素E:after和E:before,色块消逝
了:

迅雷CUED:页面细节处置心得分享

(Chrome、Firefox、Opera、IE7+)

迅雷CUED:页面细节处置心得分享

(IE6、IE7)

因而

,我们只好用B方式(height+border)对IE6 和IE7 作hack处置
了,最终代码如下:

迅雷CUED:页面细节处置心得分享

到此,轮播图按钮的可点击区域由原来的22×2增加到了22×12,是原来的6倍,这样用户就能够

很容易地完成图片的切换,舒心的操作。

线上效果:http://daquan.xunlei.com/download_channel.html

导航

站点导航,普通
都会有3态的设计:常态,Hover态,选中态。为了美观,很多产品都喜欢把链接虚线框去掉:

迅雷CUED:页面细节处置心得分享

于是我们在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等)。

有兴味
的同窗
能够

阅读一下淘宝UED的:《盲人站长深恶痛绝的onfocus=”this.blur()”》

下图为该文章中去除虚线框办法

对比

迅雷CUED:页面细节处置心得分享

其实,正如《盲人站长深恶痛绝的onfocus=”this.blur()”》作者所写,“虚线框的存在有它的合理性”,自己

也很认同。假定
有这样的一个情形
:你到某个站点查资料

,当你发现合适

的资料

,刚想移动

鼠标去翻开
链接的时分
,发现鼠标坏了,但你想在换鼠标之前把资料

阅读完,于是你会按Tab键去寻觅
该链接的焦点,这时分
,虚线框就会辅佐

你很快找到该链接,快乐

完成资料

阅读。

固然
这个情形
发作
的概率微乎其微,但不可招认

这种以人为本的设计动身
点是好的,是合理的。我们回头看去虚线框的需求,把虚线框去掉的做法显然违犯
虚线框的设计初衷,而兼容IE6和IE7的处置
办法

也不契合
结构

、样式

、行为相分别

的准绳
,因而

我们得想一个既能满足理论

需求,又能服从
虚线框的设计企图
,并且不影响页面结构

的办法

。往常

线上的处置
办法

是:

1、 给导航的a标签加一个a:focus的伪类样式

,使之与Hover样式

一样,显现
Tab的选中状态

2、IE6、IE7不支持a:focus伪类,则保管

原链接虚线框,不作hidefocus=”true”处置
,文雅
降级,保证Tab可选

线上页面导航:http://daquan.xunlei.com/

迅雷CUED:页面细节处置心得分享

(Chrome、Firefox、Opera、IE7+)

*注:Opera的Tab键默许
只选中Form元素,要用Ctrl+上下方向键才干
选中链接

迅雷CUED:页面细节处置心得分享

(IE6、IE7)

用Opera的同窗
能够

看到,当链接取得

焦点时,链接边框样式

还是存在,如下图:

迅雷CUED:页面细节处置心得分享

可见CSS的outline:none并没有使Opera的链接框去掉。

处置

的办法

是自定义一个outline样式

,然后让边框透明就行了,因而

能够

这样处置

E:focus{ outline:1px solid transparent}

现附上此办法

的Demo:

Demo

或许
普通用户不会用到Tab选中链接这样的操作,但我们不能因而

而不照顾特殊用户群,而像导航此类在网站比较

重要位置上的链接,更应该给予照顾。

关于
重构工程师,这些小的技术处置
并不需求
太高的完成
本钱
,作不作处置
都能够

高精度恢复

设计稿,视觉设计师不会央求

我们把轮播图按钮点击区域变大一点,产品也不会让我们为导航链接加上Tab选中样式

,只不过有一个问题我们要问一下自己

,页面到底是为谁而做?想分明

后,置信
我们会更关怀

用户体验,更留意
细节的处置
,也就不会为多加几行代码感到省事

或没有必要,在我们力所能及的范围下,多几行代码就能为用户带来更多,为什么不去做呢?

记得曾经带我的师傅对我说过,重构工程师不应该满足100%恢复

设计稿,更应该去追求101%恢复

度,多出的1%就是对页面细节的把控,也能够

说是重构工程师的客观
能动性。这个1%在100%中所占比例并不起眼,但假定

处置
得好,能够

使页面更显级数。

via:迅雷CUED

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章