通过一个简单体重记录功能揭秘的设计总监思考过程.pdfVIP

通过一个简单的体重记录功能 ，揭秘设计总监的思考过程 有什么事情是减肥 群的刚需呢 ？她可以不吃 （节食 ），不运动 ，但一定会记录体重。从 薄荷 的数 据来看 ，体重记录也的确是使用 数最多的工具。 今天我们就来聊聊体重记录那些事儿。 输入 ：滚轮 vs 数字键盘 在设计体重记录功能的时候 ，要解决两大问题 ：如何输入数据 ，如何展示数据。我们先来说说前者 。 输入体重数据的组件有两种 ：滚轮和数字键盘 ，哪一种更好呢 ？我们从三个情况来分析 ： p.s. 这里谈的滚轮组件 ，不仅是系统自带的竖着的那种 ，还包括自定义的 ，横向滑动的滚轮组件。 △ 滚轮与数字键盘 1、初次使用 滚轮 ：如果用户的体重和初始值的差距比较大 ，滑动起来就有点费劲了 ； 数字键盘 ：在大多数秤都是数字显示的 ，从脚下的数字到手上输入数字 ，过程是比较自然的 ； 第一回合 ，数字键盘小胜。 2、以后的使用 （除了第一次输入 ） 滚轮 ：体重的波动一般都不大 ，用户只需要在上一次体重的基础上微调就行了 ，输入效率高 ； 数字键盘 ：一般 的体重是不会超过100公斤的 ，要输入的是两位数加一个小数点 ，得点三下 ，输 入效率低。 第二回合 ，滚轮完胜。 3、错误信息反馈 滚轮 ：能出现在滚轮上让用户选的数值 ，都是在合理范围内的 ，不需要额外的反馈。 数字键盘 ：对用户的输入范围没法控制 ，当用户输入了明显不合理的数值 ，还得提示 ，然后让用户 重新输入。 第三回合 ，滚轮完胜。 4 、结论 滚轮适用于有一定数值范围 ，每次输入差异不大的情况 ；数字键盘适用于没有数值范围 ，每次输入 没有关联的情况。在体重记录这个场景下 ，滚轮比数字键盘更合适。 （具体情况要具体分析 ，切勿 生搬硬套 ） △ 2012年 ，薄荷的添加体重记录 三四年前 ，大多数的 A pp 都是用数字键盘的 ，开发难度低嘛。那时候薄荷用滚轮组件 ，而且是自定 义的组件 ，那是相当前卫的。很感谢当时的程序员皮皮 ，花了很大工夫 ，开发出稳定强大的组件 （ 见上图 ，当时还是流行拟物风格的 ）。现在 ，自定义的滚轮组件已经成为行业标配了。 5、 心 ，此处有坑 1. 滚轮组件 ，没记住上一次用户记录的数据 ，每次都得从初始值开始 ，划呀划 ，划呀划…… 2. 你设计上用的是数字键盘 ，程序员没留神 ，做成了全键盘 （有字母的那种 ）…… 3. 数字键盘 ，每次用户要输入的时候 ，得先按退格键 ，把旧数据删掉 ，才能输入新数据。 别笑 ，这些坑都是我们曾经踩过 ，或者看到别 踩过的 展示 ：日历 vs 曲线 说完怎么输入数据 ，我们再看来怎么展示数据。常用的组件有两种 ：日历和曲线。 也许你会想 ，还有TableView （表格 ）啊。没错 ，哪一天体重多少 ，一行行的排列下来 ，是可以解 决问题。只不过 ，这么朴 （jian ）素 （lo u ）的组件 ，作为一个有理想有追求的设计师 ，会用吗 ？（ 表哥 ：我躺枪了…… ） 表哥 （TableView ），表难过 ，我们不嫌弃你 ，待会还有让你出场的机会啊。 日历和曲线 ，哪种形式能更好的展示用户的体重数据呢 ？（即使你不想二选一 ，想两个都做 ，像薄 荷就是既有日历也有曲线 ，但是主角肯定只有一个 ，另一个只能充当配角 ）。几乎所有减肥类的 A pp 都选择了体重曲线 （至少我看到的都是这样 ），薄荷却特立独行的选择了日历 ，为什么呢 ？ 1、拼颜值 日历是很难玩出花儿来的。iO S自带的日历很难用 ，自己开发的难度又太大 ，所以用的都是第三方 的开源组件 ，一旦你和程序员一起挑中了哪个组件 ，样式基本就是那样了 ，可以设置的参数很少 ， 没有太多花头。 曲线的话 ，你可以用第三方组件 ，也可以让程序员自己开发 ，发挥余地就大多了 ：是折线还是贝兹 曲线 （又称贝塞尔曲线 ），曲线上的数据点是空心还是实心 ，曲线与横坐标之间的区域是透明的还 是渐变的……你有很多种选择 ，浅色背景的可以做得干净整洁 ，深色背景的可以做得时尚酷炫。 从美观的角度上 ，曲线完胜日历。 2、谈实用 日期与体重 ，这两个数据并不是孤立的 ，单纯的一个日期或体重都没有意义 ，得两者对应了 ，才能 组成完整的一对数据。 △ 日历与曲线 日历的好处是 ，日期与体重这两个数据是紧挨着的 ，两者容易对应。 （见上图左 ）你要查某一天的 体重是多少 ，一目了然。如果你是重度用户 ，要看看比上周减了多少 ，比上个月减了多少 ，都很 容易。 曲线的好处是 ，容易看出变化的趋势。缺点是 ，日期与体重这两个数据是分离的 ，被分离成横坐标 和纵坐标