正文

交互設計怎么做（產品交互設計）

發(fā)布時間：2023-04-28 13:19:24 稿源：創(chuàng)意嶺閱讀： 1254

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于交互設計怎么做的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內優(yōu)秀企業(yè)，服務客戶遍布全國，設計相關業(yè)務請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、如何學會交互設計
2、交互產品設計開發(fā)流程那五步
3、交互設計基本知識整理
4、UI新手如何自學交互設計？

交互設計怎么做（產品交互設計）

一、如何學會交互設計

交互設計（英文Interaction Design, 縮寫IXD)，是定義、設計人造系統(tǒng)的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某種目的。交互設計努力去創(chuàng)造和建立的是人與產品及服務之間有意義的關系，以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統(tǒng)設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析，關注以人為本的用戶需求。

1. 看書?？磿词裁磿磕憧梢韵热タ础酒评O成碟—用戶體驗設計師之路】了解整個交互的工作流程是怎么樣的（前面已經說過）。然后看看【點石成金】【簡約至上】【用戶體驗要素】【設計師要懂的心理學】等等，先樹立起做交互基礎思維，千萬不要一開始去看【交互設計精髓】，里邊講的東西比較深奧你會看不懂的，看了還傷學習的沖勁。至今我還在研究【交互設計精髓】上所說的東西。

2. 玩app 。手上應當準備兩部不同平臺的手機，Android和ios，助你了解Android平臺和ios平臺設計規(guī)范的不同。你可以多下載一些蘋果商店推薦的app，各個類型的都下載幾個來玩玩，研究別人app上各個功能信息為什么要這樣構架。比如知乎上添加回答頁面中，為什么鍵盤頂上的那條欄要放置那幾個小功能？比如淘寶購物流程，為什么點擊提交訂單按鈕直接彈出支付密碼輸入框？一定要帶著腦子去看和玩app 。而且新手要經?？?，一有空就看就研究。主要研究：流程為什么這樣子設計、信息為什么這樣子架構、各個控件的交互樣式。

還有我推薦可以動手用ps臨摹電商的詳情頁，和列表頁布局，看看人家是怎么做的。臨摹的時候將頁面弄成黑白的。讓你更加容易了解別人如何做層級結構。

3. 學軟件。學習什么軟件？繪制原型的axure ；信息構架的xmind；流程圖繪制的Visio 。這些都是比較主流的交互工作中使用到的軟件，也不給你推薦那么多其他的，給你個唯一的你就不糾結到底選什么了。還有附加軟件: Photoshop 。你起碼要學會這四個才能在工作中使用軟件得心應手。

對了，你也可以用axure來畫流程圖，不過就是沒那么專業(yè)。

還有，學axure 一開始你可以不必那么深入，因為一般自主研發(fā)產品的公司不會讓出動態(tài)的原型圖，只會做出靜態(tài)的。靜態(tài)的方便程序，UI，產品去查看。等你可以上手項目之后，你再慢慢研究axure的動態(tài)使用吧（以防將來要出動態(tài)圖）。

4. 記住并了解清楚可用性十大原則，熟讀ios設計規(guī)范、Android設計規(guī)范。做完這件事之后才去實踐項目吧！

5. 試著做項目。準備得差不多了就要開始實踐了。實踐是檢驗真理的唯一標準。你在書上學到了多少東西就在你做的項目中體驗出來。你可以自己試著策劃一個小應用，自己提點小需求，然后自己試著把交互弄出來。弄出來后怎么辦？當然找大神指導啦，一定要厚著臉皮去，不要怕發(fā)打大神的傲氣高揚?；蛘吣阋部梢栽囍倪M某些產品中你發(fā)現的交互問題。反正就是要嘗試做項目，因為你將要用這些項目來進行接下來的交互實習面試。

5. 反復做項目并看書，總結自己的優(yōu)缺。做項目不能停。需要不斷地做項目，才能驗證你學到哪些東西。邊做項目邊看書。然后總結自己在項目中的優(yōu)缺。最后將自己認為做好的一個項目拿去面試。面試的項目不需要多，那一個精品就足夠了。

二、交互產品設計開發(fā)流程那五步

1、用戶研究

交互設計的初衷就是解決用戶的問題。不論設計什么產品，能夠被用戶認可的途徑只有這個產品解決了他們生活中的一個問題。交互設計的第一步，不論是對成熟產品還是初創(chuàng)產品都一樣，就是定義這個設計到底要解決用戶的什么問題，這一步可以說至關重要。

