转载自公众号:一鸣说 作者:一鸣 十二赞产品经理
在做页面设计的时候,难免需要展示「金额」、「价格」等跟钱有关的元素。有的时候需要在表示「钱」的数字前放上 ¥ 符号,有的时候不放,那么在使用的时候有什么讲究呢?
一般 ¥ 符号的使用原则是:如果表示「钱」的数字是页面元素的配角,则数字前加上 ¥ 符号提升该元素的展示重要级,如果表示「钱」的数字是页面的主角,则一般无需在数字前加 ¥ 。
这个环节中最重要的一步就是判断「表示钱的这个数字是否是页面的主角元素」,判定方法就是根据页面的定位,来判定元素的重要性。例如在商品详情页中,页面定位是展示商品的具体信息,表示钱的元素是「商品价格」,商品价格仅作为其中一个元素,并不是最重要的。因此需要在商品详情页的价格数字前加 ¥ 符号。在账户余额明细页中,页面的定位就是展示余额的变化情况,这个时候钱就是主角,此时无需加 ¥ 符号。
其实一条简单的宗旨就是:无法一眼看出某个数字是表示钱的,就价格 ¥ 符号让它看起来像钱;如果一整个页面都在讲这个钱的,就不要加 ¥ 符号多此一举了。
下面我们结合具体使用场景来谈谈 ¥ 元素的使用技巧。
(1)商品卡片和商品详情页。在表示价格的数字前加 ¥ 符号。例如: ¥29.9 ,这里需要注意的一点是,页面可能需要表示一个价格区间,例如从19.9元至29.9元,这时候的表示方法是: ¥19.9 ~ 29.9 ,而不是 ¥19.9 ~ ¥29.9 。很多人很容易在这一点上犯错,需要记住 ¥ 符号只是一个修饰符,要加在「表示钱的数字的整体」的左侧,而不是用来修饰单个数字的。
(2)订单详情页。在商品订单环节,一般会展示订单最终价格的计算过程,例如会出现商品总价,运费,优惠减免等元素。一般需要展现金额计算过程的环节,建议不加 ¥ 符号。但在订单管理页中,一般常规的做法还是在价格前面加 ¥ 符号,主要的原因还是考虑到各个元素的分布太零散了。
(3)支付页。在确认完订单信息后,会到支付环节,一般需要显示「待支付金额」,这个金额一般也是需要加 ¥ 修饰。这种情况实际上并不符合上面提到的原则,但实际上这么做的原因是这个页面的元素只有一个,加 ¥ 符号修饰一下数字。
(4)账户余额明细页。金额前不加 ¥ 符号,一整页都在讲钱,不用加 ¥ 多此一举。
实际上,很多人看了上面几个例子还是会觉得有点懵,那就去好好学习一下淘宝、支付宝吧,看看他们怎么用的,实在不知道怎么用就照搬他们的好啦。(笑~
【原文链接】

转载于:https://juejin.im/post/5bfb56a86fb9a04a0f64d863

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

  1. 「SymPy」符号运算(5) Vector向量及运算

    目录 导言 坐标系和向量 笛卡尔坐标系与向量 坐标原点 向量运算 四则运算 点乘.叉乘 并矢/外积(Dyadic) ∇ \nabla ∇算子(Hamiltonian算子) 梯度 旋度 散度 向量操作 ...

  2. 「SymPy」符号运算(6) 矩阵Matrix及基础运算

    目录 导言 创建矩阵 列表初始化 行向量 列向量 维度和数集 二元函数 `lambda`函数 特殊矩阵 基本操作 索引 增删 基础运算 向量运算 导言 在前几篇文章中,我们学习了SymPy基础/高级用 ...

  3. 「SymPy」符号运算(7) Matrix进阶运算与线性代数

    目录 0 导言 1 矩阵一般属性 秩 逆 迹 转置 共轭 伴随 行列式 特征值 特征向量 特征多项式 2 矩阵运算与线性代数 范数 标准化 条件数 矩阵分解 黑塞矩阵 雅克比矩阵 Jordan标准型 ...

  4. 「SymPy」符号运算(4) 微积分与有限差分

    目录 导言 积分 不定积分 定积分 多重积分 求导 一阶导数 高阶导数 偏导数 有限差分 常微分差分 差分系数 高阶差分 偏微分差分 导言 在前几篇中,我们学习了SymPy的基本语法.方程求解等基础知 ...

  5. 「SymPy」符号运算(2) 各种形式输出、表达式的化简合并与展开

    目录 导言 输出 替换.演化 化简.合并与展开 化简 展开 合并 `cancel`函数 `apart`函数 `rewrite`函数 `expand_func`函数 导言 在前一篇文章中,我们简单学习了 ...

  6. 「SymPy」符号运算(3) (非)线性方程(组)求解、数列求和、连乘、求极限

    目录 导言 解方程(组) solve函数 solveset函数 求和 ∑ \sum ∑ 连乘 ∏ \prod ∏ 求函数极限 求数列极限 导言 在前两篇文章中,我们学习了SymPy的输入输出.基本符号 ...

  7. boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画

    最简单的动画组件实现 动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...

  8. 「SymPy」符号运算(1) 简介/符号/变量/函数/表达式/等式/不等式/运算符

    目录 1 简介 2 导入库 3 定义符号 4 定义函数 5 表达式 6 等式/不等式 7 `SymPy`假设与限制 8 运算符/函数 常用运算符/函数 数学常数 三角函数 复杂函数 指数运算 1 简介 ...

  9. vivado中bit文件怎么没有生成_「干货」FPGA设计中深度约束技巧及调试经验总结...

    今天跟大家分享的内容很重要,也是我们调试FPGA经验的总结.随着FPGA对时序和性能的要求越来越高,高频率.大位宽的设计越来越多.在调试这些FPGA样机时,需要从写代码时就要小心谨慎,否则写出来的代码 ...

最新文章

  1. 虚拟化管理的两大棘手之处
  2. 在Winform中播放视频等【DotNet,C#】
  3. 小二,先来两桂花豆沙包!
  4. Qt发布可能遇到的问题
  5. 取两堆石子(威佐夫博弈)
  6. 李开复:有三个AI专家就能估值7亿的时代过去了
  7. android打印json对象,android之json数据过长打印不全问题的解决
  8. js对象与this指向
  9. 【单片机】51单片机烧录那些事儿
  10. 匹配滤波器及matlab仿真
  11. java的链表(LinkedList类)
  12. exls表格搜索快捷键_excel表格快捷键大全_如何在EXCEL表格中快速查找
  13. Linux的自动装机服务器搭建(持续优化)
  14. PYTHON单任务FTP断点续传程序
  15. JavaFX开发的地图编辑器WiTKMapEditor(更新GitHub地址)
  16. 基于Spark的出租车信息查询系统
  17. 汉诺塔问题(+递推公式)
  18. robocopy 报错 1326
  19. Chrome浏览器扩展学习之 - 添加书签
  20. OrangePi R1 编译 kernel 报错解决

热门文章

  1. 一次安卓单机游戏修改经历...
  2. Spring Security 权限控制
  3. 深入理解 Go Modules 的 go.mod 与 go.sum
  4. docker事件events监控实现分析
  5. ThinkPHP5酒店预订管理系统
  6. 华为鸿蒙申请实名认证怎么能成功,是不是实名认证成功 可以推送鸿蒙了 ?
  7. ROS安装 rosdep init 或者rosdep update 出错(很有用)
  8. 苹果手机上网很慢_手机信号明明满格,为什么网速还很慢?原来是这3个功能在作怪!...
  9. ip linux 用户名和密码,常用路由器的默认登录IP、用户名及密码
  10. VS2013配置Boost.Asio环境