攜程最近的迭代在交互和用戶體驗(yàn)方面付出了很多努力，現(xiàn)在使用起來非常愉快。下面我們將攜程APP訂單評(píng)估頁面作為切入點(diǎn)，專門查看攜程前端顯示屏。

首先介紹這個(gè)原型設(shè)計(jì)的亮點(diǎn)：

接下來，我們正式開始梳理攜程APP訂單評(píng)估頁面的過程。首先，我們應(yīng)該有一個(gè)認(rèn)知，在訂單評(píng)估頁面之前的條目，應(yīng)該是個(gè)人中心 - 我的訂單，這個(gè)訂單列表頁面。在訂單列表頁面中的每個(gè)訂單項(xiàng)目上，單擊評(píng)級(jí)，將彈出相應(yīng)訂單的訂單評(píng)估頁面。有關(guān)這兩頁的信息，我只是梳理了一張包含兩頁信息的圖片。如下所示。

一、訂單列表頁

訂單列表頁面，就像數(shù)據(jù)庫的數(shù)據(jù)顯示一樣。訂單信息欄清楚地向用戶顯示關(guān)鍵訂單信息。顯示所有訂單信息字段。目的是讓用戶考慮自己如何使用訂單，因此會(huì)有姓名，時(shí)間，酒店位置，床型，價(jià)格。和其他信息。訂單操作功能是用戶如何更方便地添加，刪除和修改訂單數(shù)據(jù)庫。出現(xiàn)篩選功能是因?yàn)楫?dāng)用戶訂單數(shù)量很大時(shí)，第一次無法在列表頁面上找到所需的訂單，以及添加的功能點(diǎn)。

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

首先，我們理清原型的概念，訂單列表頁面，必須有多個(gè)訂單信息，因此您需要實(shí)現(xiàn)向下或向上拖動(dòng)頁面的操作。其余的是要注意原型的縱橫比。

我們先設(shè)置一個(gè)架子，APP的外邊框尺寸，我們選擇尺寸為330 * 584，然后添加相應(yīng)的頂部字段和頂部返回按鈕。然后我們添加四個(gè)命令（確保無法完成布局，實(shí)現(xiàn)拖動(dòng)操作）。

之后，我們需要為這四個(gè)訂單添加交互。首先，讓我們澄清一下上下拖動(dòng)的想法。我們知道動(dòng)態(tài)面板中存在一個(gè)名為“drag;”的交互案例，因此我們的拖動(dòng)操作基于動(dòng)態(tài)面板。我們創(chuàng)建了兩個(gè)動(dòng)態(tài)面板，兩個(gè)面板嵌套在內(nèi)部和外部，外層用作邊框，內(nèi)層用作內(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)容”。創(chuàng)建一個(gè)名為“Border”的新動(dòng)態(tài)面板，大小為315 * 490，然后將“Content”面板放在“Border”內(nèi)，具體的嵌套關(guān)系如下所示。

接下來，我們?yōu)椤癇order”面板添加一個(gè)交互案例，選擇“Drag”，添加一個(gè)交互案例，選擇“Move”，然后選中“Contents”動(dòng)態(tài)面板。原因是我們必須“內(nèi)容”。拖動(dòng)動(dòng)態(tài)面板的內(nèi)容。然后檢查垂直運(yùn)動(dòng)并設(shè)置運(yùn)動(dòng)的上下邊界。上邊界的值為0，下邊界的值為“邊界”;動(dòng)態(tài)面板的高度。在這里你需要添加動(dòng)態(tài)面板高度的“邊框”功能，首先在編輯值中添加一個(gè)局部變量，組件“border”，然后調(diào)用局部變量并獲取其高度方法。具體方法如下所示。

保存之后，我們可以實(shí)現(xiàn)訂單列表頁面的拖動(dòng)操作。

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

具體的訂單評(píng)估頁面，評(píng)估模塊分為三類。一，酒店評(píng)分，評(píng)價(jià)維度是基于“房間衛(wèi)生”，“周邊環(huán)境”，“酒店服務(wù)”，“設(shè)備設(shè)施”，評(píng)價(jià)方式是給每個(gè)維度一個(gè)分?jǐn)?shù)，分?jǐn)?shù)值來自1-5分;第二種是旅行類型。選擇攜程的商務(wù)旅行，獨(dú)自旅行，朋友和情侶之一。如果您沒有所需的類別，可以選擇其他類別。

