# iBistu4.0（先导篇）

> 原文：https://pjhubs.com/2018/01/24/iBistu4-0%EF%BC%88%E5%85%88%E5%AF%BC%E7%AF%87%EF%BC%89/
>
> 作者：PJHubs · 发布于 2018-01-24 · 标签：iOS、iBistu

最开始我知道iBistu的时候非常憧憬，那会应该是大一，得知咱们社团有给学校做了一个移动校园App，这无疑给当时正在学习iOS开发的我打了一剂强心针，为啥？那个时候社团还没现在这般“自由”，只有每周日晚上的小组活动时间才能和各位学长和同学交流，那时候虽然也像现在这般open，但实在是不好意思，估计可能是因为以小组学习的名义起的活动太少了，也不敢经常去。也就因为这样，基本上可以认为大一上的iOS我搞的非常非常非常痛苦，不光是要熟悉大学生活，还要督促自己在喜欢的事情上持续进步，但现在想起来还是很痛苦，大家应该都应该有对一门技术感到迷茫的时候，我也同样如此，甚至比各位同学当时更加迷茫。

随着时间的流逝，一年多过去了，到了大二下受胡博学长的邀请，非常有幸的加入到了iBistu 3.3的开发中来，“士别三日，刮目相看”嘛，此时的我已经结束了第一家实习公司的工作，算是真正踏入了iOS开发的坑中，对技术的辨别能力已不同往日。那时拉下了iBistu的工程，看了一眼，说实话，当我看到了所有的页面逻辑都是用的StoryBoard连起来了以后，萌生退意，因为想要把这一坨StoryBoard的逻辑看懂，估计没有当时拖这个逻辑的学长带着看，是搞不定了。😅

真正进入iBistu 3.3的开发是在去年的五一劳动节假期，此时我再把iBistu的工程拉下来一看，emmm，胡博学长已经把之前的老代码通通kill掉了，这波操作我很喜欢。3.3的iBistu还是用了最开始的设计，而且也仅仅只是用了设计而已，每个入口里边的东西都不一样了。而且当时的我看胡博和徐鼎学长这架势，是要把iBistu之前的所有设计统统推翻，据说是不想跟教务处有关系了，而且很多功能也都不想要了。

看了相关的后端文档，发现工作量不大，而且没有设计稿！这就意味着可以个人发挥的空间非常大，在3.3中我的主要工作是负责校车、黄页、失物招领和个人中心模块。根据之前的设计来看，使用了collectionView来切割并作为这几大模块的入口，彼此之间的独立性较大，高铭学长跟我说，之前他们在写iBistu的时候，每个人负责不同的模块，各个模块之间就相当于是一个独立的App，风格都不统一。我呢就完全按照个人思路在五一假期持续推进，因为整体工作量并不大，大部分工作很快就结束了。

过了一段时间，iBistu 3.3版本上架了，但是整体的开发流程下来给我感觉非常糟糕，首先是很多细节没考虑到，其次是没有一个统一纲领，不知道如何下手，只知道自己埋头苦干，写完了就完了，也没人跟自己说这么做到底好不好，靠不靠谱，再加上当时并没有测试的概念，导致很多小的细节完全就忽略掉了。

以上就是我切入iBistu的一些经历。在iBistu 3.3的开发过程中，慢慢的理解了老师和各位学长们做这个事情的初衷，也明白了为什么社团三年多来都在坚持做这件事，可能它的比重在当时比较小，甚至我能感受到老师和学长们貌似对其都有些懈怠，当时我很爱社团，但是因为自己的话语权较小，很多事情自己是做不了的。

---

新的开发周期来了！！！社团也迎来了新的导师团和同学加入，我开始谋策着iBistu 4.0版本的开发，其实3.3中很多事情只是达到了做完的度，但并没有做好。再加上说真的，虽然我也认为4.0的设计某些地方比较欠缺，但是比起3.3真的好太多了，在4.0中我们开发团队主打黑白简约风，大量留白，但是留白带来的后果就是整体很空，因此我们再进一步，把字体加重，把用户的注意力从大量留白区转移到内容中来，这部分在新闻模块表现得较好。
    
4.0的主要工作是UI和模块优化，UI部分其实改动压力很大，因为社团里的同学基本上都是走开发路线，没有人对产品设计方面有过研究，我们也没法大改，只能还是在之前的基础上优化。

