一滔蝉、前言
最近在梳理 薄荷 的各個(gè)工具（包括飲食記錄击儡、體重記錄等），并對競品做分析蝠引，取長補(bǔ)短阳谍。
減肥類App最重要的功能之一（甚至可以把「之一」去掉）就是飲食記錄功能了。因?yàn)闇p肥無非是「吃」和「動(dòng)」兩件事螃概，對于大多數(shù)人矫夯，尤其是國內(nèi)的女性來說，「吃」比「動(dòng)」重要多了吊洼，記錄飲食的比起記錄運(yùn)動(dòng)的起碼要多一個(gè)量級训貌。
飲食記錄功能就是為了回答「還能吃多少」的問題。根據(jù)你的身體狀況冒窍、日车莼Γ活動(dòng)量和目標(biāo)等信息，告訴你每天應(yīng)該吃多少（薄荷把它稱為「預(yù)算熱量」）综液，超過這個(gè)值就會長胖款慨，低于這個(gè)值就能減肥。你記錄飲食谬莹，就能算出已經(jīng)攝入了多少熱量檩奠，就能告訴你還能吃多少约素。
要記錄一個(gè)食物并不簡單，你得記錄這個(gè)食物是哪一天吃的笆凌，哪一餐吃的，吃的是什么食物士葫，吃了多少乞而。整個(gè)流程是挺復(fù)雜的，要把一整天所有吃的都記錄下來慢显，想想都頭疼爪模。咱們設(shè)計(jì)師的工作，就是不斷的把這個(gè)復(fù)雜的過程簡化荚藻，簡化屋灌，再簡化。
除了薄荷应狱，分析的競品還包括：
二共郭、展示與操作
每天吃的n個(gè)食物要怎么展示，添加食物的按鈕放在哪里疾呻，可以分成三種形式：
1除嘹、展示與操作按鈕混合排列
每一餐都有一個(gè)添加食物的操作按鈕，以及這一餐吃的n個(gè)食物……依次循環(huán)岸蜗。這種方式的代表是 MyFitnessPal尉咕。
這種形式的好處是學(xué)習(xí)成本低，一看就明白要怎么操作了璃岳。缺點(diǎn)有兩個(gè)：
- 空間利用率低年缎。就算這一天沒有任何記錄，也得一堆按鈕排下來铃慷，難看单芜。（請見上圖左）
- 操作按鈕的位置不固定。每添加一條記錄枚冗，操作按鈕就往下挪一行缓溅，等你要記錄晚餐的時(shí)候，添加晚餐的按鈕已經(jīng)不在第一屏了赁温，得滑動(dòng)到第二屏才能找到坛怪。（請見上圖右）
Lifesum 和 卡卡健康 采用的都是類似的形式，不過有一些改進(jìn)股囊，添加完一餐袜匿，就把那一餐折疊了。（見上圖）
2稚疹、只有操作按鈕
Noom Coach 則把展示和操作拆成兩個(gè)頁面居灯，一開始只有操作按鈕（見下圖左）祭务，點(diǎn)擊餐別后再進(jìn)入餐別的詳細(xì)頁面（見下圖右）。
這樣的好處是怪嫌，操作按鈕位置固定了义锥，便于操作。缺點(diǎn)是看餐別的明細(xì)很麻煩岩灭，要多點(diǎn)開一個(gè)頁面拌倍。
3、展示與操作分離
薄荷 采用了獨(dú)創(chuàng)的方式：把展示與操作分離噪径。
這個(gè)方案的好處是：
- 展示區(qū)域在屏幕上方，操作區(qū)域在屏幕下方找爱，看和操作都方便梗顺；
- 空間利用率高，在沒有記錄的情況下车摄，不用放一堆的按鈕寺谤。空白的地方可以放引導(dǎo)語或引導(dǎo)圖练般；
- 操作按鈕固定矗漾，便于操作。
這個(gè)方案的缺點(diǎn)是薄料，學(xué)習(xí)門檻略有些高敞贡。綜合三種方式，這種方案是最為合理的摄职。
三誊役、搜索
搜索聽上去好像挺簡單，不就是輸入關(guān)鍵詞然后得到搜索結(jié)果嗎谷市？實(shí)際上要比這復(fù)雜得多蛔垢。
搜索頁面可以分為四個(gè)狀態(tài)：
- 默認(rèn)狀態(tài)（鍵盤沒有彈出來，見下圖左一）迫悠；
- 開始輸入狀態(tài)（鍵盤彈出來了鹏漆，還沒有輸入字符，見下圖左二）创泄；
- 正在輸入狀態(tài)（已經(jīng)輸入了字符艺玲，見下圖左三）；
- 搜索結(jié)果狀態(tài)（點(diǎn)「搜索」按鈕后得到的搜索結(jié)果鞠抑，見下圖右）饭聚；
這四位哥們兒可不是路人甲搁拙，江湖上人稱「搜索四君子」秒梳，他們都是有故事的人法绵，且聽我細(xì)細(xì)說來。
1酪碘、默認(rèn)狀態(tài)
用戶點(diǎn)了搜索之后朋譬，并不急著讓他輸入文字，而是盡可能的減少他的輸入兴垦，最好是不用輸入也能找到他要的食物此熬。這個(gè)任務(wù)就交給了「常見」這一欄了。
對于新用戶滑进，「常見」里會放米飯、蘋果等最常見的食物募谎。等他自己添加過食物之后扶关，我們會把他的最新添加過的食物排在前頭。
p.s. 由于歷史原因数冬，想做的功能太多节槐，導(dǎo)致目前這個(gè)頁面有點(diǎn)亂，邏輯上也不太合理拐纱，接下來我們會想辦法改進(jìn)的铜异。
2、開始輸入狀態(tài)
到了這一步秸架，用戶還沒有輸入字符揍庄。
對于新用戶，會列出熱門的關(guān)鍵詞东抹，這有兩個(gè)好處蚂子，一是為了提示用戶該怎么填寫關(guān)鍵詞（潛臺詞是：你要填寫食物名稱，而不是「蘋果的熱量是多少缭黔？」這樣的長句）食茎，二是為了降低用戶初次嘗試的門檻（不用打字就可以試試看）。
等他搜索過一次之后馏谨，就會有搜索關(guān)鍵詞的歷史别渔，便于下次繼續(xù)搜。
3惧互、正在輸入狀態(tài)
我們可以將鍵盤右下角的按鈕哎媚，設(shè)置為「搜索」（見上圖中，鍵盤右下角的藍(lán)色按鈕）壹哺。這既便于用戶操作（打字的時(shí)候手指在鍵盤上抄伍，打完字點(diǎn)鍵盤右下角按鈕是最近的），也能省掉一個(gè)搜索按鈕的空間管宵，何樂不為呢截珍？但有些小白用戶就是找不到攀甚，iOS的還好一些，畢竟顏色對比明顯岗喉，Android的就難說了秋度，天知道他用的是什么樣的鍵盤啊。
所以我們得有個(gè)Plan B钱床，萬一小白用戶真找不著鍵盤上的搜索按鈕荚斯，也能正常的使用。最簡單的方法就是查牌，在搜索框的旁邊再放個(gè)搜索按鈕唄事期，可那兒已經(jīng)有個(gè)「取消」按鈕了（關(guān)閉鍵盤，返回到默認(rèn)狀態(tài)）纸颜。既然名花有了主（搜索按鈕）兽泣，又有了閨蜜（取消按鈕），那只能在下邊胁孙，仰望著名花唠倦，做個(gè)安安靜靜的備胎。（貴圈真亂啊涮较，┑(￣Д ￣)┍）
即使是備胎稠鼻，也要做一個(gè)有上進(jìn)心的備胎！當(dāng)你在搜索框里輸入一個(gè)「趴衿保」字的時(shí)候候齿，我就提示你想的是不是牛奶、牛肉闺属、牛肉干毛肋、牛油果、牛角面包……只有想名花之所想屋剑，思名花之所思润匙，備胎才有望轉(zhuǎn)正啊唉匾！這就是一個(gè)備胎的自我修養(yǎng)孕讳。搜索界里稱之為「搜索框提示」。
作為一個(gè)有上進(jìn)心的設(shè)計(jì)師巍膘，當(dāng)然希望做搜索框提示厂财，可目前后端的資源有限，希望薄荷能早日推出這個(gè)功能吧峡懈。
4璃饱、搜索結(jié)果狀態(tài)
搜索結(jié)果的頁面都長得差不多，沒啥好說的肪康。用戶點(diǎn)擊了某個(gè)食物之后的結(jié)果卻差別很大荚恶，分為兩類：
MyFitnessPal 和 Lifesum 都會從右到左 push 進(jìn)來一個(gè)新頁面撩穿，在新頁面里選擇食物的份量（見上圖）。薄荷谒撼、Noom Coach 和卡卡則是從下往上 present 一個(gè)模態(tài)窗口（見下圖）食寡。
新頁面和模態(tài)窗口，哪種形式更好呢廓潜？ 新頁面的好處是便于展示抵皱，MyFitnessPal 和 Lifesum 都在這個(gè)新頁面里展示該食物的詳細(xì)信息；模態(tài)窗口的好處是便于操作辩蛋，Noom Coach 和卡卡的確認(rèn)按鈕都放在屏幕的下方呻畸，便于操作。（MyFitnessPal 的確認(rèn)按鈕放在了屏幕右上方悼院，難以點(diǎn)擊擂错。）
我認(rèn)為，在添加食物的過程中樱蛤，食物的信息并不重要的，甚至?xí)绊懥酥骶€剑鞍，把用戶帶到岔路上去了昨凡。操作便利的優(yōu)先級要大于信息展示。也就是說蚁署，在這里便脊，用模態(tài)窗口更合適。
薄荷的模態(tài)窗口花了點(diǎn)心思光戈，除了可以點(diǎn)擊確認(rèn)或取消哪痰，還有手勢操作：向上推的時(shí)候，打勾按鈕周圍會畫一個(gè)圓圈久妆，當(dāng)圓圈畫完的時(shí)候晌杰，就表示你確認(rèn)了（見上圖右）。同樣筷弦，向下推的時(shí)候肋演，叉叉按鈕周圍也有一個(gè)圓圈（見上圖左）。
四烂琴、逐個(gè)添加 vs 批量添加
通常一餐飯里會有三到五個(gè)食物爹殊，在添加的時(shí)候，就有兩種方式：
- 逐個(gè)添加：先選餐別奸绷，添加第一個(gè)食物梗夸，返回。重復(fù)一遍來添加第二個(gè)食物号醉，重復(fù)一遍來添加第三個(gè)食物……
- 批量添加：先選餐別反症，添加第一個(gè)食物辛块，第二個(gè)食物，第三個(gè)食物……全部添加完惰帽，點(diǎn)「完成」后返回憨降。
顯然，「批量添加」比「逐個(gè)添加」更加合理该酗，因?yàn)槎鄠€(gè)食物只需要點(diǎn)一次餐別授药，節(jié)省了操作。除了 MyFitnessPal 是逐個(gè)添加的之外呜魄，其他都采用了批量添加悔叽。
有一點(diǎn)需要注意的是，批量添加時(shí)爵嗅，添加完第一個(gè)食物娇澎，怎么告訴用戶「添加成功，請繼續(xù)添加下一個(gè)食物」呢睹晒？
Noom Coach 是在右上角放了一個(gè)菜籃子的圖標(biāo)趟庄，并在圖標(biāo)前面加了個(gè)數(shù)字。（見上圖左）
薄荷 的方式更妙伪很，添加成功后戚啥，食物的圖片一邊縮小一邊落入到右上角的「完成」按鈕里。這個(gè)動(dòng)畫過程就像在說「添加成功咯锉试，再添加下一個(gè)食物吧」猫十。（動(dòng)畫過程太快，截不了圖呆盖，請自行腦補(bǔ)拖云。見下圖）
五应又、滑動(dòng)快速添加
Noom Coach 有個(gè)「黑科技」宙项，搜索食物的時(shí)候，每個(gè)食物都帶有默認(rèn)的重量株扛，只需要滑動(dòng)就能添加杉允，非常快速（見下圖）席里。
而且叔磷，滑動(dòng)時(shí)加號按鈕的背景色（見上圖），就是食物紅綠燈的顏色（食物的推薦等級奖磁，紅色表示別吃改基，黃色表示可以適量吃一些，綠燈表示可以放心吃）。真是貼心的暖男啊秕狰。
