使用指南｜用FlowUs制作进度条
“
Tips
进度条的作用
Daniel Engber 在 TED talk《How the progress bar keeps you sane》中提到过：
“人只要看到有进度条在那，就会感觉比较好。”
进度条提供给我们一个看得见的开始和结束，让我们觉得有在向目标前进，或至少让人知道事情现在正在运转，比较安心一点。
当进度条到达100%时，会刺激身体产生脑内啡，给人带来一股“我终于完成目标”的成就感。
1
把完整的进度列条分成10等分，即10%为一个单位
每个完整的进度列条皆由2部分组成: 已完成和未完成
公式共包含3个主轴
已完成的图示(以绿色显示)
未完成的图示( 以红色显示)
进度的数字百分比
2
所用公式
format(slice("■■■■■■■■■■", 0, floor(prop("已完成") / prop("总目标") * 10)) + format(slice("□□□□□□□□□□", 0, ceil(10 - prop("已完成") / prop("总目标") * 10)) + " " + format(round(prop("已完成") / prop("总目标") * 100)) + "%"))1. format () :
意义: 将括号内的内容，转成文字形式
用法: 同一公式中，若有用到「+」，则「+」的前后内容，需为同一种格式。
(支持): 文字+文字
(不支持）: 数字+文字
2. slice (text, number1, number2)
意义: 将括号中的text(文字)做切割。切割的方式为: 取number1到number2之间的字
用法: slice (“FlowUs”, 0, 4)==Flow
即取第0到第4个字之间的内容，(或是切掉0以前和4以后的文字)，便会得出:Flow
3. 简化数字：无条件舍去、无条件进位、四舍五入
floor(number): 无条件舍去，将数字向下取整返回结果
如floor（18.1）==18
ceil(number): 无条件进位，将数字向上取整返回结果
如ceil（18.1）==19
round(number): 将数字四舍五入取整返回结果
round（0.4）==0
公式解析
slice("■■■■■■■■■■", 0, floor(prop("已完成") / prop("总目标") * 10)“■■■■■■■■■■”: 进度条由10个■所组成，每完成10%，就取一格■
floor(prop(“已完成”) / prop(“总目标”) * 10): 计算出目前进度，且以10%为一单位，最后将数字无条件舍去
slice("□□□□□□□□□□", 0, ceil(10 - prop("已完成") / prop("总目标") * 10)总进度列条共有10格，用 □来补足■后面不足10的格数
(10 – prop(“完成数”) / prop(“总目标”) * 10): 总进度有10格，计算出目前进度且以10为一单位后，看距离10还差多少
ceil: 在“未完成”的部分，用ceil无条件进位，这样才能将总进度凑成10格；
例如：达标率是20%，则进度列条会由 2个■+ 8个 □所组成；达标率是 8%，因为不满10%，所以进度列条会由 0个■ + 10个 □ 所组成；
（若你想要在不满10%的情况下，还是显示一格，那就将公式中 floor 与 ceil的位置互换即可。）
round(prop("已完成") / prop("总目标") * 100)) + "%"四舍五入进度的百分比，并在数字后方加上”%”
3
首先建立一个多维表格
新建2个数字属性列：“已完成”和“未完成”
新建公式属性作为进度条，复制代码或自己写一遍，也可以点击“阅读原文”拷贝进度条模板至自己的空间
点击文章立即复习：速来挑战本期最烧脑的功能！「同步块」、「多维表公式」等功能已上线！
或打开官方模板中心直接拷贝模板！