武林網web開發網為大家整理了這篇搞定移動支付app ui/ux界面設計的幾個技巧分享，如果這篇文章在您的工作或學習中有幫助，歡迎常回來看看哦，更多精彩的教程請訪問我們的主頁,以下是教程瀏覽：
目前，在大部分互聯網流量中移動設備流量占據主導地位。2017年，移動用戶在整個互聯網的用戶中總數占比達到52％左右。如果你沒有針對移動端的網站或應用進行優化，那么你的成交量效果一定不夠理想。
以下我我們提供了4個小技巧來幫助你設計app支付頁面。當然，這些建議不可能適用于所有類型的在線商店，因為大家銷售的產品各有區別。如果你想要提升你的網站轉換率，那么這些技巧一定能夠讓你有所收獲。
從產品頁面到支付，整個流程應該給人一種操作簡單的感覺。這意味著當訪客點擊“支付”CTA時，如果需要的話，用戶可以輕松訪問并編輯訂單。
設計一個可編輯的購物車，用戶可以更改商品數量，尺寸，顏色，款式等等。以上這些操作都應該可以通過幾個點擊動作完成。
不要增加用戶購買阻力或使支付過程變得繁瑣。用戶的想法反復無常，你要盡量把購買阻力降低到零，提高用戶購買幾率。
讓我們看一下Yummygum的這個設計示例，它是一個機票訂單支付頁面。用戶可以在頁面上輕松地增加或減少機票數量，以及選擇機票的日期和起飛時間。
請注意它的界面元素是如何設計交互的，設計師使用大方塊和豐富多彩的亮色來提示微交互，這個設計非常適合移動設備。
除此之外，你也可以在Olia Gozha設計的購物車頁面中找到一些靈感。
在支付之前，界面會再次顯示購買的商品數量和價格。箭頭圖標使這里的交互特別明顯，用戶一下就能明白這個圖標是可點擊的。
另外，思考一下，顧客在購買商品之前可能想編輯訂單的哪些選項。在最終支付前向他們展示訂單里的商品詳情，并為其提供訪問權限來編輯訂單。
這樣設計能有效獲取買家的信任，并確保他們真正想要購買的心理。
在桌面端或筆記本電腦上處理付款很簡單。通常你可以拿起你的信用卡并輸入數字即可，但在智能手機上就沒那么方便了。
移動端的鍵盤非常輕便，但它們無法與完整的桌面鍵盤相比。因此，你需要讓支付流程更簡單，最好是只需幾次點擊即可完成支付。
如何才能實現這種效果？通過鏈接支付并將其保存在顧客的帳戶中。
每當顧客購買商品的時候，詢問他們是否要保存當前的付款方式。然后，你可以創建一個頁面，讓買家可以在信用卡，PayPal賬戶或他們過去使用的任何付款方式之間進行選擇。
使用這種鏈接支付的界面，當然越簡單更好。但是也有設計師想為用戶分享有關支付方式的細節，以確認賬號是否正確，這也是可以的。
以Vishnu Prasad的這種設計為例，它展示了如何使用保存的信用卡號碼來查看支付界面。
從個人來講，我不喜歡將這些數據清晰地展示在界面中，這也是我對這個UI唯一的疑慮。如果我是這個設計師，我會將這些數據信息設置默認為隱藏，單擊就會顯示或隱藏。但這個設計的重點就在于買家可以在支付前查看支付細節。
當不是每個顧客都喜歡這樣做，你需要設計一個安全的表格來獲取信用卡信息。Murat Mutlu的這個例子是一個非常簡潔的移動支付界面，只使用合適的字段來完成該過程。
實際上，我喜歡這種風格的支付流程，因為它減少了頁面上的字段總數，整體簡潔明了。
這實際上也是用戶體驗的一個大趨勢，作為設計師，我們應該進一步研究它。
無論是標簽，面包屑導航還是圓形統計圖，它們都可以用作進度提示。
這些進度提示可以引導用戶完成支付流程，告訴他們什么時候可以完成所有操作。這聽起來可能很簡單，但優化支付頁面的流程并不容易。
我們一起欣賞下面這個精美的支付界面。
它的CTA按鈕隨著頁面進行切換，因此它可以幫助用戶流暢地完成整個支付過程。
每完成一個步驟，步驟后都會有一個完成標記，這是一個讓買家知道他們離完成支付更近一步的視覺提示。你也可以使用圖標，彈出文本，或像上面示例中的填充氣泡來表示步驟完成進度。
設計師Steven Hanley有一個很酷的用戶支付界面，它主要依靠點和隱藏頁面元素的簡單性。
這些隱藏的部分包含之前支付過程中的信息。一旦完成操作，它們就會像手風琴菜單一樣自動隱藏。
通過這種設計，你可以運行非常特定類型的UI / UX效果。但是整個支付過程都是通過相同的最終目標來優化的：明確買家支付流程的每一步。
如果不知道如何著手設計進度提示，就試著多瀏覽一些進度條設計，看看哪些是你喜歡的。
我總是推薦這款桌面風格的電子商務支付界面，因為它們如此與眾不同。你只需要找到一個與你的移動界面相匹配的進度樣式，就能參考使用了。
在買家最終點擊“購買”按鈕之前，他們心中通常會有一些猶豫。你可以通過提供一個最終確認頁面，對他們的訂單進行完整的總結，讓買家放心。這在移動設備上特別方便，因為瀏覽器沒有簡單的選項卡，沒有鼠標，使用小屏幕查看訂單更加困難。
設計一個最終確認頁面其實很簡單。你只需按商品的價格，運費，稅費和總費用列出一個總訂單。當然，你也可以包含預計發貨日期和與產品交付相關的其他細節。
Designoholic做出的這個設計，就很好地向我們展示了如何在一個頁面中總結商品的所有信息。
當然，這并不是最完美的設計，但它證明了極簡主義也可以很好地應用于移動端的支付確認頁面。
對于諸如數字下載或預約之類的非實物產品也是如此。
在調度頁面上，你可以通過顯示預定的時間，日期，地點和其他相關信息來完成訂單。以下這個設計出自由湯姆·甘布林之手。
在設計最終確認頁面之前，設計師需要知道買家希望在這個頁面上看到哪些信息。學會換位思考，想一想你在這個確認頁面上顯示什么內容才能使買家感覺放心。
如果他們在購買時感覺舒適和安全，那么他們就會毫不猶豫地按下購買按鈕。
如果你從來沒有設計過手機端應用，別因為它是個全新的領域就膽怯，要勇于嘗試！有了以上這些建議，我相信你可以設計出一個直觀的，漂亮的，可交互的移動app支付頁面。
原文作者：Jake Rocheleau
原文鏈接：https://designmodo.com/mobile-checkout-screens/
內容由Mockplus團隊翻譯整理，僅供學習交流。
搞定移動支付app ui/ux界面設計的幾個技巧分享文章就講到這里，歡迎瀏覽本站的其它內容，點擊這里返回首頁
新聞熱點
疑難解答
