打开文本图片集

摘要：随着网络和身体健康的融合，“量化自我”的理念在人们的日常行为中越来越普遍。在智慧健康中，信息的回馈与分析已经变成了一项每日必做的工作。同时，健康领域的大量开发也为人们和因特网的信息交换提供了一个双向的平台。数据可视化作为界面沟通和信息传播的有效方式，在展示和引导健康数据方面起着非常关键的作用。随着移动终端的普及，对手机接口中的可视化技术。保健类的应用，想要借助直观的形式，以图像的形式，让使用者可以对自己的身体状况做出预测和控制。有目标地在保健类应用的接口设计当中进行了数据视觉表达和创新。对整个系统进行了明确归纳，并与智能化的发展方向相联系，为用户提供了一种全新的界面可视化方法。

关键词：UI界面设计中数据；可视化；应用；运动健康类APP

1 引言

当今社会，特别是年轻人接触到网络，手机普及到人们的日常工作中，人们已步入了“过度分享”的时代。所谓的“过分共享”，意味着人们对于消息反馈的即时和交行性的要求变得更高，因此，在将来，反馈度与交互值成了一个需要重新评价用户需求的关键要素。当今的社会，在满足了使用者对资讯的需求之后，已经渐渐形成了一种新的经济形势，甚至是一种新的业务形式，而“反馈经济”就是指使用者根据自己的新的生活方式而形成的一种新的消费趋势。同时，随着大数据技术的发展，它将会是一个巨大的产业，而在这个产业中，数据的“交易”将会带来一种新的“反馈经济”。[1] 向云计算平台上传日常生活中发生的任何数据，并利用它们反馈的信息，为自己的事后行为提供快速决策。在我们的社会中，有了一种新的改变，那就是一种可佩戴的装置，它可以把行为，位置，甚至人体的任何微小的改变，都变成可以被记录和研究的资料。这说明，之前对大数据的认识，就像是一块浮在水面上的坚冰，真正的价值，就像是一块冰块下面的一座冰山。二十一世纪的人类也是被各种各样的信息构成周期所接受。

通过本课题的工作，要让人们明白，在当今社会中，数据分析与反馈是不可或缺的发展方向，并以一种数据可视化的形式，来参考当代健康管理发展的研究。而我国手机保健行业迅速发展的现状，也为该行业的发展带来了一股暖流，期望能赶上中国保健服务业的现代发展，并对此进行了自己的探索。

到现在各类的健康类应用从最初的行业摸索，逐渐的发展和壮大。[1]在使用这些健康管理的APP的时候，用户会生成出信息。这种信息是看不见的，它包含了身体各项参数、个人运动指数、身体机能的变化、体质免疫的强度等多方面的信息。中国拥有巨大的数据量，其复杂度与可变性具有较高的一致性，已是全球最复杂的大数据大国，因此，持续开展大数据产业的研发与创新，是中国信息产业转型升级的有利契机。借由运用网络思考方式再配合医疗保健体系，来符合国人对于推行体育保健的需要。

在发展方面，体育健康结合的科学指导体系相对落后，这与国家广大的人民群众的健康需要是矛盾的。[2]所以，利用网络这种新型的方法，并与移动数字化、健康智能化、数据信息化等已有的技术进行融合，为健康管理领域中信息不足的问题，带来了一些借鉴。

2 设计实践及可用性测试

2.1 设计定位

某健康APP是一款由北京某科技有限公司研发的专业健康管理应用软件，其主要功能是根据用户个人的生理数据，进行科学的健身指导和饮食指导，同时还提供运动社区和社交等功能。该产品定位为专业健康管理平台，以数据为中心，以用户为核心，以“小步快跑”的方式提供科学的健身指导，帮助用户养成健康习惯。

这一设计以某健康APP为例，初步分析了这款软件。首先对现有的应用市场进行调研，从应用市场中查找了用户对健康管理类软件的使用情况进行分析，同时与目标用户进行了沟通与交流。根据调研结果分析发现用户在使用该软件时最关注的问题是数据准确性和用户体验。在功能上，主要有以下三个方面的问题需要解决：

1.数据准确性：如何保证数据的准确性是关键。

2.操作便捷性：如何使用户轻松便捷地操作产品。

