Web Frontend Develope, Design, Music, Life——Stay Hungry, Stay Foolish~

由“支付宝缴费页面问题”探讨所想到的

在Twitter上看到了“支付宝缴费页面问题”,很多人在讨论。
3443391305_b548247f8e_o

1) “切换项目” 要两次鼠标交互,这个完全是一次鼠标点击即可.

2) “客户编号” 上下的高度过了,和留言板差不多,初级用户恐怕搞不清楚.

3) 左边不对齐,右边也不对齐,视觉效果相对比较乱.

4) 校验码,请问色弱的人咋办? 既然是公共事业缴费,总不能都是年轻的潮人使用吧?大叔大婶大爷大妈还要到处找花镜不成?

5) 图标山寨.

白鸦說︰

1) “切换项目” 要两次鼠标交互,这个完全是一次鼠标点击即可.
回复:这个是故意增加的成本。 因为万一用户不小心切换了,前面填好的信息保留不了。而且,考虑这个的时候得考虑用户是怎么进来的,在进口那里已经有很明确的选择了,在这里切换的需求很小。
这里的设计原则是:
1》需求小。但还不能不提供
2》操作危险。但还不能不提供
3》所以,提供功能,但麻烦点。多点一次,然后下面全换掉,不会那么突兀。

2) “客户编号” 上下的高度过了,和留言板差不多,初级用户恐怕搞不清楚.
回复:这个设计是对的。有些单位的编号长达30个数字,用户填写完成之后需要核对,太小的时候核对起来也不方便。

3) 左边不对齐,右边也不对齐,视觉效果相对比较乱.
回复:根据经验实际数据证明,这个设计是合理的。

4) 校验码,请问色弱的人咋办?既然是公共事业缴费,总不能都是年轻的潮人使用吧?大叔大婶大爷大妈还要到处找花镜不成?
回复:是的。该换。 需要大家一起说服做这个验证码的同事们,我一个人说服不了他们。

5) 图标山寨.
回复:图标没有山寨不山寨。 只有不抄袭、不难识别。而且我觉得这个图标蛮好看

ps:
其实这里有一个最傻的你么有提出来:
省份: 北京 ;城市:北京
这个出现两次,而且需要选两次的做法,很白痴。 必须迅速按照只选一次的设计改掉。

我的观点是:

1.赞同白鸦的说法,因为切换用的人确实可能不会很多。

2.可以适当减少高度,现在是32px,调整到25px比较合适,而且光标占据整个空间。

3.这个设计应该没问题。

从整体来看我还是觉得很不错的,值得一提的是当输入框focus时的CSS,outline的运用很赞~

.fm-focus .i-textarea {
border:1px solid #68ACFF;
cursor:text;
outline-color:aqua;
outline-style:solid;
outline-width:1px;
}
还有一个就是没有选中同意服务条款时,按钮不可用
<span class=”btn btn-ok-disabled“>
<input type=”submit” id=”nextbtn” value=”下一步” disabled=”"/>
</span>

提高网站性能最佳实践

翻译了“http://developer.yahoo.com/performance/rules.html”一部分,

 

