# User and visual interface design

**Repository Path**: linxiaomingcool/User-and-visual-interface-design

## Basic Information

- **Project Name**: User and visual interface design
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 对网易云音乐的页面进行评估
### （用格式塔原理进行评估）

***

## ✔️相近性
* 接近性理论是指人在视觉感知中在看到距离接近或者关系比较紧密的元素的时候，容易在潜意识中将它自动分成为一组，它超越了颜色，形状和可能区分一组对象的其他因素的相似性。

![](images/xiangjinxi.png)
* 在上图可见：‘我的音乐’、‘最近播放’和‘创建歌单’这几个模块距离接近，关系紧密
* 这可以让我们在相似的同一区块里快速找到我们想要找的信息

***

## ✔️相似性
* “有相似特征元素比没有相似特征的元素被认为更为紧密相关” 颜色、形状、大小、纹理等，都会被用户自动在大脑中集结起来区分成组

![](images/faxian.png)
* 在上图可见：有相同一组的圆形图案和相同一组的正方形图案
* 这可以使用户感知不同的形状图案代表着区分不同的信息内容和功能

***

## ✔️连续性
* 帮助用户通过构图来解释方向和运动。它在对齐元素时发生，可以帮助我们的眼睛顺利地穿过页面，有助于提高易读性。 

![](images/fenxiang.png)
* 在上图可见：在分享的信息内容里虽然右边的信息没有完全显示出来，但是用户依旧可以知道继续往右有供可选择的内容
* 连续性原则加强了对分组信息的感知，创建了秩序并引导用户通过不同的内容细分。

***

## ✔️闭合性
* 当面对一些复杂排列的元素时，用户更趋向于寻找一个更为单一可辨识的图案模式。

![](images/bihexin.png)
* 在上图可见：一个个闭合的色块帮助我们区分了不同的信息，如右图的‘可能感兴趣的人’，可以清晰区分一个个不同的用户
* 当内容过多，过杂，应用卡片化设计，通过色块来帮助用户进行规则化闭合。


### (用尼尔森十大原则进行评估)

## ✔️美观而简洁的设计
* 页面中不要出现无关的或者冗余的信息，不相关的不显示或隐藏起来，每个多余的信息都会分散用户的注意力

![](images/meiguan.png)
* 在上图可见：在‘跑步FM’模块中，系统根据跑步频次推荐不同的歌曲，没有歌词、评论、分享等其他功能
* 简洁的播放功能可以让用户聚焦在跑步上

***

## ✔️用户拥有自由控制权
* 用户在使用产品时经常会误操作，因此需要一个非常明确的“紧急出口”来帮助他们脱离困境，需要支持撤销与重做

![](images/kongzhi.png)
* 在上图可见：在选择‘标记已读’后会弹窗提醒用户是否确认
* 产品需要支持用户“反悔”

***

## ✔️系统状态可视化
* 用户需要适时且适当的反馈，“我在哪？” “我在做什么？” 可以强化用户的的心理预期

![](images/zhuangtai.png)
* 在上图可见：整首歌曲共15.9m，已下载3m，它让用户知道系统在做什么（正在下载中），向用户提供了运行状态的信息
* 要让用户知道在操作什么以及操作的进度

***

## ✔️不脱离现实
* 产品页面的设计要符合现实世界中的使用习惯，使用用户熟悉的概念，信息的显示自然而有规律逻辑

![](images/xianshi.png)
* 在上图可见：设计借鉴了现实世界中“日历”的元素，写有当天的日期“06/04”,可以让用户知道这是每日推荐的歌单，而不是“每周/每年/总榜”
* 可以借用现实生活中的元素来降低用户的认知困难，增加使用兴趣

***

## ✔️一致性
* 保持一种类似的结构，能够让界面看上去更加规范熟悉，并且易于理解

![](images/yizhi.png)
* 在上图可见：在歌单广场中，推荐的曲目均使用“正方形图片＋文字”的形式来展现，每一行放3种类型风格的介绍，排列布局保持一致
* 界面元素外观，布局应保持一致，分组分类型应较明确

***

## ✔️预防用户出错
* 用户在操作时很容易误点而造成错误。所以在系统真正执行之前，就要发出提示以防止用户做出错误的选择

![](images/yufang.png)
* 在上图可见：在下载管理界面，点击“清空”之后，会跳出一个提示框，询问 “确定不再下载吗？”
* 在用户执行比较危险的操作时，让用户再次确认，避免用户发生严重的非本意的错误

***

## ✔️帮助用户识别，而非回忆
* 尽量减少用户需要记忆的操作步骤，提供历史信息让用户再次点击，可重复之前的动作

![](images/shibie.png)
* 在上图可见：在搜索界面我们可以看到“历史记录”，让用户再次点击选择而不是输入
* 用户无需记住具体内容便可重复之前的动作，减少了记忆负担