细节决定成败-价格的表现形式

　　两周前逛浦东Apple Store，因为看上MacBook Air纠结着要攒几个月的钱而注目价格良久：

　　先感谢MH同学的职业敏感性—-是否可以把印刷版式移植到Web平台。我们分析一下生活中见到的各种价格标识：

　　再对比一下网页应用中的价格标识：

　　一个共同特征就是：价格的货币符号很小，甚至视觉上可以忽略，而突出显示了具体金额。

　　再看货币符号的表现，举人民币为例，单修改一下字体就有如此大的差异：

　　¥(Arial字体)*注：双线正确

　　¥(Verdana字体)

　　¥(Courier New字体)

　　这里需要再次强调：人民币符号的原始形式是双线，很多用户受淘宝影响，反复给携程发邮件，我仰天长叹：XDJM们哪，单线是因为键盘输入法的问题，造成了很多人的误会，其实那是小日本的货币符号(之所以叫小日本这与我小时候受过的教育有关)，实际代码需要用¥转义才正确，就像Copyright的©一样，也需要用©来转义。另外淘宝的符号是合并在背景里的，携程涉及国际货币符号较多，为避免加载不到图片给用户造成负担而选择直接显示出来，业务不同在此不做对比分析。

　　相对于在部门内推广新表现形式，代码实现反而是最简单的：

　　 ¥ /*为阻止代码被解析为人民币符号源代码加了b标签，请自行忽略*/

　　 10640

　　有同学问为什么不用^{，原因是旧版代码涉及各大频道，工作量巨大，另外需要Hack IE: *font-size: 14px; 反倒没有方便。}

　　.base_price { color: #E56700; }

　　.base_price dfn { margin-right: 2px; vertical-align: 3px; font: normal 12px Arial,Simsun; }

　　.base_price strong { font-size: 16px; }

　　效果对比如下：

　　目前旅游度假频道的大字体价格表现形式已修改，机票和酒店尚在开发中~~~

评论总数：0 条 [ 查看全部 ] 网友评论