減肥人口需要什么？她可以不吃(減肥)不運(yùn)動(dòng)，但一定會(huì)記錄體重。

從 薄荷 的數(shù)據(jù)來看，體重記錄也的確是使用人數(shù)最多的工具。

今天我們就來聊聊體重記錄那些事兒。

輸入：滾輪 vs 數(shù)字鍵盤

在設(shè)計(jì)體重記錄功能的時(shí)候，要解決兩大問題：如何輸入數(shù)據(jù)，如何展示數(shù)據(jù)。我們先來說說前者。

輸入體重?cái)?shù)據(jù)的組件有兩種：滾輪和數(shù)字鍵盤，哪一種更好呢？我們從三個(gè)情況來分析：

p.s. 這里談的滾輪組件，不僅是系統(tǒng)自帶的豎著的那種，還包括自定義的，橫向滑動(dòng)的滾輪組件。

△ 滾輪與數(shù)字鍵盤

1、初次使用

滾輪：如果用戶的體重和初始值的差距比較大，滑動(dòng)起來就有點(diǎn)費(fèi)勁了；

數(shù)字鍵盤：在大多數(shù)秤都是數(shù)字顯示的，從腳下的數(shù)字到手上輸入數(shù)字，過程是比較自然的；

第一回合，數(shù)字鍵盤小勝。

2、以后的使用（除了第一次輸入）

滾輪：體重的波動(dòng)一般都不大，用戶只需要在上一次體重的基礎(chǔ)上微調(diào)就行了，輸入效率高；

數(shù)字鍵盤：一般人的體重是不會(huì)超過100公斤的，要輸入的是兩位數(shù)加一個(gè)小數(shù)點(diǎn)，得點(diǎn)三下，輸入效率低。

第二回合，滾輪完勝。

3、錯(cuò)誤信息反饋

滾輪：能出現(xiàn)在滾輪上讓用戶選的數(shù)值，都是在合理范圍內(nèi)的，不需要額外的反饋。

數(shù)字鍵盤：對(duì)用戶的輸入范圍沒法控制，當(dāng)用戶輸入了明顯不合理的數(shù)值，還得提示，然后讓用戶重新輸入。

第三回合，滾輪完勝。

4、結(jié)論

滾輪適用于有一定數(shù)值范圍，每次輸入差異不大的情況；數(shù)字鍵盤適用于沒有數(shù)值范圍，每次輸入沒有關(guān)聯(lián)的情況。在體重記錄這個(gè)場(chǎng)景下，滾輪比數(shù)字鍵盤更合適。（具體情況要具體分析，切勿生搬硬套）

△ 2012年，薄荷的添加體重記錄

三四年前，大多數(shù)的 App 都是用數(shù)字鍵盤的，開發(fā)難度低嘛。那時(shí)候薄荷用滾輪組件，而且是自定義的組件，那是相當(dāng)前衛(wèi)的。很感謝當(dāng)時(shí)的程序員皮皮，花了很大工夫，開發(fā)出穩(wěn)定強(qiáng)大的組件（見上圖，當(dāng)時(shí)還是流行擬物風(fēng)格的）?，F(xiàn)在，自定義的滾輪組件已經(jīng)成為行業(yè)標(biāo)配了。

5、小心，此處有坑

1. 滾輪組件，沒記住上一次用戶記錄的數(shù)據(jù)，每次都得從初始值開始，劃呀劃，劃呀劃……
2. 你設(shè)計(jì)上用的是數(shù)字鍵盤，程序員沒留神，做成了全鍵盤（有字母的那種）……
3. 數(shù)字鍵盤，每次用戶要輸入的時(shí)候，得先按退格鍵，把舊數(shù)據(jù)刪掉，才能輸入新數(shù)據(jù)。

別笑，這些坑都是我們?cè)?jīng)踩過，或者看到別人踩過的

展示：日歷 vs 曲線

說完怎么輸入數(shù)據(jù)，我們?cè)倏磥碓趺凑故緮?shù)據(jù)。常用的組件有兩種：日歷和曲線。

