武林網(www.49028c.com)文章簡介:細節決定成敗-價格的表現形式.
兩周前逛浦東Apple Store,因為看上MacBook Air糾結著要攢幾個月的錢而注目價格良久:
先感謝MH同學的職業敏感性—-是否可以把印刷版式移植到Web平臺。我們分析一下生活中見到的各種價格標識:
再對比一下網頁應用中的價格標識:
一個共同特征就是:價格的貨幣符號很小,甚至視覺上可以忽略,而突出顯示了具體金額。
再看貨幣符號的表現,舉人民幣為例,單修改一下字體就有如此大的差異:
¥(Arial字體)*注:雙線正確
¥(Verdana字體)
¥(Courier New字體)
這里需要再次強調:人民幣符號的原始形式是雙線,很多用戶受淘寶影響,反復給攜程發郵件,我仰天長嘆:XDJM們哪,單線是因為鍵盤輸入法的問題,造成了很多人的誤會,其實那是小日本的貨幣符號(之所以叫小日本這與我小時候受過的教育有關),實際代碼需要用¥轉義才正確,就像Copyright的©一樣,也需要用©來轉義。另外淘寶的符號是合并在背景里的,攜程涉及國際貨幣符號較多,為避免加載不到圖片給用戶造成負擔而選擇直接顯示出來,業務不同在此不做對比分析。
相對于在部門內推廣新表現形式,代碼實現反而是最簡單的:
<span class=“base_price”>
<dfn>¥</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; }
效果對比如下:
目前旅游度假頻道的大字體價格表現形式已修改,機票和酒店尚在開發中~~~
新聞熱點
疑難解答