微信与QQ交互设计的一些思考

这几天简单研究了一下微信和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:才发现,原来微信可以自己跟自己聊天...

以上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,061评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,093评论 4 62
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,754评论 22 665
  • 你是我弟,小我一岁,我是十一月出生的,碰巧你也是。 所有年龄相仿的兄弟姐妹大概都会有你生下来就是跟我抢...
    见礼阅读 313评论 0 0
  • 如果这个世界不是你想象中的样子,那正是这个世界的本来面目。你要懂得它从来都是无情的存在,不会同情、怜爱任何人...
    Jangle蒋阅读 233评论 0 0