昨天微信更新了IOS的新版本，有幾項比較明顯的設(shè)計細(xì)節(jié)做了修改，今天作者就和大家一起聊聊具體的修改點和我對這些修改的思考。

廢話不多說我們直接來看圖：

一、表情選擇欄

在新版本中，表情包選擇欄占據(jù)的空間更大了，原本隱藏在左側(cè)的最近使用表情被突出顯示，放到了表情選擇區(qū)頂部。

原本左右滑動切換表情的方式被改成了上下滑動，左右滑動變成了切換表情包標(biāo)簽的操作，表情包標(biāo)簽則被放到了最上方。

選擇表情后用戶可以直接使用右下方的懸浮按鈕進(jìn)行發(fā)送表情或刪除表情兩個操作，按鈕位置和大小相對之前的版本體驗都變好了很多，想刪除表情時也不再需要返回文字輸入界面才能刪除了。

那么做出這些修改的原因是什么呢？作者的猜測如下：

1. 為什么表情選擇欄占據(jù)的空間變大了？

首先是全面屏手機(jī)的占有率在過去一段時間內(nèi)大幅提升，用戶的手機(jī)屏幕長度增加了不少，在不影響聊天信息占據(jù)空間大小的前提下輸入?yún)^(qū)域能夠使用的空間增加了；

加之微信內(nèi)部絕大多數(shù)的切換信息操作都是上下滑動的方式，例如查看聊天信息和刷朋友圈這兩個使用次數(shù)最多的操作。

為了保證操作的一致性于是表情選擇區(qū)也變成了上下切換的方式，也就是一致性這個說了幾百次的設(shè)計規(guī)范。

2. 為什么修改了切換表情的手勢操作方向？

第二點還是與硬件有關(guān)，在手機(jī)觸屏靈敏度越來越高和用戶對手勢操作的接受程度大大提升之后，原本點擊的方式就有了被替換成手勢操作的基礎(chǔ)；

有朋友會說：手勢操作還需要滑動，哪有原本的一次點擊更方便呢？

這里其實利用的是手勢操作的優(yōu)勢是【不必尋找熱區(qū)】，即用戶并不需要先去看一下我要點擊切換的按鈕在哪，然后再去點擊，只需要在手指當(dāng)前所在的位置直接滑動就可以了，所以實際使用上其實更加便捷。

3. 表情包選擇標(biāo)簽為什么放到了頂部？

人類最自然（或者說從小養(yǎng)成的習(xí)慣）是閱讀時從上到下、從左到右。

先選擇大的分類（用哪個表情包），再選擇具體的對象（發(fā)哪個表情）是人類最自然的視線順序。

并且設(shè)置表情包順序的按鈕也在這個版本中得到了非常大的突出顯示，直接被顯示到了表情標(biāo)簽欄的第一位。

可能也是擔(dān)心用戶原本可以表情包的位置現(xiàn)在只能顯示兩個會影響輸入，所以把調(diào)整順序的按鈕暫時突出了，但是說起來這樣比較低頻的功能被放到這么突出的位置還是有點難以理解，作者并沒有想到特別合理的解釋，如果朋友們有想法歡迎補(bǔ)充。

4. 其他

至于最近使用的表情被突出顯示這一點應(yīng)該是微信內(nèi)部根據(jù)用戶使用數(shù)據(jù)做出的修改，例如產(chǎn)品方在之前的版本中發(fā)現(xiàn)隱藏在左側(cè)的最近使用表情這一功能的使用率達(dá)到了某一標(biāo)準(zhǔn)線，則就會決定在本次更新中做出如此修改。

增加了直接刪除表情的按鈕則是一個比較簡單的場景化設(shè)計方法，沒有特別多東西可說。下面接著說第二點修改

二、選擇圖片頁面和編輯圖片頁面

首先是選擇圖片的頁面增加了一些動畫效果，有一個從上到下依次加載的樣式，形式上更加自然流暢，也符合人的感官習(xí)慣。

但是微信在這里并沒有做出更多的優(yōu)化，我們之前曾經(jīng)分享過兩個比較好的上傳圖片的設(shè)計案例，分別是ZAO和綠洲中的設(shè)計，這里再簡單和大家分享一下：

1. ZAO

