Spotagram 设计开发手记

Spotagram 是一个基于地理位置的社交 app。也是我自『英雄联盟百科』之后,时隔一年的出山之作。只是一个课程作业,却有很多想做没做的遗憾,但是作为『伤愈复出』的第一战,还是可以勉强给自己一个六十分。


一:前情提要

上一次上安卓开发的课程要追溯到大三,这类移动开发的课程项目都出奇的一致——做一个完整的 APP。不过其实这也是最合理的作业,没有什么比从零开始设计开发一个应用更能检验上课所学了。还记得上次做的是一个利用颜色来标注不同类别的笔记应用;还记得那时候还用得是 Android 1.5/1.6/2.1;还记得曾经的 M9 和 MX2;还记得…好了不回忆了。

对比本科时的课程,这个学期的安卓开发课,可谓是『五味杂陈』。硅谷校区的老师远程上课时不时找点奇怪借口就不出现;吹毛求疵的要求却不用同样的标准来要求自己;比较大的作业量却没有让基础比较差的同学真正领悟精髓。除了小组项目还是能学到一点东西之外,其他的部分要不是为了那12个学分我是不会如此『丧权辱国』的。

不过俗话说得好『师父领进门,修行靠个人』,学习这个事情更多还是靠个人兴趣加上很多很多的坚持,当然还需要一点悟性。对于我来说,历经了 Anroid 3.x/4.x 时代的断层,总算是把代沟抹平了。Android 5.0 上开发总体已经比当年的拓荒时代好了不止一星半点(从安卓模拟器的速度就能看到),新的 Material Design 也降低了界面设计的难度,毕竟有了个指导思想和对应的设计语言,即使不设计,也不会看不下去,脸皮厚一点的还可以强行说是『极简』,唉这年头真是为自己洗地什么话都说的出来。

二:应用简介

设计 Spotagram 最初的思路很简单:因为吹毛求疵老师有多如牛毛的功能要求,传感器服务器 Fragment/Service/Activity 总而言之能加的都加上就对了。本来想着做一个手机版定向越野,后来就拍脑袋改为了山寨 Instagram,唯一的区别就是我们发的不是图(也不是寂寞),而是地理位置。不过后来想想还是加上了插入图片功能。因为发的是地理位置,所以展示也不能用瀑布流的方式了,而是像下面这样:

可以看到地图上大家做的标记,这一点是受了 Waze 地图的启发。用户点击对应的标记就可以查看详情,还算是一目了然。右下角的按钮是发送新的状态,导航栏里有『搜索』和『附近』这两个功能(当然还有设置和关于,不过不重要,略过),本来是打算弄图标的,但是一没有美工二懒得去网上找,就直接文字了,不过至少我感觉看起来还可以。

点击 NEARBY 就可以看附近的状况了,这里就有一个问题,用户能看到的内容,其实只跟当前所在的位置有关,也就是说,并没有关注和被关注的关系。这么设计灵感来源于 Same(可是现在已经变成一个奇怪的应用),当时口号大意就是没有关注和被关注就更加自由。不过从开发的角度来说不用多维护若干个数组,挺好。然后点击不同的卡片就可以看到具体的状态详情:

头像我做了遮挡,图片的话人小也就放着没管了(开发机就没有几张图),下面可以评论什么的,因为也没有什么关注不关注的,理论上所有人都可以评论。然后,其实就没有什么然后了,这基本就是Spotagram 的所有功能:爱记录的可以发发状态,活动举办者可以发发活动详情标出地点,饭店老板可以标记上今天的促销套餐,夜晚工作者可以标上自己的电话这样就不用发小卡片了,总而言之就是约什么都可以。

应用本身介绍完了,就可以真正进入重点了,在这个应用开发里具体的功能设计和遗憾教训。

三:设计

  • 交互逻辑设计
    • 尽可能减少用户需要输入或者选择的地方,如果输入尽可能用选择代替,选择尽可能用默认选择这样减少完成一个操作所需要的交互次数
    • 保证设计语言的一致性,例如发送按钮就是以 fab 的形式出现,或者说其实所有的确认操作都尽量在屏幕的右下角,方便用户点击并且形成统一的使用习惯
    • 不去更改已经形成的交互习惯,比方说长按地图上的标记可以拖动微调位置,地图可以旋转放大缩小并且更新地址会有动画效果,就和使用原生地图的体验一样
    • 卡片式设计+详情页,不但可以兼容手机布局,平板布局同样可以单栏变双栏
    • 尽可能朴素简约不花哨,利用留白和合理的内容布局来形成统一的视觉效果
  • 功能逻辑设计
    • 没有明显的登录页面,即使用户不登录,也可以查看附近的状态,方便匿名使用(做羞羞的事情?)
    • 进阶功能(比方说发布和评论)需要登录,登录信息会保存在本地,方便下次使用
    • 发布状态可以添加图片,不过现在的限制是至多一张,算是给服务器设计减压
    • 没有关注被关注关系,一切都已地理位置为准

四:不足与遗憾

  • 功能缺失
    • 没有帮助页面,界面逻辑代码也没有流出给用户熟悉操作的空间
    • 没有关注,这样不能看朋友都在哪里做了什么
    • 没有通知,即使有人评论了你的状态或者回复了你的评论也不会有提示
    • 没有分类,所有的状态统一颜色,没有什么区分度
    • 没有做过滤器,所有的状态都会显示,不能自定条件显示(如只看妹子发的状态)
    • 没有状态编辑功能,发了就发了,想删改都是不可以的
    • 地图控件和卡片状态的交互没有打通,地图标记没有自定义绘制比较单调
    • 不支持一对一聊天,这样不方便约
    • 设置和个性化比较弱,也没有各种附加认证之类的功能
  • 设计不足
    • 界面比较简陋,动画效果和页面切换效果不够自然
    • 控件美化不够,基本用得是默认样式
    • 一些交互方式比较生硬(例如评论)
    • 没有启动界面(不方便插广告,不对,不方便展示特定信息)
  • 遗憾
    • 没有单元测试
    • 一开始设计不够精细,后期改动很多
    • 没有太多时间细细打磨应用(英雄联盟百科迭代了一年才上了官方推荐,这个可能就做了不到五天)
    • 没有趁机学习把服务器部署在云端(当然也怪老师一定要用 servlet)
    • 没有太多考究相似产品,一遍借鉴和提高

五:思考

虽然开发时间很短,但是不断增加新功能改 bug 的过程还是很快乐的,依稀有当初在微软趁着实习之余不断『ship new features』的激动和热情。这个故事告诉我们做自己喜欢的事情是很重要的,这样即可以有动力把事情做好而且在真的把事情做好之后自己也会很开心。

另一个感悟就是想法当然是重要的,更重要的是到底能把这个想法做成什么样,还有很多东西需要学,还有很多东西需要去尝试,总而言之不要停下。

捧个钱场?