網頁細節設計:網頁中價格標示的設計方法

來源:互聯網
上載者:User

文章簡介:細節決定成敗-價格的表現形式.

兩周前逛浦東Apple Store,因為看上MacBook Air糾結著要攢幾個月的錢而注目價格良久:

先感謝MH同學的職業敏感性—-是否可以把印刷版式移植到Web平台。我們分析一下生活中見到的各種價格標識:

再對比一下網頁應用中的價格標識:

一個共同特徵就是:價格的貨幣符號很小,甚至視覺上可以忽略,而反白了具體金額。

再看貨幣符號的表現,舉人民幣為例,單修改一下字型就有如此大的差異:

¥(Arial字型)*註:雙線正確
¥(Verdana字型)
¥(Courier New字型)

這裡需要再次強調:人民幣符號的原始形式是雙線,很多使用者受淘寶影響,反覆給攜程發郵件,我仰天長歎:XDJM們哪,單線是因為鍵盤IME的問題,造成了很多人的誤會,其實那是小日本的貨幣符號(之所以叫小日本這與我小時候受過的教育有關),實際代碼需要用¥轉義才正確,就像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; }

效果對比如下:

目前旅遊度假頻道的大字型價格表現形式已修改,機票和酒店尚在開發中~~~



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。