DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：找茬：支付寶即時到賬交易確認付款頁面的交互設計.

因為昨天被支付寶強行關閉了“余額支付”，所以一筆錢沒有完成付款，剛剛來公司的時候，登錄web去付款，體驗了一下新設計的“即時到賬交易付款確認頁面”，我覺得在交互設計上，存在幾個問題，找茬一把。

在上圖片前，還是要說，這一次的支付寶改版是不錯的，最大的優點是更加的專注和簡潔。好了。恭維的說完，就開始找茬：

看上圖，上面的1，2，3 各自區域，是我眼睛注釋的順序，我先看到1，覺得沒有我需要確認的信息，然後看2，也沒有看到我需要的信息，然後看到了3，發現25寫的很大，而我最需要的，付款給who的信息在最下面，而且字體很小。

我個人覺得在這個地方信息布局有以下幾個問題：

• 確認付款信息，最重要確認的是什麼？應該是 付給誰，多少錢，這兩個信息是最重要的，但是卻沒有在重要的位置展示。我的建議是，將“收款方”用大號字體寫在1號區域，然後還需要包括付款金額。然後是付款時間和理由。後者可以用相對較小的字體。
• 在確認信息中間，有一個“黃色”的隔斷行，設計的初衷是“提醒”，但是這個提醒恰恰形成了視覺上的隔斷效果。導致整個確認信息被隔成兩個部分，這樣對於有效的傳遞確認信息是不利的，建議這個部分的提醒放到其他位置，比如整體確認信息的右側等。
• 另外，在文案上，也存在不少的瑕疵，比如：
  • 1號區域的，“付款－ Yy”部分，實際上應該是“付款理由：”Yy是我填入的內容部分，但是看上去很怪怪的，這個字段的說明沒有說明清楚。
  • 3號區域的，”對方信息“，我覺得更加合適的是“收款方姓名” 和“收款方支付寶帳戶” 分開。而不是對方信息。這個地方更加直接的傳遞會有利於用戶的判斷。

沒有完美的產品，小步快跑是最好的辦法了…加油伙計們…