一個完整的交互設計流程是怎樣的?
我想在 Zhou43 的答案上做一些補充。
在我的定義中,Zhou43 的答案更多是交互設計過程中會使用的部分方法及工具。交互設計的流程
交互設計的對象是 人的活動 ,辛向陽老師的《交互設計:從物理邏輯到行為邏輯 》中有詳細的闡述。所以交互設計的流程是:
1. 了解用戶的活動及目的;
2. 定義活動中的行為與問題;
3. 定義設計的目標;
4. 設計方案,反覆精化;
5. 確認設計方案對用戶活動的影響。對應 Zhou43 的答案:
①、②、④聚焦在了解用戶是誰、他們如何使用產品?(活動和行為是什麼)、為何這樣使用?(目的和心理模型)【流程1】
③、④關註定義用戶活動的具體行為和問題,定義設計目標也常常在這個過程中完成。【流程2、3】
⑤、⑥、⑦是通過原型工具和專家經驗進行方案設計和精化。【流程4】
⑧是藉助測試用戶來觀察確認方案對用戶活動的最終影響是否達到期望的設計目標。【流程5】設計工具與方法
強調區分設計流程和設計工具、設計方法的原因是:
- 設計流程沒有規定使用的工具或方法。
- 設計方法和工具是為了解決設計過程中的挑戰提供的解決思路和框架。
- 設計師應當根據情況來選擇適合情況的工具和方法。舉2個常見的例子:
故事板
溝通的媒介。故事版不會直接幫助設計師得到更好的方案,但可以幫助設計師在團隊討論時更準確地溝通發現的問題及設計目標。它更多是一個溝通工具。如果只是一個人來做設計決策,故事板是不需要使用的;
如果整個團隊溝通良好,想像力良好,即使是團隊溝通也是可以不需要故事板的;
如果在多次溝通中發現團隊中不同的角色對問題的理解是有困難的,那故事板可能可以改善這類問題。原型
通過原型可以更好和更廣泛地檢驗方案。原型設計有很多工具,紙面原型是其中一種。它既是設計工具,也是溝通工具。
如果設計師自己進行設計,簡單的紙面原型,甚至在頭腦中想像的原型都可以幫助設計師進行方案推敲;
如果需要了解團隊甚至用戶對不同方案的反饋,那就需要相對高精度的原型,電子稿或者可使用的原型;
如果只是討論那個方案更優,只需要將相關流程原型化即可討論;
如果需要考慮方案的可行性等問題,就必須將所有的流程都轉化成原型來討論;
現在交互設計的媒介已經不局限在人機界面上,而是擴展到產品、環境以及人身上。這也是現在在流程和工具上討論比較多的其中一個原因。
其實這個問題也是我的學生最愛問的問題,不論國籍。先說下我的背景吧。我是國內軟體工程本科+美國UW HCDE master,現在在矽谷做用戶體驗設計並且教用戶體驗課程。之所以強調自己的背景,是因為我看到的大家給出的見解雖然都非常詳實,但是難免和工業界略有脫節,就像我當年讀研究生的時候學的交互設計課程一樣。在這裡我想給出我負責的幾個項目里所用到的流程,這些也是我教給學生的流程。
Zhou43也說了,他給出的答案是Allen Cooper在About Face裡面寫到的流程。我自己教課的經驗以及我和其他教授討論的結果就是,About Face在北美各大最頂尖的交互設計/HCI院校都是學生的必讀物不假,但是教授在啟發學生真正去做項目的時候,往往會告知他們:
1. 這些步驟並不是每步都是必須的,要根據項目去分析你所使用的方法
2. 這個過程中每一步都是和用戶相關的,切莫主觀臆斷。
所以其實業界對於方法論的認識,和學術界是有偏差的,業界的步驟可以被總結為:1.認識產品所要解決的問題
像我以及眾大神們經常強調的一樣,交互設計的初衷就是解決用戶的問題。不論設計什麼產品,能夠被用戶認可的途徑只有這個產品解決了他們生活中的一個問題。
交互設計的第一步,不論是對成熟產品還是初創產品都一樣,就是定義這個設計到底要解決用戶的什麼問題。像之前很多人提到的一樣,這一步的做法有:用戶訪談,實地考察,發放問卷等等。
這一步可以說是整個流程中最核心的一步。
比如當年在亞馬遜的時候,我們想研究一下在義大利市場的亞馬遜存在哪些問題,於是我們的用研人員就去了義大利。在實地考察的過程中發現了很多有意思的事情,比如義大利家用電腦其實普遍比較落後,快遞系統也和美帝有很多不同等等,那麼翻譯成用戶的實際問題,就變成了用戶看到的信息過載的網頁往往需要更長時間載入,而他們在意的關於快遞的很多信息卻不能直接從網站上得到等等。當然這只是研究發現的很小一部分,舉這個例子的意思是說,只有真正的在用戶所處的環境里,看到他們到底在做什麼,如果使用產品,有哪些問題,才能為自己的設計打下基礎。2.收集能解決這一問題的用戶相關的信息
了解了自己要解決什麼問題之後,還要確定自己到底要為誰解決這個問題。近些年面試有個很大心得,就是即使在矽谷這個用戶體驗已經被炒的熱的不能再熱的地方,很多人仍然不知道如何了解自己的用戶。當聽著面試者給我大談特談persona的時候,我就很想告訴他們,你那個訪談了三五個用戶的東西,根本也不是persona。下面這個是Weebly的persona,原文在此Persona Cards by Ryan Hunter 。至於做的怎麼樣我大家可以自己體會一下。(我會說我的好朋友兼美國同事和他們的CEO有個人糾葛我很難給出公正評價咩)了解用戶的途徑其實特別多,很多人為了表現自己特別熟悉UX的各種方法,而在選擇著華而不實的調研的途徑。其實了解用戶是誰的最好途徑,就是通過協作。做市場,銷售,用戶支持等各個崗位的人,都會對這個問題有自己的見解。在這個基礎上,再通過訪談以及觀察確認到底誰才是你真正的用戶,往往比你直接start from scratch(從零開始)要有效的多。
有一張很經典的圖,送給大家。圖片來自About Face 4,是Cooper加工過的版本。這個具體問題要講其他估計得能講上好幾個小時,歡迎大家私信來切磋。3. 提供這一問題的解決方案
其實這一階段,可能是我認知中和傳統設計理論和方法中最貼近的一個階段。線框圖,不同方式的建模,頭腦風暴,流程圖,到原型圖,所有的設計方法在這個階段都可以用。
不過對於複雜的系統,我想特彆強調一下線框圖和流程圖的巨大幫助。我有幸在老東家帶著大家做了個用戶數量龐大的產品,複雜系統中的分支情況和邊緣條件,往往不是設計師在設計過程中最直覺去考慮的內容,而線框圖和流程圖,可以很大程度的幫助這一過程。同時,也是跟PM已經程序員撕逼大戰的時候的利器,一個定義好了的線框圖,可以最大程度的避免需求一改再改。(反正一直改需求的PM可能也不是好PM哼╭(╯^╰)╮)4. 驗證所提出的解決方案
交互設計的難點和亮點我覺得就是驗證和迭代的過程。說到底有才的人畢竟很多,有創意的方案層出不窮,能經歷用戶和市場考研的方案才是好方案。
測試的過程那就太多了。我先羅列幾個基本我做過的每個公司都會用的:(*如果我的翻譯you"wu有誤歡迎指出,我可能只熟悉他們的英文說法)
- 用戶測試(usability testing),
我見過的幾個用戶測試實驗室,基本設置都差不多,就是用戶在一間房間裡面做測試,房間裡面要不就是有攝像頭,要麼就是有隻能單向看到的玻璃,然後其他旁觀測試的同事都會在另一間會議室,要麼看實時直播,要麼就通過玻璃直接觀察。這樣的目的是為了讓用戶在儘可能自然的情況下進行測試。要知道,當年我最怕的就是用戶告訴我:為了做你們的測試,我昨晚很認真的研究了一下amazon!真是淚崩。
Photo credit: NSF Lab Evaluation
2. AB 測試
這個就不是一個交互設計師自己能夠完成的了,需要工程師哥哥們的配合。我個人還是AB testing的忠實粉絲的。只是曾經待過的某互聯網巨頭(說老東家壞話有點心虛此處略去名字了)所有的設計都要經過AB testing,而每次贏得勝利的都是比較丑的那個,當時玻璃心也是收到了一萬點傷害的。畢竟還是有設計師對於美學的追求的。
扯回來。AB testing在很多時候其實都很有用,有個叫GoodUI的組織經常會講一些他們做AB testing的發現,很有幫助,但是每個報告都要錢。下面就是個例子,是說你在自己的網站上面自誇的效果是不如引用別人在社交媒體上的評價的。聽起來誰都知道,但是人家有了數據是不是撕逼的時候就更容易了,比如PM說咱們要寫一大段這樣那樣的話的時候就可以拿出這些數字甩他們一臉了(感覺自己以後很可能全職做產品了這樣說PM真的好么)3. 五秒測試 (five second test)
不知道這個測試現在在國內有沒有人用,我個人非常喜歡。就是你給一個用戶看你的設計五秒,只有五秒,然後讓用戶回答一個問題。我目前覺得這種測試適合非常小的點,比如一個Icon用戶到底能不能認出了,別自己做的是嫩牛五方別人以為是麥辣雞這樣。一個很好的做五秒測試的網站是The original Five Second Test a€¢ UsabilityHub ,大家可以去試試4. 遠程測試(remote testing)
遠程測試太熱了,最近我們想買一個服務做遠程測試,結果被價格嚇得一臉豪血。感覺沒法給大家推薦具體用哪個了,我認為非常複雜的產品不適合遠程測試。遠程測試還是2C的產品更好進行測試。Photo credit: Recording Mobile Device Usability Testing Sessions a€「 Guerrilla Style
5. 熱圖測試(heat map testing).
這個還需要解釋么?就是下面這隻怪物啦除此之外還有些不具有普世性的測試方法,我就不一一贅述了,比如眼動儀測試什麼的。想最後個在學校的學生以及創業公司的你推薦一個測試方法:游擊隊測試 (guerrilla testing)。其實這個測試特別簡單,就是你拿著你的原型去大街上隨便找人來用,告訴你他們的反饋。當然實踐起來也沒用這麼簡單,你要有很明確的目的,很清楚你想要得到哪方面的反饋,不然一定會被用戶帶著跑偏了的。
圖為我的學生們在洛杉磯做guerrilla testing,全文可以戳這裡https://medium.com/iq-design/how-to-become-a-ux-designer-from-my-experience-of-teaching-ux
5. 改善解決方案
寫的有點長了,有些地方還沒有寫的特別具體,以後可以慢慢來更新~
說到最後,交互設計的精髓不就是一直的迭代么,哪裡沒做好改哪裡。對於開發周期很長的傳統行業,互聯網行業賦予設計師最大的自由度,就是隨時沒做好,咱就改唄~具體步驟就是酌情重複前面四步啦~其實沒有什麼一個完整的交互設計流程,或唯一正確的設計流程。
我仔細讀了一下題主的描述,我覺得題主的問題在於不知道如何有調理的描述一段設計過程。
我講一下設計流程的原理和如何製造設計流程。(說到底就是方法論的本質)
什麼是設計流程?
設計流程一般是指設計活動(design activities)和這些活動之間的關係。
設計活動就是如需求分析,原型設計,可用性測試一類的活動。
活動之間的關係就是活動的執行順序。
設計流程在表達上常配以圖形和箭頭,這樣更容易表達設計流程的迭代。
如何確定設計活動?
設計活動是設計流程的基本元素。不同的設計流程核心都是一樣的,只不過抽象層次不一樣。
比較抽象的方式有,比如有人會把設計流程描述為確定問題,解決問題,驗證方案。這是一個很通用的研究方法論。
有人會用更具體的詞語描述,比如需求分析
設計流程都是失真的,無法被驗證的
設計流程都是在基於設計的基本流程和主觀經驗上抽象而來的。一個真實的設計過程是非常複雜的,當我們把設計過程抽象成一個簡單的模型後,很多信息都沒有了,比如團隊如何分工,設計師如何做決策。剩下的都是一些大同小異的東西。舉個例子,我們讓騰訊微信團隊的設計師把微信的設計過程抽象出來,那麼每一個人抽象出來的肯定都有差異。那麼哪一個是真的?其實都是真的,也可以說都不真。哪一個人的模型能幫你設計出另一個微信來?都不行。
跟著某設計流程走並不能直接復現成功的設計經歷。
一些賣網課的會常用一些什麼百度設計流程啊,網易設計流程啊,精益產品設計流程啊做宣傳,其實這些都行沒什麼神秘的或者高端的。你對設計過程了解了之後你自己都能造模型。
現象特別熱門的 Google design venture 弄出來的 Design Sprint 本質上也沒什麼特別的。就是通用模型的具體實操而已。
流程的意義
設計流程更多的是表達設計理念和對設計初學者進行啟蒙教育溝通工具。沒有一個設計流程可以面面俱到。學習交互設計也不要光盯著某一個交互設計流程看。多看些不同的流程,總結分析裡面的側重點,有哪些設計活動,有哪些產出,基於哪些理論和概念,學習流程背後的理念。
真正在自己做設計的時候,千萬不要鑽流程的牛角尖。
以下是比較常見的基本流程模型
1. Interaction design:Beyond Human - Computer Interaction 的設計流程
這本書里給出了4個大的交互設計的步驟
- Establishing requirements 確定需求
- Developing alternative design開發設計理念
- Prototyping做原型
- Evaluating評估
2. ISO 的設計流程
ISO 以前也給出了一個交互設計流程 ISO 13407: Human Centred Design Process for Interactive Systems。這個流程已經過時了,被修改成ISO 9241-210設計活動分別為
- 計劃設計流程
- 理解和分析使用場景
- 確定用戶和組織需求
- 設計
- 評估設計是否滿足需求
2 至5是不斷迭代的過程。
這個流程比較強調使用情境(context of use)。這是以用戶為中心的設計里非常重要的一點。
3.ADDIE 模型
ADDIE 模型是教育技術里最有影響力的設計流程模型。.這個模型更強調學習性。常用於教學系統的設計。其實交互設計並不是特別重流程,教育技術領域才是流程泛濫。
ADDIE 分別表示 分析,設計,開發,執行,評估。
分析 analyze:分析學習目標,分析學習者特徵,確定學習環境
設計design:確定教學戰略,做原型,界面設計,視覺設計
開發:把設計轉化成可測試的原型或產品
執行:在實際情境中測試產品
評估:評估學習系統和學習材料我的答案是基於《軟體觀念革命:交互設計精髓》(About Face),這也是在國際上被廣為認可的流程。這個答案里我盡量不參雜個人觀點。先放一個大綱。
一、定性研究(Qualitative Research):針對可能使用你的產品的人,可以是問卷、訪談……
二、確定人物角色(Persona):即產品的典型用戶,可以有一種或幾種。例如知乎可以有一個人物角色叫CEO。
三、寫問題腳本(Problem Scenario):羅列人物角色在使用產品時可能遇到的問題,可以整理成一個故事便於別人理解。
四、寫動作腳本(Action Scenario):像寫故事一樣,寫人物角色在使用你設計好的產品時,發生的細節。注意,這個時候你的交互方案的概念模型已經基本成型了,這個概念模型是通過解決問題腳本里的問題而得出的。
五、畫線框圖(Framework):這個線框圖是通過把動作腳本里的概念模型轉化成視覺模型得到的。
六、製作原型(Prototype):做出來好像可以用的東西,有很多原型工具可以利用。
七、專家評測(Expert Evaluation):至少兩名設計師或對交互設計比較了解的人通過反覆測試原型。找到問題後修改線框圖並更新原型。
八、用戶評測(User Evaluation):讓用戶使用原型,可以給他們一些任務去完成。根據用戶在使用過程中的問題和建議進行進一步修改。如果你想要知道具體怎麼做,請繼續看。
一、定性研究(Qualitative Research):
無論你用何種形式做調查,你的目的是了解用戶的五個方面:
1、行為(Activities):例如知乎用戶多久用一次知乎、一次用多久?
2、態度(Attitudes):例如知乎用戶怎樣看待知乎這個產品?
3、資質(Aptitudes):例如知乎用戶的學歷怎樣?
4、動力(Motivation):例如知乎用戶為什麼用知乎?
5、技能(Skills):例如知乎用戶對使用相關產品是否熟悉?二、確定人物角色(Persona):
如果你的定性研究有所成功,這時你應該對你的用戶有所了解了。根據上文中的五個方面,你需要挑揀出最典型的一個或幾個形象。例如知乎的人物角色可能有:比較普通的求知者、特定領域的專家、到處灌水的……
你不但要確定這些人物角色(Persona)的主要特點,還要確定他們的需求和目的。為了增加真實性,可以給人物角色(Persona)取名字,選一張照片,細化他們的背景資料。
以下是一個範例:(下圖來自User Evaluation Report · 480Oswego2013/CSC-HCI-480-2013-repo Wiki · GitHub)三、寫問題腳本(Problem Scenario):
基於你對人物角色(Persona)的理解,你應該已經可以設想出他們在使用產品中可能遇到的問題了。你可以為每一個人物角色(Persona)列一個問題單,也可以把它們整理到一個簡短的故事裡。四、寫動作腳本(Action Scenario):
首先你要為已列出的問題想好可能的解決方案,然後寫一個簡短的故事把這些解決方案囊括進去。寫成故事的好處是代入感較強,對別人來說容易理解。國內比較推崇故事版,但是把所有情景畫出來的效率是非常低的。五、畫線框圖(Framework):
這個時候你對你的交互方案已經有了一個比較抽象的想法了,現在只要把它具象化就好了。線框圖大家都比較了解,這裡就不多說了。六、製作原型(Prototype):
就算沒有程序員幫忙,可以使用的原型工具還是很多的。例如Axure RP和Pencil Project都比較有名,國內也有不少。不過我只用過InVision,感覺還可以。不論用什麼手法,哪怕是PPT或者PDF,只要做出一個可以交互的東西就行了。
一個原型是不可能實現所有功能的,所以你要確定幾個可以走通的任務。例如能夠成功在知乎里發布一個問題等。七、專家評測(Expert Evaluation):
八、用戶評測(User Evaluation):
原型完成後召集至少兩三個設計師或者對交互比較了解的人,使用並評測原型。你可以將原型所關注的幾個任務列出來,以免專家不知道原型哪部分可交互哪部分不可交互。
比較常用的評測方法是啟發式評估法(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分:不算問題
記住:評測完後別忘記修改你的線框圖和原型!
原型通過專家評測後,你可以找一些典型用戶使用原型。你可以把任務列給他們,讓他們自己嘗試完成任務。中間遇到的問題可以記錄下來,設計師通過觀察來進行評分。
比較常用的用戶評測方法是Think Aloud(對不起沒有找到合適的翻譯)。做法也很簡單,你讓用戶使用原型完成指定的幾個任務,讓他們在使用過程中將他們的每一步和心中的想法說出來。如果他們忘記說或者不知道該怎麼說,你可以適當提問。與此同時,你要將屏幕和聲音錄下來,可以用錄屏軟體或攝像頭。完成後,你回放這些視頻,把觀察到的問題和用戶報告的問題全部記錄下來,與交互法則關聯並且打分。
值得注意的是,很多人更習慣給出建議而不是提出問題,例如「這個按鈕應該更大一點,這樣才看的到」。這時,你該記錄下來的是「按鈕不夠引人注意」。
有趣的是,用戶評測的結果可能和專家評測的結果相差很遠,這裡就不多說了。
我覺的任何一門學科,都需要先模仿再創新,先了解到底何為好的設計,再去創造出好的設計。那學習好設計的方法尤為重要。推薦下好的ui設計的網站平台和工具吧。首發於公眾號、次發於知乎專欄:作品集分享portfolio
歡迎關註:作品集分享Portfolio - 知乎專欄
HArt原創文章,轉載請私信我獲得授權,同行自覺,違者必究。
———————————————————————————————————————————做之前,多看優秀作品是一個很好的學習辦法,推薦一些交互非常棒的網站和工具吧,對作品集的構思和製作都很有幫助。
主要跟大家分享三部分,第一部分和介紹一些現在做的比較好的設計作品社區,包括一些藝術作品分享網站等。可以幫助大家尋找靈感,裡面的一些好的案例,也可以成為你們作品集中second research的一部分,也算是一種casestudy。
第二部分給大家介紹的一些網站是比較偏學術性的網站。這些網站會發表專業性、學術性很強的文章,大家在現在的階段讀這樣的文章,一方面可以增加自己對所要學習專業的專業性的了解,另一方面可以學習的最前沿,最系統的理論知識。
第三部分我會給大家介紹現在平台上可以利用的工具,現在有很多公司都將他們內部資源開放原始碼,像我們所熟知的Facebook,它開放了很多內部的設計資源素材,其實也是為我們所用,有針對性使用這些template。
一、設計作品社區
1、 uplabs
第一個給大家介紹的網站叫uplabs。如果同學們對behance或者dribbble很熟悉,我相信大家對uplabs也一定不陌生,它是一個很好地為設計師打造的資源推薦社區,上面彙集了很多前端設計作品,還有大量的android和ios UI這樣的資源。
另外uplabs也有很好地marketing功能,大家可以去免費或付費下載資源。
2、collect UI
第二個給大家介紹的是 collect UI。它是一個基於dribbble的每日資源推薦社區,同學們可能會感覺有點奇怪,因為如果它是僅僅是dribbble的「再分享社區」,那麼它和dribbble網站似乎就不會有很大的區別。
其實並不是這樣的,因為collect UI都是通過人工篩選的方式來保證這個社區有很高的質量,我們可以看到在左側列表欄劃分出了不同的頁面類別,比如sign up、landingpage、user profile,這樣我們在搜索不同類別時可以很清晰,尤其是同學們在做同學們在做app的項目時候。
3、site inspire
第三個網站是 site inspire ,一聽這個名字就知道這是一個尋找靈感比較好的網站。
這個網站收錄了很多的網站交互型比較優秀的作品,會分為不同的風格和類型,包括不同主題的網站,我會比較關注這個網站是因為很早看它上面有推薦的網站其實很有視覺衝擊力的,算是比較前沿特別是在排版上比較簡潔同時會有很高的格調,我覺得如果對板式很關注的同學可以多看一些這樣的作品。
4、 one page love
第四個網站叫做 one page love 。這個網站彙集了很多優秀單頁,也有很多模板和資源,有20多種基於行業的分類,你會發現它沒有像其他作品集網站的頁面,它會將大家的注意力集中於界面,模板主題很直觀,所以你可以很輕鬆地找到自己喜歡的不同行業的模板。
5、 resource cards
第五個網站是 resource cards,這個我覺得是一個特別給力的比較結合性的網站。
如果我們對設計還沒有很多了解,如果你的設計收藏夾還為零的話,僅僅這一個網站就可以解決很多問題,因為它的resource cards是一個專門為設計師提供豐富資源的網站,這上面有不同的卡片類別,每一個卡片類別下面都會有相應下一級的分類,每一個小小的卡片都是一個收藏夾。
6、 dribbble、behance
最後兩個網站,一個是dribbble另一個是behance。
對設計有一定了解的同學應該很熟悉這兩個現在做的已經很著名的設計創意社區,有很多包括全球的優秀設計師都會在上面進行作品的分享交流,也可以看到不同作品的反饋。
以上7個網站基本上就是第一部分和大家介紹的,可以幫助大家發展靈感,對大家做research有一些有幫助的平台。
二、學術性、概念性較強的網站
1、smashing magazine
第一個網站叫做smashing magazine(門檻會有一點高),這裡面的文章比較綜合包括整體的質量很高,很適合做用戶體驗的同學來關注。
它比較適合美國留學的同學,因為其實美國會對交互有一些技術性要求,會需要你有coding的能力,需要你有交互的能力,其實這裡面也有涉及到這樣的分類,比如coding,mobile都會有偏向這樣的文章。smashing magazine裡面的文章總體的質量很高篇幅很長,我不知道現階段大家的英語能力怎麼樣,但是我覺得大家可以一篇一篇堅持讀下來我相信對大家這樣的專業辭彙的能力的提上還是很高的。
2、 ux booth
第二個網站是ux booth,它其實是個偏向於用戶體驗的文章的彙集網站,與上面的smashing magazine主要的區別的在於是更聚焦於用戶體驗這樣相關的方面,整體具有很系統很嚴謹的學術性,很系統很嚴謹。三個功能都很棒,一個是交互,一個是acceptability,還有一個偏向於可用性測試也很不錯。
3、 ux magazine
第三個是ux magazine,這裡的文章和上面其他的網站上的相比更短小精悍一些。比較會用通俗的案列講解理論知識,分析得很有理有據,可以作為大家二手調研里的素材,同時會有一些結合心理學與設計的探討,與上面幾個相比會比較容易理解。
4、designmodo
第四個是designmodo,這個網站前一陣子很風行,上面會有很多關於webstyte的一些文章。
designmodo介紹了很多設計前沿與趨勢,這裡面有兩個元素很不錯,一個是inspiration(靈感),一個是resorts(訴諸)。inspiration裡面的內容很新穎,resorts有一些很實用的小工具和一些大家可以測試方法性的工具。我們在主菜單上面可以看到shop,這裡面是許多有想法的設計師分享的作品。
5、 web design
第五個是web design。我最初關注這個網站其實是被它的視覺設計所吸引,它的視覺設計確實做的很棒,關注一段時間你會發現這裡面的內容很新穎,很適合持續關注,這裡面會精選互聯網裡優質的文章,這上面的漫畫都是由職業的漫畫家親自手畫而成。
另外web design 在主菜單裡面有一個freebies的模塊。這裡面有很多優質的資源大家都可以去下載。
6、 Facebook design
第六個是Facebook design。這個頁面結合了Facebook的設計師所製作的免費設計資源,因為目前你可以看到很多互聯網公司它都有將公司內部資源開放出來再做開源,如果你想知道這些前沿的企業他們是如何做這些設計,你都可以下載這些素材看到這些原始的文檔。
如果同學們在做作品集中有APP這樣的項目,這裡面有很多模板,你不需要再去拍照就可以用你最後做的interface(介面)去植入到這樣的圖片裡面。因為這個網站上線的時間不是很久,所以上面的資源不是很多。
三、平台上可以利用的工具
1、 workMark
它是一個可以幫你快速比較不同字體、選擇字體的工具,你可以簡單輸入你想要測試的文字,設置它的字體大小,就會在下面實時的顯示出實時做一個比較。當大家在看英文書籍時你可能會發現一個非常好看的英文字體,但是因為它的紙質的,我也沒有辦法去得到這個字體是什麼,其實這個時候掃描一下把它植入到平台裡面會自動幫你識別出這個字體,來方便你日後的使用。
2、 LOL COLORS
這是一個設計師獨立設計、獨立coding 的網站。這上面提供了很多不同顏色的配色方案,每一組有四個顏色,大家如果看到這上面有合適的配色方案,可以簡化大家的設計流程。
3、 coolors
我們可以卡到這也是一個配色網站,相比於上一個它的功能會更豐富一些,可以微調每個顏色的亮度,飽和度與色相。這裡有一個很好的功能,你會看到如果上傳一張圖片,它會幫你解析圖片的配色方案,最後你可以導出保存到調色板裡面。
④4、Icons for Everthing
這個網站可以簡化你的icons設計路徑,如果我們在做作品集排版的時候,我們經常會用icon做導引,在這樣的平台都可以找到合適的icon。
5、 Iconjar
這是一個偏向組織管理的搜索使用圖片的工具,大家可以在這上面下載不用的icon page,一方面是可以使用,另一方面是可以學習我們在做icon set的時候需要去遵循哪些規則。
6、 place it
在做用戶體驗,交互,服務設計的時候其實都會分4個部分,第一個部分是我們需要去發現一個實際問題;第二是定義一個核心的痛點;第三是去展示我們的設計結果;最好要把設計結果放入到一個真實的情景中去測試,從用戶的身上得到反饋。
這個place it其實就是幫助我們在最後在得到設計結果的時候自動生成最終場景的圖片,你只需準備好你的interface直接把它植入到這個環境里,不需要去修改,去ps。
⑦7、Pexels、 Adobe Stock、Shutterstock
最後給大家介紹的網站分別為Pexels、 Adobe Stock和 Shutterstock。
其實不用過多的描述,這三個都是屬於圖庫的性質,如果大家在排版在做作品集時候沒有合適的圖片又沒有辦法去拍照可以來這裡。
以上基本上都是一些平台,軟體工具類。無論這些平台還是工具,都只是我們設計的一環,更重要的是需要你在生活中學會發現Pain points,找到痛點,用設計去解決問題。尤其是交互與用戶體驗的同學,你需要去用你的設計結果去改變別人的行為,我覺得這是用戶體驗交互的核心。
———————————————————————————————————————————
首發於公眾號、次發於知乎專欄:作品集分享portfolio
歡迎關註:知乎專欄
有問題可私信我,或微信我sjie1029
HArt原創文章,轉載請私信我,同行自覺,違者必究。2017-09-08更新
評論里不少回復說公司加班,申明兩點:
1.照片都是15年的了,現在公司已經保證每周40小時工作,正常上班時間為十點半到十一點,超過45小時每8小時調休一天,用最自由的時間給設計師最自由的創造力空間 ;
2.當時po這些半夜加班的照片只是為了刻意表明我們是一個年輕但熱愛設計的團隊。
——————————————以為為原回答————————————————————
把我們公司(大邦創新 BIGBANG DESIGN 大邦創新諮詢)的設計流程在這裡分享給各位同仁,主要適用於從一個idea開始的項目
OUR PROCESS
Step 1.
了解客戶需求,聽取客戶對行業、對產品、對商業模式的思考,此階段一般需要兩個工作日
Step 2.
初步了解產品的基礎上制定用戶需求調研問卷,粗略了解用戶對該產品的功能需求
Step 3.
制定正式問卷,以下為某銀行客戶制定的用戶需求調研問理財經理App需求調研
Step 4.
對問卷進行定量化分析,輸出問卷分析報告(採樣為300份有效問卷)
Step 5.
根據問卷分析報告以及客戶需求進行用戶需求的制定,輸出用戶需求報告
Step 6.
根據用戶需求報告制定信息架構(information architecture)
Step7.
根據信息結構,結合用戶樣本(Persona)、競品分析、雙維度表等方法確立交互設計目標,並輸出主頁面交互設計提案
Step 8.
所有頁面的交互設計,同時 以交互說明的形式配合甲方PM或開發人員輸出PRD
Step 9.
用戶視覺風格喜好調研
Step 10.
視覺風格分析與提案
Step 11.
選定一個方案進行深化後對剩下的頁面進行視覺設計
Step 12.
視覺規範手冊(pdf 20P起)的制定
Step 13.
交互動效的制定(demo+文字描述),並配合開發製作實際效果
Step 14.
切圖
Step 15.
配合開發,以保證視覺效果還原度及小細節修改
最後,附幾張我們的工作照(都是半夜拍的==)
首先,就交互設計本身來說,雖然很多最終方案結果不同的設計,但其實除了在後期的結果表現階段走向不同的方向之外,其總體設計方法和思維模式總是很類似的。題主可以先看一下幾種經典的交互設計方法流程:
雙鑽石設計流程
以人為中心的設計方法
以用戶為中心的設計方法
這些經典的設計理論被廣泛的應用於各種設計領域之中,如交互設計、交互設計、服務設計、用戶體驗設計等等。仔細觀察不難發現,這些設計理論中的內容相似程度非常高,這其中最重要的內容即為:對人的重視。下面我們看一下交互設計的完整流程是怎樣的:
前半部分:發現問題
事實上,交互設計是一門從平面設計與工業設計之中逐漸被分離出來研究的學科,因此其工作的思路自然也屬於設計師的範疇。通常來說,設計師只有一個工作,並且分為兩個部分,那就是「發現問題,解決問題」。在這裡,「問題」的定義是多樣化的,它既可以是一個既有的困難或者麻煩,也可以是需要滿足被創造的需求等等。甚至於,美不美,合不合適等等,都是「問題」。
因此,作為交互設計師,在設計過程中最重要的就是要明白自己面對的問題是什麼。並且對於問題的理解絕對不能只停留在問題的表面上,而是要儘可能深入到問題的本質里去。
圖片來源:https://www.pinterest.co.uk/pin/357262182925441803/
舉一個非常著名的例子,關於用戶意見,亨利福特曾這樣回答:
「他們(用戶)只會告訴你要更快的馬」 。從中我們可以清楚地知道,用戶想要的是更快的交通方式,而不僅僅是更快的馬,因此汽車大獲成功。當然,如果當時福特先生面對的用戶是一群養馬愛好者,他很可能會做出完全相反的決定。這就引出了設計中最為重要的一環:以人為中心設計。
圖片來源:http://t.cn/R95LsJk
隨著經濟水平的總體上漲與設計行業本身的不斷進步,設計中對於人的重視程度逐漸升高。就像上面的例子所說,福特先生充分理解了他面對的人群,明白對方內心的實質渴望(車)而不是表象要求(馬)。因此,在發現問題的同時,最重要的是:熟悉人,理解人,時刻把人放在第一位。
設計師與用戶研究團隊為了深入理解用戶需求,通常會採取問卷調研、深度訪談、行為觀察等信息獲取方式進行考察,並對其進行匯總,根據所建立的用戶描寫、肖像、角色卡片等形式來呈現。
圖片來源:https://www.pinterest.co.uk/pin/411023903464539820/
如果不這樣進行,很多設計都會出現極為嚴重的後果和影響,不僅導致用戶體驗程度下降,甚至造成更大的生命財產損失。如果你認為這樣的事情只會發生在實際流通的產品設計中,而不會發生在只負責網路與移動產業的交互設計中,那麼下面這一facebook交互團隊犯下的一次非常慘痛的「錯誤」或許能改變你的想法
Mike Monteiro演說:
https://www.youtube.com/watch?v=6h3RJhoqgK8後半部分:解決問題
很多時候,設計的方法或者工具是固定的,根據頭腦風暴,焦點小組討論,故事版討論,紙模原型,電子原型等等方式進行,隨後投入到不同階段的用戶測試。其實,解決問題的方法並沒有強制性規定,那麼應該如何解決問題?
再舉一個通俗易懂的例子,就像烹飪書上經常標註的一句話:「按你的口味調整食譜「。這句話其實是說:「按照實際的問題需求,選擇資源和能力所及範圍所得出的解決方法」。
圖片來源:https://www.pinterest.co.uk/pin/480759328962863195/
由於對不同媒介手法的應用能力,是隨著使用時間的長短以及設計經驗的成長逐漸增加的。解決問題這一環節中,會有不同的方式與手段,從某種意義上來說這也是區分設計師設計能力的方法。因此,很難說解決問題有什麼捷徑,只有對於工具以及技術深入了解,才能不斷提高自身的設計水平。
圖片來源:https://www.pinterest.co.uk/pin/480759328962863195/
總的來說,只要你的解決方案與前半部分所面臨的「問題」充分符合,與設計之初的需求充分符合,這一設計流程就走在正軌。當然,與上面要求符合的解決方案往往並非只有一種,且在提出解決方案的同時,方案又會經歷市場運營、項目策劃、工程部門等等的重重考驗。最終也很有可能會被改得面目全非,但是只有經歷與各部門的磨合之後,設計才有可能落地投放。
當然,到這裡「問題」的解決並沒有結束,版本2.0,3.0,下一代等等的一系列問題,在投放實際市場之後得來反饋,在真實的用戶測試之後得到數據與信息後,這一發現問題,解決問題的流程又開始周而復始,循環往複。不過,對於設計師來說,這就是設計的樂趣之一,不是么?
以上望有幫助,歡迎交流
———————————————————
歡迎關注我的個人官方微信(kang-shishi)
如有藝術留學、院校、專業、作品集方面的問題,可私信康石石諮詢
真實設計過程中,沒有一個項目是因為流程特別正確而成功的。
互聯網這兩年發展很快,做產品的方法論也在不斷變化和改進,現在想學到東西的方法,我建議是做任何產品,把它當成自己的事業,把它當做自己的孩子,從需求到設計,從運營到市場,多思考多實踐,你會總結出適合自己的一套做事方法。
相信很多人跟我一樣,在工作中莫名其妙的做了一些交互設計,然後是無休止的學習......直到有一天,我無意中發現了https://www.coursera.org/(University of California, San Diego)的Interaction Design這門課程。看了以上各位的回答,我忍不住想跟大家推薦這個課程。
因為,你只要學了,就會發現以往的學習都很碎片,經過系統的梳理,你會對交互設計有一個全新的認識,並且,會自如運用在日常工作中。重要的是,還會影響到你的日常生活,你看世界的角度變了,設計靈感也會經常冒出。
還有一個額外的好處是,你會發現,你再也不會因為設計跟別人生氣了。因為有科學的方法可以讓你去說服別人接受你的設計。
這些都是這門課帶給我的好處。目前本人進度7/8,即將進入畢業設計。
PS:最後一門運行和實驗的課,講的是R語言。對於英語不好的學習者來說,這門課很坑爹。其它6門課,對於有工作經驗的設計師來說,還是相對容易的。哪怕你英文不好。本人英文超級爛。十多年考過過四級。不過,我為了這個課程買了一台印表機。
這套課程最有趣的事情是作業。非常有趣。但是,會耗費你大量的時間,請做好心理準備。謝邀!
我也不懂,我在小公司,流程也很不規範。
但我的理解是這樣的:
在這裡不做詳細描述,只是簡單說明一下我的理解
首先根據您的自我介紹:剛入門,沒實際經驗,方案零散,有遺漏。
我自己總結了一些技巧,您看看有沒有用:
1.有來有往,點進去了得有個按鈕讓人點回來;
2.做1想2,做某一層級的設計,要考慮接下去兩級跟往上返回兩級的邏輯關係(為什麼是兩級,主要是我覺得如果從A跳到B要切換3到4次,太繁瑣了,期待大牛糾正,呵呵)舉個例子:登錄界面,一般流程是:填寫登錄郵箱或賬號-輸入密碼-點擊登錄,這是一個正常的流程;要是忘記密碼怎麼辦?還有用戶會不會在輸入密碼是不小心按錯了?
當你到了某一點的時候,記得多問多往縱深挖,不放過任何一個你看得到的東西,比如你把「填寫密碼」按鈕畫好了之後,就要思考填寫密碼可能會出現哪些情況:輸入錯誤?忘記密碼?諸如此類等等等。
3.用戶不是設計師,別人不知道你是怎麼想的,要注意兩點:
一個是節奏,該有的步驟千萬別跳過,雖然有些步驟有時候顯得有點多餘,但是總好過某操作流程過於簡單讓用戶產生疑問,跨度太大容易扯著蛋,用戶會暈的。
二是要有足夠的提示跟說明。比如當用戶進行完某操作之後,接下來他要做什麼?你是如何提醒的?提醒是否足夠,比如某提醒動效持續的時間,等等等等
第二:如何在沒有實際項目經驗的背景下提升自己的能力,同時提高獲得面試的機會跟成功的幾率
1.找一款比較簡答的產品,拆解每一個交互細節,熟悉,最好滾瓜爛熟,然後重新還原,不求精緻,只求能記住每一個細節
2.自己設計一個虛擬項目:比如:你手機里肯定有一款你自己比較喜歡的app,音樂,圖片,閱讀都好。然後嘗試著自己去設計一款類似的產品,注意!!!一定要詳細記下每一個設計的步驟,等設計完了之後回頭自己過一遍,看哪裡漏了,補上,下次不要再犯。
目前只想到這麼多,比較粗糙,歡迎各位指正,一起進步。:)
祝好!
裡面有些步驟是需要輸出文檔的,有些則不需要。不同的項目,不同的需求,流程經過的節點也是不同的。這個需要有實際項目支撐。關說也很難讓你領悟
看不懂英文版的可以私信我要中文版本。。
(其實我是想說關注才給中文版,但是這樣是不是體驗太差呢。。(┬_┬))
別把設計局限在一個平面矩形里,當然也別把交互設計師局限在APP里,想像他是立體的,像是舞台。而在這舞台上,有人這麼說起-交互設計。
所以梨子認為作者不僅局限於交互設計流程這一塊,梨子這裡有一個交互設計案列想推薦給大家,希望能夠幫助到大家。關於互聯網產品設計的方法,在這裡我想挑了幾個講給大家聽。
第一個:不要讓我思考。
這是一個在交互設計中非常重要的原則,用戶是不願意思考的。用戶做每一個操作的時候,它的行為是唯一確定的,你不能給他太多選擇,或者讓中他有思考時間。因為只有當用戶不需要思考去操作,他才會感覺這個操作過程是流暢的。其實用戶體驗對用戶來說是一個非常難表達的東西,他沒有辦法告訴你什麼是好的用戶體驗,對他來說好的用戶體驗就是能夠很流暢的完成這個操作,在這個操作過程中沒有太多的顧慮和太多的困惑。
例如下面這個產品就是一個好的體驗:
這是一個我們常見的電商平台的購買流程,你會發現不同的電商平台會有一個共同的設計地方。他會在這個網頁的上方做一個支付流程的說明,然後用戶會知道我要完成這個支付需要幾步過程,我現在在哪步,還需要哪個步驟可以完成這個支付。這個行為可能對於現在的年輕人來說是多餘的。但是你要知道互聯網還要面對很多年齡很大的用戶,或者說每年會有很多新增用戶。這就是一個不需要讓用戶思考的設計。
第二個:減少用戶的操作
當這個操作行為能用兩步完成,就不要把他設置為三步。每多一次操作就會流失一半的用戶,所以好的產品在設計的時候它不會讓你做很多繁瑣的操作。
下面我們還是舉一個非常常見的「栗子」。
現階段,主要的第三方支付工具,一個是微信一個是支付寶。
在這兩個產品設計中有所不同,微信它的所有操作都是輸入密碼這個過程,但支付寶需要有一個付款,這個設計是有經歷討論,它到底有沒這個必要的,而大部分人認為是多餘的,現在這個操作已經不需要了。
然後你會發現支付密碼這個行為是很複雜的,特別是小額支付。
所以微信和支付寶推出一個功能叫指紋支付,當然前提是你的手機必須有指紋支付這個功能,通過指紋支付完成輸密碼這個過程,這就是在減少用戶操作。你會發現支付寶在這個過程中做的更加巧妙,它可以小額免支付,它讓這個支付的行為變得越加簡潔。
第三個:超出用戶預期
一個基本產品是達到用戶預期,一個好的產品是超出用戶預期,當你的產品超出用戶預期的時候,用戶會有一種很舒服的感覺。
我們來看這麼一個設計,就是滴滴打車和快滴打車,當然現在已經合併了。在兩三年前,他們還在白熱化的競爭的時候,它們在產品設計上面是有高低的。
例如這個場景,用戶在打車的時候會遇到打不到車的情況,滴滴和快滴都推出了他們的新的產品——專車。在用戶打不到車的時候,他們會推送一個信息,「你要不要試一下專車服務?」。
快滴會彈出這麼一個彈窗,彈窗會告訴你要不要試一下專車,他就是一個很簡單的文字。這算是一個中規中矩的設計,它沒有超出用戶預期。
滴滴會彈出,「打不到車,試試專車」。下面附上三條信息,第一條信息是本次行程車費預估為多少錢?這個信息非常貼心,因為專車對你來說是一個新事物,你會考慮到會不會花你很多錢,這個時候你就會猶豫,那在這個時候他已經給你一個明確的信息你大概要花多少錢。第二條信息是你還有多少錢的專車卷可用。他會告訴你你可以享受這麼一個折扣,你要不要用?第三條信息是附近有多少輛專車正在等待為你服務。他會告訴你打不到車不要擔心,你附近有很多專車。
這幾條信息其實都超出了用戶預期,當用戶了解到這些信息的時候,他明顯會感覺到我應該試一試。所以底部的文字是「取消打車」和「去看看」。去看看是一個很輕鬆的用詞,他會讓你覺得為什麼我不去看看呢。所以這樣的設計會讓用戶轉化率明顯增加。
2016-09-21 更新,上面這麼多高票答案,看著真累。
-----------------------------------------------------------
寫那些看不懂 的我就算了,寫點實用的吧國內大小公司的流程不一樣,我也在小公司呆過 大公司也算是呆過 就分別說一下吧
1.小公司的交互設計流程
前期需求階段
第一步先明確項目需求
第二步和產品方面進行功能設計
第三步由交互方面和需求方面確認功能模塊並開展交互設計
交互設計階段
根據需求文檔設計出線框圖 原型
根據原型編輯交互設計文檔
評審交互設計文檔(產品、UI、研發)
評審完畢提交UI與研發如有問題需要迭代修改版本
UI設計出圖切圖 提交研發
產品測試
上線完成。
這是一個整個流程 交互的部分主要在於需求確認 與理解需求,最終設計出原型並提交設計文檔給UI 研發。
2.大公司的交互設計流程
前期需求準備
第一步由需求提供方給產品方面提供需求
第二步產品方面進行產品設計(功能、定位、模式)
第三步產品方面提供線框圖(產品經理也會哦)與交互流程邏輯
交互設計階段
專職交互設計師(國內叫UE或UED)為交互流程邏輯進行優化、提升操作流程體驗
根據優化過的產品交互流程設計交互設計文檔(DRD)
根據產品提交的原型線框圖進行動態交互設計提升用戶體驗(原型線框也有可能是交互畫)
根據線框圖以及動態交互設計完成後,形成高保真原型 提交交互設計項目評審
評審結果通過的情況下提交文檔(DRD)+demo(高保真)到UI部門與研發部門。
以上 ,每一家公司都不一樣,所以上面的答案僅供參考。
-- 打個廣告,這裡有個交互設計的博客,有興趣來投稿!IAMUE-交互設計學堂 ,我有一本針對交互入門的初級書已出版,《交互設計那些事兒》 新手可看---一個完整的交互設計流程,一定是包含團隊溝通和設計驗證的部分,自己一個人琢磨出來的原型,也只能算是交互設計的起步階段。當你做完這份原型,要拿去評審,測試,經過不斷的修改,最終滿足用戶需求,此階段的交互設計就可以算是完成了,如果產品的大方向不變,之後就進入迭代。
所以也沒有「整個交互設計的流程」這一說,從需求分析到開發,交互設計師基本都一直參與,「整個交互設計的流程」也就等於「從需求到開發的整個用戶體驗設計流程」
對於你的面試題,我覺得比較完整的交付方案應該包含:
在做題過程中,如果對需求和商業價值(為什麼要做這個軟體,目標用戶是誰,對用戶有什麼價值)不理解的,可以像面試官詢問,讓他補充說明。
用戶場景分析,聊一下目標用戶是誰,用戶一般在什麼場景下使用該類軟體,解決什麼問題
競品分析報告,聊一下競爭對手是怎麼做的,優缺點在哪,是否滿足用戶需求,那麼你的交互的優點在哪
較保真的交互原型,要求流程完整,路徑通暢,欄位齊全,演示內容模擬(不要瞎寫),不需要做動畫,關鍵點需要文字注釋這是根據個人工作經驗整理出的一個完整的交互設計流程。具體設計項目的時候可能只涉及到其中某一個環節或幾個環節,根據產品設計的階段、你所在設計團隊的工作分配方式和項目情況而定。
一、研究階段
1.思考產品目標
明確做這個產品的目的是為了誰解決什麼問題,或帶來什麼價值。
2.用戶研究
目標:用戶是誰?典型使用場景是什麼?目前存在哪些問題和機會?
可能用到如下用戶研究方法,不限於此:情境訪談 、用戶畫像、體驗地圖、用戶觀察、日誌法、焦點小組等。
3.行業現狀研究
桌面研究:通過桌面研究了解產品所在行業發展現狀和趨勢。我們的產品可能在市場中處於什麼位置。
競品分析:分析市場上典型競爭對手的服務情況,詳細分析競品的產品策略、功能架構、設計重點等內容,提出我們的特色突破點,為後期設計提供依據。
啟發式評估:若進行已有產品的改版設計,應對已有的產品進行啟發式評估,評測現有產品的可用性和易用性,發現問題。
二、定義階段
結合前期用研究的結果,定義哪些用戶群體解決什麼問題,分析典型場景及用戶需求,定義產品功能。
1.確定目標用戶群屬性和特徵:包含用戶人種學特徵、消費偏好、審美偏好、操作偏好等。為後期的設計指導交互原則和視覺設計風格。
2.分析典型使用場景:用戶在什麼時間、地點和環境下,用戶目標是什麼、現存在哪些問題。
3.需求分析:分析目標用戶在典型場景下遇到的問題,挖掘潛在需求,確立產品目標,為之後的設計提供瞄準的方向和重點。
4.功能定義:定義產品最主要的功能和基本功能,輸出功能框架圖。必要時,可使用卡片法確定功能框架。
三、概念設計階段
這一階段的目的是針對關鍵功能的概念設計,尋找多種可能的解決方案,定下現階段最優的關鍵功能設計方案:
針對用戶在某一典型場景下的任務,使用故事版的方法,進行目標分解。設計團隊成員可以坐在一起頭腦風暴,發散思路,設計各種可能可行的方案。最終篩選並優化,定出最符合用戶心智的交互概念方案。
四、詳細交互設計
確定概念方案後,就可以進行具體的交互設計,具體的交互設計產出物如下:
1.詳細功能框架圖/功能列表
2.交互邏輯流程圖
3.交互說明文檔,包含所有狀態的交互頁面,和交互說明、交互規範。
中間可能有多次評審和反覆討論修改的過程,在這個過程中方案不斷完善。
五、設計方案驗證與優化
交互原型輸出後,需要進行設計師內部的走查,可以針對用戶進行可用性測試,A/Btest,5秒測試等。目的在於發現用戶在使用產品中可能出現的問題、獲取用戶對設計的反饋信息。其測試和評估結果將作為為設計修改的數據支撐。完善設計後,快速迭代。
初入門不要以網上的文章作為你的知識來源,不系統,太零碎,多看幾本書,多體驗優秀的產品,並做體驗總結,理解別人為什麼會這樣解決問題,甚至還可以復刻一版並優化。
但是我還是會回到你的問題,以自己的經歷說一下交互設計的過程,交互設計的過程不是產品的整個設計過程,在時間充足的情況下,流程會比較正規,下面說說正規的流程(不正規的情況就是完全不安規則來,只為快速完成而坐),在產品需求階段,協助產品完成需求,做相關的用戶分析,競品分析;
交互設計階段:根據需求詳細梳理任務流,頁面流,輸出交互設計方案(一般我做的是主場景),如果是新項目還會輸出基本的設計規範和原則。相關人員評審討論,根據評審結果修改,問題少會直接出全場景,簡單的交互設計說明,完成全場景再次評審,修改,通過了先交互給視覺設計師,有必要的話做可行性測試,這個過程很多並不是這麼順利,每一個設計都可能和產品,運營,業務,視覺,開發進行溝通;
在視覺設計階段:把完整的交互設計說明補全,協助視覺設計師完成視覺設計(主要是解答疑問,遇到的問題解決);
開發階段:協助開發完成開發(主要講解產品邏輯,交互動效);測試階段:驗收,我們叫交互還原測試,檢查是否達到了交互體驗的目標,是否按照交互文檔設計等很多東西,然後就盯著開發改bug;
上線了:寫交互體驗報告,為下次優化做準備。不同的項目流程會不一樣,交互設計階段是必不可少的。手機碼字太慢,就先些這麼多吧,
推薦兩本書一本是了解互聯網生產的過程的書《用戶體驗要素》,第二本偏個人實戰經驗的《破繭成蝶》對於入門級別的會有交大的幫助。如何判斷一個設計是好的設計還是糟糕的設計?
大部分人在工作中可能都會遇到這樣一個問題,自己做的設計究竟合不合理,人不人性化。
許多人的設計方法就是:參考其他人的做法,調整下,評審會上通過了,上線後再根據數據調整。長此以往,浪費效率。
這樣的流程缺乏自己的一套判斷標準,大部分判斷都是基於主觀意識,並不專業和穩定,對於某些設計比較難以判決。
日常累積時,也會感覺到看到很多app樣式,但是別人為什麼這樣設計,這樣設計又是基於怎樣的考慮,雖然能說上一兩點,但是思考角度往往也不夠周全。如果你有這樣的困擾,那麼,這篇文章也許能幫助到你。
什麼是人性化設計?
相比與十多年前,我們現在日常生活中接觸到的東西功能越來越多,不同的電器甚至能互相傳遞數據,人們的學習成本逐漸提高。比如早期的諾基亞手機,功能雖然不算多,但都會有一本厚厚的說明書告訴你如何使用,哪怕是設置鬧鐘都會有好幾頁的說明,現在我們日常操作的軟體,可是比鬧鐘複雜多了。那人們要如何使用呢?
於是,有了人性化設計的理念,這種理念提倡先理解用戶的屬性,需求,能力和行為,再分析並設計來滿足人們的需求。
優秀的設計需要良好的溝通,良好的溝通起始於對心理和技術的理解,告知用戶什麼是可行的操作,會發生什麼,帶來什麼樣的結果,當錯誤發生時,讓用戶理解如何修正。體驗和心理是分不開的,良好的體驗將帶來愉悅的感受。
人性化的設計需要充分了解和滿足用戶,人往往是通過潛意識做出判斷的,你理解的用戶的需求也許只是個偽需求。因此,人性化設計提倡儘可能不要限定問題,快速測試不同的概念,每次測試後有所改進,找到真正的需求。
設計七原則
日常心理學中提出了七條設計原則
1.可視性
所設計的產品能不能讓用戶明白怎麼操作是合理的,在什麼位置以及如何操作。用戶是否容易認知。
可視性好的產品,用戶在第一眼就能通過潛意識明白如何操作,甚至不需要思考。
2.示能
簡單來說,示能就是告訴展示能做什麼。比如一把椅子,它本來只是幾塊木頭,但是通過設計成椅子的形狀,人就能本能地知道它是可以供自己坐在上面休息的。在軟體中,一個需要點擊的部分會被設計成按鈕,按鈕傳達出它可以被點擊,這種特性就是示能。
3.意符
意符聽起來有點難理解,它和示能的關係很緊密,你可以把它理解為傳達意念的符號,它是示能的符號提示功能。比如指明方向的箭頭,可以點擊的文字鏈下的橫線。
意符是一種提示,告訴用戶可以採取什麼行動,已經該如何操作,它必須是可以感知的,否則不起作用。
一個意符可以是詞語,圖形化的區域,你可以把意符串聯成一個連貫的整體。
比如,需求用戶點擊一個區域,會設計一個按鈕,這叫做設計意符。它本設計成容易點擊的樣子,這叫做設計示能。
4.反饋
緊跟著意符後便是反饋,接著按鈕的比喻,當按鈕被用戶點擊後,好的互聯網產品會設計好按鈕的點觸效果,如果發生錯誤,還需要設計好對應的提示。這些叫做反饋,告知用戶剛才的操作是可行的並且是已經執行的。
互聯網產品特別明顯,當網路不好的情況下,一個點擊按鈕跳到新界面的操作,如果按鈕沒有設計點觸效果,用戶點擊按鈕,並沒有跳轉到對應的界面,就會給用戶造成極大的困擾。「是不是我沒點中按鈕?」,「這是怎麼回事?按下去怎麼沒有反應」,「難道這個不是按下去的嗎?是不是我哪裡弄錯了?」
反饋必須是及時的,即使延遲1/10秒都會讓人不安。
反饋是體驗中相當重要的一環,卻常常被忽視。
5.約束
約束即提供物理,邏輯,語義,文化的約束指導行動,讓用戶容易理解。
6.映射
映射表示兩組事物要素之間的關係,做什麼,產生什麼樣的後果。
如果能清晰理解控制,行為和預期結果之間的映射,產品就會容易使用。
自然的映射遵循格式塔心理學的兩個原則:
1.分組:相關的控制項應該組合在一起
2.鄰近:控制項應該靠近所要控制的對象
好的映射需要用心、規劃、思考和理解人們的行為方式,在此基礎上讓他們理解如何使用。
7.概念模型
概念模型應該是簡化的說明,告訴你事物是如何工作的。
比如一把剪刀,當我說起剪刀時,你頭腦中是不是第一反應就想出了一把剪刀的形狀,你也知道如何使用它剪裁東西。但是,如果我給你一把造型非常奇特的剪刀,你從來沒有見過,當我要求你使用它剪裁東西時你不懂如何使用。這種情況就是,這把剪刀不能提供給你一個良好的概念模型。
人們心中所理解的事物如何運作的概念模型也被稱作心理模式。如果你需要用戶好好使用你的產品,那麼請給他一個易於理解的概念模型。
好的概念模型有一個重要的判斷屬性:即用戶是否能預測自己的行為結果。
設計應該利用好示能,意符,良好的映射還有約束指導用戶的行為,減少不當行為發生的機會。
當不當行為發生時,要利用好反饋讓人發現並糾正,結合簡單清晰的概念模型,人們了解到發生了什麼和系統的狀態,判斷自己的合理行動次序,提升總體體驗。
讓用戶獲得積極心理,擁有愉悅的心情, 這便是好的人性化設計。
很多大神說的很好~目前大四學生黨一枚~
一個完整的交互設計流程是怎樣的。這個問題有一個專門的流程,不過每個設計師不一樣,他們的流程也是不一樣的,比如有些喜歡前期調研豐富一些,有些後期視覺UI更豐富一些。
前期你想做一個項目~你可以先進行
選題(這個選題包括很多,包括你的選題動機、背景及意義、產品或項目的用戶需求分析等等)
前期的調研及概念設計(分為量性資料搜集和定性的資料搜集),主題清晰化之後
建立用戶角色模型
情景設想
調研(這個調研是確定主題和角色模型後,根據不同的用戶人群使用不同的調研方法 eg:KJ法、觀察法、訪談法、調查問卷等等)
案例分析、競品分析
產品定義(我們大學的專業負責人導師讓我們要學會一句話定義產品)
功能流程的確定
卡片分類
信息架構
線框圖
紙膜版測試
測試報告
再測試
再報告(紙膜版測試是做交互設計中很重要的一個環節)
最後就是界面視覺設計了
可以先擁有一個美感版~確定顏色的基調
來一個情景故事
再ps、ai、ae、pr
............
前期細緻的用戶分析和需求分析,這階段多是思考目標用戶畫像以及為什麼有這些需求?需求的應用場景等,梳理出來目標用戶的特徵、用戶場景以及用戶的主要任務等。
中期的產品交互思考和設計,包括用戶旅程圖、信息結構、框架圖、頁面流程圖、頁面交互稿、細節交互等。
後期的跟進視覺和開發保證交互設計的實現,以及上線後觀察數據以及根據用戶反饋的修改。
在簡書上看到的,很棒值得分享一下,另外作者其他文章也是很有價值的
推薦閱讀:
※請問一下香港理工大學交互設計研究生申請細節?
※哪些產品的設計細節讓你感動?
※手機頂欄有沒有必要顯示耳機插入的標誌?
※Sketch 畫原型比 Axure 好用嗎?為什麼?