重设计『壹心理』 APP

---

一、背景

在读大学的时候，就已经知道『壹心理』这个网站了，那时最喜欢浏览的是『心理杂志』版块。每当我情绪低落的时候，壹心理总能唤醒我内心的力量，并且也让我学会了很多相关的心理学知识。所以，我对壹心理的工作者们是充满感激的，他们在用自己的方式去影响一些人，同时也在改变着一些东西。

壹心理 心理杂志版块

那时候，壹心理还没有手机 APP 客户端，直到 2015 年终于有了『壹心理』 APP。在用了一段时间『壹心理』 APP 后，我发现它有一些地方可以做得更好一些。于是，就有了这次重设计『壹心理』 APP 的想法与行动。

二、产品结构

1、网站内容结构

那么，壹心理是做什么的？

壹心理致力于打造一个心理学平台，聚集国内新锐心理学人，输出健康、科学的心理学价值。

具体的表现形式为：

心理杂志——为大众提供国内最新、最优质的心理学资讯

心理电台——为大众提供最温暖的治愈系心理 FM 节目

心理测试——为大众及组织提供趣味实用或专业的测试

心理咨询——连接大众和心理咨询师，提供在线解决方案

EAP 服务——为企业提供基于移动互联网的员工心理帮助

壹心理 网站结构

其中，心理电台、心理测试在移动端已经有独立的『心理 FM』、『口袋心理测试』 APP 作为载体，所以在『壹心理』APP 设计上要合理安排内容的呈现。

2、『壹心理』 APP 产品结构

『壹心理』 APP 的产品结构，主要分为发现、心事、日报、我的、会话五个部分。

壹心理 APP 产品结构

原客户端是把“心事”分为“免费求助”和“专业求助”，我觉得这样的设计或许并不是太好。“免费求助”的本质是倾诉心事，里面汇集了各种各样的心声，在某种程度上可以理解为“吐苦水”。此外，把“免费求助”作为心事倾诉的入口，也显得有些不太妥当。因为，用户在倾诉心事之前就已经被贴上“求助”的标签，暗示用户作为一个“受害者”的身份去进行叙说。

再结合壹心理在 App Store 中对特色功能的描述：

专业贴心：5000位心理咨询师进驻，为来访者提供专业贴心的心理轻问诊，有需要的话还可以通过免费语音预约服务于咨询师一对一解答心事。

助人自助：Self-help，每一位来访者在上面都可以为需要的人提供真正的帮助和建议，成为主人达人，在助己的同时，陪伴更多需要帮助的人。

心理日报：每天在上面见一些人，看到一些故事，学到一些新鲜、有趣、实用的心理成长知识和技能，在这里，心灵每天都能够得到成长。

在结合开头的第一句：壹心理——来访者心事的出口，咨询师的成长阶梯。

所以，有必要给予“专业求助”足够的重视，于是我决定进行以下的修改：

• 去掉“免费求助”，把“心事”和“专业求助（专业咨询）”分开成为独立的入口。

• 把“会话”统一归并到“我的”入口里面。

壹心理 APP 产品结构（重设计）

三、UI/UX 设计

1、颜色/背景修改

这里，主要对『壹心理』 APP 的配色进行了小修改。状态栏和导航栏的颜色改成了和网站一致的蓝色，标签栏的触摸按钮的由描边上色改为轮廓填充，这样在视觉体验上也变得更加友好。

颜色/背景的修改

2、“发现”界面

“发现”界面主要有三种类型的内容构成，分别是：文章阅读、每日一测、活跃咨询师/活跃用户，通过卡片作为载体来呈现内容。

在“文章阅读”这一块，原应用的设计是文章标题和文章摘要放置在图片之下。这样设计的好处是图片和文字呈现得很清晰，坏处是信息的层级、逻辑关系有些混乱。因为页面没有足够的空间去完整地展示两种不同的信息（文章阅读、每日一测），用户不能很好的去分辨页面中信息的从属关系，甚至有时候容易导致对象归属混乱的问题。

所以，我尝试把“文章阅读”的图片和文字整合起来，在图片下半部分叠加一个黑色透明渐变，然后再把文字呈现在此之上。这样，图片和文字的层级、逻辑关系就变得很清晰了，同时也使得屏幕有足够的空间去完整的展示两种不同类型的信息。

空间有了，但“文章阅读”和“每日一测”的呈现方式太过相似，并且“每日一测”的空间利用率也较低。所以，我继续尝试对“每日一测”进行改进：

把“每日一测”以纵向排列方式放置到卡片左侧，并且配上条形品牌蓝色以突出其辨识度，然后砍掉“每日一测”原来位置的留白。

“发现”界面的修改

点击进入“每日一测”界面时，发现页面取消了导航栏的设计，“返回”按钮位于屏幕底部的工具栏中。同时，初次进入“每日一测”界面时，页面下半部分还会显示其他用户的评论内容。

这个设计让人感到困惑，用户还没有进行心理测试，也还不知道测试的结果，此时显示其他用户的评论内容的意义是什么？而且，在用户完成心理测试后，评论内容与测试结果会再次出现，当然这也是比较合理的方案。所以，我尝试对“每日一测”的界面进行修改：

• 恢复顶部导航栏的设计，“返回”键位于导航栏左侧；
• 取消屏幕底部的工具栏，取消页面评论区域的内容；
• 增大“开始测试”按钮的面积，并将其位置与测试摘要区别开来；

“每日一测”界面的修改

3、“心事”界面

前面说到，“免费求助（心事）”与“专业求助（专业咨询）”成为独立的入口。所以，“心事”界面就变成纯粹的心事浏览页面。

