用斯坦福Design thinking設計一個摳圖功能

01-28

最近正好閱讀了關於斯坦福DT的設計理念，拿一個小項目練練手，當然這是一個虛擬項目。Design thinking（以下簡稱DT）它可看作一整套解決問題的方法論，可以適用於各種問題的解決上，並不只是設計上。
流程包括5步驟：

第一步：Empathize（「移情」，意思是要有同情心，同理心，去當一次客戶，體會客戶有些什麼問題，社會化的思考在此最有體現）

第二步：Define（下定義）在了解了客戶之後，我們要做的事情是寫出一個Problem Statement來闡述一個Point of View（POV）。

第三步：Ideate（「設想」，其實就是做頭腦風暴，儘可能多的去想解決方案，想自己項目可能涉及到的人，然後再簡化為一個具體的方法）。

第四步：Prototype（「原型」，用最短的時間和花銷來做出解決方案）

第五步：Test（顧名思義，測試產品原型）

詳細介紹請至：斯坦福大學 Design School 所倡導設計思維的原則和步驟是什麼？

需求說明

背景：

根據移動端修圖場景，為某修圖軟體設計一個摳圖功能。

目標：

以用戶為中心，使「摳圖」功能任務流程順暢且易用，並完成用戶目標，以此為導向設計。

人群：

使用修圖類app，並對「摳圖」有一定需求的人群

DT的流程設計步驟：

Part1：Empathize 同理心

此步驟的關鍵，要求產品設計師站在用戶角度去思考問題，去調查並理解用戶的需求與痛點。可以用到的方法有：問卷調查、深入訪談，實驗室觀察法t。

首先，我先通過交互「五要素」，即人、行為、目的、場景、媒介，進行腦暴，拓展「摳圖」功能可能涉及到的相關信息，便於下一步有針對的性的設計問卷調查。

第二步，設計問卷。

第一題，將目標人群篩選出來。人在面臨問卷調查時的主觀性是非常強，所想並非與自己的實際行為保持一致，對於未使用過摳圖的人的回答會對我們的結果產生誤導。對於後續問題，將在腦暴中產生的想法進行進一步驗證。

為提高問卷的回收率，在擴散時不僅需要發個紅包活躍下群氣氛，同時也需要在語言上進行情感化設計，讓潛在用戶無法」拒絕「你的請求。

從以上的問題中，我們能發現，

①目前市面上的軟體中的摳圖功能使用體驗是有很大的提升空間的。

②扣完圖後，直接完成任務和需進一步美化的用戶行為相當。

③用戶對於多已扣圖合成需求較大。t

第三步，深入訪談。

問卷調查是一種定量調研，要真正了解用戶所想，挖掘出其背後真實的需求並剔除偽需求需要進行定性調研即一對一的深入訪談和實驗室觀察用戶操作。

選取2個修圖中間用戶和1個專家用戶進行深入訪談，根據訪談結果及行為反饋整理及如下親和圖，藍色為行為，紅色為痛點：

圖中可看出，在摳圖任務的第一步及完成後，都能「選擇場景」這一步驟，該步驟屬於重複行為。

紅色標籤痛點有：

摳圖步驟中：①在旋轉圖片時經常會誤摳。②有些細小地方沒摳圖沒及時發現，需從「處理界面」返回上一步。③邊緣處理不理想。

合成處理步驟中：①不滿摳圖效果，重新扣。②合成素材單一。③不能添加文字。

第四步，繪製用戶旅程圖。

該步驟需通過實驗室觀察法，觀察用戶的操作行為及面部情緒來繪製，但由於條件限制，因此本人親自上陣體驗天天P圖而成。

可以看出在「摳圖」和「合成處理」中，用體驗在整體過程中是較差的。於是這兩關鍵步驟點也將是我們重點優化目標。

Part2：Define 下定義

此步驟，根據Party1得出的所需解決的需求與痛點，確定一個設計方向。

