# 视觉界面设计_期末项目

**Repository Path**: NFUNM039/visual_interface_design

## Basic Information

- **Project Name**: 视觉界面设计_期末项目
- **Description**: 用户与视觉界面设计期末项目文档
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 视觉界面设计_期末项目
## 作品名称_浅音APP
## A3海报
![输入图片说明](https://i.loli.net/2020/07/07/ymL1Eva8xBNeFRw.png "在这里输入图片标题")
## 设计稿要求
### A.品牌核心价值
- 浅音APP是一款满足小众口味，专注听歌与分享的音乐APP，面对的是喜欢分享，乐于探索好音乐的文艺青年；
- 文艺：浅音APP整体的设计与风格主打文艺风，为文艺青年量身定制的一款音乐APP；
- 个性化推荐：浅音APP根据用户的每日心情，为用户精心推荐个性化歌单，满足用户不同的听歌需求;
- 分享：浅音APP提供论坛平台，用户可以分享自己的故事，满足用户可以边听音乐边浏览歌曲文章的需求;
- 记录：浅音APP在随心功能中每天为用户生成不同的音乐便签，利于用户记录，保存用户的音乐情怀；
![输入图片说明](https://images.gitee.com/uploads/images/2020/0706/221627_068e1bcd_1648212.jpeg "核心价值.jpg")
### B.品牌元素
#### 1.logo系统
![](https://images.gitee.com/uploads/images/2020/0701/214840_29124880_1648212.png)
- logo呈现一个“Q”字母，是我们APP名称“浅”的首字母。
- logo整体以黑胶唱片为主要元素，代表着“音乐”，浅音是一款音乐APP，专注于听歌与分享。
- logo中间的圆圈处是一团耳机线，有众多的耳机线缠绕一起；代表着浅音APP拥有着众多的音乐版权，支持众多用户同时讨论分享音乐故事。
- logo右下角的小爱心是“心情”，这是浅音APP的特色功能之一，可以根据用户的心情个性化推荐歌曲。

#### 2.颜色系统
![输入图片说明](https://images.gitee.com/uploads/images/2020/0706/235020_2b44b9cd_1648212.jpeg "颜色规范.jpg")
#### 3.icon视觉规范
![输入图片说明](https://images.gitee.com/uploads/images/2020/0706/175906_38953351_1648212.png "在这里输入图片标题")
#### 4.字体系统
![输入图片说明](https://images.gitee.com/uploads/images/2020/0706/200737_44e6caec_1648212.png "字体规范.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0706/235047_379b0ab1_1648212.jpeg "字体规范2.jpg")
#### 5.图片使用规范
![输入图片说明](https://i.loli.net/2020/07/07/eUnjS2pXPkzD4Ff.png "在这里输入图片标题")
![输入图片说明](https://i.loli.net/2020/07/07/Kkcp5W8QCoVuTrb.png "在这里输入图片标题")
- 界面中头像与歌单封面为1：1比例，相同的长宽将构图呈现得简单，突出了主体的存在感；
- 歌曲文章详情页图片为16：9比例，带给用户一种视野开阔的体验；
- 随心界面中的音乐便签为3：2比例，在应用中看上去比较舒服；
#### 6.版式、栏高、边距等尺寸规范+栅格系统说明
![输入图片说明](https://images.gitee.com/uploads/images/2020/0629/170609_92061c46_1648212.png "在这里输入图片标题")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0707/144708_8bbdc7d0_1648212.png "栅格.png")

### C.高保真原型图
![输入图片说明](https://pics.images.ac.cn/image/5f02f5af4bf86.html "在这里输入图片标题")