首当其冲的就是UI风格的统一，我首先要大刀砍掉的就是之前版本中给用户体现出独立性非常强的collectionView设计，改用tabBar的方式把一块儿一块儿的入口风格改为一连串、连续的风格，虽然本质上还是非常独立的，但是从用户的角度上看，不会给他们一种这是不同东西的错觉。

统一完整体入口风格后，开始着手考虑修改整个产品中使用频率最大部分——“新闻”。对比了iBistu目前的新闻设计和主流市场上的资讯类App，发现大家对咨询类App的设计如出一辙，基本上都差不多，因此决定对iBisut新闻模块设计不做修改，只是完善并统一风格，加粗了字体，把3.3中的“图左字右”的方式改为了copy for 知乎。😄。但是因为跟以往的设计风格不一致了，且后台新闻数据接口未改变，因此没法适配copy for 知乎的设计。（这种设计要求图要大且清晰）我们能做的就是等待，如果哪位同学有兴趣研究一波Node.js，可以借此机会锻炼一番。

<div align="center">    
<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4888.PNG" width = "50%" height = "50%" align=center />
<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4889.PNG" width = "50%" height = "50%" align=center />
<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4890.PNG" width = "50%" height = "50%" align=center />
</div>

黄页部分因为都是与学校有关的部门，导致设计上不能过于突出，还是按照之前设计来，直接单拎出来了一个tableView加载数据源即可

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4891.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4893.PNG" width = "50%" height = "50%" align=center />

地图部分跟团队开发同学说要把之前中的大头针给去掉，换成校标logo，用于标识各个校区。但是这部分工作弄完后，我们发现logo“漂移”太严重，地图缩小时，只是logo的中心对上号了，但是logo底部的尖端并未对上号，给人的感觉就像明明标识的是健翔桥校区，但地图缩小后却是健翔桥家乐福店，emmm。

因此，这个做法也抛弃掉了，最后没办法，为了保证简约的风格，还是改为大头针吧，但出乎意料的是没想到在iOS 11上的地图大头针样式还十分的好看，显示的效果也不错。（大家可以在iOS 11上自行查看一番）因此也并未进行修改，反而减少掉了一个入口——“校车”，我们把“校车”入口放在地图VC上的左上角leftBarButton位置上，设想是因为校车也是作为地图容器的一部分，校车中也暴露出了地图概念中的路线思路。

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4897.PNG" width = "50%" height = "50%" align=center />

校车部分，在当时3.3版本中还觉得一般般能看得过去，但是统一完样式风格后，再回过头来看校车的设计，真...真心丑。😅。因此我们采取的做法是大量采取黑白和字符设计，把3.3中的以图代表“来”和“回”的标识通通采用字符左右箭头的的样式，减少对用户观感的冲击，从而把用户注意力转移到区别“教学班车”和“通勤班车”中来，防止用户看错班车排班。

在校车详情部分，之前是通过颜色块串的方式区别该次班车“来”和“回”的时间，虽然确实是能够较为清晰的做了区别，但整体的感观还是非常的单调和突兀（虽然现在4.0还是有些做的不太好的地方），肯定要去除颜色块链的区别方式的。最后我们把校车详情的样式变为了如下所示，

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4898.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4899.PNG" width = "50%" height = "50%" align=center />

在失物部分，没见过老版本的iBistu失物招领是怎么做的，3.3版本参考了闲鱼的设计，用了scrollView去作为全部失物图片的载体，4.0版本想着用瀑布流的方式去作为整体的展示主体，但时间上不允许了，现在唯一不满意的地方也就是失物和失物详情了，如下所示，

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4894.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4895.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4896.PNG" width = "50%" height = "50%" align=center />

在我的部分，第一个要搞掉的就是把之前自己写的“退出登入”给kill掉，当初这个页面是用StoryBoard搭的静态tableView，然后为了炫技（其实并没有技术含量）才加了奇丑无比尴尬的“退出登入”，巨大的败笔，最后的做法是把“退出登入”入口移到了“我的”右上角rightBarButton位置上，但估计有可能是因为放置的icon图片有歧义，个别同学以为是“分享”。

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4900.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4904.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4902.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4896.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4903.PNG" width = "50%" height = "50%" align=center />

<img src="http://7xszq8.com1.z0.glb.clouddn.com/IMG_4905.PNG" width = "50%" height = "50%" align=center />

iBistu 3.3开发完的时候，咱们说心里话，给我的感觉是埋汰了。4.0开发完后虽然它还不够完美，但是我能拍着胸脯说，“学长们！我们帮你们续了一秒！”😝
