# 界面竞品分析

**Repository Path**: yangqian5842/interface_competition_analysis

## 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-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 界面设计作业

#### 介绍
以下是根据网易云音乐APP版和PC版做出的关于界面竞争力的启发点评价分析，我个人认为网易云音乐是目前网络与音乐市场乃至整个市场来说比较有竞争力的项目，如下还会对网易云音乐的优缺点分别进行点评。

### 格式塔理论
- 相似性
- 相近性
- 连续性
- 封闭性
- 对称性
- 焦点性
- 共同命运

#### 相近性

![手机端](https://images.gitee.com/uploads/images/2020/0403/145226_a8ac80d3_1829815.jpeg)

![电脑端](https://images.gitee.com/uploads/images/2020/0403/145225_606037f9_1829815.jpeg)

- 电脑端与手机端类似，不同类型的信息都规划为同一个信息组，同一个模块排版、背景布置都相近。

### 相似性
![手机端](https://images.gitee.com/uploads/images/2020/0403/145503_d8f6a213_1829815.jpeg "0D193F72-8C61-4D7C-9EE0-B8DD7EEEA91E.jpeg")
![电脑端](https://images.gitee.com/uploads/images/2020/0403/145518_e6e42b80_1829815.jpeg "B535DC1A-C9C4-4F1F-82D1-F72AEE9DB537.jpeg")
 - 通过加深板块颜色的方式来提醒用户所处界面的位置
- 手机端的横排、电脑端的竖排都是同一类的功能。

### 连续性
![手机端](https://images.gitee.com/uploads/images/2020/0403/145549_79f13249_1829815.jpeg "C4AD566D-9CCF-4012-A472-D91D49886F72.jpeg")

- 网易云的左右页面边框也虽然被切，但让用户知道被切部分还有内容。

### 闭合型
![电脑端登录](https://images.gitee.com/uploads/images/2020/0403/145607_de49fe00_1829815.jpeg "BE2CCEC9-435B-403D-87A9-98D6F9F67927.jpeg")
![手机端评论](https://images.gitee.com/uploads/images/2020/0403/151112_c62253c1_1829815.jpeg "F48EF76F-D5F5-4504-9DD2-114D746535D8.jpeg")
- 手机端评论区采用灰色分割线分割用户的评论，从视觉上区分不同用户的内容。
- pc端登录界面的账号密码输入框也采用闭合方块模式。

## 对称性
> 无论距离远近，对齐元素都因为被看作属于一体而给人有序、不变的感觉。
![APP对称性](https://images.gitee.com/uploads/images/2020/0402/111457_6d582e88_2228981.jpeg "对称性-0.jpg")
![电脑版客户端](https://images.gitee.com/uploads/images/2020/0402/111539_cafc0169_2228981.jpeg "对称性-2.jpg")
- 手机版APP和电脑版客户端的音乐列表和展示栏目都非常整齐并且头尾对称
- 左右按钮都有垂直或水平贴近左右基线
-  **缺点：虽然整齐但是字体无法调节令快速阅读效率降低。** 

## 主题与背景
##  （一）焦点性
> 这个事物中占据了我们主要的注意力的就是主体，其余剩下的就是背景。占据我们主要注意力的必须是与其他明显不同的。
![手机版](https://images.gitee.com/uploads/images/2020/0402/124035_3eaa24f7_2228981.jpeg "焦点性-1.jpg")
![电脑端](https://images.gitee.com/uploads/images/2020/0402/124050_c3b3998b_2228981.jpeg "焦点性-2.jpg")
- 正在播放的曲目的名称颜色比较暗淡，与其他鲜艳的对比色不同
-  **缺点是当用户使用比较黯淡或者浅色的底色背景时比较难以区分主体与背景** 
 
## （二）共同命运
> 元素在同一方向、同一时间和同一速度同步移动时，共同命运原则更为有效。
![手机版](https://images.gitee.com/uploads/images/2020/0402/124453_6196bdd3_2228981.jpeg "共同命运原则-0.jpg")
![电脑端](https://images.gitee.com/uploads/images/2020/0402/124506_f8f9619a_2228981.jpeg "共同命运原则-2.jpg")
- 手机端和电脑端都有滑动同一行相同项目获取更多信息的点击按钮
- 滑动页面的大小可以稍作改良，部分降低了获取下一步动作的效率

## 尼尔森十大可用性原则
  + 系统状态可视化
  + 不脱离现实
  + 用户拥有自由控制权
  + ...

### 网易云音乐播放器为例  
### 系统状态可视化  
![截图1](https://gitee.com/jimgitc/images/raw/master/2020_04_02/111.png)  
+ 电脑端的网易云会清楚的表示用户当前所处在哪个界面，这里都用了非常简洁但却很*突出*的视觉处理，
因为这块区域的显示状态和其他相同类型的区域明显不同。  
+ 而且用户可以非常直接感受“想去哪，就去哪”的强烈自我暗示，因为基本的界面跳转按钮都可以一眼看到  

  
![截图2](https://gitee.com/jimgitc/images/raw/master/2020_04_02/222.png)  

+ 而这张图就可以知道现在正在播放音乐，除了你能听到声音以外，进度条的缓慢移动也可以告诉你歌曲正在播放中

### 不脱离现实  
![截图3](https://gitee.com/jimgitc/images/raw/master/2020_04_02/333.png)  
+ 每一个导航按钮对应着一个相应的图标，图标和页面内容相一致才不会引起用户的思维混乱，并且可以帮助用户理解界面  
+ 而且每一个图标都有一致性、同样的简约风格，这种小细节会使用户看来会很舒服，建琴用户思考图标含义的负担    

### 用户有自由控制权  
![截图4](https://gitee.com/jimgitc/images/raw/master/2020_04_02/33.png)  
+ 对于影响较小的系统操作采用了简易开关按钮，随开随关  
+ 用户想试听什么音质的歌曲就选择什么音质，音乐下载的存放位置也可以设置（人性化）