安卓APP源码和设计报告——体重档案APP（含答辩PPT）

1移动媒体程序设计实现课程设计报告

课题名称：体重档案APP小组

小组成员：xxx xxx xxx

目录

1概述31.1项目背景31.2系统目标32需求分析42.1系统功能分析42.1.1数据保存42.1.2图标功能42.1.3诊断功能52.1.4更多功能52.2系统平台62.2.1Android开发环境介绍62.2.2Android开发平台搭建63概要设计83.1总体设计83.1.1系统总体结构83.1.2子系统系统接口93.2数据库设计93.2.1数据库E-R图设计93.2.2数据表设计103.3相关技术介绍103.3.1Activity ……103.3.2Intent ……113.3.3Service ……113.3.4Layout布局……123.3.5控件介绍……134函数设计154.1函数列表154.2函数调用图1错误!未定义书签。5系统实现175.1设计过程175.1.1 “图表”界面内功能的实现……175.1.2 “数据”界面内各功能的实施……185.1.3“诊断”界面内各功能的实现……205.1.4 “更多”界面内各功能的实现……216使用说明226.1.1 体重档案软件在电脑模拟环境下测试226.1.2 体重档案软件在Android手机下测试247项目总结268作业具体分工

摘要：

Window 操作系统的诞生成就了微软帝国，同时也造就了 PC 时代的繁荣， 然而如今，以 Android 和 iPhone 手机为代表的智能移动设备的发明与互联网云技术的兴起预示着移动互联网时代已经来临。

在这个互联网繁荣的时代，有一颗超新星，以它独特性能优势与人性化的 UI 设计使它在短短的几年迅速的占领了智能移动设备的市场份额，它就是 Google 的 Android！这也意味着 Google 在移动互联网时代开始抢跑并领跑。

Android 是基于 Linux 平台完全开源的手机操作系统，同时开发语言为 Java。在本次课程设计中我们组选择了以 Android 为平台的手机体重记录app来作为我的课程设计，选择体重记录app不仅可以提升技术，同时也很实用，为人们时刻了解自身的体重和健康带来了方便。也有利于提升自己的气质，健康生活

关键词：

移动互联网时代 Android 体重记录app 健康生活

---

概述

1. 项目背景

胖是历来已久的一种多因素引起的代谢障碍疾病。早在1948年，世界卫生组织已将“肥胖”列入疾病名单。随着全球经济的快速发展，移动互联网的兴起、人民生活水平的提高，加上不合理的膳食结构、不良生活方式等出现，肥胖已成为公共卫生焦点问题。随着人们对肥胖危害的认知度提高，减重的治疗方法也在历久弥新，健康生活，控制体重已日益成为人们所重视的问题。与此同时，大众审美观念的趋势也促使了人们对自身体重的高度重视。随着移动互联网和智能手机的发展和不断进步，当今市场上已出现各种五花八门的健康记录APP，几乎所有人的智能手机上都会有一款检测身体状况的APP，这些APP可以很好的帮助人们了解自身身体状况，及时做出调整。

系统目标

根据用户对该类软件的使用要求，我们组制定了如下系统目标：

• 操作简单、易于掌握、界面简洁清爽。
• 方便对屏幕进行触摸操作。
• 要包含对身体状况的评估，并记录长时间内的数据。
• App占用内存不应过大。
• 系统运行稳定，不能和手机固有的软件冲突。
• 保密性好，安全可靠。

需求分析

系统功能分析

该系统具有的功能有：

• 可以长时间保存体重状况
• 根据数据显示出散点图，直观反映体重变化情况
• 可以查找出某一天的数据
• 可以根据输入的身高、体重、性别判断出身体状况
• 给出合理饮食建议
• 介绍一些与身高体重相关的指标

数据保存

建立了一个数据库用来记录长期的数据。如图：

图表功能

通过图表直观的反映出体重变化情况。如图：

诊断功能

可以根据输入的身高、体重、性别判断出身体状况，如图：

更多功能

个人信息的设置和系统功能的设置等，如图：

系统平台

Android开发环境介绍

Android平台使用Java编程语言来开发应用程序，而Android提供了对Java的核心支持。考虑到Java虚拟机的执行效率和占用资源情况，Google重新设计了Java的编译器，命名为Dalvik。Dalvik是经过优化的Java编译器，允许在有限的内存中同时运行多个虚拟机的实例，并且每一个Dalvik应用作为一个独立的Linux进程执行，独立的进程可以防止在虚拟机崩溃的时候所有程序都被关闭。

