無標題文檔

谁说前端不会设计

淘宝 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 会议能够尽快的举行,这样我们业界的朋友就能够有再次相聚的机会。

我的照片

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

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

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

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

文章

项目