藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.woshipm.com/ucd/159893.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里

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

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

什么是交互設(shè)計(jì)

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

交互設(shè)計(jì) vs. 視覺設(shè)計(jì)

    交互設(shè)計(jì)的產(chǎn)出物是可交互的低保真原型，設(shè)計(jì)內(nèi)容包括：

信息架構(gòu)；
頁面布局；
流程跳轉(zhuǎn)；

1. 信息架構(gòu)

信息架構(gòu)，是為了讓用戶在使用APP、軟件、網(wǎng)頁的時(shí)候，能夠快速找到自己需要的信息、資料、功能，并且在使用的過程不會(huì)迷路。它有層級(jí)、有邏輯順序、要能反映信息（功能）的重要程度和關(guān)系。

信息架構(gòu)的組成部分：

組織系統(tǒng)：關(guān)注如何組織信息。比如小說，按篇幅，可以分為短篇、中篇、長(zhǎng)篇；按年代，可以分為：古代、近代、現(xiàn)代、當(dāng)代；按題材，可以分為武俠、推理、歷史、言情等等……從哪個(gè)角度來組織、到底多少層合適，需要設(shè)計(jì)者的判斷和權(quán)衡。比如當(dāng)當(dāng)網(wǎng)的商品組織方式：

組織系統(tǒng)

導(dǎo)航系統(tǒng)：協(xié)助用戶了解他在哪個(gè)位置，以及可以到何處去。比如微信的功能導(dǎo)航：

微信功能導(dǎo)航

豆瓣功能導(dǎo)航

搜索系統(tǒng)：關(guān)注用戶如何搜索信息。比如淘寶的搜索：

搜索系統(tǒng)

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

一些大型網(wǎng)站，比如淘寶、當(dāng)當(dāng)、京東等，設(shè)有專門的信息架構(gòu)師角色。而大部分的APP、應(yīng)用軟件中，信息架構(gòu)由交互設(shè)計(jì)師設(shè)計(jì)。

2. 頁面布局

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

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

360安全路由

3. 流程跳轉(zhuǎn)

設(shè)計(jì)頁面之間的跳轉(zhuǎn)邏輯。通過鏈接、按鈕還是手勢(shì)；單擊還是雙擊；上劃還是下劃……我們?cè)谧隹山换サ脑蜁r(shí)，要盡可能貼近軟件的最終效果。

交互和視覺的分工

交互設(shè)計(jì)師在設(shè)計(jì)頁面布局時(shí)，為了突出主次，會(huì)設(shè)計(jì)字體大小、間距、顏色等內(nèi)容，但這不是最終效果。最終的字體、顏色、圖片、圖標(biāo)、大小、間距等，由視覺設(shè)計(jì)師確定。

交互設(shè)計(jì)師在設(shè)計(jì)流程跳轉(zhuǎn)時(shí)，會(huì)設(shè)計(jì)過場(chǎng)動(dòng)畫，但這同樣不是最終效果。最終效果由視覺設(shè)計(jì)師（或動(dòng)畫設(shè)計(jì)師）確定。

區(qū)分交互和視覺有一種快速判斷法，那就是web工程師平時(shí)寫的css里的屬性和參數(shù)，都屬于視覺設(shè)計(jì)的范疇。所以很多公司會(huì)多招幾個(gè)UI設(shè)計(jì)師，他們不僅僅負(fù)責(zé)視覺設(shè)計(jì)，還負(fù)責(zé)輸出css樣式表。

交互和視覺對(duì)人的要求

交互設(shè)計(jì)和視覺設(shè)計(jì)對(duì)人的要求不同，并且往往越往深入做，這兩者所需的性格、背景和思維方式差別越大?？梢院?jiǎn)單地理解，交互設(shè)計(jì)是靠理性和邏輯驅(qū)動(dòng)，而視覺設(shè)計(jì)是靠感性驅(qū)動(dòng)。這也是為什么目前的交互設(shè)計(jì)師中理工科院的學(xué)生占了很大比例。業(yè)界也有很多開發(fā)工程師轉(zhuǎn)做交互設(shè)計(jì)的成功案例。所以做開發(fā)，學(xué)交互設(shè)計(jì)有優(yōu)勢(shì)。

交互和視覺高度交叉