项目的开发在Eclipse环境中进行，由于进行的是Android应用程序的开发，

由以上分析可知，Android平台的搭建需要Android SDK、Java SDK、和AVD三个软件。

Android开发平台搭建

①Java JDK的安装；（选择适合自己电脑配置的版本）

②下载完成后，开始安装

③配置java的环境变量

（1）新建变量名为”JAVA_HOME”,变量值为JDK的安装路径

(2)编辑（若变量中没有则新建）变量名为”PATH”，在原变量名字后加上“;%JAVA_HOME%bin;%JAVA_HOME%jrebin”

（3）编辑（若变量中没有则新建）变量名为”CLASSPATH”，变量值“.;%JAVA_HOME%lib;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar”

④确认环境配置是否正确

⑤Androidstudio的下载，链接：http://tools.android-studio.org/。

⑥下载完成后开始安装

概要设计

总体设计

系统总体结构

在这里说明系统的总体结构流程图如下图所示。

子系统系统接口

数据库设计

数据库E-R图设计

数据库的概念设计，即利用数据模型进行概念数据库的模式设计。根据体重档案系统的需求，设计出以下的实体-关系模型（E-R）图如图。

性别

体重

身高

生日

用户

1

计算

1

身体状况

BMI

BMR

数据表设计

数据库的逻辑设计，即把概念设计得到的概念数据库模式变为逻辑数据模式，它依赖于DBMS。根据体重档案系统的需求分析及数据库的概念设计，建立数据库了info_db。

建库语句：create database info_db;

用户信息表(usertbl)

列名	数据类型	是否允许为空	说明
birth	date	是	出身日期
weight	float	是	体重
height	float	是	身高
sex	bool	否	性别

表3.5 身体状况信息表(healtbl)

列名	数据类型	是否允许为空	说明
BMI	float	否	BMI值
BMR	float	是	BMR值

相关技术介绍

Activity

在Android应用程序中，一个活动Activity通常就是一个单独的界面。每一个界面都被实现为一个独立的类，并且从Activity基类中继承而来，Activity将会显示由空间组成的用户接口，并对事件做出响应。大多数的应用都是由多个Activity显示组成。

简单的说，Activity代表一个用户所能看到的界面，主要用于处理应用程序的整体性工作，例如，监听系统事件如按键事件、触摸屏事件等，为用户显示指定的View，启动其他Activity等。所有应用的Activity都继承于android.app.Activity类，该类是Android提供的基层类，其他的Activity继承该父类后，通过父类的方法实现各种功能，这种设计在其他领域也较为常见。

3.3.2 Intent

Android基本的设计理念是鼓励减少组件间的耦合，因此Android提供了Intent，Intent提供了一种通用的消息系统，它允许在你的应用程序与其他的应用程序间传递Intent来执行动作和产生时间。使用Intent可以激活Android应用的三个核心组件：活动、服务和广播接收器。

Intent可以划分为显示意图和隐式意图。显示意图调用Intent，SetClass方法明确制定了组件名的Intent为显示意图，显示意图明确制定了Intent应该传递给那个组件，在同一个应用内部使用的。隐式意图没有明确指定组件名的Intent为隐式意图，Android系统会根据隐式意图中设置的动作（action）、类别（category）、数据（URI和数据类型）找到最合适的组件来处理这个意图。

Intent负责对应用中一次操作的动作、动作涉及数据和附加数据进行描述，Android则根据此Intent的描述，负责找到对应的组件，将 Intent传递给调用的组件，并完成组件的调用。因此，Intent在这里起着一个媒体中介的作用，专门提供组件互相调用的相关信息，实现调用者与被调用者之间的结构。

3.3.3 Service

如果把Activity比喻为前台程序，那么Service就是后台程序，Service的整个生命周期都只会在后台执行。Service跟 Activity一样也由Intent调用，由于Service在后台运行，所以没有界面，用来处理耗时比较长，而且Service不是一个单独的进程，也不是一个单独的线程。Service有两种类型：

本地服务（Local Service）：用于应用程序内部；

远程服务（Remote Sercie）：用于android系统内部的应用程序之间。

前者用于实现应用程序自己的一些耗时任务，比如查询升级信息，并不占用应用程序比如Activity所属线程，而是单开线程后台执行，这样用户体验比较好。后者可被其他应用程序复用，例如天气预报服务，其他应用程序不需要再写这样的服务，调用已有的即可。

