晒晒七年前的玩意:红楼、金庸和水浒人物卜

人物卜
(请点击图片进入占卜页面)

当年在北大未名等BBS风靡一时,如今翻开里面的代码来看,写得可真裸-.-

最让自己感慨的是,用js数组存储的数据文件。这么多人物介绍,纯手工粘贴、排版和校验,换了现在,估计很难有这份激情和执着了-.-

当年的红友们,可都还好?

对一次bug排查过程的反思

前两天遇见一个bug,在已买到的宝贝列表页面,如下图:
bug snagshoot

直觉反应是表头的CSS有问题,仔细检查后,却没发现问题。难道是JS引起的?禁用JS后,问题依旧。

开始怀疑是页面中某段HTML代码导致了这个bug. 前几天刚用熟了Fiddler,于是 阅读全文 »

由Kimi找茬想到的

Kimi的找茬贴:新版我的淘宝-已买到的宝贝页面

时间有限,也学刘韧体,简单明快的说点想法:

  1. “合并付款”和“批量备注”快速操作栏,这是2008年6月份加上的。最初的设计里,上面是没有这一栏的,只有底部有。但后来不断有客户反映,希望上面也有,以方便快速操作,因此加上了。可以看出:视觉设计的目的是方便操作,淘宝的做法是可取的。至于对视觉流的打断,在没有想到更好的布局前,是肯定有影响但暂时可忽略的(除了新手,感觉大部分买家不会去看表头,视觉流很可能是直接从第一个订单开始往下看。当然,具体情况如何,缺乏眼动仪等数据分析,我也只能和Kimi一样瞎猜)。
  2. 第二点同意Kimi. 非常希望减法在淘宝的推行,至少应该放到和加法同等重要的地位。不然设计上的局限性会越来越多,由此引发的无奈、妥协和愤怒等各种情绪也会让团队跨掉。
  3. 很多设计其实都是为了“购物车”功能,一个订单可以有多个宝贝,如下图:
    order_preview
    不少目前看起来别扭的设计,等“购物车”开放后,会更容易接受一些。比如“投诉”,其实一个是投诉宝贝,一个是投诉订单。当然,对用户来说,两个投诉的确很容易混淆。这是PD们的业务需求,或许以后会简化掉。
  4. 这个页面的复杂度在于如何整合单个宝贝订单和多个宝贝订单的混杂显示,以及对各种交易状态的处理。如果谁有更好的想法,欢迎反馈给我,我会联系相应的交互设计师,不断的优化和改进。

对UCDChina中很多产品和交互设计师们的困惑:

  1. 不少文章,阐述的都是作者本人怎么看产品,怎么使用产品,怎么在产品中找茬。然而实际上,真实用户的视角有可能很不同。旺旺上一直有不少买家/卖家和我联系,反馈问题。他们对产品的期待,和UCDChina中的相关讨论有很大不同。
  2. 好技术未必带来好体验,好设计也未必带来好体验。彼此都不冲突,彼此也没有必然关系。好体验来源于满足用户的真实需求,任何设计师忽略了这一点,就很容易陷入自我设计。自己爽了,用户不一定买单。
  3. 什么才是真正的用户需求?白鸦引发的装与不装,最后也没解决这个问题。定性分析离开了定量研究,总感觉缺乏说服力。

Fiddler的几个使用技巧

只简单说下和前端开发调试密切相关的:

  1. 使用AutoResponder本地调试文件。请参考如何直接调试线上页面的JavaScript和CSS.
  2. 使用QuickExecBox快速操作。请参考QuickExec Reference. 推荐熟练掌握的命令:?sometext, bpu, go, urlreplace. 快捷键:Alt + Q, Ctrl + I, Shift + Del, Ctrl + X, F6.
  3. 使用Filter过滤信息。比如禁用JS, 设置断点等等。
  4. 使用bpu + Inspectors动态修改Response. 比如修改页面中的JS代码片段等等,非常有用。
  5. 使用Request Buidler测试请求。可以很方便的测试ajax代码。
  6. 使用Statistics + Timeline + neXpert查看性能等统计数据。
  7. 使用CustomRules, 自定义配置和命令等。比如修改var m_DisableCaching: boolean = false;的值为true, 就可以默认禁止缓存。还可以自定义命令等等。
  8. 开发自己的扩展。请参考Extending Fiddler with .NET Code.

最后强烈推荐Fiddler的视频教程:Fiddler Demonstration Videos(听不懂没关系,能看懂就能学会)

另外,Firefox下推荐使用FoxyProxy自动切换代理。一次设定,服务终身。

Tags: ,

CSS中属性的书写顺序

传说中的Mozilla推荐

/* mozilla.org Base Styles
 * maintained by fantasai
 */
/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */
...

来源:http://www.mozilla.org/css/base/content.css

在怿飞’s Blog的这篇文章里,又将上面的属性分成了三组:显示属性、自身属性和文本属性 阅读全文 »

Tags: , ,

Page 20 of 33« First...10181920212230...Last »