無標題文檔

谁说前端不会设计

淘宝 UED招聘页面 ,相信大家都对他印象很深。

感谢 大雄 同志提供的源文件,利用本人的空闲时间,将这些元素「整合」了下,做了张桌面。

https://friable.rocks/_/2009_11_05/904315beef55.jpg

最后,在这里 打包下载 ,版权归 淘宝 UED 所有。

经典的 ATM 交互范例

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

https://friable.rocks/_/2009_11_05/717835b1d2e7.jpg

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

https://friable.rocks/_/2009_11_05/252025b1d2e7.jpg

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

https://friable.rocks/_/2009_11_05/966615b1d2e6.jpg

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

https://friable.rocks/_/2009_11_05/789195b1d2e8.jpg

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

https://friable.rocks/_/2009_11_05/860845b1d2ea.jpg

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

https://friable.rocks/_/2009_11_05/654195b1d2e8.jpg

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

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

交互分享会中的争论

昨日的交互分享会, 李坏兄弟的 PPT 引起了很大的讨论,这是件好事。作为名前端开发人员,虽然没有像交互设计师样的深入,但是毕竟也属于具体产品的实践者,在这里谈下本人的拙见。

交互设计不是以用户为中心的设计,而是以用户目标为中心的设计

坦白的讲,这句话本人理解参半。平时说多了「以用户为中心」,在这里又出现个「以用户目标为中心」的概念,凭本人目前的见解需要时间去消化这句话。

在这里有两点的质疑,就是如何区分「用户」和「用户目的」。不同的用户自然会有不同的用户目标,这是非常容易理解的事情。本人认为,这两句话应是站在两个不同的高度(或者角度)去理解。

用户、商业、技术

https://friable.rocks/_/2009_11_05/439955a99d80.jpg

这个不是原文的话,是本人概括的,原文是「交互们不是委屈的去找这三个圈子兼顾的那小点。要是找出这三个圈子中间那点东西,那你的产品就是不伦不类的。」

对于这个观点,本人需要反驳一下。产品设计中并不是「委屈」的去找那个点,而是找到这三者间的平衡。本人认为,这三者应该是相辅相成的,而不是互相独立甚至排斥的。

现在的中国互联网没有交互设计师

这句话的论据就是,交互需要创新,而「 试问 Web 上哪个控件是中国人发明的 」,本人对观点此保留意见。在这里要说明的是,GUI (图形界面)的发展以及 GUI 控件(按钮、单选框、复选框等)的出现,都是时间、技术、需求等推动的结果,它们都不是一夜时间就全部出现的。

https://friable.rocks/_/2009_11_05/997265a999d5.jpg

比如试问下,在没有 GUI 之前,程序员对着那黑底白字的 Shell 飞快的操作时,交互设计师此时应该如何设计系统?GUI 为普通用户提供了友好的人机界面,此时交互设计师才能真正的发挥自身的作用。一定的程度上,本人相信「技术推动交互」这句话。

有关 创新 方面,本人认为这是 交互设计师 的必要条件。而好的创新,创新有「改良」和「革命」之分,其两者的不同点就是创新曲线是否是平滑的。容许我狭隘的认为,任何方便用户的改进都是创新, 哪怕只是让用户少一次单击

规范不是限制

规范是把双刃剑,它让我们的工作更加严谨的同时,也一定程度上的制约了 创新 -- 这是本次 小马 和 李坏 争论的焦点。

我们能否从另个角度考虑,规范本身其实不是墨守成规的。创新等到成熟了以后,组成了规范并推动其发展;而规范也能进一步的指明创新之路,使其有的放矢。

整个分享会的气氛活跃而又美味(可惜没能抢到爆米花),李坏 兄弟提出的些概念,的确让我们思考和探讨。这就像是理想主义者和现实主义者之间的碰撞,本人作为名「机械的开发人员」,天平明显倾向了现实主义者这边。

D4 论坛见闻

首先要澄清一下,我没有打错字, 是 D4 而不是 前些天说的 D2 论坛 。D4 论坛是面向设计师(Desgin)的交流会。

本人也有幸参加了此次会议,顺便也参观了下 阿里巴巴 和 支付宝。但两个分论坛同时开场,让人感到无从选择,想同时听的兄弟可能要上下来回奔波了。

会场的气氛很活跃,下面爆几个料。

https://friable.rocks/_/2009_11_05/817065867a92.jpg

