1.6萬字誠意之作|如果你想成為一名交互設計師,這篇文章值得慢讀

52 評論 53868 瀏覽 854 收藏 66 分鐘

關于交互設計,這是一篇很全很全很全(重要事情要說三遍)的科普文章。作者寫了1.6萬字,實在是誠意之作。如果你打算走進交互,此文值得真的真的真的(重要事情要說三遍)值得一讀^_^ by 小編

目錄導讀:

1. 交互設計概念

2. 交互設計輸出物

3. 交互設計相關理論

4. 交互設計流程及方法

5. 交互設計常見案例分析

6. 交互設計規范及趨勢

7. 交互設計師進階之路

1. 交互設計概念

1.1 交互設計定義

(1)什么是交互設計?

這里比較傾向于優設網的回答:“你來我往”謂之”交互”;這里的”你來”指的是”輸入(input)”,”我往”是”反饋(feedback)或輸出(output)”。

交互可能存在于人與人之間,也可能存在于人于物之間。

(2)交互設計和視覺設計有什么區別?

交互設計傾向于用戶目標的實現,讓任務行為變得更簡單;視覺設計傾向于美化和外顯表達,讓產品變得更好看,兩者的側重點不同。

例如,微信搶紅包頁面,交互設計讓用戶更容易達成“搶紅包的目標”,只需點擊“拆紅包”即可以搶紅包,點擊后有反饋(要么搶到紅包,顯示搶到多少金額,其他人搶到多少金額;要么搶不到紅包,手慢了,搶光了。)視覺設計則讓界面像看起來像真實的紅包,中間的黃色按鈕更明顯,提示可以點擊。

(3)交互設計三要素是什么?

交互設計三要素是目標、任務、行為。所有的交互設計都是圍繞完成用戶的目標進行服務的,不能順利完成用戶目標的交互,都是沒有意義的。

怎么理解這三要素的區別?

舉個例子就是:小明餓了,他需要填飽肚子(目標),他跑到樓下的餐館進行點餐、吃飯、結賬(任務),吃完了出門的時候推門(行為)出去,然后過馬路回家。

1.2 認識交互設計師

(1)什么是交互設計師?

交互指的是產品與它的使用者之間的互動過程,而交互設計師則是秉承以用戶為中心的設計理念,以用戶體驗度為原則,對交互過程進行研究并開展設計的工作人員?!俣劝倏?/p>

(2)交互設計師與產品經理、視覺設計師有什么區別和聯系?

一般的公司很少設有交互設計師的職位,交互設計的功能一般由產品經理或者視覺設計師兼任,所以很多人都認為,產品經理能干交互設計師的活,但是產品經理干的活交互設計師干不了,這種理解是帶有偏見的,因為很多人錯誤把交互設計師理解為畫流程圖或者原型圖的職位。

它們三者的職位有本質的區別,產品經理更關注產品的業務方向、產品規劃、生命周期等大方向,而交互設計師更著重與讓用戶使用產品時更好的完成目標任務,并且在過程中得到情感上的滿足,最后,視覺設計師更關注產品的外在表達。交互設計師在產品團隊中處于中游的位置,上游為產品經理,下游需要對接視覺設計師,所以大家之間的理解和溝通十分重要。

(3)交互設計師的職業發展路徑如何?

首先,任何職位都有高低能力的區別,能力就會體驗為職位、待遇的不同,所以交互設計師較為簡單的職業發展路徑為:

①初級交互設計師<10k:俗稱「線框仔」,出沒于小公司和外包公司,沒有設計決策權,專門配給不會畫圖的產品經理使用。門檻低,只需要熟練使用原型軟件,會看著其它APP抄設計即可。無發展前途,看到此類崗位請遠離。

②中級交互設計師10k-15k:除了畫線框圖外參與一定的產品層面的工作,有一定設計決策權,通常為知名院校應屆畢業生,可以對設計決策提出異議,但不一定被接受。

③高級交互設計師15k-25k:通??梢詤⑴c整個產品的概念過程,工作職能與產品經理更為接近,有更多的設計決策權,通常工作經驗超過2年,可以和產品經理、視覺設計師、用戶研究員及開發人員進行「激烈討論」,并有能力維護設計師的尊嚴。

④資深交互設計師>25k:通常出沒于BAT、財大氣粗的創業公司及設計咨詢公司。有著豐富的成功設計案例,通常工作經驗超過5年,有主流大公司工作經驗,有大型項目的設計管理經驗,業內有一定名氣。

——以上分級,參考寺主人在知乎的回答《如何成為交互設計師?》

上面的發展路徑屬于職業的縱向發展,當然交互設計師也可以橫向發展,例如,轉產品經理,但產品經理同樣有高低能力差異,并不代表你本身是高級交互設計師,轉到產品經理就是高級產品經理。對于當前產品職位入門門檻越來越低,細分能力要求越來越高的情況下,建議交互設計師選擇縱向的反正方向,并且深耕一個行業領域。

1.3 交互設計師需要具備哪些素質?

這是一個交互設計師面試必考題,它能反應我們對交互設計師的崗位的理解,并且檢測你是否適合成為一名交互設計師。其實,這些素質都是可以通過后天訓練而成,如果想要成為一名交互設計師,可以從這些方面進行刻意訓練。

(1)全局觀

交互設計師需要全程參與產品的討論,與產品團隊的人員達成共識,我們的交互設計水平達到所有人的認可;另一個方面,我們要對產品的全局了如指掌,產品的現狀特性,產品的目標,產品的設計流程等。

(2)關鍵思考能力

如果有看過NBA的人都應該知道,關鍵球,都是掌握在關鍵角色手里,同樣,產品的具象化,同樣掌握在交互設計師手里。交互設計師作為中游職位,會面臨來自上游產品經理的挑戰,同樣會面臨下游視覺設計師、開發人員的挑戰。所以關鍵思考能力就變得尤為重要。

