UI项目分析-交互-交互设计
面5笔5QQ和微信在交互设计上有什么不同
几天简单研究了一下微信和QQ的交互设计,发现了不少有趣的点,下面分享我的一些想法。
首先是架构方面
微信使用的是底部导航栏,四个,分别是“微信”、“通讯录”、“发现”、“我”,然后上方的应用栏右侧有搜索和添加的图标。应用栏的内容是相对固定的,切换标签时不会变动。
对应的,QQ使用的是底部导航栏加上侧边栏,底边是“消息”、“联系人”、“发现”,侧边栏是个人相关的内容。跟微信基本一致,只是将个人相关的内容统一收进侧边栏里面。
另一个区别就是上方的应用栏,会根据下面的内容不同而变化,搜索功能也不是一个图标,而是在应用栏下方独占一行。
问题1:为什么QQ要使用侧边栏?或者说,为什么微信不使用侧边栏?
问题2:应用栏的使用,是应该与当前内容相关,还是放置一些全局的内容?
侧边栏的可见性确实差一点,特别是QQ中使用用户头像作为入口,不如按钮直接。但与微信相比,QQ的个人中心更有"感觉"。
首先是侧边栏自身所带来的空间感,就像打开一个属于自己的小天地,而此时侧边栏带来的可见性问题也变成了隐秘性好,让用户感觉这就是属于自己的一块地方,有自己的东西,像收藏、文件、钱包等。当然,这种感觉还需要视觉设计来渲染。另外,QQ的功能比较多,侧边栏也算是一个比较好的收纳方式,可拓展性和灵活性都比较好。
微信所表达的则是另一种情感,就是简洁。可以直接用底部标签搞定的事,为什么还要加上一个侧边栏,还要增加一个小空间。还有就是一致性,个人标签其实还是一个信息的集合,与其他标签没有本质的区别,所以也应该是一样的。
再来看看QQ上的分段控件,可以用其他方式代替吗?可以使用标签,或者将分段控件放置在应用栏下方,但是在只有两个分类的情况下,目前的设计还是比较合理的。那么这样一来,应用栏的右侧空间就不够放置“搜索”和“更多”两个图标。在两个功能都需要明显展示的情况下,因为搜索功能本身就要打开一个输入框,不如就直接放置在下面,也比较直观。
因为分段控件的分类只是针对“消息”标签,所以其他标签自然需要更换相应的内容。这里我不太理解的是,为什么除了“消息”标签,其他都将“更多”的图标换成文字按钮,而且只是一个单一的功能。
微信的应用栏则比较统一,有搜索和更多两个功能,在任何一个标签页都可以打开。
“更多”这个功能,其实就是一个溢出菜单,溢出菜单里面要包含什么功能,为什么要使用加号作为icon?有没有提供这些功能的其他入口?这里更多还是涉及到业务还有需求方面,就不展开说了。
接着来看聊天列表
包括聊天信息的展示,正常情况和有未读信息的情况,以及聊天信息的操作,长按或手势。(个人聊天列表不太好贴出来,大家基本都有使用,就不贴图了)
第一个差异是头像的形状,QQ是圆形,微信是方形。与之相关的区别就是,QQ的群组是有独立的头像的,微信的群组则是直接使用成员头像的缩略图。还有就是QQ头像有各种装饰,圆形百搭。所以给我的感觉跟上面框架中一样,QQ有趣、微信简洁。QQ可以有各种玩法,各种自定义,微信则干脆没有,我记得刚开始使用微信,是可以没有头像的,就是一个系统默认的图片。
第二个差异是未读信息,也就是小红点。QQ是显示在右边,相对独立的一个小气泡,里面会显示未读信息的数目。然后可以直接拖住气泡扔掉,这个效果一开始我没发现,后来才知道,感觉挺好玩的。还有就是可以左滑呼出操作,有“置顶”“标记为已读”“删除”等,三者用不同的颜色区分。
微信依旧是走简洁路线,直接在左边的方形头像右上角有一个小红点。具体的未读信息数目在列表中显示,也没有相应的动画和手势操作。长按相应的消息会弹出操作,操作内容与QQ基本一致,对了,QQ中也可以使用长按呼出操作选项。
未读消息的设计,跟头像也有一定的关系。毕竟在QQ上,如果你的头像有装饰,再加上小红点就不太合适,所以将其放置右边也算合理。记得前段时间,有人在微信上用了一些自带小红点的头像,让很多强迫症用户忍不住一次次点开。那不知道可不可以这样认为,微信让标记为已读的操作不够直接,是要引导用户去打开聊天记录。不仅标记已读,删除,置顶的功能在微信上也不够方便,相比于QQ而言。
QQ上左滑的手势很方便,而且三个操作有颜色区分,可点击范围也足够大,再加上未读消息的气泡可以拖动去除,或许用户会觉得这些操作比起点开查看信息再关闭来得爽快得多。
最后来看一些聊天窗口
其实就是聊天时各种工具的选择。QQ直接在最下面排成一排,微信则相对比较少,但同时尺寸比较大。简单地说就是相应工具曝光率的问题,还有就是业务上的需求。当然也可以上升到产品角度,是要给用户更多的选择,尽量满足用户各种需求,还是我们帮用户做决定,保证大多数人的需求,有选择强迫症的用户应该更喜欢后者吧。
QQ和微信表情的显示方式也不同,QQ也是最近更新才改变的,就是表情是上下滑动,然后一屏的数量也变多,总体上表情选择的效率提高了不少。
ps:才发现,原来微信可以自己跟自己聊天...
以上。