- 微信發(fā)布新版，有3個(gè)設(shè)計(jì)細(xì)節(jié)值得關(guān)注！
- 杜昭 優(yōu)設(shè) 2019-09-20
前些天微信更新了 iOS 的新版本，有幾項(xiàng)比較明顯的設(shè)計(jì)細(xì)節(jié)做了修改。今天就和大家一起聊聊具體修改的功能和我對(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ī)的占有率在過(guò)去一段時(shí)間內(nèi)大幅提升，用戶的手機(jī)屏幕長(zhǎng)度增加了不少。在不影響聊天信息占據(jù)空間大小的前提下，輸入?yún)^(qū)域能夠使用的空間增加了，加之微信內(nèi)部絕大多數(shù)的切換信息操作都是上下滑動(dòng)的方式，例如查看聊天信息和刷朋友圈這兩個(gè)使用次數(shù)最多的操作。為了保證操作的一致性，于是表情選擇區(qū)也變成了上下切換的方式。
2. 為什么修改了切換表情的手勢(shì)操作方向?
第二點(diǎn)還是與硬件有關(guān)，在手機(jī)觸屏靈敏度越來(lái)越高和用戶對(duì)手勢(shì)操作的接受程度大大提升之后，原本點(diǎn)擊的方式就有了被替換成手勢(shì)操作的基礎(chǔ)。有朋友會(huì)說(shuō)：手勢(shì)操作還需要滑動(dòng)，哪有原本的一次點(diǎn)擊更方便呢?其實(shí)這里手勢(shì)操作的優(yōu)勢(shì)是「不必尋找熱區(qū)」，即用戶并不需要先去看一下我要點(diǎn)擊切換的按鈕在哪，然后再去點(diǎn)擊，只需要在手指當(dāng)前所在的位置直接滑動(dòng)就可以了，所以實(shí)際使用上是更加便捷的。
3. 表情包選擇標(biāo)簽為什么放到了頂部?
人們的閱讀習(xí)慣是從上到下、從左到右。先選擇大的分類(用哪個(gè)表情包)，再選擇具體的對(duì)象(發(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)線，就會(huì)決定在本次更新中做出這樣的修改。
增加了直接刪除表情的按鈕則是一個(gè)比較簡(jiǎn)單的場(chǎng)景化設(shè)計(jì)方法。
選擇圖片頁(yè)面和編輯圖片頁(yè)面
選擇圖片的頁(yè)面增加了一些動(dòng)畫(huà)效果，有一個(gè)從上到下依次加載的樣式，形式上更加自然流暢，也符合人的感官習(xí)慣。但是微信在這里并沒(méi)有做出更多的優(yōu)化，我們之前曾經(jīng)分享過(guò)兩個(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è)彈框。
這個(gè)細(xì)節(jié)的優(yōu)勢(shì)：
- 提高操作效率;
- 避免上傳后的提示，打斷用戶自然的操作流程;
- 避免因操作與預(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í)，頁(yè)面上部為圖片的放大展示圖，頁(yè)面下部分為縮略圖，用戶可以在選擇圖片時(shí)實(shí)時(shí)看到自己選擇的圖片的細(xì)節(jié)。舉個(gè)例子，如果漂亮妹子想發(fā)張自拍，但是相機(jī)里保存的是幾十張連拍照片，此時(shí)她就可以在選擇圖片時(shí)，直接看到自己當(dāng)前選擇的圖片是否是自己最滿意的一張。而不需要上傳后才能看到，或是切換到系統(tǒng)相冊(cè)中去查看。
我們常見(jiàn)的產(chǎn)品中上傳照片時(shí)，一般都是直接顯示縮略圖，好處是頁(yè)面效率高，一屏可以展示更多圖片，壞處是不能直接看到照片的細(xì)節(jié)。那么綠洲的設(shè)計(jì)就比較好的平衡了這個(gè)問(wèn)題。如下圖：
那么，微信的編輯圖片頁(yè)面，做的修改不是很大，僅僅是把編輯后的完成按鈕放到了更順手的功能按鈕右側(cè)。同時(shí)調(diào)換了馬賽克和截取按鈕的位置。如下圖：
小程序的「更多」頁(yè)面改版
本次更新中小程序最重要的部分就是這個(gè)「更多頁(yè)面」的修改，當(dāng)然嚴(yán)謹(jǐn)?shù)貋?lái)說(shuō)這可能并不能稱之為頁(yè)面，或許叫彈層或浮窗更好一些。
之前的小程序點(diǎn)擊更多按鈕后的頁(yè)面樣式是獨(dú)立設(shè)計(jì)的，本次修改后與微信公眾號(hào)的設(shè)計(jì)保持了較為一致的樣式，并且把原來(lái)層級(jí)較深的功能提高顯示了。例如反饋與投訴功能。并且把返回首頁(yè)按鈕變成了一個(gè)常駐的按鈕，之前只在非首頁(yè)的頁(yè)面才有，使它更像是一個(gè) APP，而不是加強(qiáng)版的 H5。對(duì)于這個(gè)改變的理解還有另外兩個(gè)佐證，一是權(quán)限管理功能的層級(jí)也比之前更淺了，即右圖中的設(shè)計(jì)功能。二是某些小程序中增加了成長(zhǎng)守護(hù)功能，家長(zhǎng)可以設(shè)置孩子的使用時(shí)間、消費(fèi)等等。
對(duì)于小程序的這處修改，我的理解是這是對(duì)微信操作系統(tǒng)的又一次迭代，在之前我們已經(jīng)說(shuō)過(guò)了微信小程序可以替代大部分 APP，但在產(chǎn)品卻還不夠完善，本次更新則在一定程度上使小程序更加像是一個(gè)完整的 APP 了。
本次更新還有不少的修改，例如訂閱號(hào)中的「未完成的功能」這一彩蛋下線了，用戶可以停用微信支付的消息服務(wù)等，由于這些與產(chǎn)品設(shè)計(jì)關(guān)系不是很大所以就不一一細(xì)說(shuō)。以上是我對(duì)微信本次更新的一點(diǎn)思考，歡迎大家補(bǔ)充指正。
【責(zé)任編輯：未麗燕 TEL：（010）68476606】 分享到朋友圈 分享到微博- 微信
- 表情
- 小程序
