文章從產(chǎn)品架構(gòu)、全局變量、產(chǎn)品流程、頁面流程及頁面詳細(xì)說明幾個(gè)方面深度研究了滴滴出行中的“快車”功能業(yè)務(wù)，并總結(jié)了對滴滴的三點(diǎn)建議，與大家分享。

一、文檔概述

1.1 文檔屬性

1.2 產(chǎn)品簡介

產(chǎn)品類型：主打交通出行的線上綜合服務(wù)平臺

產(chǎn)品slogan：滴滴一下，美好出行。

產(chǎn)品介紹：滴滴出行是一家主打交通出行的綜合服務(wù)平臺，是蓋出租車、專車、快車、順風(fēng)車、代駕及大巴等多項(xiàng)業(yè)務(wù)在內(nèi)的一站式出行平臺。

產(chǎn)品定位：快捷、方便的打車應(yīng)用。

1.3 產(chǎn)品用戶

由數(shù)據(jù)可以得出，每100個(gè)中國移動網(wǎng)民中就有12個(gè)是滴滴出行用戶；其中25歲以下的用戶人數(shù)占到總?cè)藬?shù)的30%，35歲以下的用戶人數(shù)占到總?cè)藬?shù)的84.5%，并且近六成用戶為男性；用戶多居住在一二線城市。由此可見，滴滴的用戶雖然覆蓋各年齡段和全國各地，但35歲以下的一二線城市用戶占大多數(shù)。

1.4 需求總結(jié)

二、產(chǎn)品結(jié)構(gòu)

2.1 產(chǎn)品主要功能邏輯圖

2.2 產(chǎn)品主要功能模塊

2.3 產(chǎn)品功能結(jié)構(gòu)圖

2.4 產(chǎn)品信息架構(gòu)圖

三、全局變量

3.1 登陸頁面

• 登錄狀態(tài)下可以進(jìn)行全部操作
• 未登錄狀態(tài)下進(jìn)入APP，不可回復(fù)信息、不可叫車、不可進(jìn)行支付。要進(jìn)行上述操作需要跳轉(zhuǎn)到登錄頁面。

3.1.1 輸入手機(jī)號界面

（1）頁面名稱：輸入手機(jī)號頁面

（2）頁面入口：未登錄狀態(tài)下，用戶點(diǎn)擊地圖點(diǎn)、選擇目的地、查看消息等任何互動功能時(shí)，自動跳轉(zhuǎn)入登錄界面

（3）頁面功能：實(shí)現(xiàn)三種方式的登錄——手機(jī)驗(yàn)證碼模式、手機(jī)密碼登錄、第三方授權(quán)登錄

（4）頁面邏輯輯內(nèi)容及其交互詳細(xì)說明：

a.初始界面下，呈現(xiàn)手機(jī)號碼輸入欄、密碼登錄按鈕、下一步按鈕、其他方式登錄按鈕

b.手機(jī)號碼默認(rèn)+86，輸入限制11位數(shù)字。當(dāng)輸入非數(shù)字內(nèi)容時(shí)，輸入界面不顯示任何內(nèi)容；輸入數(shù)字小于11位時(shí)，點(diǎn)擊登錄彈出toast“請輸入11位數(shù)字手機(jī)號”；當(dāng)輸入大于11位數(shù)字時(shí)，超過部分不顯示，并彈出toast“您輸入的手機(jī)號大于11位”。

c.第三方授權(quán)登錄,初始界面下，呈現(xiàn)其他方式登錄提示詞。提供各平臺按鈕，點(diǎn)擊進(jìn)入此平臺授權(quán)登錄界面

授權(quán)完成后，完成登錄，轉(zhuǎn)入主頁面

3.1.2 使用密碼登錄界面

（1）頁面名稱：使用密碼登錄界面

（2）頁面入口：輸入手機(jī)號界面

（3）頁面功能：使用密碼完成登錄

（4）頁面邏輯輯內(nèi)容及其交互詳細(xì)說明：

a.初始界面下，呈現(xiàn)密碼輸入欄、使用驗(yàn)證碼登錄按鈕、確定、返回按鈕

b.密碼限制輸入6-16位，可輸入數(shù)字、大小寫英文字母、各類符號。

c.輸入密碼小于6位時(shí)，點(diǎn)擊確定按鈕彈出toast“請輸入的密碼長度最少為6位”；當(dāng)輸入大于16位數(shù)字時(shí)，超過部分不顯示，并彈出toast“您輸入的密碼長度大于16位”。

