共计 4684 个字符，预计需要花费 12 分钟才能阅读完成。
说起用户体验会首先想到的就是 产品经理 和UI 设计 ，的确 产品经理 与UI 设计 确实应该考虑用户体验，首先前两个岗位从职责上来讲是最靠近用户的，但是反过来想一下，产品经理提出需求绘制原型，UI设计师会站在用户角度去设计页面。作为前端攻城狮来讲真的有必要去了解界面页面交互么？是的，可能由于前端知识匮乏，有很多交互是想不到的这个时候需要前端攻城狮们提出自己的见解，从前端技术的角度提出自己的看法以及方案。
在开始本文之前首先要先了解几个名词：
用户界面设计 : 用户界面设计(UI) 或用户界面工程师是为机器或者软件做用户界面设计的, 如: 计算机, 家用器具, 移动设备和其它电子设备, 专注于最大限度地提高用户体验. 用户界面设计的目标是尽可能是使用户交互变得简单有效, 实现用户的操作目标(设计是以用户为中心的).
交互设计模式 : 设计模式是一种记录解决常见设计问题解决方案的形式化方式. 建筑师Christopher Alexander 在城市规划和建设体系结构中已经介绍了这种方式, 并已用于其他学科, 包括教学, 教育学和软件架构和设计.
用户体验设计 : 用户体验设计(又称UXD 或UED或XD), 是通过提高可用性、可访问性以及在用户跟产品交互时的愉悦来提高用户体验的过程. 用户体验设计从完成传统的人机交互(HCI), 已经扩展到要处理产品或服务中能被用户感知的所有方面.
人机交互 : 人机交互(HCI) 不仅特别关注人和计算之间的界面, 也会研究设计和使用 Web 技术. 人机交互领域的研究人员都会去关注当前人类与计算机交互的方式和为人类与计算机提供新的交互方式的设计技术.
个人认为前端与交互设计是密不可分的，不知道各位是如何看待 UI 设计师们的工作的呢？曾几何时是不是也有过这样那样的抱怨，有的时候又何尝不是因为 1px 而引起的血雨腥风，作为一个前端攻城狮来讲何尝不想让他们了解一下我们的痛苦，有时真的很想说一句：”You can you up!”。可能其中到底有什么差别可能今生今世也无法理解。始终要记得一句话 术业有专攻。但是这并不是任由宰割的理由，前端攻城狮应该有自己的原则。
前端交互
UI 在做视觉设计的时候，就要考虑到实现成本。所以 UI 设计师至少要有一定的前端知识。看产品需求。假如圆角和阴影比较适合这个产品的定位和气质。前端就的做相应的妥协，而不是一味刚正不阿，站在自己的技术角度去诡辩，相反应该多去丰富自己的知识储备。
渐进增强优雅降级
在 HTML5 还不像现在这样普及的时候，刚刚出现不久的时候，很多公司都在使用这个新的技术，兼容问题也就扑面而来，于事就出现了一个新的概念 渐进增强与优雅降级。
渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级 ：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行hack 使其可以在低版本浏览器上正常浏览。
当 UI 设计 的设计图不能兼容所有浏览器，那么就应进行优雅降级，对于低端浏览器不对这样的样样式处理，其他浏览器应该使用 hack 方法进行兼容，以达到高度还原设计图。
.transition { /* 渐进增强写法 */
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.transition { /* 优雅降级写法 */
transition: all .35s;
-o-transition: all .35s;
-moz-transition: all .35s;
-webkit-transition: all .35s;
}按钮状态
按钮的状态有一般来说有四种，但是除了这些为了提高用户体验可能还会有其他的交互的表现形式，来丰富现有项目。
- 普通状态
- hover 鼠标悬停状态
- active 点击状态
- focus 取得焦点状态
- 忙碌状态
- 禁用状态
<button>Button</button>
<style>
button {background:pink;}
button:hover {background:yellow;}
button:active{background:red;}
button:focus{border:1px solid green;}
button.busy {background:#ededed;}
button:disabled {background:#ededed;}
</style>用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。「即时」是指，页面响应时间小于用户能忍受的等待时间。
指针状态
鼠标指针是一个容易忽视的问题，比如在做列表时，列表中并不是整个全部都可以点击的，这个时候不能移入时就变成了小手(可点击)，这样的话用户会感觉很茫然，不知该如何处理了。当指针处于不同场景时需要使用不同的指针状态，以便引导用户。
| 说明 | 属性 |
|---|---|
| 默认 | default |
| 文字 / 编辑 | text |
| 自动 | auto |
| 手形 | pointer, hand(hand 是 IE 专有) |
| 可移动对象 | move |
| 不允许 | not-allowed |
| 无法释放 | no-drop |
| 等待 / 沙漏 | wait |
| 帮助 | help |
| 十字准星 | crosshair |
| 向上改变大小(North) | n-resize |
| 向下改变大小(South) | s_resize 与 n -resize 效果相同 |
| 向左改变大小(West) | w-resize |
| 向右改变大小(East) | e-resize 与 w -resize 效果相同 |
| 向左上改变大小（NorthWest） | nw-resize |
| 向左下改变大小（SouthWest） | sw-resize |
| 向右上改变大小（NorthEast） | ne-resize 与 sw-resize 效果相同 |
| 向右下改变大小（SouthEast） | se-resize 与 nw-resize 效果相同 |
| 自定义光标 | url(‘ 光标地址 ’) |
移动端点击热区
什么是热区，热区就是在网页上进行了链接的一个区域。形象点说就是在网页上鼠标箭头变成小手的那个区域。这个概念在 web 表现的不是特别的明显，在移动端开发时会有很多，例如当网页中一个 icon 需要点击，若用户的屏幕太小，则很难点击到这个按钮，这就给用户带来很大的困扰，造成很差的用户体验。
在移动端中如 icon 中这种点击区域，一般要比其 icon 大小要大一些，方便用户进行点击操作，根据平时项目中经验，比如标题栏中有回退按钮，一般设置热区大小会于标题栏高度一样，形成一个 W*H 的正方形。页面中一般会设置 50*50(设计图中的尺寸) 的热区。
为了更好的体现出用户当前有没有点击按钮，最好加入一些点击效果以提示用户当前已点击了此按钮。效果如下：
图片源于网络，侵权必删
重要操作
在用户浏览网页时很有可能对软件中的功能进行误操作，比如删除来一些本不应该删除的东西。这个时候需要给用户一个反悔的机会，不能说错过了就错过了。这样的用户体验显然时极差的。
通过页面的设计、重组或特别安排，防止用户出错。比出现错误信息提示更好的是更用心的设计防止这类问题发生。在写文章的列表页面，点击 删除文章 后，会弹出一个对话框，让你确认是否删除文章，官方在设计的时候有意把 确定 按钮放在了右边，取消 按钮放在了左边，因为从操作流这个角度来看，若把 确认 按钮放在左边，则很容易误操作，而这个操作又是不可逆的。而且，官方在设计时给 确认 按钮填充了醒目的蓝色，多重防止误操作。个人觉得这一点，其实 Github 做的就很好，当我们再进行删除操作时，会让我们重新输入一下项目名称，这样防止用户手误删除掉那些本不该删除的东西。
上面这些都只是一个简单的方案，可以解决用户误操作的问题，使用过 IOS 系统的同学就应该知道，在 IOS 系统中，对于图片删除的处理，当用户选择删除图片时，而不是直接删除掉，而是存放到回收站离，等 30 天后才会自动删除。这就是一种很不错的用户体验。
在我们做一个系统级网页应用时，可以借鉴这种操作，当用户删除某条数据时，帮用户添加到某一个回收站中，再帮用户保留一阵子，这样可以防止用户误操作，给用户一次反悔的机会。
错误提示
当用户访问网页中出错或者访问资源不存在时一定要给予用户一个友好的提示，加入我们做了一个很牛 X 的网站，但还没牛 X 到保证不会出现错误，但这并不影响我们的用户体验，即使错了，我们也会尽量保证这是个有趣的错误，错误提示页面需要提供给用户的必要信息，主要有两点，一：告诉用户怎么了。二：告诉用户下一步该怎么做。
比如访问 segmentfault.com/questionsa 这个网站时会给出一个很有意思的提示，并且提供了一个返回首页的操作。
图片加载
在做项目过程中，若图片过多可能会导致加载过慢，会导致用户体验想相当的差，时可以考虑使用图片懒加载，只有当图片进入可视区时才开始加载图片，没有进入可视区之前，可以使用一张通用的图片代替。
// 图片懒加载类
class LazyLoad {constructor(el) {this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
this.init(); // 初始化}
// 判断是否该图片是否可以加载
canILoad() {
let imglist = this.imglist;
for (let i = imglist.length; i--;) {
// 缩写，相当于 if true
this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
}
}
// 获取图片与窗口的信息
getBound(el) {let bound = el.getBoundingClientRect();
let clientHeight = window.innerHeight;
// 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
return bound.top <= clientHeight - 100; // -100 是为了看到效果，您也可以去掉
}
// 加载图片
loadImage(el, index) {
// 获取之前设置好的 data-original 值
let src = el.getAttribute('data-original');
// 赋值到 src，从而请求资源
el.src = src;
// 避免重复判断，已经确定加载的图片应当从 imglist 移除
this.imglist.splice(index, 1);
}
// 当浏览器滚动的时候，继续判断
bindEvent() {window.addEventListener('scroll', () => {this.imglist.length && this.canILoad();
});
}
// 初始化
init() {this.canILoad();
this.bindEvent();}
}若图片太大，很可能会出现图片加载失败的情况，一般这种情况要在 <img/> 标签中添加 alt 属性，当图片加载失败时使用文字代替。但是这种处理结果比较生硬，这种情况一般也会使用一张图片代替。
const imgs = (url) => {
var oImg = new Image;
oImg.src = url;
let u = "";
oImg.onload = () => {u = url;}
oImg.onerror = () => {u = "图片地址"}
return u;
}总结
前端交互远远不止这些，还有很多这里也只是简单描述了一些平时容易忽视的地方，了解这些交互可以更好的完成项目，项目过程中如果把这些提前做好，就不会再次返工了。
