# 界面设计-期中

**Repository Path**: xinqi3050/interface_design__interim

## Basic Information

- **Project Name**: 界面设计-期中
- **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-04-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 界面设计-期中

## 一、竞品分析

### 1.1 架构层

### 主导航的信息架构简要列明：
![信息架构图](https://images.gitee.com/uploads/images/2020/0504/151926_d93a7039_1532326.png "印象信息架构图.png")

### 细分页面的结构框架：
![页面细分图](https://images.gitee.com/uploads/images/2020/0504/160429_798b1ab1_1532326.png "未命名.png")

### 1.2 交互路径分析

#### 《印象》核心交互路径分析-拍vlog

#### 核心页面：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0508/152909_a8351f97_1532326.png "屏幕截图.png")

#### 交互路径分析
![输入图片说明](https://images.gitee.com/uploads/images/2020/0508/155318_5e6def28_1532326.png "屏幕截图.png")

#### 总结：拍摄viog页面整体很整洁，要点突出，配色鲜明，布局合理。点击“创作”进入vlog拍摄页面
### 优点：

- 1.功能齐全，使用简洁明了。
- 2.有一键制作功能，傻瓜版，用户上手难度低。
- 3.广告植入别出心裁，与APP的核心功能相适应，不会使用户出现反感的心理。

### 缺点:

- 1.功能虽说齐全，但是没有自己的特色，部分功能没有其他竞品APP的深度
- 2.付费的项目有点偏多

### 亮点：
* 新颖的广告插入模式。用比赛方式来植入广告；除此之外在，各种素材和功能使用上也插入了广告，使用户感到合理。增加了用户的消费欲望。

### 交互亮点分析
![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/154056_f7cc9d0a_1532326.png "4de431ff7bd23af44fcddc97e51e9fd.png")

## 1.3 视觉层面分析

## 颜色规范：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162234_a26aefa3_2278368.png "屏幕截图.png")

#### 总结：以朽色为主，APP主体大多使用暖色调。令人感觉到温暖，愉快，兴奋，开朗。并采用了邻近色配色法则，不会使用户感觉颜色突兀。整体使用色调较少，给用户一种简单明了的感受。

## 字体规范：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/150801_95a449d3_1532326.png "fc94383612748800702a17f2ef208fd.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162400_4392181e_2278368.png "屏幕截图.png")

#### 总结：字体型态分明，使结构有层次感。字体根据内容重要性，从大到小，使人有从上往下阅读的趋势，我觉得转发模块和评论模块位置应该调换，更加符合视觉美感。

## 图标规范：
### 常规图标：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162523_2526f6a6_2278368.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162616_ce116f6a_2278368.png "屏幕截图.png")

#### 总结：大多数图标没有赋予颜色，图标型态与对应的意义很相似。在导航栏中，图标包含了颜色对比（黑白两色）原则，可以让用户清楚的知道自己在哪一个栏位下。功能栏图标全是黑橙两色，背景采用冷色调黑色，中间图标采用暖色调朽色，突出了中间图标为重点，并与APP主旨相对应

### 内容版式规范：
#### 多列内容模块：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162807_f4bd9af9_2278368.png "屏幕截图.png")

#### 我觉得这个多列内容模块可以采取大小对比的原则，更好的突出目标内容。

### 单行内容模块：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162838_bab5bcf3_2278368.png "屏幕截图.png")
### 规整化内容模块：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162857_a14c2851_2278368.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0504/162904_e4a25b9b_2278368.png "屏幕截图.png")

#### 总结：同栏位下内容模块排版方式使相同的，可以使整个界面内容看起来更整体。多列内容模块那边我觉得可以采用卡片形式，以大小对比的原则，可以更好的突出目标内容。规整化内容模块中，每个区域大小不尽相同，当内容多时可能会使用户觉得页面杂乱，我觉得最好每个区域大小一致，可以让人有种整齐简约的视觉美感。

## 二、自己作品
### 作品名称：瞬间

- 瞬间app是一款手机拍照摄影软件,是热衷拍照和自拍的人的必备软件，它可以帮助用户捕捉生活的每一个精彩的瞬间。

### 2.1 结构层

### 主导航的信息架构简要列明：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/174615_eb317bcf_1532326.png "在这里输入图片标题")
### 细分页面的结构框架：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/193020_f869ab25_1532326.png "瞬间app界面.png")

### 2.2 交互路径

#### 《瞬间》核心交互路径分析-vlog创作

#### 核心页面：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/144613_2f8cf87e_1532326.png "5ee823b7c051d3b8f5f52d6000f5cbc.png")

#### 交互路径分析
![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/191913_c5670859_1532326.png "8ca0230c17fc6786322c4d51d78c2b6.png")

#### 总结：功能页面整体很整洁，要点突出，配色简单，布局合理。点击“开始vlog创作”进入vlog拍摄页面
### 优点：

- 1.功能齐全，使用简洁明了。
- 2.有一键制作功能，用户上手难度低。
- 3.核心功能明确，一目了然。

### 2.3 视觉规范

### 颜色规范：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0512/100915_b5c405e5_1532326.png "f21a9b15d0c532087300cc15c20ca09.png")
#### 总结：以粉色为主，给用户一种梦幻，甜蜜的感受。令人感觉到舒适，愉快，兴奋。辅助用淡蓝色，淡化黄，使用户保持冷静的状态，不会过多的沉浸在梦幻，甜蜜中无法自拔。并采用了互补配色和三色对比原则，不会使用户感觉颜色突兀。

### 字体规范：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/213944_551b179b_1532326.png "8a2d302f9044f5fa030f63c9168d01d.png")

#### 总结：字体型态分明，使结构有层次感。字体根据内容重要性，从大到小，使人有从上往下阅读的趋势，符合视觉美感。

## 图标规范：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/201720_d1f74446_1532326.png "51aaf8b0b23eb0628130cabafd582f1.png")

### 内容版式规范：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/223955_6aa498ad_2278368.png "屏幕截图.png")

#### 卡片内容形式：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/224235_8eb1150c_2278368.png "屏幕截图.png")
##### 总结:个人资料采用卡片单行排列模式，首先辅以白色的色块作为背景，然后放上两色卡片，以至于卡片上详细的内容，比如数字，图形能更好的丰富支撑卡片。以色块为主，设计一个淡蓝色和一个淡黄色的卡片，上面并有图标和标题。两个颜色的对比，让这些内容更有视觉冲击力。
#### 滑动卡片内容：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0511/224801_00e50f17_2278368.png "屏幕截图.png")
##### 总结：以滑动卡片为主体，采用对比的原则。三色对比，广告栏位，背景色，和卡片颜色；两线对比，选中的卡片边框线条颜色明显比其他卡片的边框线条颜色深；大小对比，选中的卡片和未选中的卡片大小不同。以此来突出选中的主体内容和标记当前的位置。