3.1.3 使用驗(yàn)證碼登錄界面

（1）頁面名稱：使用驗(yàn)證碼登錄界面

（2）頁面入口：輸入手機(jī)號界面、使用密碼登錄界面

（3）頁面功能：使用驗(yàn)證碼完成登錄

（4）頁面邏輯輯內(nèi)容及其交互詳細(xì)說明：

a.初始界面下，呈現(xiàn)驗(yàn)證碼輸入欄、重新獲取驗(yàn)證碼、沒收到驗(yàn)證碼、返回按鈕

b.’獲取驗(yàn)證碼’按鈕從點(diǎn)擊后開始倒計(jì)時(shí)

c．同意IP或同一手機(jī)號，兩分鐘內(nèi)最多可獲取兩次，一天最多能發(fā)十次驗(yàn)證碼”

d．超限提示“獲取次數(shù)超限，請稍后再試”。

e．驗(yàn)證碼錯(cuò)誤提示“驗(yàn)證碼有誤請重新輸入”；驗(yàn)證碼過期提示“驗(yàn)證碼已失效，請重新獲取驗(yàn)證碼”。

3.2 無網(wǎng)絡(luò)環(huán)境

四、產(chǎn)品流程圖

4.1 登錄/注冊流程

4.2 用戶約車流程

4.3 支付流程

五、產(chǎn)品頁面流程圖

六、頁面詳細(xì)說明

6.1 主頁面

（1）頁面名稱：主頁面

（2）頁面入口：登錄頁面、點(diǎn)擊app直接進(jìn)入

（3）頁面邏輯輯內(nèi)容及其交互詳細(xì)說明：

a.用戶頭像按鈕

點(diǎn)擊從左至右彈出側(cè)邊菜單

當(dāng)系統(tǒng)有新版本發(fā)布時(shí)，用戶頭像按鈕出現(xiàn)紅色圓點(diǎn)提示，點(diǎn)擊后圓點(diǎn)消失

b.服務(wù)城市欄

默認(rèn)為系統(tǒng)gps定位數(shù)據(jù)，點(diǎn)擊彈出菜單可手動切換城市。

彈出菜單頂端為空白文本框，點(diǎn)擊彈出鍵盤輸入，若系統(tǒng)有該城市數(shù)據(jù)則跳轉(zhuǎn)，若系統(tǒng)無該城市數(shù)據(jù)彈出“暫無結(jié)果”toast；下方列表全國城市按照字母正序從上往下排布，點(diǎn)擊城市名字頂端文本框自動填充、跳轉(zhuǎn)

c.消息管理頁面按鈕圖標(biāo)

點(diǎn)擊進(jìn)入消息管理界面

當(dāng)有新消息、系統(tǒng)提示時(shí)，消息管理頁面按鈕出現(xiàn)紅色圓點(diǎn)提示，點(diǎn)擊后圓點(diǎn)消失。

d．掃一掃頁面按鈕

點(diǎn)擊該按鈕，若用戶未開啟相機(jī)權(quán)限則詢問是否允許開啟權(quán)限，確認(rèn)開啟則跳轉(zhuǎn)手機(jī)設(shè)置界面；取消則返回主頁面

e.出行服務(wù)欄

從左往右拖動出行服務(wù)欄依次顯示快車、同時(shí)呼叫順風(fēng)車公交出租車金融服務(wù)禮乘專車拼車代駕豪華車等

初始狀態(tài)下所有文本標(biāo)簽均置灰，點(diǎn)擊某一個(gè)文本標(biāo)簽后該標(biāo)簽加粗加亮、置橙色，其余服務(wù)文本標(biāo)簽置灰。

f.定位按鈕
點(diǎn)擊則在地圖上定位當(dāng)前gps數(shù)據(jù)點(diǎn)

g．出行服務(wù)欄
從左往右依次顯示現(xiàn)在、預(yù)約、代叫、接送機(jī)、優(yōu)惠文本標(biāo)簽

h.行程起點(diǎn)文本框
默認(rèn)顯示當(dāng)前用戶位置

點(diǎn)擊該文本框進(jìn)入修改起點(diǎn)界面，頂端為文本框，手動輸入行程起點(diǎn)，若輸入無誤則自動填充起點(diǎn)文本框；若輸入有誤則提示“暫無結(jié)果，換個(gè)詞試試吧”

地址收藏欄顯示用戶以前選擇過的起點(diǎn)地址，按時(shí)間順序倒序排序