Service的生命周期，Service有startService和bindService两种启动Service方法，每种方法Service的生命周期是不一样的。

通过startService（）——Service会经历 onCreate --> onStartCommand()，stopService的时候直接onDestroy，如果是调用者直接退出而没有调用stopService的话，Service会一直在后台运行，下次调用者再起来仍然可以stopService；

通过bindService（）——Service只会运行onCreate()-->onBind() 这个时候调用者和Service绑定在一起 unbindService的时候onUnbind() --> onDestroyed()，调用者退出了，Srevice就会调用onUnbind() --> onDestroyed()。在这里需要注意的是Service的onCreate的方法只会被调用一次，就是你无论多少次的startService又 bindService，Service只被创建一次。如果先是bind了，那么start的时候就直接运行Service的onStart方法，如果先是start，那么bind的时候就直接运行onBind方法。如果你先bind上了，就stop不掉了，只能先UnbindService, 再StopService,所以是先start还是先bind行为是有区别的。

3.3.4 Layout布局

布局方式有很多种，比如线性布局（Linear Layout）、相对布局（Relative Layout）、表格布局（Table Layout）、网格视图（Grid View）、标签布局（Tab Layout）、列表视图（List View）和绝对布局（Absolute Layout）。本文设计主要采用相对布局（Relative Layout）、线性布局（Linear Layout），所以就相对布局和线性布局我们来做简单地介绍。

相对布局 Relative：里面可以放多个控件，允许子元素指定它们相对于父元素或其他元素的位置（通过ID指定）。因此你可以按正确的顺序对齐两个元素，或者让一个视图在另外一个下面，居于屏幕中间，左边的中间，等等。元素通过给定顺序来绘制，因此如果第一个元素在屏幕中间，其他以它对齐的元素都会对齐到屏幕中间。同样，因为这个顺序，如果使用XML来指定这个布局，你将引用的元素（为了定位其它视图对象）必须被列在XML文件中，在你通过引用ID从其他视图中引用它之前。其中一些特性直接由元素支持，另外一些由它的LayoutParams成员变量支持（为所有这个屏幕中的元素子类化RelativeLayout，因为所有元素都是RelativeLayout父对象的子元素）。已定义的相对布局RelativeLayout参数是：width,height,below,alignTop，toLeft以及

padding[Bottom|Left|Right|Top]和margin[Bottom|Left|Right|Top]。注意其中一些参数明确是相对于其他元素的布局位置，所以它们的数值必须是你的相对位置元素的ID。

线性布局 LinearLayout：线性布局是所用布局中最常用的方式之一，RadioGroup, TabWidget，TableLayout，TableRow，ZoomControls类的父类。LinearLayout可以让它的子元素垂直或水平的方式排成一行（不设置方向的时候默认按照垂直方向排列）。LinearLayout以你为它设置的垂直或水平的属性值，来排列所有的子元素。所有的子元素都被堆放在其它元素之后，因此一个垂直列表的每一行只会有一个元素，而不管他们有多宽，而一个水平列表将会只有一个行高（高度为最高子元素的高度加上边框高度）。LinearLayout保持子元素之间的间隔以及互相对齐（相对一个元素的右对齐、中间对齐或者左对齐）。

LinearLayout还支持为单独的子元素指定weight 。好处就是允许子元素可以填充屏幕上的剩余空间。这也避免了在一个大屏幕中，一串小对象挤成一堆的情况，而是允许他们放大填充空白。子元素指定一个weight 值，剩余的空间就会按这些子元素指定的weight比例分配给这些子元素。默认的weight值为0。例如，如果有三个文本框，其中两个指定了weight值为1，那么，这两个文本框将等比例地放大，并填满剩余的空间，而第三个文本框不会放大。

1. 控件介绍

1、TextView——文本控件，可以用它来显示文字，就像一个标签一样，对TextView是怎么设置显示的文本，怎样设置字体的大小，字体的颜色，字体的样式。TextView包含以下子类：Button， CheckedTextView，Chronometer，DigitalClock，EditText。

• android:id——控件的标识符
• android:layout_width——设置控件的宽度
• android:layout_height——设置控件的高度
• android:layout_marginTop——设置文本的上外边距
• android:textSize——设置文本文字的的大小
• android:paddingLeft——设置元素左内边距

2、Button——按钮控件，在button内部可以放置内容，比如文本或图像。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或或多媒体。例如，我们可以在按钮中包括了一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。不过button禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。下面是Button的部分属性：

