微(wei)信新版本更新,接踵而來的(de)(de)(de)是各種針對微(wei)信大(da)改(gai)版的(de)(de)(de)評(ping)議(yi),在大(da)致(zhi)體(ti)驗了一下(xia)新版微(wei)信之后(hou),我(wo)從(cong)視覺和(he)核心場(chang)景的(de)(de)(de)體(ti)驗角度說一說自己的(de)(de)(de)見解。
1. 配色
先從視覺(jue)角度(du)說起,改(gai)版后(hou)第(di)一映入眼簾(lian)的(de)是(shi)我(wo)們每天(tian)都(dou)(dou)要(yao)看 n 遍的(de) Logo ,品牌(pai)色做了(le)略微(wei)改(gai)動,從純色底(di)變(bian)成了(le)之前就開始流(liu)行的(de)微(wei)漸變(bian),這也是(shi)微(wei)信(xin)(xin)追隨(sui)潮(chao)流(liu)并向年輕(qing)化(hua)邁進吧,因為00后(hou)大部分(fen)用 QQ 居多,咱們90后(hou)的(de)「老人(ren)們」一直用微(wei)信(xin)(xin),不能代表年輕(qing)人(ren)都(dou)(dou)用微(wei)信(xin)(xin)了(le)。
我(wo)們更新之(zhi)后進(jin)入 app,最明顯的(de)感受應該就是,原本厚重(zhong)感的(de)配色(se)消失(shi)不見了(le),這也是微信進(jin)軍年輕化的(de)一個標(biao)志,品牌色(se)綠色(se)、底色(se)的(de)藍灰色(se)、分割(ge)線(xian)的(de)顏色(se)和標(biao)簽(qian)欄(lan)的(de)圖標(biao)文字(zi)顏色(se)都進(jin)行了(le)優化。
2. 留白
除了顏色上(shang)的耳目一新之外,最顯(xian)眼的應(ying)該就(jiu)是留(liu)白了,因此比之前閱(yue)讀(du)起(qi)來(lai)更(geng)加流暢,頁(ye)邊距、底部標簽欄、分割線左邊的留(liu)白等(deng),都隨著整體的改變進(jin)行了拓寬(kuan),使(shi)得頁(ye)面的呼吸感更(geng)加自然(ran),閱(yue)讀(du)信(xin)息更(geng)加順暢高效(xiao)。
比如「我的」頁面(mian),原(yuan)本下(xia)面(mian)的空白區域(yu)那么多,留著也是(shi)留著,一(yi)時也不會增加新業務,還(huan)不如往(wang)下(xia)擴張。
3. 圖標圖片
第三讓人(ren)印(yin)象深刻的就是萬年不變(bian)的圖標,終于變(bian)了。
其實變化也(ye)不大,我(wo)們會發現頁面的功能(neng)圖標(biao)(biao)從面性變成了(le)線性的,至于線性面性也(ye)各有各的特(te)點,這(zhe)里不評論好壞。但(dan)是標(biao)(biao)簽(qian)欄圖標(biao)(biao),原本選中(zhong)的狀態(tai)顏色比較淡,更新(xin)后的圖標(biao)(biao)顏色做(zuo)了(le)加深(shen)和加粗(cu),看的更加清楚了(le)。
新版本(ben)還是(shi)比較(jiao)講究識別度的,比如通訊錄頁面(mian)好友頭像的大(da)小,也做了適當的放大(da)。
上(shang)圖中通訊錄的(de)頭像(xiang)尺寸放(fang)大了,但是(shi)我發(fa)現微(wei)信消(xiao)息(xi)列表頁(ye)面的(de)好(hao)友(you)頭像(xiang),尺寸并沒有變化,這是(shi)為什么呢?
設計師(shi)懶了?當然不是。
因(yin)為用戶場(chang)景(jing)是(shi)這樣的(de):通(tong)常我們在消息(xi)列表頁(ye)面的(de)時候,目(mu)的(de)是(shi)回復消息(xi),或者找到(dao)最近聯系(xi)人發送消息(xi)。
但(dan)是(shi)我(wo)們(men)真的(de)(de)要找一個好友的(de)(de)時候,尤(you)其是(shi)最近沒有聯(lian)系的(de)(de)好友,消息主頁是(shi)不(bu)便尋找的(de)(de)。如果不(bu)用關鍵(jian)詞查找或(huo)者不(bu)記得關鍵(jian)字,一般都會去通訊錄找。
在通(tong)訊錄翻(fan)閱(yue)尋找(zhao)一個(ge)好(hao)友,我們除了通(tong)過看名字,也(ye)有不(bu)少用戶群體是通(tong)過頭像記憶去識(shi)別(bie)出自己要找(zhao)的(de)好(hao)友。這時(shi)候(hou),頭像的(de)識(shi)別(bie)度就比消息(xi)主頁的(de)識(shi)別(bie)度重要的(de)多了。
這也是(shi)為(wei)什么微(wei)信更新后消(xiao)息主頁頭(tou)像尺寸不變,而(er)通(tong)訊錄(lu)頁面好友頭(tou)像尺寸變大(da)了的原(yuan)因吧。
微信針對用戶場景做(zuo)的細節(jie)體驗提(ti)升(sheng),真是(shi)到位。
4. 文字
繼前面的識(shi)別度(du)優化之后,朋友(you)圈內容(rong)(rong)下方的時間文(wen)字(zi),還有對自己(ji)朋友(you)圈的操(cao)作文(wen)字(zi)也增大了,一是識(shi)別度(du)提(ti)升,二是更容(rong)(rong)易點擊(ji),提(ti)升易用性(xing)。
更新之(zhi)后(hou)的(de)微信一些二級(ji)頁面的(de)導(dao)航欄,返(fan)回button 后(hou)面的(de)文(wen)字都(dou)做了省略,可能大家在(zai)體驗上已經完全習慣了這里就(jiu)是返(fan)回,而大程度的(de)減(jian)少不(bu)必要的(de)內容(rong),減(jian)少信息干擾,也保(bao)持頁面的(de)清爽。
舊版(ban)本中群聊的(de)清(qing)空(kong)聊天記(ji)錄是普通選項(xiang)的(de)樣式,而(er)在(zai)新版(ban)微信中,「清(qing)空(kong)聊天記(ji)錄」和「刪除并(bing)退(tui)出(chu)」是同(tong)樣的(de)樣式并(bing)且是紅色的(de)字體(ti),因為兩(liang)者(zhe)都屬于「高危選項(xiang)」,做(zuo)成紅色字體(ti)提示更(geng)能(neng)區分(fen)開并(bing)且警(jing)告,提升了產品的(de)防錯性。
1. 強提醒
在跟好友的對話頁面,點擊右上角的更多,就可以跳到這里,這里很明(ming)顯的增加了一(yi)個強提醒功能。
勾選之后(hou),三小時內(nei),該好友發(fa)來的(de)消息,手機(ji)會(hui)收到全屏的(de)提示,并(bing)且伴隨著手機(ji)震動(dong)。如果(guo)在鎖屏頁面(mian),還(huan)會(hui)出現不一(yi)樣的(de)鈴(ling)聲(sheng)并(bing)伴隨長(chang)時間震動(dong)。
這個新功能我認為還是不(bu)錯的。
有的同學剛更新(xin),可(ke)能對這(zhe)個(ge)功(gong)能感到茫然,不知道(dao)什(shen)么時候用(yong)(yong)這(zhe)個(ge)功(gong)能。我個(ge)人認為(wei)這(zhe)個(ge)功(gong)能的用(yong)(yong)戶(hu)場景,雖然不是常用(yong)(yong),但卻(que)可(ke)以有效的解決(jue)問(wen)題。
舉個(ge)例子(zi):你是否(fou)經常會(hui)有個(ge)重要的事(shi)情要等回(hui)復(fu),比如有個(ge)大客戶(hu)要來公司(si)談業務(wu),但你在忙其他的事(shi)情,或(huo)者微信正(zheng)有很(hen)多消息要回(hui)復(fu)(尤其是微商(shang)用戶(hu))。
在這個時(shi)候,你是否需(xu)要反(fan)復的查看客(ke)戶A 是否給你回消息了(le),或(huo)者擔心忽略(lve)了(le)客(ke)戶B 跟你說已經(jing)到樓下了(le);我們是否需(xu)要反(fan)復從其它事情中跳出狀(zhuang)態,來看對方是否回復了(le)你,或(huo)者會(hui)忘了(le)隨時(shi)可(ke)能(neng)發生的事情。
這(zhe)種場景下,我們需(xu)(xu)要一個特別的(de)提示,這(zhe)個提示需(xu)(xu)要足(zu)(zu)夠(gou)強大足(zu)(zu)夠(gou)明顯(xian),同時(shi)不會被(bei)其(qi)他普通消息給混淆、同化(hua)。
在這樣的場景當中,全屏的提示有足夠的干擾性。
我(wo)們在回(hui)復(fu)一些不(bu)(bu)重(zhong)要的(de)(de)消息時,不(bu)(bu)用跳回(hui)到(dao)消息列表,就可以知道我(wo)等待的(de)(de)重(zhong)要消息來了。
如果(guo)手(shou)機(ji)不(bu)(bu)在手(shou)上看著(zhu),在忙別(bie)的(de)事,強提醒來(lai)了(le)會有長(chang)時間的(de)震動和不(bu)(bu)一樣的(de)鈴(ling)聲提醒,就像來(lai)電話了(le)一般的(de)強大打斷(duan)性,并(bing)使我(wo)們(men)不(bu)(bu)用看手(shou)機(ji),就能分辨來(lai)的(de)消息是不(bu)(bu)是自己一直等待的(de)重(zhong)要(yao)消息。
2. 視頻靜音
視頻(pin)靜音(yin)當然不(bu)是說朋友(you)圈的靜音(yin)播(bo)放。
更新之(zhi)后的(de)微信,好(hao)友(you)(you)(you)如果用了(le)新功(gong)能「小(xiao)視頻(pin)拍攝」,那么在(zai)好(hao)友(you)(you)(you)資(zi)料頁面(mian)中,頂(ding)部背(bei)景封面(mian)是小(xiao)視頻(pin)的(de)部分封面(mian),我們(men)下拉的(de)時候(hou)可以直接觀看好(hao)友(you)(you)(you)最近(jin)拍的(de)小(xiao)視頻(pin);但是在(zai)下滑的(de)時候(hou),左下角會(hui)出(chu)現靜(jing)音(yin)播放,把手指拖到這里松開(kai),播放好(hao)友(you)(you)(you)視頻(pin)的(de)時候(hou),就會(hui)進入(ru)靜(jing)音(yin)模式(shi)。遺傳了(le)之(zhi)前朋友(you)(you)(you)圈的(de)靜(jing)音(yin)播放功(gong)能。
3. 音視頻通話
打字真累(lei),還是發語音(yin)通話吧。
咦,語音通話呢?怎么只(zhi)有(you)視(shi)頻通話?音頻呢?
這應該是(shi)過去(qu)的(de)(de)一些(xie)用(yong)戶碰(peng)到過的(de)(de)問題:音頻(pin)(pin)(pin)通(tong)話(hua)的(de)(de)提(ti)示(shi)隱藏在點擊(ji)視頻(pin)(pin)(pin)通(tong)過之后。更(geng)新之后的(de)(de)這個頁面,把視頻(pin)(pin)(pin)通(tong)話(hua)的(de)(de) button 改成了音視頻(pin)(pin)(pin)通(tong)話(hua),也就是(shi)對「音頻(pin)(pin)(pin)通(tong)話(hua)」功(gong)能的(de)(de)提(ti)示(shi)做了透出,很直接的(de)(de)提(ti)升了可用(yong)性(xing)。
4. 錢包支付頁
微信支付已經從(cong)支付寶手里搶到了一(yi)大塊市場,我們對(dui)微信支付這個(ge)圖標潛移默化的(de)形成了記憶,微信估計也(ye)針對(dui)支付這一(yi)功能(neng)做出了明確定位,大部分用戶在這里主(zhu)要用的(de)是(shi)支付功能(neng),所以對(dui)這里的(de)命(ming)名(ming)和(he)圖標做了改變。
經(jing)常(chang)用微信支付的(de)朋(peng)友應該(gai)也清楚,我們進入這個頁面(mian)(mian),通常(chang)查看(kan)和(he)使(shi)用頻率最高的(de)還(huan)是收付款和(he)零錢(qian)(qian),而銀行(xing)卡(ka)其(qi)實(shi)是一個使(shi)用頻率特(te)別低的(de)功(gong)能,估計是這樣的(de)原因,微信就把「銀行(xing)卡(ka)」從(cong)最重(zhong)要的(de)頁面(mian)(mian)頂部(bu)轉移到(dao)了更深(shen)的(de)層級中,也就是點擊錢(qian)(qian)包后進入的(de)頁面(mian)(mian)。把零錢(qian)(qian)改成了錢(qian)(qian)包,而零錢(qian)(qian)和(he)銀行(xing)卡(ka)都屬(shu)于錢(qian)(qian)包里面(mian)(mian)的(de),更新(xin)后的(de)命名也確實(shi)更到(dao)位了。
5. 看一看
發(fa)現(xian)頁(ye)面的「看一(yi)看」也做了內(nei)容(rong)改版,現(xian)在會(hui)把一(yi)些(xie)優質的朋(peng)(peng)友圈(quan)內(nei)容(rong)轉移到這里(li),以免錯(cuo)過精(jing)彩內(nei)容(rong),可能是在無聊內(nei)容(rong)泛濫的朋(peng)(peng)友圈(quan)區域,提高朋(peng)(peng)友圈(quan)優質內(nei)容(rong)的互動率。
具體是(shi)通過什么算法才(cai)能展(zhan)現到這(zhe)里,目前沒有去做研究。
6. 時刻視頻
點擊我的(de)頁面右上角的(de) button,或者直接下拉頁面,就可以(yi)進(jin)入時刻視頻的(de)拍(pai)攝頁面。
這(zhe)個功(gong)能應該更傾向于喜歡(huan)記錄生(sheng)活和(he)發布(bu)朋友圈的用戶,這(zhe)里進去之(zhi)后拍攝的視(shi)頻,可以替換音樂(le),添加圖紙和(he)文字等都很(hen)方便。
但(dan)是(shi)有個小細節個人覺得(de)需要優(you)化:當我(wo)(wo)第一次(ci)下(xia)拉「我(wo)(wo)」頁面,提示可(ke)拍(pai)攝(she)視(shi)頻(pin)的(de)(de)時(shi)候,我(wo)(wo)并不(bu)(bu)明確的(de)(de)知道我(wo)(wo)該如何返(fan)回(hui),返(fan)回(hui)按(an)鈕那里沒有顯(xian)示,至少我(wo)(wo)們是(shi)看不(bu)(bu)見的(de)(de),我(wo)(wo)們可(ke)以點那里返(fan)回(hui)或者上滑也可(ke)以回(hui)去,但(dan)這些都(dou)沒有明確的(de)(de)「路(lu)標(biao)」。在看自己拍(pai)攝(she)的(de)(de)視(shi)頻(pin)的(de)(de)時(shi)候,也沒有明確的(de)(de)返(fan)回(hui)。
而且我(wo)拍攝的視頻(pin)想刪除,只能(neng)通(tong)過(guo)長按視頻(pin)的方(fang)式,這種操作也隱藏的比較深,一般不容易被(bei)發現,用戶(hu)需(xu)要(yao)思考猜測才能(neng)發現,不過(guo)微信的想法應該是(shi)想讓視頻(pin)更加有沉浸式的體驗吧。
當然還有(you)一些細節(jie)和功能我沒(mei)有(you)寫(xie)出(chu)來,比如一些 button 樣式的(de)(de)變化、表情(qing)包(bao)部分自拍單(dan)獨移(yi)出(chu)處理,拍攝了時刻視頻(pin)的(de)(de)好(hao)友會出(chu)現圓(yuan)圈提示(shi)、群(qun)(qun)聊顯(xian)示(shi)群(qun)(qun)好(hao)友視頻(pin)的(de)(de)圓(yuan)圈 icon 標記等。
我主(zhu)要總結的是(shi)一些(xie)能體(ti)現微信用心(xin)優化(hua)的功能和一些(xie)較好的創新(xin),但其實我們基本已(yi)經可以(yi)從中體(ti)會到(dao)微信對于體(ti)驗(yan)設計方(fang)面的用心(xin)良苦和大膽嘗試。
張小龍(long)在朋(peng)友(you)圈(quan)發的(de)內容,是不是在詮(quan)釋新(xin)版的(de)開屏界(jie)面呢,不過開屏的(de)這(zhe)朵花叫波斯菊(ju),波斯菊(ju)還(huan)有一個名字(zi):「張大人花」,寓(yu)意是張大人的(de)微(wei)信(xin)嗎?
最后想說的(de)是:有(you)人吐槽有(you)人夸贊,當初 iOS 12 更新也是吐槽不斷,不過世間(jian)萬物總(zong)會變化,我們也應該(gai)拋棄習(xi)慣(guan)了的(de)審(shen)美和部分習(xi)慣(guan),去迎接每個新事物。