UI設計師必須要了解從0-1的設計流程

飛凡實驗室 發佈 2022-11-26T22:45:56.211578+00:00

UI設計師正在面臨著2大困境,第一大困境就是有太多的知識觀點需要學習,第二大困境是不知道如何去將這些知識進行取捨和歸納設計師面臨的知識困境網絡上碎片化的知識越來越多,UI設計師正在面臨著2大困境,第一大困境就是有太多的知識觀點需要學習,第二大困境是不知道如何去將這些知識進行取捨和

UI設計師正在面臨著2大困境,第一大困境就是有太多的知識觀點需要學習,第二大困境是不知道如何去將這些知識進行取捨和歸納


設計師面臨的知識困境

網絡上碎片化的知識越來越多,UI設計師正在面臨著2大困境,第一大困境就是有太多的知識觀點需要學習,第二大困境是不知道如何去將這些知識進行取捨和歸納,各大設計平台寫設計流程的文章也是多如牛毛,而這些文章的共同點都基本上是在Design Thinking的模型之下進行演進和變化的,而如果仔細分析和觀察,你會發現他們的共同點和差別,只有了解這2點,才能夠幫助我們更好的學習設計流程。


3種常見的設計流程模型

一、設計思維

設計思維是一種基於解決方案的解決問題的設計方法,在「設計思維(Design Thinking)」在被不同的學者提出之後,IDEO是第一家將設計思維應用於商業問題的解決之中。IDEO的創始人,David Kelley,後來又在美國史丹福大學創建了著名D.School,斯坦福設計學院。設計思維強調以人為本的設計思想,它需要花費更長的時間做觀察、訪談來深入理解用戶,對解決未定義或未知的複雜問題極其有用。它主要分為5個步驟:

1、同理心(Empathy):收集對象的真實需求

2、定義(Define):分析收集到的各種需求,提煉要解決的問題

3、頭腦風暴(Ideate):打開腦洞,創意點子越多越好

4、原型製作(Phototype):把腦子中的想法動手製作出來

5、測試(Test):優化解決方案

*圖片素材來源於網絡,侵權請告知刪除


二、設計衝刺

設計衝刺(Design Sprint)最初起源於谷歌,融合了設計思維(Design Thinking)和敏捷開發(Agile)兩大方法論,設計衝刺更適用於已知需要解決的且較為明確的問題,它融合了敏捷開發,最大的優勢在於 5 天內完成整個創新流程。它主要分為5個步驟:

1、理解(Understand):理解目標

2、定義(Define):定義問題

3、發散(Diverge):探索各種解決方案

4、抉擇(Decide):找到最優的解決方案

5、原型(Prototype):設計原型

6、驗證(Validate):驗證方案的可行性


*圖片素材來源於網絡,侵權請告知刪除


三、雙鑽模型

雙鑽模型來源於IDEO的以人為本的設計思想,以及@d.school的設計流程,「雙鑽模型」和設計思維模型一樣,需要花費更長的時間來觀察和理解用戶,對解決未定義或未知的複雜問題極其有用,一般在網際網路行業中使用的比較多,它分為4個步驟:

1、發掘/調研(Discover /Research):洞察存在的問題 (發散過程)

2、定義/歸集(Define/Synthesis):聚焦、界定要解決的問題 (聚焦過程)

3、前進/構思(Develop/ Ideation):探索潛在的各種解決方案(發散過程)

4、交付/實現(Deliver /Implementation) :找到最優的解決方案(聚焦過程)

*圖片素材來源於網絡,侵權請告知刪除


經典設計模型的共性

我們如果仔細觀察就會發現,這3種設計方法論不變的框架都是從發現問題(發散、聚焦)到解決問題(發散、聚焦)的過程,其中每個環節都是從發散到聚焦,圍繞這個大的框架,我們接下來要思考的就是:

1、發現問題:

問題有哪些?(發散)

問題這麼多,哪些才是真正的問題?(聚焦)

2、解決問題:

如何解決這些問題?(發散)

這些解決方案,哪些是最優可實施的?(聚焦)


我總結的設計流程

在這張圖中,我在雙鑽模型的基礎之上進行演變,讓他更加匹配現在網際網路設計團隊的需求,其中增加了一個鑽的模塊,分別為交付和驗證的環節,主要原因在於現在的公司更加重視設計師的落地和數據分析能力。整個的設計流程分為6個步驟,分別為:

1、探索:洞察問題(發散)

2、定義:定義關鍵問題、定義業務和設計目標(聚焦)

3、發散:找到各種解決方案(發散)

4、設計:找到最優的解決方案,進行設計執行(聚焦)

5、交付:完備的交付文件(發散)

6、驗證:驗證設計方案的效果(聚焦)

同時我也將每個階段的目標、所需的工具方法、交付物總結了出來,方便大家進行有針對性的學習


步驟一、探索(洞察問題)

目標

1、洞察用戶需求(表層需求&深層需求)

2、了解業務需求*需求的幾種來源:高層、用戶、競品、數據、內部走查

工具方法

問卷調研、用戶訪談、競品分析、用戶建模、用戶體驗地圖、桌面研究、焦點小組、數據分析、頭腦風暴、交互視覺走查

交付物

問卷分析報告、用戶調研報告、競品分析文檔、用戶體驗地圖、桌面研究報告、數據分析報告、交互走查報告


步驟二、定義(定義關鍵問題、定義業務和設計目標)

目標

1、將問題收攏聚焦關鍵問題

2、定義業務目標和設計目標

工具方法

1、需求分類(卡片分類)

2、需求如何刪減(商業價值&用戶價值)

3、如何制定需求的優先級(KANO模型)

4、數據指標(GSM模型、五度模型)

5、其他(AARRR模型、用戶體驗地圖)

交付物

1、問題總結文檔


步驟三、發散(找到各種解決方案)

目標

1、收集儘可能多的有效、優質解決方案

工具方法

1、頭腦風暴

2、競品分析

交付物

1、頭腦風暴記錄文檔

2、競品分析文檔


步驟四、設計(找到最優的解決方案,進行設計執行)

目標

1、篩選最佳的解決方案

2、將解決方案製作成交互原型

3、產出視覺方案

4、設計評審,打磨方案

工具方法

1、方案篩選(實現成本&用戶成本)

2、交互5要素

3、情緒版

4、形、色、質、構、質

5、柵格

交付物

1、UE(信息架構圖、交互原型圖)

2、UI(UI設計稿、動效設計、IP形象設計、規範系統、控制項系統、圖標系統、插畫系統)


步驟五、交付(完備的交付文件)

目標

1、配合開發交付全面的設計文件

工具方法

暫無

交付物

1、互動設計文檔

2、UI設計文檔(UI設計稿、切圖文件、標註文件)

3、動效文檔(動效標註、json代碼)


步驟六、驗證(驗證設計方案的效果)

目標

1、驗證設計效果

工具方法

1、問卷調研

2、用戶訪談

3、數據分析

交付物

1、問卷分析報告

2、用戶調研報告

3、數據分析報告


總結

這是饅頭根據自身多年的工作經驗總結出來的設計流程,每家公司根據本身的特點可能會有些許差異,歡迎大家一起進行補充和交流。這個設計流程能夠幫助我們看到設計全貌,知道自己所處的環節,知道自己需要補全哪些知識。


課程&合作,關注微信公眾號:飛凡實驗室

關鍵字: