重规划『心理咨询壹心思』 APP

1、颜色/背景修改

这边,首要对『壹心思』 APP
的配色进行了小修改。状态栏和导航栏的水彩改成了和网站相同的粉色,标签栏的触动按钮的由描边上色改为概略填充,那样在视觉体验上也变得愈加融洽。

心理咨询 1

水彩/背景的修改

一、背景

在读大学的时候,就曾经通晓『壹心理』以此网站了,那时最喜爱浏览的是『心境杂志』版块。每当自己心思低沉的时候,壹情绪总能唤醒自己心里的力量,并且也让自家学会了许多连锁的心思学知识。所以,我对壹情感的劳力们是满载感激的,他们在用自己的法子去影响部分人,同时也在变更着一些东西。

心理咨询 2

壹心境 心理杂志版块

这时候,壹心思还尚未手机 APP 客户端,直到 2015 年底于有了『壹心绪』
APP。在用了一段时间『壹心思』 APP
后,我意识它有一部分地点可以做得更好一些。于是,就有了这一次重布署『壹心情』
APP 的想法与行动。

1、网站内容结构

这就是说,壹心思是做哪些的?

壹心境致力于营造一个心思学平台,聚集国内新锐心思学人,输出健康、科学的心绪学价值。

现实的表现方式为:

思想杂志——为公众提供国内风靡、最优质的心思学资讯

思想电台——为丰田(Toyota)提供最温暖的治愈系心境 FM 节目

思想测试——为群众及团伙提供趣味实用或正规的测试

情感咨询——连接日产和思想咨询师,提供在线解决方案

EAP 服务——为公司提供依照移动互连网的职工心思帮衬

心理咨询 3

壹心思 网站结构

个中,情绪电台、心思测试在移动端已经有单独的『心绪FM』、『口袋心思测试』 APP 作为载体,所以在『壹心理』APP
设计上要合理布署内容的展现。

2、『壹心情』 APP 产品布局

『壹情感』 APP
的产品结构,重要分为发现、心事、晚报、我的、会话四个部分。

心理咨询 4

壹心绪 APP 产品布局

原客户端是把“心事”分为“免费求助”和“专业求助”,我觉得那样的宏图也许并不是太好。“免费求助”的面目是倾诉心事,里面汇聚了各类各类的真心话,在某种程度上得以明白为“吐苦水”。别的,把“免费求助”作为心事倾诉的入口,也出示有些不太妥当。因为,用户在倾倒心事从前就已经被贴上“求助”的价签,暗示用户作为一个“受害者”的身价去进行描述。

心理咨询,再结合壹心绪在 App Store 中对特色功用的描述:

标准贴心:5000位心境咨询师进驻,为来访者提供标准贴心的心境轻问诊,有需求的话还足以由此免费语音预订服务于咨询师一对一解答心事。

助人自助:Self-help,每一位来访者在地点都足以为急需的人提供真正的辅助和提出,成为主人达人,在助己的还要,陪伴愈多要求协理的人。

心思晚报:每一天在上面见一些人,看到一些故事,学到一些非凡、有趣、实用的心思成长知识和技巧,在那边,心灵每日都可以得到成长。

在结合起来的率先句:壹情绪——来访者心事的说道,咨询师的成长阶梯。

故而,有必不可少给予“专业求助”丰裕的尊重,于是自己决定举行以下的改动:

  • 去掉“免费求助”,把“心事”和“专业求助(专业咨询)”分开成为独立的入口。
  • 把“会话”统一归并到“我的”入口里面。

心理咨询 5

壹心境 APP 产品结构(重安插)

主界面导航

晚报界面原来是“赫尔辛基菜单”的导航设计,它的好处与弊端都一律明显。好处是节约了屏幕空间,让用户聚焦在主页面的始末中;坏处是“休斯敦菜单”的条规可知性差并且操作相对繁琐,在
iOS
上的突显更是如此。考虑到早报仅仅是显得不一样档次的条条框框,而条目之间也不需求进行交叉导航。所以,我尝试做出以下的改动:

把侧边导航(赫尔辛基菜单)改为滑行标签导航。

这么的千锤百炼,使得条目标可知性越发友好,也使得用户发生越来越多的点击欲望。

心理咨询 6

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

“评论”页面

再有,在篇章最终的评头品足页面,原选取的规划是把评论作为一个独立的页面。我尝试把评论放在文章正文的最底层,那使得用户在查看评论与文章内容时考虑有着更好的连贯性,因为评论一旦脱离了文章内容也就错过了意思。

心理咨询 7

“评论”页面的修改

4、“专业咨询”界面

在此间,我尝试把“专业求助”改为“专业咨询”,转变用户的身价与标签,让用户抱着尝试去明白的情感去面对咨询师。

把“专业咨询”作为独立的输入,可以幸免用户“沉迷”于“心事”中而忘掉了“专业咨询”那件事,同时可能也使得用户与咨询师之间的互动率得到增强。

心理咨询 8

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

四、导航的要紧

在 iOS 中,导航的要害不问可见,这点从 iOS
自带的行使就可以看得出来。如日历、邮件及 App Store
中,它们的导航都是很清晰的。用户相当掌握自己处于采纳中的哪个岗位,可以做一些怎样,可以到哪儿去。所以,你在
iOS 自带的选用中,基本上看不到导航抽屉(胡志明市菜单)这种导航格局。