我上面說，交互設(shè)計(jì)和視覺設(shè)計(jì)的分工，也說它們對(duì)人的要求不同。這可能會(huì)讓大家誤以為，這兩個(gè)角色的工作比較獨(dú)立，各自負(fù)責(zé)各自的內(nèi)容。交互不用管視覺，視覺不用管交互。

但這是不對(duì)的。交互和視覺，是高度交叉的兩個(gè)領(lǐng)域，無法簡(jiǎn)單的分隔。

首先，交互設(shè)計(jì)師一定要有很好的視覺設(shè)計(jì)的感覺，因?yàn)橐粋€(gè)頁面布局的好壞，會(huì)直接影響視覺的發(fā)揮。如果交互設(shè)計(jì)師導(dǎo)入一個(gè)沒主次，結(jié)構(gòu)很糟糕的設(shè)計(jì)給視覺設(shè)計(jì)師，他只有兩個(gè)選擇，一、降低自己的水平，隨便做一個(gè)；二、自己動(dòng)手，重新設(shè)計(jì)一個(gè)。

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

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

說這些想要表達(dá)的是，我們要時(shí)刻注意，自己是在同視覺設(shè)計(jì)師配合完成一個(gè)作品。我們?cè)O(shè)計(jì)的好壞，會(huì)影響他的工作。所以在介入真實(shí)項(xiàng)目前，我們要通過大量的學(xué)習(xí)+練習(xí)，達(dá)到準(zhǔn)設(shè)計(jì)師水平。

如何學(xué)習(xí)交互設(shè)計(jì)

1.看

交互設(shè)計(jì)師需要有好的視覺設(shè)計(jì)的感覺，需要有基本的審美能力。如何提升審美能力？只有一種方法，看。

我們要看大量?jī)?yōu)秀的設(shè)計(jì)作品?，F(xiàn)在有很多平臺(tái)可以很容易的找到世界上頂尖的設(shè)計(jì)師們?cè)O(shè)計(jì)的東西。比如behance、pinterest、FWA、dribbble等等……如果嫌國(guó)外的訪問太慢，也可以選擇國(guó)內(nèi)的，比如花瓣。

不要只看軟件界面，也看看其它領(lǐng)域的設(shè)計(jì)作品，好的產(chǎn)品、好的建筑、好的電影海報(bào)、好的攝影作品、好的藝術(shù)作品?？吹较矚g的，把它們收集起來。

看了后，該怎么判斷自己的審美能力有提升呢？

隔幾個(gè)月去看看自己前幾個(gè)月喜歡的東西，當(dāng)時(shí)覺得不錯(cuò)，現(xiàn)在是不是覺得丑的掉渣？如果是的話，審美水平就在進(jìn)步。

還有一種辦法，把自己平時(shí)喜歡的、會(huì)分享的設(shè)計(jì)，同設(shè)計(jì)領(lǐng)域的人溝通，聽聽他們的意見。一個(gè)專業(yè)的設(shè)計(jì)師，不會(huì)只說，這個(gè)好，那個(gè)不好，他們說為什么好，為什么不好，比如「這個(gè)界面主次不夠突出，重點(diǎn)元素沒有強(qiáng)調(diào)出來」、「沒有引導(dǎo)用戶的視線」等等等等……

2.用

我們?cè)赿ribble、在花瓣，看的都是單個(gè)頁面。交互設(shè)計(jì)不只是設(shè)計(jì)一個(gè)個(gè)頁面，它還得把頁面串起來。所以看單個(gè)頁面還不行，我們要用、要體驗(yàn)實(shí)際的產(chǎn)品，看看別人是怎么把一個(gè)個(gè)頁面組合成產(chǎn)品，頁面和頁面間的過場(chǎng)是怎樣的。

怎么用呢？很簡(jiǎn)單，我們每個(gè)人都有手機(jī)或pad。去下載優(yōu)秀的APP，每個(gè)APP花20分鐘，把所有頁面、所有功能跑一遍。優(yōu)秀的APP來源，可以是應(yīng)用市場(chǎng)每個(gè)分類下的Top20，也可以來自一些優(yōu)秀的組織、用戶推薦，如最美應(yīng)用、如知乎上的APP推薦等。

