# UI设计课程期中项目

**Repository Path**: XIEIC/study

## Basic Information

- **Project Name**: UI设计课程期中项目
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UI设计课程期中项目

### 竞品分析——健康食谱

#### 1.1 框架层
![1.1](https://gitee.com/XIEIC/study/raw/master/jpkj.png)
1. **首页**：该页面包含了APP的大部分功能，在首页的底部导航栏有**首页**、**内容**、**记录**、**我的**。主页有**搜索框**、**轮播图**、**“测一测”**、**“食谱分类”**、**“减脂干货”**、**“食物库”**、**“专家方案”**、**“运动推荐”**和**“精选推荐”**。用户可以根据自己的需求点击跳转进入相对应处。
2. **搜索框**：用户可以在搜索框搜索食物或者运动名称，获得搜索内容的信息和推荐。
3. **轮播图**：APP根据大众的普遍选择和用户的喜好来推荐相应内容给用户。
4. **测一测**：点击 **“测一测”** 会跳转到微信小程序，用户可以测自己的健康体重、基础代谢、BMI指数、运动消耗，并可以迅速根据自己的身体状况在 **“七分吃 三分练”** 找到自己想看的文章。
5. **食物库**：有不同种类的食物分类，用户可以在此看到各种食物的能量。上面还有搜索框，用户可以迅速查找到自己想知道的食物能量。
6. **我的**：这里有 **“收藏管理”** 、**“联系反馈”** 、**“关于我们”**，用户可以找到自己的收藏，向APP反馈意见，查看APP的简介，对这个产品迅速有清楚的认知和定位。
9. **食谱分类**：这里有各种食谱推荐给用户，可以在此处找到适合自己的食谱。
10. **减脂干货**：这里有许多关于减脂的文章推荐给用户，提供用户各方面的减肥方法。
11. **内容**：分为 **“食谱分类”** 和 **“运动课程”** 两大板块。**“运动课程”** 有身体各个部位的运动课程介绍和推荐。
13. **记录**：用户可以记录自己的当前体重和目标体重，并且通过记录自己的进食能量和运动消耗来记录可摄入量和已消耗量。页面下还有 **“知识快报”** 提供给用户饮食建议。
14. **我的**：此页面有 **“我的数据”**、**“我的收藏”**、**“意见反馈”**、**“版权说明”**、**“隐私声明”**、**“分享给好友”**、**“版本更新”**、**“退出登录”** 版块。
15. **分享给好友**：用户可以分享到**微信、微信朋友圈、QQ、QQ空间、微信收藏、邮箱、短信**。


#### 交互路径分析
![1.2.1](https://gitee.com/XIEIC/study/raw/master/jpjh.png)

#### 交互亮点提取
![1.2.2](https://gitee.com/XIEIC/study/raw/master/jpld.png)
* 薄荷营养师
##### 对于均衡营养的需求，在食物查询功能下选择通过简约风格传达不同种类食物的信息。
**优点**：近乎纯色的背景下，加大关于食物信息的文本图标群之间的空间，降低用户学习操作成本的同时，使整体视觉感受放松愉悦，呼吸感充足。

* 健康食谱
##### 以食谱和健身为主的软件对于食物信息查询仅在食物库中呈现。

**优点** ：种类不同的食物需要用户在滚动条中寻找，而根据不同需求推荐菜谱的版块占大部分比例，更清晰和明确了食谱需求。
**缺点** ：种类不同的食物需要用户在滚动条中寻找，使搜索食物功能可用性降低的同时，加大了用户在使用时的操作难度。
软件页面中的广告质量直接影响用户的使用体验，几乎整个软件充斥着大量粗糙低俗广告容易引起用户反感。

* 薄荷健康
##### 关于食物查询的功能，“薄荷营养”仅在首页最上方设置搜索框内提供搜索食物营养和热量。
**优点**：简洁的交互设计可以提升共存页面功能的空间感，为更多主要功能创造可能性。
**缺点**：过于简洁的交互呈现方式容易降低该功能的可操作性，让原本属于健康领域重要一环的食物咨询被任意更具辨识度的版块设计弱化。




#### 视觉层面分析
![1.3](https://gitee.com/XIEIC/study/raw/master/jpfx.png)

### 自己的作品分析——Nutrisporter
##### 产品定位：Nutrisporter是一款利用互联网在食物和运动领域进行大数据分析从而为用户提供有关食物和运动资讯的app。
##### logo说明：记录了人手采摘野菜的时刻，象征着人类在生命活动中采集自然界的有机食材，通过摄取其中营养成分从而满足人体的健康发展；同时也代表着新一代热爱运动的人群关注食材营养、科学烹饪，保持健康的状态及实现有效的体态调整。

#### 2.1 框架层
![2.1](https://gitee.com/XIEIC/study/raw/master/Nutrisporter.png)
1. **登入页面**：提供了四种登录方式，分别为 **注册账号登录** 、 **微信授权登录** 、 **QQ授权登录** 和 **微博授权登录** ，给用户不同的登录选择权利，即使忘了密码也可以通过点击 **“找回密码”** 找回，符合用户平时的使用习惯。
2. **主页**：该页面包含了APP的大部分功能，在页面的底部导航栏有 **主页**、 **分享** 、 **我的** 。主页有 **搜索框** 、 **轮播图** 、 **分类库和推荐食谱** 。用户可以根据自己的需求点击跳转进入相对应处。
3. **搜索框**：用户可以在搜索框搜索食物或者运动名称，获得搜索内容的信息和推荐。搜索框还配有**拍照识物**功能，用户可以通过拍照识别食物获得相应介绍。还可以通过查找观察结果，浏览自己的识物记录，为用户提供一个自我提高的空间。
4. **轮播图**：APP根据大众的普遍选择和用户的喜好来推荐相应搭配给用户。
5. **分类库**：分类库主要分为两大类：**运动**、**食物**。用户可以在分类库迅速找到自己想要的运动进行锻炼或者查找食物的能量等信息进行选择购买。
6. **推荐食谱**：推荐食谱是根据用户的喜好来进行选择**搭配运动食谱**或**经典均衡食谱**，食谱的分类多，用户选择更精确。
7. **分享**：便于用户分享自己的打卡动态，也起到了一定的 **“吸引目标用户和潜在用户”**的目的。点击 **“分享”** 功能可以进入打卡区、讨论区或是问答区，用户可以在打卡区打卡激励自己坚持锻炼、健康饮食，在讨论区分享自己的心得体会，还可以在问答区提问自己在运动或者饮食中的疑惑，有经验的用户还可以回答其他用户的问题，增强用户之间的互动性，增加用户对软件的趣味性和参与感。
8. **我的**：此页面用户可以看到自己当前的**分享记录**、**收藏内容**。用户还能修改自己的头像和个人信息，可以让其他用户更好的了解自己。还有 **“我的关注”、“版本更新”、“退出登录”、“设置和帮助”** 等功能。
9. **我的关注**：用户可以查看自己的已关注的用户列表，并且可以浏览其他用户的打卡动态。用户还可以在该界面中与好友进行进一步的交流对话。
10. **版本更新** ：用户可以查看app的版本，在有新版本时提醒用户进行更新，能够查看app的合作团队，增加用户对于软件的信任度和了解。
11. **退出登录**：方便用户对自己账号进行退出登录，切换账号等操作。用户在点击“退出登录”之后，还可以在相同位置点击“用户登录”来进行重新登录。
12. **设置和帮助**：用户可以在此处对该APP进行相关设置（如音量，显示等），同时，还可以对APP进行**意见反馈和寻求帮助**。

#### 2.2 交互路径分析
![2.2](https://gitee.com/XIEIC/study/raw/master/zpjh.png)

#### 2.3 视觉层面分析
![1.3](https://gitee.com/XIEIC/study/raw/master/zpfx.png)