微信發布新版,有3個設計細節值得關注! - 優設網 - UISDC

微信發布新版,有3個設計細節值得關注!

2019/09/19 17604評論 15

前些天微信更新了 iOS 的新版本,有幾項比較明顯的設計細節做了修改。今天就和大家一起聊聊具體修改的功能和我對這些修改的思考。

表情選擇欄

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

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

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

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

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

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

3. 表情包選擇標簽為什么放到了頂部?

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

4. 其他

至于最近使用的表情被突出顯示這一點,應該是微信內部根據用戶使用數據做出的修改。例如產品方在之前的版本中發現隱藏在左側的最近使用表情這一功能的使用率達到了某一標準線,就會決定在本次更新中做出這樣的修改。

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

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

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

1. ZAO

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

這個細節的優勢:

  • 提高操作效率;
  • 避免上傳后的提示,打斷用戶自然的操作流程;
  • 避免因操作與預期不符產生的轉化率降低;
  • 加快內容生產速度,同時也就加快了產品傳播速度;
  • 避免因上傳素材質量差而導致平臺內容平均質量下降。

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

2. 綠洲

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

我們常見的產品中上傳照片時,一般都是直接顯示縮略圖,好處是頁面效率高,一屏可以展示更多圖片,壞處是不能直接看到照片的細節。那么綠洲的設計就比較好的平衡了這個問題。如下圖:

那么,微信的編輯圖片頁面,做的修改不是很大,僅僅是把編輯后的完成按鈕放到了更順手的功能按鈕右側。同時調換了馬賽克和截取按鈕的位置。如下圖:

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

本次更新中小程序最重要的部分就是這個「更多頁面」的修改,當然嚴謹地來說這可能并不能稱之為頁面,或許叫彈層或浮窗更好一些。

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

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

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

歡迎關注作者的微信公眾號:「設計的威嚴」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.dbw33.com/wechat-new-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

久播电影网伦理片