文章关键字 ‘体验’

实现a元素href URL链接自动刷新或新窗口打开

2019年10月13日,星期日

新窗口智能打开占位图

有个前端都必须知道的体验增强小技能,就是优化新窗口打开的交互体验,已经打开的页面直接刷新,不在重复开选项卡标签页,如何实现呢?其实很简单,并不需要JS的参与,HTML本身特性就可以实现这样的需求。

阅读全文…

小tips: 元素focus页面不滚动不定位的JS处理

2019年09月19日,星期四

focus滚动定位占位图

有时候我们希望元素被focus的同时浏览器的不会发生滚动重定位,看起来似乎是个很棘手的问题,毕竟focus重定位是一个很重要的浏览器内置的用户体验行为,实际上,大家可能不知道,已经有新的API参数支持这种需求了。

阅读全文…

CSS :focus-visible伪类让我感动哭了

2019年03月24日,星期日

focus-visible缩略图

:focus-visible可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发,从而可以更有效地控制浏览器中因为focus行为触发的outline轮廓样式,解决了我一个困扰我多年的难题。

阅读全文…

5分钟快速了解下CSS4 color-adjust属性

2018年11月27日,星期二

css4 color-adjust属性

color-adjust属性已经加入了CSS4规范草案了,color-adjust这个属性有什么用呢?我们不妨花5分钟的时间快速了解下,保不准以后可以用到它。

阅读全文…

小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

2018年02月2日,星期五

对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。

尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。

那么该如何实现呢?

阅读全文…

翻译:慢点更好-为何排序比速度更重要?

2014年12月7日,星期日

我们平时都关注网页性能,或许还忽略了一个很重要的东西,元素的排序。很多时候,如何让页面元素以合适的排序呈现要比页面加载速度更重要。本译文的主要思想就是这个,欢迎围观。

阅读全文…

翻译 – 逐渐消失的Flash网站

2010年04月20日,星期二


如果你想要一个盛大的视觉效果的网站,含有复杂的交互以及跨浏览器的富体验,flash是唯一的选择。确实如此吗?回答是“不是”。随着现代浏览器的进步与提升,以及JavaScript库的被广泛采纳,使用flash显得没有意义了。但是考虑到渐进增强的需要,目前flash站点在web上仍有一席之地。

在当前的景观技术下,以及通过诸如相框,netbooks、手机、电视这类设备访问互联网时,网络标准的好处要大于那些flash,尤其是当提供内容是在各种设备上面对更广泛的受众时。

Flash是一个坐在浏览器扩展功能顶部的专利产品 。尽管flash可以提供在某一段时间内可能缺失的功能,但是对于现代浏览器而言,其所带来的价值几乎为0. 随着越来越多的设计师以及开发人员意识到web标准的好处,以及开始使用一些HTML5和CSS3的特征,我们会更少看到由Flash驱动的网站。

阅读全文…

jQuery-马化腾产品设计与用户体验的一些技术实现

2009年12月12日,星期六

这几天,我是反复在看马化腾马老板在腾讯内部会议上关于产品设计与用户体验的讲演材料——产品设计与用户体验的ppt。受益匪浅,感触颇多。然而,本文不是将用户体验,更不是产品设计,而是就ppt中提到的几个小的有关体验方面的问题的技术实现。实现均是以jQuery为环境,主要是为了代码简单,因为本文涉及三个实例,不是写论文,搞长了不好。
本文主要就讲了三个与体验有关的技术点。一是个性化换肤,关键点在于css切换与cookie,里面提供了的cookie的jQuery插件值得一看;二是文本框的全选,关键点在于focus并select;三是半透明背景下的浮动层提示,关键点是黑色背景的满屏显示以及浮动层的居中定位,文章提供了一些简单的取巧的方法。
文章提供马化腾老板关于产品设计与用户体验的flash幻灯片,提供详细的demo页面以及一些截图。才疏学浅,叙述有误或代码缺陷欢迎指正。旨在交流,如果能对您有所帮助就再好不过了。

阅读全文…