3.交互体验：如何让用户更容易理解产品功能和操作逻辑。

根据以上需求点，将某健康APP中的数据可视化进行重新定位和设计，以使其更加符合用户使用习惯和需求，让产品在市场中脱颖而出。

2.1.1 数据准确性

（一）首先，在设计中将“营养课程”改为“食谱推荐”。因为原设计当中发现营养课程只推一些营养食谱视频教程，并且内容也不齐全，也没有进行更加详细分类，会影响到用户的使用效果，而重新设计食谱推荐不仅可以避免以上的，还可以每日根据用户身体情况推荐今天三餐的食谱。

其次，还调整了课程视频和增加健康饮水。在课程视频方面，将“课程”改为“课程教学”。里面课程种类非常丰富以及齐全，不仅可以起到锻炼身体的效果，还可以起到修身养性的作用。同时，为了让用户更直观地看到数据的变化，设计了DataVisual作为动态效果图。最后，还增加了用户界面的优化，首先对某健康APP 中的控件进行了重新设计和布局。其次对用户界面中的图标进行了优化调整。再次对界面布局进行了优化设计和视觉效果设计，使用户在视觉上更加舒适和美观。最后用户在使用该软件时可以直观地看到自己数据的变化情况。

（二）操作便捷性

用户在使用 APP时最大的顾虑就是操作的便捷性，因为产品界面过于复杂，且功能过多，对于用户来说需要花费大量时间去了解功能，增加了使用难度。所以，产品的操作便捷性是用户评价其体验好坏的一个重要指标。所以设计师在进行产品界面设计的时候，简化了产品的功能和操作流程，这样用户就比较容易理解和掌握了。通过了解发现原设计app中的课程教学需要转向微信才能观看，很影响用户的使用体验，所以把课程教程更改在首页界面当中，其次，在首页界面设计中也进行了调整，特别是金刚区部分采用了常用主副型布局方式，使用户操作起来便捷。  图2.1

（三）交互原型设计

在 UI界面设计中，交互原型是指在一个项目开始之前，用户使用这个界面产品来进行操作，根据操作结果来判断是否可以继续下一步操作。在交互原型的设计过程中，要确定目标用户、交互流程、信息架构等内容，以用户为中心进行设计。交互原型是一个完整的产品设计过程，需要具备一定的层次和结构，它包括用户角色、任务流程、信息架构和交互方式四个方面。

建立互动原型需要遵循一定的原理。首先，它需要具有可实现性，可以通过现有产品的开发来实现。其次，它需要具有可扩展性，能够随着项目需求的变化。最后，它还需要具有灵活性，能够根据用户的反馈不断完善和调整。

在某健康APP改良中，根据实际情况将产品分为首页，发现，记录，商城，我的等几个板块。在设计时采用模块化的设计方法，以提高用户体验和产品质量。首先将各个模块进行细分和明确功能。其次在模块内部进行任务流程设计和交互方式设计，最后对所有模块进行交互测试并修改完善。经过调整后的界面结构分为启动页-引导页-登陆页-首页-健康饮水页面-食物管理-课程教程页面-发现-记录-商城-我的

2.2 功能框架设计

在设计界面时，首先要根据功能需求来确定整体布局，然后再结合数据可视化来完成界面的设计。在功能框架上，某健康APP将其划分为4个模块：首页、发现，记录，商城，我的。

首页主要用来显示用户的基本信息、提醒等。某健康APP的首页主要功能有：金刚区，瓷片区，食物排行榜，课程教学和设置四个功能。首先增加瓷片区入口，提高转化率，然后就是金刚区采用线性图标的设计风格，使辨识度更高，更清晰，其次，食物排行榜每日推荐健康食物，增加用户记忆，使用户更加便捷快速找到，最后，就是课程教学每天推送一些轻量课程。

