前端攻城狮应该了解的交互

提及用户体验会首先想到的就是产品经理和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;
}

按钮状态

按钮的状态有通常来讲有四种，可是除了这些为了提升用户体验可能还会有其余的交互的表现形式，来丰富现有项目。

1. 普通状态
2. hover 鼠标悬停状态
3. active 点击状态
4. focus 取得焦点状态
5. 忙碌状态
6. 禁用状态

<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;
}

总结

前端交互远远不止这些，还有不少这里也只是简单描述了一些平时容易忽视的地方，了解这些交互能够更好的完成项目，项目过程当中若是把这些提早作好，就不会再次返工了。