我們可以看到，在ZAO中，當(dāng)我們選擇從相冊上傳素材進(jìn)行替換時，系統(tǒng)已經(jīng)自動對相冊內(nèi)的圖片進(jìn)行了判斷，在用戶上傳照片之前就對照片清晰度是否合適進(jìn)行了提示，而不是上傳后再給一個彈框。

作者對這個設(shè)計細(xì)節(jié)大致想法如下：

• 提高操作效率；
• 避免上傳后再進(jìn)行提示打斷用戶自然的操作流程；
• 避免因操作與預(yù)期不符產(chǎn)生的轉(zhuǎn)化率降低；
• 加快內(nèi)容生產(chǎn)速度，同時也就加快了產(chǎn)品傳播速度；
• 避免因上傳素材質(zhì)量差而導(dǎo)致平臺內(nèi)容平均質(zhì)量下降；
• 大家可以看到上圖中一張共享單車的照片的清晰度是滿足要求的，但是很明顯我不能用它替換角色。如果加上人臉檢測的話效率會高（當(dāng)然成本也會更高）。

2. 綠洲

當(dāng)我們在上傳圖片時，頁面上部為圖片的放大展示圖，頁面下部分為縮略圖，用戶可以在選擇圖片時實時看到自己選擇的圖片的細(xì)節(jié)；

舉個例子，如果某漂亮妹子想發(fā)張自拍，但是相機(jī)里保存的是幾十張連拍照片，此時她就可以在選擇圖片時直接看到自己當(dāng)前選擇的圖片是否是自己最滿意的一張。而不需要上傳后才能看到，或是切換到系統(tǒng)相冊中去查看，再記住那張自己最滿意的照片的位置再回來重新上傳。

我們常見的產(chǎn)品中上傳照片時一般都是直接顯示縮略圖，好處是頁面效率高一屏可以展示更多圖片，壞處是不能直接看到照片的細(xì)節(jié)。

這種設(shè)計比較好的平衡了這個問題，如下圖：

扯得有點遠(yuǎn)，我們繼續(xù)說回微信的編輯圖片頁面，這里做的修改不是很大，僅僅是把編輯后的完成按鈕放到了更順手的功能按鈕右側(cè)。同時調(diào)換了馬賽克和截取兩個按鈕的位置。如下圖：

三、小程序的“更多”頁面改版

本次更新中小程序最重要的部分就是這個“更多頁面”的修改，當(dāng)然嚴(yán)謹(jǐn)?shù)膩碚f這可能并不能稱之為頁面，或許叫彈層或浮窗更好一些。

但是這不重要，我們還是來看他的修改：在之前小程序點擊更多按鈕后的頁面樣式是獨立設(shè)計的，本次修改之后則與微信公眾號的設(shè)計使用了較為一致的樣式，并且把原本比較層級比較深的功能拿到了外面。

例如反饋與投訴功能。并且把返回首頁按鈕變成了一個常駐的按鈕，在之前則是只有在非首頁的頁面才有，可以說是在一定程度上加強(qiáng)了小程序的“APP性”，使他更像是一個APP而不是加強(qiáng)版的H5。

對于這種理解還有另外兩個佐證，一是權(quán)限管理功能的層級也比之前更淺了，即右圖中的設(shè)計功能；二是某些小程序中增加了成長守護(hù)功能，家長可以設(shè)置孩子設(shè)置使用時間、消費等等功能。

對于小程序的這處修改，作者的理解是這是對微信操作系統(tǒng)的又一次迭代，在之前我們已經(jīng)說過了很多次微信小程序可以替代大部分APP，但在產(chǎn)品上卻還不夠完善，本次更新則在一定程度上使小程序更加像是一個完整的APP了。

本次更新還有不少其他修改，例如訂閱號中的【未完成的功能】這一彩蛋下線了、用戶可以停用微信支付的消息服務(wù)等，但由于這些與產(chǎn)品設(shè)計關(guān)系不是很大所以就不一一再說。

以上是作者對微信本次更新的一點思考，歡迎大家補(bǔ)充指正~

#專欄作家#

杜昭，微信公眾號：設(shè)計的威嚴(yán)，人人都是產(chǎn)品經(jīng)理專欄作家。實戰(zhàn)派設(shè)計師，千萬用戶級產(chǎn)品交互設(shè)計負(fù)責(zé)人，致力于用戶體驗設(shè)計和用戶增長實驗，努力成為能為商業(yè)目標(biāo)負(fù)責(zé)的設(shè)計師中～

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議