1. 背景介绍
1.1 产品简介
大树云-BTC ( Big Tree Cloud ) 是世平集团打造的智能、安全、开放的云平台，是您专属的工业物联网，是针对广大少量多样的用户所推出的工业物联网云方案。
用户通过购买开发版，下载手机 APP 后可以对已有装置进行监控。
1.2 主要功能
目前世平集团为用户提供 “BTC 管理工具” 和 “BTC 使用工具” 两个手机 APP，用户可以实时查看注册设备内的设备，并可透过设备监控页面实时读取设备端采集到的传感器信息，远程控制设备，让工业现场的数据实时掌握手中。
2. UI 接口展示和说明
2.1 BTC 管理工具
● 注册
○ 功能说明：用户首次进入 APP 后进行注册操作。
○ 设计说明：顶部导航栏显示当前页面的名称，页面主要显示区加入 大树云-BTC 和世平集团的 logo。页面中输入框需要填入的信息有：电子邮箱、邮箱验证码、用户名、密码和公司名。
● 验证
○ 功能说明：注册操作完成后需要进行手机实名制验证。
○ 设计说明：顶部导航栏显示当前页面的名称，页面主要显示区加入 大树云-BTC 和世平集团的 logo。页面加入对手机验证的说明文字，降低用户的厌烦情绪。
● 登录
○ 功能说明：用户使用已注册的账号进行登录操作。
○ 设计说明：顶部导航栏显示当前页面的名称，页面主要显示区加入 大树云-BTC 和世平集团的 logo。输入框需要填入的信息：电子邮箱、密码、手机号和手机验证码。
● 忘记密码
○ 功能说明：用户点击忘记密码按钮进行找回密码操作。
○ 设计说明：顶部导航栏显示当前页面的名称，页面主要显示区加入 大树云-BTC 和世平集团的 logo。简单的操作流程，只需填入邮箱即可找回密码。
● 设备管理
○ 功能说明：用户登录成功后进入设备管理页面，可以进行添加、删除设备操作，当已注册设备数和已上线设备数发生变化但页面没有实时更新时，用户可以手动对当前页面进行刷新操作。
○ 设计说明：顶部导航栏显示当前页面的名称，页面主要显示区加入 大树云-BTC 和世平集团的 logo。页面主要显示区显示用户名、已注册设备数量、已上线设备数量，两个操作按钮在页面中间显示，让用户清晰地知道该页面能进行的主要操作。
.png)
2.2 BTC 使用工具
● 设备清单
○ 功能说明：用户登录后，显示当前用户已添加的设备 ID 以及 MAC 地址。
○ 设计说明：顶部导航栏显示当前页面的名称，页面主要显示区加入 大树云-BTC 和世平集团的 logo，用户下属的设备以列表形式清晰的呈现。
.png)
● 设备监控
○ 功能说明：在设备列表页点击表格中任一行，进入该设备对应的设备监控页面，设备监控页面显示设备的详细参数，并且可以自定义设备的马达、LED、OLED 显示文字。
○ 设计说明：顶部导航栏显示当前页面的名称，页面主要显示区将设备参数以列表形式展示。设备控制部分以出框的形式，减少用户页面的跳转。
.png)
3. 大树云-BTC APP UI 设计遵循的原则
UI 设计需要具有设计规范，系统建议的规范可以让我们设计具有统一性，接口视觉更美观，大树云-BTC APP 的 UI 设计基于设计的基本原则，给用户以安全感与熟悉感。
3.1 清晰度
清晰度是首要的工作，用户必须要识别出并且知道为什么会使用它，在使用时能够预料到它能发生什么并成功地与它交互。背景图片必须是高分辨率格式，保证要适应不同的屏幕，采用的图标也是矢量格式图标，不会发生模糊不清的现象。
3.2 对齐原则
任何元素都不能在页面上随意安放。文字、线条、图标，页面上的每一项都应当与页面上的某内容存在某种视觉联系，使页面统一而有条理。
3.3 亲密性原则
如果多个项相互之间存在很近的亲密性，它们将成为一个视觉单元，而不是多个孤立的元素。彼此相关的项应该归在一组。要有意识地理解你是怎样阅读的，你的视线怎样移动，从哪里开始，沿着怎样的路径，到哪里结束，读完之后，接下来看哪里？整个过程应该是一个合理的过程，有确定的开始，而且有确定的结束。
3.4 对比原则
在页面上应加对比能吸引人的眼球。在浅色背景上使用深色文字，在深色背景上采用浅色文字，对比突出，使文字易于被人识别。当屏幕元素各自的功能不同时，它们的外观也应当不同。反之，如果功能相同或相近，那么它们看起来就应该是一样的，对应该加以区分的元素采用不同的视觉效果才是最正确的处理方式。
3.5 重复原则
本 APP 在进行 UI 设计时无论是控件的使用，还是信息措辞、颜色、窗口的布局风格都需要遵循统一的标准，做到一致。这样使用户使用起来能够建立精确的心理模型，使用熟悉一个接口后，切换到另一个接口就可以很轻松的推测出各种功能，语句理解也不需要费神理解。
更多信息
● 大树云-BTC 团队为客户提供软件修改需求服务：
○ 您可以填写「大树云-BTC AF 修改需求表」后，并提出申请，大树云-BTC 会为您修改/设计您专属的 APP。
○ 您可以填写「大树云-BTC AF 专业培训需求表」后，并提出申请，大树云-BTC 会为您开课并且让您可以修改APP UI 代码，呈现您专有的 UI。
○ 您可以填写「大树云-BTC AF 技术移转需求表」后，并提出申请，大树云-BTC 会为您开课并且让您可以修改APP程序代码，开发您专有的 APP。
更多资讯，请关注?树云系列公众号：.png)