譯者紀：本片文中包含大量的動態頁面（原網站是視頻鏈接，本網站上傳視頻不能排序，故人工轉為動圖），加載較緩慢，請各位多點耐心，么么噠

---

一個好的交互設計師可以很容易的解釋設計里面的決定背后的邏輯。這包含著信息架構，頁面內容的層次結構，流程和所做的解釋。

遲早，動效將會應用到線框圖原型中，這個時候，再去對設計做決定或者是解釋，將會變的難一些。例如一些這樣的理由：太狂拽酷炫了……太潮了……太雞凍了……這將是設計失去其力度的領域（Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.）在我們的設計中，動效理應占到更多的比重。我們應該去定義動效，并且闡述他們的目的——像我們闡述一個設計中其他的元素一樣。

什么是功能動效？

一個好的用戶界面具有較高的轉化率和易用性。換句話說，它既能滿足商業用途也便于使用。以下是我們發現的一些想法清單。

上一篇：交互設計技巧：創造好的用戶體驗（1）(翻譯)

21. 嘗試平滑過渡而不是突兀呈現

當用戶進行操作的時候，界面元素經常會有出現、隱藏、移動、轉換以及大小調整的動作。作為對操作的回應，為元素變化適當添加時間延遲有時候讓用戶更容易理解剛剛發生了什么。以動畫或者過渡的形式刻意制造的延時，給了用戶理解元素大小或者位置變化的必要的反應時間。當然了，你也要記住，我們應該將過渡的時間控制在0.5s之內，時間太久的話，用戶可能就會感到不適。對于那些只想快點完成任務的用戶，太長時間的延時當然會成為一種負擔。

 22. 嘗試循序漸進的引導而不是草率地讓用戶注冊

與其要求用戶立馬注冊，何不讓用戶先體驗一些已示范的有價值的操作呢？在最初的交互過程中，不僅能展現產品的價值，也能顯示出產品的個性。一旦用戶開始看到你的產品的價值，了解產品對自己的用處，他們將更樂于與你分享更多的信息。這種循序漸進的引導是一種盡可能推遲注冊過程的方法，同時還可以讓用戶使用和自定義你的應用或產品。

一個好的用戶界面具有較高的轉化率和易用性。換句話說，它既能滿足商業用途也便于使用。以下是我們發現的一些想法清單。

  1. 嘗試使用一列布局代替多列

一列布局會讓你對全局有更好的掌控。它也能讓你的用戶預先對整體的內容從上到下有一個大致的了解。然而多列布局則會讓用戶從頁面的核心內容上分散注意力從而增加額外的風險。最好的方法是用一個有邏輯的敘述然后在文末加上一個行動的口號來引導用戶。 

  2. 嘗試用禮物代替直接銷售

在互聯網時代，誰有互聯網思維?馬化騰，雷軍，周鴻祎他們有。他們為什么有互聯網思維?因為他們都是產品經理!所謂的“互聯網思維”其實就是產品經理的日常工作方法。這篇文章是一位資深產品經理寫的故事，看過后，就算不是IT人，你也一定會有所收獲。

一家軟件公司接到了一個項目：開發某報業集團的圖片管理系統，老板決定成立一個跨部門的項目組來負責這個圖片系統。任務由產品經理張曉龍負責，韓冰配合張曉龍的工作。

他們商量了一下，決定盡快開一個項目啟動會。會議的目的有兩個，一個是大家互相認識一下，另外一個就是一起討論一下對于這個項目的看法，以及下一步的工作安排。

各位已經工作了的小伙伴們，你們在跟公司領導或是開發、銷售等其他人討論產品的設計問題是不是經常聽到這么兩個問題:“我也是用戶啊，我就覺得xxx功能提好的啊”，“如果用戶需要xxx功能怎么辦”？

通常這個時候你是怎么回答的呢？是不是覺的他們好不講道理但又卻無法反駁？那今天老D給你講一個案例，一個故事講什么為什么需要用戶角色模型。

一家汽車公司準備設計一款新車，他們的產品種類廣泛，一直以來的主要銷售對象是如下幾類人：

 A是個富二代，喜歡跑車，因為馬力足、外形酷、好玩；

B是個家庭主婦，希望自己的車能安全、舒適、空間大；

C是個零售店主，經常拉貨，所以希望自己的車解釋耐用；

D是個上班族，希望停車方便、省油；

E是個農民，希望能夠結實耐用動力強勁；

F..；

G...；

還有很多小眾的用戶需求

如果你看了很多優秀的設計，但是自己卻仍然還覺得有所欠缺。來看看作者梳理的掌握交互設計的方法吧。

最近兩個月給公司的伙伴們做交互設計的分享，這是第一期分享的內容。在這次分享中，我認真梳理了交互設計師掌握和精通這門技藝的方法。我認為，如果想成為拔尖的設計師，只有這條路可走。

什么是交互設計

用戶界面有兩部分的設計：交互設計和視覺設計。在下圖中，左邊和右邊分別是微信的交互設計和視覺設計。

交互設計 vs. 視覺設計

交互設計師的核心能力其實是三者的交集，這個也很容易看到，為什么交互其實是易學難精的，也就是你每放大一點點，你需要在每個維度上都放大很多，產品維度而言，如果你知道商業目標，產品功能，運營策略是如何制定出來，那你從源頭上就找到了和產品經理對話的能力，開發維度而言，核心來講，是你得知道技術的約束邊界，知道可行性把握有多大，如果你還知道實現機制，，那你也能就找到了和開發工程師愉快合作的基石，設計維度，不多講，具備足夠的設計美感和設計品味是應該的，對設計規范、用戶習慣了解越多，越能知道設計不應該做什么，不干舍本逐末的事，從這個模型上，這也很容易解釋，為什么一個好的交互設計師要涉獵產品，開發，UI知識，做到最好比較全面的知識結構，我們經常講用戶體驗，講體驗設計，其實有句話我一直很認同，誰講的不記得了“體驗是個人的，體檢設計不是”。

順便講講我覺得重要的交互設計師好習慣。

一款基于HTML5 Canvas的折線圖表，這款HTML5折線圖表的特點有兩個，一個是圖表是有動畫效果的，即在圖表初始化的時候帶有動畫；第二個是這個HTML5折線圖表可以讓你動態添加數據節點，并且用折線平滑地連接，Canvas是這款折線圖的一個畫板。

這次我們要來看一款純CSS3實現的響應式分頁插件，對于分頁插件，之前我們也分享過一些，都是基于jQuery分頁插件。這款CSS3分頁插件可以完全自定義分頁條的樣式，包括鼠標滑過時的背景顏色、頁碼的數量以及前后翻頁的按鈕。

這是一款基于純CSS3的菜單導航，這款菜單非常有個性，菜單背景是一頁古老的筆記本紙張，菜單項像是浮動的文字一樣嵌入在紙張上。鼠標滑過菜單項時會出現不同的背景線條，顯得相當可愛。這款CSS3菜單導航非常適合在個人博客中使用。