攜程APP最近幾次迭代，在交互和用戶體驗(yàn)這兩個(gè)方面下了很大的功夫，現(xiàn)在使用起來可以說是極其愉悅。下面我們就以攜程APP端訂單評(píng)價(jià)頁作為切入點(diǎn)，來具體的看一看攜程前端的展示。

首先把成此次原型設(shè)計(jì)的亮點(diǎn)擺出來：

接下來我們正式的開始梳理攜程APP端訂單評(píng)價(jià)頁的流程。首先我們應(yīng)該有一個(gè)認(rèn)知，訂單評(píng)價(jià)頁之前的入口，應(yīng)該就是個(gè)人中心-我的訂單，這個(gè)訂單列表頁。在訂單列表頁中的每一個(gè)訂單項(xiàng)，點(diǎn)擊評(píng)價(jià)，會(huì)彈出來相應(yīng)訂單的訂單評(píng)價(jià)頁。針對(duì)這兩個(gè)頁面的信息，我簡單的梳理了一個(gè)圖，里面包含了兩個(gè)頁面的信息。如下圖所示。

一、訂單列表頁

訂單列表頁，像是數(shù)據(jù)庫的數(shù)據(jù)展示。訂單信息欄清晰的向用戶展示關(guān)鍵的訂單信息，所有的訂單信息字段的展示，目的都是讓用戶想起來這個(gè)訂單是自己如何使用的，所以會(huì)有名稱、時(shí)間、酒店位置、床型、價(jià)格等信息。訂單操作功能，是用戶如何對(duì)訂單數(shù)據(jù)庫更便捷的增刪改。而篩選功能的出現(xiàn)，是因?yàn)楫?dāng)用戶訂單數(shù)量很多的時(shí)候，第一時(shí)間無法在列表頁找到想要的那個(gè)訂單，而增加的功能點(diǎn)。

原型實(shí)現(xiàn)

首先我們梳理一下原型的思路，訂單列表頁面，里面的訂單信息肯定不止有一個(gè)，所以需要實(shí)現(xiàn)向下或者向上拖動(dòng)頁面的操作。其余的，就是注意好原型的寬高比了。

我們首先搭好一個(gè)架子，APP端的外邊框尺寸，我們選擇330*584這個(gè)大小，其次添加好相應(yīng)的top字段和top返回button。然后我們添加四個(gè)訂單（為了保證一個(gè)版面展示不完，實(shí)現(xiàn)拖動(dòng)的操作）。

之后就要為這四個(gè)訂單添加交互，首先我們理清一下向上向下拖動(dòng)操作的思路。我們知道動(dòng)態(tài)面板里面有一個(gè)交互案例叫“拖動(dòng)時(shí)”，所以我們的拖動(dòng)操作是在動(dòng)態(tài)面板的基礎(chǔ)上制作的。我們建立兩個(gè)動(dòng)態(tài)面板，兩個(gè)面板里外嵌套，外面一層當(dāng)做邊框，里面一層當(dāng)做內(nèi)容，我們拖動(dòng)邊框是，讓內(nèi)容面板增加上下拖動(dòng)的交互案例，就可以實(shí)現(xiàn)拖動(dòng)操作了。

具體的實(shí)現(xiàn)方法如下，將四個(gè)訂單全選，轉(zhuǎn)為動(dòng)態(tài)面板，命名為“內(nèi)容”。再新建一個(gè)動(dòng)態(tài)面板，命名為“邊框”，大小為315*490，然后把“內(nèi)容”面板放在“邊框”里面，具體的嵌套關(guān)系如下圖所示。

接下來，我們?yōu)椤斑吙颉泵姘逄砑咏换グ咐x擇“拖動(dòng)時(shí)”添加交互案例，選擇“移動(dòng)”交互，勾選“內(nèi)容”動(dòng)態(tài)面板，原因是我們要對(duì)“內(nèi)容”動(dòng)態(tài)面板里面的內(nèi)容進(jìn)行拖動(dòng)操作。之后勾選垂直移動(dòng)并設(shè)置移動(dòng)的上下邊界，上邊界的值為0，下邊界的值為“邊框”動(dòng)態(tài)面板的高度。這里需要增加一個(gè)“邊框”動(dòng)態(tài)面板高度的函數(shù)，編輯值里面首先增加一個(gè)局部變量，元件“邊框”，隨后調(diào)用局部變量，并取其height方法。具體的方法如下圖所示。

