中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

首先把成此次原型設計的亮點擺出來：

接下來我們正式的開始梳理攜程APP端訂單評價頁的流程。首先我們應該有一個認知，訂單評價頁之前的入口，應該就是個人中心-我的訂單，這個訂單列表頁。在訂單列表頁中的每一個訂單項，點擊評價，會彈出來相應訂單的訂單評價頁。針對這兩個頁面的信息，我簡單的梳理了一個圖，里面包含了兩個頁面的信息。如下圖所示。

一、訂單列表頁

訂單列表頁，像是數據庫的數據展示。訂單信息欄清晰的向用戶展示關鍵的訂單信息，所有的訂單信息字段的展示，目的都是讓用戶想起來這個訂單是自己如何使用的，所以會有名稱、時間、酒店位置、床型、價格等信息。訂單操作功能，是用戶如何對訂單數據庫更便捷的增刪改。而篩選功能的出現，是因為當用戶訂單數量很多的時候，第一時間無法在列表頁找到想要的那個訂單，而增加的功能點。

原型實現

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

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

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

具體的實現方法如下，將四個訂單全選，轉為動態面板，命名為“內容”。再新建一個動態面板，命名為“邊框”，大小為315*490，然后把“內容”面板放在“邊框”里面，具體的嵌套關系如下圖所示。

接下來，我們為“邊框”面板添加交互案例，選擇“拖動時”添加交互案例，選擇“移動”交互，勾選“內容”動態面板，原因是我們要對“內容”動態面板里面的內容進行拖動操作。之后勾選垂直移動并設置移動的上下邊界，上邊界的值為0，下邊界的值為“邊框”動態面板的高度。這里需要增加一個“邊框”動態面板高度的函數，編輯值里面首先增加一個局部變量，元件“邊框”，隨后調用局部變量，并取其height方法。具體的方法如下圖所示。

我們保存之后運行，實現訂單列表頁的拖動操作就實現了。

二、訂單評價頁

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

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

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

三是文字評價，這是訂單評價最基本的功能點，通過用戶文字直觀的傳達用戶的感受，方便其他用戶了解真實的情況。文字的質量肯定和字數有一定的關系，文字太少無法讓其他用戶了解詳情。所以各類APP就會各顯其通，詳盡辦法讓用戶多寫一些字，攜程的辦法是根據字數，給出相應的積分獎勵。最少評價5字；5-49字，10分獎勵；50字以上，30分獎勵。這個前端的字數統計也會是這個原型的亮點。

原型實現

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

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

最后，我們來實現最難的一塊內容，就是字數評價，我們要想實現最上面動圖實現的那樣，就必須對Axure的函數用法有一些了解。這個原型的字數評價，最核心的就是如何通過函數表示文本框里面的字段長度。我們可以在局部變量里面的元件文字，指定到文本框，再通過全局變量中的length方法調用，就可以實現。

下面我們說一下具體的操作。首先搭好框架，這個字數評價功能，需要一個文本框和一個提示字段，提示字段會根據文本框內字段長度的不同，提示出不同的字段類型。

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

這其中注意一點的是，上述的“x”，需要再從元件庫拖出來一個文本標簽，我們需要對這個標簽的值進行動態修改，實現字數動態統計。字段提示的動態面板結構，如下圖所示。

接下來，我們就要對文本框增加交互案例，我們選擇“文本改變時”，首先增加條件，根據元件長度，展示“字段提示”動態面板的不同狀態。具體的操作如下圖所示。

然后我們為之前在“1-4”狀態和“5-14”狀態中，分別添加的兩個文本標簽添加函數。以“1-4”狀態的舉例，我們在“文本改變時”的case1：元件文字0<x<5這個案例下，增加交互。選擇設置文本，然后勾選在“1-4”狀態中的文本標簽，當時我命名為了“字”。勾選了之后在下面選擇值，增加函數。

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

具體的步驟如下圖所示。同理，“5-14”狀態的字段也是和上述的方法一樣，只不過全局變量是要用15-LVAR1.length。保存之后運行，我們的字數評價功能點就實現了。

但是這還沒有做完，因為評價信息的數據價值性，如果提交的是null字段，對于評價來說毫無意義，所以在提交button這塊，要做一個前端的校驗。當評分模塊沒有全部填好評分or沒有選擇出游類型or字數評價少于5個字，這三種情況都不可以提交評價信息。具體的校驗邏輯如下圖所示。

同理，對于每一種評價維度的確實，在校驗的時候，都應該反饋給用戶相應的字段信息，用于給用戶提示。具體的做法就是彈出一個toast浮層，浮層上給出不同的字段提示，這塊可以用動態面板實現，具體的動態面板架構如下圖所示。這塊不是很難實現，就不再花篇幅贅述了。

資源共享

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

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

作者：Mitsuizq，微信公眾號：Mitsuizq

本文由 @Mitsuizq 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議