智能手环概念性设计与APP客户端设计第07章 智能手环APP设计Word格式文档下载.docx

智能手环概念性设计与APP客户端设计第07章 智能手环APP设计Word格式文档下载.docx

《智能手环概念性设计与APP客户端设计第07章 智能手环APP设计Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《智能手环概念性设计与APP客户端设计第07章 智能手环APP设计Word格式文档下载.docx（15页珍藏版）》请在冰豆网上搜索。

图7.1思维导图

7.3手环APP界面设计

在对APP进行信息架构时，我把APP主要分为四大板块，分别是“首页”“排行”“我的”“设置”。

同时这四项也作为APP菜单栏的四个选项卡。

那APP的功能那么多，为什么只设置4个一级选项呢？

因为在交互设计原则中有一个叫做“7±

2”法则，这是由美国认知心理学家乔治·

A·

米勒提出来的，他发现人类头脑最好的状态能记忆含有7（±

2）项信息块，在记忆了5-9项信息后人类的头脑就开始出错。

因此这个法则后来被广泛应用在移动应用交互设计上，设计师在设计菜单栏选项卡时通常不会超过5个。

整个APP采用的是扁平化设计风格，因为扁平化是目前移动UI界面设计的趋势。

扁平化设计概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出3D效果的元素一概不用。

所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。

因为这种设计有着鲜明的视觉效果，它所使用的元素之间有清晰的层次和布局，这使得用户能直观的了解每个元素的作用以及交互方式。

如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。

扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。

计师们通常坚持使用简单的外形（矩形或者圆形），并且尽量突出外形，这些元素一律为直角（极少的一些为圆角）。

这些用户界面元素方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个按钮的作用。

扁平化设计中，配色是最重要的一环，扁平化设计通常采用比其他风格更明亮、炫丽的颜色。

同时，扁平化设计中的配色还意味着更多的色调。

比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种。

而且扁平化设计中，往往倾向于使用单色调，尤其是纯色，并且不做任何淡化或柔化处理。

而我们这款手环APP主要的用户人群是年轻人，年轻人有朝气，爱时尚，因此我选择了白色作为APP的主色调，绿色为辅助色，这样的搭配给人轻松愉悦的感觉，并且绿色符合健康的主题，把APP的状态栏、导航栏和菜单栏都设计成绿色，在大背景白色的衬托下显得特别和谐融洽。

如图7.2所示，首页中的主要内容有运动计步、心率监测、血压监测、情绪监测、疲劳监测、睡眠监测这六大监测功能。

APP底色采用浅灰色填充，每个功能单独放在一个矩形模块中，任意两项功能之间留有10像素的间隙隔开，矩形模块分为左中右三部分，拿“运动计步”功能来举例：

左边是运动计步功能图标，同时也是“每日运动”的二级页面入口，中间是监测数据概况，右边是下级页面入口，即监测数据的详情页面入口。

左中右三个区域内容均在矩形模块中居中显示。

中间区域上方显示监测时间，下方显示功能名称：

“计步”和监测结果“6884步”。

“计步”跟“6884”是用户比较关注的信息，因此在设计字体的时候需要用最大字号并且使用深黑色。

时间信息和“步行步数”作为次要信息则需要淡化颜色和缩小字号，通过这样的大小对比，颜色深浅对比来突出主要信息，让用户在浏览APP的时候第一时间抓住重要信息，避免了视觉疲劳，提升了用户体验。

首页中的六大功能模块之间都必须是垂直对齐一致，这样界面会显得特别干净利落。

界面导航栏有三项内容，左边是侧边栏入口，中间是手环APP的名称“KIMI手环”，右边显示的是手环的实时电量剩余信息。

图7.2首页图7.3侧边栏

如图7.3所示，当用户想在任意时刻测量自己的身体情况时，只需要点开侧边栏选择相应的监测功能即可，而且在功能选项后面还标注出了测量该项功能需要的时长是多少，这就是交互设计中及时反馈的体现，我们设计的产品不能让用户不知所从，不能让用户焦急等待，就好用电脑下载东西时会出现一个下载进度条一样，我们得让用户知道下载速度是多少，下载进度是多少，还剩下多少没下载等这些信息，这样用户在等待的过程中心中有数，才不会出现烦躁焦急的心理。

如图7.4至7.9所示的6个“每日运动”、“每日心率”、“每日血压”、“每日情绪”、“每日疲劳”、“每日睡眠”二级页面，记录的是不同日期的监测数据，比如用户想调取4月7日的运动监测数据，那么就不需要拿着手机在APP首页上一直往下滑，这里边会有其他的功能和不同日期的监测数据干扰自己的视线，这时候用户只需要直接在首页上点击运动计步选项的功能图标，就会跳到“每日运动”二级页面，然后往下翻到4月7日的监测报告就行。

其他的功能的每日监测数据的界面设计方法跟每日运动一致。

图7.4每日运动图7.5每日心率

图7.6每日血压图7.7每日情绪

图7.8每日疲劳图7.9每日睡眠

如图7.10所示为运动计步的监测数据详情，里面记录了今日各个时间点的运动步数，运动时长和运动里程数，不同时间点的数据通过柱状图的形式呈现出来，这是非常简单便捷的处理不同时间点数据的方式，用户想查看不同时间点的数据只需要点击柱状图上不同的时间柱就行。

页面下方记录的是今日监测数据的汇总，如“总步行数”、“总步行公里数”、“消耗卡路里”。

数字信息是重要信息，因此用绿色着重突出。