我們保存之后運(yùn)行，實(shí)現(xiàn)訂單列表頁的拖動(dòng)操作就實(shí)現(xiàn)了。

二、訂單評(píng)價(jià)頁

具體的訂單評(píng)價(jià)頁，評(píng)價(jià)的模塊分為三大類。一是酒店打分，評(píng)價(jià)的維度根據(jù)“房間衛(wèi)生”、“周邊環(huán)境”、“酒店服務(wù)”、“設(shè)備設(shè)施”，評(píng)價(jià)的方式就是給每一個(gè)維度一個(gè)分值，分值從1-5分；二是出游類型選擇，從攜程提供的商旅出游、獨(dú)自旅行、朋友出游、情侶出游中選取一個(gè)，如果沒有用戶想要的分類，還可以選擇其他。

其他這塊有一點(diǎn)值得討論，有些APP的交互中，選擇“其他”之后會(huì)彈出一個(gè)文本框，讓用戶輸入具體的字段。這樣的做法值得商榷，從用戶的角度上看，前面幾個(gè)選項(xiàng)已經(jīng)沒有自己的選擇了，用戶的耐心已經(jīng)打了折扣，當(dāng)用戶選擇其他之后依然讓用戶去填寫的話，可能用戶就會(huì)選擇退出此次評(píng)價(jià)操作了。

從網(wǎng)站的角度看，前面幾項(xiàng)已經(jīng)極大地覆蓋了用戶可能的出行目的，可能前四項(xiàng)已經(jīng)覆蓋了95%，最后的其他事剩下的5%，95%的出游類型可以通過四個(gè)明確的標(biāo)簽進(jìn)行存儲(chǔ)，方便之后的數(shù)據(jù)分析，而就是這其他的5%，即使用戶輸入了信息，網(wǎng)站存儲(chǔ)起來之后還需進(jìn)行自然語言處理，才能轉(zhuǎn)化成有價(jià)值的數(shù)據(jù)信息，這樣的成本和回報(bào)比例就會(huì)變得很低。所以此次原型制作選擇的交互是，選擇“其他”之后，不彈出文本框。

三是文字評(píng)價(jià)，這是訂單評(píng)價(jià)最基本的功能點(diǎn)，通過用戶文字直觀的傳達(dá)用戶的感受，方便其他用戶了解真實(shí)的情況。文字的質(zhì)量肯定和字?jǐn)?shù)有一定的關(guān)系，文字太少無法讓其他用戶了解詳情。所以各類APP就會(huì)各顯其通，詳盡辦法讓用戶多寫一些字，攜程的辦法是根據(jù)字?jǐn)?shù)，給出相應(yīng)的積分獎(jiǎng)勵(lì)。最少評(píng)價(jià)5字；5-49字，10分獎(jiǎng)勵(lì)；50字以上，30分獎(jiǎng)勵(lì)。這個(gè)前端的字?jǐn)?shù)統(tǒng)計(jì)也會(huì)是這個(gè)原型的亮點(diǎn)。

原型實(shí)現(xiàn)

首先我們要實(shí)現(xiàn)前面兩個(gè)簡單一些的原型設(shè)計(jì)，用戶打分部分和出游類型選擇部分。這兩塊用到的原理都是一樣的，通過動(dòng)態(tài)面板的狀態(tài)切換，實(shí)現(xiàn)不同的選擇狀態(tài)切換。比如我們拿出游類型舉例，出游類型里面總共有五類：商旅出差、獨(dú)自旅行、朋友出游、情侶出游、其他，這五類，所以我們先建立一個(gè)動(dòng)態(tài)面板，里面增加五個(gè)state，分別命名為這五類。此外再加上一個(gè)state命名為“初始”，顧名思義，是在用戶未點(diǎn)擊任何button的時(shí)候的狀態(tài)。具體的結(jié)構(gòu)如下圖所示。

每個(gè)具體的state，如“商旅出差”，需要把商旅出差這個(gè)button的樣式改成與其他button不同，再通過添加交互案例“鼠標(biāo)單擊時(shí)”，把每個(gè)state連接起來。這樣出游類型功能，及打分功能就都可以實(shí)現(xiàn)了。

最后，我們來實(shí)現(xiàn)最難的一塊內(nèi)容，就是字?jǐn)?shù)評(píng)價(jià)，我們要想實(shí)現(xiàn)最上面動(dòng)圖實(shí)現(xiàn)的那樣，就必須對(duì)Axure的函數(shù)用法有一些了解。這個(gè)原型的字?jǐn)?shù)評(píng)價(jià)，最核心的就是如何通過函數(shù)表示文本框里面的字段長度。我們可以在局部變量里面的元件文字，指定到文本框，再通過全局變量中的length方法調(diào)用，就可以實(shí)現(xiàn)。

