一、前言
最近在梳理 薄荷 的各個工具（包括飲食記錄、體重記錄等），并對競品做分析，取長補短。
減肥類App最重要的功能之一（甚至可以把「之一」去掉）就是飲食記錄功能了。因為減肥無非是「吃」和「動」兩件事，對于大多數人，尤其是國內的女性來說，「吃」比「動」重要多了，記錄飲食的比起記錄運動的起碼要多一個量級。
飲食記錄功能就是為了回答「還能吃多少」的問題。根據你的身體狀況、日常活動量和目標等信息，告訴你每天應該吃多少（薄荷把它稱為「預算熱量」），超過這個值就會長胖，低于這個值就能減肥。你記錄飲食，就能算出已經攝入了多少熱量，就能告訴你還能吃多少。
要記錄一個食物并不簡單，你得記錄這個食物是哪一天吃的，哪一餐吃的，吃的是什么食物，吃了多少。整個流程是挺復雜的，要把一整天所有吃的都記錄下來，想想都頭疼。咱們設計師的工作，就是不斷的把這個復雜的過程簡化，簡化，再簡化。
除了薄荷，分析的競品還包括：
二、展示與操作
每天吃的n個食物要怎么展示，添加食物的按鈕放在哪里，可以分成三種形式：
1、展示與操作按鈕混合排列
每一餐都有一個添加食物的操作按鈕，以及這一餐吃的n個食物……依次循環。這種方式的代表是 MyFitnessPal。
這種形式的好處是學習成本低，一看就明白要怎么操作了。缺點有兩個：
- 空間利用率低。就算這一天沒有任何記錄，也得一堆按鈕排下來，難看。（請見上圖左）
- 操作按鈕的位置不固定。每添加一條記錄，操作按鈕就往下挪一行，等你要記錄晚餐的時候，添加晚餐的按鈕已經不在第一屏了，得滑動到第二屏才能找到。（請見上圖右）
Lifesum 和 卡卡健康 采用的都是類似的形式，不過有一些改進，添加完一餐，就把那一餐折疊了。（見上圖）
2、只有操作按鈕
Noom Coach 則把展示和操作拆成兩個頁面，一開始只有操作按鈕（見下圖左），點擊餐別后再進入餐別的詳細頁面（見下圖右）。
這樣的好處是，操作按鈕位置固定了，便于操作。缺點是看餐別的明細很麻煩，要多點開一個頁面。
3、展示與操作分離
薄荷 采用了獨創的方式：把展示與操作分離。
這個方案的好處是：
- 展示區域在屏幕上方，操作區域在屏幕下方，看和操作都方便；
- 空間利用率高，在沒有記錄的情況下，不用放一堆的按鈕。空白的地方可以放引導語或引導圖；
- 操作按鈕固定，便于操作。
這個方案的缺點是，學習門檻略有些高。綜合三種方式，這種方案是最為合理的。
三、搜索
搜索聽上去好像挺簡單，不就是輸入關鍵詞然后得到搜索結果嗎？實際上要比這復雜得多。
搜索頁面可以分為四個狀態：
- 默認狀態（鍵盤沒有彈出來，見下圖左一）；
- 開始輸入狀態（鍵盤彈出來了，還沒有輸入字符，見下圖左二）；
- 正在輸入狀態（已經輸入了字符，見下圖左三）；
- 搜索結果狀態（點「搜索」按鈕后得到的搜索結果，見下圖右）；
這四位哥們兒可不是路人甲，江湖上人稱「搜索四君子」，他們都是有故事的人，且聽我細細說來。
1、默認狀態
用戶點了搜索之后，并不急著讓他輸入文字，而是盡可能的減少他的輸入，最好是不用輸入也能找到他要的食物。這個任務就交給了「常見」這一欄了。
對于新用戶，「常見」里會放米飯、蘋果等最常見的食物。等他自己添加過食物之后，我們會把他的最新添加過的食物排在前頭。
p.s. 由于歷史原因，想做的功能太多，導致目前這個頁面有點亂，邏輯上也不太合理，接下來我們會想辦法改進的。
2、開始輸入狀態
到了這一步，用戶還沒有輸入字符。
對于新用戶，會列出熱門的關鍵詞，這有兩個好處，一是為了提示用戶該怎么填寫關鍵詞（潛臺詞是：你要填寫食物名稱，而不是「蘋果的熱量是多少？」這樣的長句），二是為了降低用戶初次嘗試的門檻（不用打字就可以試試看）。
等他搜索過一次之后，就會有搜索關鍵詞的歷史，便于下次繼續搜。
3、正在輸入狀態
我們可以將鍵盤右下角的按鈕，設置為「搜索」（見上圖中，鍵盤右下角的藍色按鈕）。這既便于用戶操作（打字的時候手指在鍵盤上，打完字點鍵盤右下角按鈕是最近的），也能省掉一個搜索按鈕的空間，何樂不為呢？但有些小白用戶就是找不到，iOS的還好一些，畢竟顏色對比明顯，Android的就難說了，天知道他用的是什么樣的鍵盤啊。
所以我們得有個Plan B，萬一小白用戶真找不著鍵盤上的搜索按鈕，也能正常的使用。最簡單的方法就是，在搜索框的旁邊再放個搜索按鈕唄，可那兒已經有個「取消」按鈕了（關閉鍵盤，返回到默認狀態）。既然名花有了主（搜索按鈕），又有了閨蜜（取消按鈕），那只能在下邊，仰望著名花，做個安安靜靜的備胎。（貴圈真亂啊，┑(￣Д ￣)┍）
即使是備胎，也要做一個有上進心的備胎！當你在搜索框里輸入一個「牛」字的時候，我就提示你想的是不是牛奶、牛肉、牛肉干、牛油果、牛角面包……只有想名花之所想，思名花之所思，備胎才有望轉正啊！這就是一個備胎的自我修養。搜索界里稱之為「搜索框提示」。
作為一個有上進心的設計師，當然希望做搜索框提示，可目前后端的資源有限，希望薄荷能早日推出這個功能吧。
4、搜索結果狀態
搜索結果的頁面都長得差不多，沒啥好說的。用戶點擊了某個食物之后的結果卻差別很大，分為兩類：
MyFitnessPal 和 Lifesum 都會從右到左 push 進來一個新頁面，在新頁面里選擇食物的份量（見上圖）。薄荷、Noom Coach 和卡卡則是從下往上 present 一個模態窗口（見下圖）。
新頁面和模態窗口，哪種形式更好呢？ 新頁面的好處是便于展示，MyFitnessPal 和 Lifesum 都在這個新頁面里展示該食物的詳細信息；模態窗口的好處是便于操作，Noom Coach 和卡卡的確認按鈕都放在屏幕的下方，便于操作。（MyFitnessPal 的確認按鈕放在了屏幕右上方，難以點擊。）
我認為，在添加食物的過程中，食物的信息并不重要的，甚至會影響了主線，把用戶帶到岔路上去了。操作便利的優先級要大于信息展示。也就是說，在這里，用模態窗口更合適。
薄荷的模態窗口花了點心思，除了可以點擊確認或取消，還有手勢操作：向上推的時候，打勾按鈕周圍會畫一個圓圈，當圓圈畫完的時候，就表示你確認了（見上圖右）。同樣，向下推的時候，叉叉按鈕周圍也有一個圓圈（見上圖左）。
四、逐個添加 vs 批量添加
通常一餐飯里會有三到五個食物，在添加的時候，就有兩種方式：
- 逐個添加：先選餐別，添加第一個食物，返回。重復一遍來添加第二個食物，重復一遍來添加第三個食物……
- 批量添加：先選餐別，添加第一個食物，第二個食物，第三個食物……全部添加完，點「完成」后返回。
顯然，「批量添加」比「逐個添加」更加合理，因為多個食物只需要點一次餐別，節省了操作。除了 MyFitnessPal 是逐個添加的之外，其他都采用了批量添加。
有一點需要注意的是，批量添加時，添加完第一個食物，怎么告訴用戶「添加成功，請繼續添加下一個食物」呢？
Noom Coach 是在右上角放了一個菜籃子的圖標，并在圖標前面加了個數字。（見上圖左）
薄荷 的方式更妙，添加成功后，食物的圖片一邊縮小一邊落入到右上角的「完成」按鈕里。這個動畫過程就像在說「添加成功咯，再添加下一個食物吧」。（動畫過程太快，截不了圖，請自行腦補。見下圖）
五、滑動快速添加
Noom Coach 有個「黑科技」，搜索食物的時候，每個食物都帶有默認的重量，只需要滑動就能添加，非常快速（見下圖）。
而且，滑動時加號按鈕的背景色（見上圖），就是食物紅綠燈的顏色（食物的推薦等級，紅色表示別吃，黃色表示可以適量吃一些，綠燈表示可以放心吃）。真是貼心的暖男啊。
