内容缓慢增加中...

「在工大​」App深度分析 & Axure高保真原型

产品 jwcyber 828℃ 0评论

想说的

去年见到在工大团队发出的招新公告,当时刻意留意了一下,有产品方向的需求。虽然当时自己就已经打算以后往产品方向走,但借口自己缺少相关能力,当时并没有产生加入的意愿。而最近学了一些产品方面的课程,也练了一下Axure,自我认为具备了一些产品方面的能力。正好这时也开始用在工大(我承认自己不是深度用户),体验了后觉得自己能够提出一些意见,于是就着手分析在工大这款App。

初始的文档创建于4月12日,距今快两个月了。写下这些点并不困难,主要是原型制作花了挺长时间。虽说做产品的不应该把大量的时间花在原型上,但我现在Axure用得并不熟,练练手也是挺好的。期间遇到在工大一次大的版本迭代,加上那段时间比较忙,就中断了一段时间,到现在总算大体完成了。不知道在工大开发过程中是否有这种原型,如果有的话正好互相学习,没有的话就算一个补充。(原谅我并没有任何开发经验。)

说实话,我对于我下面写出的这些东西的定位也不是太明确,因为各种东西都有,bug、功能需求、文案、软件逻辑等等。总体而言,我并未提出什么特别大的改动,都是一些细节的地方,但一条一条数下来也还是有好多了。希望这些点对在工大的发展能够有所裨益。

在工大Axure原型

在工大qq.jpg

可以点击下面的链接↓↓↓,在桌面端的网页中查看。文件总共10MB,服务器网络不太好,所以加载会比较慢。

在工大Axure原型

几点说明:

1、参照Android版在工大v3.0.1

2、大部分下面提到的地方都在原型中直观体现了,这也是原型存在的意义吧。

3、为了方便网页查看,选择的分辨率较低,为640×360。

4、有部分动画,如阅读界面下拉刷新动画没做出来。

5、为了减少工作量,对于文章、个人主页、聊天界面等都使用通用的一到两个页面;另外有部分界面直接使用了截图。

6、对多层嵌套(个人主页-文章-个人主页-文章…)做了一定妥协,消息界面查看个人资料的切换动画也因此做得有点别扭。这一点实在不好实现,尽力了。。。(实际软件开发中也这样?)

相关素材及Axure文件下载:

百度云:http://pan.baidu.com/s/1eRY0xxS 密码:l2mu

在工大App分析

前39条是一开始写下的,3.0版本中已经有部分进行了调整(即删除线覆盖部分),后19条为制作原型中发现的点。因为多而杂,所以没有进行分类排序,也没有进行重要性/紧急性分析,只是打了几个标签。

标签说明:

[现]:已在Axure原型中体现;

[明]:已明确这个地方改动后会更好;

[论]:需要讨论才能决定是否需要改动;

[重]:重要的地方。

1、底部tab图标没有对齐。已对齐。

2、写文章时“选择订阅”改为“选择栏目”。

发帖时选择板块为“选择订阅”,订阅是什么?不易理解。订阅指的是订阅某个栏目,并不代表栏目本身,在栏目编辑界面显示的也是栏目。需要统一说法。已改为圈子。

3、[现][明] 写文章退出时若检测到为输入内容为空,可以直接取消退出,不用提示保存。。目前阅读和我界面中写文章已经会自动检测是否为空了,但圈子界面由于自动选择了圈子,所以输入标题和内容为空时仍然会提示保存草稿。如果只是选择了圈子,没有写输入标题和内容,那么这篇文章是没有保存价值的,判定是否为空时可以忽略是否选择圈子。

4、十大的排名数字字号加大,位置从最后提到标题旁。虽然从位置可以看出排名关系,但是不如数字排名来得直接。现在的排名字号比标题还小,缺少十大那种排名的感觉。新版本删去了十大。