也許你會(huì)想，還有TableView（表格）啊。沒錯(cuò)，哪一天體重多少，一行行的排列下來，是可以解決問題。只不過，這么樸（jian）素（lou）的組件，作為一個(gè)有理想有追求的設(shè)計(jì)師，會(huì)用嗎？（表哥：我躺槍了……）

表哥（TableView），表難過，我們不嫌棄你，待會(huì)還有讓你出場(chǎng)的機(jī)會(huì)啊。

日歷和曲線，哪種形式能更好的展示用戶的體重?cái)?shù)據(jù)呢？（即使你不想二選一，想兩個(gè)都做，像薄荷就是既有日歷也有曲線，但是主角肯定只有一個(gè)，另一個(gè)只能充當(dāng)配角）。幾乎所有減肥類的 App 都選擇了體重曲線（至少我看到的都是這樣），薄荷卻特立獨(dú)行的選擇了日歷，為什么呢？

1、拼顏值

日歷是很難玩出花兒來的。iOS自帶的日歷很難用，自己開發(fā)的難度又太大，所以用的都是第三方的開源組件，一旦你和程序員一起挑中了哪個(gè)組件，樣式基本就是那樣了，可以設(shè)置的參數(shù)很少，沒有太多花頭。

曲線的話，你可以用第三方組件，也可以讓程序員自己開發(fā)，發(fā)揮余地就大多了：是折線還是貝茲曲線（又稱貝塞爾曲線），曲線上的數(shù)據(jù)點(diǎn)是空心還是實(shí)心，曲線與橫坐標(biāo)之間的區(qū)域是透明的還是漸變的……你有很多種選擇，淺色背景的可以做得干凈整潔，深色背景的可以做得時(shí)尚酷炫。

從美觀的角度上，曲線完勝日歷。

2、談實(shí)用

日期與體重，這兩個(gè)數(shù)據(jù)并不是孤立的，單純的一個(gè)日期或體重都沒有意義，得兩者對(duì)應(yīng)了，才能組成完整的一對(duì)數(shù)據(jù)。

△ 日歷與曲線

日歷的好處是，日期與體重這兩個(gè)數(shù)據(jù)是緊挨著的，兩者容易對(duì)應(yīng)。（見上圖左）你要查某一天的體重是多少，一目了然。如果你是重度用戶，要看看比上周減了多少，比上個(gè)月減了多少，都很容易。

曲線的好處是，容易看出變化的趨勢(shì)。缺點(diǎn)是，日期與體重這兩個(gè)數(shù)據(jù)是分離的，被分離成橫坐標(biāo)和縱坐標(biāo)，兩者難以對(duì)應(yīng)。（為了保持頁面的簡(jiǎn)潔，我們通常只會(huì)在最近一個(gè)記錄點(diǎn)上注明日期和體重?cái)?shù)據(jù)，曲線上的其他點(diǎn)就不會(huì)注明了。見上圖右）你得自己看橫坐標(biāo)對(duì)應(yīng)的是哪一天，再看縱坐標(biāo)對(duì)應(yīng)的體重是多少。所以你要查某一天的體重是多少，是挺麻煩的一件事兒。

另外，在短時(shí)間內(nèi)用戶的體重變化是不大的，不容易看出趨勢(shì)來。也就是說，曲線的好處沒有發(fā)揮出來，反而有壞處。日歷有好處，沒有明顯的壞處。這么一對(duì)比就可以看出，日歷比曲線實(shí)用。

3、結(jié)論

如果你的用戶大多是輕度用戶，那就選顏值高的曲線；如果你的用戶大多是重度用戶，那就選經(jīng)濟(jì)實(shí)用的日歷。 薄荷為了重度用戶，所以選擇了用日歷。

慢著，MyFitnessPal 應(yīng)該也是重度用戶多啊，為什么他會(huì)選擇用曲線呢？

△ MyFitnessPal 的曲線與列表

其實(shí)，你看看 MyFitnessPal 的曲線，下面還有列表呢，列表正好彌補(bǔ)了曲線的缺點(diǎn)。（表哥終于有出場(chǎng)機(jī)會(huì)了）

