<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/vnd.wap.wml; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/></head>
<card title="经典的 ATM 交互范例 - Gracecode.com">
<p>很多交互方面的书籍都会拿 ATM 作为案例分析，谁叫银行和钱过不去呢。放下教科书，我们来看看<a href="http://physicalinterface.com/view/that-design-is-money" title="http://physicalinterface.com/view/that-design-is-money">老美的银行的 ATM 是怎么设计的</a>。</p>

<p><img src="http://pic.yupoo.com/feelinglucky/717835b1d2e7/medium.jpg" alt="http://pic.yupoo.com/feelinglucky/717835b1d2e7/medium.jpg" title="http://pic.yupoo.com/feelinglucky/717835b1d2e7/medium.jpg" /></p>

<p>插入银行卡以后出现输入密码界面，按钮很大而且“看起来”非常容易点击也非常适合屏幕操作。</p>

<p><img src="http://pic.yupoo.com/feelinglucky/252025b1d2e7/medium.jpg" alt="http://pic.yupoo.com/feelinglucky/252025b1d2e7/medium.jpg" title="http://pic.yupoo.com/feelinglucky/252025b1d2e7/medium.jpg" /></p>

<p>这是原文中新老两个界面的对比，看得出设计者花了很多的功夫。对比老的界面，元素视觉方面更加的精简，显得层次分明；重新排列的按钮将相似的功能放在一起，更容易操作。</p>

<p><img src="http://pic.yupoo.com/feelinglucky/966615b1d2e6/medium.jpg" alt="http://pic.yupoo.com/feelinglucky/966615b1d2e6/medium.jpg" title="http://pic.yupoo.com/feelinglucky/966615b1d2e6/medium.jpg" /></p>

<p>这是取款确认界面，看得出左边的是取款流程并按钮的形式突出，用户随时可以退到某个步骤操作。在这里令人眼前一亮的是打印回执的 checkbox，它并没有像国内的银行那样等到现金吐出来了以后，再问你是否需要打印回执。</p>

<p><img src="http://pic.yupoo.com/feelinglucky/789195b1d2e8/medium.jpg" alt="http://pic.yupoo.com/feelinglucky/789195b1d2e8/medium.jpg" title="http://pic.yupoo.com/feelinglucky/789195b1d2e8/medium.jpg" /></p>

<p>再看下细节方面，上面是文中改版前后的两个按钮对比。改变最大的地方本人认为就是按钮的样式更加清晰，这非常容易理解谁喜欢取款的时候看花哨的海报呢？</p>

<p><img src="http://pic.yupoo.com/feelinglucky/860845b1d2ea/medium.jpg" alt="http://pic.yupoo.com/feelinglucky/860845b1d2ea/medium.jpg" title="http://pic.yupoo.com/feelinglucky/860845b1d2ea/medium.jpg" /></p>

<p>这是改版前后的布局，按钮被明显的放大并且被拉伸；重新布局的按钮明显减少了行数，从而看起来整体的布局更加清晰。</p>

<p><img src="http://pic.yupoo.com/feelinglucky/654195b1d2e8/medium.jpg" alt="http://pic.yupoo.com/feelinglucky/654195b1d2e8/medium.jpg" title="http://pic.yupoo.com/feelinglucky/654195b1d2e8/medium.jpg" /></p>

<p>这是 ATM 硬件外观前后对比，操作键盘被放大、吐钞口放到了显示器的下面（这应该是为了用户方便和安全）、存钱口和插卡口以及回执单出口都放在了右边 -- 这似乎都是用户输入操作。</p>

<p><a href="http://physicalinterface.com/view/that-design-is-money" title="http://physicalinterface.com/view/that-design-is-money">全文在这里</a>，懒得翻译了，希望本人的解释没有误人子弟。</p>


<p>
<a href="http://www.gracecode.com/wap/">Gracecode.com</a> |
<a href="http://www.gracecode.com/wap/d/1787 ">Permalink</a>(<a href="http://www.gracecode.com/Archive/Display/1787 ">xHTML</a>) |
<a href="http://www.gracecode.com/Trackback/Recieve/1787/korfak">Trackback</a> |
<a href="http://rss.gracecode.com">Rss</a>
</p>
</card>
</wml>