我還有一個(gè)很誠(chéng)懇的建議。如果有條件的話，最好買個(gè)MAC。為什么設(shè)計(jì)師喜歡用MAC？我們看幾張對(duì)比圖。

PC和MAC上的QQ。

PC和MAC上的應(yīng)用市場(chǎng)。

PC上的「精美」PPT模板，和MAC上的keynote模板。

MAC的軟件比PC的軟件優(yōu)雅太多，完全不在一個(gè)level。如果我們每天看的、用的都是最好的產(chǎn)品，我們的審美能力自然會(huì)提升，對(duì)什么是好設(shè)計(jì)，什么是壞設(shè)計(jì)會(huì)更敏銳，更有感覺。

3. 想

認(rèn)知科學(xué)研究發(fā)現(xiàn)：

世界上最好的象棋選手之間的差距，其實(shí)并不是他們思考能力的差異，或者是否能走出一招妙棋，而是他們熟悉的棋譜的多寡。

做交互設(shè)計(jì)也是這樣，決定交互設(shè)計(jì)師的設(shè)計(jì)水平，是在做設(shè)計(jì)時(shí)，設(shè)計(jì)師能夠想起多少個(gè)相似的的設(shè)計(jì)，并借鑒、組合、改進(jìn)它們，成為自己的設(shè)計(jì)。

我們看了那么多優(yōu)秀的設(shè)計(jì)，我們用了那么多優(yōu)秀的產(chǎn)品，怎么樣才能在需要的時(shí)候記起它們呢？認(rèn)知科學(xué)給出的答案很簡(jiǎn)單，去想，去思考。

一樣?xùn)|西進(jìn)入我們的大腦，如果我們沒有思考過，大腦會(huì)認(rèn)為這個(gè)東西沒用，就丟掉它，不存下來。但如果我們仔細(xì)思考過它，大腦就會(huì)自己做個(gè)判斷，認(rèn)為以后有可能要再度想起它，就把它存下來。

所以不只要看，要用，還要想。

比如我們看到這個(gè)頁面，要想：

1.信息架構(gòu)是怎樣的？有沒有層級(jí)，有沒有邏輯順序？能不能反映它們的重要程度和關(guān)系？
2.頁面布局是怎樣的？它們位置、順序是怎樣的？它是怎么分塊的？它是怎么突出主要任務(wù)的？
3.有沒有其它設(shè)計(jì)亮點(diǎn)，比如好的隱喻，比如視覺怎么營(yíng)造氛圍。

把所有思考結(jié)果記錄下來。記得多了，形成自己的觀點(diǎn)后寫成文章，同其他人分享。

4. 做

一開始模仿，在這個(gè)過程中，學(xué)習(xí)工具的使用，把它用熟。

為什么要先把工具用熟呢？道理很簡(jiǎn)單，如果工具還不熟悉，大腦會(huì)把主要精力都耗費(fèi)在工具的使用上，根本騰不出空間來思考設(shè)計(jì)的事。

當(dāng)工具使用沒有任何問題后，做真實(shí)的產(chǎn)品設(shè)計(jì)。

我們可以直接在項(xiàng)目中實(shí)踐，但大部分人應(yīng)該沒這個(gè)條件，那怎么做？

重新設(shè)計(jì)現(xiàn)有的產(chǎn)品。比如我們可以重新設(shè)計(jì)微信，重新設(shè)計(jì)簡(jiǎn)書；我們覺得某個(gè)軟件設(shè)計(jì)的不夠好，重新設(shè)計(jì)它。通過這種訓(xùn)練方式，提升設(shè)計(jì)技能，達(dá)到準(zhǔn)設(shè)計(jì)師的水平。

那么，一個(gè)產(chǎn)品（或功能）的設(shè)計(jì)流程，是怎樣的呢？

1.明確使用場(chǎng)景

我們經(jīng)常看到一個(gè)被分解后的功能指標(biāo)項(xiàng)如下：

我要一個(gè)遠(yuǎn)程控制的功能。老師可以控制某個(gè)學(xué)生的電腦。

如果按照這個(gè)需求做的話，在產(chǎn)品首頁加一個(gè)遠(yuǎn)程控制的按鈕，點(diǎn)一下，老師可以選擇某個(gè)學(xué)生進(jìn)行控制，這個(gè)功能就設(shè)計(jì)好了。

