編者按：一個簡單的體重記錄功能該如何設(shè)計？這篇好文不僅全面揭秘了一個設(shè)計總監(jiān)的思考過程，還比較了不少交互方式的優(yōu)劣，非常值得閱讀。

作者@小乖乖老爸?，關(guān)于他的訪談：《優(yōu)設(shè)訪談！薄荷科技設(shè)計總監(jiān)張智超的12年全能設(shè)計路》

有什么事情是減肥人群的剛需呢？她可以不吃（節(jié)食），不運(yùn)動，但一定會記錄體重。從 薄荷 的數(shù)據(jù)來看，體重記錄也的確是使用人數(shù)最多的工具。

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

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

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

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

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

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

1、初次使用

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

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

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

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

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

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

第二回合，滾輪完勝。

3、錯誤信息反饋

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

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

第三回合，滾輪完勝。

4、結(jié)論

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

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

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

5、小心，此處有坑

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

別笑，這些坑都是我們曾經(jīng)踩過，或者看到別人踩過的

展示：日歷 vs 曲線

說完怎么輸入數(shù)據(jù)，我們再看來怎么展示數(shù)據(jù)。常用的組件有兩種：日歷和曲線。

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

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

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

1、拼顏值

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

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

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

2、談實用

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

△ 日歷與曲線

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

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

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

3、結(jié)論

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

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

△ MyFitnessPal 的曲線與列表

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

體重曲線

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

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

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

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

1.1 扯個八卦

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

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

好了，言歸正傳。

1.2 優(yōu)劣比較

△ 瘦身旅程 和 Same

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

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

1.3 開發(fā)難度高？

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

栗子一：跨屏幕的連線

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

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

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

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

栗子三：取樣

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

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

1.4 結(jié)論

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

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

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

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

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

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

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

△ 雪球

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

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

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

3、橫屏 vs 豎屏

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

△ iPhone 自帶的「健康」App

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

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

「優(yōu)設(shè)名師專訪系列」

1、曾任騰訊大粵網(wǎng)設(shè)計主管的跨域達(dá)人：《優(yōu)設(shè)訪談！騰訊設(shè)計師米田的設(shè)計之道與成長之路》

2、沒有聽過馮叔的設(shè)計師不是好設(shè)計師：《優(yōu)設(shè)訪談！著名設(shè)計師馮鐵的設(shè)計思考與經(jīng)驗之談》

3、前端重構(gòu)視覺交互無一不精的設(shè)計師：《優(yōu)設(shè)訪談！騰訊高級交互設(shè)計師C7210的十年設(shè)計路》

4、非議不斷前行不止，用心的設(shè)計團(tuán)隊：《優(yōu)設(shè)訪談！國內(nèi)知名設(shè)計團(tuán)隊專訪之滴滴DISIGN》

5、前網(wǎng)易現(xiàn)阿里寫的書是交互領(lǐng)域必讀：《優(yōu)設(shè)訪談！阿里交互設(shè)計專家劉津的設(shè)計管理之路》

6、職業(yè)路徑最為清晰的科班交互設(shè)計師：《優(yōu)設(shè)訪談！LBE安全大師產(chǎn)品總監(jiān)曉生的職場進(jìn)階之路》

7、能靠臉吃飯偏偏不的設(shè)計界「鹿晗」：《優(yōu)設(shè)訪談！阿里資深設(shè)計師的自學(xué)設(shè)計之路》

8、300多人的百度設(shè)計團(tuán)隊該如何運(yùn)轉(zhuǎn)：《優(yōu)設(shè)訪談！國內(nèi)知名設(shè)計團(tuán)隊專訪之百度大UE》

9、百度上海團(tuán)隊負(fù)責(zé)人的非科班設(shè)計師：《優(yōu)設(shè)訪談！百度設(shè)計大咖JJ YING的自學(xué)成才之路》

10、他帶的學(xué)生已經(jīng)是國內(nèi)的設(shè)計大咖了：《優(yōu)設(shè)訪談！灰晝：從非科班生到首席美術(shù)總監(jiān)的15年設(shè)計路》

11、設(shè)計的產(chǎn)品有幾億人在用的非科班生：《優(yōu)設(shè)訪談！騰訊電腦管家視覺負(fù)責(zé)人張曉翔的UI自學(xué)之路》

12、英雄聯(lián)盟穿越火線天天愛消除都有他：《優(yōu)設(shè)訪談！騰訊游戲Tgideas團(tuán)隊設(shè)計總監(jiān)李若凡的十年設(shè)計路》

13、高考一百多分現(xiàn)任UC藝術(shù)指導(dǎo)的大神：《優(yōu)設(shè)訪談！小火：從非科班生到UC藝術(shù)指導(dǎo)的勵志設(shè)計路》

14、可能是顏值最高的全能設(shè)計師網(wǎng)紅咯：《優(yōu)設(shè)訪談！錘子科技設(shè)計總監(jiān)羅子雄的全能自學(xué)之路》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com