一、前言
最近在梳理 薄荷 的各个工具（包括饮食记录、体重记录等），并对竞品做分析，取长补短。
减肥类App最重要的功能之一（甚至可以把「之一」去掉）就是饮食记录功能了。因为减肥无非是「吃」和「动」两件事，对于大多数人，尤其是国内的女性来说，「吃」比「动」重要多了，记录饮食的比起记录运动的起码要多一个量级。
饮食记录功能就是为了回答「还能吃多少」的问题。根据你的身体状况、日常活动量和目标等信息，告诉你每天应该吃多少（薄荷把它称为「预算热量」），超过这个值就会长胖，低于这个值就能减肥。你记录饮食，就能算出已经摄入了多少热量，就能告诉你还能吃多少。
要记录一个食物并不简单，你得记录这个食物是哪一天吃的，哪一餐吃的，吃的是什么食物，吃了多少。整个流程是挺复杂的，要把一整天所有吃的都记录下来，想想都头疼。咱们设计师的工作，就是不断的把这个复杂的过程简化，简化，再简化。
薄荷和其他竞品
除了薄荷，分析的竞品还包括：
二、展示与操作
每天吃的n个食物要怎么展示，添加食物的按钮放在哪里，可以分成三种形式：
1、展示与操作按钮混合排列
每一餐都有一个添加食物的操作按钮，以及这一餐吃的n个食物……依次循环。这种方式的代表是 MyFitnessPal。
MyFitnessPal的日记页面
这种形式的好处是学习成本低，一看就明白要怎么操作了。缺点有两个：
- 空间利用率低。就算这一天没有任何记录，也得一堆按钮排下来，难看。（请见上图左）
- 操作按钮的位置不固定。每添加一条记录，操作按钮就往下挪一行，等你要记录晚餐的时候，添加晚餐的按钮已经不在第一屏了，得滑动到第二屏才能找到。（请见上图右）
Lifesum 和 卡卡
Lifesum 和 卡卡健康 采用的都是类似的形式，不过有一些改进，添加完一餐，就把那一餐折叠了。（见上图）
2、只有操作按钮
Noom Coach 则把展示和操作拆成两个页面，一开始只有操作按钮（见下图左），点击餐别后再进入餐别的详细页面（见下图右）。
Noom Coach
这样的好处是，操作按钮位置固定了，便于操作。缺点是看餐别的明细很麻烦，要多点开一个页面。
3、展示与操作分离
薄荷 采用了独创的方式：把展示与操作分离。
薄荷的饮食和运动页面，添加记录前后对比
这个方案的好处是：
- 展示区域在屏幕上方，操作区域在屏幕下方，看和操作都方便；
- 空间利用率高，在没有记录的情况下，不用放一堆的按钮。空白的地方可以放引导语或引导图；
- 操作按钮固定，便于操作。
这个方案的缺点是，学习门槛略有些高。综合三种方式，这种方案是最为合理的。
三、搜索
搜索听上去好像挺简单，不就是输入关键词然后得到搜索结果吗？实际上要比这复杂得多。
搜索页面可以分为四个状态：
- 默认状态（键盘没有弹出来，见下图左一）；
- 开始输入状态（键盘弹出来了，还没有输入字符，见下图左二）；
- 正在输入状态（已经输入了字符，见下图左三）；
- 搜索结果状态（点「搜索」按钮后得到的搜索结果，见下图右）；
薄荷，搜索的四个状态
这四位哥们儿可不是路人甲，江湖上人称「搜索四君子」，他们都是有故事的人，且听我细细说来。
1、默认状态
用户点了搜索之后，并不急着让他输入文字，而是尽可能的减少他的输入，最好是不用输入也能找到他要的食物。这个任务就交给了「常见」这一栏了。
对于新用户，「常见」里会放米饭、苹果等最常见的食物。等他自己添加过食物之后，我们会把他的最新添加过的食物排在前头。
p.s. 由于历史原因，想做的功能太多，导致目前这个页面有点乱，逻辑上也不太合理，接下来我们会想办法改进的。
2、开始输入状态
到了这一步，用户还没有输入字符。
对于新用户，会列出热门的关键词，这有两个好处，一是为了提示用户该怎么填写关键词（潜台词是：你要填写食物名称，而不是「苹果的热量是多少？」这样的长句），二是为了降低用户初次尝试的门槛（不用打字就可以试试看）。
等他搜索过一次之后，就会有搜索关键词的历史，便于下次继续搜。
3、正在输入状态
我们可以将键盘右下角的按钮，设置为「搜索」（见上图中，键盘右下角的蓝色按钮）。这既便于用户操作（打字的时候手指在键盘上，打完字点键盘右下角按钮是最近的），也能省掉一个搜索按钮的空间，何乐不为呢？但有些小白用户就是找不到，iOS的还好一些，毕竟颜色对比明显，Android的就难说了，天知道他用的是什么样的键盘啊。
所以我们得有个Plan B，万一小白用户真找不着键盘上的搜索按钮，也能正常的使用。最简单的方法就是，在搜索框的旁边再放个搜索按钮呗，可那儿已经有个「取消」按钮了（关闭键盘，返回到默认状态）。既然名花有了主（搜索按钮），又有了闺蜜（取消按钮），那只能在下边，仰望着名花，做个安安静静的备胎。（贵圈真乱啊，┑(￣Д ￣)┍）
搜索界里复杂的人际关系
即使是备胎，也要做一个有上进心的备胎！当你在搜索框里输入一个「牛」字的时候，我就提示你想的是不是牛奶、牛肉、牛肉干、牛油果、牛角面包……只有想名花之所想，思名花之所思，备胎才有望转正啊！这就是一个备胎的自我修养。搜索界里称之为「搜索框提示」。
作为一个有上进心的设计师，当然希望做搜索框提示，可目前后端的资源有限，希望薄荷能早日推出这个功能吧。
4、搜索结果状态
搜索结果的页面都长得差不多，没啥好说的。用户点击了某个食物之后的结果却差别很大，分为两类：
MyFitnessPal 和 Lifesum 的添加食物份量页面
MyFitnessPal 和 Lifesum 都会从右到左 push 进来一个新页面，在新页面里选择食物的份量（见上图）。薄荷、Noom Coach 和卡卡则是从下往上 present 一个模态窗口（见下图）。
Noom Coach 和 卡卡 弹出的模态窗口
新页面和模态窗口，哪种形式更好呢？ 新页面的好处是便于展示，MyFitnessPal 和 Lifesum 都在这个新页面里展示该食物的详细信息；模态窗口的好处是便于操作，Noom Coach 和卡卡的确认按钮都放在屏幕的下方，便于操作。（MyFitnessPal 的确认按钮放在了屏幕右上方，难以点击。）
我认为，在添加食物的过程中，食物的信息并不重要的，甚至会影响了主线，把用户带到岔路上去了。操作便利的优先级要大于信息展示。也就是说，在这里，用模态窗口更合适。
薄荷的模态窗口的手势操作
薄荷的模态窗口花了点心思，除了可以点击确认或取消，还有手势操作：向上推的时候，打勾按钮周围会画一个圆圈，当圆圈画完的时候，就表示你确认了（见上图右）。同样，向下推的时候，叉叉按钮周围也有一个圆圈（见上图左）。
四、逐个添加 vs 批量添加
通常一餐饭里会有三到五个食物，在添加的时候，就有两种方式：
- 逐个添加：先选餐别，添加第一个食物，返回。重复一遍来添加第二个食物，重复一遍来添加第三个食物……
- 批量添加：先选餐别，添加第一个食物，第二个食物，第三个食物……全部添加完，点「完成」后返回。
显然，「批量添加」比「逐个添加」更加合理，因为多个食物只需要点一次餐别，节省了操作。除了 MyFitnessPal 是逐个添加的之外，其他都采用了批量添加。
Noom Coach的批量添加
有一点需要注意的是，批量添加时，添加完第一个食物，怎么告诉用户「添加成功，请继续添加下一个食物」呢？
Noom Coach 是在右上角放了一个菜篮子的图标，并在图标前面加了个数字。（见上图左）
薄荷 的方式更妙，添加成功后，食物的图片一边缩小一边落入到右上角的「完成」按钮里。这个动画过程就像在说「添加成功咯，再添加下一个食物吧」。（动画过程太快，截不了图，请自行脑补。见下图）
薄荷，添加食物后有动画
五、滑动快速添加
Noom Coach 有个「黑科技」，搜索食物的时候，每个食物都带有默认的重量，只需要滑动就能添加，非常快速（见下图）。
Noom Coach的滑动快速添加食物
而且，滑动时加号按钮的背景色（见上图），就是食物红绿灯的颜色（食物的推荐等级，红色表示别吃，黄色表示可以适量吃一些，绿灯表示可以放心吃）。真是贴心的暖男啊。
网友评论