乙個完整的互動設計流程是怎樣的?

2021-07-03 08:17:06 字數 3042 閱讀 7169

早讀課

banner製作:早讀堂-流雲

簡介:互動研究死磕中

我的答案是基於《軟體觀念革命:互動設計

精髓》(about face),這也是在國際上被廣為認可的流程。這個答案裡我盡量不參雜個人觀點。先放乙個大綱。

一、定性研究(qualitative research):針對可能使用你的產品的人,可以是問卷、訪談……

二、確定人物角色(persona):即產品的典型使用者,可以有一種或幾種。例如知乎可以有乙個人物角色叫ceo。

三、寫問題指令碼(problem scenario):羅列人物角色在使用產品時可能遇到的問題,可以整理成乙個故事便於別人理解。

四、寫動作指令碼(action scenario):像寫故事一樣,寫人物角色在使用你設計好的產品時,發生的細節。注意,這個時候你的互動方案的概念模型已經基本成型了,這個概念模型是通過解決問題指令碼裡的問題而得出的。

五、畫線框圖(framework):這個線框圖是通過把動作指令碼裡的概念模型轉化成視覺模型得到的。

六、製作原型(prototype):做出來好像可以用的東西,有很多原型工具可以利用。

七、專家評測(expert evaluation):至少兩名設計師或對互動設計

比較了解的人通過反覆測試原型。找到問題後修改線框圖並更新原型。

八、使用者評測(user evaluation):讓使用者使用原型,可以給他們一些任務去完成。根據使用者在使用過程中的問題和建議進行進一步修改。

如果你想要知道具體怎麼做,請繼續看。

無論你用何種形式做調查,你的目的是了解使用者的五個方面:

1、行為(activities):例如知乎使用者多久用一次知乎、一次用多久?

2、態度(attitudes):例如知乎使用者怎樣看待知乎這個產品?

3、資質(aptitudes):例如知乎使用者的學歷怎樣?

4、動力(motivation):例如知乎使用者為什麼用知乎?

5、技能(skills):例如知乎使用者對使用相關產品是否熟悉?

如果你的定性研究有所成功,這時你應該對你的使用者有所了解了。根據上文中的五個方面,你需要挑揀出最典型的乙個或幾個形象。例如知乎的人物角色可能有:比較普通的求知者、特定領域的專家、到處灌水的……

你不但要確定這些人物角色(persona)的主要特點,還要確定他們的需求和目的。為了增加真實性,可以給人物角色(persona)取名字,選一張**,細化他們的背景資料。

基於你對人物角色(persona)的理解,你應該已經可以設想出他們在使用產品中可能遇到的問題了。你可以為每乙個人物角色(persona)列乙個問題單,也可以把它們整理到乙個簡短的故事裡。

首先你要為已列出的問題想好可能的解決方案,然後寫乙個簡短的故事把這些解決方案囊括進去。寫成故事的好處是代入感較強,對別人來說容易理解。國內比較推崇故事版,但是把所有情景畫出來的效率是非常低的。

這個時候你對你的互動方案已經有了乙個比較抽象的想法了,現在只要把它具象化就好了。線框圖大家都比較了解,這裡就不多說了。

就算沒有程式設計師幫忙,可以使用的原型工具還是很多的。例如axure rp和pencil project都比較有名,國內也有不少。不過我只用過invision,感覺還可以。不論用什麼手法,哪怕是ppt或者pdf,只要做出乙個可以互動的東西就行了。

乙個原型是不可能實現所有功能的,所以你要確定幾個可以走通的任務。例如能夠成功在知乎裡發布乙個問題等。

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

比較常用的評測方法是啟發式評估法(heuristic evaluation),而這種方法比較常見的標準是尼爾森互動設計

法則(nielsen heuristic)。以下是十條尼爾森互動設計法則(nielsen heuristic):

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)

9、幫助使用者認知、了解錯誤,並從錯誤中恢復(help users recognize, diagnose, and recover from errors)

10、幫助文件(help and documentation)

如何做啟發式評估法(heuristic evaluation)?很簡單,專家們各自將自己發現問題列出來,並將之與對應的法則相關聯,或者根據法則來查詢問題,然後專家們分別給自己的問題打分。專家們完成自己的問題列表後,一起討論,將問題整合起來。

常用的打分方法如下:

4分 – 問題太過嚴重,一旦發生使用者的程序將會終止並且無法恢復

3分 – 問題較為嚴重,很難能恢復

2分 – 問題一般嚴重,但是使用者能夠自行恢復,或者問題只會出現一次

1分 – 問題較小,偶爾發生,並且不會對使用者的程序產生太大影響

0分:不算問題

記住:評測完後別忘記修改你的線框圖和原型!

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

值得注意的是,很多人更習慣給出建議而不是提出問題,例如「這個按鈕應該更大一點,這樣才看的到」。這時,你該記錄下來的是「按鈕不夠引人注意」。

有趣的是,使用者評測的結果可能和專家評測的結果相差很遠,這裡就不多說了。

乙個視覺互動設計失敗的案例

最近在做產品設計時,遇到了乙個非常典型的設計失敗案例。這個案例反應了一些老生常談的問題,我覺得非常有意思。好看的設計未必好用 原型圖 效果圖然而,在開發完成以後,我看著手機上的測試版,效果並不盡如人意。首先,成品並沒有效果圖那麼漂亮。在仔細對比後才發現,原來效果圖漂亮的原因,很大程度上是因為擺放的非...

乙個視覺互動設計失敗的案例

最近在做產品設計時,遇到了乙個非常典型的設計失敗案例。這個案例反應了一些老生常談的問題,我覺得非常有意思。好看的設計未必好用 原型圖 效果圖然而,在開發完成以後,我看著手機上的測試版,效果並不盡如人意。首先,成品並沒有效果圖那麼漂亮。在仔細對比後才發現,原來效果圖漂亮的原因,很大程度上是因為擺放的非...

乙個完整的TD通訊是怎樣完成的?

複製了一些內容,希望有幫助。主叫流程是指ue 呼叫其它使用者 例如pstn 使用者 的過程。主叫流程經過了如下幾個過程 1 rrc連線建立 為了成功進行呼叫,ue 向rnc傳送rrc連線建立請求訊息rrc connection request,發起rrc連線建立過程,建立起與rnc之間的信令連線。當...