页面元素之「¥」符号的使用原则和技巧

449 阅读3分钟
转载自公众号:一鸣说 作者:一鸣 十二赞产品经理
在做页面设计的时候,难免需要展示「金额」、「价格」等跟钱有关的元素。有的时候需要在表示「钱」的数字前放上 ¥ 符号,有的时候不放,那么在使用的时候有什么讲究呢?

一般 ¥ 符号的使用原则是:如果表示「钱」的数字是页面元素的配角,则数字前加上 ¥ 符号提升该元素的展示重要级,如果表示「钱」的数字是页面的主角,则一般无需在数字前加 ¥ 。

这个环节中最重要的一步就是判断「表示钱的这个数字是否是页面的主角元素」,判定方法就是根据页面的定位,来判定元素的重要性。例如在商品详情页中,页面定位是展示商品的具体信息,表示钱的元素是「商品价格」,商品价格仅作为其中一个元素,并不是最重要的。因此需要在商品详情页的价格数字前加 ¥ 符号。在账户余额明细页中,页面的定位就是展示余额的变化情况,这个时候钱就是主角,此时无需加 ¥ 符号。

其实一条简单的宗旨就是:无法一眼看出某个数字是表示钱的,就价格 ¥ 符号让它看起来像钱;如果一整个页面都在讲这个钱的,就不要加 ¥ 符号多此一举了。

下面我们结合具体使用场景来谈谈 ¥ 元素的使用技巧。

(1)商品卡片和商品详情页。在表示价格的数字前加 ¥ 符号。例如: ¥29.9 ,这里需要注意的一点是,页面可能需要表示一个价格区间,例如从19.9元至29.9元,这时候的表示方法是: ¥19.9 ~ 29.9 ,而不是 ¥19.9 ~ ¥29.9 。很多人很容易在这一点上犯错,需要记住 ¥ 符号只是一个修饰符,要加在「表示钱的数字的整体」的左侧,而不是用来修饰单个数字的。

(2)订单详情页。在商品订单环节,一般会展示订单最终价格的计算过程,例如会出现商品总价,运费,优惠减免等元素。一般需要展现金额计算过程的环节,建议不加 ¥ 符号。但在订单管理页中,一般常规的做法还是在价格前面加 ¥ 符号,主要的原因还是考虑到各个元素的分布太零散了。

(3)支付页。在确认完订单信息后,会到支付环节,一般需要显示「待支付金额」,这个金额一般也是需要加 ¥ 修饰。这种情况实际上并不符合上面提到的原则,但实际上这么做的原因是这个页面的元素只有一个,加 ¥ 符号修饰一下数字。

(4)账户余额明细页。金额前不加 ¥ 符号,一整页都在讲钱,不用加 ¥ 多此一举。

实际上,很多人看了上面几个例子还是会觉得有点懵,那就去好好学习一下淘宝、支付宝吧,看看他们怎么用的,实在不知道怎么用就照搬他们的好啦。(笑~