# 界面设计

**Repository Path**: guiyueYan/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-03-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

### App介绍：
一款通过图像识别技术来识别周围的植物和动物的APP，用户可以通过收集不同类型的鸟类、两栖动物、植物和真菌而获得徽章，并参与每月在iNaturalist（一个自然爱好者的社区平台）上与里面星球一起进行的观察挑战。

## Seek主页分析

#### 页面展示：

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

#### 分析：

1.**格式塔相似原则**：最先映入用户眼帘的控件是下图较深的绿色部分。设计师将物种图片形状设计为圆，背景为墨绿色，并且用户可以随意左右滑动图片。这些相似部分会让用户认为这是一组。

2.**格式塔闭合原则**：以巨大的黑色方框锁住内容，并与上下空白部分形成对比。这会让用户认为他们是一组别。  

  
## 设定  

#### 页面展示：

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

#### 分析：  

1.**尼尔森状态可见原则**：按钮绿色为开启状态，白色为闭合状态。有效的提供状态反馈，帮助用户理解目标对象所处的状态。  

2.**尼尔森人性化帮助原则**：提供常驻性提示[底部tablebar]，方便用户使用APP最核心的三个功能——切换界面、拍照识物、查看消息。  

## 关于  

#### 页面展示： 

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

#### 分析：  

1.**格式塔相近原则**：相近的内容互相靠近，划为一组。组与组之间插入空白行。紧凑中不失美观。  


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

#### 页面展示：