就拿这一次的『壹情感』APP
重设计来说,当用户从“发现”进入一篇小说与从“晚报”进入一篇作品,导航栏的展现是不一样等的。原使用的统筹是在左下角展现“再次回到”键,但并不曾标明重临到何地去。所以,在重陈设壹心理时,我就尝试苏醒导航栏,并且常驻在显示屏顶部,“重返”键旁边加上相呼应的文字,让用户随时精晓她们得以回到到哪儿。

心理咨询 9

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

再有,在本次的『壹心思』APP
重设计中,我尝试把“重临”键统一放置在顶部导航栏的左侧。而不像原接纳设计的这样,有些界面把“再次回到”键放在头部操作栏的右边,有些界面把“重返”键放在顶部导航栏的左侧,一上一下,令人感觉混乱。

如上就是此次对『壹心思』APP 的重规划,谢谢。


自己的私房微信公众号:跨界汪(KuajieDog)
博客园搜狐:小宁OPEN

“时间标签”

再有一个细节,关于“时间标签”的职位提醒。原来的小时标签提醒的地点是追随页面滑动而暴发变化,当滑到底部待加载完越来越多内容时,时间标签会冷不丁往上跑。那种体验不够自己,而且屏幕内容的滑动方向与时光标签的移动方向相反,会大大增加分散用户注意力的风险。所以,我尝试做了以下修改:

将时间标签地点一定在滑行标签栏的右下方。

那样,用户在浏览内容的时候,就会无意的以为在岁月标签下方的始末都属于时间标签的日子限制内,从而收缩了用户的回味压力。

心理咨询 10

“时间标签”地点的修改

开卷界面导航

点击列表进入到详细内容后,原接纳的筹划是导航栏消失,状态栏变透明,“再次回到”键位于底层的标签栏。当举办上滑操作时,底部的工具栏隐藏,整个页面就只剩下透明的状态栏。是的,所以你会看到景况栏上的文字与页面的文字会互相重叠,从而形成一种乱七八糟的视觉感受。

心理咨询 11

“晚报”小说阅读界面的修改-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
设计规范中也明朗提到要慎重对待隐藏状态栏以及全屏式的沉浸浏览体验。

故而,我尝试做了以下修改:

  • 复苏导航栏,“重回”键位于导航栏右侧,左侧放置切换上/下篇作品的操作按钮;
  • 打消底部操作栏的“再次来到”按钮,向上滑动显示器时保持操作栏处于隐藏状态。

心理咨询 12

“早报”文章阅读界面的改动-2

那样,在尽量保存越多屏幕空间的还要,还足以每一天有限扶助用户感知自己此刻在哪个地方,能够到哪儿去。

5、早报界面

三、UI/UX 设计

二、产品结构


2、“发现”界面

“发现”界面主要有三种类型的情节结合,分别是:小说阅读、每日一测、活跃咨询师/活跃用户,通过卡片作为载体来表现内容。

在“小说阅读”这一块,原采取的设计是文章标题和小说摘要放置在图片之下。那样设计的功利是图形和文字展现得很清晰,坏处是音信的层级、逻辑关系有些混乱。因为页面没有丰富的上空去完整地展现三种分裂的音讯(小说阅读、天天一测),用户无法很好的去分辨页面中音信的隶属关系,甚至有时候不难造成对象归属混乱的题材。

据此,我尝试把“文章阅读”的图形和文字整合起来,在图纸下半部分叠加一个粉紫色透明渐变,然后再把文字呈现在此之上。这样,图片和文字的层级、逻辑关系就变得很清楚了,同时也使得显示器有丰硕的上空去完整的呈现三种不相同类型的音信。

空中有了,但“小说阅读”和“天天一测”的变现格局太过相似,并且“每一天一测”的空中利用率也较低。所以,我两次三番尝试对“每天一测”进行创新:

把“天天一测”以纵向排列方式放置到卡片左边,并且配上条形品牌紫色以杰出其辨识度,然后砍掉“每一天一测”原来地方的留白。

心理咨询 13

“发现”界面的修改

点击进入“每一天一测”界面时,发现页面裁撤了导航栏的宏图,“重临”按钮位于屏幕底边的工具栏中。同时,初次进入“每一天一测”界面时,页面下半部分还会突显其余用户的评介内容。

其一规划令人感到迷惑不解,用户还不曾开展思想测试,也还不知晓测试的结果,此时来得其他用户的评说内容的含义是什么?而且,在用户完结心理测试后,评论内容与测试结果会再次出现,当然那也是相比合理的方案。所以,我尝试对“每天一测”的界面进行修改:

  • 回复顶部导航栏的统筹,“重临”键位于导航栏左边;
  • 废除显示屏底边的工具栏,撤废页面评论区域的情节;
  • 外加“初步测试”按钮的面积,并将其义务与测试摘要分歧开来;

心理咨询 14

“每日一测”界面的改动

6、“我的”界面

在最初阶的时候就事关,把导航栏上的“会话”图标移到“我的”标签列表中,让音讯、公告有一个统一展现的地点。

心理咨询 15

“我的”界面的修改

3、“心事”界面

前方说到,“免费求助(心事)”与“专业求助(专业咨询)”成为独立的输入。所以,“心事”界面就成为纯粹的隐衷浏览页面。

  • 去掉“专业求助”入口;
  • “免费求助”变为导航栏左边的“写心事”图标按钮;
  • 用便捷扫描列表代替卡片式布局,因为同类且操作简便的始末使用卡片会分散用户的注意力,难以成功高效扫描和浏览。

心理咨询 16

“心事”界面的修改

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图