關鍵思考能力體現在兩個方面:一方面是我們的設計是經過深入的思考,并且經得起考驗,要深入到業務邏輯和商業價值進行思考,而不是停留在產品功能設計表面,同時,在用戶體驗和開發成本之間達到一種平衡,這樣我們才能在設計評審上能堅定自己的立場;另一個方面,作為“設計師”,永遠別想著一套方案就可以解決所有的問題,要有備胎方案為關鍵時刻做準備,正如NBA關鍵先生被防死了之后,還有planB。

(3)細節

2016年、2017年的交互設計趨勢中都有提及,交互會更比拼細節,設計稿不能馬虎了事,一個流程細節,一個字段,甚至是像素上的差異,都有可能造成嚴重的后果。注重細節習慣的養成,交互設計師才能對產品負責,對其他同事負責,對用戶負責。

(4)審美能力

相當一部分交互設計師,在畫原型的時候,為了追求速度,都會東拼西湊地組成一個原型,導致視覺設計師或者開發的同事都很難看懂原型,更不用說,需要模擬出真實的產品是什么樣子。所以,交互設計師還必須懂得審美,在頁面具體化的時候就知道最后的頁面是大概什么樣子,否則,視覺設計師重新把我們的設計稿改一遍,改成了最終產品上線的樣子,我們畫原型還有什么意義?

另外一點,擁有審美能力的交互設計師,他流程圖、原型、交互說明文檔等交互設計輸出物,必然是美輪美奐的,從外觀看起來就是高質量的東西,給其他團隊同事一種更好的閱讀感受,大大提高工作效率。

(5)同理心

同理心,我們更多知道的是產品經理要有同理心,要站在用戶的角度去思考問題,這個產品的需求是否滿足用戶的需求?用戶用得爽不爽?同樣,交互設計師也需要同理心,明確用戶的目標是什么,讓用戶使用產品的時候不要做多余的操作,更好的完成目標。

對于交互設計師來說,同理心不光是針對用戶,也針對所在產品團隊。一個交互設計的產出,都有視覺設計師或者開發團隊工作量在里面,所以從交互設計的崗位來看,要懂得換位思考,珍惜開發工程師和設計設計師的勞作成果,不做高成本低產出的需求,懂得拒絕業務方不合理的需求。

(6)創新能力

資深交互設計師和普通設計師之間的差異在于創新能力的差異,資深交互設計師總能在設計中找到可以創新的點,把它改進,并能大大提高產品的受歡迎程度(轉化率、留存率)。不要臨摹別人的產品,需要時刻保持創新的精神,我們可以做得更好。

(7)邏輯思考能力

把邏輯思考能力放到最后來講,并不意味著它不重要,相反,邏輯思考能力是最基礎需要具備的能力。其實,不光是交互設計師,放在任何一個職位都是一樣的,邏輯思考能力強的人,適應一個崗位更快,思考比別人更深遠,工作效率比別人更高。

1.4 交互設計師的職責是什么?

了解交互設計師職責的最快方法是招聘網站,我們先來看看3個公司對交互設計師的職責要求。

唯品會(高級/資深交互設計師)

  1. 負責唯品會移動端及相關延伸產品的交互設計,參與產品的整體設計規劃;
  2. 分析業務需求,執行具體的交互設計,并推進設計落地與驗證;
  3. 對現有產品的進行可用性測試和評估,提出改進方案,持續優化產品的用戶體驗。

阿里巴巴(高級交互設計師)

  1. 負責國際應用發行產品的功能需求優化、產品流程梳理、交互設計等工作;
  2. 與產品、運營團隊合作,分析業務需求,歸納及設計產品交互頁面,優化用戶體驗流程。

網易(高級交互設計師)

  1. 參與公司的郵箱系統或相關產品的規劃構思和創意過程;
  2. 與產品人員溝通,分析業務需求,并加以分解,歸納產品人機交互界面需求;
  3. 設計產品人機交互界面結構、用戶操作流程等;
  4. 與視覺設計師密切配合,產生美觀易理解的界面;
  5. 跟蹤產品開發流程并推動落實,制定并輸出相關設計規范;
  6. 優化產品可用性,不斷地改善用戶體驗;
  7. 宣傳和推廣”以用戶為中心”的設計理念;
  8. 參與部門內外的用戶體驗概念和流程的普及工作。

所以,基本上是大同小異,我們總結一下職責要求就是:

  1. 參與產品的整體設計規劃,輸出交互設計產出物,推動產品的落地實現;
  2. 對產品進行持續性的設計優化,輸出相關設計規范,提升用戶體驗;
  3. 協調和推動“已用戶為中心”的設計理念,在公司范圍普及用戶體驗概念和流程;
  4. 負責設計前瞻性的研究工作。

所以,不要再以為交互設計師只是畫原型的線框仔了,我們如果想要成為交互設計師,就要明確交互設計師的職責所在。

1.5 交互設計師有什么專業背景要求?

雖然說人人都能成為交互設計師,但是專業科班出身的同學,無意是企業最先青睞的對象。以下這些專業是最貼合的:

(1)交互設計

(2)藝術設計

(3)工業設計

(4)心理學

1.6 交互設計師需要哪些知識體系?

本段內容可以參考文章《騰訊高級交互設計師:什么是優秀的設計思維與方法?》總結得比較到位。

(1)商業(幫助尋找切入角度和決策)

所有設計都是為商業而服務的,沒有產生利潤的設計都是毫無意義的,即使是早年鼓吹“免費”的360衛士,同樣也反思免費的模式已經走不通。互聯網的發展趨勢、產品的商業模式、所在的行業知識、當前的政策背景、新技術的發展趨勢,這些都是需要首先了解的,這樣才能設計出有價值的好的產品。

(2)思辨(提高邏輯分析能力和解讀視角)

如果有讀過《交互設計沉思錄》一書的人,應該知道,設計方法無非就可以分為兩種:感性設計,設計只是靈光一閃;理性設計,通過設計方法論或者大量用戶驗證來進行設計。對于大多數交互設計師來說,理性設計應優于感性設計,這就需要交互設計師去訓練自己的思辨能力。這個設計好在哪里?不好在哪里?我能做到哪方面的改進?