2、確定人物角色（Persona）并建模

如果第一步的用戶研究有所成功，這時你應該對你的用戶有所了解了。根據上面提到的五個方面，你需要挑揀出最典型的一個或幾個形象建模。例如逛知乎的人物角色可能有：比較普通的求知者、特定領域的專家、到處灌水的……

3、畫線框圖、制作原型

到了這里，你對你的交互方案已經有了一個很抽象的想法了，只需要把它具象化就可以了。這時候需要做的就是把流程圖以及線框圖畫出來，它可以幫你把產品的邏輯理順，同時也是跟PM以及程序員溝（si）通（bi）的利器，特別是對于比較復雜的產品來說，流程圖、線框圖顯得尤為重要。

4、測試評估

丨專業(yè)人士測試評估

原型完成后召集兩三個設計師或者對交互比較了解的人，使用并評測原型。你可以將原型所關注的幾個任務列出來，以免專家不知道原型哪部分可交互哪部分不可交互。

丨用戶測試評估

原型通過專家評測后，你可以找一些典型用戶使用原型。你可以把任務列給他們，讓他們自己嘗試完成任務。中間遇到的問題可以記錄下來，設計師通過觀察來進行評分。

5、改善設計，持續(xù)迭代

說到最后，交互設計的精髓不就是產品的迭代么，哪里沒做好改哪里。對于開發(fā)周期很長的產品，互聯網行業(yè)賦予設計師最大的自由度，就是隨時沒做好，咱就改唄~具體步驟就是酌情重復前面四步啦~

三、交互設計基本知識整理

交互設計：人與產品（系統(tǒng)/應用/服務等）互動交流溝通的過程設計；產品的輸入方式是否直觀、簡單、清晰、安全；產品的輸出方式在不同環(huán)境中的適應性、以人類和文化角度表述而易于被理解。

基本原則/標準

1、易用性易用性包括：易理解性、易學習性、易操作性。2、交互設計的目標劃分·讓用戶容易理解：層次清晰；功能區(qū)塊的劃分明確；區(qū)分可交互元素與不可交互元素；入口要明確，區(qū)分優(yōu)先級；·讓用戶操作簡單：符合常規(guī)的操作流程；符合平臺的交互特性；產品自身操作的一致性；及時反饋；更短的交互路徑；減少用戶記憶；減少輸入，幫助用戶做選擇；防錯&容錯（不可用置灰、格式限制、可撤銷）；

3、尼爾森十大可用性原則

1.狀態(tài)可見原則2.環(huán)境貼切原則3.撤銷重做原則4.一致性原則5.防錯原則6.易取原則7.靈活高效原則8.易掃原則9.容錯原則10.人性化幫助原則

4、諾曼的設計學三層次（《設計心理學》）與交互設計目標體驗目標/本能層次——想給用戶/用戶想要什么樣的感覺（激發(fā)情感、喚醒某種記憶、視覺/聽覺/嗅覺等的刺激帶來的情感最終目標/行為層次——用戶想做什么（使用產品的目的）人生目標/反思層次——用戶想要成為什么樣的人（品牌形象）

6、滿足不同的需求

用戶。產品，自我需求

7、用戶體驗相關設計原則減少用戶輸入/避免重復、過多的操作（減少頁面跳轉；重要信息前置-不需要點擊就可以看到；先露出一部分，點擊后展開，讓跳轉過程更加自然、順滑；）交互設計元素與非交互設計元素區(qū)分明顯防錯&容錯幫助用戶記憶適當引導、提供幫助交互路徑清晰、讓用戶知道自己所處的位置保持一致性文案清晰易懂直覺設計設計流程/方法

其它