支付宝的 Fenng 同学 ,只见他拿着心爱的 iphone 冲进场子里 乱拍一通 然后闪人(这个 DBA,压根就不是听课来的 -_-!)。在这里特别提下, 明天是他大喜的日子 ,祝福他。

https://friable.rocks/_/2009_11_05/81480586799f.jpg

这是此次 D4 论坛的小贴纸,在这里要提到它是因为本人心理非常不平衡。在楼下签到的时候没发现还有这玩意,等到进会场的时候发现几乎每个人都有一张。

https://friable.rocks/_/2009_11_05/652295867c12.jpg

考虑到可能很多来场的朋友还没有吃饭,会场上有很多食物供大家使用(感谢支付宝,很人性化)。我无意鼓囊了句「食物还挺多的嘛」,身旁的 圆心 回了句:「那是,没看见我还背了个包来了嘛」(瀑布汗)。

感言时间,本人认为 D4 这样的交流会,不仅仅是 阿里巴巴 内部的,应该更扩展一步,期待它会形成整个相关行业的交流会。

D2 · 会议及看法

接下来 的 D2 会议,就是此行北京的重点。总体来说,此次的会议对于本人的收获还是比较大的。

按照会议的安排,我说下本人的看法。

「前端设计与开发的基本模式」 - 周爱民

周是本次 D2 的第一堂演讲。演讲的内容中,对于前端的开发模式提出了许多他独到的见解。他的很多视角给我耳目一新的感觉,即便有些在我看来非常的空幻。

「Silverlight 应用」 - 黄继佳

坦白的说,黄的演讲会上 我睡着了 。Silverlight 不是我技术关注的重点,前期听他的演讲,我个人感觉是微软产品的推广。

「Enterprise Ajax in PHP」 - Hedger Wang

Hedger 的演讲我是从头听到尾的(可能是睡醒精神特别好的缘故)。他的演讲有两个亮点,Ajax 和后台开发的设计模式,以及对于前端 Javascript 的性能以及请求优化方面的解决方案。

他的演讲的 PPT 可以看出,其对于此次的演讲做了充分的准备。他的 PPT 不仅提供了详细的图表,以及现实相应的代码,建议有兴趣的朋友将其 PPT 仔细的理解。

「Enhanceing Web Sites With The YUI Library」(English) - Nate Koechly

Nate 是 YUI 的开发人员之一,自然让他介绍 YUI 库是最有发言权的。因为期前已经在使用 YUI 开发,所以其内容自然不言而喻。

但在其后演讲中,会场上的朋友提到 YUI 和 Dojo 以及其他一些库的区别时。Nate 的解答,其态度让我感到其自身的魅力。他的回答,在于本人看来,是非常满意的。

「Nifty web apps on an OpenResty」 - 章亦春

第二天上午 D2 会议,由于北京堵车的缘故,我只听了部分章的演讲。从其后的演讲内容中,可以得知他讲的是后台开发与前端的结合实现方式。

他的思路非常的好,但是实现的方式,本人保留自己的意见(可能是我没有完全听他的演讲的缘故)。

「如何写一个富文本编辑器」、「用 Adobe Air 开发 IM」、「前端开发工具介绍」

后面是具体的案例分析阶段。

Lazy 兄 的「如何写一个富文本编辑器」 演讲,本人感觉过于的具体,但其后有关浏览器兼容性方面的介绍和解释还是非常有价值的。

小马 对于「前端开发工具介绍」 让我认识到除了 FireBug 以外,还有在 Explorer 下也可以有相近的替代方案,比较的实用。此详细的工具,可以参考 怿飞的相关 Blog

还有另外一位仁兄(不好意思,名字我忘记了,望告之)的「用 Adobe Air 开发 IM」,我 也非常感兴趣, 本人对于 Adobe Air 技术一直比较关注 ,有空希望尝试一下。

总结

总体来说,此次的 D2 会议收获还是比较丰富的。此次的会议下来,本人总结出一下的几个关键字,和大家分享一下

沟通、视野、分享、坚持、深入

同时,期待下次的 D2 会议能够尽快的举行,这样我们业界的朋友就能够有再次相聚的机会。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 其实无所谓叫什么名字,作为码农知道取名是件很难的事情。最后想到的这个名字,其实都没啥特别的含义,系统默认的文件名而已。

作为八零后,自认为还仅存点傲娇式的幽默感,以及对平淡生活的追求和向往。 为了免得对号入座和不必要的麻烦,声明本站点所持观点仅代表个人意见,不代表自己所服务公司的立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQGdyYWNlY29kZS5jb20K | base64 -d`

文章

项目