# 界面设计

**Repository Path**: zengjieting/interface_design

## 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**: 4
- **Created**: 2020-04-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <h1>Seek的竞品分析</h1>
  <p>成员：梁善宜181013114、梁颖其181013121、颜癸悦181013128、曾洁婷181013121、邱珊珊181013033、徐旖芊181013093</p>
</div>

## 附近动物详情信息页分析

#### 页面展示：

![详情](img/a1.jpg)

<center class="img">
<img src="img/a2.jpg" width="300"/><img src="img/a3.jpg" width="300"/><img src="img/a4.jpg" width="300"/><img/a5.jpg" width="300"/>
</center>

#### 分析：

1. 从主页面看来，该页面主要分为六个部分，分别为**轮播图加物种简介、物种分布地图、物种分类目录、“自然爱好者”观察结果、物种生存季节性模块以及相似物种推荐模块。**

2. 首先在该页面的总览中，运用了**格式塔视觉规律中的相近性和相似性原则**。相同等级的字体大小和粗细都趋于一致，主页面采用绿色色系的点缀和归类，靠颜色区分区域内容，以此来使用户在脑海中形成一个系统的功能分区印象，帮助用户更快找到每一模块的内容并展开模块下方细节，有助于提高用户对页面的易读性。

![详情](img/a6.png)
<center class="half">
<img src="img/a7.png" width="300"/><img src="img/a8.png" width="300"/><img/a9.png" width="300"/>
</center>

3. 在物种分类模块中，运用了**格式塔视觉规律的连续性原则**，加强了对物种分类信息的感知，引导用户对于物种的分类和所处纲目的内容理解。

<center class="half">
<img src="img/a10.png" width="300"/>
</center>

4. 在相似物种推荐模块，运用了**格式塔视觉规律的闭合性原则**，将推荐物种所处模块进行卡片化设计，通过整体的色块来帮助用户进行内容整合和区分的规则化闭合，使用户对于模块有一个整体的印象。除此之外，还运用了**对称性原则**，上部图片和下部介绍文字采用了对齐原则，使用户易于区分不同物种的对应模块。

<center class="half">
<img src="img/a11.png" width="300"/>
</center>

5. 同时推荐模块还运用了**尼尔森十大可用性原则中的系统状态可视化原则**。用户阅读完有关物种的基本信息后，在该页面的最下层部分就是推荐模块。这可以帮助用户“快速感知下一步要做的事情”，比如“查看推荐物种”或者是“退出该页面”的选择，给与用户一个连续又完整的页面体验感。

<center class="half">
<img src="img/a12.png" width="300"/>
</center>

## Seek成就页面分析  

#### 页面展示

<center class="half">
<img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/1.jpg" width="300"/>
</center>  

#### 分析

1.总体上看，成就页面运用了格式塔视觉规律中的主体与背景/焦点原则。页面采用几种不同的元素和区分度较高的配色——绿色和白色，清楚地展示了该页面的主要区域内容。引人注意的绿色页头部分告知了用户现在的等级以及到下一等级要做的事情。在白色背景上的五边形方框则是一些奖牌获得的对应板块。  

2.页面也运用了尼尔森十大可用性原则中的美观和极简的设计原则，与成就功能不相关和不必要的信息不显示，也没做过多影响信息传递的额外设计。  

<center class="half">
<img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/2.jpg" width="300"/><img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/3.jpg" width="300"/>
</center>

3.“物理奖牌”“挑战奖牌”两个模块运用了格式塔视觉规律中的相近性原理。它们运用了相似的元素，比如标题的颜色、装饰形状、大小都采用了统一的格调，这样会容易在用户的大脑中集结起来区分成组。五边形框之间的留白部分则增强了视觉层次，有助于用户扫描布局，帮助用户更快地实现目标并深入到内容本身。  

4.此外这里还运用了格式塔视觉规律中的对称性原理，“物理奖牌”和“挑战奖牌”两个模块可以说是上下对称的。无论距离远近，这种对称容易给用户带来一种它们是一体的形象，给用户一种坚固且有序的感觉。  

<center class="half">
<img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/7.jpg" width="300"/><img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/8.jpg" width="300"/><img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/9.jpg" width="300"/>
</center>  

5.使用了尼尔森十大可用性原则中的用户有自由控制权原则。用户可以自由地选择卡片下方的关闭按钮退出挑战内容的查看页面。  

6.使用了格式塔视觉规律中的共同命运性原则。每个物种挑战页面都会有滑动指示器，它提示用户接下来的任务都与之关联，并将用户进行的行动与最终获得的结果联系起来。  

7.使用了尼尔森十大可用性原则中的不脱离现实原则。遵循现实生活中的基本规律，观察动物的种类由少到多，逐步完成挑战，赢得奖牌。“为了赢得奖牌：。。。”描述语言也使用了用户熟悉的语言和概念进行设计，自然且有逻辑，方便用户的理解。  

<center class="half">
<img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/10.jpg" width="300"/><img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/11.jpg" width="300"/><img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/12.jpg" width="300"/>
</center>  

8.运用了尼尔森十大可用性原则的一致性原则。系统统一用了百分数来显示挑战的进行程度，除了月份有所不同之外，功能名称、状态显示、操作方式都保持了一致性。这种类似的结构，有规则的样式能减轻用户的思考负担。