(3)設計(設計思維和設計表達)

說白了就是看設計的專業書,深入學習設計知識。例如《用戶體驗五要素》、《交互設計四策略》、《交互設計沉思錄》、《認知與設計》等等。

(4)人性(對人性和社會的理解)

如果說中級交互設計師與高級設計師的差距在哪里,那么對人性的理解是其中的一個重大的差距。交互設計基本是以用戶為中心的設計,如果對人性的了解更深入,設計水平同樣會突飛猛進。

看看這些經典的心理學書籍吧,《心理學與生活》會告訴我們人的知覺組織是如何對分組起作用的——格式塔原理;《社會心理學》告訴我們好評如何影響人的購買行為——從眾心理;《設計師要懂心理學》則告訴我們用戶認知會比視覺耗費更多的腦力資源——人如何思考。

(5)藝術(提高審美能力)

提高審美能力就不用多說了,可以大致去學習一下視覺設計的知識,例如最基本的柵格理論、色彩原理(色調、飽和度和明度);同時,可以關注一下時尚雜志、家具設計等,能顯著提高自己的審美能力。另外,每個設計師最好都規劃好自己的作品集,把作品集做得漂漂亮亮也是一種審美的提高過程。

(6)技能(創新工具的使用)

很多入門的新人應該都會聽過一句話:Axure只是最基本的工具,交互設計并不是Axure畫原型那么簡單。這句話是對的,但是同時也是錯誤的,所謂的錯誤就是,交互設計師的設計落地都要通過工具進行表達,工具就是技能。如同Photoshop成為視覺設計師的代名詞一樣,交互設計師同樣也需要有技能傍身——Mindnode Pro、Axure、Visio等等。

此外,交互設計師不能滿足于用一種工具去表達,這就需要交互設計師挖掘學習更多的技能,例如模擬真實的動效,讓開發工程師更好的理解,讓交互設計讓用戶用起來更愉悅。

1.7 交互設計師常用的工具有哪些?

(1)思維導圖

Mindnode Pro、xmind等,常用思維導圖,會讓你的設計靈感得到合理的釋放,最好的移動端也能用的思維導圖,所有的靈感都是一瞬間,我們可以用手機隨時隨地記錄靈感。

(2)流程圖

Visio,或者在線的流程圖工具ProcessOn。畫好流程圖,并不比畫原型圖更容易,對于開發工程師來說,流程圖比原型圖更重要。

(3)線框圖

Axure,看個人喜好或者團隊協助要求,至少會一種,建議學習Axure,對于大多數公司都適用。

(4)視覺設計/界面設計

Sketch,交互設計師如果本身沒有Photoshop基礎的話,不建議學習Photoshop進行界面設計,Sketch入門簡單, Symbol復用、切圖簡單的特性會讓交互設計師愛上它的,唯一的缺點就是,它只能運行在mac上面。

(5)交互說明文檔

Word、PPT甚至Axure等,隨意選擇,但是要注意一點,一定是可以生成目錄進行索引的,修改更新方便的。

2. 交互設計輸出物

2.1 設計思考

(1)設計目標

在項目一開始時,交互設計師就必須參與其中,切記,切記,切記,重要的事情說三遍!不然最終只能淪為畫原型的工具,設計方案也容易偏離目標。交互設計師參與項目時,必須搞清楚下面三件事情:

  1. 我們的業務訴求是什么?
  2. 我們的產品方向是什么?
  3. 用戶希望用產品達成什么樣的目標?

把這三者歸納起來,形成我們的設計目標,最終得出設計方案。前面的步驟一般都會醞釀在設計師的腦海中,很少有設計師會通過書面去表達出來,或者設計師認為根本不必要去表達。但是,如果設計師可以把這部分思考過程放進交互設計輸出物當中,就會讓設計變得更加透明,在設計提案時更有說服力,同時,也記錄當時的設計思考過程,便于日后追溯修正。

(2)用戶

這個需求針對的目標用戶群有哪些?了解用戶才能更好地對用戶想要達成的目標進行,一般可以三個方面對用戶進行了解。

  1. 用戶目標:用戶希望用產品達成何種目標,例如用戶能用訂餐APP吃飽飯。
  2. 用戶特征:包括生理特征(年齡、性別),社會特征(收入、學歷),了解用戶的特征可以使產品設計更貼合用戶,例如針對老人的手機,字體會設計得更大,這樣方便老人閱讀;針對兒童的產品,首先要考慮安全性,鋒利、細小的物品是嚴禁使用的。
  3. 用戶權限:常見于后臺產品設計,搞清楚用戶角色所擁有的不同菜單權限、數據權限。例如總部人員能看到所有分公司的數據,而分公司人員只能看到所屬分公司的數據。

(3)場景

場景的作用是解決什么人在什么情景下會使用到產品或者功能的問題,我們瀏覽一個網頁,下拉后會出現回到頂部按鈕,這就是一個比較經典的場景?;趫鼍斑M行設計,可以從如下三個因素進行考慮,見《阿里設計師分享設計方法:如何基于場景做設計?》一文,對場景化的介紹和應用闡述得比較詳細。

  1. 時間因素:考慮用戶在什么時候會使用該產品,是工作的時候,上班的路上,與情人約會的時候,睡覺前,朋友聚會,還是鍛煉的時候。例如,微信的勿擾模式,開啟后,可以指定某時間段內不會收到消息推送。
  2. 地點因素:考慮用戶在什么地點會使用該產品。在家,在學校,在辦公室,公交車上,打的的時候,地鐵里還是飯館里。例如,在戶外陽光直射后,手機屏幕會自動調整亮度,以便用戶能更好的看清屏幕內容。
  3. 人物因素:考慮使用該產品的人群會有怎樣的特征,通過數據的積累勾勒用戶的標簽,達到千人千面的個性化服務。例如電商常用的推薦商品模塊“猜你喜歡”,都是根據用戶的喜好推薦相應的產品。

2.2 主要交互產物

(1)信息架構

