用一个简单的体重记录功能,揭秘UI设计总监的思考过程 - 优设网 - UISDC

用一个简单的体重记录功能,揭秘UI设计总监的思考过程

2016/10/06 9111评论区

ui-design-director-thinking-1

编者按:一个简单的体重记录功能该如何设计?这篇好文不仅全面揭秘了一个设计总监的思考过程,还比较了不少交互方式的优劣,非常值得阅读。

作者@小乖乖老爸 ,关于他的访谈:《优设访谈!薄荷科技设计总监张智超的12年全能设计路》

有什么事情是减肥人群的刚需呢?她可以不吃(节食),不运动,但一定会记录体重。从 薄荷 的数据来看,体重记录也的确是使用人数最多的工具。

今天我们就来聊聊体重记录那些事儿。

输入:滚轮 vs 数字键盘

在设计体重记录功能的时候,要解决两大问题:如何输入数据,如何展示数据。我们先来说说前者。

输入体重数据的组件有两种:滚轮和数字键盘,哪一种更好呢?我们从三个情况来分析:

p.s. 这里谈的滚轮组件,不仅是系统自带的竖着的那种,还包括自定义的,横向滑动的滚轮组件。

uisdc-bacan-206100611

△ 滚轮与数字键盘

1、初次使用

滚轮:如果用户的体重和初始值的差距比较大,滑动起来就有点费劲了;

数字键盘:在大多数秤都是数字显示的,从脚下的数字到手上输入数字,过程是比较自然的;

第一回合,数字键盘小胜。

2、以后的使用(除了第一次输入)

滚轮:体重的波动一般都不大,用户只需要在上一次体重的基础上微调就行了,输入效率高;

数字键盘:一般人的体重是不会超过100公斤的,要输入的是两位数加一个小数点,得点三下,输入效率低。

第二回合,滚轮完胜。

3、错误信息反馈

滚轮:能出现在滚轮上让用户选的数值,都是在合理范围内的,不需要额外的反馈。

数字键盘:对用户的输入范围没法控制,当用户输入了明显不合理的数值,还得提示,然后让用户重新输入。

第三回合,滚轮完胜。

4、结论

滚轮适用于有一定数值范围,每次输入差异不大的情况;数字键盘适用于没有数值范围,每次输入没有关联的情况。在体重记录这个场景下,滚轮比数字键盘更合适。(具体情况要具体分析,切勿生搬硬套)

uisdc-bacan-20610063

△ 2012年,薄荷的添加体重记录

三四年前,大多数的 App 都是用数字键盘的,开发难度低嘛。那时候薄荷用滚轮组件,而且是自定义的组件,那是相当前卫的。很感谢当时的程序员皮皮,花了很大工夫,开发出稳定强大的组件(见上图,当时还是流行拟物风格的)。现在,自定义的滚轮组件已经成为行业标配了。

5、小心,此处有坑

  1. 滚轮组件,没记住上一次用户记录的数据,每次都得从初始值开始,划呀划,划呀划……
  2. 你设计上用的是数字键盘,程序员没留神,做成了全键盘(有字母的那种)……
  3. 数字键盘,每次用户要输入的时候,得先按退格键,把旧数据删掉,才能输入新数据。

别笑,这些坑都是我们曾经踩过,或者看到别人踩过的

展示:日历 vs 曲线

说完怎么输入数据,我们再看来怎么展示数据。常用的组件有两种:日历和曲线。

也许你会想,还有TableView(表格)啊。没错,哪一天体重多少,一行行的排列下来,是可以解决问题。只不过,这么朴(jian)素(lou)的组件,作为一个有理想有追求的设计师,会用吗?(表哥:我躺枪了……)

表哥(TableView),表难过,我们不嫌弃你,待会还有让你出场的机会啊。

日历和曲线,哪种形式能更好的展示用户的体重数据呢?(即使你不想二选一,想两个都做,像薄荷就是既有日历也有曲线,但是主角肯定只有一个,另一个只能充当配角)。几乎所有减肥类的 App 都选择了体重曲线(至少我看到的都是这样),薄荷却特立独行的选择了日历,为什么呢?

1、拼颜值

日历是很难玩出花儿来的。iOS自带的日历很难用,自己开发的难度又太大,所以用的都是第三方的开源组件,一旦你和程序员一起挑中了哪个组件,样式基本就是那样了,可以设置的参数很少,没有太多花头。

曲线的话,你可以用第三方组件,也可以让程序员自己开发,发挥余地就大多了:是折线还是贝兹曲线(又称贝塞尔曲线),曲线上的数据点是空心还是实心,曲线与横坐标之间的区域是透明的还是渐变的……你有很多种选择,浅色背景的可以做得干净整洁,深色背景的可以做得时尚酷炫。

