05/16

微博物语 – 设计日志(贰)

在1.2版本中,增加了大家期待的查看分组功能。之所以把这个功能放到这个时候才增加,一方面是等待新浪微博分组相关api的完善,另一方面我们也在考虑这个功能的实现方式。这里和大家分享一些这部分的设计思路。

查看分组功能的导航,在iOS(iPhone/iPod touch)中可以通过Grouped lists和Tab bar等形式来呈现(如图)。以Grouped lists的形式来呈现查看分组,则需要平衡下面这些因素。

优势:
1. 秩序感很好
2. 便于直观的呈现较多的分组
3. 容易进行设置:对按钮进行排序,删除等操作

不足:
1. 需要额外的界面进行管理组织
2. 如果用户分组较少,必要性不大(其实还是上面的问题)

Tab bar的形式和前者相比,很大的优势就在于不需要额外的界面就可以进行操作,设置部分可以放到应用的全局设置里进行(目前新浪微博还不支持相关的api调用)。出于对微博物语整体风格的考虑,我们决定以tab的形式来呈现查看分组的功能。

下图是我们设计的几个备选方案:

A和C方案比较适合微博物语,因为在最初的设计中,我们就保留了滑出Tool bar进行操作的特性。在最终的设计里,我们选择了C方案,是出于这几点考虑的:点击导航区域后,下滑展开分组栏,视觉上延续感好,操作者可以很自然的把视觉焦点聚集在下面的分组栏内容上。展开的动作也延续了微博物语里工具栏的滑开方式。使用过的朋友都知道,回到顶部的方式是通过点击顶部的状态栏来实现的。查看分组需要点击导航栏区域来实现。以HVGA (480*320)的分辨率为基准,状态栏高度为20px,导航栏高度为44px,并且相邻紧靠在一起,为了避免这个位置的误操作,从操作上我们做出了人为的区分,导航栏的点击使用长按的手势。点击与长按,从手势上避免了由于操作区域小而靠近所导致的容易误操作的状况。从功能的层次安排上,将展开、选定分组的操作引导至下一层次,用户不用徘徊与一堆平级的操作海洋之中,虽然提高了一点学习成本,不过利大于弊。

1,034