設計web、APP產品,經常要進行信息架構設計,復雜的信息架構,對交互設計師的業務理解能力、產品的全局把控能力、用戶場景的設定提出更高的要求。在描繪信息架構圖時,不僅要輸出架構層級,而且要清晰注明他們之間的相互關系。

(2)流程圖

流程圖(Flow Chart),是流經一個系統的信息流、觀點流或部件流的圖形代表,簡單來說就是把一個流程用圖形化來表達出來,方便他人了解。交互輸出物中常見的流程圖是任務流程圖以及頁面流程圖。

1)任務流程圖

任務流程圖可以直接展示一個或者多個角色從一開始到結束的所有任務流程步驟,以及與各角色之間、各系統之間、各頁面之間的關聯。做任務流程圖輸出物的時候,不僅要交付流程圖,還要交付針對流程圖的必要說明,例如流程說明,圖例說明,讓閱讀對象能“讀懂”流程圖。

2)頁面流程圖

頁面流程圖可以清晰表達用戶在使用產品過程中的頁面間上下游關系及跳轉頁面邏輯,同時也幫助設計師梳理產品整體頁面層級,通常作為中大型項目輸出物產出。(PS:利用axure自帶生成流程圖的功能,可以很方便生成頁面流程)

3)異常流程

異常流程通常是流程圖輸出物中忽略的一個點,異常流程可以不用畫流程圖,但是需要注明異常流程的處理方法。針對項目的不同,異常流程也復雜多樣,下面是部分舉例:

  1. 用戶網速緩慢、超時、甚至無網狀態時,流程上如何引導用戶正確地返回、自動保存已輸入信息或檢查網絡環境?
  2. 服務器無反應時,如何引導用戶進行下一步操作?
  3. 頁面加載為空白內容時,如果引導用戶重新嘗試或者放棄等待?
  4. 上傳過程中網絡中斷,是否提示用戶檢查網絡環境,重新進行上傳?

(3)線框圖

線框圖是交互設計師的主要交互輸出物,主要以黑白的字體、控件和塊填滿整個頁面,線框圖一般不追求華麗的表達,但要滿足以下要求:

  1. 能體現界面的大體結構和布局
  2. 表達內容的模塊位置擺放合理
  3. 能展示界面的主要交互元素,例如按鈕,鏈接跳轉,輸入框等元素

  • 常見輸出物問題:交互設計師是否需要輸出高保真的原型?
  • :視項目需求和交互設計師個人時間效率,一般不太建議輸出高保真的原型,因為制作成本和維護成本都很高,除非制作、維護高保真原型的效率能抵消這種成本。

(4)交互說明文檔

交互說明文檔又可以稱為交互注釋,圖例展示和文字注釋是主要的手段,交互注釋應包括如下的內容:

  1. 鏈接指向:點擊XX跳轉到哪個頁面?是在當前頁面打開、新窗口打開還是彈框呈現?
  2. 內容展示
  3. 內容輸入
  4. 交互樣式
  5. 特殊狀態
  6. 動效說明
  7. 手勢說明
  8. 提示文案

2.3 項目管理

交互設計師的項目管理跟傳統意義的項目管理不一致,交互設計師的項目管理主要是為了溝通上下游,確保項目按照設計目標進行推進,項目管理主要包括如下內容:

(1)業務/產品的原始需求

記錄項目的原始業務/產品需求,對照項目實施是否和預期需求偏差

(2)項目評估

項目開始前的可能性評估,包括項目實施周期,項目實施難度,可能性的潛在風險評估

(3)大致進度計劃

和產品經理、項目經理溝通,落實項目大體的進度計劃,確保項目如期交付

(4)評審記錄

每一次交互設計評審,都應有記錄,主要記錄實施細節和優化點

2.4 設計發現

設計發現,是指為交互設計服務的輸出物,交互設計師也需要競品分析,必須要時需要協助用戶研究的同時開展用戶研究工作。

(1)競品分析

競品分析有多種方法,有簡單的功能對比法、SWOT法、用戶體驗要素法等等。

例如,可參照經典的《用戶體驗要素》一書,可以下面幾個維度進行切入:

  1. 戰略層(產品定位、用戶需求)
  2. 范圍層(主要功能)
  3. 結構層(信息架構)
  4. 框架層(交互設計)
  5. 表現層(視覺設計)

另外,可以增加運營推廣、商業模式等維度。

(2)用戶研究

推薦交互設計師必須掌握和輸出的一項產品,或者協助用戶研究人員輸出的產物,通過用戶研究,不僅可以挖掘可能性的需求,還可以驗證交互設計方案。

2.5 設計資源庫

設計資源庫一般指工具的元件庫,例如Axure的元件庫,Sketch的組件庫,交互設計師產出設計資源庫,能讓后續交互設計快速地復用樣式,后續的交互設計師能快速上手;同時也可以統一項目的交互設計規范,注意,網絡上分享的元件庫東拼西湊并不能很好地規范項目。

一般建議產出兩套組件庫,一套為Axure的,一套為Sketch的(僅針對mac用戶)。Sketch的組件庫可以參考《微信小程序的組件庫》。

3. 交互設計相關理論

3.1 需求理論

(1)需求挖掘

需求挖掘是產品從業人員經常需要面臨的難題,交互設計涉及的需求挖掘,與產品經理同理,可以采用同樣的方式和方法,按照挖掘的對象不同,我們可以分為外部挖掘和內部挖掘兩種。

1)內部挖掘

針對公司內部,常見理論是:頭腦風暴。即組織群體決策,交互設計師以明確的目標方式組織大家參加會議,自由發言,讓大家提出更多的可能性問題或者方案。

此外,內部挖掘的需求還可能來源于:業務需求、運營反饋、產品經理

2)外部挖掘

針對外部用戶,或者是產品的真正使用者。常見理論是:用戶研究。用戶研究是用戶中心的設計流程中的第一步。它是一種理解用戶,將他們的目標、需求與您的商業宗旨相匹配的理想方法。用戶研究重點工作在于研究用戶的痛點。