體重曲線

上面也提到過了，日歷組件可以發(fā)揮的余地很小，這里就不說了。曲線是個(gè)有故事的組件，咱們來好好聊聊。

1、橫坐標(biāo)：按次數(shù) vs 按自然日期

用戶記錄體重，不像股票和天氣，不一定每天都有數(shù)據(jù)的。橫坐標(biāo)雖然都是用來顯示日期，但是有兩種截然不同的日期：

• 按照用戶記錄的次數(shù)，哪一天記錄了就有一個(gè)點(diǎn)，沒記錄就沒有，橫坐標(biāo)上的日期不是連續(xù)的。
• 按照自然日期，不管用戶記錄了沒有，橫坐標(biāo)上的日期是連續(xù)的。

1.1 扯個(gè)八卦

有一次電話面試，應(yīng)聘者也做過體重曲線，那我就問她，這兩者之間的優(yōu)劣，你是怎么考慮的。她回答道：「這是產(chǎn)品經(jīng)理決定的，我不用考慮」。事后，她在朋友圈發(fā)牢騷，正好被我一個(gè)同事看到了，她抱怨道：「面試官真奇怪，居然拿產(chǎn)品經(jīng)理的問題來問我?！?/p>

這個(gè)問題真的只有產(chǎn)品經(jīng)理才需要關(guān)心嗎？作為設(shè)計(jì)師，只要跟用戶體驗(yàn)相關(guān)的事情，都值得去研究吧。另外，在薄荷，產(chǎn)品經(jīng)理和設(shè)計(jì)師的兩個(gè)角色的界限不是那么涇渭分明，我認(rèn)為這是好事，我們鼓勵(lì)人人都當(dāng)產(chǎn)品經(jīng)理，鼓勵(lì)設(shè)計(jì)、開發(fā)、運(yùn)營的同事都參與到產(chǎn)品設(shè)計(jì)中來。

好了，言歸正傳。

1.2 優(yōu)劣比較

△ 瘦身旅程 和 Same

按次數(shù)的好處是：1、好看，每個(gè)點(diǎn)的間隔是均勻的，不會(huì)太密或太疏。2、開發(fā)難度較低。缺點(diǎn)是：不能反映體重變化的真實(shí)趨勢(shì)。兩個(gè)點(diǎn)之間可能相差一天，也可能相差一個(gè)月、一年。（見上圖右）

按自然日期的好處是：能真實(shí)反映體重變化的趨勢(shì)。缺點(diǎn)是：開發(fā)難度高。（見上圖左）

1.3 開發(fā)難度高？

按自然日期為什么會(huì)開發(fā)難度高呢？舉幾個(gè)栗子：

栗子一：跨屏幕的連線

曲線上的點(diǎn)與點(diǎn)之間是要連起來的，很簡(jiǎn)單是嗎？但是考慮到跨屏幕（翻頁）的時(shí)候，情況就變得復(fù)雜了。當(dāng)前屏幕最左邊的那個(gè)點(diǎn)，它的前一個(gè)點(diǎn)在哪里呢？先查上一周，沒有。再查上上周，又沒有。再查上上上周……啊，終于找到了，兩個(gè)點(diǎn)尋尋覓覓，終于把紅線牽起來啦?。ū尘耙魳罚河芯壡Ю飦硐鄷?huì)~~~）

栗子二：周期的切換（周/月/年）

每個(gè)用戶記錄體重的頻率是不一樣的，有人每天記，有人每周記，有人每月才記一兩次，所以你覺得合適的周期，對(duì)于別人來說，就會(huì)顯得點(diǎn)太密了，或者太疏了，沒法用一個(gè)固定的周期來滿足所有人，于是得有個(gè)周期的選擇，在周、月、年之間切換。

或者，你可以向更高難度挑戰(zhàn)，用手勢(shì)來動(dòng)態(tài)調(diào)節(jié)：兩根手指向內(nèi)捏，點(diǎn)就密一些。兩根手指向外捏，點(diǎn)就疏松一些。

