堆糖APP-设计|交互|体验

到了每周一个APP的全面体验并且总结出一个可供设计师和用户参考的报告的时候了；这次体验的APP是美好生活研究所——堆糖。

简单介绍一下产品背景，堆糖信息科技（上海）有限公司，创始人张涓，曾就职阿里巴巴B2B负责海外市场拓展；公司注册资本168.1232万人民币，注册时间是2011-05-31。

图中“娟”字有误

公司由九合创投完成天使轮融资，融资金额未透露，2014年3月由阿里巴巴完成A轮融资，融资金额数千万人民币；2016年由头头是道投资基金完成B轮融资，金额未透露。

融资历史

股东股权信息

堆糖CEO张涓股权占比38.15%，杭州阿里创业投资占股31.06%。在堆糖海量用户的背后，作者深深地感到了资本力量的强大。

设备型号：iPhoneX

系统版本：iOS11.2.2

软件名称：堆糖

软件版本：6.11.2

下面正文开始

堆糖产品结构

尽管思维导图的直接受众是绘图者自己，但我还是把导图贴了出来......算是对产品的一个完整解读。

产品slogan是美好生活研究所，app整体分为四个部分：首页、发现、商城、我；“首页”为app整体内容的收录和展示，“发现”为app内的主要部分，“商城”出售的物品是堆糖的内置商城物品，“我”是整个app的管理中心。

界面组织

APP内的内容组成有三种：图片、视频、文字；且三种方式可以交叉组合。

APP内存在类似帖子的模块，在堆糖里叫做“Club”，用户可以选择加入Club进行发帖和跟帖，最新跟帖会被置顶显示。

此外，APP内有一定的推广内容和淘宝商品的网址链接，但是略有尴尬的是从图片进入淘宝后一些商品已经不再出售了；APP内也有商城，用户可在堆糖内完成购买，可在“我”查看订单管理。

淘宝链接

内置商城物品

另外，APP内会有一些生活方面的课程-Class模块，每个课程都有分组，分别是互动课、连载特集、精品课、大咖课，定价19.9-199元不等。

icon

线型icon

线型icon加点缀色

粗线条加色块式的icon

面型icon

界面

界面整体为白色，不会掺杂其他情绪，让用户更专注于app的多元化内容。

APP的logo颜色色值是F25252，APP中的界面点缀色却用了FF5959的红色，某些按钮为6FCF95的绿色。

1.注册逻辑异常混乱

这个非常严重又很复杂的问题我尽量去表达清楚，因为我在注册的时候用了大概5分种，如果我不是正在测评这个这个软件它一定会失去我这个用户。

堆糖的注册流程

抛去常规的微信登录和手机验证码流程，只说一说出现问题的设置密码流程。

在设置密码的时候，系统会提示“密码至少包含8位数字加字母”，于是我填入的了一串密码：duitanglvdianyuan123,显示的界面如下

图1

输入完密码后，后面出现了绿色对勾，并且“下一步”变为可点击状态，证明密码格式正确，OK，于是点击“下一步”。

图2

系统在这个页面默认填入的是微信昵称，由于我的微信昵称字母之间存在空格，格式错误，于是我把空格删掉就变成了图2右边的样子；OK，昵称后面出现绿色对勾，并且“下一步”变为可点击状态。设置一切都没有问题。

一切都很OK，注册界面设计的很清爽，大大的圆角按钮的颜色也很漂亮，繁琐的注册流程终于要走完了，我已经迫不及待进入APP了，这时我点击了“下一步”

崩溃ing......

抑制住了情绪上的波动，界面弹出的这个弹窗“密码长度为6-18个字符”，在有且只有昵称的界面提示密码长度错误是不符合人类认知的，并且我自信在上一个页面已经把所有内容填写正确，要不然我也不会到达这个页面。

实在是找不到理由去注意前面“密码长度”二字，于是我的视觉快速地锁定了“6-18个字符”这几个字并且在整个提示窗消失之前记住了这几个字。

就这样我改了大概一分多钟的昵称，然后又和我的同事确认了一下什么是“字符”，在确信了不是昵称的问题后，我返回了上页，也就是下面这个页面。

但是这个页面是完全没有问题的，用户不会把问题归结于自己，因为系统并没有做出正确提示，一定是程序出现了Bug，就这样我又再次卡在了这个密码注册流程。

在注册流程循环了几次，每次循环的时候系统返回的页面是之前（堆糖注册流程）的2页面，而不是自己修改昵称后的3页面，因为我的微信昵称存在空格导致了我每次循环都需要再次删掉空格。终于在某次循环后意识到了是之前的密码格式错误后，缩短了密码长度终于登录了堆糖。

提供的解决方案：1.昵称和密码页面合并；2.或者让密码格式提示回到它应该待的位置。

2.视频模块交互路径过长

堆糖将所有用户文章中的视频收集起来做了一个视频的归类。用户点击视频进入视频的预览界面，预览界面有文章的标题和作者。

在预览界面中选择一个视频点击去进入文章和视频的页面，用户如果想查看这个视频还要再去点击那个播放按钮。

首先，声明一下，堆糖中的视频并不是普遍意义的视频，而是用户在创建文章时加入的视频，而堆糖把这些文章中的视频收集起来放在这里单独归为“视频”类，就算没有“视频”类，这个文章也会在其他板块被找到。

尝试揣摩为什么要单独将用户发布文章中的视频收录在一个类别？

有意思的动态图像总比文字和图片生动的多，毕竟现在是小视频的风口，如果有一个短视频的模块就可以聚集更多用户；所以收集用户的视频来展示是有必要的。

既然是视频的入口，就要做成视频的样子：简略文字提示，预览增加评论和点赞数量，在步骤2点击后直接可以播放视频，省去步骤3。

解决方案如下

解决方案

3.商城物品的二级分类很随便

从商店中的彩妆进入，在页面2的头部以宫格的形式将彩妆分为了8类，显得有些随意。下滑后到达页面3，页面3并没有充分利用导航栏，只是在导航栏显示了没有什么意义的“彩妆”。如果要想去选择类别还要返回顶部。

解决方案：取消头部宫格选择，改为右侧统一筛选（参照淘宝）。

4.完美不适配iPhoneX

导航栏高度错误，导致很多按钮的触控面积变小，尤其是在我的订单的界面，导航栏被大部分挡住，根本无法看到，更无法点击。

虽然适配是迟早的事，但是距离iPhone发布已经快半年了，堆糖公司已有7年多的历史，在有着如此庞大用户量的前提下仍未完成完美适配，让作者对公司的实力再一次产生了质疑。

本文是作者Reple的原创内容，如果转载要署名我的公众号eVoice和二维码哦，如果你对本文有其他的见解欢迎下方留言，可以的话希望能够帮我转发一下，每增加一个粉丝都是对我的一个鼓励～

转载注明出处哦～momo