什麼是互動設計
使用者介面有兩部分的設計：互動設計和視覺設計。在下圖中，左邊和右邊分別是微信的互動設計和視覺設計。
互動設計 vs. 視覺設計
互動設計的產出物是可互動的低保真原型，設計內容包括：
- 資訊架構；
- 頁面佈局；
- 流程跳轉。
1. 資訊架構
資訊架構，是為了讓使用者在使用APP、軟體、網頁的時候，能夠快速找到自己需要的資訊、資料、功能，並且在使用的過程不會迷路。它有層級、有邏輯順序、要能反映資訊（功能）的重要程度和關係。
資訊架構的組成部分：
1.組織系統：關注如何組織資訊。比如小說，按篇幅，可以分為短篇、中篇、長篇；按年代，可以分為：古代、近代、現代、當代；按題材，可以分為武俠、推理、歷史、言情等等……從哪個角度來組織、到底多少層合適，需要設計者的判斷和權衡。比如噹噹網的商品組織方式：
組織系統
2.導航系統：協助使用者瞭解他在哪個位置，以及可以到何處去。比如微信的功能導航：
微信功能導航
豆瓣的功能導航：
豆瓣功能導航
3.搜尋系統：關注使用者如何搜尋資訊。比如淘寶的搜尋：
搜尋系統
4.標籤系統：關注如何表示資訊。我們可以把標籤系統理解為如何為資訊和它的組織方式命名。比如我們剛才提到的小說按題材，可以分為武俠、推理、歷史、言情等等，其中的武俠、推理這些就是資訊的標籤。
一些大型網站，比如淘寶、噹噹、京東等，設有專門的資訊架構師角色。而大部分的APP、應用軟體中，資訊架構由互動設計師設計。[1]
2. 頁面佈局
頁面佈局的工作，就是確定每個頁面有哪些元素，它們位置、順序、分組，要突出什麼元素，弱化或隱藏什麼元素。
頁面佈局
在設計佈局時，有一個要特別注意的事情，就是儘可能減少父頁（所有佈局抽象出來的模板）。比如說360安全路由的APP，它的父頁如下，所有頁面佈局，都是由這四個模板變化而來。這樣的軟體，使用者在使用時，會感覺統一、易學。
360安全路由
3. 流程跳轉
設計頁面之間的跳轉邏輯。通過連結、按鈕還是手勢；單擊還是雙擊；上劃還是下劃……我們在做可互動的原型時，要儘可能貼近軟體的最終效果。
流程跳轉
互動和視覺的分工
互動設計師在設計頁面佈局時，為了突出主次，會設計字型大小、間距、顏色等內容，但這不是最終效果。最終的字型、顏色、圖片、圖示、大小、間距等，由視覺設計師確定。
互動設計師在設計流程跳轉時，會設計過場動畫，但這同樣不是最終效果。最終效果由視覺設計師（或動畫設計師）確定。
區分互動和視覺有一種快速判斷法，那就是web工程師平時寫的css裡的屬性和引數，都屬於視覺設計的範疇。所以很多公司會多招幾個UI設計師，他們不僅僅負責視覺設計，還負責輸出css樣式表。
互動和視覺對人的要求
互動設計和視覺設計對人的要求不同，並且往往越往深入做，這兩者所需的性格、背景和思維方式差別越大。可以簡單地理解，互動設計是靠理性和邏輯驅動，而視覺設計是靠感性驅動。這也是為什麼目前的互動設計師中理工科院的學生佔了很大比例。[2]業界也有很多開發工程師轉做互動設計的成功案例。所以做開發，學互動設計有優勢。
互動和視覺高度交叉
我上面說，互動設計和視覺設計的分工，也說它們對人的要求不同。這可能會讓大家誤以為，這兩個角色的工作比較獨立，各自負責各自的內容。互動不用管視覺，視覺不用管互動。
但這是不對的。互動和視覺，是高度交叉的兩個領域，無法簡單的分隔。
首先，互動設計師一定要有很好的視覺設計的感覺，因為一個頁面佈局的好壞，會直接影響視覺的發揮。如果互動設計師匯入一個沒主次，結構很糟糕的設計給視覺設計師，他只有兩個選擇，一、降低自己的水平，隨便做一個；二、自己動手，重新設計一個。
其次，互動設計會影響視覺設計，視覺設計也有可能反過來，讓互動設計做修改。舉個例子，我們最近正在做的一個功能。
案例
最早的互動設計裡沒有列表選擇功能。後來在視覺設計過程中發現，我們的視窗大小，如果要保證視訊旁邊不出現黑邊，可能會留很大得空隙，如果佈局滿了，又會導致視訊出現黑邊。一種方式，是把底下的點贊、分享、評論移上來，放到右邊，但這樣的排版怎麼也不會滿意。況且我們這個頁面最核心的目的，是讓使用者看視訊。後來我們想了一下，增加了選集的功能，雖然這樣增加了開發工作量，但是對使用者來說，在這頁面可以直接導航到其它視訊，使用體驗更好，也解決了我們看視訊黑邊的問題。
說這些想要表達的是，我們要時刻注意，自己是在同視覺設計師配合完成一個作品。我們設計的好壞，會影響他的工作。所以在介入真實專案前，我們要通過大量的學習+練習，達到準設計師水平。
如何學習互動設計
1. 看
互動設計師需要有好的視覺設計的感覺，需要有基本的審美能力。如何提升審美能力？只有一種方法，看。
我們要看大量優秀的設計作品。現在有很多平臺可以很容易的找到世界上頂尖的設計師們設計的東西。比如behance、pinterest、FWA、dribbble等等……如果嫌國外的訪問太慢，也可以選擇國內的，比如花瓣。
不要只看軟體介面，也看看其它領域的設計作品，好的產品、好的建築、好的電影海報、好的攝影作品、好的藝術作品。看到喜歡的，把它們收集起來。
看了後，該怎麼判斷自己的審美能力有提升呢？
隔幾個月去看看自己前幾個月喜歡的東西，當時覺得不錯，現在是不是覺得醜的掉渣？如果是的話，審美水平就在進步。[3]
還有一種辦法，把自己平時喜歡的、會分享的設計，同設計領域的人溝通，聽聽他們的意見。一個專業的設計師，不會只說，這個好，那個不好，他們說為什麼好，為什麼不好，比如「這個介面主次不夠突出，重點元素沒有強調出來」、「沒有引導使用者的視線」等等等等……
2. 用
我們在dribble、在花瓣，看的都是單個頁面。互動設計不只是設計一個個頁面，它還得把頁面串起來。所以看單個頁面還不行，我們要用、要體驗實際的產品，看看別人是怎麼把一個個頁面組合成產品，頁面和頁面間的過場是怎樣的。
怎麼用呢？很簡單，我們每個人都有手機或pad。去下載優秀的APP，每個APP花20分鐘，把所有頁面、所有功能跑一遍。優秀的APP來源，可以是應用市場每個分類下的Top20，也可以來自一些優秀的組織、使用者推薦，如最美應用、如知乎上的APP推薦等。
我還有一個很誠懇的建議。如果有條件的話，最好買個MAC。為什麼設計師喜歡用MAC？我們看幾張對比圖。
PC和MAC上的QQ。
vs.1
PC和MAC上的應用市場。
vs.2
PC上的「精美」PPT模板，和MAC上的keynote模板。
vs.3
MAC的軟體比PC的軟體優雅太多，完全不在一個level。如果我們每天看的、用的都是最好的產品，我們的審美能力自然會提升，對什麼是好設計，什麼是壞設計會更敏銳，更有感覺。
3. 想
認知科學研究發現：
世界上最好的象棋選手之間的差距，其實並不是他們思考能力的差異，或者是否能走出一招妙棋，而是他們熟悉的棋譜的多寡。[4]
做互動設計也是這樣，決定互動設計師的設計水平，是在做設計時，設計師能夠想起多少個相似的的設計，並借鑑、組合、改進它們，成為自己的設計。
我們看了那麼多優秀的設計，我們用了那麼多優秀的產品，怎麼樣才能在需要的時候記起它們呢？認知科學給出的答案很簡單，去想，去思考。
一樣東西進入我們的大腦，如果我們沒有思考過，大腦會認為這個東西沒用，就丟掉它，不存下來。但如果我們仔細思考過它，大腦就會自己做個判斷，認為以後有可能要再度想起它，就把它存下來。
所以不只要看，要用，還要想。
比如我們看到這個頁面，要想：
1.資訊架構是怎樣的？有沒有層級，有沒有邏輯順序？能不能反映它們的重要程度和關係？
2.頁面佈局是怎樣的？它們位置、順序是怎樣的？它是怎麼分塊的？它是怎麼突出主要任務的？
3.有沒有其它設計亮點，比如好的隱喻，比如視覺怎麼營造氛圍。
360安全衛士
把所有思考結果記錄下來。記得多了，形成自己的觀點後寫成文章，同其他人分享。
4. 做
一開始模仿，在這個過程中，學習工具的使用，把它用熟。[5]
為什麼要先把工具用熟呢？道理很簡單，如果工具還不熟悉，大腦會把主要精力都耗費在工具的使用上，根本騰不出空間來思考設計的事。
當工具使用沒有任何問題後，做真實的產品設計。
我們可以直接在專案中實踐，但大部分人應該沒這個條件，那怎麼做？
重新設計現有的產品。比如我們可以重新設計微信，重新設計簡書；我們覺得某個軟體設計的不夠好，重新設計它。通過這種訓練方式，提升設計技能，達到準設計師的水平。
那麼，一個產品（或功能）的設計流程，是怎樣的呢？
1.明確使用場景
我們經常看到一個被分解後的功能指標項如下：
我要一個遠端控制的功能。老師可以控制某個學生的電腦。
如果按照這個需求做的話，在產品首頁加一個遠端控制的按鈕，點一下，老師可以選擇某個學生進行控制，這個功能就設計好了。
但是實際上老師是怎麼用的呢？我們和產品經理（或使用者）溝通，會發現老師使用這個功能的場景是：
1.老師檢視螢幕預覽圖，覺得某個學生可能做的不錯，雙擊檢視學生完整的螢幕。發現學生做的很好，就轉播給其他學生看，在這個過程中會協助學生微調作業。
2.學生有問題時，舉手請求老師協助，老師在講臺上協助解決問題，（並將這個協助過程廣播給其它同學）。
這就是使用場景。場景非常非常重要。它決定了功能入口放在哪裡比較合適，應該突出它，還是弱化它。它的前一步是什麼，下一步是什麼。
只有明確了真實的使用場景，才能設計出使用者可用的產品。
2.收集素材
去前面提到的設計網站，或是平時用的軟體商找同類設計來對比和分析，看看其他人是怎麼設計的。比如遠端協助，可以看看QQ是怎麼設計的。把它的整個流程跑幾遍，並且把每個過程截圖下來。借鑑它設計好的地方。
QQ遠端協助
3.畫草圖
有了想法以後，在紙上畫草圖。
草圖裡面，主要是把每個頁面都有哪些功能、元素，擺放順序定清楚。這個就是梳理我們設計思路的過程。
這個過程一定要有。千萬不要一上來就做原型，那會花很多時間在對齊、排版等等瑣碎的事情上，我們也沒辦法一下子看到全貌，把每個頁面都想清楚了，頁面流程怎麼跳轉都想好了，再搬到Axure上。
4.畫低保真原型
把草圖搬到Axure上。這個過程還會調整，修改。
5.可用性測試，調整設計
做完動態的、可互動的原型後，找三個使用者試用下（不一定要真實的終端使用者，另外，不用太多使用者，三個使用者就已經能夠發現70%關鍵問題），觀察他們在使用的時候會碰到什麼問題，找出最關鍵的問題，進行調整。
這個階段完成後，就可以提交開發了。
6.補充細節設計
有一些很細節的流程，我們沒辦法在一個互動稿裡面完全體現，比如頁面內容為空時，怎麼辦；資料載入出錯時，怎麼辦。這個時候用文件來補充這些分支流程。我們就像寫開發文件一樣，把整個軟體的所有分支流程、異常流程都過一遍，記下來，然後提交開發。文件形式不重要，只要能傳遞思考結果就行。
以上只是一個大概的流程，在實際操做的時候，還會碰到很多問題。有一些東西我會在後面分享的時候再細講，還有一些東西，可能就需要大家實際動手，自己去摸索和沉澱。
總結
看、用、想、做。
方法總結
End.
最後，我想說的是，我們掌握一個東西，要下很大的功夫，沒有捷徑可走。那些想要走捷徑的人，往往到最後會發現，繞了一大圈，卻什麼也沒得到。只有那些腳踏實地一步步前行的人，才有機會走到自己想要到達的地方。
[1]: 這部分寫的很吃力，我對資訊架構並無系統的瞭解。後續會再深入學習這部分內容。↩
[2]: 本文有很多觀點，包括對人的要求這部分，來源於馬力老師的《產品設計師技能書》↩
[3]: 學習的一些方法，來源於羅子雄老師的分享《如何成為一名優秀的設計師》 ↩
[4]: 原文見《為什麼學生不喜歡上學》 ↩
[5]: 工具入門見《互動設計入門指南》 ↩