从美观的角度上,曲线完胜日历。

2、谈实用

日期与体重,这两个数据并不是孤立的,单纯的一个日期或体重都没有意义,得两者对应了,才能组成完整的一对数据。

uisdc-bacan-206100612

△ 日历与曲线

日历的好处是,日期与体重这两个数据是紧挨着的,两者容易对应。(见上图左)你要查某一天的体重是多少,一目了然。如果你是重度用户,要看看比上周减了多少,比上个月减了多少,都很容易。

曲线的好处是,容易看出变化的趋势。缺点是,日期与体重这两个数据是分离的,被分离成横坐标和纵坐标,两者难以对应。(为了保持页面的简洁,我们通常只会在最近一个记录点上注明日期和体重数据,曲线上的其他点就不会注明了。见上图右)你得自己看横坐标对应的是哪一天,再看纵坐标对应的体重是多少。所以你要查某一天的体重是多少,是挺麻烦的一件事儿。

另外,在短时间内用户的体重变化是不大的,不容易看出趋势来。也就是说,曲线的好处没有发挥出来,反而有坏处。日历有好处,没有明显的坏处。这么一对比就可以看出,日历比曲线实用。

3、结论

如果你的用户大多是轻度用户,那就选颜值高的曲线;如果你的用户大多是重度用户,那就选经济实用的日历。 薄荷为了重度用户,所以选择了用日历。

慢着,MyFitnessPal 应该也是重度用户多啊,为什么他会选择用曲线呢?

uisdc-bacan-206100613

△ MyFitnessPal 的曲线与列表

其实,你看看 MyFitnessPal 的曲线,下面还有列表呢,列表正好弥补了曲线的缺点。(表哥终于有出场机会了)

体重曲线

上面也提到过了,日历组件可以发挥的余地很小,这里就不说了。曲线是个有故事的组件,咱们来好好聊聊。

1、横坐标:按次数 vs 按自然日期

用户记录体重,不像股票和天气,不一定每天都有数据的。横坐标虽然都是用来显示日期,但是有两种截然不同的日期:

  • 按照用户记录的次数,哪一天记录了就有一个点,没记录就没有,横坐标上的日期不是连续的。
  • 按照自然日期,不管用户记录了没有,横坐标上的日期是连续的。

1.1 扯个八卦

有一次电话面试,应聘者也做过体重曲线,那我就问她,这两者之间的优劣,你是怎么考虑的。她回答道:「这是产品经理决定的,我不用考虑」。事后,她在朋友圈发牢骚,正好被我一个同事看到了,她抱怨道:「面试官真奇怪,居然拿产品经理的问题来问我。」

这个问题真的只有产品经理才需要关心吗?作为设计师,只要跟用户体验相关的事情,都值得去研究吧。另外,在薄荷,产品经理和设计师的两个角色的界限不是那么泾渭分明,我认为这是好事,我们鼓励人人都当产品经理,鼓励设计、开发、运营的同事都参与到产品设计中来。

好了,言归正传。

1.2 优劣比较

uisdc-bacan-206100614

△ 瘦身旅程 和 Same

按次数的好处是:1、好看,每个点的间隔是均匀的,不会太密或太疏。2、开发难度较低。缺点是:不能反映体重变化的真实趋势。两个点之间可能相差一天,也可能相差一个月、一年。(见上图右)

按自然日期的好处是:能真实反映体重变化的趋势。缺点是:开发难度高。(见上图左)

1.3 开发难度高?

按自然日期为什么会开发难度高呢?举几个栗子:

栗子一:跨屏幕的连线

曲线上的点与点之间是要连起来的,很简单是吗?但是考虑到跨屏幕(翻页)的时候,情况就变得复杂了。当前屏幕最左边的那个点,它的前一个点在哪里呢?先查上一周,没有。再查上上周,又没有。再查上上上周……啊,终于找到了,两个点寻寻觅觅,终于把红线牵起来啦!(背景音乐:有缘千里来相会~~~)

栗子二:周期的切换(周/月/年)

每个用户记录体重的频率是不一样的,有人每天记,有人每周记,有人每月才记一两次,所以你觉得合适的周期,对于别人来说,就会显得点太密了,或者太疏了,没法用一个固定的周期来满足所有人,于是得有个周期的选择,在周、月、年之间切换。

或者,你可以向更高难度挑战,用手势来动态调节:两根手指向内捏,点就密一些。两根手指向外捏,点就疏松一些。