• 去掉“专业求助”入口；
• “免费求助”变为导航栏右侧的“写心事”图标按钮；
• 用快速扫描列表代替卡片式布局，因为同类且操作简单的内容使用卡片会分散用户的注意力，难以做到快速扫描和浏览。

“心事”界面的修改

4、“专业咨询”界面

在这里，我尝试把“专业求助”改为“专业咨询”，转变用户的身份与标签，让用户抱着尝试去了解的心态去面对咨询师。

把“专业咨询”作为单独的入口，可以避免用户“沉迷”于“心事”中而忘记了“专业咨询”这件事，同时可能也使得用户与咨询师之间的互动率得到提高。

“专业咨询”界面成为单独入口

5、日报界面

主界面导航

日报界面原来是“汉堡菜单”的导航设计，它的好处与坏处都同样明显。好处是节约了屏幕空间，让用户聚焦在主页面的内容中；坏处是“汉堡菜单”的条目可见性差并且操作相对繁琐，在 iOS 上的表现更是如此。考虑到日报仅仅是展示不同类型的条目，而条目之间也不需要进行交叉导航。所以，我尝试做出以下的修改：

把侧边导航（汉堡菜单）改为滑动标签导航。

这样的改进，使得条目的可见性更加友好，也使得用户产生更多的点击欲望。

“日报”界面导航方式的修改

“时间标签”

还有一个细节，关于“时间标签”的位置提示。原来的时间标签提示的位置是跟随页面滑动而发生变化，当滑到底部待加载完更多内容时，时间标签会突然往上跑。这种体验不够友好，而且屏幕内容的滑动方向与时间标签的运动方向相反，会大大增加分散用户注意力的风险。所以，我尝试做了以下修改：

将时间标签位置固定在滑动标签栏的右下方。

这样，用户在浏览内容的时候，就会潜意识的认为在时间标签下方的内容都属于时间标签的时间范围内，从而减少了用户的认知压力。

“时间标签”位置的修改

阅读界面导航

点击列表进入到详细内容后，原应用的设计是导航栏消失，状态栏变透明，“返回”键位于底部的标签栏。当进行上滑操作时，底部的工具栏隐藏，整个页面就只剩下透明的状态栏。是的，所以你会看到状态栏上的文字与页面的文字会相互重叠，从而形成一种非常不好的视觉体验。

“日报”文章阅读界面的修改-1

对于这种情况，iOS 设计规范中已有相应的规定：

Prevent scrolling content from showing through the status bar.
As users scroll, you don’t want them to see a confusing mix of app content and status bar items in the status bar area. To give users the impression of spaciousness while still ensuring maximum readability, make sure the status bar has a background that obscures the content behind it.

不要让滚动的内容在通过状态栏时显示。
当用户滚动屏幕内容时，你不希望在状态栏区域看到应用的内容和状态栏项目形成一个令人困惑的混合。为了使用户依然拥有屏幕最大可读性的空间感，需确保状态栏后面有一个背景来遮盖其背后的内容。

另一方面，导航在 iOS 中有着非常重要的意义，不应盲目的追求屏幕空间的最大化利用。事实上， iOS 设计规范中也明确提到要慎重对待隐藏状态栏以及全屏式的沉浸浏览体验。

所以，我尝试做了以下修改：

• 恢复导航栏，“返回”键位于导航栏左侧，右侧放置切换上/下篇文章的操作按钮；

• 取消底部操作栏的“返回”按钮，向上滑动屏幕时保持操作栏处于隐藏状态。

“日报”文章阅读界面的修改-2

这样，在尽量保留更多屏幕空间的同时，还可以随时保证用户感知自己此时在哪里，可以到哪里去。

“评论”页面

还有，在文章最后的评论页面，原应用的设计是把评论作为一个单独的页面。我尝试把评论放在文章正文的底部，这使得用户在查看评论与文章内容时思维有着更好的连贯性，因为评论一旦脱离了文章内容也就失去了意义。

“评论”页面的修改

6、“我的”界面

在最开始的时候就提到，把导航栏上的“会话”图标移到“我的”标签列表中，让消息、通知有一个统一呈现的地方。

“我的”界面的修改

四、导航的重要性

在 iOS 中，导航的重要性不言而喻，这一点从 iOS 自带的应用就可以看得出来。如日历、邮件及 App Store 中，它们的导航都是很清晰的。用户非常清楚自己处于应用中的哪个位置，可以做一些什么，可以到哪里去。所以，你在 iOS 自带的应用中，基本上看不到导航抽屉（汉堡菜单）这种导航方式。

就拿这次的『壹心理』APP 重设计来说，当用户从“发现”进入一篇文章与从“日报”进入一篇文章，导航栏的呈现是不一样的。原应用的设计是在左下角显示“返回”键，但并没有表明返回到哪里去。所以，在重设计壹心理时，我就尝试恢复导航栏，并且常驻在屏幕顶部，“返回”键旁边加上相对应的文字，让用户随时知道他们可以返回到哪里。

两篇文章中“导航栏”的不同

还有，在这次的『壹心理』APP 重设计中，我尝试把“返回”键统一放置在顶部导航栏的左侧。而不像原应用设计的那样，有些界面把“返回”键放在底部操作栏的左侧，有些界面把“返回”键放在顶部导航栏的左侧，一上一下，让人感到混乱。

以上就是本次对『壹心理』APP 的重设计，谢谢。

---

我的个人微信公众号：跨界汪（KuajieDog）
新浪微博：小宁OPEN