莫b

今天給大家剖析微信的交互操作。微信之父張小龍在微信公開課上講述微信的設計理念。他說微信是一個工具。而工具類應用的使命是幫助用戶快速解決某方面的問題,然后就可以瀟灑得離開了。因此才有“用完即走”這個說法。

比如,大家使用計算器,算完了數就可以關掉它了;大家使用相機,拍完照就干別的去了。

也正是因為這個原因,工具型應用的日活可以很高,但停留時長卻較短。這也是很多工具型應用拼命想轉型的重要原因,最為典型的就是美圖秀秀,從一個P圖應用極力想轉型為社區,就是為了提高用戶的停留時長,為商業化帶來更多的想象空間。

對于工具類應用,在交互設計上最關鍵的一個原則是“高效”,這是由前面提到過的“快速解決問題”的使命決定的。

微信既然自稱“工具”,它是否貫徹了高效的原則?在日常使用過程中,我發現微信在交互細節上對這一原則有很好的體現。

下面詳細研究一下。

 

消息刪除

在消息列表中,從右向左滑動,則可以調出刪除按鈕,如下圖所示:

滑動調出刪除按鈕并不是微信的發明,但點擊刪除按鈕后,原地出現“確認刪除”按鈕,確實是微信的一個微創新。這個微創新讓刪除的交互在保證了防止誤操作的前提下,更為高效。

與此形成對比的,是iOS自帶的消息應用,滑動出現刪除按鈕后,頁面底部出現確認刪除的按鈕??

 

對比一下兩種設計的操作路徑:

根據菲茨定律,當前位置和目標位置的越長,則(操作)所用時間越長。微信的操作路徑更短,因此時間更短,所以更高效。

與之類似的,還有拍照/拍視頻按鈕的設計。

 

拍照/拍視頻按鈕

在微信的拍照頁面,只有一個按鈕,輕觸則拍照,長按則拍視頻。

這比大多數拍照/拍視頻的頁面都要簡單。大多數拍攝應用,都需要在拍照和拍視頻之間先進行切換,然后再開始拍攝。
微信只保留一個按鈕,免去了切換的步驟,做到了操作上的極簡。
但這種極簡也有一個前提:拍攝視頻的時間不能太長。正因為微信里能拍的視頻最多只有15秒,長按著拍攝按鈕還可以忍。你讓用戶長按按鈕拍個2分鐘的視頻試試?用戶還不罵街。

 

自動刷新

微信的消息列表頁面,沒有刷新操作。這和大多數應用的設計都不太相同。
為什么微信沒有刷新?
因為微信團隊在消息的收發上,花了很多功夫,以達到最快、最有效的收發。微信想要做到的,是用戶只需要關心輸入消息就好,至于消息的發出和接收過程,用戶不用關心——微信應用會幫助用戶做好。所以在微信上,用戶根本不需要用下拉刷新來查看是否有新的消息,只要有新消息,微信就會自動接收到,從而省去了用戶的操作。
從這個細節上,也能看到微信對于效率的追求。

 

朋友圈可快捷設置權限

一次刷朋友圈時,我無意中長按了朋友的頭像,長按后竟然可以“設置朋友圈權限”。比較常用的設置權限方式,是“點擊頭像→朋友權限”進行設置,路徑比較長,會打斷用戶刷朋友圈的行為。
另一種方式,是可以通過“長按賬號的頭像→在上拉浮層中點擊設置朋友圈權限“進行設置,該種交互路徑縮短很多。
這個交互操作的設計,可以幫助用戶快速屏蔽掉不喜歡的信息,提升信息質量。
恩,下次再遇到微商,可以試試。

 

朋友圈沒有轉發按鈕

朋友圈算不算“工具”,我本人有些持懷疑態度。但不得不說,微信對于朋友圈信息展示的設計,還是比較克制的。
在朋友圈,外露的操作只有點贊和評論。分享按鈕被放在文章詳情頁右上角的“…”按鈕里。這對于轉發實質上有一定的抑制。這樣做的好處,是防止了朋友圈出現過多的重復內容。
另外,朋友圈里文章的分享,用戶可以自己加入自己的評論,但是之前用戶的評論不會帶到新的分享里。這一點是和微博的轉發最顯著的區別。
微博的轉發,會帶上原有的評論(上圖綠框里的內容),有點拖泥帶水之嫌。
兩者相比,微信的信息展示的效率要高一些。

 

從以上的這些細節中,還是能看到微信對于效率的追求。其實,一個應用要形成自己的設計風格,首先就是需要確定產品本身的定位,然后從定位出發,明確設計上如何去表達這種定位。對于工具型應用的微信,高效自然是首選的原則了。

 

原文地址:沐風與體驗設計(公眾號)

作者:小哥哥沐風

轉載請注明:學UI網 » “用完即走”的微信,自帶高效的交互操作

登錄收藏
 
你可能喜歡的:
UI進階產品設計師之交互設計UI進階產品設計師之交互設計
最小可行性產品經理—第三章(開發篇)最小可行性產品經理—第三章(開發篇)
從完成視覺稿到上線,你還需要做這些(下)從完成視覺稿到上線,你還需要做這些(下)
從完成視覺稿到上線,你還需要做這些(上)從完成視覺稿到上線,你還需要做這些(上)
案例分析:繪制流程圖需要注意哪些事項?案例分析:繪制流程圖需要注意哪些事項?
最小可行性產品經理—第二章最小可行性產品經理—第二章
產品經理如何擁有最小可行性—第一章產品經理如何擁有最小可行性—第一章
Path再見,交互設計的失敗Path再見,交互設計的失敗
淺談消費升級下的體驗設計升級淺談消費升級下的體驗設計升級
全方位解讀特斯拉 Model 3中控大屏UI交互布局全方位解讀特斯拉 Model 3中控大屏UI交互布局
?
网球比分雷速