前端该懂交互设计吗？
前端该懂交互设计吗？
接到一个前端动效任务：设计一个点击展开的动效
效果如下:
（在产品看来这个交互是没必要存在，根据公司需求这也成了唯一的方法（在移动端页面右边添加一个控件，这种控件会将用户的注意力转移导致用户无法将注意力集中在要展示的内容），我是公司的前端）
动画（时长设置为800毫秒时）
在认知心理学中用户在观看界面的时候屏幕右边的按钮出现在用户的认知系统里面，行为心理学中用户会进行操作（点击），但动效时长为800毫秒，在用户操作过用户会进行思考，在情感化设计中用户思考时会有一个波动曲线，当动效时间过长用户波动曲线在产品的体验过程中叠加到一定的数值后用户会产生负面情绪，当用户注意力转移时，有可能导致用户忘记当前的操作任务。所以不要让用户进行思考，要用户能掌控该控件，如果用户的操作未达到期望的操作反馈会导致用户失控心理，当失控心理一旦出现用户会产生不安全暴躁，易怒等情绪，把动画时长缩短。图标
在认知心理学用户需要一个引导性的物质，从而引导用户去进行对应的操作，以达成设计时的初衷所以说一个图标正确选择性也很重要。在该动效中需要一个指示性的图标，选定一个箭头参数，初始图片为向外的箭头表达的寓意为"有尚未展开的列表"，当用户点击后动效执行完毕的时候箭头方向相反表达的寓意为"会关闭该列表"使得用户产生一种能掌握该控件的心理。前端技术
3-1：使用css3进行编写，在用户点击时直接在原有元素节点添加新class，css让该按钮fixed定位在最高层，点击按钮添加一个新div模块，设置高宽定向归属为点击模块，文字又为一新的模块定向点击跳转链接模块，点击（点击模块）操作列表展开，图标进行相反的旋转，点击（跳转模块跳转链接），再次点击列表关闭，图标进行相反的旋转。在点击事件是首先想到的是click事件实践后发现点击多次后不再执行，后来发现click点击事件执行顺序为：点击——>touchstart——>touchmove——>touchend——>click(350ms延迟)。当时转移方法进而使用touchstart，当时平台用jQuery+vue，所以采用 ( ′ . c l a s s ′ ) 进 行 操 作 ， 当 调 试 点 击 时 ， 没 反 应 ！ 进 行 排 查 ， 渲 染 流 程 为 ： 浏 览 器 接 收 到 服 务 器 返 回 的 h t m l 页 面 — — > 浏 览 器 对 d o m t r e e 进 行 渲 染 ， 遇 到 样 式 进 行 对 c s s r u l e t r e e — — > j a v a S c r i p t 通 过 d o m A P I 与 c s s A P I 对 d o m t r e e 和 c s s r u l e t r e e 进 行 操 作 — — > 浏 览 器 落 实 渲 染 树 ( c s s t r e e 、 c s s r u l e t r e e ) — — > 进 行 布 局 ， 确 实 每 个 节 点 的 在 屏 幕 中 确 切 位 置 — — > 绘 制 ， 遍 历 渲 染 树 ， 引 用 后 端 U I 层 ， 绘 制 到 屏 幕 上 ， 而 在 这 个 过 程 中 由 于 渲 染 树 未 生 成 ， 解 析 器 阻 塞 （ 有 未 加 载 完 成 的 样 式 文 件 、 h t t p 请 求 或 遇 到 s c r i p t 标 签 ） ， 这 时 候 d o m 未 生 成 而 ('.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() 方法。视图点击域
用户操作点击按钮时按钮视图比用户点击域要小，所以会造成用户点击时不单只会触发该按钮事件，还会触发周围click的事件（下面一层的点击域），解决方法利用伪元素添加一个层叠在该按钮层下面，背景设置为块状元素利用padding设置范围**注意（需添加pointer-events:auto;样式，定位和按钮定位一致）**使得用户点击时不会触发周围click事件。
前端该懂交互设计吗？相关推荐
- PEOPEO中国区总经理于景：当我谈交互设计时我谈些什么
嘉宾介绍 于景,软件工程硕士,自幼酷爱绘画,十六岁进入艺术院校专攻设计,在工业设计.多媒体互动艺术创作.视觉传达设计和服装设计等领域颇有造诣,先后创办了呜呀.NIGON.等设计公司和设计品牌. 199 ...
- UI设计师需要会交互设计吗
现在的UI设计不单单只要按照原型来画图这么简单了,时代在变,行业发展也一直在变化,现在UI设计师能了解一些交互思维的设计,得到的结果是不一样的,所以今天胡老师和大家说说UI设计师需要会交互设计吗. 首 ...
- 2012CSDN网站六大类职位火热招聘：社区编辑、产品交互设计、信息安全主管、前端工程师、Ruby工程师、搜索工程师...
CSDN创立于1999年,是中国最大的中文IT知识服务集团,专注IT信息传播.技术交流.教育培训和专业技术人才服务.拥有超过1800万注册会员.10000名CTO.50万注册企业及合作伙伴,全球中文网 ...
- 学交互设计要懂什么：交互设计师的知识体系
先为大家分享交互设计金字塔知识体系: 界面基础知识 界面基础知识包括:控件.布局.流程,即设计稿上可见部分. 1.控件: 控件就是界面上的最小单元,如搜索框.单选按钮.复选框.下拉框等. 认识控件 ...
- 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知
1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...
- 产品设计和交互设计总结
产品设计五部曲 第一步:产品架构图 产品架构图,真的很重要. 通过产品架构图,可以从宏观角度去梳理整个产品的重要组成部分及如何组成. 通过产品架构图,来判断我们所设想的系统本身架构是否合理,与公司已有 ...
- 图灵系列丛书（交互设计、编程、大数据、人工智能等）
[课程内容] 图灵交互设计丛书 UX设计师要懂工业设计 亲爱的界面:让用户乐于使用.爱不释手 ***面交互:潜移默化的UX设计方略 用户体验设计:100堂入门课 移动应用UI设计模式 简约至上:交互式 ...
- 2019最新某图灵系列丛书（交互设计、编程、大数据、人工智能等）
[课程内容] 图灵交互设计丛书 UX设计师要懂工业设计 亲爱的界面:让用户乐于使用.爱不释手 ***面交互:潜移默化的UX设计方略 用户体验设计:100堂入门课 移动应用UI设计模式 简约至上:交互式 ...
- 原型图、交互设计、UI图，到底啥关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. 做原型是表 ...
最新文章
- c++ 工作路径介绍及获取
- 中国人工智能学会通讯——基于视频的行为识别技术 1.1 什么是行为
- Hadoop小知识点
- WebService Software Factory 设计草图
- IAR 窗口重置默认配置
- win10隐藏linux,Win10如何隐藏Windows Defender任务栏图标
- Vue.js 判断对象属性是否存，不存在添加
- Solana 交易执行机制
- Android11.0 SystemUI 修改下拉菜单快捷键的图标
- 如何解决3G模块和USB转串口冲突问题
- 2018年结婚大数据来了：深圳离婚率高居第三，原因竟然是……
- 使用深山红叶工具盘备份瘫痪服务器的数据
- python有架构师吗_运维架构师-Python 自动化运维开发-021
- 电商指标项目-背景及技术选型
- HTTP常用请求头与请求体实例
- Django设置成中文
- 最少拍无纹波计算机控制系统,最少拍无纹波计算机控制系统设计.doc
- 2015年高考物理复习重点
- linux安装及启动nsq流程
- 学校计算机班班通维护保养记录,小学班班通使用管理制度