A Empire
用户6147
添加快捷方式
分享
Geochemistry Pi UI文档
输入“/”快速插入内容
Geochemistry Pi UI文档
用户6147
用户6147
2025年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基本设计流程
需求分析
:首先需要明确网站的目标用户(科研工作者)和其主要用途(如查询、上传和管理基准数据)及用户工作流程,与项目负责人和用户沟通,确保界面设计符合专业需求。
线框图和原型设计
:在设计工具中绘制线框图,展示不同页面的布局和交互效果,重点关注可访问性和导航的简易性。