同時(shí)，微信也是互聯(lián)網(wǎng)界的一個(gè)異類，張小龍?jiān)谖⑿殴_課上回應(yīng)到：“我們只是守住了做一個(gè)好產(chǎn)品的底線，居然就與眾不同了“。

好產(chǎn)品自然是體驗(yàn)和價(jià)值至上。下面，我就為大家解讀微信的用戶體驗(yàn)設(shè)計(jì)。

01. 二次確認(rèn)的微創(chuàng)新

先從最簡單的二次確認(rèn)講起。

微信針對(duì)首頁消息和收藏列表的刪除操作，做了二次確認(rèn)的微創(chuàng)新。像同類 IM 聊天工具，如 iOS 短信、Facebook Messenger、飛聊等等，二次確認(rèn)都是采用底部系統(tǒng)彈窗。這樣做，從程序架構(gòu)的角度來看兼容和通用性更強(qiáng)。 

而從體驗(yàn)設(shè)計(jì)的角度來看，則剛好相反，因?yàn)閺牡谝淮蝿h除操作，到第二次確認(rèn)系統(tǒng)彈窗。之間的目標(biāo)距離太長，耗時(shí)也就變長了。根據(jù)菲茨定律（Fitts' Law），獲取目標(biāo)的時(shí)間取決于目標(biāo)的距離和大小。這意味著提升交互的效率，不僅需要減少距離，同時(shí)要增加目標(biāo)大小。

收藏列表

回過頭看來微信，就是這樣設(shè)計(jì)的。二次確認(rèn)是在第一次的基礎(chǔ)上延展，距離幾乎為0，同時(shí)，目標(biāo)按鈕的寬度也增加了幾倍，大大的提升了交互效率。 
 

02. 互動(dòng)體驗(yàn)廣告

其實(shí)，商業(yè)和用戶體驗(yàn)往往是有沖突的。而微信廣告很好的平衡了這一點(diǎn)。
通過豐富有趣的互動(dòng)體驗(yàn)式創(chuàng)意，或畫圓、或畫方、或畫愛心，吸引大家主動(dòng)參與互動(dòng)。

– 開放首條評(píng)論

另外，首條評(píng)論功能讓品牌像朋友一樣與大家的對(duì)話，利用明星效應(yīng)，從而帶動(dòng)更多人參與評(píng)論，有效提升評(píng)論區(qū)活躍度和廣告點(diǎn)擊率。
 

朋友圈劉雯廣告
 

以劉雯發(fā)布的朋友圈廣告為例，大表姐把最新款的vivo X30系列手機(jī)交到你手中，并在首條評(píng)論中邀請(qǐng)你幫她拍照。數(shù)十萬用戶積極回復(fù)劉雯，評(píng)論率高于歷史均值40倍+，“你這么漂亮怎么拍都好看”、“天天給你拍”，大表姐的魅力折服了眾多用戶，有效提升了品牌的親和力與好感度。

– 打開儀式 · 最強(qiáng)震動(dòng)級(jí)別

在交互方面，如果你是 iPhone 用戶，可以體驗(yàn)到 Taptic Engine 線性震動(dòng)馬達(dá)，通常力度由輕到重分別是  Light、Medium、Heavy。在打開廣告的那一刻，它給你的是最強(qiáng)震動(dòng)級(jí)別，滿滿的儀式感！整個(gè)微信應(yīng)該找不到第二個(gè)這樣級(jí)別的震動(dòng)了。

03. 提供反饋信息

再舉一個(gè)震動(dòng)的例子，當(dāng)你的好友拍攝了時(shí)刻視頻后，可以看到 TA 的頭像右上角多了一個(gè)藍(lán)色的小圈圈，雙擊它就能看到好友的時(shí)刻視頻了。 

當(dāng)然，你雙擊沒有拍攝時(shí)刻視頻的好友，TA 的頭像會(huì)左右晃動(dòng)，并且會(huì)有 Failure 的震動(dòng)反饋，動(dòng)畫和震動(dòng)節(jié)奏完美匹配，這個(gè)體驗(yàn)就像你解鎖 iPhone 輸錯(cuò)密碼時(shí)的震動(dòng)是一樣的。 

沒有時(shí)刻視頻時(shí)的反饋

我們做產(chǎn)品設(shè)計(jì)時(shí)也一樣，對(duì)于用戶的操作，應(yīng)當(dāng)給予清晰明了的反饋，幫助用戶更好的理解信息。

04. 跨平臺(tái)能力