用戶研究常見的方法有:可用性測試、焦點小組、問卷調查、A/B測試等,每一個方法都可以深入展開,有興趣可以深入了解一下,此篇章不展開詳述。

另外,外部挖掘的需求還可能來源于:競品分析、行業分析、社交平臺。

(2)需求分級

需求分級是指挖掘完需求后,對需求進行合理的分解,去除偽需求,實現那些真正對產品或者設計目標有幫助的需求。常見理論有以下三種:

1)通用四象限法

適用場景:交互設計師收到很多需求時。

四象限最早是用于時間管理的方法,目的是解決時間不足,但是需要完成的事情又很多的情況。該方法理論同樣適用于需求分級,幫助交互設計師進行需求管理。方法是將需求劃分到4個象限當中,按照落在各個象限的處理方式進行處理。

①重要且緊急的需求:立即搞定

例如,微信的搶紅包功能需求,需要在春節前上線(緊急),關乎到微信的戰略定位(重要)。

②重要但不緊急的需求:排期實現

例如,產品的運營統計需求,能幫助分析產品的運營情況(重要),但其他功能都優先于統計前實現(不緊急)。

③不重要但緊急的需求:需要考慮

例如,剛開會老板說了,這個按鈕的顏色不好看(不重要),想今天調一下(緊急)。

④不重要且不緊急:不用實現

例如,產品能否增加一個國際版本,方便我們這些歪果仁(不重要,不緊急)。

2)kano模型

適用場景:收集到的需求當中,哪些需求能顯著提升用戶的滿意度?

KANO 模型是東京理工大學教授狩野紀昭(Noriaki Kano)發明的對用戶需求分類和優先排序的有用工具,以分析用戶需求對用戶滿意的影響為基礎,體現了產品性能和用戶滿意之間的非線性關系。

①必須具備的(Must-have)

例如,一款美顏工具產品,拍照是必須具備的基本功能。

②所期望的(Linear)

例如,一款美顏工具產品,使自己變得更漂亮——美顏,是用戶比較明確“提出”的,否則為什么要下載使用。

③超出預期的(Exciter)

例如,一款美顏工具產品,居然可以一鍵美顏,自動幫你P成大眼、小臉、巨乳、蜂腰的大長腿女神,遠超預期。

3)馬斯洛需求層次理論

適用場景:需求實現的價值有多大?

該理論是由美國心理學家亞伯拉罕·馬斯洛在1943年在《人類激勵理論》論文中提出,人類需求像階梯一樣從低到高按層次分為五種,分別是:生理需求、安全需求、社交需求、尊重需求和自我實現需求。

①生理需求

最基本的生存需求,例如,利用產品能最基本的生存需求:點外賣。

②安全需求

人身財產安全有保障,例如,在線支付安全。

③社交/情感需求

例如,給最愛的人買一份保險,滿足情感上的需求。

④尊重需求

產品給予用戶帶來的成就感,常見例子是游戲升級。

⑤自我實現需求

用戶通過產品實現了人生追求,例如,利用股票軟件賺取了第一桶金。

注意:位于金字塔頂端的需求,能使利潤最大化。

3.2 框架設計理論

(1)用戶體驗五要素

適用場景:采用五要素的方法,從不同層次指導產品的框架設計。

來源經典的著作《用戶體驗的要素?-以用戶為中心的Web設計》,用五個要素:戰略層、范圍層、結構層、框架層、表現層來闡述以用戶為中心的設計方法。

  1. 戰略層:產品目標及其目標用戶(做什么、為誰而做?)經營者和用戶分別想從網站得到什么。
  2. 范圍層:功能及其內容需求整合(需要做哪些?)
  3. 結構層:交互設計及其信息架構(怎樣做?)
  4. 框架層:界面設計、導航設計和內容(信息)設計(要做成什么樣子?)
  5. 表現層:功能及內容的視覺呈現(做成了什么樣子?)

(2)神奇7±2

適用場景:規范導航或者選項卡的數量,例如,我們網站的菜單最佳數量是多少個?

人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后人類的頭腦就開始出錯。

假如你的短時記憶像一般人那樣,你可能會回憶出5~9個單位,即7±2個,這個有趣的現象就是神奇的7±2效應。這個規律最早是在19世紀中葉,由愛爾蘭哲學家威廉漢密爾頓觀察到的。他發現,如果將一把子彈撒在地板上,人們很難一下子觀察到超過7顆子彈。

7±2法則對我們設計上的啟示:

  • 導航或選項卡盡量不要超過9個
  • 如果導航或選項卡內容很多,可以用一個層級結構來展示各段及其子段,并注意其深廣度的平衡

(3)卡片分類法

適用場景:為我們設計導航、菜單以及分類提供幫助,例如,銀行APP轉賬和查詢余額兩個功能是否放在一起?資金歸集呢?

卡片分類法是一種規劃和設計互聯網產品或者軟件產品的信息構架的方法。它屬于用戶研究中的一種方法,簡單來說就是用戶來對信息卡片(或者是菜單卡片)進行歸類,從而得出信息關聯性的一種方法。我們最后把關聯性更強的菜單放在一起,就形成了較為科學的一套信息分組。

3.3 界面設計理論

(1)格式塔心理學

適用場景:界面設計時,選擇有容易理解的形狀,把相關聯的元素組織在一起。

人在觀察和理解時,被視為有組織和結構的整體時才可以得到理解。簡單來說就是人們首先會注意到一個有整齊、規律的整體,或者說,人們會自動把所見的事物在人腦中加工為一個整體。

格式塔理論創始人提出的5項基本法則:

(2)交互設計四策略

適用場景:界面設計元素組織

出自《簡約至上-交互設計四策略》一書,四策略分別為:刪除、組織、隱藏、轉移,幾乎任何界面設計都適用這四個策略。

1)刪除-去掉不必要的的按鈕,直至減到不能再減。

例如iPhone只有一個home鍵,其他按鍵都刪除了。

2)組織-按照有意義的標準把按鈕劃分成組。

例如,手機設置中,把同類的設置都歸在同一個組別。