发现板块中话题热搜榜可让用户通过话题热搜内容进行精准查询，Tab栏分为精选+好友圈+结伴圈板块使用户可进行观看，以及精选动态，鼓励用户发表内容。记录是某健康APP的核心功能模块，主要包含：体重曲线图，日历，瓷片区三个模块。其中最突出的是表情图运用表情包形式来判定当天的计划打不达标，减轻用户对数字的焦虑感，而体重曲线图根据用户每天的体重进行统计形成可视化数据图，将不同的模块使用瓷片区的方式进行区分，让用户更好操作和理解。商城是一个购买轻食以及运动器材的页面，采用卡片式上下浏览，使用户快速找到想要物品，提高用户体验，还有限时秒杀使用户更加清楚看到秒杀物品。的主要有健康分析，功能区，其他设置，其中健康分析综合用户各方面健康进行分析，使用户快速知道那方面不足，而功能区清晰易用减少误触，分类明确清晰，提高页面品质增加趣味性。（图片2.3）

2.3 界面视觉设计

界面视觉设计是以用户为中心的设计，它的目的就是让用户通过视觉感受产品的价值，因此界面视觉设计是通过对信息元素组合以及布局进行设计，从而为用户提供有效，便捷，舒适的使用体验。界面视觉设计包含了色彩，字体，图标，图片以及布局等多个方面，在信息传达中期非常重要的作用，某健康APP改良后的界面视觉设计主要由导航栏、产品信息页组成。其中导航栏位于手机屏幕中上方产品信息页位于手机屏幕下方，两者之间相互关联，共同组成一个完整的界面。同时，导航栏还可以起到提示功能以及导航作用。

信息页位于手机屏幕的右上角，信息页分为四个部分：一级导航栏、三级导航栏以及四级导航栏。其中一级和二级导航栏中包含了基本信息和常用功能，三级和四级导航栏中包含了图片及一些图标。

2.3.1颜色规范

色彩在界面视觉设计中的运用十分广泛，它能够使画面变得生动、形象，能够体现出使用者的个性特点。某健康APP改良后的界面配色主要采用了绿色、红色和黄色等浅色调颜色，由于整体色彩比较明亮，所以并不会给人造成视觉疲劳，反而会给人留下深刻的印象。通过对颜色的合理运用，可以使设计作品更加具有视觉冲击力。此外，某健康APP的界面设计还运用了一些对比色和邻近色进行搭配，使界面显得更加生动。例如某健康APP 改良后的图标，按钮，品牌标志等采用的是绿色主题色为主、辅助色主要用于选中状态就渐变等地方，点缀色用于app图形化色彩以及其他选中状态。这些配色方案使界面在色彩搭配上更具有美感，给人以强烈的视觉冲击力。同时，某健康APP改良后的记录中的表情包就采用一些明度较高、纯度较低的色彩，如绿色、黄色和红色等。这些配色可以让用户在使用产品的时候感受到赏心悦目的视觉感受。（图片2.4）.

2.3.2按钮

某健康APP改良后的发现模块中设计了悬浮型按钮，配色在界面当中比较突出，按钮中图案简明，主要作用是加强用户对按钮的操作性，有时候为了避免遮挡，按钮会在下拉的时候自动隐藏图片2.5）。

2.3.3图标规范

图标是界面设计中的重要元素，在用户第一眼看到它时，能够快速准确的认知它所代表的意义。图标又被称为图形，是指一种有特定形状和颜色的图形，是图标设计的基础。某健康APP中的图标主要由四个部分组成：金刚区图标的形状以及底部导航栏图标形状、颜色、大小以及位置。

（一）金刚区图标形状：某健康APP首页中的金刚区图标主要采用线面结合图标。圆角线表示健康、绿色表示清新、健康，二者共同组成一个整体，给人一种非常清新、自然的感觉，使视觉上更富有趣味性。（图片2.6）

（二）底部导航栏图标形状：形体统一性，通过颜色关系来丰富图标把握图标的节奏平衡和视差平衡，同板块的图标保持严谨的设计风格，圆角/线性宽度和谐统一。其次，在设计中也考虑到了使用中和未使用时区分，使用户更加清楚在使用时处于哪个板块的页面。（图片2.6上方是使用时的图案下方时未使用时图案）

大小：某健康APP改良后的图标大小与其功能相符合。

金刚区位置大小在40px*40px，文字24px*24px，底部导航栏位置大小在48px*48px文字大小为20px。

2.3.4 字体