• android:id——控件的标识符
• android:layout_width——设置按钮的宽度
• android:layout_height——设置按钮的高度
• android:textSize——设置按钮里文字的大小
• android:layout_marginTop——设置按钮的上外边距
• android:text——设置按钮中的文字
• android:visibility——设置按钮里的元素是否可见

3、EditText——文本编辑框，TextView的直接子类，所以EditText会继成父类TextView的一些方法。在布局中配置EditText也需同时配置一个Button，这样可以在代码中监听Button的事件，以便获取当前在EditView中输入的内容并且显示出来。在EditView可以限制输入的字符串类型。下面是EditText的部分属性：

• android:id——控件的标识符
• android:layout_width——设置输入框的宽度
• android:layout_height——设置输入框的高度
• android:layout_weight——设置输入框占父控件的比例
• android:inputType——设置输入框内的字符串类型
• android:hint——设置在输入框输入内容前默认的文字

4、ImageView——标签可以显示任意图像，例如图标，图片等。ImageView类可以加载各种来源的图片，需要计算图像的尺寸，以便它可以在其他布局中使用，并提供例如缩放和着色等各种显示选项，在本文用来显示城市图片。下面是ImageView的部分属性：

• android:id——设置图片的标识符
• android:layout_width——设置图片的宽度
• android:layout_height——设置图片的高度
• android:visibility——设置图片是否可见性

函数设计

函数列表

返回类型	方 法	简 述
boolean	clipRect (int left,int top,int,right,int,bottom)	裁剪一个矩形区域
SetStorkeWidtg(float width)	设置笔刷的宽度
onKeyDown(int keyCode, KeyEvent event)	点击后触发事件
int	getAudioSessionId()	返回体重的会话ID
getCurrentPosition()	取得当前显示的位置点
getDuration()	取得文件的长度
static WeightMaker	create(Context context, int resid)	从指定的源id中创建一个WeightMaker对象
create(Context context, Uri uri)	从指定的Uri中创建一个WeightMaker对象
create(Context context, Uri uri, SurfaceHolder holder)	从指定的Uri中创建一个WeightMaker对象，并在Surfaceview中显示
void	DrawPoint(float[]pts,int offset,int count,Paint paint)	绘制多个点
addSettingItem(int layout_id, String title)	添加下拉选项
onDateSelected()	搜索前异步准备
release()	释放此WeightMaker对象占用的资源
reset()	重置WeightMaker到未初始化状态
seekTo(int msec)	寻找特定日期的体重
start()	开始计算
stop()	停止计算

4.2函数调用图

系统实现

设计开发过程

“图表”界面内功能的实现

页面的设计

整体采用线性布局(LinearLayout )，并且有用作图的的类函数来实现曲线的绘制。

主要代码具体如下：

public static interface OnChartModeChangeListener {

public void onChartModeChanged(int chartmode);

}

public static void initialize(Context context) {

mSharedPreferences = PreferenceManager.getDefaultSharedPreferences(context);

}

public static void setOnChartModeChangeListener(OnChartModeChangeListener listener) {

mChartModeChangeListener = listener;

}

public static boolean isFirstStart() {

return mSharedPreferences.getBoolean(CONFIG_FIRST_START,true);

}

“数据”界面内各功能的实施

该界面主要功能为数据的添加、删减、和查找。

主要的代码实现如下：

//查找

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_data);

mDataSummary = (LinearLayout)findViewById(R.id.DataSummary);

mCondition = getIntent().getStringExtra("Condition");

if (mCondition != null && !"".equals(mCondition)) {

getActionBar().setDisplayHomeAsUpEnabled(true); getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_bg));

getActionBar().setTitle(getString(R.string.activity_title_search_result));

mDataSummary.setVisibility(View.GONE);

}

mTextContinuousDays = (TextView)findViewById(R.id.TextContinuousDays);

mTextReduceWeek = (TextView)findViewById(R.id.TextReduceWeek);

mTextReduceMonth = (TextView)findViewById(R.id.TextReduceMonth);

updateDataSummary();

mWeightListView = (ListView)findViewById(R.id.WeightDataListView);

mWeightDataAdapter = new WeightDataAdapter(this,mCondition);

mWeightListView.setAdapter(mWeightDataAdapter);

registerForContextMenu(mWeightListView);

