頁面元素之「￥」符號的使用原則和技巧

轉載自公衆號：一鳴說 做者：一鳴 十二贊產品經理

在作頁面設計的時候，不免須要展現「金額」、「價格」等跟錢有關的元素。有的時候須要在表示「錢」的數字前放上 ￥ 符號，有的時候不放，那麼在使用的時候有什麼講究呢？

通常 ￥ 符號的使用原則是：若是表示「錢」的數字是頁面元素的配角，則數字前加上 ￥ 符號提高該元素的展現重要級，若是表示「錢」的數字是頁面的主角，則通常無需在數字前加 ￥ 。

這個環節中最重要的一步就是判斷「表示錢的這個數字是不是頁面的主角元素」，斷定方法就是根據頁面的定位，來斷定元素的重要性。例如在商品詳情頁中，頁面定位是展現商品的具體信息，表示錢的元素是「商品價格」，商品價格僅做爲其中一個元素，並非最重要的。所以須要在商品詳情頁的價格數字前加 ￥ 符號。在帳戶餘額明細頁中，頁面的定位就是展現餘額的變化狀況，這個時候錢就是主角，此時無需加 ￥ 符號。

其實一條簡單的宗旨就是：沒法一眼看出某個數字是表示錢的，就價格 ￥ 符號讓它看起來像錢；若是一整個頁面都在講這個錢的，就不要加 ￥ 符號畫蛇添足了。

下面咱們結合具體使用場景來談談 ￥ 元素的使用技巧。

（1）商品卡片和商品詳情頁。在表示價格的數字前加 ￥ 符號。例如： ￥29.9 ，這裏須要注意的一點是，頁面可能須要表示一個價格區間，例如從19.9元至29.9元，這時候的表示方法是： ￥19.9 ~ 29.9 ，而不是 ￥19.9 ~ ￥29.9 。不少人很容易在這一點上犯錯，須要記住 ￥ 符號只是一個修飾符，要加在「表示錢的數字的總體」的左側，而不是用來修飾單個數字的。

（2）訂單詳情頁。在商品訂單環節，通常會展現訂單最終價格的計算過程，例如會出現商品總價，運費，優惠減免等元素。通常須要展示金額計算過程的環節，建議不加 ￥ 符號。但在訂單管理頁中，通常常規的作法仍是在價格前面加 ￥ 符號，主要的緣由仍是考慮到各個元素的分佈太零散了。

（3）支付頁。在確認完訂單信息後，會到支付環節，通常須要顯示「待支付金額」，這個金額通常也是須要加 ￥ 修飾。這種狀況實際上並不符合上面提到的原則，但實際上這麼作的緣由是這個頁面的元素只有一個，加 ￥ 符號修飾一下數字。

（4）帳戶餘額明細頁。金額前不加 ￥ 符號，一整頁都在講錢，不用加 ￥ 畫蛇添足。

實際上，不少人看了上面幾個例子仍是會以爲有點懵，那就去好好學習一下淘寶、支付寶吧，看看他們怎麼用的，實在不知道怎麼用就照搬他們的好啦。（笑~

【原文連接】