前端开发及用户体验设计的碎片知识(不定时更)

前端理念：不管开发还是设计，产出物是服务于用户，一切从用户角度出发，再结合企业利益。

1.Android和IOS端，关于a标签调用JS函数的兼容问题

微信浏览器中，不能给a标签添加hover属性，否则会导致ios端单次执行：第一次点击，单独执行hover样式，第二次点击单独执行js。

2.a标签返回上一页

javascript:; 和 #作为href，安卓都支持，苹果仅支持前者。测试环境（微信浏览器）

3.大量图片上下衔接，出现白色缝隙

缝隙间隔3px，解决方案：img{vertical-align:bottom; display:block}

 

4.针对手机端设计，在页面布局的占比中，存在屏幕热点，即：

用户视线的常落点和正常握姿的手指常落点，如朋友圈：正常握姿下，手指的下落点和视线的关注区永远是第一条信息，或最新信息的提示框。

，

这一条信息所在的区域称为屏幕热点，它是根据用户的阅读习惯及操作习惯决定的，操作区域放在屏幕热点内，能极大的减少用户操作，达到丝般润滑的用户体验。

该例子主要针对上下衔接的内容页面。

相同的例子还有哔哩哔哩APP、钉钉的常用功能栏、知乎日报APP文章详情页等。

值得注意的是，钉钉的常用工具栏，下图：

，

依据屏幕热点，可以确定该页面的热点区域为：”常用功能“这个模块，从左到右分别是：签到、考勤打卡、日志、公告、审批、钉邮、钉盘、智能报表。其中 考勤打卡和日志又处于该热点区域的水平中心位置，他这两个功能也是用户使用最频繁的。

因此，屏幕热点不仅体现在自上而下的衔接页面，也体现在热点区域中的水平居中区域。