這幾天簡(jiǎn)單研究了一下微信和QQ的交互設(shè)計(jì)拉盾，發(fā)現(xiàn)了不少有趣的點(diǎn)宛逗，下面分享我的一些想法。

首先是架構(gòu)方面

微信使用的是底部導(dǎo)航欄盾剩，四個(gè)雷激，分別是“微信”、“通訊錄”告私、“發(fā)現(xiàn)”屎暇、“我”，然后上方的應(yīng)用欄右側(cè)有搜索和添加的圖標(biāo)驻粟。應(yīng)用欄的內(nèi)容是相對(duì)固定的根悼，切換標(biāo)簽時(shí)不會(huì)變動(dòng)。

對(duì)應(yīng)的蜀撑，QQ使用的是底部導(dǎo)航欄加上側(cè)邊欄挤巡，底邊是“消息”、“聯(lián)系人”酷麦、“發(fā)現(xiàn)”矿卑，側(cè)邊欄是個(gè)人相關(guān)的內(nèi)容。跟微信基本一致沃饶，只是將個(gè)人相關(guān)的內(nèi)容統(tǒng)一收進(jìn)側(cè)邊欄里面母廷。
另一個(gè)區(qū)別就是上方的應(yīng)用欄，會(huì)根據(jù)下面的內(nèi)容不同而變化糊肤，搜索功能也不是一個(gè)圖標(biāo)琴昆，而是在應(yīng)用欄下方獨(dú)占一行。

問題1：為什么QQ要使用側(cè)邊欄馆揉？或者說业舍，為什么微信不使用側(cè)邊欄？
問題2：應(yīng)用欄的使用，是應(yīng)該與當(dāng)前內(nèi)容相關(guān)舷暮，還是放置一些全局的內(nèi)容蟋座？

側(cè)邊欄的可見性確實(shí)差一點(diǎn)，特別是QQ中使用用戶頭像作為入口脚牍，不如按鈕直接向臀。但與微信相比，QQ的個(gè)人中心更有"感覺"诸狭。

首先是側(cè)邊欄自身所帶來的空間感券膀，就像打開一個(gè)屬于自己的小天地，而此時(shí)側(cè)邊欄帶來的可見性問題也變成了隱秘性好驯遇，讓用戶感覺這就是屬于自己的一塊地方芹彬，有自己的東西，像收藏叉庐、文件舒帮、錢包等。當(dāng)然陡叠，這種感覺還需要視覺設(shè)計(jì)來渲染玩郊。另外，QQ的功能比較多枉阵，側(cè)邊欄也算是一個(gè)比較好的收納方式译红，可拓展性和靈活性都比較好。

微信所表達(dá)的則是另一種情感兴溜，就是簡(jiǎn)潔侦厚。可以直接用底部標(biāo)簽搞定的事拙徽，為什么還要加上一個(gè)側(cè)邊欄刨沦，還要增加一個(gè)小空間。還有就是一致性膘怕，個(gè)人標(biāo)簽其實(shí)還是一個(gè)信息的集合想诅，與其他標(biāo)簽沒有本質(zhì)的區(qū)別，所以也應(yīng)該是一樣的淳蔼。

再來看看QQ上的分段控件侧蘸，可以用其他方式代替嗎裁眯？可以使用標(biāo)簽鹉梨，或者將分段控件放置在應(yīng)用欄下方，但是在只有兩個(gè)分類的情況下穿稳，目前的設(shè)計(jì)還是比較合理的存皂。那么這樣一來，應(yīng)用欄的右側(cè)空間就不夠放置“搜索”和“更多”兩個(gè)圖標(biāo)。在兩個(gè)功能都需要明顯展示的情況下旦袋，因?yàn)樗阉鞴δ鼙旧砭鸵蜷_一個(gè)輸入框骤菠，不如就直接放置在下面，也比較直觀疤孕。

因?yàn)榉侄慰丶姆诸愔皇轻槍?duì)“消息”標(biāo)簽商乎，所以其他標(biāo)簽自然需要更換相應(yīng)的內(nèi)容。這里我不太理解的是祭阀，為什么除了“消息”標(biāo)簽鹉戚，其他都將“更多”的圖標(biāo)換成文字按鈕，而且只是一個(gè)單一的功能专控。
微信的應(yīng)用欄則比較統(tǒng)一抹凳，有搜索和更多兩個(gè)功能，在任何一個(gè)標(biāo)簽頁(yè)都可以打開伦腐。

