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

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

一、表情選擇欄

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

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

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

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

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

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

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

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

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

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

有朋友會(huì)說：手勢(shì)操作還需要滑動(dòng)，哪有原本的一次點(diǎn)擊更方便呢？

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

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

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

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

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

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

4. 其他

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

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

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

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

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

1. ZAO

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

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

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

2. 綠洲

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

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

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

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

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

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

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

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

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

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

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

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

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

#專欄作家#

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

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

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