用戶體驗設計的有效轉換

有些網站賽過別人，不管其內容，可用性，設計，功能，交互設計和動畫等來區分現代網站之間的根本性差異。咱們將分享一些來自各類模式和體驗，並以此來分析爲何這些簡單的模式在網站中能夠工做得這麼好。

當咱們設計的數碼產品，咱們常用的應用程序有Photoshop以及一些草圖設計。大多數從事該行業的人已經很清楚的瞭解，設計不只僅是爲人們呈現視覺效果這麼簡單。儘管如此，許多人仍然繼續建立靜態設計。史蒂夫·喬布斯說過一句關於設計的話：

「設計的意義在於其自己是如何工做的，而不只僅是看起來怎麼樣或者感受怎麼樣」

咱們對產品的經驗和印象會被一些綜合性的因素所影響，所以，咱們不要再認爲靜態設計的用戶界面可以繼續扮演最基本的角色，相反，咱們須要從一開始就要擁抱網頁的互動性，並把它們認爲是最天然的組成部分。
讓咱們來看看一些例子，其中智能互動以及定義的微妙動畫，已經悄然生息的地改善了用戶體驗。

動畫滾動

讓咱們又愛又恨的Web超連接。當你點擊一個連接，它能夠帶你去任何地方，從一個網站的產品頁面到一個使人不寒而慄的老木偶店面。其結果就是丟失網頁的上下文。

關於用戶體驗的書籍所作的偉大貢獻就是線性。好比對於一本書而言，你必須閱讀書籍的第一章，纔可以瞭解第二章。若是你直接跳過第一章，你就會發現， 這種作法會錯過一些知識點，在網絡上，尤爲對於內容很長的網站，這種狀況每每就會下意識地就會發生。因此，經過添加一個滾動的動畫，咱們就能夠解決這個問 題：

與以前的進行對比效果

經過默認的錨連接進行網頁內容之間的跳躍，它已經再也不是一種無心識的動做了，它是一種用戶決定方式，若是沒有添加一些滾動效果而直接跳躍也許並非最好的選擇，突兀的變化對於用戶而言是一件糟糕的事情，因此不要再讓他們不知所措了，而應該讓他們知道目前正在發生的變化。

實用的切換效果

就像咱們看到的最後一個例子，過渡效果能夠幫助用戶理解內容區域的轉變過程，而不會是那種讓人難以理解的不天然跳躍，讓咱們接下來看下另一個例 子：切換菜單，當用戶點擊加號的時候就會觸發事件，並添加額外的內容和元素，加號就會變成一個交叉的形狀，所以用戶就會很清楚的意識到菜單目前所處的狀 態。

這個簡單的過渡效果徹底轉變了圖標的原有定義，儘管是一個微小的改變，但足以讓咱們大體猜想出內容目前所處的大體方位，因此適當的加入切換效果對用戶的體驗是很是友好的，不知道你們是否注意到加號旋轉的方向永遠是跟內容切換的方向一致，這無形中加強了信息內容的流動性。

目前大部分博客網站都含有留言表單，但有些表單看起來並非十分友好，有時候是太複雜，有時候是顯示多餘的內容，當你決定爲某篇文章發表評論的時候，有些表單會向你提供一些可有可無的信息，有些時候可能會讓你以爲煩躁和沮喪。

有些時候爲了鼓勵用戶多留言，咱們能夠隱藏整個表單而僅留下一個留言輸入框，當用戶點擊輸入框的時候再展開一些必要的輸入信息框便可。

對比效果

下拉刷新
若是你是智能手機的用戶，那麼你對下拉刷新必定不會陌生，在咱們經常使用的新聞app中常常會用到下拉刷新這個功能，它爲何會如此流行？由於他可以讓用戶不 斷的更新消息內容，你不須要在屏幕中尋找某個查看更多的按鈕，你所要作的就是用手指在屏幕中輕輕的向上滑動便可。這種處理方式在Twitter’s app中會常常看到，固然如今不少相似的app都已經把它做爲一項基本的更新方式了。

固然這種刷新方式一樣能夠運用到網頁刷新中，這也許會涉及到一些ajax的方法，但咱們不妨能夠做爲參考，將手指向上的滑動換成鼠標滾輪向下滾動的方式，典型的例子有qq空間中的信息向下滾動刷新，以及百度圖片等等。

粘性標籤

粘性標籤是又一個提高用戶體驗的方法，它結合了一些過渡以及切換的動畫效果，讓咱們來看下如下的動畫效果。

項目標籤會一直跟隨內容進行相應的滾動，這樣能夠對文章的上下文進行更加明確的提示和說明，也更有利於提高文章各部份內容的理解程度。

基於上下文的隱藏

在ios中的谷歌瀏覽器中的網址導航欄是基於上下文的隱藏典型的例子，讓咱們來看下效果。

當用戶使用ios中的谷歌瀏覽器時，用戶將網頁向下滾動到必定位置時，網址導航欄就會被自動隱藏，當用戶再次返回頁面頂部時，網址導航欄纔會從新出現。這樣作更有利於用戶專一於文章內容的瀏覽，而不會被多餘的元素所影響，特別對於手機用戶而言。

後語

這些僅僅是提高用戶體驗的一部分方式，其實最重要的仍是不斷的爲用戶着想,不斷的實踐和探索如何才能用戶更容易理解和使用咱們所開發的產品，簡化步驟，提高界面好感度是咱們不斷改進產品源源不斷的動力。

本實例由 數字生活 web前端資源 www.dglives.com 負責整理和收集!