3)隱藏-把那些不重要的功能隱藏,避免分散用戶的注意力。

例如,微信聊天界面,刪除、置頂等功能都隱藏起來,需要左滑或者長按才會出現。

4)轉移-只在主要界面/設備保留最基本功能,將其他控制轉移到其他界面/設備/用戶里。

例如,行程定制,計算機無法為每個不同喜好的用戶提供個性化的行程,所以只提供編輯行程功能,剩余的控制轉移到用戶上。

(3)尼爾森可用性十大原則

適用場景:產品設計與用戶體驗設計的重要參考指標。

尼爾森可用性十大原則是由web易用性大師人機交互學博士Jakob Nielsen于1995年提出的,主要有十大原則。

1)Visibility of system status 系統可見性原則

系統應該讓用戶知道發生了什么,在適當的時間內做出適當的反饋。 大多數流通的翻譯是針對網頁的:用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。

2)Match between system and the real world 匹配系統與真實世界(環境貼切)

系統應該用用戶的語言,用詞,短語和用戶熟悉的概念,而不是系統術語。遵循現實世界的慣例,讓信息符合自然思考邏輯。

3)User control and freedom用戶的控制性和自由度(撤銷重作原則)

用戶經常錯誤地選擇系統功能而且需要明確標識離開這個的“出口”,而不需要通過一個擴展的對話框。為了避免用戶的誤用和誤擊,要支持撤銷和重做的功能。

4)Consistency and standards一致性和標準化(一致性原則)

用戶不必懷疑是否不同的語言,不同的情景,或者不同的操作產生的結果實際上是同一件事情。遵循平臺的慣例。也就是,同一用語、功能、操作保持一致。

5)Error prevention 防錯原則

比出現錯誤信息提示更好的是更用心的設計防止這類問題發生。在用戶選擇動作發生之前,就要防止用戶容易混淆或者錯誤的選擇。

6)Recognition rather than recall 識別比記憶好(易取原則)

盡量減少用戶對操作目標的記憶負荷,動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。

7)Flexibility and efficiency of use使用的靈活高效(靈活高效原則)

系統可以滿足有經驗和無經驗的用戶。 允許用戶進行頻繁的操作。

8)Aesthetic and minimalist design 審美和簡約的設計(易掃原則)

對話中不應該包含無關緊要的信息。在段落中每增加一個單位的重要信息,就意味著要減少相應的弱化一些其他信息?;ヂ摼W用戶瀏覽網頁的動作不是讀,不是看,而是掃。易掃,意味著突出重點,弱化和剔除無關信息。

9)Help users recognize, diagnose, and recover from errors 幫助用戶識別,診斷,并從錯誤中恢復(容錯原則)

錯誤信息應該用語言表達(不要用代碼),較準確地反應問題所在,并且提出一個建設性的解決方案。

10)Help and documentation? 幫助文檔(人性化幫助原則)

如果系統不使用文檔是最好的,但是有必要提供幫助和文檔

(4)費茨定律

  • 適用場景:菜單的設計,可點擊對象的尺寸設計
  • 定律內容:從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定,到目標的距離和目標的大?。ㄉ蠄D中的 D與 W),用數學公式表達為時間 T = a + b log2(D/W+1)。

它是 1954 年保羅.菲茨首先提出來的,用來預測從任意一點到目標中心位置所需時間的數學模型,在人機交互(HCI)和設計領域的影響卻最為廣泛和深遠。

這就很容易解釋了為什么菜單都要設置在邊緣,手機的實體鍵放置在邊緣,可點擊的按鈕尺寸要盡量大。等等。

(5)其他理論

交互設計的理論還有很多,時間有限,就不一一枚舉,有興趣可以繼續了解,例如:奧卡姆剃刀原理、席克定律、泰思勒定律、新鄉重夫:防錯原則等。

4. 交互設計流程及方法

4.1 設計流程

我們接觸的產品一般從規劃到上線的流程是如下圖這樣的,先從目標用戶開始,一直到開發實施,然后上線。

作為交互設計,同樣有屬于自己的一套設計流程,注意,這些是通用的流程,但具體交互設計師的習慣或者具體的項目,用的流程并不一致:

  1. 需求分析:即業務訴求、用戶目標、產品方向綜合一起,最終得出主要的設計需求。產出物一般為需求文檔或者需求列表。
  2. 概念設計:這個時候,發散我們的思維,包括感性和理性,和設計需求一起,形成最終的設計目標。
  3. 框架設計:包括導航菜單的設計、頁面總體框架和層級等等,輸出物一般為草圖。
  4. 流程設計:產品中的頁面流程、功能流程、任務流程等等,主要輸出物為流程圖。
  5. 界面設計:具體的頁面設計,主要是把抽象化的設計目標具體化,用線框圖表達出來。
  6. 驗證設計:把我們所學的交互理論代入到交互稿中進行驗證,或者通過潛在用戶來進行模擬驗證,如可用性測試。
  7. 交互說明:所有設計稿定稿之后,編寫通俗易懂的交互說明文檔,方便與視覺設計、開發同事溝通。

4.2 設計方法

“你在設計的生涯中,有沒有用到或者總結出哪些設計方法?”

作為交互設計師小白的時候,這個問題是斷然答不上來的,因為那個時候還沒接觸到這么“高深莫測或者不明覺厲”的東西。

設計方法的作用是什么?主要有兩個方面的作用:一方面,設計方法能指導交互設計師更好的進行設計;另一個方面,經過設計方法包裝后的設計,能讓交互設計師坦然面對產品經理、項目經理、開發同事的質疑。

那么設計方法有哪些呢?設計方法到底是怎么對交互設計起作用的呢?我們用英國設計協會的“雙鉆模型”為例來進行說明。來源于IDEO的以人為本的設計思想,以及@d.school的設計流程。

雙鉆模型主要分為兩個階段,四個步驟:

第一階段——為正確的事情做設計(designing the right thing)