5、更改默认显示栏目。在工大的定位是校园资讯聚合APP,那么默认栏目也应该这样。只是我个人对于学校的各种新闻不是特别感兴趣,在首页看到那么多官方新闻和招聘会有点头晕,所以一开始会有这种想法。

6、[论][重] 栏目中有一项是社团,没有多少帖子。很多社团组织活动都会去各种贴海报发传单,如果把它们吸引到在工大来发发布信息,肯定这个板块就能活跃起来。每个社团都希望有一个展示自己的地方,尤其是在招新的时候,而在工大是一个非常合适的平台。如果想要活跃这个栏目,需要同学去和各个社团接洽,可能会比较花时间。

7、更改栏目管理界面描述文字:编辑——管理;点击编辑管理栏目——更多栏目。“点击编辑管理栏目”,乍一看,编辑和管理两个动词怎么放一起了。这种大家都能明白的地方可以不用提示。已更改为圈子。

8、更多栏目更改排序。非学院新闻的栏目订阅人数更多,建议放前面。已更改为圈子。

9、在栏目管理中查看其他栏目的详情后,返回的是主页而不是栏目管理,这里是一处交互逻辑问题?已更改为圈子。

10、[现][论][重] 文章底部顶和踩的按钮换位。

顶在左,踩在右,这应该是默认的规则?比如知乎(移动端),驱动之家、新浪、网易、SMZDM。但是在工大用了这么久左踩右顶,再改回去成本会不会有点大?另外是否可以实现撤销操作?主要是不小心会点到踩,这种事发生的几率太大了。我的建议想法是顶和踩可以同时操作,顶不可取消,但是踩可以取消。只要不立即向用户推送踩的通知,这一点实现起来应该不难?

11、[现][论][重] 文章内容页标题字号缩小2号,现在只能容纳13个汉字,好大,网易新闻、今日头条都是15个字。文章作者性别可以放ID后面,这样发帖时间就能放在ID下方了。如果是当年发布的帖子,去掉年份,加上时刻更好。不同于公众号文章,新闻和帖子的时效性都很强,即使文章列表已经有时刻,在帖子内部依然需要提示。另外对于今日哈工大等网站的内容,ID略小,另外如果能实现点击ID显示更多内容就更好了。原文的使用率虽然很低,但还是觉得字体颜色改为链接的颜色更好。我第一眼看到的时候就在犹豫这两个字到底可不可以点。

12、如果有超过3条评论,那么查看更多评论应该是一个高频操作。现在进入更多评论的方式有两种,一是点击右上角,二是向左滑动,前者不方便操作,后者不是所有人都知道。希望能在热门评论底部增加一个查看更多评论的按钮。自行否决了

13、评论界面:头像可以缩小一点,大小与文章页面作者的头像一致;点赞按钮下移与ID对齐;评论内容右移与ID对齐(缩小头像就是使ID左移,从而在每行评论字数不变的情况下使评论与ID对齐)。已修改。

14、[现][明] 未输入评论内容时应将发送置于禁用状态,同样的还有发表文章界面。这样就不用在发送空内容时进行提示了。

文章界面和评论界面的评论输入框大小不一致,文章界面的评论框出现光标后应自动扩大评论框,参见网易新闻。

文章界面的评论框出现光标后与“骚年,不来一发”几个字消失了,而评论界面出现光标后提示不会消失,体验不一致。两种方式都有APP使用,任意使用一种即可。

15、[论][重] 好友功能在开发计划中?这个的重要性应该是不言而喻吧,前几天才看到为了找到好友在文章下评论,我自己也干过这样的事。

16、[现][论][重] 表情可以换一套,旺旺的表情确实做得不是很好,用微信QQ的通用性会比较好。(把apk文件解压看了一下,发现很多阿里的文件,可以去掉一些没用的部分减小App体积吗?)

我刚在知乎提了一个关于旺旺表情的问题:如何评价旺旺的默认表情?。但是并没有人回答。

