我們在設(shè)計產(chǎn)品的時候，有時不知道如何提升產(chǎn)品使用路徑的體驗，如何設(shè)計適應(yīng)不同設(shè)備不同場景的統(tǒng)一性。此篇文章會通過設(shè)計騰訊文檔在線收集表，介紹我們通過「角色體驗地圖」提升產(chǎn)品體驗路徑，并且如何搭建多設(shè)備多場景的響應(yīng)式框架的方法。期待給大家?guī)韱l(fā)幫助。

騰訊文檔收集表作為騰訊文檔的重要品類，為用戶提供基礎(chǔ)收集、打卡、接龍、試卷等多樣的信息收集模式，可收集百萬份信息。并且在疫情期間發(fā)揮了信息收集的作用，培養(yǎng)了一批忠實用戶。

如何優(yōu)化產(chǎn)品體驗路徑

學(xué)校老師使用收集表統(tǒng)計學(xué)生信息, 公司秘書使用收集表統(tǒng)計員工健康情況、個人信息。他們究竟是如何使用收集表，在使用過程中又遇到了哪些問題是我們急需了解的。此階段我們分別使用遠程田野調(diào)查法了解用戶訴求，劃分用戶角色法拆解核心體驗路徑，繪制分角色體驗地圖歸納用戶痛點。

1. 遠程田野調(diào)查探索用戶訴求

在疫情期間，雖然不能和用戶見面，我們自研了特殊的調(diào)研方法「遠程田野調(diào)查」來探索用戶的訴求。我們建立了很多用戶反饋群和典型用戶一對一交流，通過聊天的即時性第一時間掌握用戶反饋。雖然不如面對面交流生動，但是也提升了訪談的效率。

我們通過多個渠道收集到了大量的體驗問題，并將這些體驗問題初步匯總?cè)缦?。這使得我們對收集表的基礎(chǔ)體驗問題有了全局性感知。我們匯總的時候會把用戶行為、用戶問題和訴求區(qū)分開來，為進一步的整理做準備。

2. 劃分用戶角色，拆解用戶核心體驗路徑

用戶在使用產(chǎn)品時都有一定的使用路徑和習(xí)慣，了解用戶的使用行為對提升體驗至關(guān)重要。在一些產(chǎn)品中，還要注意不同的身份角色在使用產(chǎn)品時的不同表現(xiàn)。因此我們需要先劃分用戶角色，再根據(jù)不同角色拆解用戶核心體驗路徑，分析關(guān)鍵節(jié)點下的用戶行為以及他們可能遇到的問題。

在收集表中，根據(jù)身份角色，使用收集表的用戶可以劃分為創(chuàng)建人和填寫人兩類。因此我們以身份角色為劃分維度，用戶的核心體驗路徑可以分為創(chuàng)建收集表和填寫收集表。這種粗略的行為無法定位問題，因此我們將創(chuàng)建收集表和填寫收集表的環(huán)節(jié)進一步拆解如下：

• 創(chuàng)建收集表細化為：新建收集表-創(chuàng)建/編輯題目-收集表設(shè)置-發(fā)布并分享-查看詳情和結(jié)果。
• 填寫收集表細化為：打開分享的收集表-填寫收集表-提交收集表-查看上次填寫內(nèi)容-再次填寫。

3. 繪制「角色體驗地圖」歸納用戶痛點

根據(jù)身份角色拆分體驗路徑后，可將收集到的問題歸納到不同身份角色下的相應(yīng)節(jié)點，以便我們更清晰的了解用戶遇到的問題。

在收集表中，我們分別從創(chuàng)建人和填寫人的角度繪制角色體驗地圖，更方便我們清晰地了解不同身份角色的用戶在使用產(chǎn)品時遇到的問題。通過歸納角色體驗地圖我們發(fā)現(xiàn)：

創(chuàng)建人：創(chuàng)建發(fā)布時操作路徑冗余、界面信息復(fù)雜。我們給用戶設(shè)計的操作路徑并不是用戶期望的，用戶在使用時會有“復(fù)雜感”和“迷茫感”，影響創(chuàng)建效率。

填寫人：填寫提交時交互細節(jié)缺失、透傳信息過多。我們?yōu)橛脩粽宫F(xiàn)的內(nèi)容用戶可能并不需要，用戶在使用時會有“冗余感”，影響填寫效率。

4. 設(shè)計實現(xiàn)

縮短路徑快速添加問題

我們分析了創(chuàng)建路徑上的用戶行為，發(fā)現(xiàn)收集表的用戶使用模板比較多，使用模板后會進行調(diào)整和修改。大部分用戶修改問題需要到半屏頁面比較繁瑣，手機屏幕較小，頻繁的切換頁面，很容易迷失。