首先，為確保設計方向正確，我們需要對產品或是競品展開分析，發現不足及可改進的地方，此處我選擇了「5E原則」，如下圖。

接下來，結合Party1和競品分析，繪製出卡諾模型，判斷功能優先順序關係。

最後，根據現階段的實際情況，確定方向及需求優先順序。

方向：

借鑒天天P圖的操作流程，優化操作

1.0功能版本先滿足基本功能流程（卡諾模型中「基本因素），

更多個性化功能（卡諾模型中「期望因素」）根據產品開發成本及周期適當添加並為其迭代留出位置。

需求優先順序：

更加有效的摳圖方式（畫筆+橡皮） > 觸點調節

> 預覽對比 > 貼紙和文字的個性化處理

> 移動功能 > 幫助

> 載入狀態 > 其他個性化摳圖方式

Part3 Ideate 設想

Part2中需求優先順序已經確定，接下來就需要利用我們產品及設計師的頭腦去解決問題，提高設計方案。

一、如何設計更有效的畫筆？

市面一般的摳圖軟體，採用的是手勢滑動，依據滑動路徑判斷摳圖區域並智能摳圖，其主要弊端在於效率低。於是，在摳圖效率及準確性上需要下功夫。

方案一：

回到使用場景，在一張2D圖片中，扣出來的東西一定是一個面，一個範圍內的全部，因此直接把這個範圍圈出來，比慢慢塗抹效率更高。

方案二：

回到使用場景，絕大部分人要扣的內容都是人臉，人臉的膚色相對應複雜的景物圖色值是相近的。因為通過取某一色值，將在一定色值誤差範圍內容的內容全部選中，就能極大的提高效率。

方案對比：

二、如何設計更精細的橡皮？

市面一般的摳圖軟體，由於人為手動，橡皮路徑難以與選區邊緣貼合，導致最終的摳圖效果鋸齒感強烈。另一種情況，多次摳圖放入素材背景中，可以看出，由於亮度、光線角度及對比度等不一致性，導致合成的圖片太過生硬而不自然。

方案：

通過模糊或半透明漸變，能夠把本來生硬的合成圖片變得更自然。

Part4 prototype 原型

重要的設計思路已經確定後，接下來的關鍵就是將想法圖形化，繪製低保真原型。

原型之前，我們需要加整個任務流程整理清楚，便於後續設計及讓開發明白，如下圖：

在製作原型的時候，我們需要根據Part1至3中總結的需求、痛點及方案為目標導向而設計，同時考慮摳圖功能只是修圖軟體中的一個功能，需要跟其他功能在界面及交互上盡量保持一致性。

摳圖第一步，選擇場景：

第二步，摳圖界面：

第三步，橡皮界面：

第四步，處理界面：

原型畫完之後，需要對照走查表，看看有沒有漏畫的界面，同時對其補充詳細的交互說明。

Part5 Test 測試

雖然摳圖屬於一個工具型產品，但我們此次設計方案的目的是為解決摳圖及橡皮的效率，因此在做可用性及易用性的測試上需要完整的功能實現才能測試，所以此環在這裡省略。

總結：

此文中開頭的問卷調查，在我做完之後發現其實是有點雞肋的。花了較多的時間調查卻沒有得到很有用的數據，本身作為用戶也是能夠明白對於摳圖功能的需求與痛點。問卷調查在做簡單及小功能時是多此一舉，甚至浪費時間。

同時，本文在某些地方仍有些欠缺，但是希望能夠給大家一點幫助，尤其是互聯網新人。

相關文檔：

知乎鏈接：斯坦福大學 Design School 所倡導設計思維的原則和步驟是什麼？

IDEO首席執行官Tim.Brown的TED演講Designers -- think big!

問卷地址：騰訊問卷

訪談提綱：https://pan.baidu.com/s/1skXCSKP

另外，本人仍然還在求職中，地點深圳。

既然說到美圖了，附上幾張近期拍攝的圖片，喜歡的可以下載當手機壁紙喲~O(∩_∩)O~