1、反饋設計的重要性2、一些必要的關乎設計學的定律奧卡姆剃刀原則：如無必要，勿增實體。菲茲定律：到達目標的時間與移動距離成正比，與目標大小成反比。?？硕桑哼x擇越多，選擇時間越長。對于設計而言，可以幫助用戶選擇（默認選擇、不可選的情況置灰）、減少選項、或者將選項分類、區(qū)分權重、讓用戶分步選擇等。讓用戶一次面對的選項較少。特斯勒定律：復雜性守恒定律。產品的復雜性守恒不變，想要讓用戶在使用中變得簡單，需要將復雜性轉移給程序來處理，減少用戶的操作，提高輸入效率，讓人來做一些決策等簡單但是具有控制權的事情。美即好用效應：當產品足夠美觀、吸引人時，用戶可以容忍一些操作上的不方便。比較適合于文藝類、慢生活類的產品。不是故意做得難用，而是在設計決策時，可以為了美觀犧牲一些操作效率，如增大留白/顯示面積會讓瀏覽效率降低。多爾蒂門檻：系統(tǒng)/產品對于用戶的操作響應時間<400ms，才能讓用戶保持專注，提高沉浸感與效率。一方面對于動效設計而言，時間需要把控，不能過長。另一方面，對于網絡、設備性能等引起的等待時間過長，可以考慮使用過渡方式（過渡動畫、占位符）來減緩用戶的焦慮情緒。雅各布定律：操作方式與主流產品或者同類型方式保持一致，可以讓用戶更快上手。沒有更好的交互方式時，采用通用的方式會讓人更容易接受。簡潔法則：人的大腦會簡化、歸納、過濾外在的信息，方便簡單快速的理解外在的世界。鄰近原則&相似原則：距離接近/具有相似性特點的對象會被認為是一組。模塊內部、模塊之間的距離、樣式的一致/差異會區(qū)分不同的模塊。帕累托原則：二八定律。對于大多數事件，80%影響由20%的因素造成。帕金森定律：任何任務都會拖延，直到可用的時間都用完為止。同域原則：元素在一個具有明顯邊界的區(qū)域內，會被認為是一組的。類似卡片風格，卡片內的內容被認為是一組。米勒定律：短時記憶，人平均能記住7±2個項目。對于信息展示而言，一次展示的條目不宜過多。馮·雷斯托夫效應：當存在多個相似的對象時，與眾不同的那個容易被記住。對于設計而言，這也是“設計點”的所在。突出真正重要的內容。蔡格尼克記憶效應：人們對于未完成的任務的記憶比已完成的更深刻。對于任務的設計，需要同時關注已完成與未完成，促使、激勵人們去完成未完成的任務。3、交互設計五要素——

人、動作、工具或媒介、目的和場景構成交互設計的五要素

四、UI新手如何自學交互設計？

UI新手如何自學交互設計？經常有人問我新手如何自學交互設計，我之前也錄過一個視頻給大家，沒想到放到網上后點擊率很高，看來對新人是的確有幫助的。所以今天再次針對這個問題做闡述，修正了第一版的一些內容，也更具有針對性。

以下七點是我歸納的大家在學習和工作中經常感到困惑的問題，下面就逐一解答。

順便在此給大家分享一個學平面設計的網站“兔課網”，大家可以百度搜一下：兔課網，兔課網是一個專門學設計的網站，上面有很多的設計教程，還有一個魔鬼特訓班，魔鬼特訓班大家可以挑戰(zhàn)一下，很多人的學習效果都非常不錯！

一、令人眼花繚亂的專業(yè)術語

專業(yè)術語這個問題的確令人頭疼，來看看下面的對應關系：

在這四對關系中，GUI對應界面視覺（畫icon，畫視覺效果）、PM對應產品經理是比較準確的，但是UI這個詞相對來說就比較混亂了。有人認為UI是視覺設計，有人認為UI是交互設計，這是有一定的歷史原因的。在很多的大公司里，我指的是諸如騰訊、阿里、百度、谷歌這樣的巨頭，它們的UI分工是很明確的，指的就是交互設計，交互設計師的主要任務就是發(fā)掘需求以及根據需求來進行構架。但是在一些小公司里是沒有專門的交互設計的崗位的，UI設計師通常既要做交互也要做視覺，這就造成了UI的指向不是很明確。所以有時候很多同學找我說要學UI，我其實不太清楚他們到底是想學視覺還是交互的。

UE這個詞常見于一些大公司，它其實只是為了跟UI有區(qū)分，指的真的就是交互設計師。但是UE在做交互的同時也多參與一些用戶研究的內容，這樣的崗位一般只有規(guī)模比較大的公司才設置。在很多公司里，發(fā)展到后期你可能既是交互設計師也是產品經理，因為交互設計師和產品經理在前期的工作任務中，特別是對需求的把控上，有很多是重合的。這就是四個名詞所代表的意思了。

二、交互和視覺如何分工

下面我們再來看看視覺設計師和交互設計師工作職責的差異，下圖形象的展示了兩者不同的任務：

視覺設計主要包括Logo、界面元素、圖標（icon）、色彩與字體、形狀與尺寸以及視覺效果設計，它的關注點是“界面”，把界面更好地呈現出來。雖然我在視覺設計下方標注了“關注美麗”，但這只是區(qū)別于交互設計來說的，光是“美麗”是不夠的，還要注意信息的可讀性和易讀性。視覺設計與平面設計不同，比如說給一個房地產公司做宣傳海報，雇主要求海報視覺上打動人，文案也要有亮點吸引人，這是平面設計；但是GUI的話，不管是做手機的APP還是WEB也好TV也好，要考慮到每一條信息都是要給用戶讀取的，這就要求視覺要有穩(wěn)定性，不能有些易讀有些難讀。

作為交互設計師更關注的是“邏輯”，在做設計的時候實際上是在建立一種體系。也就是說在設計產品的時候要考慮出口入口、尋找需要元素、如何操作等等。所以說交互設計師前期需要進行需求分析，要更好地區(qū)理解和分析用戶的需求，然后要進行信息構架，畢竟需求最終要反映在信息構架上面。什么是信息構架呢？你看我們使用的手機，圖片有自己的固定位置，導航有自己固定的位置，文字、說明也有固定的位置，這些東西就是由信息構架來決定的。還要說明的是文案，這也是屬于交互設計范疇的，因為界面需要設計一些信息被用戶讀取。

所以說基本上交互是帶著視覺前進的，因為交互要對最終的體驗負責，而視覺也是體驗的一部分。

三、工作的流程

下面來談談不同的人員在具體工作中的分工：

先來看產品經理，產品經理要對項目的最終的結果負責。產品經理一般來說要為項目背黑鍋，比如老板要求三個月做出產品并且目標用戶達到十萬，那么這些任務就落到產品經理的身上。

然后產品經理對交互設計師的要求可能就是要保證產品的構架清晰，有良好的體驗。那么交互設計師要根據這些要求去挖掘其他的需求，然后根據用戶的反饋或者是迭代的一些東西做一個完美的信息構架，把信息先設計出來。哪塊放導航，哪塊放圖片，哪塊放主體內容，到底采用什么樣的結構，這些都是要考慮的。

交互設計進行到0.5版本時，即把產品的大體結構設計出來后，這時視覺設計師和開發(fā)人員就可以加入進來了。視覺設計師開始畫界面，根據信息把視覺呈現出來，比如重要的信息顏色可能更醒目一點，同時保證視覺流的平衡，總之為最終的“美麗”服務；開發(fā)人員的職責就是實現效果。進入1.0版本，視覺效果做好后做高保真的迭代呈現給用戶或上級等。這時候測試人員也要跟進了，做一些可用性測試、bug測試以及體驗測試。

我講的比較籠統(tǒng)，只是把大致的流程梳理一下，讓大家看到各個角色是怎么分配的，因為考慮到新人講得太細的話也不一定能夠明白。

四、視覺類UI的自學

視覺類UI我們稱之為GUI，從軟件篇來看的話，有些培訓機構是有點坑人的（這里就不點名了），因為大部分公司只要用PS就可以了，即精確地把圖片畫出來然后切圖。交互設計師一般用PTT和AXUR來做原型，這三款軟件基本上就可以覆蓋你的職業(yè)生涯了。但是很多培訓結構卻讓學員花費大量的金錢和時間學習軟件。剩下的一下軟件像AE/flash屬于錦上添花的技能：AE可以輸出高保真原型動畫，便于展示你的想法；flash可以做高保真的交互動畫。其實這些東西在企業(yè)里是有研發(fā)人員協(xié)助你完成的，所以會更好，不會也無大礙。IOS是有專門的軟件處理高保真原型的，可以現用現學，不太復雜。

所以總的來說還是要把PS練好。我特別想告誡新人的是：軟件和設計完全是兩回事，軟件用得熟練不代表設計做得好，它們只是實現設計的工具和手段。而設計的學習重在培養(yǎng)思維和視野。

下面簡單介紹一下視覺流行的三種風格：

這個是水晶風格，由微軟首創(chuàng)，現在中國的rigo design也是做的不錯的。水晶風格的特點是晶瑩、有玻璃質感和光感，rigo design已經把水晶風格做得很棒了，貼兩張圖看看：

下面來看擬物風格：

新手如果想快速學習的話可以嘗試臨摹擬物風格的作品，這個確實難度是比較大的。蘋果原來就是擬物風格的代表。來欣賞一些作品，畫得的確精致：

還有扁平化風格的設計：

