前端该懂交互设计吗？

前端该懂交互设计吗？

接到一个前端动效任务：设计一个点击展开的动效
效果如下:

（在产品看来这个交互是没必要存在，根据公司需求这也成了唯一的方法（在移动端页面右边添加一个控件，这种控件会将用户的注意力转移导致用户无法将注意力集中在要展示的内容），我是公司的前端）

1. 动画（时长设置为800毫秒时）
   在认知心理学中用户在观看界面的时候屏幕右边的按钮出现在用户的认知系统里面，行为心理学中用户会进行操作（点击），但动效时长为800毫秒，在用户操作过用户会进行思考，在情感化设计中用户思考时会有一个波动曲线，当动效时间过长用户波动曲线在产品的体验过程中叠加到一定的数值后用户会产生负面情绪，当用户注意力转移时，有可能导致用户忘记当前的操作任务。所以不要让用户进行思考，要用户能掌控该控件，如果用户的操作未达到期望的操作反馈会导致用户失控心理，当失控心理一旦出现用户会产生不安全暴躁，易怒等情绪，把动画时长缩短。

2. 图标
   在认知心理学用户需要一个引导性的物质，从而引导用户去进行对应的操作，以达成设计时的初衷所以说一个图标正确选择性也很重要。在该动效中需要一个指示性的图标，选定一个箭头参数，初始图片为向外的箭头表达的寓意为"有尚未展开的列表"，当用户点击后动效执行完毕的时候箭头方向相反表达的寓意为"会关闭该列表"使得用户产生一种能掌握该控件的心理。

3. 前端技术
   3-1：使用css3进行编写，在用户点击时直接在原有元素节点添加新class，css让该按钮fixed定位在最高层，点击按钮添加一个新div模块，设置高宽定向归属为点击模块，文字又为一新的模块定向点击跳转链接模块，点击（点击模块）操作列表展开，图标进行相反的旋转，点击（跳转模块跳转链接），再次点击列表关闭，图标进行相反的旋转。在点击事件是首先想到的是click事件实践后发现点击多次后不再执行，后来发现click点击事件执行顺序为：点击——>touchstart——>touchmove——>touchend——>click(350ms延迟)。当时转移方法进而使用touchstart，当时平台用jQuery+vue，所以采用$('.class')进行操作，当调试点击时，没反应！进行排查，渲染流程为：浏览器接收到服务器返回的html页面——>浏览器对dom tree进行渲染，遇到样式进行对css rule tree——>javaScript通过dom API与css API 对dom tree和css rule tree进行操作——>浏览器落实渲染树(css tree、css rule tree)——>进行布局，确实每个节点的在屏幕中确切位置——>绘制，遍历渲染树，引用后端UI层，绘制到屏幕上，而在这个过程中由于渲染树未生成，解析器阻塞（有未加载完成的样式文件、http请求或遇到script标签），这时候dom未生成而$(′.class′)进行操作，当调试点击时，没反应！进行排查，渲染流程为：浏览器接收到服务器返回的html页面——>浏览器对domtree进行渲染，遇到样式进行对cssruletree——>javaScript通过domAPI与cssAPI对domtree和cssruletree进行操作——>浏览器落实渲染树(csstree、cssruletree)——>进行布局，确实每个节点的在屏幕中确切位置——>绘制，遍历渲染树，引用后端UI层，绘制到屏幕上，而在这个过程中由于渲染树未生成，解析器阻塞（有未加载完成的样式文件、http请求或遇到script标签），这时候dom未生成而(’.class’)操作dom tree尚未有dom API，而该div在vue其中之一的template中，vue作为前后端分离的框架加载方式多数为同步，而我在body前面以script代码段的方式添加代码遵循异步机制，所以导致当时尚未有 dom API ，所以只能基于document取该class，$(docment).on(‘touchstart’,’.class’)，进行操作。
   3-2：当时遇到移动端的点击穿透事件，点击穿透原理：当A层在B层上面A层点击消失后由于点击最后会存在延迟350毫秒的click事件当A层消失后，click事件点击到了B层的事件。当时采用取消冒泡事件方法（preventDefault()），但在尚未有dom API上使用无效，进行验证对比有无donAPI：
   
   ，第一张图添加了cancelBubble，区别为cancelableBoolean值不一致，该属性返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。所以说慎用preventDefault() 方法。

4. 视图点击域

用户操作点击按钮时按钮视图比用户点击域要小，所以会造成用户点击时不单只会触发该按钮事件，还会触发周围click的事件（下面一层的点击域），解决方法利用伪元素添加一个层叠在该按钮层下面，背景设置为块状元素利用padding设置范围**注意（需添加pointer-events:auto;样式，定位和按钮定位一致）**使得用户点击时不会触发周围click事件。