其他人值得討論。在某些APP互動(dòng)中，選擇“其他”互動(dòng)。將彈出一個(gè)允許用戶輸入特定字段的文本框。這種方法值得商榷。從用戶的角度來看，以前的選項(xiàng)別無選擇。用戶的耐心已經(jīng)打了折扣。如果用戶在填寫其他選項(xiàng)后仍選擇離開用戶，則用戶可以選擇退出。進(jìn)行了評(píng)估。

從網(wǎng)站的角度來看，之前的項(xiàng)目已經(jīng)大大覆蓋了用戶可能的旅行目的地。也許前四項(xiàng)已覆蓋95％，最后剩余的項(xiàng)目為5％。 95％的旅行類型可以由四個(gè)明確定義。存儲(chǔ)標(biāo)簽用于以后的數(shù)據(jù)分析，這是另外5％。即使用戶輸入信息，也需要在自然語言之后處理網(wǎng)站以將其轉(zhuǎn)換為有價(jià)值的數(shù)據(jù)信息。成本和回報(bào)比率將變得非常低。因此，該原型選擇的交互是在選擇“其他”之后，不會(huì)彈出文本框。

第三是文本評(píng)估，這是訂單評(píng)估的最基本功能點(diǎn)。它通過用戶的文本直觀地傳達(dá)用戶的感受，方便其他用戶了解真實(shí)情況。文本的質(zhì)量必須與單詞的數(shù)量有一定的關(guān)系，太少的單詞不能讓其他用戶知道細(xì)節(jié)。因此，各種APP都會(huì)展示自己的，詳細(xì)的方法，供用戶寫出更多的單詞，攜程的方法是根據(jù)單詞的數(shù)量，給出相應(yīng)的積分獎(jiǎng)勵(lì)。至少5個(gè)字; 5 - 49個(gè)字，10個(gè)獎(jiǎng)勵(lì); 50字以上，30分獎(jiǎng)勵(lì)。這個(gè)前端的字?jǐn)?shù)也將是這個(gè)原型的亮點(diǎn)。

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

首先，我們需要實(shí)現(xiàn)前兩個(gè)簡(jiǎn)單的原型設(shè)計(jì)，用戶評(píng)分部分和旅行類型選擇部分。兩個(gè)塊中使用的原理是相同的，并且通過動(dòng)態(tài)面板的狀態(tài)切換實(shí)現(xiàn)不同的狀態(tài)切換。例如，我們拿出了巡演類型的例子。旅行類型有五種類型：商務(wù)旅行，單獨(dú)旅行，朋友旅行，情侶旅行，以及其他五個(gè)類別，因此我們首先創(chuàng)建一個(gè)動(dòng)態(tài)面板，其中添加了五個(gè)狀態(tài)，分別命名。對(duì)于這五個(gè)類別。此外，顧名思義，名為“Initial”的狀態(tài)是用戶未單擊任何按鈕時(shí)的狀態(tài)。具體結(jié)構(gòu)如下圖所示。

每個(gè)特定的狀態(tài)，如“商務(wù)旅行”，需要將商務(wù)旅行按鈕的樣式改為與其他按鈕不同，然后通過添加交互案例來連接每個(gè)狀態(tài)“l(fā)dquo;鼠標(biāo)點(diǎn)擊”可以實(shí)現(xiàn)這種類型的旅行類型功能以及評(píng)分功能。

最后，讓我們實(shí)現(xiàn)最困難的內(nèi)容，即對(duì)單詞數(shù)量的評(píng)估。如果我們想要實(shí)現(xiàn)頂級(jí)動(dòng)畫的實(shí)現(xiàn)，我們必須對(duì)Axure的功能使用有一些了解。該原型的核心是如何在文本框中表示字段長(zhǎng)度的功能。我們可以在局部變量中指定組件文本，將其分配給文本框，然后通過全局變量中的length方法調(diào)用它。

