网页细节设计:网页中价格标示的设计方法


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

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

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

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

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

¥(Arial字体)*注:双线正确
¥(Verdana字体)
¥(Courier New字体)

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

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

<span class=“base_price”>
<dfn>&yen;</dfn> /*为阻止代码被解析为人民币符号源代码加了b标签,请自行忽略*/
<strong>10640</strong>
< /span>

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

.base_price { color: #E56700; }
.base_price dfn { margin-right: 2px; vertical-align: 3px; font: normal 12px Arial,Simsun; }
.base_price strong { font-size: 16px; }

效果对比如下:

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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3