幫你從零開始掌握交互設計的學習筆記

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

　　什麼是交互設計

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

　　交互設計 vs. 視覺設計

　　交互設計的產出物是可交互的低保真原型，設計內容包括：

　　信息架構;

　　頁面布局;

　　流程跳轉。

　　一、信息架構

　　信息架構，是為了讓用戶在使用APP、軟件、網頁的時候，能夠快速找到自己需要的信息、資料、功能，並且在使用的過程不會迷路。它有層級、有邏輯順序、要能反映信息(功能)的重要程度和關系。

　　信息架構的組成部分：

　　1. 組織系統 ：

　　關注如何組織信息。比如小說，按篇幅，可以分為短篇、中篇、長篇;按年代，可以分為：古代、近代、現代、當代;按題材，可以分為武俠、推理、歷史、言情等等……從哪個角度來組織、到底多少層合適，需要設計者的判斷和權衡。比如當當網的商品組織方式：

　　組織系統

　　2. 導航系統

　　協助用戶了解他在哪個位置，以及可以到何處去。比如微信的功能導航：

　　微信功能導航

　　豆瓣的功能導航：

　　豆瓣功能導航

　　3. 搜索系統

　　關注用戶如何搜索信息。比如淘寶的搜索：

　　搜索系統

　　4. 標簽系統

　　關注如何表示信息。我們可以把標簽系統理解為如何為信息和它的組織方式命名。比如我們剛才提到的小說按題材，可以分為武俠、推理、歷史、言情等等，其中的武俠、推理這些就是信息的標簽。

　　一些大型網站，比如淘寶、當當、京東等，設有專門的信息架構師角色。而大部分的APP、應用軟件中，信息架構由交互設計師設計。[1]

　　二、頁面布局

　　頁面布局的工作，就是確定每個頁面有哪些元素，它們位置、順序、分組，要突出什麼元素，弱化或隱藏什麼元素。、

　　頁面布局

　　在設計布局時，有一個要特別注意的事情，就是盡可能減少父頁(所有布局抽象出來的模板)。比如說360安全路由的APP，它的父頁如下，所有頁面布局，都是由這四個模板變化而來。這樣的軟件，用戶在使用時，會感覺統一、易學。

　　360安全路由

　　三、流程跳轉

　　設計頁面之間的跳轉邏輯。通過鏈接、按鈕還是手勢;單擊還是雙擊;上劃還是下劃……我們在做可交互的原型時，要盡可能貼近軟件的最終效果。

　　流程跳轉

　　交互和視覺的分工

　　交互設計師在設計頁面布局時，為了突出主次，會設計字體大小、間距、顏色等內容，但這不是最終效果。最終的字體、顏色、圖片、圖標、大小、間距等，由視覺設計師確定。

　　交互設計師在設計流程跳轉時，會設計過場動畫，但這同樣不是最終效果。最終效果由視覺設計師(或動畫設計師)確定。

　　區分交互和視覺有一種快速判斷法，那就是web工程師平時寫的css裡的屬性和參數，都屬於視覺設計的范疇。所以很多公司會多招幾個UI設計師，他們不僅僅負責視覺設計，還負責輸出css樣式表。

　　交互和視覺對人的要求

　　交互設計和視覺設計對人的要求不同，並且往往越往深入做，這兩者所需的性格、背景和思維方式差別越大。可以簡單地理解，交互設計是靠理性和邏輯驅動，而視覺設計是靠感性驅動。這也是為什麼目前的交互設計師中理工科院的學生占了很大比例。業界也有很多開發工程師轉做交互設計的成功案例。所以做開發，學交互設計有優勢。

　　交互和視覺高度交叉

　　我上面說，交互設計和視覺設計的分工，也說它們對人的要求不同。這可能會讓大家誤以為，這兩個角色的工作比較獨立，各自負責各自的內容。交互不用管視覺，視覺不用管交互。

　　但這是不對的。交互和視覺，是高度交叉的兩個領域，無法簡單的分隔。

　　首先，交互設計師一定要有很好的視覺設計的感覺，因為一個頁面布局的好壞，會直接影響視覺的發揮。如果交互設計師導入一個沒主次，結構很糟糕的設計給視覺設計師，他只有兩個選擇，一、降低自己的水平，隨便做一個;二、自己動手，重新設計一個。

　　其次，交互設計會影響視覺設計，視覺設計也有可能反過來，讓交互設計做修改。舉個例子，我們最近正在做的一個功能。

　　最早的交互設計裡沒有列表選擇功能。後來在視覺設計過程中發現，我們的窗口大小，如果要保證視頻旁邊不出現黑邊，可能會留很大得空隙，如果布局滿了，又會導致視頻出現黑邊。一種方式，是把底下的點贊、分享、評論移上來，放到右邊，但這樣的排版怎麼也不會滿意。況且我們這個頁面最核心的目的，是讓用戶看視頻。後來我們想了一下，增加了選集的功能，雖然這樣增加了開發工作量，但是對用戶來說，在這頁面可以直接導航到其它視頻，使用體驗更好，也解決了我們看視頻黑邊的問題。

　　說這些想要表達的是，我們要時刻注意，自己是在同視覺設計師配合完成一個作品。我們設計的好壞，會影響他的工作。所以在介入真實項目前，我們要通過大量的學習+練習，達到准設計師水平。

　　如何學習交互設計

　　1. 看

　　交互設計師需要有好的視覺設計的感覺，需要有基本的審美能力。如何提升審美能力?只有一種方法，看。

　　我們要看大量優秀的設計作品。現在有很多平台可以很容易的找到世界上頂尖的設計師們設計的東西。比如behance、pinterest、FWA、dribbble等等……如果嫌國外的訪問太慢，也可以選擇國內的，比如花瓣。

　　不要只看軟件界面，也看看其它領域的設計作品，好的產品、好的建築、好的電影海報、好的攝影作品、好的藝術作品。看到喜歡的，把它們收集起來。

　　看了後，該怎麼判斷自己的審美能力有提升呢?

　　隔幾個月去看看自己前幾個月喜歡的東西，當時覺得不錯，現在是不是覺得丑的掉渣?如果是的話，審美水平就在進步。[3]

　　還有一種辦法，把自己平時喜歡的、會分享的設計，同設計領域的人溝通，聽聽他們的意見。一個專業的設計師，不會只說，這個好，那個不好，他們說為什麼好，為什麼不好，比如「這個界面主次不夠突出，重點元素沒有強調出來」、「沒有引導用戶的視線」等等等等……

　　2. 用

　　我們在dribble、在花瓣，看的都是單個頁面。交互設計不只是設計一個個頁面，它還得把頁面串起來。所以看單個頁面還不行，我們要用、要體驗實際的產品，看看別人是怎麼把一個個頁面組合成產品，頁面和頁面間的過場是怎樣的。

　　怎麼用呢?很簡單，我們每個人都有手機或pad。去下載優秀的APP，每個APP花20分鐘，把所有頁面、所有功能跑一遍。優秀的APP來源，可以是應用市場每個分類下的Top20，也可以來自一些優秀的組織、用戶推薦，如最美應用、如知乎上的APP推薦等。

　　我還有一個很誠懇的建議。如果有條件的話，最好買個MAC。為什麼設計師喜歡用MAC?我們看幾張對比圖。

　　PC和MAC上的QQ。

　　PC和MAC上的應用市場。

　　PC上的