但是實(shí)際上老師是怎么用的呢？我們和產(chǎn)品經(jīng)理（或用戶）溝通，會(huì)發(fā)現(xiàn)老師使用這個(gè)功能的場(chǎng)景是：

1.老師查看屏幕預(yù)覽圖，覺得某個(gè)學(xué)生可能做的不錯(cuò)，雙擊查看學(xué)生完整的屏幕。發(fā)現(xiàn)學(xué)生做的很好，就轉(zhuǎn)播給其他學(xué)生看，在這個(gè)過程中會(huì)協(xié)助學(xué)生微調(diào)作業(yè)。
2.學(xué)生有問題時(shí)，舉手請(qǐng)求老師協(xié)助，老師在講臺(tái)上協(xié)助解決問題，（并將這個(gè)協(xié)助過程廣播給其它同學(xué)。

這就是使用場(chǎng)景。場(chǎng)景非常非常重要。它決定了功能入口放在哪里比較合適，應(yīng)該突出它，還是弱化它。它的前一步是什么，下一步是什么。

只有明確了真實(shí)的使用場(chǎng)景，才能設(shè)計(jì)出用戶可用的產(chǎn)品。

2.收集素材

去前面提到的設(shè)計(jì)網(wǎng)站，或是平時(shí)用的軟件商找同類設(shè)計(jì)來對(duì)比和分析，看看其他人是怎么設(shè)計(jì)的。比如遠(yuǎn)程協(xié)助，可以看看QQ是怎么設(shè)計(jì)的。把它的整個(gè)流程跑幾遍，并且把每個(gè)過程截圖下來。借鑒它設(shè)計(jì)好的地方。

3.畫草圖

有了想法以后，在紙上畫草圖。

草圖里面，主要是把每個(gè)頁面都有哪些功能、元素，擺放順序定清楚。這個(gè)就是梳理我們?cè)O(shè)計(jì)思路的過程。

這個(gè)過程一定要有。千萬不要一上來就做原型，那會(huì)花很多時(shí)間在對(duì)齊、排版等等瑣碎的事情上，我們也沒辦法一下子看到全貌，把每個(gè)頁面都想清楚了，頁面流程怎么跳轉(zhuǎn)都想好了，再搬到Axure上。

4.畫低保真原型

把草圖搬到Axure上。這個(gè)過程還會(huì)調(diào)整，修改。

5.可用性測(cè)試，調(diào)整設(shè)計(jì)

做完動(dòng)態(tài)的、可交互的原型后，找三個(gè)用戶試用下（不一定要真實(shí)的最終用戶，另外，不用太多用戶，三個(gè)用戶就已經(jīng)能夠發(fā)現(xiàn)70%關(guān)鍵問題），觀察他們?cè)谑褂玫臅r(shí)候會(huì)碰到什么問題，找出最關(guān)鍵的問題，進(jìn)行調(diào)整。

這個(gè)階段完成后，就可以提交開發(fā)了。

6.補(bǔ)充細(xì)節(jié)設(shè)計(jì)

有一些很細(xì)節(jié)的流程，我們沒辦法在一個(gè)交互稿里面完全體現(xiàn)，比如頁面內(nèi)容為空時(shí)，怎么辦；數(shù)據(jù)加載出錯(cuò)時(shí)，怎么辦。這個(gè)時(shí)候用文檔來補(bǔ)充這些分支流程。我們就像寫開發(fā)文檔一樣，把整個(gè)軟件的所有分支流程、異常流程都過一遍，記下來，然后提交開發(fā)。文檔形式不重要，只要能傳遞思考結(jié)果就行。

以上只是一個(gè)大概的流程，在實(shí)際操做的時(shí)候，還會(huì)碰到很多問題。有一些東西我會(huì)在后面分享的時(shí)候再細(xì)講，還有一些東西，可能就需要大家實(shí)際動(dòng)手，自己去摸索和沉淀。

總結(jié)

看、用、想、做。

End

最后，我想說的是，我們掌握一個(gè)東西，要下很大的功夫，沒有捷徑可走。那些想要走捷徑的人，往往到最后會(huì)發(fā)現(xiàn)，繞了一大圈，卻什么也沒得到。只有那些腳踏實(shí)地一步步前行的人，才有機(jī)會(huì)走到自己想要到達(dá)的地方。