很多人說看過很多設(shè)計道理卻依然做不好設(shè)計，還不如直接看設(shè)計案例來的簡單粗暴。今天為大家找到一篇實戰(zhàn)好文，一個人，3天時間，打造一款A(yù)PP全流程設(shè)計，學(xué)起來吧！

幾周前，我接到一個設(shè)計需求是為食品行業(yè)設(shè)計一套解決方案，甲方給出的時間是必須在3天內(nèi)完成。乍一聽，可能會覺得這幾乎是不可能的，但是如果你熟悉“GV Design Sprint ”（譯者注：GV Design Sprint就是一個專業(yè)的設(shè)計流程方案，想了解的朋友請見https://designsprintkit.withgoogle.com/introduction/overview），那么就會明白，這實際上是可以做到的。

我發(fā)現(xiàn)這是一個非常好的機會，可以在這么短的時間內(nèi)實踐一套設(shè)計方法。在這篇文章中，我將逐一向大家分解我的設(shè)計過程和每天的設(shè)計進(jìn)展。

項目背景

Common Food是一個使用社區(qū)支持農(nóng)業(yè)(CSA)出售水果蔬菜的農(nóng)場。人們需要在年初提前預(yù)定農(nóng)場一年的收成，然后在生長季節(jié)里，社區(qū)成員每周都會收到一箱食品。

（譯者注：CSA的運作過程通常由認(rèn)同相同理念的社區(qū)支持者（個人或單位）采用共同購買的模式，預(yù)先支付一筆費用給當(dāng)?shù)氐男∞r(nóng)戶預(yù)約一季或一年的收成，農(nóng)民收成后，再根據(jù)實際產(chǎn)出的多寡分配給會員，如此達(dá)到結(jié)合社區(qū)力量支持在地農(nóng)民采用有機農(nóng)耕的積極意義?！俣劝倏疲?/p>

設(shè)計挑戰(zhàn)

設(shè)計一款應(yīng)用，幫助普通農(nóng)場每周能向會員們賣出更多的農(nóng)副產(chǎn)品。幫助他們個性化的推薦食品方案，以滿足會員們不同的知識水平，興趣和飲食限制。

第一天：資料收集

1. 研究方法

研究階段往往會占用一些時間，所以盡可能的利用手頭現(xiàn)有信息是節(jié)省時間的好辦法。市場環(huán)境二手資料，競爭對手，用戶調(diào)研或者直接去App Store中收集用戶評論，我需要盡早了解清楚用戶的思維模式。

2. 用戶調(diào)研

Common Food 公司會在每個季度對會員們進(jìn)行回訪，以便能更好的了解他們的喜好，以下是今年的一些反饋：

• “我喜歡烹飪和做罐頭。我可以多買一些西紅柿嗎？”
• “大頭菜我不喜歡吃，我把它都扔掉了，不過生菜確實很好吃?！?/li>
• “我兒子對花椰菜過敏，所以我們從不吃花椰菜。另外我喜歡吃蒜蓉，但不知道怎么做。”
• “我希望我能有更多的大頭菜，然后用來做泡菜?！?/li>
• “ 我覺得我們應(yīng)該需要更多的CSAs，繼續(xù)擴大農(nóng)場的規(guī)模。我現(xiàn)在看到了很多轉(zhuǎn)基因的怪物農(nóng)作物，希望有渠道能及時發(fā)布最新消息?！?/li>
• “我們能不能弄到更多的甜菜？”
• “我從來沒聽過白菜，它看起來很漂亮，但是我不知道怎么做這道菜?！?/li>

一份來自Field Agent的最新報告發(fā)現(xiàn)，不管是在計劃內(nèi)還是計劃外購物的網(wǎng)購者來說，農(nóng)產(chǎn)品都是一個很受歡迎的類別。65%的受訪消費者表示，他們購買的是新鮮農(nóng)產(chǎn)品，與冷凍乳制品并列第一。31%的人說他們一時沖動買了新鮮水果和蔬菜，超過了零食（23%）和糖果（14%）。然而，39%的網(wǎng)購者并不會在網(wǎng)上購買新鮮農(nóng)產(chǎn)品，因為他們更喜歡去菜市場。

