前些天微信更新了 iOS 的新版本，有幾項(xiàng)比較明顯的設(shè)計(jì)細(xì)節(jié)做了修改。今天就和大家一起聊聊具體修改的功能和我對這些修改的思考。

表情選擇欄

在新版本中，表情包選擇欄占據(jù)的空間更大了，原本隱藏在左側(cè)的最近使用表情被突出顯示，放到了表情選擇區(qū)頂部。原本左右滑動切換表情的方式被改成了上下滑動，左右滑動變成了切換表情包標(biāo)簽的操作。表情包標(biāo)簽則被放到了最上方。選擇表情后用戶可以直接使用右下方的懸浮按鈕，進(jìn)行發(fā)送表情或刪除表情兩個(gè)操作。按鈕位置和大小相對之前的版本，體驗(yàn)都變好了很多，想刪除表情時(shí)也不再需要返回文字輸入界面才能刪除了。

那么做出這些修改的原因是什么呢?我的猜測如下。

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

首先是全面屏手機(jī)的占有率在過去一段時(shí)間內(nèi)大幅提升，用戶的手機(jī)屏幕長度增加了不少。在不影響聊天信息占據(jù)空間大小的前提下，輸入?yún)^(qū)域能夠使用的空間增加了，加之微信內(nèi)部絕大多數(shù)的切換信息操作都是上下滑動的方式，例如查看聊天信息和刷朋友圈這兩個(gè)使用次數(shù)最多的操作。為了保證操作的一致性，于是表情選擇區(qū)也變成了上下切換的方式。

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

第二點(diǎn)還是與硬件有關(guān)，在手機(jī)觸屏靈敏度越來越高和用戶對手勢操作的接受程度大大提升之后，原本點(diǎn)擊的方式就有了被替換成手勢操作的基礎(chǔ)。有朋友會說：手勢操作還需要滑動，哪有原本的一次點(diǎn)擊更方便呢?其實(shí)這里手勢操作的優(yōu)勢是「不必尋找熱區(qū)」，即用戶并不需要先去看一下我要點(diǎn)擊切換的按鈕在哪，然后再去點(diǎn)擊，只需要在手指當(dāng)前所在的位置直接滑動就可以了，所以實(shí)際使用上是更加便捷的。

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

人們的閱讀習(xí)慣是從上到下、從左到右。先選擇大的分類(用哪個(gè)表情包)，再選擇具體的對象(發(fā)哪個(gè)表情)是人類最自然的視線順序。并且設(shè)置表情包順序的按鈕也在這個(gè)版本中得到了非常大的突出顯示，直接被顯示到了表情標(biāo)簽欄的第一位。

4. 其他

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

增加了直接刪除表情的按鈕則是一個(gè)比較簡單的場景化設(shè)計(jì)方法。

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

選擇圖片的頁面增加了一些動畫效果，有一個(gè)從上到下依次加載的樣式，形式上更加自然流暢，也符合人的感官習(xí)慣。但是微信在這里并沒有做出更多的優(yōu)化，我們之前曾經(jīng)分享過兩個(gè)比較好的上傳圖片的設(shè)計(jì)案例，分別是 ZAO 和綠洲中的設(shè)計(jì)，這里再簡單和大家分享一下。

1. ZAO

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

這個(gè)細(xì)節(jié)的優(yōu)勢：

• 提高操作效率;
• 避免上傳后的提示，打斷用戶自然的操作流程;
• 避免因操作與預(yù)期不符產(chǎn)生的轉(zhuǎn)化率降低;
• 加快內(nèi)容生產(chǎn)速度，同時(shí)也就加快了產(chǎn)品傳播速度;
• 避免因上傳素材質(zhì)量差而導(dǎo)致平臺內(nèi)容平均質(zhì)量下降。

大家可以看到上圖中一張共享單車的照片的清晰度是滿足要求的，但是很明顯我不能用它替換角色 。如果加上人臉檢測的話效率會高，當(dāng)然成本也會更高。

2. 綠洲

當(dāng)我們在上傳圖片時(shí)，頁面上部為圖片的放大展示圖，頁面下部分為縮略圖，用戶可以在選擇圖片時(shí)實(shí)時(shí)看到自己選擇的圖片的細(xì)節(jié)。舉個(gè)例子，如果漂亮妹子想發(fā)張自拍，但是相機(jī)里保存的是幾十張連拍照片，此時(shí)她就可以在選擇圖片時(shí)，直接看到自己當(dāng)前選擇的圖片是否是自己最滿意的一張。而不需要上傳后才能看到，或是切換到系統(tǒng)相冊中去查看。

我們常見的產(chǎn)品中上傳照片時(shí)，一般都是直接顯示縮略圖，好處是頁面效率高，一屏可以展示更多圖片，壞處是不能直接看到照片的細(xì)節(jié)。那么綠洲的設(shè)計(jì)就比較好的平衡了這個(gè)問題。如下圖：

那么，微信的編輯圖片頁面，做的修改不是很大，僅僅是把編輯后的完成按鈕放到了更順手的功能按鈕右側(cè)。同時(shí)調(diào)換了馬賽克和截取按鈕的位置。如下圖：

小程序的「更多」頁面改版

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

之前的小程序點(diǎn)擊更多按鈕后的頁面樣式是獨(dú)立設(shè)計(jì)的，本次修改后與微信公眾號的設(shè)計(jì)保持了較為一致的樣式，并且把原來層級較深的功能提高顯示了。例如反饋與投訴功能。并且把返回首頁按鈕變成了一個(gè)常駐的按鈕，之前只在非首頁的頁面才有，使它更像是一個(gè) APP，而不是加強(qiáng)版的 H5。對于這個(gè)改變的理解還有另外兩個(gè)佐證，一是權(quán)限管理功能的層級也比之前更淺了，即右圖中的設(shè)計(jì)功能。二是某些小程序中增加了成長守護(hù)功能，家長可以設(shè)置孩子的使用時(shí)間、消費(fèi)等等。

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

本次更新還有不少的修改，例如訂閱號中的「未完成的功能」這一彩蛋下線了，用戶可以停用微信支付的消息服務(wù)等，由于這些與產(chǎn)品設(shè)計(jì)關(guān)系不是很大所以就不一一細(xì)說。以上是我對微信本次更新的一點(diǎn)思考，歡迎大家補(bǔ)充指正。