“更多”這個(gè)功能赢底，其實(shí)就是一個(gè)溢出菜單，溢出菜單里面要包含什么功能柏蘑，為什么要使用加號(hào)作為icon幸冻？有沒有提供這些功能的其他入口？這里更多還是涉及到業(yè)務(wù)還有需求方面咳焚，就不展開說了嘁扼。

接著來看聊天列表

包括聊天信息的展示，正常情況和有未讀信息的情況黔攒，以及聊天信息的操作趁啸，長(zhǎng)按或手勢(shì)。（個(gè)人聊天列表不太好貼出來督惰，大家基本都有使用不傅，就不貼圖了）

第一個(gè)差異是頭像的形狀，QQ是圓形赏胚，微信是方形访娶。與之相關(guān)的區(qū)別就是，QQ的群組是有獨(dú)立的頭像的觉阅，微信的群組則是直接使用成員頭像的縮略圖崖疤。還有就是QQ頭像有各種裝飾，圓形百搭典勇。所以給我的感覺跟上面框架中一樣劫哼，QQ有趣、微信簡(jiǎn)潔割笙。QQ可以有各種玩法权烧，各種自定義眯亦，微信則干脆沒有，我記得剛開始使用微信般码，是可以沒有頭像的妻率，就是一個(gè)系統(tǒng)默認(rèn)的圖片。

第二個(gè)差異是未讀信息板祝，也就是小紅點(diǎn)宫静。QQ是顯示在右邊，相對(duì)獨(dú)立的一個(gè)小氣泡券时，里面會(huì)顯示未讀信息的數(shù)目囊嘉。然后可以直接拖住氣泡扔掉，這個(gè)效果一開始我沒發(fā)現(xiàn)革为，后來才知道扭粱，感覺挺好玩的。還有就是可以左滑呼出操作震檩，有“置頂”“標(biāo)記為已讀”“刪除”等琢蛤，三者用不同的顏色區(qū)分。
微信依舊是走簡(jiǎn)潔路線抛虏，直接在左邊的方形頭像右上角有一個(gè)小紅點(diǎn)博其。具體的未讀信息數(shù)目在列表中顯示，也沒有相應(yīng)的動(dòng)畫和手勢(shì)操作迂猴。長(zhǎng)按相應(yīng)的消息會(huì)彈出操作慕淡，操作內(nèi)容與QQ基本一致，對(duì)了沸毁，QQ中也可以使用長(zhǎng)按呼出操作選項(xiàng)峰髓。

未讀消息的設(shè)計(jì)，跟頭像也有一定的關(guān)系息尺。畢竟在QQ上携兵，如果你的頭像有裝飾，再加上小紅點(diǎn)就不太合適搂誉，所以將其放置右邊也算合理徐紧。記得前段時(shí)間，有人在微信上用了一些自帶小紅點(diǎn)的頭像炭懊，讓很多強(qiáng)迫癥用戶忍不住一次次點(diǎn)開并级。那不知道可不可以這樣認(rèn)為，微信讓標(biāo)記為已讀的操作不夠直接侮腹，是要引導(dǎo)用戶去打開聊天記錄嘲碧。不僅標(biāo)記已讀，刪除凯旋，置頂?shù)墓δ茉谖⑿派弦膊粔蚍奖阊教叮啾扔赒Q而言钉迷。
QQ上左滑的手勢(shì)很方便至非，而且三個(gè)操作有顏色區(qū)分钠署，可點(diǎn)擊范圍也足夠大，再加上未讀消息的氣泡可以拖動(dòng)去除荒椭，或許用戶會(huì)覺得這些操作比起點(diǎn)開查看信息再關(guān)閉來得爽快得多谐鼎。

最后來看一些聊天窗口
其實(shí)就是聊天時(shí)各種工具的選擇。QQ直接在最下面排成一排趣惠，微信則相對(duì)比較少狸棍，但同時(shí)尺寸比較大。簡(jiǎn)單地說就是相應(yīng)工具曝光率的問題味悄，還有就是業(yè)務(wù)上的需求草戈。當(dāng)然也可以上升到產(chǎn)品角度，是要給用戶更多的選擇侍瑟，盡量滿足用戶各種需求唐片，還是我們幫用戶做決定，保證大多數(shù)人的需求涨颜，有選擇強(qiáng)迫癥的用戶應(yīng)該更喜歡后者吧费韭。

QQ和微信表情的顯示方式也不同，QQ也是最近更新才改變的庭瑰，就是表情是上下滑動(dòng)星持，然后一屏的數(shù)量也變多，總體上表情選擇的效率提高了不少弹灭。

ps：才發(fā)現(xiàn)督暂，原來微信可以自己跟自己聊天...

以上。