3. 市場調(diào)研

市場研究公司Mintel發(fā)現(xiàn)：盡管消費者越來越多的轉(zhuǎn)向網(wǎng)上購物，但只有十分之一的美國人會通過電商購買新鮮的農(nóng)產(chǎn)品，肉類，家禽和魚類。該研究建議：為了打消消費者的顧慮，提高銷售額，零售商應(yīng)該多提倡節(jié)約成本，并提供更全面的產(chǎn)品信息，以建立信任，提升價值吸引力。

研究表明：亞馬遜的“購物車和收藏”等功能對于忙碌的消費者來說也是一個很有吸引力的點，特別是女性（48%）比男性（37%）更有可能在線購買，做好功能體驗很重要。

4. 頭腦風(fēng)暴

腦暴出的問題

1. 我們?nèi)绾问占脩粜枨髷?shù)據(jù)來減少浪費和分配食品？
2. 我們?nèi)绾瓮ㄟ^季節(jié)性食物和促銷活動來增加銷售業(yè)績？
3. 我們?nèi)绾螏椭鷷T根據(jù)他們的飲食偏好發(fā)掘額外的食物需求？

5. 用戶畫像

用戶調(diào)查的結(jié)果提供了足夠的信息來創(chuàng)建用戶畫像，我選擇創(chuàng)建與年齡和性別都無關(guān)的角色，以便能夠?qū)⒏泳劢乖谌绾纹降鹊膶崿F(xiàn)用戶目標(biāo)上。

用戶畫像

6. 競品分析

當(dāng)我準(zhǔn)備進(jìn)入草圖階段時，我將會研究在相關(guān)行業(yè)或競爭對手那里類似的問題和解決方案，以確定最佳方案。

（1）盒子大小和內(nèi)容分類

FarmBox Direct和Farm Fresh to you兩款產(chǎn)品分別提供不同的盒子大小和產(chǎn)品選項。（譯者注：為什么會定義盒子大小，這是因為他們每周會發(fā)放給會員的食品是以盒子來計量的。）

（2）自定義盒子裝的食品種類

FarmFresh to You讓你定制你的盒子，添加或刪除農(nóng)產(chǎn)品和設(shè)置數(shù)量。但你必須充會員才能定制它，與此同時，你也可以為排除項創(chuàng)建項目列表。

FarmFresh to You

（3）真實的食品照片

Farmstead 允許添加任意數(shù)量的購物清單，你可以添加，刪除和瀏覽，都沒問題之后再來結(jié)賬。Farmstead提供真實新鮮的產(chǎn)品照片，不像其他競爭對手使用庫存的照片。

7. 方案思考

我的解決方案是設(shè)計一個APP，從會員那里收集數(shù)據(jù)，比如家庭規(guī)模、飲食偏好等等，讓會員們可以輕松定制季節(jié)性食譜。利用人工智能了解會員的飲食習(xí)慣，提供食譜，飲食建議和運營一些有針對性的促銷活動，取得雙方共贏。

這些數(shù)據(jù)可以幫助我們從會員那里得到反饋，然后就可以知道他們在哪個季節(jié)可能會重新訂購哪種類型的產(chǎn)品或組合，以及他們實際上最喜歡什么產(chǎn)品。

第二天：草圖和設(shè)計

我喜歡在自己感覺“明白了”之后開始畫草圖，我會把自己的想法都畫出來，然后再把自己覺得不好的想法剔除掉，保留自己覺得最好的效果。我會通過繪制用戶旅程地圖來定義用戶任務(wù)和目標(biāo)。

1. 用戶旅程地圖

解決了用戶角色，競品分析和草圖方案，接下來，我就開始為注冊了這些服務(wù)的會員們設(shè)計流程。一旦他們通過APP首次下單，我們的數(shù)據(jù)庫中就有了用戶的日程安排、發(fā)貨和賬單信息。一旦確認(rèn)了這些流程信息，我就準(zhǔn)備開始畫線框圖。

2. 線框圖

