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

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

作者: 十二赞 | 来源:发表于2018-11-26 10:16 被阅读0次

转载自公众号:一鸣说 作者:一鸣 十二赞产品经理

在做页面设计的时候,难免需要展示「金额」、「价格」等跟钱有关的元素。有的时候需要在表示「钱」的数字前放上 ¥ 符号,有的时候不放,那么在使用的时候有什么讲究呢?

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

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

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

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

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

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

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

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

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

【原文链接】

相关文章

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

    转载自公众号:一鸣说 作者:一鸣 十二赞产品经理 在做页面设计的时候,难免需要展示「金额」、「价格」等跟钱有关...

  • 页面与交互设计

    页面排版原则 元素在页面构成中排版要遵循四大原则:对齐、亲密性、重复、对比 页面元素包括: 内容与行为 ...

  • 8-3城市选择页布局 、better-scoll插件的使用

    布局BFC的使用 伪类元素的使用(stylus语法&符号表示和当前class同级的元素,否则指下级元素) Bett...

  • 一些HTML

    ’¥‘ 符号显示兼容处理

  • 第1节: $美元符号标志

    知识讲解: 在jQuery中,最多使用的就是$美元符号了,无论是页面元素的选择,功能函数的调用,都是以它为前...

  • Robotium 框架学习之Class By

    Class By定义了页面元素的定位和支持哪些页面元素(至少我是这么理解的),使用及其简单:Used in con...

  • 块元素和内联元素

    块元素和内联元素块元素块元素会独占页面中的一行,无论他的内容的多少一般使用块元素对页面进行布局常见的块元素divp...

  • 设计中关于字体的那点小事(一)

    字体也有使用原则 协调 页面上所有元素都使用同样性质的字体,这种设计就是协调的 下图中尽管字体大小 字体摆放位置等...

  • 在HTML中使用Javascript

    把Javascript插入到HTML页面中要使用 元素。使用这个元素可以把Javascript嵌入到HTML页面中...

  • CSS初识—CSS选择器

    1.class 和 id 的使用场景? id:定位到页面上唯一的元素,页面上不能出现id相同的元素 class:定...

网友评论

      本文标题:页面元素之「¥」符号的使用原则和技巧

      本文链接:https://www.haomeiwen.com/subject/lcvvqqtx.html