第1步:探索(Discover)和調研(Research),此步是發散型的思考,探索和研究問題的本質。

  1. 質疑 rip the brief:對需求質疑,對商業模式質疑,對用戶質疑,質疑一切不合理的事情。
  2. 故事/場景 cluster topics:列舉用戶可能遇到的真實場景元素:地點、時間、人物、故事,梳理整個交互流程和節點。
  3. 研究 research:針對問題進行研究,例如用戶訪談,問卷調查,競品分析,行業分析等等,最終得到一系列的研究結果。

第2步:定義(Define)和聚焦(Synthesis),此步是將第1步發散的問題進行思考和總結,把問題集中起來解決。

  1. 洞察(insights):把存在的問題、研究結論看透徹,這是一個深入觀察的過程。
  2. 主題(themes):把問題歸類成為一個主題,或者說是把問題歸類成為一個系列。
  3. 機會領域(opportunity areas):把之前的行業分析、競品分析以及存在的問題一起比較,發現可能存在的機會突破點,例如這個設計能給用戶帶來什么?
  4. how might we…HMW:我們在有關的領域應該怎么做,能解決什么問題?

第二階段——將設計做正確(designing things right)

第3步:發展(Develop)和構思(Ideation),此步是開始真正的交互設計構思。

  1. 構思ideation:把問題具體化,我們可以參考流行的設計趨勢、好的設計網站或者好的交互效果,構思自己的交互設計應該如何做。
  2. 評估evaluation:如果構思的過程產生了很多的想法方案,那么我們應該先評估一下可行性。
  3. 想法ideas:經過評估之后,最終選擇了2~3種ideas

第4步:傳達(Deliver)和實現(Implementation),此步等于最終用線框圖解決了之前的問題了。

  1. 制作原型,測試,迭代(build,test,iterate),重復3次以上。即可以簡單理解為線框圖的評審(自己把關、產品經理把關、評審把關),反復迭代原型。
  2. 淘汰out:淘汰中間不合理的想法和設計,最終保留精華設計。

5. 交互設計常見案例分析

交互設計日常需要注意積累案例,并從案例中學習總結,只有案例積累得越多,才能形成質變。本章只是簡單示意一下交互可以從哪些案例入手。

5.1 導航

導航包括:左側導航、頂部導航、面包屑導航、電梯導航、搜索等。

5.2 流程

常見一個完整功能流程:

5.3 表單

表單包括表單的展示、輸入以及數據校驗。

5.4 反饋

有反饋的交互才是交互,什么時候用輕反饋,什么時候用重反饋?

5.5 場景

離開場景來談交互,都是耍流氓。

6. 交互設計規范及趨勢

6.1 柵格規范

首先,我們要明確一個觀念:交互設計師和視覺設計師是密切配合的,所以交互設計師也需要學習一些視覺設計的知識,以免雙方溝通出現問題。柵格化就是視覺設計中的比較基本有用的知識,至少可以規范交互設計師畫的原型,沒有超過視覺設計師所能承受的“界限”。

我們在設計中常用的是:網頁柵格系統,百度百科給出的解釋是:

“以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。對于網頁設計來說,柵格系統的使用,不僅可以讓網頁的信息呈現更加美觀易讀,更具可用性。而且,對于前端開發來說,網頁將更加的靈活與規范。”

柵格系統詳細的應用,可以看這篇文章《騰訊高手教你靠譜的布局設定方法》,介紹得十分詳細,本文不再累述。

這里只簡單總結一下學習柵格規范對交互設計的意義:

  1. 和視覺設計師一起,達成頁面寬度的共識,而不是超出視覺設計的“邊界”;
  2. 在交互設計時,用柵格化規范模塊的布局,整齊的分為N欄,讓原型變得更美觀;
  3. 合理利用柵格,產出“黃金比例”的效果圖,例如制作簡歷或者作品集。

6.2 平臺設計規范

交互設計師必須掌握的知識點,也是面試必考題:平臺設計規范。因為,我們所有的設計,幾乎都是基于這些平臺來進行設計。

但要注意,不要過度在意平臺的設計規范,有一些規范也有自相矛盾的地方,舉例摘自:崇書慶發表于妖鹿山設計屯的《【交互小零食】- Ser.02》在iOS9規范中,

“關于彈窗中的“推薦選項”應該放在左邊還是右邊,分了兩種情況:如果推薦選項有破壞性,那么應該放在左邊。如果沒有破壞性,則應該放在右邊。但到了iOS10的時候,卻變成了推薦選項都應該放在右邊?!?/p>

以下是一些交互設計師常見需要掌握的規范舉例,詳細規范需要自行去了解。

(1)IOS10設計規范

(2)Material Design

喜歡Andriod和Material Design風格的,不容錯過。

(3)Window10 UWP

來自微軟的UWP設計規范,參考官網《設計和UI

(4)微信小程序

新的熱點,了解大平臺是怎樣做設計規范的。參考微信小程序官網給的規范《微信小程序設計指南》

6.3 設計趨勢

作為一名優秀的交互設計師,當前的時尚流行元素,以及設計趨勢,也是需要了解的,不要讓自己的設計跟不上時代。

建議交互設計師了解兩方面的設計趨勢:交互設計趨勢,以及視覺設計趨勢。在年初或者年末的時候搜索最新的看即可。

2017年設計趨勢文章推薦:

(1)交互設計趨勢:《2017年度交互設計趨勢

(2)視覺設計趨勢:《8個你需要知道的2017年UI設計流行趨勢

7. 交互設計師進階之路

7.1 突破瓶頸

每個交互設計師通過努力都能成為高級交互設計師的水平,要想成為優秀的資深交互設計師或者業內有影響力的設計師還需要突破一個瓶頸。那么所謂的瓶頸期是指?這里可以參考《騰訊高級交互設計師:什么是優秀的設計思維與方法?》一文即可。

按照慣例,總結了一下需要突破瓶頸的3大必要條件:

(1)知識的積累達到一定的程度,一般是由量變轉為質變

(2)有個人的設計方法體系

(3)長時間的經驗積累,至少需要5年以上

7.2 進修