以及中國風的設計：

中國風的東西盡量還是不要做了，這種風格其實只適合比賽。真實的項目里對icon識別度的要求是很高的，中國風的設計識別度太差了。對icon來說，美觀不是第一位的，識別度才是。

零基礎的新人我建議采用這樣的方法來提高自己的視覺設計能力：先臨摹一個icon，然后根據這個icon的風格設計其他的icon。臨摹考驗的是你對軟件的熟悉程度以及對細節(jié)捕捉的能力，而自己模仿設計才是真正提高設計能力的。這兩步認真走下來基本上可以勝任初級的視覺設計師了。

icon臨摹完之后可以嘗試畫一些界面，找找界面的感覺。特別是一些跨專業(yè)的新人，通過臨摹找設計感覺是比較好的方法。

五、交互設計需要掌握的知識

交互設計的自學是非常困難的，最好有人帶，有人點撥。這也是我們集創(chuàng)堂現在主要做的事情，帶一些有經驗的設計師提高交互設計的能力。如果想自學的話，一般來講需要培養(yǎng)一下三種能力：

心理學的能力有助于了解、定位用戶，讓你能更好地在產品的博弈中找準用戶的的需求，繼而發(fā)掘出更符合用戶內心的一種設計模式，所以心理學的知識作用還是很大的。

邏輯學的知識幫助設計師將找到的用戶需求構建出來，形成一種體系，讓產品更好用。做產品需求很強的邏輯性，哪些需求重要哪些不重要、點擊與功能如何對應、信息的隸屬關系都需要厘清。所以邏輯學知識重在構建，視覺設計的知識與最后產品能夠實現的效果相關。

這是三大能力各自起到的作用，優(yōu)秀的設計師必須要掌握。當然如果提出更高的要求的話，最好再關注一下商業(yè)的知識。

總的來說，交互設計的自學還是比較辛苦的，視覺設計通過臨摹等方法提高還是顯著的，但是交互設計還是需要人指點的。

六、今天設計什么

說句恐怖的話，目前90%的設計師是不合格的。我看到很多人在論壇、貼吧里討論的還是怎么設計界面之類的，這樣的關注點是不對的。關于UI的前途，我們可以看到今天的手機、PAD、電腦、智能手表等都是通過UI來控制的，UI成為人和今天的大數據信息的唯一接口，所以發(fā)展?jié)摿Ψ浅＞薮蟆?span style="display:none">zUH創(chuàng)意嶺 - 安心托付、值得信賴的品牌設計、營銷策劃公司

在未來，像無人拍攝飛機、家庭只能電器、大型工作輔助設備等都是通過UI控制的，UI依舊是人和數據的接口，UI設計的需求量巨大。我們之前的社會是人和人交往的社會，慢慢將過渡到人和數據的社會，實際上人和數據的接口就是UI。

很遺憾，我說過90%的設計師都不合格，他們的關注點依然是界面好不好看，即“美”的問題。今天來說，“信息”才是首位的，來看幾個例子：

來看今天我們用得很多的三款APP：微信、淘寶、58同城，如果單純從審美的角度來看，它們的設計并不完美，但實際上幾乎每個人都在使用它們。根本原因這些APP能夠提供我們需要的信息。

七、設計師的薪資

相信這個問題是大家比較感興趣的，我大致梳理一下不同薪資水平對設計師能力的要求。年6萬以下的設計師其實就是美工，工作多是畫畫cicon、改改圖片，基本只對視覺效果負責，這種類型的員工完全還沒有走進交互設計和信息設計的門檻；6萬-12萬年薪的我們稱之為初級交互設計師，初步具備了根據需求來進行構架的能力，參與分析競品、定位人群，同時也參與一些GUI的工作；12萬-24萬年薪的算是中級的UI設計師了，需要懂得在前期的時候挖掘用戶的需求，根據需求進行構架，有能力精細地把控產品（包括文案、顏色等）；20萬-40萬的屬于資深設計師，需要了解相關類型的競品，知道自己產品的特點和命門，能夠協(xié)調運營和研發(fā)資源，了解產品的商業(yè)目的，能夠很好地完成交互設計的布局等?？紤]的層次越多，完成產品的維度越高，薪資越高。再往上走的話，基本上就是管理崗位了，要全權負責一款產品，主要職責可能就是招聘人員、提升效率、制定規(guī)范之類的了，這個就不適合給新人講了。

以上就是關于交互設計怎么做相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內容。