每次在地铁站充值面前都会有一块屏幕，提示你卡上余额还有充了多少钱，但每次看都很麻烦，找不到关键信息。所有自己就动了再设计的想法。

先看原有的界面样子：

问题主要在于：

1. 信息摆放缺少逻辑
2. 重点信息没有得到突出
   
   

再设计：
首先模拟充值的过程，一般生活中常见的情形：

“我卡里还有多少钱”

“您卡里还有105.2块，请问您充多少钱”

“充75块”

“收您100块”

“这是找您的25块，卡里一共还有180.2块”

以此可以得到大致信息的如下：
账户余额-充值金额-找零-充值后金额（“充值前金额”并列呈现），除外以外还有一些与充值流程无关的信息，充值次数-车票类型-有效期限。

拿到信息后经过整理设计，得到如下样子：
当把充值卡放到查询机器上，直接显示查询界面，左侧显示账户余额，右侧显示车票类型和有效期并进行弱化。


当输入充值相关信息时，则显示充值界面，成功充值的话语突出显示。


注销因为没有见过，所以没有设计，这是我第一次对原有东西再设计，欢迎拍砖讨论。

一句话总结此次收获：

在需要的时候显示合适的信息，而不是一股脑的全放到上面。

打印  |  类别：信息和交互  |  源地址