i.行程終點(diǎn)文本框
默認(rèn)顯示空白

點(diǎn)擊該文本框進(jìn)入輸入行程終點(diǎn)界面，頂端為文本框，手動輸入行程終點(diǎn)，若輸入無誤則自動填充起點(diǎn)文本框；若輸入有誤則提示“暫無結(jié)果，換個(gè)詞試試吧”

地址收藏欄顯示用戶以前選擇過的終點(diǎn)地址，按時(shí)間順序倒序排序

j.公告及福利頁面
默認(rèn)情況顯示置頂公告頂端部分內(nèi)容

向上滑動即可進(jìn)入下拉菜單頁面，新頁面完全覆蓋主頁面。

公告及福利頁面自上往下分為公告詳情、用戶會員等級、福利詳情三個(gè)部分

6.2 公告及福利頁面

（1）頁面名稱：公告及福利頁面

（2）頁面入口：主頁面

（3）頁面邏輯輯內(nèi)容及其交互詳細(xì)說明：

a.返回按鈕

點(diǎn)擊返回主頁面

b.公告展示欄

展示系統(tǒng)公告，按時(shí)間順序倒序排序

點(diǎn)擊查看詳情按鈕進(jìn)入按鈕上方對應(yīng)公告頁面

c.福利展示欄

點(diǎn)擊查看更多福利按鈕進(jìn)入相應(yīng)福利頁面

6.3 消息管理

（1）頁面名稱：從左往右、從上往下依次為主頁面、服務(wù)號詳情頁面、對話概覽頁面、消息設(shè)置頁面、對話詳情頁面

（2）頁面入口：主頁面、app外部推送

（3）頁面邏輯輯內(nèi)容及其交互詳細(xì)說明：

a.返回按鈕

點(diǎn)擊返回主頁面

b.消息管理設(shè)置頁面按鈕

點(diǎn)擊進(jìn)入消息管理設(shè)置頁面

c.界面切換欄

點(diǎn)擊服務(wù)號進(jìn)入服務(wù)號詳情頁面，同時(shí)該按鈕顯示黑色邊框、文本標(biāo)簽加粗加亮，另一個(gè)按鈕無變化

點(diǎn)擊對話進(jìn)入對話概要頁面，同時(shí)該按鈕顯示黑色邊框、文本標(biāo)簽加粗加亮，另一個(gè)按鈕無變化

d.服務(wù)號詳情區(qū)

展示服務(wù)號內(nèi)容，按時(shí)間倒序順序排序

點(diǎn)擊進(jìn)入相應(yīng)界面

e.清空未讀消息按鈕

若用戶有未查看的消息，則未查看消息欄上方顯示小紅點(diǎn)

點(diǎn)擊該按鈕將該頁面所有消息欄的紅點(diǎn)去掉，若該頁面無紅點(diǎn)則無變化。

f.對話概覽區(qū)域

點(diǎn)擊進(jìn)入相應(yīng)消息詳情頁面

6.4 出行頁面

（1）頁面名稱：從左往右、從上往下依次為主頁面、選擇服務(wù)頁面、等待接駕頁面、行程進(jìn)行頁面、行程結(jié)束頁面、支付頁面、評價(jià)頁面

（2）頁面入口：主頁面

（3）頁面邏輯輯內(nèi)容及其交互詳細(xì)說明：

1）選擇服務(wù)頁面（從左往右、從上往下）

a.返回按鈕

點(diǎn)擊返回主頁面

b.出行服務(wù)欄

點(diǎn)擊切換相應(yīng)服務(wù)界面

初始狀態(tài)下所有文本標(biāo)簽均置灰。當(dāng)點(diǎn)擊某文本標(biāo)簽時(shí)，被點(diǎn)擊標(biāo)簽加粗加亮且置橙色，其余標(biāo)簽無變化。

c.起點(diǎn)提示欄

時(shí)間文本加粗加亮、置橙；

數(shù)據(jù)從各地圖平臺調(diào)取、根據(jù)手機(jī)gps位置實(shí)時(shí)更新；

若用戶此時(shí)無網(wǎng)絡(luò)，則停止獲取數(shù)據(jù)，并彈出toast提示：“網(wǎng)絡(luò)不佳”。

d.終點(diǎn)提示欄

到達(dá)時(shí)間、路程、行駛時(shí)間加粗加亮、置橙色；

數(shù)據(jù)從各地圖平臺調(diào)取、根據(jù)手機(jī)gps位置實(shí)時(shí)更新；