微信的起步階段是基于手機(jī)來做 App，不基于 PC 來做，PC 端只是輔助，而現(xiàn)在，它的跨平臺(tái)能力也逐漸增強(qiáng)。
一周前，微信 PC 版「微信測試版 for Windows」發(fā)布了 2.9.0 的內(nèi)測，同步了移動(dòng)端的新功能，主要有兩點(diǎn)：
1. 支持打開小程序，也可以玩「貪吃蛇」「跳一跳」等小游戲了。 

Windows 微信客戶端

2. 另外，此前的微信 PC 端只支持引用文字消息，也沒有達(dá)到手機(jī)上引用消息的視覺效果。此次更新中，還新增了很多支持的引用類型，包括但不限于圖片/視頻、表情包、公眾號(hào)鏈接、小程序、文件等。 

如此看來，Mac 端的更新也不遠(yuǎn)了，可以期待一下。
 

05. 語音實(shí)時(shí)翻譯

最近的微信更新了，除了引入深色模式之外。值得一提的是，語音消息的交互體驗(yàn)得到了優(yōu)化，上滑轉(zhuǎn)文字更方便了。

此前的方式是按住說話，滑到轉(zhuǎn)文字按鈕，說完松開手指后，才把語音解析成文字。

現(xiàn)在交互則少了一步操作，達(dá)到了實(shí)時(shí)邊說邊轉(zhuǎn)文字的功能。別小看這一步界面上的優(yōu)化，它背后代表的是微信語音識(shí)別能力上的技術(shù)突破。

語音實(shí)時(shí)轉(zhuǎn)文字

06. 錨點(diǎn)定位

微信有很多隱性和顯性的錨點(diǎn)，隱性錨點(diǎn)就比如你打開的這篇文章，關(guān)閉后，再重新點(diǎn)進(jìn)來，還是顯示上次閱讀的位置。

訂閱號(hào)列表

顯性的錨點(diǎn)就比如上面這個(gè)：當(dāng)你刷公眾號(hào)列表時(shí)候，如果有新文章更新，標(biāo)題欄會(huì)出現(xiàn)一個(gè)錨點(diǎn)按鈕，點(diǎn)擊它讓你快速回到頂部，方便查看最新文章。

朋友圈「跳到還沒看的位置」

基于此，在新版微信朋友圈中，增加了一個(gè)「跳到還沒看的位置」。很多信息流產(chǎn)品是往下刷內(nèi)容，直到給你一個(gè)分界線提示：下面內(nèi)容已經(jīng)看過了。而微信這是一個(gè)逆向操作，我認(rèn)為這個(gè)功能還是很有必要的，因?yàn)榻?jīng)常會(huì)有刷朋友圈刷到一半聊天退出去，當(dāng)回來查看朋友圈時(shí)，需要重新拉到底部，費(fèi)時(shí)費(fèi)力。

07. 自然的語音聽筒播放

《在你身邊，為你設(shè)計(jì)》一書中有提到語音聽筒播放的優(yōu)化。大家都知道，手機(jī)帶有距離感應(yīng)器，在感應(yīng)到耳邊貼近時(shí)，屏幕會(huì)關(guān)閉以節(jié)省電力，并且避免由于耳朵與屏幕的觸碰導(dǎo)致的誤操作。

微信在聊天界面中，也啟用了距離感應(yīng)，以實(shí)現(xiàn)手機(jī)貼近耳邊時(shí)，自動(dòng)將語音從揚(yáng)聲器切換到聽筒進(jìn)行播放，這樣你可以用最自然的姿勢來聽語音，這是一個(gè)很好的體驗(yàn)。

但要完美地實(shí)現(xiàn)這個(gè)體驗(yàn)，就需要解決距離感應(yīng)器的時(shí)延問題。播放語音時(shí)，如果你非常迅速地將手機(jī)移至耳邊，這時(shí)候距離感應(yīng)器并不會(huì)同樣迅速地對(duì)這個(gè)動(dòng)作產(chǎn)生反饋。大約在延遲了300毫秒后，感應(yīng)器發(fā)出信號(hào)，微信將iPhone的屏幕關(guān)閉。而在這個(gè)時(shí)間內(nèi)，你的耳廓極有可能已經(jīng)觸碰到了iPhone的屏幕上。觸碰的位置大部分時(shí)候是左上角的返回按鈕區(qū)域。于是很容易出現(xiàn)手機(jī)移至耳邊，語音戛然而止。

延時(shí)響應(yīng)判斷流程圖

