配置:

  • 手機:iPhone 5S;
  • 尺寸:4寸;
  • 分辨率:1136*640;
  • 版本號:6.2.7

體驗順序:

按照微信的界面順序,主要介紹其核心功能——聊天功能。

手繪微信圖:

在寫之前先做一些功課,在不看微信的情況下,繪製微信的功能、交互界面(盡可能的體現其核心功能、交互、內容);提升對微信整體和細節上的把握;希望能夠提升本篇文章的質量和自己的思維,如圖1。

圖1

前序:

市場上對微信的分析已經數不勝數了,個人想新辟一個角度來思考微信。本篇文章將踏踏實實的對微信進行細緻的分析,分析的內容主要是站在戰術層面上,而不談及戰略層面,用一種比較笨卻實在的方式去體驗,包括也許我們從來都沒有去使用、思考過的功能。希望通過對微信細節上的把握,能夠細緻的思考何謂優秀的體驗,也相信能夠給大家帶來新的啟發。但個人是有一定的偏向和認知局限的,希望大家多多指教!

先梳理一下微信的發展歷程

11年1月,微信1.0版,QQ號導入、即時通訊功能(文字)、分享照片、更換頭像;

  •  1.1、1.2、1.3版本,支持了手機通訊錄的讀取、多人會話的功能(群)、支持發送表情;
  • 5月,2.0版,增加了語音對話功能,用戶量明顯增加;
  •  2.1、2.2、2.5版本,支持視頻、查看附近的人,用戶量明顯增長;
  •  10月,3.0版,搖一搖、漂流瓶、支持繁體中文、港澳台美日用戶可綁定手機號;
  • 3.1-3.5版,文字語音切換、聽筒模式、二維碼、英文界面、支持100多個國家;

12年3月,用戶破億;

  •  4月,4.0版,相冊、朋友圈,增強用戶粘性;
  • 7月,4.2版,視頻聊天、網頁版、朋友圈回復;
  •  9月,4.3版,搖一搖傳圖、解綁手機號QQ號、語音搜索功能、動態表情下載、掃一掃;

13年8月,5.0版,新版掃一掃、支付、遊戲中心、表情商店。

14年9月,6.0版,增加微信小視屏(進入視頻時代)、微信卡包功能、遊戲中心改版,如圖2(借圖)。

圖2

寫作角度:

結合手稿,思考微信在什麼地方的什麼功能實現了怎麼樣的交互,它為什麼這麼設計(功能&交互),並運用KANO模型對功能進行簡單分類。

正文:

圖標、歡迎界面:

微信的圖標是以兩個“信息”圖片依靠在一起所組成的,且兩個“信息”圖片上都有兩個點,如同營造出兩個人相互依靠的感覺。但是,當點擊進入微信之後,其歡迎界面是一個人獨孤的站在新球上的場景,顯得非常的渺小和孤獨。分析:為什麼這兩個圖標有這麼大的差異呢?試想一下用戶的使用場景,當他無聊時,希望找一個人聊天,首先看到的是一個能夠給以依靠感覺的圖標,再當其點擊進入之後發現自己那種孤獨感被再次激發和放大,那麼當其最終進入聊天界面時,就已經達到了聊天的最大渴望值,如圖3、4。

圖3

圖4

點擊進入之後,其显示的主要為底部的四個標籤式Tab,分別為:微信、通訊錄、發現、我

微信:

當微信重新開啟之後,显示的第一頁是微信記錄頁。分析:因為人經常聊的人不多,所以進入的是記錄頁而不是進入通訊錄頁面。如同《人類簡史》所說的人類的內心本質並不是趨向於大範圍的合作,而是社會營造的很多虛擬的東西所促成人類的集體活動,如圖5。

進入之後,中心內容剛好為7個List(記錄列表),且不显示搜索欄(而通訊錄是显示搜索欄的),因為最為核心的內容是聊天的內容和主要聊天的人,並且將搜索欄重新向上拉回時,只要其搜索欄的輸入框底部的線被隱藏之後,它會自動上移進行隱藏,形成7個列表的樣式,显示出清潔的聊天頁面,如圖5。

圖5

向下查看多個List之後,只需要點擊頂部“微信”標題的上部(显示信號、運營商、時間、電量),就可以直接到最頂端,且會显示搜索欄,連最頂部也設計了相應的觸發,提高用戶的體驗,如圖6。

圖6

將整個列表下拉時,會显示拍攝小視頻的功能,只有當“眼睛”全部显示出來並显示為白色時,才真正觸發了拍攝功能,用戶能夠感知其功能的可用性。

想要刪除某條記錄時,當用戶向右滑動時,右邊的紅色刪除按鈕會部分显示出來,進行錯誤的提醒。當左移記錄時,如果移動的距離沒有超過“刪除”紅色框的範圍,將重新縮回,目的是為了防止用戶的誤操作以及提示。