若用戶此時(shí)無網(wǎng)絡(luò)，則停止獲取數(shù)據(jù)。

e.車型選擇欄

點(diǎn)擊切換不同車型

默認(rèn)字體置灰，點(diǎn)擊時(shí)該按鈕內(nèi)文本置黑并加粗提示

f.確認(rèn)呼叫按鈕

點(diǎn)擊系統(tǒng)后臺生成訂單發(fā)送至司機(jī)端；

點(diǎn)擊跳轉(zhuǎn)至行程中頁面

2）等待接駕頁面（從左往右、從上往下）

a.返回按鈕

點(diǎn)擊返回主頁面，并在主頁面地圖頂端顯示訂單概覽框，點(diǎn)擊該框可返回等待接駕頁面；

b.車輛詳情框

距離、所需時(shí)間文本加粗加亮、置橙色；

數(shù)據(jù)從各地圖平臺調(diào)取、根據(jù)手機(jī)gps位置實(shí)時(shí)更新；

若用戶此時(shí)無網(wǎng)絡(luò)，則停止獲取數(shù)據(jù)，并彈出toast提示“網(wǎng)絡(luò)不佳”

c.車輛信息文本框

調(diào)取后臺數(shù)據(jù)庫顯示

d.司機(jī)信息文本框

調(diào)取后臺數(shù)據(jù)庫顯示

e.發(fā)送消息按鈕

點(diǎn)擊進(jìn)入對話詳情頁面

若司機(jī)發(fā)來消息用戶未點(diǎn)擊，則在該按鈕上顯示紅色數(shù)字圓點(diǎn)，數(shù)字為未讀信息條數(shù)；

用戶點(diǎn)擊該按鈕后紅點(diǎn)消失

f.通話按鈕

點(diǎn)擊撥打司機(jī)號碼

若用戶未授權(quán)則彈出相應(yīng)授權(quán)提示

g.取消訂單

點(diǎn)擊彈出相應(yīng)文案（是否取消）toast提示

當(dāng)用戶點(diǎn)擊toast提示中的是，取消該訂單返回主頁面，并在系統(tǒng)后臺對該訂單狀態(tài)做相應(yīng)處理；

當(dāng)用戶點(diǎn)擊toast提示中的否，返回等待接駕頁面；

3）行程中頁面（從左往右、從上往下）

a.行程詳情框

距離、所需時(shí)間文本加粗加亮、置橙色；

數(shù)據(jù)從各地圖平臺調(diào)取、根據(jù)手機(jī)gps位置實(shí)時(shí)更新；

若用戶無網(wǎng)絡(luò)，則停止獲取數(shù)據(jù)。（后臺激活某種安全措施？）

b.司機(jī)詳情框

調(diào)取后臺數(shù)據(jù)庫顯示

c.發(fā)送信息按鈕

點(diǎn)擊跳轉(zhuǎn)至對話詳情頁面

d.撥打按鈕

點(diǎn)擊撥打司機(jī)電話

e.行程分享按鈕

點(diǎn)擊該按鈕后，跳轉(zhuǎn)渠道選擇頁面（微信、短信、qq），選擇并點(diǎn)擊確認(rèn)發(fā)送行程信息

f.緊急求助按鈕

點(diǎn)擊按鈕后啟動錄音功能，錄音結(jié)束后上傳至后臺；

發(fā)送行程信息至用戶預(yù)設(shè)緊急聯(lián)系人，若用戶沒有設(shè)置，彈出設(shè)置窗口。

g.交通上報(bào)按鈕

點(diǎn)擊彈出相應(yīng)頁面，用戶填寫點(diǎn)擊確認(rèn)上傳后上傳信息至后臺數(shù)據(jù)庫，并對實(shí)時(shí)路況進(jìn)行更新。

4）行程結(jié)束頁面（從左往右、從上往下）

a.費(fèi)用疑問按鈕

點(diǎn)擊跳轉(zhuǎn)車費(fèi)計(jì)算界面

b.優(yōu)惠券按鈕

該按鈕文本加粗加亮，置橙色

若用戶錢包內(nèi)適用于本次行程的優(yōu)惠卷，顯示有可用優(yōu)惠卷，點(diǎn)擊進(jìn)入優(yōu)惠券頁面選擇使用

若用戶錢包內(nèi)沒有適用于本次行程的優(yōu)惠券，則顯示無可用優(yōu)惠卷，點(diǎn)擊進(jìn)入優(yōu)惠券頁面查看

c.支付按鈕

點(diǎn)擊跳轉(zhuǎn)至支付頁面

