Red Pulse Mobile Cover CN.png

项目背景

Red Pulse 手机程序是一款向用户提供Red Pulse平台内容的移动应用程序。 我们设计并与开发供应商一起发布了该应用程序。该应用允许用户查看平台上所有类型的内容。 与网站平台相比,手机应用的功能会稍微有所不同,因此我们重新组织了信息结构并专注于手机上的用户体验。

信息架构

Red Pulse Mobile IA.png

移动应用和网页端功能很类似,除了注册,工作间,钱包和部分设置功能。

移动端信息架构和网页端不同的地方在于,网页端因为屏幕尺寸的原因,可以有更扁平的信息架构,通过不同的导航方式连接各个板块。

而手机端在采用底部导航的情况下无法无限制地增加板块,因此对信息架构进行了重新的优先级设计和层级设计

设计迭代

我们手机应用的第一个版本是在2018年7月发布的,只显示了insights下的文章。 在2019年5月,我们设计了新的手机应用并包括了上面列出的所有功能。

同时 我们还根据反馈将界面改为更加符合专业用户使用习惯的样式。

Red Pulse App Design Iteration.png

我最开始会在纸上画出大概的设计,以便快速地从其他人那里获得即时反馈。 接下来我用Sketch建立线框图并导入了真实的数据。 草图加线框图的设计会重复好几轮直到和需求方达成一致后才会得到最终确认完成设计。

Red Pulse Mobile Wire CN.png

设计考虑

设计关注列表时也遇到了很多的挑战,其中一个挑战是由于包含许多操作,例如创建,模板,编辑标签,搜索标签等,同时手机界面的可操作区域有限,因此容易造成信息混乱、层级太深。我做的第一件事是将关注列表从Insights中拆出来单独放在下方的底部导航中。接下来,就像我经常做的那样,先确定功能的重要性,确保主要流程对用户来说直观清晰并隐藏次要选项。 我为用户设计了自然的引导,以帮助发现其他可能的选择,例如空状态的提示、新手引导、tooltip提示、动画、图标等。

Watchlist.png
Prompt

为了提供沉浸式的阅读体验并确保读者给出有意义的评分,打分栏只在用户滑动屏幕到内容主体的底部时才会出现,然后将保持在屏幕的最底部。 因为打分会涉及到作者的收入计算,同时考虑到用户可能的误操作,我们将评分设计为允许用户在5分钟内更改,之后用户将无法再做任何改变。

Note Detail.png

筛选功能是另一个挑战。在网站上,可以在一屏以内轻松地展开子项、在各层级间切换和选择。但是在移动设备上,由于屏幕尺寸的原因,这些项目是层层级联的。 首先要考虑的是选择的形式。例如,文章类型很重要,同时只有4个选项,因此我们选择直接显示它的选项。对于行业而言,我们只展示顶层选择,而其他子选项则是在级联内。主题是随机并且经常变换的,因此我们允许用户水平滚动以查看主题的标签。一旦用户进入主题页面,他们将看到按文章数量排序标签的完整列表。对于实体,我按字母顺序对内容进行分类,使其更易于导航。 最后,所选中的标签将显示在底栏中,用户可以展开后滚动查看所有已选的标签,避免来回在不同页面中查找。

Filter.png

设计文档

由于我们只负责设计部分,开发外包给供应商,我必须为供应商准备一份详尽的交互说明文档。因为我们内部使用Atlassian的Confluence系统,我通常直接在系统中写好文档然后导出交给供应商。

Spec.png

完成产品

因为应用程序将由供应商开发,与使用敏捷开发的网页端平台不同,我们采用瀑布流程来开发手机应用程序。尽管这样,在设计应用时我们还是带有部分敏捷开发的原则。例如创建线框图和原型,并经常根据反馈修改我的设计,迭代设计内容。 我相信越早得到反馈,我们就会越少犯错误。 直到最终确认之后,便再开始视觉设计,撰写规范文档,然后交给供应商并与他们一起工作完成应用的开发。