如图7.11所示为心率监测的数据详情，里面记录的是该次测量结果的具体数值，测量心率时候的状态是静止状态还是运动状态，测试结果的好坏，以及根据测量数据给出的温馨贴士。

温馨小贴士的设计是非常人性化的，在设计的时候要尽量做到能够安抚大多数的用户心情，给出他们具体的锻炼计划和锻炼方法，并告诉用户正常情况下是怎么样的，你跟正常情况的差异在哪儿，需要做什么怎么做才能变得更好。

图7.10运动计步图7.11心率

如图7.12所示为血压监测数据详情，用红色作为辅助色跟血压情感相呼应，上部分列出血压测量值跟测量时间，测量值是用户比较关注的内容信息，因此需要加大号的字体，下面的测量时间是次要信息，起到的是稳定页面重心的作用，因此应该使用小号字体，避免抢了血压监测值的风头。

页面下方是“测试状态”跟“测试结果”，先简要标注测试结果为“偏高”，让用户一眼就能看见自己的监测结果，然后再在下面分析血压偏高的原因和后果，然后再给出温馨小贴士。

如图7.13所示为情绪监测数据详情，上方用一个笑脸图标稳定页面重心，然后用大号字体标出情绪监测结果，再用小号字体标出监测时间，下方在列出4个不同的情绪结果。

下方是监测结果分析和温馨小贴士。

图7.12血压参考值图7.13情绪

如图7.14所示为疲劳程度的监测数据详情页，用蓝色作为辅助色有助于缓解用户的视觉疲劳，同时也跟“疲劳”的主题相呼应。

用圆环跟水波纹来做banner设计，下方是测试状态跟测试结果以及温馨小贴士。

如图7.15是睡眠监测详情页。

用紫色作为页面辅助色，紫色代表着静谧深邃，符合睡眠的主题。

下方是“睡眠时间”、“深度睡眠”、“浅度睡眠”、“醒来次数”的监测数据，这对用户来说是非常重要的，因此把它放在了最显眼的地方，监测数据精确到分钟，跟监测功能之间拉开距离留白，这样页面会显得比较透气。

下方依旧是监测结果解释跟温馨小贴士。

图7.14疲劳图7.15睡眠

排行页一共有两大功能，一个是比赛，一个是排行，两个功能采用选项卡的方式并排分布，便于用户查看，视觉线清晰。

如图7.16所示就是比赛页面，APP通过数据统计，将数据库中的用户运动数据按照从高到低的顺序排列出名次来，并一一显示他们的头像，昵称和运动里程，因为界面范围有限，所以只需要把关键的用户最想知道的信息列出来就行了，像那些性别，个性签名什么次要元素就可以隐藏掉不显示了，因为在扁平化设计风格中“内容为王，信息为王”。

为了突出比赛的设计概念，我还给前三名用户标出金牌、银牌、铜牌，增加比赛氛围。

用户头像不宜过大，一般都是固定在一个直径120像素的正圆之内，头像与文案的距离为50像素，拉开距离便于用户阅读，也符合用户的阅读习惯。

如果用户在比赛页面中遇见了自己喜欢的或者感兴趣的其他用户，也可以点击用户头像来添加其为自己的好友，这样就可以互相聊天，互相分享自己的信息。

如图7.17所示即为好友页面，排布采用了跟比赛页面一样的方法，体现了设计风格的“一致性”。

图7.16比赛图7.17好友

如图7.18所示，“我的”页面一共包含了“阶段报告”、“亲情帐号”、“公交卡充值”和“消息通知”四个功能。

如图7.19所示为“消息通知”页面，当其他用户通过比赛页面提交添加好友申请时系统会给自己发一条消息通知，这时候就需要我们来验证是否答应对方的请求。

作为展示性非常强的信息类别，我用列表方式来设计排版。

图7.18我的图7.19消息通知

如图7.20和图7.21所示分别为“每周报告”和“每月报告”，他们的信息都是按照时间流来分布的，所以列表形式是其最好的表现形式，为了让用户在浏览和点击的时候更清晰明了，在设计的时候我特意让两项报告之间的间距比普通的列表都要大。

每两项之间还使用了一条黑色的单像素线来做为内容分割线。

图7.20每周报告图7.21每月报告

如图7.22所示为亲情帐号页面，里面写的“父亲”“母亲”“儿子”是示例，用户在添加亲情号的时候可以添加任何人的，如图7.23、图7.24、图7.25所示为“父亲身体状况”、“母亲身体状况”、“儿子身体状况”，他们都是根据相同的设计方式来排版界面的，在设计这些界面的时候，信息的排布逻辑是按照不同的功能监测数据来纵向排列，由于是详情页，因此必须要做到让用户一目了然，因此需要把每天各项功能的监测数据都直接显示出来，然后按照日期依次往下分布。

一天为一个板块区域，每个区域之间相隔20像素，间距以浅灰色底色分开，这样排版让界面显得清晰整洁。

图7.22亲情帐号图7.23父亲身体状况

图7.24母亲身体状况图7.25儿子身体状况

如图7.26所示为公交卡充值页面，用户在公交卡余额不足时可以通过app进行账户充值，由于公交卡芯片是跟手机号绑定的，所以在充值时只需要输入手机号就可以给绑定的公交卡充值。

我们生活中也有用支付宝给手机充值的经验，充值本应是件简单的事情，所以去在设计充值流程的时候我们也要做到让用户尽量少的操作的完成任务，因此充值界面一定要简洁。

图7.27为“设