然後是對其內容的設計,在微信的列表記錄里所显示的內容有:頭像、名稱、最新的內容、時間和免打擾設置,為什麼個人、群和公眾號的显示列表的信息都是這樣的呢?頭像和名稱是個人基本信息的显示,然後需要有最後的聊天內容和最後的時間,都是非常必要的,所以除了显示免打擾信息之外,其他都是必要的核心信息,所以微信顯得即乾淨又實用,如圖7。

圖7

當點擊進入聊天時,其輸入框默認為文字輸入,而語音輸入需要點擊后切換(初始化設置應該是有實際用戶數據支撐,但WinPhone默認為語音)。語音輸入時,只需要將原本按住的手指上滑之後,就能夠取消發送,這個交互非常適用。語音按鈕能夠有1s的誤差判斷,只有輸入超過1s后才會發送,且能夠讀取到1s前所說的語音,防止誤操作。一條語音的最長時間為60s,在其臨近於1分鐘時,會進行倒計時10s的提示。在2分鐘內,可對發出去的信息撤回。語音按鈕的文字“按住 說話”、“鬆開 結束”,中間有空格,對文案的編排,在每個細節上都進行精心設計,如圖8。

圖8

播放語音時,會有兩種模式,聽筒模式和揚聲器模式,通過軟硬件識別相應的場景,使語音播放更加適宜,為用戶在不同的使用場景中提供最佳體驗。

接着是對內容的設計,在人的生活習慣中,常會涉及到回憶、查詢自己在什麼時候說了什麼話,所以在聊天的過程中需要显示相應的時間。但是如果每條信息之後都有時間就會把界面變得繁雜,且不利於聚焦聊天的核心內容。微信設定在相隔5分鐘之內的消息不會再次显示時間,且显示時間的格式為小時+分鐘、昨天+小時+分鐘、星期幾+小時+分鐘、XX年X月X日+小時+分鐘,如圖9。

圖9

點擊“微信”的添加項(“+”),有發起群聊、添加朋友、掃一掃、收錢功能項。發起群聊可以選擇以前已經建立的群,也可以新建群聊天。添加朋友,具有各種方式的添加方式,其中還設置了“我的微信號、二維碼“,設想一下應用場景,當你添加完別人之後,可能存在着別人來加你的情況,更加方便的提供一個入口,如圖10。

圖10

掃一掃中,有掃碼、封面、街景和翻譯。掃碼,可直接將二維碼放置到掃描區識別,這是一個實體的掃描,同時在右上角有一個相冊,點擊進入相冊之後,能選擇一張二維碼圖片,自動掃描,這是数字化的掃描。封面掃描,是對書、CD、電影海報的信息显示,是對物聯網的體現,如圖11。

圖11

收錢,是通過二維碼來展現的,每次進入之後的二維碼都是變化的,通過掃描之後,聯通接口進行付款,而我們個人的二維碼是固定的。

搜索框,當移動微信的記錄內容時,當移動搜索框超過其底部線的時候會自動適配上,显示7個list。其中,分為文字搜索和語音搜索,文字搜索可以搜聯繫人、群、記錄、朋友圈、公眾號、文章、收藏、餐廳。而語音搜索,只搜索聯繫人、公眾號(已訂閱),如圖12。

圖12

在微信的其他功能列表中,其功能的優先級分類的是根據其需求的頻度(發現、資料詳情、聊天詳情中的頁面排布順序),功能分類清晰,如圖13、14。

圖13

圖14

微信需求KANO模型(對眾多功能進行簡單分類)

  • 基礎性需求:個人之間的聊天
  • 期望性需求:群聊、表情、語音文字聊天、搜索、設置聊天背景以及標註聊天對象、添加好友、朋友圈等
  • 興奮性需求:收錢、紅包、公眾號、轉賬、位置、掃一掃、搖一搖、附近的人、漂流瓶、卡劵等

總結:

微信在功能、交互設計上處處體現着優秀的體驗,從微信Icon和歡迎界面的設計,營造出的氛圍;到显示7個list的聊天記錄頁面;再到對頂部點擊之後,直接返回最上層的交互設計;再到視頻拍攝功能的可用性設計;到刪除記錄時的交互提醒設計;到核心內容的显示,布置乾淨又實用的界面;再對語音輸入的設計,防止誤操作;對不同的使用場景設置不同的收聽模式,人性化的設計;對聊天內容的時間提醒設置;再對各個功能接口的設計,體現着其戰略目標的布局,但是當用戶不用時,那些功能都不會打擾用戶,以聊天為核心功能;再對其眾多功能的使用頻度進行歸類以及文案的設計。從各種錯誤反饋的引導,到功能的排布,再到內容的部署,有心的優化着用戶的各種體驗,抓住微信的核心功能,並增加接口來部署相應的戰略目標。

如果大家對微信有什麼新的發現(或者微信各個版本之間有較大的區別)、好的交互或者有什麼比較規範化的分析角度,都請多多指教!

 

本文由 @森 琪 原創發佈於人人都是產品經理 ,未經許可,禁止轉載。