我們來談?wù)劸唧w的操作。首先設(shè)置框架，這個(gè)單詞計(jì)數(shù)評(píng)估函數(shù)，需要一個(gè)文本框和一個(gè)提示字段，提示字段會(huì)根據(jù)文本框中字段的長(zhǎng)度提示不同的字段類型。

具體來說，當(dāng)字段長(zhǎng)度為0時(shí)，它會(huì)提示：至少5個(gè)字;場(chǎng)長(zhǎng)1-4：會(huì)提示：加油！寫x字得10分;場(chǎng)長(zhǎng)5-14，會(huì)提示：太棒了！再寫30個(gè)字來獲得30分;該字段的長(zhǎng)度大于15，你會(huì)被提示：太棒了！提交30分。因此，我們根據(jù)字段的長(zhǎng)度將提示字段分為4類。根據(jù)這種分類方法，我們使用這4種類型的字段提示創(chuàng)建動(dòng)態(tài)面板。

需要注意的一點(diǎn)是，上述“x”需要從組件庫中拖動(dòng)文本標(biāo)簽。我們需要?jiǎng)討B(tài)修改此標(biāo)記的值，以實(shí)現(xiàn)對(duì)單詞數(shù)量的動(dòng)態(tài)統(tǒng)計(jì)。字段的動(dòng)態(tài)面板結(jié)構(gòu)提示，如下圖所示。

接下來，我們將在文本框中添加一個(gè)交互案例。我們選擇“l(fā)dquo;當(dāng)文本發(fā)生變化時(shí)，首先增加條件，根據(jù)組件的長(zhǎng)度，顯示“字段提示”&nd;動(dòng)態(tài)面板的不同狀態(tài)。具體操作如下圖所示。

然后，我們將功能添加到上一個(gè)“1-4”狀態(tài)和“5-14”中添加的兩個(gè)文本標(biāo)簽中。狀態(tài)。在狀態(tài)“1-4”的情況下，我們?cè)赾ase1的情況下添加了交互：文本改變中的組件文本0< x< 5。當(dāng)我將其命名為“word”時(shí)，選擇設(shè)置文本并檢查狀態(tài)為“1-4”的文本標(biāo)簽。檢查值后，選擇下面的值并增加功能。 < p值='' >

我們首先添加一個(gè)局部變量，文本框的組件文本，引用文本框的字段，在下一個(gè)全局變量中，我們選擇剛添加的局部變量，然后選擇length方法，它指的是字段文本框的長(zhǎng)度。由于我們的提示信息中的單詞數(shù)量，“x字的所有差異可以得到10分”，因此我們必須從LVAR1.length中減去5。

具體步驟如下圖所示。類似地，“5-14”狀態(tài)的字段與上述方法相同，除了全局變量是使用15-LVAR1.length。保存后，我們的單詞評(píng)估功能點(diǎn)被實(shí)現(xiàn)。

但是這還沒有完成，因?yàn)樵u(píng)估信息的數(shù)據(jù)值，如果提交空字段，則對(duì)評(píng)估沒有意義，所以在提交按鈕時(shí)，做一個(gè)前端驗(yàn)證。當(dāng)評(píng)分模塊未完全填寫分?jǐn)?shù)或未選擇旅行類型或字?jǐn)?shù)少于5個(gè)字時(shí)，在所有三種情況下都不能提交評(píng)估信息。具體驗(yàn)證邏輯如下圖所示。

出于同樣的原因，對(duì)于每個(gè)評(píng)估維度，在驗(yàn)證時(shí)，應(yīng)該將相應(yīng)的字段信息反饋給用戶以提示用戶。具體方法是彈出toast浮動(dòng)層，并在浮動(dòng)層上給出不同的字段提示。該塊可以通過動(dòng)態(tài)面板實(shí)現(xiàn)。具體的動(dòng)態(tài)面板結(jié)構(gòu)如下圖所示。這件作品并不難實(shí)現(xiàn)，也不會(huì)再花錢了。

　資源共享

文章很長(zhǎng)，有些地方很尷尬。如果您尚未看到退出，請(qǐng)感謝您的耐心等待。

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

« 如何在設(shè)計(jì)中使用Pantone的“紫外線”2018年？ | 當(dāng)按鈕顯示為灰色時(shí)，如何向用戶提供反饋？ »