第一类:Content 内容上
1 Make Fewer HTTP Requests 减少HTTP请求数大部分的用户响应时间是发生在前端上,大部分时间都用在了下载页面组件:图片、css、js、flash等等,减少这些组件的数量是加速页面渲染的关键。一个方法是简化页面的设计,但是有没有方法既可以展示丰富的内容还可以让响应时间变快呢?下面是一些方法:合并文件是通过合并所有的脚步或样式成为一个脚本或样式的方法可以减少HTTP的请求;CSS Sprites是我们喜欢的一种方式来减少HTTP请求,就是合并你的背景图片,然后通过background-image和background-position来显示背景图片;内联图像用data: URL scheme在页面上嵌入图像数据,这会增加HTML页面大小,但是你可以写到CSS里面,但是有的浏览器不支持。
2 Reduce DNS Lookups 减少DNS查询
3 Avoid Redirects 避免重定向
4 Make Ajax Cacheable 使ajax可缓存
5 Post-load Components Post加载组件如果你有做拖放或动画的Javascript代码或库,这一部分可以等,因为拖放要等到页面渲染完成后才可以。YUI Image Loader可以延迟图片加载,YUI Get utility是一个方便的方法来调用JS和CSS。
6 Preload Components 预加载组件
7 Reduce the Number of DOM Elements 减少DOM元素数量 在Firebug控制台上输入document.getElementsByTagName(’*').length就可以看到DOM元素的数量了
8 Split Components Across Domains 跨域放置组件
9 Minimize the Number of iframes 使iframe的数量最小化
10 No 404s 无404

发现Fenng已经翻译好了,整理了一下。
Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条–真是与时俱进啊。最新的 34 条也针对不同的角度做了分类。

Web 前端优化最佳实践之 内容篇

继续阅读 »

2009/04/08Life

0 Comments

HP大中华区总裁孙振耀退休后九大感言一(转)

从Rank那里看的,觉得不错,转过来了~

一、关于工作与生活

  我有个有趣的观察,外企公司多的是25-35岁的白领,40岁以上的员工很少,二三十岁的外企员工是意气风发的,但外企公司40岁附近的经理人是很尴尬的。我见过的40岁附近的外企经理人大多在一直跳槽,最后大多跳到民企,比方说,唐骏。外企员工的成功很大程度上是公司的成功,并非个人的成功,西门子的确比国美大,但并不代表西门子中国经理比国美的老板强,甚至可以说差得很远。而进外企的人往往并不能很早理解这一点,把自己的成功90%归功于自己的能力,实际上,外企公司随便换个中国区总经理并不会给业绩带来什么了不起的影响。好了问题来了,当这些经理人40多岁了,他们的薪资要求变得很高,而他们的才能其实又不是那么出众,作为外企公司的老板,你会怎么选择?有的是只要不高薪水的,要出位的精明强干精力冲沛的年轻人,有的是,为什么还要用你?
  
  从上面这个例子,其实可以看到我们的工作轨迹,二三十岁的时候,生活的压力还比较小,身体还比较好,上面的父母身体还好,下面又没有孩子,不用还房贷,也没有孩子要上大学,当个外企小白领还是很光鲜的,挣得不多也够花了。但是人终归要结婚生子,终归会老,到了40岁,父母老了,要看病要吃药,要有人看护,自己要还房贷,要过基本体面的生活,要养小孩……那个时候需要挣多少钱才够花才重要。所以,看待工作,眼光要放远一点,一时的谁高谁低并不能说明什么。
  
  从这个角度上来说,我不太赞成过于关注第一份工作的薪水,更没有必要攀比第一份工作的薪水,这在刚刚出校园的学生中间是很常见的。正常人大概要工作35年,这好比是一场马拉松比赛,和真正的马拉松比赛不同的是,这次比赛没有职业选手,每个人都只有一次机会。要知到,有很多人甚至坚持不到终点,大多数人最后是走到终点的,只有少数人是跑过终点的,因此在刚开始的时候,去抢领先的位置并没有太大的意义。刚进社会的时候如果进500强公司,大概能拿到3k-6k/月的工资,有些特别技术的人才可能可以到8k/月,可问题是,5年以后拿多少?估计5k-10k了不起了。起点虽然高,但增幅有限,而且,后面的年轻人追赶的压力越来越大。
   继续阅读 »

RGBa浏览器支持

RGBa是一个在声明颜色的时候加上alpha透明度,比如div{background:rgba(200, 54, 54, 0.5);}就可以让这个div有50%的透明而不需要写opacity这个属性,这个与写opacity属性是相似的,不过它的不同点在于rgba里的opacity不会改变子元素的透明度,而opacity则反之。了解更多请阅读http://css-tricks.com/rgba-browser-support/
这里是Demo以及浏览器支持列表,很可惜,IE目前暂时不支持rgba.

返回顶部