很多交互方面的书籍都会拿 ATM 作为案例分析，谁叫银行和钱过不去呢。放下教科书，我们来看看 老美的银行的 ATM 是怎么设计的 。

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

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

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

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

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

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

全文在这里 ，懒得翻译了，希望本人的解释没有误人子弟。

首先说明下，我的配置文件并不是适合每个人。这是个合集包，除了本人的 vimrc 配置文件以外，还包含了本人经常使用的一些插件，比如 NERDTree 、 Calendar 等等。

安装的方法很简单，解压缩以后将 vim 文件夹放置到 $HOME/.vim 或者 $VIM/vimfiles 中即可。废话不多说，在这里 打包下载 。

用 PHP 写的个小玩意，主要功能就是将图片（目前支持 PNG、JPG 以及 GIF 格式）转换成 HTML 页面（使用 TABLE 排版）。

在这里要说明一下的是，PHP 脚本的本身也许不是性能的问题。但如果图片太大，生成的页面用浏览器打开可能会比较慢，所以尽量不要使用太大的图片（控制在 500px 左右）。

废话不多说，链接地址如下，欢迎大家使用、测试：

http://friable.rocks/pixel_image/ 、 CSS 批量压缩工具 还有个 微型的 PHP 文件管理器 等等。