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

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

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

項目背景

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

（譯者注：CSA的運作過程通常由認同相同理念的社區支持者（個人或單位）采用共同購買的模式，預先支付一筆費用給當地的小農戶預約一季或一年的收成，農民收成后，再根據實際產出的多寡分配給會員，如此達到結合社區力量支持在地農民采用有機農耕的積極意義。——百度百科）

設計挑戰

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

第一天：資料收集

1. 研究方法

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

2. 用戶調研

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

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

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

3. 市場調研

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

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

4. 頭腦風暴

腦暴出的問題

1. 我們如何收集用戶需求數據來減少浪費和分配食品？
2. 我們如何通過季節性食物和促銷活動來增加銷售業績？
3. 我們如何幫助會員根據他們的飲食偏好發掘額外的食物需求？

5. 用戶畫像

用戶調查的結果提供了足夠的信息來創建用戶畫像，我選擇創建與年齡和性別都無關的角色，以便能夠將更加聚焦在如何平等的實現用戶目標上。

用戶畫像

6. 競品分析

當我準備進入草圖階段時，我將會研究在相關行業或競爭對手那里類似的問題和解決方案，以確定最佳方案。

（1）盒子大小和內容分類

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

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

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

FarmFresh to You

（3）真實的食品照片

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

7. 方案思考

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

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

第二天：草圖和設計

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

1. 用戶旅程地圖

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

2. 線框圖

線框圖是APP的骨架，這讓我在開始做視覺設計之前，能夠專注于關鍵功能、元素和交互。我選擇了高保真線框圖，這樣我只需要在一些色彩，配圖，和圖標上進一步思考視覺呈現。

3. 風格板

在畫好線框圖之后，我會找相同行業內的APP視覺做一個風格板來作為設計參考。

4. 配色方案

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

5. 字體選擇

6. 圖標設計

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

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

7. Logo設計

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

8. 視覺設計

我喜歡嘗試不同的風格和設計變化，我對第一稿不滿意，因為缺乏整體上的一致性，然后不斷優化，直到最終全局頁面都能做到統一協調并符合自己的設計預期為止。

第三天：交互原型

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

1. 最終設計

2. 自動動畫

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

下一步

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

不斷迭代：通過可用性測試的一些結論，在設計上進行迭代，改進用戶流程。

總結

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

感悟

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

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

作者：Paola Ascanio

譯者：彩云Sky，公眾號：彩云譯設計

本文由 @彩云Sky 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

者：Linux迷

來自：www.linuxmi.com/vim-fenping.html

Vim分屏功能是通過分割窗口來實現的，這是提高工作效率的一大利器。無論我們想同時顯示兩個文件，或者同時顯示一個文件的兩個不同的位置，又或者并排比較兩個文件，等等，這些都能通過分屏來實現，這樣子很方便代碼的比對和復制粘貼

水平方向分屏打開新文件

:sp linuxmi.py

或者

:split linuxmi.py

這個命令把窗口橫向切分為兩個窗口，并把光標置于上面的窗口中。

垂直方向分屏打開新文件

:vsp linux.py

:vsplit linux.py

:sview linux.py ->只讀分屏打開文件

另外，要打開窗口編輯一個新的文件時，可以用以下命令：

:new

從命令行直接打開多個文件且是分屏

vim -On file1, file2 ... ->垂直分屏

vim -on file1, file2 ... ->水平分屏

linuxmi@linuxmi:~/www.linuxmi.com$ vim -O3 linux.py linuxmi.py linuxmi.cpp

注：-O垂直分屏，-o水平分屏，n表示分幾個屏

實時調整當前窗口的寬度
ctrl-w > //向右加寬，默認值為1
ctrl-w N > //向右加寬寬度N
ctrl-w < // 同理

橫屏/豎屏分屏打開當前文件

ctrl+w s
ctrl+w v

切換分屏

ctrl+w h,j,k,l
ctrl+w 上下左右鍵

crtl+w進行分屏窗口的切換 按完以后再按一個w

crtl+w進行分屏窗口的切換 按完以后再按一個r 互換窗口

crtl+w進行分屏窗口的切換 按完以后再按一個c 關閉窗口

關閉分屏

關閉窗口有以下幾個個命令：

ctrl+W c 關閉當前窗口

ctrl+w q 關閉當前窗口，若只有一個分屏且退出vim

:only 僅保留當前分屏
:hide 關閉當前分屏

調整分屏的大小（寬度與高度）

ctrl+w=所有分屏都統一高度
ctrl+w + 增加高度，默認值為1
ctrl+w - 減少高度
10 ctrl+w + 增加10米高度
ctrl-w N + //當前屏高度加N

使用指定當前屏的調整高度
: res[ize] N

示例：

:resize 30

移動分屏

ctrl+W H,J,K,L

將屏幕移動到最頂端
ctrl-w + K

將屏幕移動到最低端
ctrl-w + J

將屏幕移動到最左邊
ctrl-w + H

將屏幕移動到最右邊
ctrl-w + L

總結

由于平時使用Vim比較多，每次都要同時打開多個文件進行操作，打開多個會話又比較麻煩，所以專門學習了一下有關Vim的一些分屏技巧并記錄此文章。

序列表和有序列表

用于呈現邏輯上并列的具有相關性的數據內容.

<ul>

<li></li>

</ul>

ul元素可以用type屬性設置不同的列表標記:

disc: 實心圓點

circle: 空心圓圈

square: 實心正方形

<ol>

<li></li>

</ol>

ol元素也可以設置不同的標記:

1: 阿拉伯數字

i: 小寫羅馬數字

I: 大寫羅馬數字

A: 大寫字母

a: 小寫字母

定義列表

適用呈現包含主題及描述的數據內容.

<dl>

<dt>主題</dt>

<dd>描述</dd>

</dl>

表格

<table>

<thead>

<tr>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

thead: 表頭

tbody: 表體

tfoot: 表腳

th: 專用于表頭中的單元格, 其具有自動加粗并且居中的效果.

表格的屬性控制:

border: 邊框

bordercolor: 邊框顏色

width: 寬度

height: 高度

cellspacing: 單元格間距(外)

cellpadding: 單元格填充(內)

align: 表格的位置控制

單元格的屬性控制:

align

valign

如何合并單元格/跨行或跨列?

<td rowspan="number" colspan="number">

注意: 合并后, 會引發單元格數量的減少!

列表練習案例源碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<h1>我的電腦文件列表</h1>

<ul>

<li>我的電腦

<ul>

<li>本地磁盤(C:)

<ul>

<li>我的文檔</li>

<li>我的收藏</li>

</ul>

</li>

<li>本地磁盤(D:)

<ul>

<li>我的游戲</li>

<li>我的資料</li>

<li>我的電影</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>