下面我們說一下具體的操作。首先搭好框架，這個(gè)字?jǐn)?shù)評(píng)價(jià)功能，需要一個(gè)文本框和一個(gè)提示字段，提示字段會(huì)根據(jù)文本框內(nèi)字段長度的不同，提示出不同的字段類型。

具體來說，在字段長度為0時(shí)，會(huì)提示：至少5個(gè)字；字段長度1-4：會(huì)提示：加油！再寫x個(gè)字就可以獲得10積分；字段長度5-14，會(huì)提示：太棒了！再寫x個(gè)字就可以獲得30積分；字段長度大于15，會(huì)提示：棒極了！提交即可獲得30積分。所以我們根據(jù)字段長度的不同，把提示字段分成了4類，根據(jù)這樣的分類方法，我們建立一個(gè)動(dòng)態(tài)面板，里面放著這4類字段提示。

這其中注意一點(diǎn)的是，上述的“x”，需要再從元件庫拖出來一個(gè)文本標(biāo)簽，我們需要對(duì)這個(gè)標(biāo)簽的值進(jìn)行動(dòng)態(tài)修改，實(shí)現(xiàn)字?jǐn)?shù)動(dòng)態(tài)統(tǒng)計(jì)。字段提示的動(dòng)態(tài)面板結(jié)構(gòu)，如下圖所示。

接下來，我們就要對(duì)文本框增加交互案例，我們選擇“文本改變時(shí)”，首先增加條件，根據(jù)元件長度，展示“字段提示”動(dòng)態(tài)面板的不同狀態(tài)。具體的操作如下圖所示。

然后我們?yōu)橹霸凇?-4”狀態(tài)和“5-14”狀態(tài)中，分別添加的兩個(gè)文本標(biāo)簽添加函數(shù)。以“1-4”狀態(tài)的舉例，我們?cè)凇拔谋靖淖儠r(shí)”的case1：元件文字0<x<5這個(gè)案例下，增加交互。選擇設(shè)置文本，然后勾選在“1-4”狀態(tài)中的文本標(biāo)簽，當(dāng)時(shí)我命名為了“字”。勾選了之后在下面選擇值，增加函數(shù)。

我們首先增加局部變量，文本框的元件文字，指的就是文本框的字段，在接下來的全局變量中，我們選擇剛才添加的局部變量，然后選擇length方法，指的就是文本框的字段長度。由于我們的提示信息里面的字?jǐn)?shù)，是“還差x字就可以獲得10積分”，所以我們要用5減去LVAR1.length即可。

具體的步驟如下圖所示。同理，“5-14”狀態(tài)的字段也是和上述的方法一樣，只不過全局變量是要用15-LVAR1.length。保存之后運(yùn)行，我們的字?jǐn)?shù)評(píng)價(jià)功能點(diǎn)就實(shí)現(xiàn)了。

但是這還沒有做完，因?yàn)樵u(píng)價(jià)信息的數(shù)據(jù)價(jià)值性，如果提交的是null字段，對(duì)于評(píng)價(jià)來說毫無意義，所以在提交button這塊，要做一個(gè)前端的校驗(yàn)。當(dāng)評(píng)分模塊沒有全部填好評(píng)分or沒有選擇出游類型or字?jǐn)?shù)評(píng)價(jià)少于5個(gè)字，這三種情況都不可以提交評(píng)價(jià)信息。具體的校驗(yàn)邏輯如下圖所示。

同理，對(duì)于每一種評(píng)價(jià)維度的確實(shí)，在校驗(yàn)的時(shí)候，都應(yīng)該反饋給用戶相應(yīng)的字段信息，用于給用戶提示。具體的做法就是彈出一個(gè)toast浮層，浮層上給出不同的字段提示，這塊可以用動(dòng)態(tài)面板實(shí)現(xiàn)，具體的動(dòng)態(tài)面板架構(gòu)如下圖所示。這塊不是很難實(shí)現(xiàn)，就不再花篇幅贅述了。

資源共享

文章很長，有的地方也很啰嗦，如果你看到這里還沒有退出，很感謝你的耐心。

百度網(wǎng)盤鏈接: https://pan.baidu.com/s/1pK8Skpt 密碼：t4je

作者：Mitsuizq，微信公眾號(hào)：Mitsuizq

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

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