增強用戶體驗 讓網站和APP更具動感的幾點建議

本文來自 Smashing Magazine ，作者為Brolik的聯合創始人、首席創意官Drew Thomas。文中介紹了Web中增加動感設計可帶來的好處及進行動感設計的幾點建議，如采用圖層技術、運用前后過渡及開發單頁面應用。他還通過CSS3 代碼演示，進一步說明了動感設計的實現方式。下面為文章的簡譯內容。

數字體驗越來越注重對現實的模擬，每天都在進步。特別是對物理世界的模擬，使用得越來越廣泛，把人與機器之間的距離進一步縮短。

Web動感的過去

Flash曾經有過一段光輝的歷史，那是網絡視頻剛興起的年代。但是過后人們發現很多內容其實是無效、速度慢、冗余的，Flash漸漸走了下坡路。隨后JS和jQuery的出現，實現了較大的突破，但是使用起來還不十分方便。隨著CSS3動畫功能的出現，硬件設備性能的進一步提升，設計師們現在能隨心所欲地透過層疊樣式表來編寫有趣的互動頁面或App了。

Web動感的未來

動感頁面和動感App為人們的生活帶來了無限樂趣，那么有哪些技術值得關注呢?

Layers（圖層）

圖層技術可以說是應用得最為廣泛的一項技術，這在iOS7中體現得淋漓盡致。比方說控制中心，從屏幕底部滑上來后，會覆蓋當前部分屏幕。（ 可參見該網站上的視頻演示 ）

圖層的重要之處是方便設計師隱藏相關信息，在需要顯示的場合快速顯示，從而避免低效的整畫面渲染，同時能夠使用戶有前后過渡進行緩沖而不會覺得太突兀。

Context（前后過渡）

這里不妨以Instacart iOS App來舉例說明前后過渡的重要性。可參見 該網站上的GIF演示 ，里面的物品圖片從當前位置移動到一個新位置，下方再顯示具體信息。這樣的顯示方式符合自然規律， 讓人覺得過渡自然。

另外一個例子是下拉式菜單，點擊某個層疊圖片后再顯示出整個菜單列表。否則如果點擊后整個畫面突然被菜單項填滿，那樣的用戶體驗是十分糟糕的。GMail和非死book App在下拉技術應用上可謂是佼佼者，大家不妨進去看看。

SPA（單頁面應用）

當我們把動感和場景過渡加入到用戶界面后，下一步應該會想如何控制它們使之構成一個整體。為了更好的實現頁面到頁面的過渡，單頁面應用隨之應運而生了。

例如我正在編寫的一個網站： http://app.danceityourself.com ，里面的登入和登出操作便使用到了SPA。里面使用JS為登入頁面添加了一個動作類，觸發了CSS過渡動畫。

SPA的好處是過渡自然，高效，符合邏輯；讓用戶感覺正在訪問的不像是一般的網站，而更像一個本地應用。

如何使用CSS動作

萬事開頭難，我的建議是先從最基本的開始入手，而不建議一下子就編寫過于復雜和花俏的頁面。

CSS過渡

在現實世界中，事物間的轉化都是存在一定過渡的。反之，沒有過渡的轉化會讓人覺得太突然。

我們先看下面這段代碼：

button {
   margin-left:0;
}
button:hover {
   margin-left:10px;
}

它的意思是，當光標劃過按鈕時，該按鈕會向右移動10像素。但是這是沒有過渡的，給人感覺是瞬移式的，不太符合自然規律。 完整的演示請點擊這里查看 ，瀏覽器前綴等內容是必須的但下面例子里只含核心動作代碼，以下不再累述。

接著請看添加過渡動畫后的效果， 演示鏈接 ：

    button {  
       margin-left:0;  
       transition: margin-left 1s;  
    }  
    button:hover {  
       margin-left:10px;  
    }  

添加transistion屬性后，會在1s內使按鈕向右10像素，但是這樣看上去還是不夠自然。

我們再對它做點改動， 演示鏈接 ：

    button {  
       margin-left:0;  
       transition: margin-left .25s ease-out;  
    }  
    button.moveRight {  
       margin-left:10px;  
    }  

添加ease-out關鍵字，開啟慢移功能后，這樣看上去就舒服多了，因為大腦對于移動物體會有一定的延遲(殘像效應)，添加延遲過渡動畫后能夠使大腦與移動物體的運動同步，從而感覺這就是真實的。更關CSS過渡動畫的相關屬性介紹，請點擊這里進行查閱。

CSS動畫

相比于場景過渡，CSS動畫相對來說會稍微復雜些。什么時候會應用到呢？一般是為那些希望引起用戶注意的頁面元素添加動畫效果。

請看以下的CSS動畫例子，實現的效果是動態顯示一個不斷變大縮小的圓形。

    div.circle {  
       background:#000;  
       border-radius:50%;  
       animation:circleGrow 800ms ease-in-out infinite alternate both;  
    }  
    @keyframes circleGrow {  
       0% {  
          height:2px;  
          width:2px;  
       }  
       50% {  
          height:40px;  
          width:40px;  
       }  
       100% {  
          height:34px;  
          width:34px;  
       }  
    }  

里面使用了CSS關鍵幀技術，把關鍵幀動畫添加到該圓形對象上。

實現過程包含了兩個步驟。

第一，使用了animation屬性，這有點類似于transition屬性，但是能實現更多操作，Animation的詳細描述 請點擊這里 進行查閱。為circleGrow指定animation屬性，每隔800ms執行一次循環動畫。

第二，關鍵幀。透過設置百分比值0到100，控制了動畫變化的速度。示例中分別在0%，50%，100%時對物體進行關鍵幀大小設定，結合步驟一的設置形成一個動態變換效果。

具體效果和完整示例代碼 請點擊這里進行查看 。

animation的包含的可選參數如下所示：

    animation: [animation name (from keyframe block)] [duration] [timing function] [delay] [number of times the animation repeats] [animation direction] [fill mode]  

相關的詳細介紹 請點擊這里進行查閱 。

使用CSS動畫的關鍵點

過渡自然

以開車來說，現實中總不會啟動瞬間就能達到100碼吧？所以過渡是很有必要的。

建議多動手嘗試ease參數，比照添加前后的異同。如果想觀看更多過渡(時間)動畫的示例，請點擊這里進行查看。

參照物與比重

通常來說，大型物品比小型物品體重要大、速度要慢，所以要對頁面元素進行評估，然后再設定相關的動作值和時間值。一如前述的按鈕移動例子，一個小按鈕在1s內移動10像素的確是太慢了，四分之一秒或更小的值會讓人覺得更加自然。

寫在最后

如果想實現更加復雜的效果，應該多動手操作，這樣才能更加體會到個中的奧妙。只有站在用戶的角度思考問題，不斷減少現實和機器間的距離，那樣才能做出更好的用戶體驗。（責編：陳秋歌）

原文來自： Smashing Magazine