A Empire用户6147
Geochemistry Pi UI文档
输入“/”快速插入内容
Geochemistry Pi UI文档
Geochemistry Pi UI文档
用户6147用户61472025年3月9日修改
一、整体设计逻辑
基于地球科研工作者的调研和DDE项目的需求，本网站整体采用橙色和黑色为主题色，采用Element-UI组件库，使用Figma软件进行UI设计。整体风格偏向简洁、易操作，便于科研工作者快速检索和下载所需数据。
HTG数据库页面设计逻辑上分为三个主要部分：
（1）数据检索模块：包含“岩石数据”、“矿物数据”和“实验数据”三个检索页面，以及检索结果展示页面提供数据文件下载。
（2）数据下载模块：包含“专题数据”、“数据模板”和“原始数据与清洗数据对”三个页面。
（3）团队与项目模块：包括“项目团队”、“联系我们”两个子页面。
（4）主页：项目简要介绍、注册登录入口和使用教程入口。
二、整体设计结构
用户主要的使用需求按照注册登录、数据检索、数据下载三个步骤进行。用户在主页注册并登录自己的账户，然后在对应的样品检索页上搜索所需信息，然后下载所需信息。或者在数据文件页面下载已分类的数据文件。
用户功能使用设计：
(1) 用户点击主页右上角的放大镜符号按键进入注册登录页面。如果注册过账户，则可以直接登录。如果用户没有账户，可以点击“注册”先进行注册。登录后，跳转回到主页。
(2) 点击 “Search&Match”菜单项下的检索子菜单按键，进入数据检索子页面；根据页面中提供的数据筛选器，选择对应的筛选器点击，在展开的数据筛选条件框中定制样本数据筛选条件。用户可以选择想要自定义筛选器的标准；选择标准后，点击筛选框下方的“Submit Filter”按键提交单个筛选器的筛选条件；也可以在多个筛选器设置条件后，点击页面下方的“Submit Filter All”按键提交多个筛选器的筛选条件。
(3) 当用户提交数据筛选条件之后，此时会自动跳转到数据检索结果展示页面。页面左侧大表格框为检索结果的在线展示框，用户可以通过下方页码组件切换数据页码。页面右侧中间的小表格框为检索结果的信息展示框，展示检索结果的样品数量、表格列数、表格行数。
(4) 点击数据检索页面的“Download Data”按钮下载数据。用户在“Excel Available”菜单项下的“Expert Data”子页面下载已整理好的不同样品类型对应的专题数据。
三、UI团队
UI设计：李抒怡、董雅婷
功能需求：吕洋
四、设计理念
清晰结构与层次：结构化布局和模块化设计将项目介绍和团队介绍有序展示，增强了页面的实用性和逻辑性。简约舒适的结构清晰有助于用户快速定位所需信息。
简约统一的色彩运用：橙色用于标题和按钮，突出页面的核心信息，增强视觉引导效果。而其他内容则采用低饱和度配色，保持专业感和信息传达的清晰度。
图表与流程的结合：在数据展示和流程讲解之间通过图表和流程图进行可视化处理，使专业内容更易于理解，有效减轻用户的阅读负担，并提升科研数据的可读性。
五、设计原则
•
传达风格明确
•
运用网格系统，使用户厘清视觉层级，结构清晰
•
建立有凝聚力的视觉系统
•
最小化视觉工作量
六、UI基本设计流程
需求分析：首先需要明确网站的目标用户（科研工作者）和其主要用途（如查询、上传和管理基准数据）及用户工作流程，与项目负责人和用户沟通，确保界面设计符合专业需求。
线框图和原型设计：在设计工具中绘制线框图，展示不同页面的布局和交互效果，重点关注可访问性和导航的简易性。