微信的細(xì)致體驗(yàn):一個(gè)產(chǎn)品對(duì)微信的功能分析
配置:
- 手機(jī):iPhone 5S;
- 尺寸:4寸;
- 分辨率:1136*640;
- 版本號(hào):6.2.7
體驗(yàn)順序:
按照微信的界面順序,主要介紹其核心功能——聊天功能。
手繪微信圖:
在寫(xiě)之前先做一些功課,在不看微信的情況下,繪制微信的功能、交互界面(盡可能的體現(xiàn)其核心功能、交互、內(nèi)容);提升對(duì)微信整體和細(xì)節(jié)上的把握;希望能夠提升本篇文章的質(zhì)量和自己的思維,如圖1。
圖1
前序:
市場(chǎng)上對(duì)微信的分析已經(jīng)數(shù)不勝數(shù)了,個(gè)人想新辟一個(gè)角度來(lái)思考微信。本篇文章將踏踏實(shí)實(shí)的對(duì)微信進(jìn)行細(xì)致的分析,分析的內(nèi)容主要是站在戰(zhàn)術(shù)層面上,而不談及戰(zhàn)略層面,用一種比較笨卻實(shí)在的方式去體驗(yàn),包括也許我們從來(lái)都沒(méi)有去使用、思考過(guò)的功能。希望通過(guò)對(duì)微信細(xì)節(jié)上的把握,能夠細(xì)致的思考何謂優(yōu)秀的體驗(yàn),也相信能夠給大家?guī)?lái)新的啟發(fā)。但個(gè)人是有一定的偏向和認(rèn)知局限的,希望大家多多指教!
先梳理一下微信的發(fā)展歷程:
11年1月,微信1.0版,QQ號(hào)導(dǎo)入、即時(shí)通訊功能(文字)、分享照片、更換頭像;
- ?1.1、1.2、1.3版本,支持了手機(jī)通訊錄的讀取、多人會(huì)話的功能(群)、支持發(fā)送表情;
- 5月,2.0版,增加了語(yǔ)音對(duì)話功能,用戶量明顯增加;
- ?2.1、2.2、2.5版本,支持視頻、查看附近的人,用戶量明顯增長(zhǎng);
- ?10月,3.0版,搖一搖、漂流瓶、支持繁體中文、港澳臺(tái)美日用戶可綁定手機(jī)號(hào);
- 3.1-3.5版,文字語(yǔ)音切換、聽(tīng)筒模式、二維碼、英文界面、支持100多個(gè)國(guó)家;
12年3月,用戶破億;
- ?4月,4.0版,相冊(cè)、朋友圈,增強(qiáng)用戶粘性;
- 7月,4.2版,視頻聊天、網(wǎng)頁(yè)版、朋友圈回復(fù);
- ?9月,4.3版,搖一搖傳圖、解綁手機(jī)號(hào)QQ號(hào)、語(yǔ)音搜索功能、動(dòng)態(tài)表情下載、掃一掃;
13年8月,5.0版,新版掃一掃、支付、游戲中心、表情商店。
14年9月,6.0版,增加微信小視屏(進(jìn)入視頻時(shí)代)、微信卡包功能、游戲中心改版,如圖2(借圖)。
圖2
寫(xiě)作角度:
結(jié)合手稿,思考微信在什么地方的什么功能實(shí)現(xiàn)了怎么樣的交互,它為什么這么設(shè)計(jì)(功能&交互),并運(yùn)用KANO模型對(duì)功能進(jìn)行簡(jiǎn)單分類。
正文:
圖標(biāo)、歡迎界面:
微信的圖標(biāo)是以兩個(gè)“信息”圖片依靠在一起所組成的,且兩個(gè)“信息”圖片上都有兩個(gè)點(diǎn),如同營(yíng)造出兩個(gè)人相互依靠的感覺(jué)。但是,當(dāng)點(diǎn)擊進(jìn)入微信之后,其歡迎界面是一個(gè)人獨(dú)孤的站在新球上的場(chǎng)景,顯得非常的渺小和孤獨(dú)。分析:為什么這兩個(gè)圖標(biāo)有這么大的差異呢?試想一下用戶的使用場(chǎng)景,當(dāng)他無(wú)聊時(shí),希望找一個(gè)人聊天,首先看到的是一個(gè)能夠給以依靠感覺(jué)的圖標(biāo),再當(dāng)其點(diǎn)擊進(jìn)入之后發(fā)現(xiàn)自己那種孤獨(dú)感被再次激發(fā)和放大,那么當(dāng)其最終進(jìn)入聊天界面時(shí),就已經(jīng)達(dá)到了聊天的最大渴望值,如圖3、4。
圖3
圖4
點(diǎn)擊進(jìn)入之后,其顯示的主要為底部的四個(gè)標(biāo)簽式Tab,分別為:微信、通訊錄、發(fā)現(xiàn)、我。
微信:
當(dāng)微信重新開(kāi)啟之后,顯示的第一頁(yè)是微信記錄頁(yè)。分析:因?yàn)槿私?jīng)常聊的人不多,所以進(jìn)入的是記錄頁(yè)而不是進(jìn)入通訊錄頁(yè)面。如同《人類簡(jiǎn)史》所說(shuō)的人類的內(nèi)心本質(zhì)并不是趨向于大范圍的合作,而是社會(huì)營(yíng)造的很多虛擬的東西所促成人類的集體活動(dòng),如圖5。
進(jìn)入之后,中心內(nèi)容剛好為7個(gè)List(記錄列表),且不顯示搜索欄(而通訊錄是顯示搜索欄的),因?yàn)樽顬楹诵牡膬?nèi)容是聊天的內(nèi)容和主要聊天的人,并且將搜索欄重新向上拉回時(shí),只要其搜索欄的輸入框底部的線被隱藏之后,它會(huì)自動(dòng)上移進(jìn)行隱藏,形成7個(gè)列表的樣式,顯示出清潔的聊天頁(yè)面,如圖5。
圖5
向下查看多個(gè)List之后,只需要點(diǎn)擊頂部“微信”標(biāo)題的上部(顯示信號(hào)、運(yùn)營(yíng)商、時(shí)間、電量),就可以直接到最頂端,且會(huì)顯示搜索欄,連最頂部也設(shè)計(jì)了相應(yīng)的觸發(fā),提高用戶的體驗(yàn),如圖6。
圖6
將整個(gè)列表下拉時(shí),會(huì)顯示拍攝小視頻的功能,只有當(dāng)“眼睛”全部顯示出來(lái)并顯示為白色時(shí),才真正觸發(fā)了拍攝功能,用戶能夠感知其功能的可用性。
想要?jiǎng)h除某條記錄時(shí),當(dāng)用戶向右滑動(dòng)時(shí),右邊的紅色刪除按鈕會(huì)部分顯示出來(lái),進(jìn)行錯(cuò)誤的提醒。當(dāng)左移記錄時(shí),如果移動(dòng)的距離沒(méi)有超過(guò)“刪除”紅色框的范圍,將重新縮回,目的是為了防止用戶的誤操作以及提示。
然后是對(duì)其內(nèi)容的設(shè)計(jì),在微信的列表記錄里所顯示的內(nèi)容有:頭像、名稱、最新的內(nèi)容、時(shí)間和免打擾設(shè)置,為什么個(gè)人、群和公眾號(hào)的顯示列表的信息都是這樣的呢?頭像和名稱是個(gè)人基本信息的顯示,然后需要有最后的聊天內(nèi)容和最后的時(shí)間,都是非常必要的,所以除了顯示免打擾信息之外,其他都是必要的核心信息,所以微信顯得即干凈又實(shí)用,如圖7。
圖7
當(dāng)點(diǎn)擊進(jìn)入聊天時(shí),其輸入框默認(rèn)為文字輸入,而語(yǔ)音輸入需要點(diǎn)擊后切換(初始化設(shè)置應(yīng)該是有實(shí)際用戶數(shù)據(jù)支撐,但WinPhone默認(rèn)為語(yǔ)音)。語(yǔ)音輸入時(shí),只需要將原本按住的手指上滑之后,就能夠取消發(fā)送,這個(gè)交互非常適用。語(yǔ)音按鈕能夠有1s的誤差判斷,只有輸入超過(guò)1s后才會(huì)發(fā)送,且能夠讀取到1s前所說(shuō)的語(yǔ)音,防止誤操作。一條語(yǔ)音的最長(zhǎng)時(shí)間為60s,在其臨近于1分鐘時(shí),會(huì)進(jìn)行倒計(jì)時(shí)10s的提示。在2分鐘內(nèi),可對(duì)發(fā)出去的信息撤回。語(yǔ)音按鈕的文字“按住?說(shuō)話”、“松開(kāi)?結(jié)束”,中間有空格,對(duì)文案的編排,在每個(gè)細(xì)節(jié)上都進(jìn)行精心設(shè)計(jì),如圖8。
圖8
播放語(yǔ)音時(shí),會(huì)有兩種模式,聽(tīng)筒模式和揚(yáng)聲器模式,通過(guò)軟硬件識(shí)別相應(yīng)的場(chǎng)景,使語(yǔ)音播放更加適宜,為用戶在不同的使用場(chǎng)景中提供最佳體驗(yàn)。
接著是對(duì)內(nèi)容的設(shè)計(jì),在人的生活習(xí)慣中,常會(huì)涉及到回憶、查詢自己在什么時(shí)候說(shuō)了什么話,所以在聊天的過(guò)程中需要顯示相應(yīng)的時(shí)間。但是如果每條信息之后都有時(shí)間就會(huì)把界面變得繁雜,且不利于聚焦聊天的核心內(nèi)容。微信設(shè)定在相隔5分鐘之內(nèi)的消息不會(huì)再次顯示時(shí)間,且顯示時(shí)間的格式為小時(shí)+分鐘、昨天+小時(shí)+分鐘、星期幾+小時(shí)+分鐘、XX年X月X日+小時(shí)+分鐘,如圖9。
圖9
點(diǎn)擊“微信”的添加項(xiàng)(“+”),有發(fā)起群聊、添加朋友、掃一掃、收錢(qián)功能項(xiàng)。發(fā)起群聊可以選擇以前已經(jīng)建立的群,也可以新建群聊天。添加朋友,具有各種方式的添加方式,其中還設(shè)置了“我的微信號(hào)、二維碼“,設(shè)想一下應(yīng)用場(chǎng)景,當(dāng)你添加完別人之后,可能存在著別人來(lái)加你的情況,更加方便的提供一個(gè)入口,如圖10。
圖10
掃一掃中,有掃碼、封面、街景和翻譯。掃碼,可直接將二維碼放置到掃描區(qū)識(shí)別,這是一個(gè)實(shí)體的掃描,同時(shí)在右上角有一個(gè)相冊(cè),點(diǎn)擊進(jìn)入相冊(cè)之后,能選擇一張二維碼圖片,自動(dòng)掃描,這是數(shù)字化的掃描。封面掃描,是對(duì)書(shū)、CD、電影海報(bào)的信息顯示,是對(duì)物聯(lián)網(wǎng)的體現(xiàn),如圖11。
圖11
收錢(qián),是通過(guò)二維碼來(lái)展現(xiàn)的,每次進(jìn)入之后的二維碼都是變化的,通過(guò)掃描之后,聯(lián)通接口進(jìn)行付款,而我們個(gè)人的二維碼是固定的。
搜索框,當(dāng)移動(dòng)微信的記錄內(nèi)容時(shí),當(dāng)移動(dòng)搜索框超過(guò)其底部線的時(shí)候會(huì)自動(dòng)適配上,顯示7個(gè)list。其中,分為文字搜索和語(yǔ)音搜索,文字搜索可以搜聯(lián)系人、群、記錄、朋友圈、公眾號(hào)、文章、收藏、餐廳。而語(yǔ)音搜索,只搜索聯(lián)系人、公眾號(hào)(已訂閱),如圖12。
圖12
在微信的其他功能列表中,其功能的優(yōu)先級(jí)分類的是根據(jù)其需求的頻度(發(fā)現(xiàn)、資料詳情、聊天詳情中的頁(yè)面排布順序),功能分類清晰,如圖13、14。
圖13
圖14
微信需求KANO模型(對(duì)眾多功能進(jìn)行簡(jiǎn)單分類)
- 基礎(chǔ)性需求:個(gè)人之間的聊天
- 期望性需求:群聊、表情、語(yǔ)音文字聊天、搜索、設(shè)置聊天背景以及標(biāo)注聊天對(duì)象、添加好友、朋友圈等
- 興奮性需求:收錢(qián)、紅包、公眾號(hào)、轉(zhuǎn)賬、位置、掃一掃、搖一搖、附近的人、漂流瓶、卡劵等
總結(jié):
微信在功能、交互設(shè)計(jì)上處處體現(xiàn)著優(yōu)秀的體驗(yàn),從微信Icon和歡迎界面的設(shè)計(jì),營(yíng)造出的氛圍;到顯示7個(gè)list的聊天記錄頁(yè)面;再到對(duì)頂部點(diǎn)擊之后,直接返回最上層的交互設(shè)計(jì);再到視頻拍攝功能的可用性設(shè)計(jì);到刪除記錄時(shí)的交互提醒設(shè)計(jì);到核心內(nèi)容的顯示,布置干凈又實(shí)用的界面;再對(duì)語(yǔ)音輸入的設(shè)計(jì),防止誤操作;對(duì)不同的使用場(chǎng)景設(shè)置不同的收聽(tīng)模式,人性化的設(shè)計(jì);對(duì)聊天內(nèi)容的時(shí)間提醒設(shè)置;再對(duì)各個(gè)功能接口的設(shè)計(jì),體現(xiàn)著其戰(zhàn)略目標(biāo)的布局,但是當(dāng)用戶不用時(shí),那些功能都不會(huì)打擾用戶,以聊天為核心功能;再對(duì)其眾多功能的使用頻度進(jìn)行歸類以及文案的設(shè)計(jì)。從各種錯(cuò)誤反饋的引導(dǎo),到功能的排布,再到內(nèi)容的部署,有心的優(yōu)化著用戶的各種體驗(yàn),抓住微信的核心功能,并增加接口來(lái)部署相應(yīng)的戰(zhàn)略目標(biāo)。
如果大家對(duì)微信有什么新的發(fā)現(xiàn)(或者微信各個(gè)版本之間有較大的區(qū)別)、好的交互或者有什么比較規(guī)范化的分析角度,都請(qǐng)多多指教!
本文由 @森 琪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。
想問(wèn)一下,微信的發(fā)展歷史,就是各個(gè)版本實(shí)現(xiàn)哪些功能,這個(gè)要怎么查。。
之前一直只能查到最新版本的內(nèi)容
微信-我-設(shè)置-關(guān)于微信-系統(tǒng)通知
點(diǎn)擊狀態(tài)欄返回頂部是iOS的UITableView控件的功能,左劃刪除對(duì)話也是哦。微信iOS版都沒(méi)有做過(guò)多炫麗冗余的設(shè)計(jì),很多地方都直接使用(保留)蘋(píng)果自己的框架來(lái)搭建,但是用戶的體驗(yàn)效果仍然很好,這應(yīng)該算是極簡(jiǎn)至美的一種體現(xiàn)吧 ??
微信算是改動(dòng)系統(tǒng)交互極少,且還可以做到體驗(yàn)非常順心的應(yīng)用。
初期,大家都熱衷于打造自己的一套體驗(yàn),形成欣欣向榮的景象,曾經(jīng)也是對(duì)path喜愛(ài)的不得了。
百家爭(zhēng)鳴之后,獨(dú)尊一哥,萬(wàn)物歸宗,一切趨同之后又開(kāi)始下一場(chǎng)變革。
感覺(jué)最開(kāi)始關(guān)于app圖標(biāo)和啟動(dòng)頁(yè)的分析比較有參考價(jià)值~
??
點(diǎn)擊頂部狀態(tài)欄返回頂部,是iOS系統(tǒng)的設(shè)定, ??
哈哈,的確如此啊