某健康APP改良后是采用的是微软雅黑作为字体。微软雅黑的特点是：横粗竖细，视觉效果明显，结构清晰、笔画工整、识别度高，同时又具有一定的装饰效果，还具有很好的易读性和可读性。对于图标来说，微软雅黑也是非常适合的字体，它笔画圆润流畅、形态优雅大方、色彩丰富，同时也是很多设计师喜欢使用的字体。某健康APP中使用的字体风格偏向于典雅、端庄和大方。在色彩设计方面，某健康APP 主要采用了黑色和白色两种颜色。黑色用于体现界面的专业性和客观性，白色则作为辅助色来调和页面色调。同时，为了增强页面的视觉效果，在二级导航栏以及产品信息页中采用了白色作为背景（图片2.7）。

2.3.5 界面布局

在某健康APP改良中，信息页面的布局是对整个界面的布局，它通过对信息元素的排列组合，来使用户对产品有一个更好的理解和认知。

（一）首页：搜索栏-金刚区-瓷片区-食物排榜-课程教程，在原型排版的基础上重新调正，使界面页面设计更加便捷，金刚区部分我采用的是主副型的排版，使排版更加明了，并且现在很多app金刚区都是采用主副型的排版也能让用户在操作更加得心应手，其次我还增加了健康饮水功能，可以定制个人专属饮水计划来科学喝水，图表中也能显示你今天喝水所到达量。而瓷片区采用线性图标的设计风格，以及数据可视化分析使辨识度更高，数据清晰。

（二）发现概述

发现页面主要是提供精选内容和好友圈内容以及话题热搜榜可让用户通过话题热搜内容进行精准查询，Tab栏分为精选+好友圈+结伴圈板块使用户可进行观看，在布局上也进行修改，增加精选动态区域鼓励用户发表内容。（图片2.10）

（三）记录

首先发现中的就是右下角的FAB按钮，同样的设计和位置，让用户形成使用习惯。在这个栏目中，将不同的模块使用进行区分，其中为了减轻用户对数字体重的焦虑，设计表情图来运用表情包形式来判定当天的计划打不达标，让用户更好的操作和理解，简单直观。（图片2.11）

（四）我的

我的模块的重要内容是用户的个人信息以及健康分析综合用户各方面健康进行分析，使用户快速知道那方面不足还有一些常用的工具入口，在这里采用了更宽松的排版，卡片也更加圆润，另外更高更宽的列表，方便用户点击和查看，同时辅以薄荷绿色的icon，点睛色分布在应用的所有页面中，让页面更有特色。

3 总结

近年来，随着移动互联网的不断发展，运动健康类APP成为潮流。由于此类 APP所涉及的内容较多，用户需要反复记忆才能完成相应的操作。因此，在此类 APP的 UI界面设计过程中，如何让用户方便快捷地进行操作和记忆成为了设计师们所面临的一个重要课题。

数据可视化在运动健康类 APP设计中的应用，主要是通过图形和文字两种方式来呈现运动健康类 APP中的数据信息，将运动健康类 APP中的数据进行可视化呈现，能够让用户更好地理解和掌握运动健康类 APP中的数据信息，从而提高用户的运动积极性，使用户更好地进行运动健康。

参考文献：

[1]姚广灿.基于数据可视化的智能终端UI设计[J].科技视界，2022（010）：000.

[2]汪鸿，陈锦渝.以用户思维为设计导向的生鲜电商UI界面设计研究——以食来优APP为例[J].湖北经济学院学报：人文社会科学版，2021，18（6）：3.

[3]姚忆南.数据可视化大屏UI设计的研究和分析[J].自动化仪表，2021，42（5）：4.

[4]王楠，裘晓菲.基于感知反馈的UI界面数据可视化传递仿真[J].计算机仿真，2021.

[5]汪鸿陈锦渝.以用户思维为设计导向的生鲜电商UI界面设计研究——以食来优APP为例[J].湖北经济学院学报（人文社会科学版），2021，018（006）：66-68.

[6]赵玉洁.”互联网+”时代的UI交互设计法则——以家居购物类APP界面设计为例[J].流行色，2020（1）：2.

作者简介： 江可（1988-），女，籍贯： 上海，现有职称：中级软件开发工程师 ，毕业院校：桂林电子科技大学，专业：  工业设计，研究方向： UI设计。