栗子三:取样

一个屏幕显示多少个点比较合适呢?5~7个点看起来是最舒服的。当你用比较大的周期,比如月和年,那一个屏幕里显示的点可能会非常密(可能会高达365个点),先不说难不难看吧,也不说加载速度慢不慢吧,在性能不好的机器上,可能马上就崩溃了。

所以需要后端帮你取样,一年的数据,每个月取个平均值,只返回12个数据。

1.4 结论

看了这三个栗子,你明白了吧?如果是按次数的话,这些问题都不复存在了。很多看上去很美好的事情,并不是那么简单的。

按次数,就像一个不太聪明但很细心的学生,最多能考80分,但他会的题就不会丢分,最终考了80分。按自然日期,就像一个很聪明但不细心的学生,全都会,理论上能考100分,但这里错一些,那里错一些,最终只考了70分。

如果你对开发团队的能力不是很有信心,或者他们能力虽强,但没法投入大量精力,持续的改进这个功能,我劝你还是选择「按次数」的形式吧。(背景音乐:啊,多么痛的领悟~~~)

2、纵坐标:静态分布 vs 动态分布

除了横坐标的这个大坑,跳进去就很难挑出来了,纵坐标也有个小坑。

纵坐标的数据分布有两种形式:

  • 静态分布。固定的,每个人都一样的,都采用同样的最大值和最小值,比如从0到150公斤。
  • 动态分布。不是固定的,根据当前屏幕内数据的最大值和最小值,稍微再扩大一点点范围(最好是整数,去掉零头),比如从50到60公斤。

uisdc-bacan-20610064

△ 雪球

说起曲线,技术含量最高的曲线就是股市的k线图了。股市类App的曲线,在横向滑动的时候,纵坐标都会动态的改变。

很显然,当然是动态分布的效果好啦,否则你的体重数据就是在一个很窄的区间里小幅的波动,完全看不出趋势。

程序员也许会为了快,赶进度,怎么简单怎么来。但你得清楚,自己要做动态分布的,即便这个版本实在来不及了,先做静态分布的,下个版本也要改过来的。

3、横屏 vs 竖屏

曲线是用横屏来展示好呢,还是竖屏好呢?首先,要看这个页面有没有其他元素,有的话只能用竖屏的了(见下图左)。

uisdc-bacan-206100615

△ iPhone 自带的「健康」App

在没有其他因素干扰的情况下,只展示体重曲线,那用横屏还是竖屏好呢?我的观点是:最好是:先看竖屏,支持横屏;其次是:只有横屏,不能竖屏;最差的是:只有竖屏,不能横屏;

不知不觉写了这么多,有些超出我的预计。不是我经验有多丰富,而是我踩了多少坑啊。

「优设名师专访系列」

1、曾任腾讯大粤网设计主管的跨域达人:《优设访谈!腾讯设计师米田的设计之道与成长之路》

2、没有听过冯叔的设计师不是好设计师:《优设访谈!著名设计师冯铁的设计思考与经验之谈》

3、前端重构视觉交互无一不精的设计师:《优设访谈!腾讯高级交互设计师C7210的十年设计路》

4、非议不断前行不止,用心的设计团队:《优设访谈!国内知名设计团队专访之滴滴DISIGN》

5、前网易现阿里写的书是交互领域必读:《优设访谈!阿里交互设计专家刘津的设计管理之路》

6、职业路径最为清晰的科班交互设计师:《优设访谈!LBE安全大师产品总监晓生的职场进阶之路》

7、能靠脸吃饭偏偏不的设计界「鹿晗」:《优设访谈!阿里资深设计师的自学设计之路》

8、300多人的百度设计团队该如何运转:《优设访谈!国内知名设计团队专访之百度大UE》

9、百度上海团队负责人的非科班设计师:《优设访谈!百度设计大咖JJ YING的自学成才之路》

10、他带的学生已经是国内的设计大咖了:《优设访谈!灰昼:从非科班生到首席美术总监的15年设计路》

11、设计的产品有几亿人在用的非科班生:《优设访谈!腾讯电脑管家视觉负责人张晓翔的UI自学之路》

12、英雄联盟穿越火线天天爱消除都有他:《优设访谈!腾讯游戏Tgideas团队设计总监李若凡的十年设计路》

13、高考一百多分现任UC艺术指导的大神:《优设访谈!小火:从非科班生到UC艺术指导的励志设计路》

14、可能是颜值最高的全能设计师网红咯:《优设访谈!锤子科技设计总监罗子雄的全能自学之路》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ui-design-director-thinking

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里