從導(dǎo)航設(shè)計(jì)看QQ和微信的不同

?QQ和微信這兩大國(guó)民IM(即時(shí)通訊)應(yīng)用,作為騰訊帝國(guó)的兩大護(hù)城河,它們之間有何不同?之前的一篇文章,從聊天界面對(duì)比了兩大應(yīng)用(感興趣的朋友可在文末查看)。這篇文章從導(dǎo)航設(shè)計(jì)的角度來(lái)對(duì)比一下這兩款應(yīng)用。

我們先來(lái)觀察一下兩個(gè)APP的信息結(jié)構(gòu):

QQ APP 信息結(jié)構(gòu)


微信 APP 信息結(jié)構(gòu)

可以看到,QQ和微信從信息結(jié)構(gòu)上來(lái)說(shuō),非常類(lèi)似。不同的點(diǎn)有以下兩處:“我的”tab位置不同,聯(lián)系人/通訊錄組織結(jié)構(gòu)不同。下面我們來(lái)分別看一下。

最顯著的區(qū)別——“我的”tab

唯一的一個(gè)區(qū)別,是“我的”tab的位置不同:微信是放在底部導(dǎo)航欄中,作為第4個(gè)tab存在的;QQ是放在頂部標(biāo)題欄的左側(cè),在切換底部導(dǎo)航欄的每一個(gè)標(biāo)簽時(shí),都會(huì)常駐,且在頁(yè)面的左邊緣區(qū)域向右劃動(dòng),都會(huì)呼出我的側(cè)邊欄,如下圖所示:

QQ把“我的”入口放在左上角,且從每個(gè)頁(yè)面左劃可以進(jìn)入,看似方便,實(shí)則削弱,原因很簡(jiǎn)單:?左上角的位置實(shí)在是太不利于用戶(hù)操作了。筆者之前在某新聞應(yīng)用團(tuán)隊(duì)工作過(guò),當(dāng)時(shí)該應(yīng)用的導(dǎo)航是采用了“左上角漢堡包+標(biāo)簽導(dǎo)航”的形式,漢堡包入口里,承載了“閱讀、視聽(tīng)”等入口,但這些入口的點(diǎn)擊率都比較低。后來(lái)應(yīng)用導(dǎo)航大改版,改成了底部tab導(dǎo)航,各內(nèi)容入口點(diǎn)擊率大幅上升。

導(dǎo)航前后對(duì)比

因此,導(dǎo)航的設(shè)計(jì),對(duì)于內(nèi)容的曝光率還是比較有影響的。微信將“我的”tab放在第四個(gè)tab的位置,其中也承載了與生活方式相關(guān)的功能,這與微信的slogan“微信是一種生活方式”也是比較一致的。

聯(lián)系人/通訊錄組織結(jié)構(gòu)對(duì)比

QQ的“聯(lián)系人”這個(gè)標(biāo)簽里,延續(xù)了QQ PC版上分組的概念,這也是一個(gè)合理的選擇。QQ APP的設(shè)計(jì)師,使用了標(biāo)簽導(dǎo)航的形式,展現(xiàn)好友、群、多人聊天等維度,十分合理。

而微信的通訊錄tab,直接使用了手機(jī)上比較常用的通訊錄的形式,沒(méi)有分組,這種形式更適合手機(jī)設(shè)備的特點(diǎn)。

其它細(xì)節(jié)

在上篇文章里我們提到,QQ聊天界面的頂部標(biāo)題欄里展示了好友的昵稱(chēng),同時(shí)在好友昵稱(chēng)的下方,展示了好友的在線狀態(tài),而微信是沒(méi)有的:

而QQ APP的消息列表頁(yè)面,實(shí)際上是不展示好友的在線狀態(tài)的。QQ這樣設(shè)計(jì),意在減弱好友是否在線這個(gè)概念,希望鼓勵(lì)用戶(hù)從列表頁(yè)開(kāi)始進(jìn)行聊天。

另一個(gè)設(shè)計(jì)細(xì)節(jié)是QQ底部的導(dǎo)航欄,當(dāng)用戶(hù)選中消息時(shí),聯(lián)系人和動(dòng)態(tài)的icon都會(huì)望著消息icon;而選中聯(lián)系人時(shí),消息和動(dòng)態(tài)的icon則會(huì)望著聯(lián)系人,十分有趣。這樣的細(xì)節(jié),讓QQ這個(gè)應(yīng)用更加活潑、有趣,與QQ應(yīng)用整體傳達(dá)出來(lái)的氣質(zhì)是十分相符的。

以上為大家分析了QQ和微信手機(jī)應(yīng)用在導(dǎo)航上的區(qū)別。歡迎留言討論。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,872評(píng)論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,141評(píng)論 4 61
  • 十一句告白詩(shī)。 我喜歡你,所以我愿意在有生之年,陪你踏遍山河。 我喜歡你,所以我愿意執(zhí)手無(wú)言,與你凝眸相看。 我喜...
    逐夢(mèng)菇?jīng)?/span>閱讀 411評(píng)論 4 15
  • 在這個(gè)火爆的暑期檔,《鮫珠傳》一上映就引發(fā)了諸多爭(zhēng)議。有人說(shuō),電影《鮫珠傳》根本就不是“九州”;也有人說(shuō),“非常爛...
    何小威閱讀 338評(píng)論 0 2
  • 寫(xiě)在前面 最近有了新的任務(wù),學(xué)習(xí)的時(shí)間比以前少了不少,Java回爐的文估計(jì)是得緩緩了,不過(guò)每周一篇盡量保質(zhì)保量。最...
    xiasuhuei321閱讀 15,483評(píng)論 10 43

友情鏈接更多精彩內(nèi)容