注：本文作者主要提供了一些建議，關於如何去設計移動端的支付頁面，來幫助你留住使用者的心。如果你想要提公升你的**轉換率，那麼這個指南將是你邁向更大的移動客戶群體的第一步。
以下我提供了一些建議來幫助你設計移動端支付頁面，當然，這些建議不可能適用於所有型別的**商店，這一定程度上取決於你銷售的產品。
正確的**設計是提高轉換率，增加銷售額的有效方法。需要注意的是：設計師必須認真考慮**商店的使用者體驗原則，這對於移動端設計來說是非常重要的。
目前，在大部分網際網路流量中移動裝置流量佔據主導地位。 2017 年，移動使用者在整個網際網路的使用者中總數佔比達到52％左右。如果你沒有針對移動端的**或應用進行優化，那麼你的電子商務效果一定不夠理想。
如果你想要提公升你的**轉換率，那麼這個指南將是你邁向更大的移動客戶群體的第一步。
從產品頁面到支付，整個流程應該給人一種操作簡單的感覺。這意味著當訪客點選「支付」cta時，如果需要的話，使用者可以輕鬆訪問並編輯訂單。
設計乙個可編輯的購物車，使用者可以更改商品數量、尺寸、顏色、款式等等，以上這些操作都應該可以通過幾個點選動作完成。
不要增加使用者購買阻力或使支付過程變得繁瑣，使用者的想法反覆無常，你要盡量把購買阻力降低到零，提高使用者購買機率。
讓我們看一下yummygum的這個設計示例：它是乙個機票訂單支付頁面，使用者可以在頁面上輕鬆地增加或減少機票數量，以及選擇機票的日期和起飛時間。
請注意它的介面元素是如何設計互動的，設計師使用大方塊和豐富多彩的亮色來提示微互動，這個設計非常適合移動裝置。
除此之外，你也可以在olia gozha設計的購物車頁面中找到一些靈感。
在支付之前，介面會再次顯示購買的商品數量和**。箭頭圖示使這裡的互動特別明顯，使用者一下就能明白這個圖示是可點選的。
另外，思考一下：顧客在購買商品之前可能想編輯訂單的哪些選項？
在最終支付前向他們展示訂單裡的商品詳情，並為其提供訪問許可權來編輯訂單。這樣設計能有效獲取買家的信任，並確保他們真正想要購買的心理。
在桌面端或膝上型電腦上處理付款很簡單，通常你可以拿起你的信用卡並輸入數字即可，但在智慧型手機上就沒那麼方便了。
移動端的鍵盤非常輕便，但它們無法與完整的桌面鍵盤相比。因此，你需要讓支付流程更簡單，最好是只需幾次點選即可完成支付。
如何才能實現這種效果？
通過鏈結支付並將其儲存在顧客的帳戶中。每當顧客購買商品的時候，詢問他們是否要儲存當前的付款方式。然後，你可以建立乙個頁面，讓買家可以在信用卡，paypal賬戶或他們過去使用的任何付款方式之間進行選擇。
使用這種鏈結支付的介面，當然越簡單更好。但是也有設計師想為使用者分享有關支付方式的細節，以確認賬號是否正確，這也是可以的。
以vishnu prasad的這種設計為例：它展示了如何使用儲存的信用卡號碼來檢視支付介面。
從個人來講，我不喜歡將這些資料清晰地展示在介面中，這也是我對這個ui唯一的疑慮。如果我是這個設計師，我會將這些資料資訊設定預設為隱藏，單擊就會顯示或隱藏。但這個程式設計客棧設計的重點就在於——買家可以在支付前檢視支付細節。
當不是每個顧客都喜歡這樣做，你需要設計乙個安全的**來獲取信用卡資訊。murat mutlu的這個例子是乙個非常簡潔的移動支付介面，只使用合適的字段來完成該過程。
實際上，我喜歡這種風格的支付流程，因為它減少了頁面上的字段總數，整體簡潔明瞭。
這實際上也是使用者體驗的乙個大趨勢，作為設計師，我們應該進一步研究它。
無論是標籤，麵包屑導航還是圓形統計圖，它們都可以用作程式設計客棧進度提示。
這些進度提示可以引導使用者完成支付流程，告訴他們什麼時候可以完成所有操作。這聽起來可能很簡單，但優化支付頁面的流程並不容易。
我們一起欣賞下面這個精美的支付介面：
它的cta按鈕隨著頁面進行切換，因此它可以幫助使用者流暢地完成整個支付過程。
每完成乙個步驟，步驟後都會有乙個完成標記，這是乙個讓買家知道他們離完成支付更近一步的視覺提示。你也可以使用圖示，彈出文字，或像上面示例中的填充氣泡來表示步驟完成進度。
設計師steven hanley有乙個很酷的使用者支付介面，它主要依靠點和隱藏頁面元素的簡單性。
這些隱藏的部分包含之前支付過程中的資訊，一旦完成操作，它們就會像手風琴選單一樣自動隱藏。
通過這種設計，你可以執行非常特定型別的ui / ux效程式設計客棧果。但是整個支付過程都是通過相同的最終目標來優化的，明確買家支付流程的每一步。
如果不知道如何著手設計進度提示，就試著多瀏覽一些進度條設計，看看哪些是你喜歡的。
我程式設計客棧總是推薦這款桌面風格的電子商務支付介面，因為它們如此與眾不同。你只需要找到乙個與你的移動介面相匹配的進度樣式，就能參考使用了。
在買家最終點選「購買」按鈕之前，他們心中通常會有一些猶豫。你可以通過提供乙個最終確認頁面，對他們的訂單進行完整的總結，讓買家放心。這在移動裝置上特別方便，因為瀏覽器沒有簡單的選項卡，沒有滑鼠，使用小螢幕檢視訂單更加困難。
設計乙個最終確認頁面其實很簡單，你只需按商品的**、運費、稅費和總費用列出乙個總訂單。當然，你也可以包含預計發貨日期和與產品交付相關的其他細節。
designoholic做出的這個設計，就很好地向我們展示了如何在乙個頁面中總結商品的所有資訊。
當然，這並不是最完美的設計，但它證明了極簡主義也可以很好地應用於移動端的支付確認頁面。
對於諸如數字**或預約之類的非實物產品也是如此。在排程頁面上，你可以通過顯示預定的時間、日期、地點和其他相關資訊來完成訂單。
以下這個設計出自由湯姆甘布林之手：
在設計最終確認頁面之前，設計師需要知道買家希望在這個頁面上看到哪些資訊。學會換位思考，想一想你在這個確認頁面上顯示什麼內容才能使買家感覺放心。
如果他們在購買時感覺舒適和安全，那麼他們就會毫不猶豫地按下購買按鈕。
如果你從來沒有設計過手機端應用，別因為它是個全新的領域就膽怯，要勇於嘗試！
有了以上這些建議，我相信你可以設計出乙個直觀的，漂亮的，可互動的移動支付頁面。
原文作者：jake rocheleau
原文鏈結：
譯者：mockplus 團隊 翻譯
本文位址: /news/seo/78315.html
使用者介面設計的原則
很多人對 ui設計都嗤之以鼻，認為那是比較低階的活，比起搞演算法搞架構來，ui設計簡直不在乙個檔次。其實，我認為，這是乙個誤區，嚴重的誤區。我們總是強調 customer oriented 而ui 是產品和使用者之間的橋梁，使用者的任何操作都必須通過這個橋梁，如果這個橋梁設計得不合理，不管你的產品內...
移動端內容怎麼寫？BBC是這樣留住使用者的
程式設計驛站 www.cppcns.com 注 隨著移動網際網路的不斷發展，越來越多的使用者從pc端轉戰移動平台，手機 平板等移動裝置逐步取代pc成為了網民獲取資訊的 新裝置 而對於 編輯們來說，如何在較小屏的移動裝置上抓住使用者的目光變成了一項挑戰，與pc端不同，移動裝置在便捷的同時，也存在螢幕小...
移動裝置的介面設計尺寸
剛開始接觸ui的時候，碰到的最多的就是尺寸問題，什麼畫布要建多大 文字該用多大才合適 我要做幾套介面才可以？什麼七七八八的也著實讓人有些頭疼。iphone 介面尺寸 320 480 640 960 640 1136 ipad 介面尺寸 1024 768 2048 1536 以上單位都是畫素哦，至於解...