藍(lán)藍(lán)設(shè)計(jì)( m.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：人人都是產(chǎn)品經(jīng)理

         如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里先給大家做個(gè)測(cè)試，根據(jù)下圖的流程，最后一步應(yīng)該返回哪個(gè)頁(yè)面(為了更能體現(xiàn)效果，建議大家拿出手機(jī)跟著步驟做)：

這個(gè)問(wèn)題是我們?cè)谧鲆豢領(lǐng)M產(chǎn)品時(shí)遇到的，為了說(shuō)明該問(wèn)題的廣泛性，就拿微信舉例子了。開(kāi)發(fā)GG完成了版本的交付，我們正在驗(yàn)收產(chǎn)品，到處開(kāi)始找 碴，突然一測(cè)試妹紙跑過(guò)來(lái)說(shuō)有個(gè)地方有問(wèn)題，然后她一步步的演示給我們看：先從通訊錄隨便找個(gè)聯(lián)系人，然后進(jìn)入該聯(lián)系人詳情頁(yè)面，再次點(diǎn)擊“發(fā)消息”按鈕 進(jìn)入聊天頁(yè)面，然后她問(wèn)我們：“在聊天頁(yè)面點(diǎn)擊返回應(yīng)該返回哪個(gè)頁(yè)面？”我們幾個(gè)想都沒(méi)想，下意識(shí)的回答到：“當(dāng)然返回之前的那個(gè)頁(yè)面了?！?

然后妹紙細(xì)嫩的食指一點(diǎn)，這時(shí)候奇跡發(fā)生了，結(jié)果如下圖：沒(méi)有返回之前的頁(yè)面，而是返回到了消息列表頁(yè)面。

我們幾個(gè)愣了愣，然后快速把PRD文檔和交互稿都翻了出來(lái)，“到底是開(kāi)發(fā)開(kāi)發(fā)錯(cuò)了，還是我們?cè)O(shè)計(jì)錯(cuò)了？”。壓根兒沒(méi)想過(guò)這么做是對(duì)的，因?yàn)閺哪膬哼M(jìn) 肯定從哪出，返回肯定返回上一界面，正常的邏輯都是這樣的。然后發(fā)現(xiàn)交互稿也是這么設(shè)計(jì)的，接著快速把手機(jī)拿出來(lái)打開(kāi)微信(因?yàn)楫?dāng)初就是抄的微信的，現(xiàn)在 懷疑抄錯(cuò)了)，我們又愣了，微信也是這么做的，雖然返回按鈕寫(xiě)了“微信”兩個(gè)字，但是沒(méi)啥用，第一反應(yīng)還是返回上一界面。

“微信出Bug了？” “微信的設(shè)計(jì)也不一定合理吧？”各種猜疑慢慢浮出，甚至差點(diǎn)腦袋一拍決定改了(難得產(chǎn)品、交互、視覺(jué)、測(cè)試的意見(jiàn)如此統(tǒng)一)。還好改之前多了個(gè)心眼：“為啥微信用了這么長(zhǎng)時(shí)間，從來(lái)沒(méi)發(fā)現(xiàn)這兒不合理啊，感覺(jué)完全是無(wú)縫銜接的，一點(diǎn)疙瘩也沒(méi)有哈？”

繼續(xù)分析，根據(jù)我們的設(shè)計(jì)來(lái)，優(yōu)勢(shì)有兩點(diǎn)：

• 符號(hào)邏輯和用戶預(yù)期，從哪兒來(lái)，當(dāng)然從哪兒出，形成閉環(huán)；
• 如果我想給第二個(gè)用戶發(fā)消息，更加方便，因?yàn)榉祷氐氖怯脩粼斍椋冱c(diǎn)一下又回到通訊錄了。

微信這么玩好處在哪兒了：用戶可以快速回到消息列表，不需要一步步返回。

如果僅僅分析到這兒，感覺(jué)微信這么設(shè)計(jì)還不具較強(qiáng)的說(shuō)服力。

現(xiàn)在開(kāi)始回到場(chǎng)景吧：小明好久沒(méi)跟小紅聯(lián)系了，最近怪想她的，于是小明準(zhǔn)備找她好好聊聊人生。首先小明進(jìn)入通訊錄，然后找到了小紅，點(diǎn)擊小紅后進(jìn)入 小紅的詳情介紹，然后又點(diǎn)擊了“發(fā)消息”進(jìn)入聊天頁(yè)面開(kāi)始跟小紅暢談人生。最關(guān)鍵的來(lái)了：小明和小紅暢談了好久，該說(shuō)的都說(shuō)了，不該說(shuō)的也說(shuō)了，完全沒(méi)話 說(shuō)了，這時(shí)候小明如果還留著微信app里，他下一步可能想干嘛了？

• 再找小花聊聊天？ ——聊了這么久也該累了吧，如果跟小花經(jīng)常聊天的話，應(yīng)該不需要到通訊錄再去找小花了，入口太深要點(diǎn)擊很多次，直接在消息列表找小花聊吧；
• 看看有沒(méi)有其他人找我？ ——回到消息列表；
• 看看群里有沒(méi)有什么八卦和段子？——回到消息列表；
• 看看公眾號(hào)，學(xué)習(xí)學(xué)習(xí)？——回到消息列表；
• 刷刷朋友圈？——消息列表是一級(jí)tab，更快速；
• 其他？——好像回到消息列表優(yōu)勢(shì)更明顯哈；

回到現(xiàn)實(shí)場(chǎng)景后，好像確實(shí)是這樣的，難怪用了這么久的微信都沒(méi)發(fā)現(xiàn)這兒有坑?，F(xiàn)在兩種設(shè)計(jì)方案再進(jìn)行對(duì)比的話，從邏輯上來(lái)講，確實(shí)是返回上一界面更 勝一籌；但是從用戶場(chǎng)景來(lái)看，明顯微信的方案更符合習(xí)慣和自然。后來(lái)我們又把來(lái)往、易信、陌陌拿過(guò)來(lái)試了下，也都跟微信一樣(不排除相互抄的可能)，看來(lái) 這么多的產(chǎn)品決策都是：場(chǎng)景重于邏輯。

到這里終于有人開(kāi)始支持微信的方案了，但是幾個(gè)人意見(jiàn)還是不一致，仍有人覺(jué)得方案一更好。于是，我們做了這件事：寫(xiě)了個(gè)簡(jiǎn)單的用戶測(cè)試案例，找了幾個(gè)其他項(xiàng)目組的GG和MM試了下，結(jié)果大獲全勝。

場(chǎng)景重于邏輯，其實(shí)用戶真的沒(méi)有我們想象的聰明，有時(shí)候他們壓根兒沒(méi)有邏輯。測(cè)試過(guò)程中，我們問(wèn)了幾個(gè)人：你覺(jué)得返回之前的那個(gè)頁(yè)面怎么樣？  “之前是哪個(gè)頁(yè)面？” …