探索新的解決方案，每個問題的編輯無需跳轉(zhuǎn)，可以在當(dāng)前頁面進行編輯，即點即編，減少跳轉(zhuǎn)，減少輸入的層級。編輯題目提升效率2倍，提升了用戶價值。

直接觸達填寫

我們分析填寫路徑上的用戶行為和問題，發(fā)現(xiàn)創(chuàng)建者創(chuàng)建收集表后，無法直接進行填寫，需要點擊填寫收集表進入新頁面進行填寫，流程繁瑣。

新的解決方案，創(chuàng)建者創(chuàng)建后可以直接填寫，提升了填寫效率。

對比之前方案，新的方案有更方便的創(chuàng)建路徑，編輯題目效率提升2倍，分享流程效率提升2倍，填寫效率提升2倍，查看結(jié)果更加流暢。

如何建立適應(yīng)多場景多設(shè)備的統(tǒng)一框架

我們在設(shè)計一個產(chǎn)品框架的時候既需要有場景的擴展性，為未來更多能力打下基礎(chǔ)，并且可以做到響應(yīng)式設(shè)計，響應(yīng)多個設(shè)備，響應(yīng)式的設(shè)計不僅可以為用戶建立統(tǒng)一的認知，也可以減少開發(fā)成本和未來的修改成本。

收集表場景的多樣性決定了信息收集模式的豐富性。為滿足不同場景下的收集訴求，早期我們快速上線了習(xí)題、打卡、接龍等輕量級收集模塊，但這些模塊與基礎(chǔ)收集的框架不統(tǒng)一。不統(tǒng)一的框架導(dǎo)致收集表的體驗性、擴展性較差，用戶會有使用“多個產(chǎn)品”的錯覺，同時也為后期擴展更多收集場景帶來不便。

除了不具備多場景的統(tǒng)一性，收集表的多設(shè)備體驗也不具備統(tǒng)一。疫情期間用戶養(yǎng)成了移動端的使用習(xí)慣，移動端體驗的重要性也隨之增加。不具備統(tǒng)一性和通用性的多設(shè)備體驗，大大增加了用戶的認知負荷，同時也增加了收集表的維護成本。

因此除了優(yōu)化收集表的路徑體驗，建立跨場景、跨設(shè)備的收集體系也尤為重要。我們的基礎(chǔ)框架設(shè)計需要具有場景擴展性，并且可響應(yīng)多設(shè)備的動態(tài)響應(yīng)。

1. 建立適應(yīng)多場景的框架

要找到適應(yīng)多場景的框架，首先要找到不同場景下的共性能力，并且抽象共性能力為共性模塊。我們發(fā)現(xiàn)收集表大部分場景分為三個模塊：概述、設(shè)置、內(nèi)容。我們建立由這三個模塊組成的新框架，將新框架重新適配到收集表上。新框架也重新適配到打卡、習(xí)題、接龍上面進行框架的統(tǒng)一，強化用戶對產(chǎn)品的統(tǒng)一認知，同時也為未來場景奠定擴展基礎(chǔ)。

2. 建立適應(yīng)多設(shè)備的框架

在《騰訊文檔全平臺系統(tǒng)設(shè)計》中，我們?yōu)榇蠹以敿毥榻B了布局動態(tài)響應(yīng)的設(shè)計方法。收集表作為騰訊文檔中的一個品類，同樣將頁面定義為寬松和緊湊兩種布局，開發(fā)人員使用一套代碼便可維護各平臺產(chǎn)品，保證體驗一致性的同時也大大降低了維護成本。為了建立適應(yīng)多設(shè)備的框架，我們以640pt為界限，Phone適配緊湊布局，Pad、PC、Mac適配寬松布局，內(nèi)容區(qū)域拉伸變化。

不僅適配多端也是適應(yīng)多場景的框架，響應(yīng)式的框架適配到打卡、習(xí)題、接龍等其他場景上。做到了多端和多場景的響應(yīng)適配。

設(shè)計成果

改版后的收集表目前已全面上線，此次改版極大的提升了用戶的使用效率，用戶量有很大提升。在設(shè)計的過程中我們緊緊圍繞“效率升級”，在提升收集表基礎(chǔ)體驗的同時，也著力于打造多場景多端統(tǒng)一的收集體系。體驗設(shè)計沒有終點，我們希望在未來歲月為用戶提供更加卓越的收集服務(wù)，讓騰訊文檔收集表與用戶更好相遇。

以下是騰訊文檔APP和小程序二維碼鏈接，歡迎大家掃碼體驗！

歡迎關(guān)注作者微信公眾號：「騰訊ISUX」