微北洋 App

(2015.1)
UI设计

背景

微北洋 是由天外天工作室出品、面向天津大学全体师生的集新闻阅读、自习室查询、校园公告、GPA查询、 图书馆查询、就业资讯、失物招领为一体的 app。我在其中负责App的UI设计。

当我们在查自习室的时候我们在查什么？

“当我们在查自习室的时候我们在查什么？”这是开始这个任务的时候第一个思考的问题。我们在查自习室的时候我们在想什么？从我自 己来看，粗略的可以分为：[选择所在校区] -> [选择所在教学楼] -> [选择教室]

校区只有两个选项[新校区/老校区]，可选教学楼也不是很多，大概每个校区十几个的样子。因此排除我开始想到过的直接搜索 教学楼的想法：用户打字搜索想去的教学楼，远不如直接呈现给用户列表，让用户去直接点击选择来的方便。

如何呈现给用户列表/筛选bar应该如何设计？

在做这一块的时候我参考了一些现有的APP。因为并不知道其他学校有没有同种类型的APP，但是我类比了一下之前想的层级筛选关系，选 择了电影购票应用作为我设计的参考。同样的，在购买电影票的时候会遇到在选择自习室时类似的步骤 ：[选择所在商圈] -> [选择电影院购票] -> [选择想看的电影] -> [选择场次]。

据此我做了一个初步的demo：上方三个下拉按钮，点击后会向下弹出模态框，模态框左侧为小区列表，选择校区后右侧为教学楼列表。

选择教学楼后模态框收起，显示当前选择教学楼的所有教室。

自习室列表中需要展示那些信息？

我还是从”我想要找一个自习室”开始分析，首先我要知道自习室在几号楼，教室号是多少。当然随之而来的是 这个自习室现在是否是空余(未上课)的， 觉得这一点需要用一种直观的方法让用户看到(比如说颜色块)这个教室是否可用。受电影APP的启发，之后想到的是或许我们应该给自习室加个评分？ 方便用户来选择自习室，同时也加了一点互动的内容到原本死板的APP中，这或许是个不错的选择。然后是或许用户想在列表中看到哪个自习室有空调， 是不是应该加个TAG？最后想到的是用户和自习室的距离，毕竟这也是选择自习室的一个因素。

排列顺序是怎样的？

在用户没有操作的情况下的排列顺序应该如何确定，各种选项的优先级应该如何确定。初步对用户的想法：

• 一般用户会有常去的自习室所以将最近去过的自习室放在最前
• 一般收藏的自习室会更加想去
• 用户会选择最近的自习室，所以是离我最近的教学楼的自习室
• 剩下的自习室按评分最高来确定
  对于二级排序，将可用自习室放在前，不可用自习室放在后。

设计过程

最后还是在原来demo的基础上改了一些筛选栏，原因是为我觉得还可以加一些筛选功能来实现更细致的有效放矢，如筛选只看空闲/只看有暖气/只看有空调等，最终版如下图。

最终还是把有暖气，有空调，无插座等等一些TAG放在了自习室详情页，而没有放在首页的capsule中。用户可以直接点击TAG来查看具有相同TAG的自习室。也可以添加评论/上传照片/收藏自习室。

删除收藏在开始设想的时候没想好交互方式是什么，起初实在capsule的右侧加一个删除按钮，但是感觉影响了整体美感。之后采取了另一种新的方式来完成删除按钮的交互： 像inbox删除邮件那样左滑删除，右滑归档。这样既不影响美感，也符合用户习惯。

Velacielad
2015.4