栗子三：取樣

一個(gè)屏幕顯示多少個(gè)點(diǎn)比較合適呢？5~7個(gè)點(diǎn)看起來是最舒服的。當(dāng)你用比較大的周期，比如月和年，那一個(gè)屏幕里顯示的點(diǎn)可能會(huì)非常密（可能會(huì)高達(dá)365個(gè)點(diǎn)），先不說難不難看吧，也不說加載速度慢不慢吧，在性能不好的機(jī)器上，可能馬上就崩潰了。

所以需要后端幫你取樣，一年的數(shù)據(jù)，每個(gè)月取個(gè)平均值，只返回12個(gè)數(shù)據(jù)。

1.4 結(jié)論

看了這三個(gè)栗子，你明白了吧？如果是按次數(shù)的話，這些問題都不復(fù)存在了。很多看上去很美好的事情，并不是那么簡(jiǎn)單的。

按次數(shù)，就像一個(gè)不太聰明但很細(xì)心的學(xué)生，最多能考80分，但他會(huì)的題就不會(huì)丟分，最終考了80分。按自然日期，就像一個(gè)很聰明但不細(xì)心的學(xué)生，全都會(huì)，理論上能考100分，但這里錯(cuò)一些，那里錯(cuò)一些，最終只考了70分。

如果你對(duì)開發(fā)團(tuán)隊(duì)的能力不是很有信心，或者他們能力雖強(qiáng)，但沒法投入大量精力，持續(xù)的改進(jìn)這個(gè)功能，我勸你還是選擇「按次數(shù)」的形式吧。（背景音樂：啊，多么痛的領(lǐng)悟~~~）

2、縱坐標(biāo)：靜態(tài)分布 vs 動(dòng)態(tài)分布

除了橫坐標(biāo)的這個(gè)大坑，跳進(jìn)去就很難挑出來了，縱坐標(biāo)也有個(gè)小坑。

縱坐標(biāo)的數(shù)據(jù)分布有兩種形式：

• 靜態(tài)分布。固定的，每個(gè)人都一樣的，都采用同樣的最大值和最小值，比如從0到150公斤。
• 動(dòng)態(tài)分布。不是固定的，根據(jù)當(dāng)前屏幕內(nèi)數(shù)據(jù)的最大值和最小值，稍微再擴(kuò)大一點(diǎn)點(diǎn)范圍（最好是整數(shù)，去掉零頭），比如從50到60公斤。

△ 雪球

說起曲線，技術(shù)含量最高的曲線就是股市的k線圖了。股市類App的曲線，在橫向滑動(dòng)的時(shí)候，縱坐標(biāo)都會(huì)動(dòng)態(tài)的改變。

很顯然，當(dāng)然是動(dòng)態(tài)分布的效果好啦，否則你的體重?cái)?shù)據(jù)就是在一個(gè)很窄的區(qū)間里小幅的波動(dòng)，完全看不出趨勢(shì)。

程序員也許會(huì)為了快，趕進(jìn)度，怎么簡(jiǎn)單怎么來。但你得清楚，自己要做動(dòng)態(tài)分布的，即便這個(gè)版本實(shí)在來不及了，先做靜態(tài)分布的，下個(gè)版本也要改過來的。

3、橫屏 vs 豎屏

曲線是用橫屏來展示好呢，還是豎屏好呢？首先，要看這個(gè)頁面有沒有其他元素，有的話只能用豎屏的了（見下圖左）。

△ iPhone 自帶的「健康」App

在沒有其他因素干擾的情況下，只展示體重曲線，那用橫屏還是豎屏好呢？我的觀點(diǎn)是：最好是：先看豎屏，支持橫屏；其次是：只有橫屏，不能豎屏；最差的是：只有豎屏，不能橫屏；

不知不覺寫了這么多，有些超出我的預(yù)計(jì)。不是我經(jīng)驗(yàn)有多豐富，而是我踩了多少坑啊。

VIA：優(yōu)設(shè)網(wǎng)