為了解決這個(gè)問題，微信設(shè)計(jì)了一個(gè)解決辦法：在響應(yīng)返回操作時(shí)，先等待500毫秒，這時(shí)候如果偵聽到距離感應(yīng)器有發(fā)出信號(hào)，則認(rèn)為是貼耳的動(dòng)作，此情況下不執(zhí)行返回操作，如上圖所示。而500毫秒的延時(shí)大部分時(shí)候你是不會(huì)感知到的。這一解決辦法極大降低了貼耳時(shí)候的誤操作。

總結(jié)

在微信的產(chǎn)品設(shè)計(jì)中，我們看到了交互的細(xì)微迭代和背后的技術(shù)突破，我們看到了商業(yè)創(chuàng)意與用戶體驗(yàn)的平衡。給用戶帶來希望，讓創(chuàng)造者體現(xiàn)價(jià)值，這就是微信的設(shè)計(jì)之道。

原文地址：洋爺（公眾號(hào)）

作者：洋爺

4月7日，微信對(duì)外宣布發(fā)布品牌應(yīng)用規(guī)范，對(duì)外公布了包括logo、字體在內(nèi)的微信品牌形象素材，以期幫助合作伙伴規(guī)范微信品牌形象的正確應(yīng)用，保證品牌完整性和一致性。根據(jù)微信官方設(shè)計(jì)團(tuán)隊(duì)發(fā)布的介紹顯示，微信主品牌規(guī)范包括品牌主標(biāo)志、文字標(biāo)志、完整標(biāo)志、標(biāo)準(zhǔn)字體、標(biāo)準(zhǔn)色彩以及客戶端標(biāo)志。

對(duì)于此次推出視覺應(yīng)用規(guī)范的初衷，微信團(tuán)隊(duì)介紹，微信(WeChat)的品牌形象基于微信“謹(jǐn)慎、優(yōu)雅、超前”的產(chǎn)品理念，包含于客戶端各平臺(tái)設(shè)計(jì)、相關(guān)網(wǎng)頁設(shè)計(jì)、周邊產(chǎn)品設(shè)計(jì)中。與傳統(tǒng)品牌不同，微信是一個(gè)相對(duì)抽象、無形又無處不在的互聯(lián)網(wǎng)產(chǎn)品。微信的品牌設(shè)計(jì)，不僅要告訴用戶這是微信，還要傳達(dá)微信的理念和態(tài)度。

因此，微信此次對(duì)外發(fā)布品牌應(yīng)用規(guī)范，旨在希望通過系統(tǒng)的設(shè)計(jì)來滿足微信多產(chǎn)品線的品牌需求，借助傳統(tǒng)品牌和平面設(shè)計(jì)中一些成熟嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)方法，如圖形比例、字體版式、網(wǎng)格、信息處理等，通過清晰、明確、簡單的呈現(xiàn)，為無形的產(chǎn)品打造清晰的品牌輪廓，以實(shí)現(xiàn)微信品牌線上線下的品牌完整和體驗(yàn)的一致性，以更好地讓使用受眾更正確更深刻地感受微信。

字體

微信的中文字體家族：漢儀旗黑X1-55W和漢儀旗黑X1-45W是一款現(xiàn)代、便于閱讀的字體，與微信的品牌氣質(zhì)相符。微信標(biāo)準(zhǔn)英文字體家族包含: MyriadPro-Regular、 MyriadPro-Light，該字體家族已經(jīng)成為微信品牌長期的視覺識(shí)別核心元素的一部分。

色板

色彩是品牌傳播的重要要素，對(duì)色彩的運(yùn)用首要應(yīng)考慮到品牌層面的表達(dá)。色彩的運(yùn)用應(yīng)達(dá)到信息傳遞，動(dòng)作指引，交互反饋，或強(qiáng)化和凸現(xiàn)某一個(gè)元素。任何顏色的選取和使用應(yīng)該是有意義的。

二級(jí)品牌規(guī)范

微信的業(yè)務(wù)能力在不斷地拓展，為了滿足不同場景需求，我們在逐步完善二級(jí)品牌識(shí)別體系。目前二級(jí)品牌包括：微信支付、微信卡包、微信掃一掃、微信紅包、微信公眾平臺(tái)、微信搖一搖、微信開放平臺(tái)、微信企業(yè)號(hào) 、微信安全、微信相框、微信招聘、微信商學(xué)院、微信互聯(lián)、微信城市服務(wù)、微信表情、微信游戲等。所有的二級(jí)品牌標(biāo)志都由標(biāo)準(zhǔn)圖形和標(biāo)準(zhǔn)文字兩部分構(gòu)成。

周邊產(chǎn)品

內(nèi)容來源：微信官方設(shè)計(jì)團(tuán)隊(duì)