前端攻城獅應該瞭解的交互

提及用戶體驗會首先想到的就是產品經理和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;
}

總結

前端交互遠遠不止這些，還有不少這裏也只是簡單描述了一些平時容易忽視的地方，瞭解這些交互能夠更好的完成項目，項目過程當中若是把這些提早作好，就不會再次返工了。