OnItemLongClickListener longListener = new OnItemLongClickListener() {

public boolean onItemLongClick(AdapterView<?> parent, View view,int position, long id) {

mSelectedPosition = position;

mWeightListView.showContextMenu();

return true;

}

};

mWeightListView.setOnItemLongClickListener(longListener);

}

添加和删除：protected void updateDataSummary() {
mTextContinuousDays.setText(WeightDBHelper.getContinuousDays()+"天");
Double reduced = 0.0;
reduced = WeightDBHelper.getWeightReduceThisWeek();
if (reduced > 0) {
mTextReduceWeek.setText("+" + new DecimalFormat("0.00").format(reduced) + " kg");
}
else {
mTextReduceWeek.setText(reduced + " kg");
}
reduced = WeightDBHelper.getWeightReduceThisMonth();
if (reduced > 0) {
mTextReduceMonth.setText("+" + new DecimalFormat("0.00").format(reduced) + " kg");
}
else {
mTextReduceMonth.setText(reduced + " kg");
}
}

“诊断”界面内各功能的实现

public void onClick(View v) {

Intent intent = null;

switch (v.getId()) {

case R.id.MoreAccount:

intent = new Intent(this,PersonalActivity.class);

startActivity(intent);

break;

case R.id.MoreBackupOrRestore:

break;

case R.id.MoreSetting:

intent = new Intent(this,SettingActivity.class);

startActivity(intent);

break;

case R.id.MoreWhatBMI:

intent = new Intent(this,WhatActivity.class);

intent.putExtra("What", "BMI");

startActivity(intent);

break;

case R.id.MoreWhatBMR:

intent = new Intent(this,WhatActivity.class);

intent.putExtra("What", "BMR");

startActivity(intent);

break;

case R.id.MoreAboutUs:

intent = new Intent(this,AboutActivity.class);

startActivity(intent);

break;

default:

return;

}

}

“更多”界面内各功能的实现

该界面主要实现各个页面间的跳转，比较简单，就不附源代码了。

测试说明

体重档案软件在电脑模拟环境下测试

软件编写完成，对其进行测试，首先将手机体重档案系统在电脑模拟环境下测试的方案，以下是对系统进行测试，在Android 的菜单栏中用鼠标点击运行按钮，在弹出的窗口中选择"Run As"→"Android Application"安装该应用程序到Android 模拟器并启动它，如图4所示：

等待模拟器启动完成软件的安装，然后单击图表，就会显示近期的体重变化情况，电脑模拟测试结果如图所示：

通过数据按钮可添加当下的体重，和查询历史体重，如图所示

通过诊断按钮可查询身体的状况，如图所示

在更多的界面里可以设置个人信息、系统设置等，如图所示：

体重档案软件在Android手机下测试

该测试说明开发的体重档案软件可以独立在Android设备运行，满足设计要求的独立性，通过观察其所占内存，可以发现，体重档案软件十分小，获取的数据的准确性很高，实时性；满足设计要求。

项目总结

经过这几周的代码及开发文档书写，课程设计也随之进入收尾阶段，体重档案系统的基本功能也逐个完成了。

在这次课程设计中，经过与队友的协同配合，通过学习与思考并实践，加强了我们的团队协作意识，并且提高了我们的学习水平，使我们对Google Android开发及Java等相关的技术初步了解，同时，由于我们做的是移动软件的开发，从起初资料的查询，让我们在有限的时间内丰富了对Android开发的认知，积累了理论上的知识。需求分析，可行性分析，再到后来的Java配置环境，书写代码及其调试，让我们作为用户对该类系统的需求和软件运行的环境有了一定了解。将之前学过的数据库知识跟Java技术结合在一起，理论联系实际，在实践中锻炼了我们分析处理问题的能力并激发了这方面的兴趣。

这次课程设计的过程中，还让我们巩固了并加深了对软件工程这门学科的认识，尤其让我在使用工程流程的各个阶段有了进一步的了解，并相对独立地完成各个阶段的任务。通过这次设计还让我们明白了需求分析和总体设计是系统真正开发的关键，它规划出系统的大致模块和业务接口，流程转换以及模块之间的关系。如果总体设计规划不科学，将会导致之后的详细设计工作出现冗余，目标不明确甚至失去方向。虽然在开发过程中受水平和时间所限，在设计中还有些欠缺或考虑不周全的地方，但这次课程设计的经历将对我们今后的学习和工作都将产生重大意义。

作业分工

xx：代码+world+ppt制作

xxx：app设计+ppt制作

