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

两周前逛浦东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; }

效果对比如下：

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

欢迎大家阅读《网页细节设计:网页中价格标示的设计方法…_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)