# interface_design

**Repository Path**: NFUNM022/interface_design

## Basic Information

- **Project Name**: interface_design
- **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-03-31
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 界面设计期中项目

## 一、竞品分析：飞猪
### 1.1 架构层
#### 主导航信息架构
![主导航](https://images.gitee.com/uploads/images/2020/0511/111056_2b77af6f_1648226.jpeg "主导航信息架构.jpg")
#### 产品结构框架
![产品结构框架](https://images.gitee.com/uploads/images/2020/0511/111140_9c7056bf_1648226.jpeg "产品结构框架.jpg")
#### 总结：
1. 在多个页面提供了OTA服务，能够对不同场景下的需求进行细分，帮助用户快速的找到自己所需的服务，而不会显得很累赘。
2. 景点的攻略和行程推荐以多种形式出现在各个页面，虽然内容大致一样，但是有明显的侧重点，可能是A/B test的一种形式。
3. 各个景点都提供了快速加入“行程”的接口，为用户指定“行程”提供便利。

### 1.2 交互路径分析
#### 查询攻略
![查询攻略](https://images.gitee.com/uploads/images/2020/0511/111215_d4a52cef_1648226.jpeg "查询攻略.jpg")
#### 总结：
1. 加行程能够直接将用户喜欢的景点加入旅行计划，降低了制作完整攻略的时间成本，能够极大地提高效率和用户满意度。
2. 景点详情中的相关商品能让用户快速的找到自己想要的OTA服务，直接完成流量转化实现盈利。
3. 相关攻略不仅提高了用户对景点评价的可信度，还能将文中提到的景点、服务进行汇总，帮助流量转化。
4. 相关攻略中，点赞、评论、收藏按钮均为半透明的设计，能够让用户正常阅读相关内容而不会被挡住，利用视觉边缘加强存在感，吸引用户点击。
5. 文中提及按钮包含具体提到的景点数字，能够在用户点击前就明确的得到提示。
6. 文中提及以弹窗的形式出现，避免了占用过多的空间。
7. 需要付费的产品与服务是唯一使用亮红色按钮的地方，能明显的将付费与免费部分区分。

### 1.3视觉层面分析
#### 颜色规范
![颜色规范](https://images.gitee.com/uploads/images/2020/0511/112249_404014a7_1648226.png "颜色规范.png")
#### 总结：
以橘色为主色调，橘色代表欢快活泼，加以渐变辅助色点缀，使得整体更富有张力，比较符合飞猪定位年轻群体用户的特性。
#### 图标规范
 **常规图标**
![常规图标](https://images.gitee.com/uploads/images/2020/0511/112403_e1d8051f_1648226.png "常规图标.png")

**Tabbar图标**
![Tabbar](https://images.gitee.com/uploads/images/2020/0511/112517_afc8bc26_1648226.png "Tabbar.png")

**品类区图标**
![品类区](https://images.gitee.com/uploads/images/2020/0511/112616_e24855af_1648226.png "品类区.png")

**第三方登录图标**
![第三方](https://images.gitee.com/uploads/images/2020/0511/112717_e8c9fd56_1648226.png "在这里输入图片标题")

**分享页图标**
![分享页](https://images.gitee.com/uploads/images/2020/0511/112813_22585c64_1648226.png "分享页.png")
#### 总结：
相同模块的图标体量感一致，品类区图标采用拟物化主题，质感十足，使整体视觉更富品质。

## 二、脚印
### 2.1 架构层
#### 主导航信息架构
![脚印主导航](https://images.gitee.com/uploads/images/2020/0511/113739_a34cc2b9_1648226.jpeg "脚印主导航.jpg")
#### 产品结构框架
![脚印架构](https://images.gitee.com/uploads/images/2020/0511/113812_c013c789_1648226.png "脚印架构.png")

#### 总结：
1. 在多个页面提供了OTA服务，能够对不同场景下的需求进行细分，帮助用户快速的找到自己所需的服务。
2. 为用户在多处设置发布动态按钮，可从相册、拍照、拍视频里发布
3. 为用户设置积分、游戏激励

### 2.2交互路径分析
#### [点击此预览原型](https://free.modao.cc/app/a8932db696c561d9ddf9f282287f01b1c413817e?simulator_type=device)
 ![脚印交互路径](https://images.gitee.com/uploads/images/2020/0511/201321_5e611e89_1648226.jpeg "未命名文件.jpg")

 **交互亮点提取**
![交互亮点提取](https://images.gitee.com/uploads/images/2020/0511/210937_265d4856_1648226.jpeg "未命名文件 (1).jpg")

### 2.3图标规范
**主色调**
![主色调](https://images.gitee.com/uploads/images/2020/0512/200557_633fbabd_1532287.png "268304b260060c34a6ed4a2d91375c2.png")

**常规图标**
![常规](https://images.gitee.com/uploads/images/2020/0511/152522_c4e4d494_1648226.png "1.png")

**Tabbar图标**
![Tabbar](https://images.gitee.com/uploads/images/2020/0511/153203_878b068b_1648226.png "2.png")

**品类区图标**
![品类区](https://images.gitee.com/uploads/images/2020/0511/153224_6f326eab_1648226.png "3.png")

**第三方图标**
![第三方](https://images.gitee.com/uploads/images/2020/0511/153251_34de7d10_1648226.png "4.png")

**分享页图标** 
![分享页](https://images.gitee.com/uploads/images/2020/0511/153316_2b80604d_1648226.png "5.png")

#### 总结
1. 第三方登录图标使用了大家早已熟知的微信代表色草绿色
2. qq的代表色为蓝色，这样用户可以通过颜色来快速的找到自己想要的登录方式，以至于不用看字。而常规图标则使用体量一致的图标，颜色也主要为白色，这样会让图标在背景色更加的显眼与和谐。让视觉感受更加轻松。
3. 脚印app颜色以白灰调为主，符合温馨亲和的主题。