17、[现][明][重] 增加文字聊天气泡的宽度,与语音一致。微信QQ的语音和单行文本的气泡宽度一致。增加一段对话的行间距,现在有点挤。

18、[现][论] 长按说话按钮和输入文本框大小、圆角不一致。长按说话悬浮窗的文字可以上移一点,透明度可以降低一些;取消界面改为上图下字,与说话界面保持一致。现在两种界面位置不一致是有特殊意图的?

19、[现][明][重] 对方发送的消息和聊天背景对比度不够,更改颜色或者加上边框。背景灰度变大,对方的信息设为白色。

20、[现][明] 在聊天界面进入他人资料资料页后,点击发消息应该返回上一个聊天界面,而不是新开一个聊天界面。而如果是在文章评论界面进入别人资料页,再点击发消息则又应该新开一个聊天界面。这两种逻辑可以同时实现吗?

21、消息列表界面的用户名和消息之间行距过大,另外消息时间也没有与用户名对齐。

22、[现][论][重] 添加应用界面的介绍都可以删去,凭标题就可以理解应用用途,而本科生成绩查询、图书查询、校历等的介绍和名称也是重复。应用名称分别改为:本科生成绩查询、图书馆藏书查询、校历、校车时刻表、工大地图、校内电话查询、图书续借、院系介绍、我的课表、搜课蹭课、空教室查询。

校园地图上北京工商地图和几张破掉的图能够修复吗?

能否开发一个查询饭卡余额的应用?我觉得这个很实用。登录校园卡查询系统需要验证码才行,不过既然查询成绩的应用都有了,这个应该也没问题吧。

23、[现][论][重] 我界面的“消息”改为“评论”。这项“消息”包括了评论和赞,属于广义的“评论”范畴,更改后更贴切,也避免了与底部tab中的消息重复混淆。另外,把文章放中间会不会是更好的选择?我的文章和收藏都属于文章范畴,中间插一个评论不太好。把文章放在中间,也凸显了文章的主要地位。

