豆瓣同城 • 重设计

注一：本文本着「写完一篇文章再砍掉一半」的原则，不必要的解释和说明都没有详细展开。

注二：本文所有图文（除了截图）皆为原创，版权完全归我本人所有。如有未经允许的「任何部分或全部」的转载、抄袭、盗用，全部默认为：您已同意并接受给我本人 3 万元。本文「发布」时间：2015 年 04 月 21 号 15:00。

看不清请点开大图，分辨率超高哦~

豆瓣同城上边类似于 Scope bar 外加必要控件，下方则是常驻的 tab bar。常用操作集中分布在上方，经常需要用手去「够」它们。

上方操作密集

在「精选活动」页面中，采用了「横划」的手势操作，效率非常低下，一次只能看一个活动，想要看满十次活动，需要连划十次。

全部是横划划划划

在全部活动中，采用了 Picker 来为「三种」不同类型的东西「分别」作出「唯一」的选择（注意我的强调语气），难用至极。

真 • 复杂之分拣器

第一次打开 App 时 tab bar 中间的叫做「浏览搜索」，但当你点击后，它会把自己名字改成「全部活动」，它会自己变名字... 总之，无论哪个名字，逻辑都很奇怪。

善变

而默认为首页的「精选活动」中，一个活动可以重复出现三次在「热点」中，「热点」、「周末」和「豆瓣猜」三者并列的必要性也值得商榷。

「我的活动」中，「参加」和「感兴趣」是「二选一」的逻辑关系，但在它们的后面还有一个「演出票」，逻辑不明。

「演出票」逻辑不明

另外，在其他页面，「横划」这个手势被「竖划」取代，仅仅三个页面却使用不同的手势操作。

豆瓣全系列 App 只有「豆瓣」、「豆瓣 FM」以及「豆瓣阅读」更新适配了 iPhone 6/6P，其余皆未适配。

豆瓣同城尤其突出，因为它的风格还停留在 iOS 6 的时期，不幸中的万幸是它竟然支持「右划返回」。

首先统一所有界面的手势操作，将「横划」用于在 tab 直接切换，将原有位于底部常驻的 tab bar 提到上方作为 Navigation bar，底部让位于更多的信息展示。

将之前的「热点」、「周末」和「豆瓣猜」以 filter 的形式移至右上角，整个内容页根据用户智能排序。

再者，将之前的 Scope bar 提到底部，方便操作，将逻辑有冲突且并不常用的「演出票」和「设置」移至 Navigation bar。

统一手势 & 其他改良

用「探索」取代之前会变身的「全部活动」，指向性更加明确，划到「探索」页面时，自动改为亮色，配合多种明亮色彩，营造出「活动」的气息。

同时，取消之前的 Picker，将权重最高的「类型」单独提出来，并且可多选。

选好类型后，直接呈现内容页，在底部放置「地区」和「时间」选择，方便操作。

「探索」流程改进

这样将三者分开，先提前选好「类型」，之后再去考虑权重较轻的「地区」和「时间」，无形中减轻用户的选择负担，且用户使用时可以更好地吸收信息。

整体风格采用深色，内容图片的良莠不齐在深色环境下视觉平衡稍好一些，也更容易凸显气质一些。

扁平化、毛玻璃效果也是 iOS 7/8 时期的一个习惯。

为了方便直观了解改进前后，我画了一张豆瓣同城的逻辑图解和我重设计之后的图解，进行前后对比：

Before

After

以及，随手 Mock 了两张效果图~

Artboard 17.png