交互設計師職位發展的時間不長,大多數的交互設計師都是基本靠自學成才,那么對于入門或者想要更近一步的交互設計師,有什么樣的進修渠道推薦呢?

不建議報讀培訓班,不建議報讀培訓班,不建議報讀培訓班。重要的事情說3遍,報培訓班不如自學。

推薦渠道一:進培訓體系完善的公司,接受培訓

最直接最節省成本的方法,有老司機帶領。前提是,我們要上一輛好的車。1-2年學成出師,比自己自學效率要快N倍,少走的彎路能繞地球一圈。

推薦渠道二:報讀設計類學校

刷資歷首選,進入知名企業必備敲門磚頭,系統的知識體系和方法論學習。缺點是學習周期長,成本高,同時,院校的可選擇范圍也很小。推薦院校:清華美院、江南大學、中山大學、廣州美院。

7.3 作品集

人靠衣裝,交互設計師靠的是作品,好的交互設計師同樣需要好的作品襯托。作品集也是交互設計師總結沉淀、自我提升的重要方法。

把自己的項目包裝成一個個作品集,展示出來吧,在作品集里面回答如下問題(面試必考題):

(1)這個作品的亮點在哪里?解決了什么樣的問題?

(2)這個作品存在什么樣的不足?可以怎么改進?

(3)這個作品遇到了什么難點?最終是如何克服的?

(4)這個作品的設計過程是怎么樣的?

(5)這個作品的最終成果如何?

大神們作品集推薦:

8. 參考文獻

8.1 圖書類

  1. 《交互設計沉思錄》-Jon Kolko-機械工業出版社
  2. 《簡約至上 : 交互式設計四策略》-Giles Colborne-人民郵電出版社
  3. 《設計師要懂心理學》-Susan Weinschenk-人民郵電出版社
  4. 《用戶體驗的要素 : 以用戶為中心的Web設計》-Jesse James Garrett-機械工業出版社
  5. 《心理學與生活》-Richard J.Gerrig、Philip G.Zimbardo-人民郵電出版社
  6. 《社會心理學》-戴維·邁爾斯-人民郵電出版社

8.2 網站類

  1. 人人都是產品經理
  2. 優設網
  3. 站酷網
  4. 英國設計協會
  5. IDEO
  6. 知乎
  7. 36kr

 

本文由 @WensenCen?原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 樓主居然一一回復了評論,德才兼具

    來自廣東 回復
  2. 已認真拜讀,謝謝分享 ??

    來自陜西 回復
  3. 已認真的拜讀,感謝分享! ??

    來自江蘇 回復
  4. 新的還未正式入門的交互設計師報到(害羞一記)。
    看了大大寫的文受益匪淺,給你筆芯,給你點贊加血補充能量。
    看文留言不耍流氓,再回去爬幾次大大的樓。(給大大大大的笑。)

    回復
  5. 作為新人想問個問題,控件庫在哪可以找~~

    來自廣東 回復
    1. 自己可以制作

      來自浙江 回復
  6. 真是一篇好文章,感謝分享

    來自山東 回復
  7. 鴻篇巨制

    來自四川 回復
  8. 謝謝分享,有個問題 信息架構輸出的什么??按什么維度輸出,沒寫太具體,不太明白,求賜教

    來自天津 回復
    1. 簡單方面來說就是導航菜單的輸出,你的產品菜單是怎么樣子,一級菜單、二次菜單怎么設計;更深層次來說,包括頁面的層級劃分,具體的路徑,例如從登錄到完成購物,需要經過哪些頁面?頁面層級是如何的。輸出的話,可以是架構圖,見文中的示意圖;可以是Excel表格,說明一二級菜單怎么劃分等等。

      來自廣東 回復
  9. 厲害呀!江山代有才人出!

    來自北京 回復
    1. 謝謝夸獎

      來自廣東 回復
  10. 寫的真的 很不錯,路轉粉了,期待更新新文章

    來自北京 回復
  11. 真的很不錯,希望能多請教你

    來自廣東 回復
  12. 內容太贊了~

    來自內蒙古 回復
  13. 謝謝分享這么好的內容!贊一個

    來自北京 回復
  14. (*@ο@*) 哇~,好文章,

    來自福建 回復
  15. 支持一個,共享精神

    來自廣東 回復
  16. 值得,值得,值得??感謝

    回復
  17. 干貨滿滿
    :mrgreen:

    來自北京 回復
  18. 看了三天終于看完了,現在大三,才實習了三天。謝謝你的文章,很有用

    回復
  19. ?? 淚流滿面

    來自廣東 回復
  20. 很全面、很詳細,贊一個,方便問下作者從業多少年了?

    來自北京 回復
    1. ?? 至今從業5年有余,還沒能脫離苦海實現財務自由,慚愧。

      來自廣東 回復
  21. 大贊,比我買的書都干貨些 ??

    來自廣東 回復
    1. O(∩_∩)O謝謝支持

      來自廣東 回復
  22. 受教了,

    來自四川 回復
    1. ?? 還好不是受驚了。

      來自廣東 回復
  23. 雖然我沒看完,我還是要給你贊 ??

    來自北京 回復
    1. 謝謝支持 ??

      來自廣東 回復
  24. 學習

    來自江蘇 回復
    1. 謝謝支持 ??

      來自廣東 回復
  25. 寫得很好,學習了!

    回復
    1. 謝謝支持 ??

      來自廣東 回復
  26. 干貨 ??

    來自廣東 回復
    1. 謝謝支持 ??

      來自廣東 回復
  27. 收藏先,下班回家仔細閱讀

    來自浙江 回復
    1. 謝謝支持 ??

      來自廣東 回復
  28. 誠意之作~~贊一個~慢慢學習

    來自廣東 回復
    1. 謝謝童總支持 :mrgreen:

      來自廣東 回復
  29. 確實很誠意 贊~

    來自上海 回復
    1. Request test

      回復
    2. Request test2

      回復
    3. And test3

      回復
  30. 贊,干貨

    來自上海 回復
    1. 謝謝支持 ??

      來自廣東 回復