![详情](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登录页面分析  

* **用于首次或重新使用该App的用户登录，只有选择下面其中一项才可进入此App，执行下一步操作**。  
  
#### 页面展示  

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

#### 分析  

1、“利用账号登入”，“注册账号”，“不登入直接继续”这三个按钮之间，运用了格式塔视觉规律中的**相似性**、**对称性原则**。将相似的元素放在一起，串接在一起，让用户知道这三个按钮是同一个类别的。也在相似性的基础上加强了概念，选择相同形状，颜色的按钮元素，以及对称的排列方式，也更好地使用户在大脑中自动将其区分成一组，认为它们是属于一体的，从而提高了用户视觉上的易读性。而“不登入直接继续”这一按钮比“利用账号登入”和“注册账号”大，则更容易区分用户可执行的行为，告诉用户不一定需要INATURALIST账号的这一信息。

另外，也使用了尼尔森十大可用性原则中的**不脱离现实原则**、**灵活性原则**。从上往下依次是“利用账号登录”，再是“注册账号”，最后是“不登入直接继续”，顺序遵循通常App或网站用户登录的基本规律。主要的操作按钮在界面的中间位置，且所占面积大，在用户易触范围内。  

2、登录界面中，运用了格式塔视觉规律中的**主题与背景**/**焦点性**。主要信息（App名称，登录按钮以及注意事项）在颜色，大小等方面与背景有着鲜明的对比，主要信息在这个界面中占据了用户的主要注意力，另外，正处于中间位置的登录按钮，更加明确地给用户看到哪部分是用户特别需要关注的内容主体。  

3、使用了尼尔森十大可用性原则中的**帮助**和**说明文档**原则。在页面底部向用户简短地提供了登入App后可获取的功能指引。  

## Seek起始页面分析   

* **是用于为首次登录用户提供一份此App的功能介绍**。

#### 页面展示

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

#### 分析

1.在第一个初始介绍页面中，运用了格式塔视觉规律中的**相似性**、**对称性**原则。图片的形式均以大小形状一致的形式呈现，且对称排列，有助于有序引导用户，让用户自动在大脑将这两张图划分为同一组类别。  

2.在第二个初始介绍页面中，运用了格式塔视觉规律中的**相似性**原理。不同的物种也采用相似的元素，将其划分为一个组别，有序引导用户。  

3、三个初始化介绍页面中，都运用了格式塔视觉规律中的**主体与背景**/**焦点**原则。用各种不同的元素，区分度较高的配色，将主体与背景区分开，使用户的关注点在详情介绍身上。  

<center class="half">
<img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/起始页4.jpg" width="250"/><img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/起始页5.jpg" width="250"/><img src="https://gitee.com/guiyueYan/interface_design/raw/master/img/起始页6.jpg" width="250"/>  
</center> 

4、三个初始化介绍页面中，使用了尼尔森十大可用性原则中的**用户有自由控制权**和**极简的设计**原理，用户可以自由选择跳过或者继续操作任务，另外，界面中只有左右滑动切换页面以及“先跳过”或“继续”按钮，不做过多影响信息传递的额外设计，体现了极简的设计。  

## Seek侧边栏分析  

* **用于展示该App所有页面的分组情况，便于用户点击跳转**。

#### 页面展示  

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

#### 分析  

1.侧边栏运用了格式塔视觉规律中的**相似性**、**连续性**原则。每一个栏都使用同样颜色，同样大小的字体，且集中连续在一起，通过构图来帮助用户解释方向，有助于加强用户对分组信息的感知，提高页面的易读性。  

2.侧边栏运用了格式塔视觉规律中的**闭合性**、**主体与背景**/**焦点性**原则。在提供适量的导航信息时，使用闭合的板块，在这一板块空间内强化概念。另外，在选中导航栏时，主页部分会被阴影化，使用户的注意力在侧边栏部分。  

3、侧边栏也使用了尼尔森十大可用性原则中的**不脱离现实**原则。遵循现实生活中的基本规律，第一个导航信息是“首页”，最后一个导航信息是“设定”，符合日常生活中App的导航信息顺序，这样显示自然而有逻辑。  

4、使用了尼尔森十大可用性原则中的**灵活性**和**使用效率**原则。导航界面位于整个屏幕的左侧位置，主要按钮的位置排布在用户易触范围内，这样的界面布局使功能引导简单方便，利于用户点击。  

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

## Seek挑战页面分析

#### 页面展示：

<center class="half">
<img src="https://gitee.com/LiangShanYi/interface_design/raw/master/img/tu1.png" width="300"/><img src="https://gitee.com/LiangShanYi/interface_design/raw/master/img/tu2.png" width="300"/><img src="https://gitee.com/LiangShanYi/interface_design/raw/master/img/tu3.png" width="300"/>
</center>

#### 分析：

1.该页面体现了格式塔视觉规律中的**相似性**和**连续性**。设计者使用同样的六边形的图形和文字排版格式，让用户可以很快速的区分每一项挑战的位置，帮助用户通过相似的图案和排版来判断区域的可选择性。

![首页](https://gitee.com/LiangShanYi/interface_design/raw/master/img/tu4.png)


2.挑战的图标设计，体现了格式塔视觉规律中的**闭合性**。设计者的图标设计采用了“虚线”的设计，并且设置了一个进度条的控件。两个图案的结合对用户起到了一个提醒的作用。当用户看到这两个图标的时候，给用户第一反应传达的是“未完成”或者是“进行中”。不需要过多的解释就能够让用户清楚这点。

![首页](https://gitee.com/LiangShanYi/interface_design/raw/master/img/tu5.png)

3.该页面中，分别设置了“进行中”、“未开始”、“已完成”这三个板块，运用文字和颜色高亮提醒用户，帮助用户快速感知“我在哪（ 位置 / 阶段 ）”、“发生了什么”、“我该做什么”，强化用户心理预期。体现了尼尔森十大可用性原则中的**系统状态可视化原则**。

![首页](https://gitee.com/LiangShanYi/interface_design/raw/master/img/tu6.png)
![首页](https://gitee.com/LiangShanYi/interface_design/raw/master/img/tu7.png)


## Seek观察页面分析

1. 格式塔原理 **主体与背景/焦点性**

主体与背景是视觉感知的一种方式，在页面中，占据我们主要注意力的就是主体，其余的就是背景，在该白色背景页面中，最引人注目的是绿色的“开放相机”按钮，突出主体
<center class="half">
<img src="https://gitee.com/qiu33/User-Interface-Design/raw/master/img/jijiansheji.jpg" width="250"/>
</center>

2. 尼尔森十大原则 **系统状态可视化**

在观察页面顶部会提供一个“我的观察结果”位置反馈，帮助用户感知“我在哪”“发生了什么”底部突出的绿色相机按钮可以让用户知道“该做什么”，强化用户心理预期
<center class="half">
<img src="https://gitee.com/qiu33/User-Interface-Design/raw/master/img/keshihua.jpg" width="250"/> 
</center>

3. 尼尔森十大原则 **用户有自由控制权**

在拍照观察到新物种时，页面会出现提示性词语，告知用户识别成功，将结果反馈给用户，同时提供检视物种和返回继续识别的两种选项，供用户自由选择
<center class="half">
<img src="https://gitee.com/qiu33/User-Interface-Design/raw/master/img/kongzhiquan.jpg" width="250"/>
</center>
 
4. 尼尔森十大原则 **预防用户出错**
在拍照观察时，该页面有个问号小图标，点击可以查看操作说明，让用户明白如何正确检视物种，同时，在正确拍到物种时，页面会有六个绿色的小圆点亮起，同时还有英文提示用户现在可以拍照识别了
<center class="half">
<img src="https://gitee.com/qiu33/User-Interface-Design/raw/master/img/yufangchucuo.jpg" width="250"/> 
</center>

5. 尼尔森十大原则 **帮助用户发现、诊断、纠正错误**

在拍照识别物种时，假如没有拍到物种，结果就会提示错误“无法辨别本照片”，并提供可能的解决方案，且提示用语简洁明了，无技术性词语
<center class="half">
<img src="https://gitee.com/qiu33/User-Interface-Design/raw/master/img/chucuo.jpg" width="250"/> 
</center>

6. 尼尔森十大原则 **美观和极简的设计**

在观察页面，就只显示了观察的结果，没有其他不必要和不相关的信息显示，不做过多影响信息传递的额外设计
<center class="half">
<img src="https://gitee.com/qiu33/User-Interface-Design/raw/master/img/jijiansheji.jpg" width="250"/> 
</center>

7. 格式塔原理 **一致性、相似性、连续性**

该页面的物种类别、显示方式、操作方式等均保持一致，无论是有观察到某类物种还是没有，其排列的结构都是一致的；运用相似性原则，有观察到某类物种和没有观察到某类物种在色彩显示方式有所区分，有观察到物种显示为棕色的六边形，没有观察到的则是灰色；同时运用到了连续性，使用了连续的六边形和相同的文字排版风格，创建了秩序
<center class="half">
<img src="https://gitee.com/qiu33/User-Interface-Design/raw/master/img/yizhixing.jpg" width="250"/> 
</center>