線框圖是APP的骨架，這讓我在開始做視覺設(shè)計之前，能夠?qū)Ｗ⒂陉P(guān)鍵功能、元素和交互。我選擇了高保真線框圖，這樣我只需要在一些色彩，配圖，和圖標(biāo)上進(jìn)一步思考視覺呈現(xiàn)。

3. 風(fēng)格板

在畫好線框圖之后，我會找相同行業(yè)內(nèi)的APP視覺做一個風(fēng)格板來作為設(shè)計參考。

4. 配色方案

我選擇了鮮紅色作為主色。鮮艷的顏色會讓人胃口大開，紅色也會引發(fā)購物欲望（促銷、清倉、熱鬧等氛圍）。

5. 字體選擇

6. 圖標(biāo)設(shè)計

當(dāng)說到圖標(biāo)和節(jié)省時間這個話題時，我不建議把它們都畫出來。盡管我很喜歡自己畫圖標(biāo)，但是這次時間上并不允許。我推薦一些圖標(biāo)庫，比如：Material Design icons （https://material.io/tools/icons/），或者我這個應(yīng)用用到的一個圖標(biāo)庫The Noun Project （https://thenounproject.com/#）。

在利用這些圖標(biāo)庫時，請注意購買版權(quán)，如果不想付費，也必須注明圖標(biāo)來源，定稿后有時間再來重新畫。

7. Logo設(shè)計

我期望這個APP能有一個清晰易懂的名字，同時也希望能有一個與名字非常匹配的Logo。在思考了很多名字之后，我覺得“FameCrate（農(nóng)場條板箱）”這個名字非常的適合，通過不斷迭代，優(yōu)化，最終得到了下面這個Logo。

8. 視覺設(shè)計

我喜歡嘗試不同的風(fēng)格和設(shè)計變化，我對第一稿不滿意，因為缺乏整體上的一致性，然后不斷優(yōu)化，直到最終全局頁面都能做到統(tǒng)一協(xié)調(diào)并符合自己的設(shè)計預(yù)期為止。

第三天：交互原型

到了第三天，我完成了最后的視覺設(shè)計，便開始做可交互原型。我等到這個階段才開始做這事，主要是因為如果在線框階段就開始做原型的話，盡管它們是高保真的（我經(jīng)常這么做），但會花很多時間在交互界面上。對于這個項目，我在設(shè)計完成后再來添加交互動作，其實是為了節(jié)省時間。

1. 最終設(shè)計

2. 自動動畫

我會用Adobe XD的自動動畫（https://helpx.adobe.com/xd/help/create-prototypes-using-auto-animate.html）功能來做原型設(shè)計，這是節(jié)省交互動畫制作時間的好辦法，而不是在After Effects上花費幾個小時來做這種效果。

下一步

可用性測試：找一些真實用戶來做這項測試。我個人最喜歡用Maze.Design（https://maze.design/）這款工具來記錄測試結(jié)果，它易于使用，并能提供有關(guān)原型的全面數(shù)據(jù)分析。

不斷迭代：通過可用性測試的一些結(jié)論，在設(shè)計上進(jìn)行迭代，改進(jìn)用戶流程。

總結(jié)

在有限的時間內(nèi)，你絕對不能讓自己分心，必須專注于這個項目并管理好自己的時間。我會給自己進(jìn)行計時，并在每一個步驟上給自己設(shè)定時間限制。我試著讓APP用起來盡可能的簡單，從草圖和用戶旅程地圖就要開始思考，最后這一切才能水到渠成。

感悟

永遠(yuǎn)相信你的直覺，不要害怕設(shè)計修改。如果你把我的線框圖和最終的設(shè)計效果圖進(jìn)行比較，會發(fā)現(xiàn)我做了很多的選擇來改進(jìn)最終的設(shè)計。另外，也可以使用你自己熟悉的軟件，或者你自己知道的更快速的方法，而不要太花費時間來確定是不是跟我完全一樣。

原文：https://uxdesign.cc/ux-ui-case-study-designing-a-food-app-in-3-days-1e2856680205

作者：Paola Ascanio

譯者：彩云Sky，公眾號：彩云譯設(shè)計

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議