點(diǎn)擊后臺對該訂單狀態(tài)進(jìn)行更新

5）支付頁面（從左往右、從上往下）

a.投訴按鈕

點(diǎn)擊進(jìn)入客服頁面，并給出相應(yīng)文案提示開始投訴流程

b.司機(jī)詳情欄

調(diào)取后臺數(shù)據(jù)庫顯示

c.通話按鈕

點(diǎn)擊撥打司機(jī)電話

d.車費(fèi)詳情區(qū)

調(diào)取后臺數(shù)據(jù)庫顯示

e.支付方式選擇按鈕

三種支付方式按鈕為單選按鈕組,初始狀態(tài)下所有圓點(diǎn)為灰色，點(diǎn)擊任一圓點(diǎn)則置黑，其余圓點(diǎn)置灰。

當(dāng)用戶再次點(diǎn)擊另一圓點(diǎn)時(shí)，被點(diǎn)擊圓點(diǎn)置黑，其余置灰。

f.支付方式按鈕

若用戶沒有選擇支付方式，則彈出toast提示“請選擇支付方式”

當(dāng)用戶選擇支付方式并點(diǎn)擊該按鈕時(shí)，執(zhí)行相應(yīng)支付流程，支付成功后跳轉(zhuǎn)至評價(jià)頁面；

若支付失敗，返回支付頁面。

6）評價(jià)頁面（從左往右、從上往下）

a.星級欄

給所有星星從左往右編號一至五，初始狀態(tài)下所有星星置灰。

當(dāng)用戶點(diǎn)擊星星時(shí)，編號小于等于被點(diǎn)擊星星的置橙色，其余星星無變化

b.評價(jià)

用戶點(diǎn)擊后文本加粗加亮，再次點(diǎn)擊返回原樣。

c.評價(jià)文本框

初始狀態(tài)下顯示“其他想說的（將匿名延遲告知司機(jī)）”，置灰

點(diǎn)擊該文本框后彈出鍵盤，彈出鍵盤狀態(tài)下點(diǎn)擊空白區(qū)域彈回鍵盤。

d.提交按鈕

點(diǎn)擊提交所選星星編號、所選詞語、文本框內(nèi)容到后臺數(shù)據(jù)庫

點(diǎn)擊后跳轉(zhuǎn)至主頁面

七、總結(jié)和感悟

通過這段時(shí)間在網(wǎng)上對資料的閱讀和實(shí)際的探索，發(fā)現(xiàn)滴滴能成為行業(yè)龍頭絕對不是那么簡單，這個(gè)產(chǎn)品本身也并不是我們?nèi)粘Ｊ褂玫拇蜍囓浖?，它從政策、技術(shù)、科技幾大方面已經(jīng)做好了走向全球、占領(lǐng)未來的打算。那么也以個(gè)人的角度提出一些優(yōu)化的建議：

• 首頁出行服務(wù)欄添加手動排序功能，打開時(shí)默認(rèn)為上一次用戶選擇的出行服務(wù)類型。這樣可以讓用戶基于自己的場景把常用的功能放到首頁，既縮短了操作的時(shí)間，又增加了用戶粘性
• 在消息設(shè)置頁面的新消息提醒按鈕是單向的，如果用戶是基于信息推送太多的前提進(jìn)入此頁面但并不能關(guān)閉提醒功能，建議改為雙向。
• 經(jīng)過這次的疫情，個(gè)人覺得電商行業(yè)會在后面的日子里加速發(fā)展，所以就未來發(fā)展趨勢的角度而言，拓展新業(yè)務(wù)可以嘗試往這方面靠攏，滴滴跑腿、滴滴運(yùn)送這種類型的功能拓展是比較有潛力的。

歷時(shí)一個(gè)月終于嘗試著產(chǎn)出一份文檔，但是只關(guān)注了快車一個(gè)業(yè)務(wù)，而且一些子頁面的原型和邏輯也沒有羅列、分析到位。覺得難度最大的是出行流程，很多頁面因?yàn)榻换サ脑驘o法到app上翻看，所以很多都是百度去看別人的截圖，再結(jié)合自己使用時(shí)的記憶，難免會出現(xiàn)信息的延時(shí)和不準(zhǔn)確。以后在做類似的工作時(shí)一定要先有一個(gè)清晰的框架再動手去做，這樣不僅能提升工作效率，還避免為了補(bǔ)全遺漏的某個(gè)頁面而降低工作效率。

本文由 @sky0247 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議