24、[现][论性别只有男和女,还把默认设为了女!我觉得还是增加默认项为未知好些,或者加个什么其他选项也不错。

25、[现][明] 关闭新消息推送后振动和声音应置于禁用状态。

26、除了阅读模式和用户设置外其他几项设置都缺少icon。选项变少后不加图标感觉也挺好的。

27、“加入我们”放在“捐赠记录”后面,“更新”这一项应该处于靠后的地方。如果加一项“关于”会不会更好?

28、[现][论] “应用提交”“反馈”中,声明二字放大,与称呼等项对齐。

29、[现][明] “反馈”中“意见内容”与分割线间距太小.

30、[论] 使用条款重新排版。

30、加v的图标向下几个像素。已更改我界面头像 ID的显示方式。

31、我界面的个人主页使用方形头像;“学龄:”后加一个空格,或者使用中文冒号;学龄等文字灰度增加。

32、[现][论][重] 提示偏多,提示采取的顶部高亮小字的方式,可能出现没注意到或过于显眼的情况(这两个种体验看似矛盾,但确实都是我亲身感受),而且和现在的APP设计风格不太符合。我对部分提示进行了重新设计,使用的就是普通的半透明黑底+白字,对于重要信息可以在APP中央使用大框提示,非重要信息在底部小框提示就行。这只是最基本的方式,我希望关于这一点能够讨论一下。

提示出现地方:搜索无结果;订阅栏目成功失败;重复顶,顶后踩;复制分享链接;文件下载成功;刷新评论;空评论;添加删除应用;删除收藏;没有收藏;没有文章;切换阅读模式;清除缓存;无法连接到服务器;更新;退出登录;拉取登录界面;退出程序,分享取消授权。

33、[现][论] 弹窗位置现在在ID上方,覆盖在上一条消息上,会一定程度影响判断,可以在不影响ID显示的情况下适当下移。

34、[论] 增加个人介绍,个人签名应该不难实现?

35、[明][重] bug:长按删除收藏时会自动进入文章。

36、[现][论] 我界面写文章存为草稿后自动进入草稿箱界面。

37、[现][明][重] 举报增加确认环节。

38、发送消息的消息框圆角过大。

39、[现][论] 阅读模式弹窗的提示“阅读模式”靠右一点,更改阅读模式后弹窗停留一段时间让用户确认模式已经更改成功,不用在顶部另外提示了。


1、[现][明][重] 聊天界面,长按消息提示框会出现奇怪的字符串。此处可以不用提示,直接提供删除和复制两个选项即可,并且调整位置,将复制放上面,删除消息放下面。

2、[明][重] 我的应用从添加界面切换回来时动画不连贯,会抖动。貌似3.0.1有多处动画都是这样的?

3、[现][论][重] 圈子文章页和阅读文章页显示方式不同。阅读页只保留重要信息(内容和热门评论),圈子更类似于贴吧和论坛,直接展示全部信息,但是,二者的点赞和反对图标应该统一?或者是故意设置不同的图标让大家意识到这是两种不同的访问方式?

4、[现][论] 聊天界面是否可以实现点击头像查看对方个人主页?

5、阅读界面评论嵌套过多,单屏展示内容少影响阅读连贯性。

6、[现][论][重]“骚年,不来一发?”暂不论这种提示方式是否可取,但作为一句完整的中文,应该使用中文标点。

7、[现][论] 我的收藏展示样式更改,将作者显示出来,详见原型。相似的还有草稿箱。

8、[明] bug:写文章选择圈子时,圈子介绍被圈名覆盖了一部分。

9、[现][论] 阅读模式切换我做了一个延时退出,参见原型。如果点了就立即退出,感觉有点猝不及防。而且这样不用顶部进行通知。这一点有待商榷。

10、[现][明] 用户设置/清除缓存下方的空白改为灰色。

11、[现][论] 应用中电话查询根据后台查询结果的统计添加常用电话。一则更方便,二则现在的界面太空,可能让人对其可用性表示怀疑(这是我的个人感觉)。

12、[现][明] 应用界面和添加应用界面的排序不一致,按照首字母来的话需要将添加应用界面的空教室查询排到校内电话查询后面

13、[现][明] 文案修改:聊天界面中加入黑名单提示由“添加黑名单成功”改为“加入黑名单成功”,“移除黑名单成功”改为“移出黑名单成功”。

14、[现][明][重] 消息主界面的消息列表每一条相比QQ 微信要窄,看上去比较挤,可以稍微扩大一些。

15、[现][论][重] 底部Tab字号减小两号。现在底部Tab有5个选项,有点拥挤,缩小字号有利于美观。参考微信QQ。

16、[现][论] 圈子详情页的加减上下居中,申请圈主的+号与现有圈主头像距离适当增加。

17、[论] 聊天界面,现在的情况是:输入表情弹窗出来后,点击输入文本框会使表情弹窗消失,但是此时输入法并未弹出,而且文本框也失去了焦点。发送图片也是这样。参见微信,表情和文本的输入是可以无缝切换的,但是似乎需要事先获取输入法高度?原型目前没有加入输入法界面,所以这一块没有复现。

18、[现][论] 圈子的文章内容页,在选择全部、只看楼主和最新回复后,页面自动跳到顶/踩的位置。这里是为了让大家多去顶/踩吗?如果不是,为什么不直接跳转到评论内容处呢?

19、[现][明] 查看帖子图片界面,底部文章名在黑色蒙层边缘了,可以稍微向下移动一些距离,同时适当增加图片张图显示与文章名的距离。


目前就想到这么些,都是基本的细节问题,功能、交互、竞品等层面的分析还没有做,希望有做这些的机会。

bg_1.png

转载请注明:jwcyber » 「在工大​」App深度分析 & Axure高保真原型

喜欢 (4)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址