2体重档案App设计

1. 用户研究
2. 各年龄段都有用户
3. 体重高于正常标准，并且关注自身情况想要有所改变的人群

B．体重较为正常，但是想要保持体形的人群；

C．关心自身身体情况的。

（二）主要用户定位

用户目标：希望能再APP上清楚的了解自己身体近期的体重变化，并能通过体重曲线图更直观地反映，清楚自己所需要达到的正常值。

体验目标：使用户能制定更合理适合自身的运动计划，知道自身体重的近期变化情况，逐步增强自信。

最终目标：督促体重超标人群完成健身目标，增强信心，身体更加健康。

人生目标：表达了对美好生活的憧憬与向往

1. 概要设计
2. 需求定义
3. 前景综述
   使用户对自身体重有即时的了解，更加清楚自己身体的健康状况。采取相应的措施改善现状。
   （2）人物角色的期望
   对自身体重有更多的了解；
   能随时直观、方便地，了解自身体重变化情况；
   能了解当前体重与正常值的差距；
   登录、登记时间，体重信息过程简单，管理方便。
4. 情境场景剧本
   小K是个体重超标的孩子，小的时候不以为意，可随着年龄的增长，渐渐感受到了同学们的异样眼观，这让他的自尊心受到了伤害。所以他给自己定下了一系列的减肥计划。
   一个阳光明媚的早晨，小K像往常一样来到了操场上开始自己的晨练。他打开了手机上的体重档案，设置好今天的日期，以及当前体重。然后开始了新的一天的锻炼。晨练结束后看了一眼体重档案上显示的步数以及消耗的卡路里，满意地点了点头，去食堂简单地吃过早饭准备上课。
   下午下课之后，小K和朋友约好一起去健身房健身。一套组合下来让他大汗淋漓，洗过澡之后习惯性地去称量一下体重，身体虽然有些虚弱感，但脸上渐渐浮现出了满意的笑容，没错，自己体重今天又降低了一些，距离自己目标的正常值又近了一步。并将当前体重登记到体重档案，看了一眼自己近期的体重变化曲线，他更加清楚自己是应该加强锻炼量还是适当休息调理一下，毕竟物极必反太大的运动量也不一定是好事。看着逐渐体重逐渐降低的曲线，信心也在逐步提高，他坚信自己总有一天能变成正常身材，并且身体越来越健康。
5. 确定需求

在主页注册和登陆用户账号；

在“图表栏”更直观反映自身体重的近期变化；

在“诊断”知道自身与正常值得差距；

在“更多”了解更多健康小常识

2．框架定义

（1）输入法：键盘、触屏点击。

（2）数据与功能元素：界面中主要展现给用户的数据和功能。

A．主要数据元素：

主页——用户名，密码；

图表——体重曲线：x轴日期，y轴体重；

数据——日期，体重；

诊断——当前身体指标，诊断结果；

更多——健康小常识；

B．主要功能元素：

对数据元素的操作及其在界面上的表达（比如需用控件、工具、位置等）。

满足主页需求的主要功能元素如下

在“用户”输入框中输入用户名；

在“密码”输入框中输入密码；

通过点击“登录”按钮进行登录。

满足体重档案需求的主要功能元素如下：

从首页点击数据进入数据列表界面，；

从数据列表界面点击某一类别数据进行对时间以及体重的登记；

（3）决定功能组及层次（顺序）

把数据和功能元素按需求之间的关联程度、相互之间的比较关系等，在屏幕（页面）中利用网络、标签页、组框等方式进行分组、聚合并组织好功能组之间的层次关系。

（4）勾画大致的交互框架

根据需求、数据信息元素与功能元素归纳结果以及功能组与层次划分，勾画大致的交互框架草图。

1. 构建关键线路场景剧本

第二天，小K依旧来到操场上进行晨练，他在“更多”里了解到了一些新的健康小常识，于是改进了锻炼方式，同时饮食方面也更加注重合理搭配了，这对他起到了事半功倍的效果。看一眼“图表”里他近期体重变化情况，发现最近体重变化过快，他并不急于求成，知道这样下去会对身体造成负担，这并不是件好事，于是决定先稳固下现阶段身体情况再开始下个阶段的锻炼。在“诊断”里输入自己现在的体重，并与正常值作对比，一系列计划也渐渐在他脑海中成型，深深地吸了一口气目光坚定地看了一眼操场上还在晨练的人们，转身离开了。

3答辩PPT