在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

macrozheng/mall

菜单

UI 设计

相关源文件

目的与范围

本文档概述了 Mall 电子商务系统的用户界面设计规范。它涵盖了设计标准、视觉元素和组件指南，以确保跨管理员和客户前端应用程序的一致用户体验。有关特定组件实现细节的信息，请参阅 Portal 模块 (mall-portal)。

设计系统概述

Mall 电子商务系统实现了一个全面的设计系统，该系统为尺寸、排版、颜色和组件样式建立了标准。UI 原型是使用 Axure RP 创建的，Axure RP 是一款用于交互式模型的原型设计工具，文档中的 .rp 文件证明了这一点。

平台规范

移动应用尺寸

该应用程序支持 Android 和 iOS 平台，具有以下屏幕尺寸：

平台尺寸（宽 × 高）
Android360 × 640 像素
iOS375 × 667 像素

来源：document/axure/app-design.md3-9

排版

该应用程序实现了一致的排版系统

UI 元素字体大小（像素）
标题栏标题17
标题栏编辑15
标题文本 117
标题文本 215
正文文本13

来源：document/axure/app-design.md11-21

UI 组件尺寸

重复器组件

组件尺寸（像素）
单列宽度375
双列宽度150
双列内边距30
双列外边距15

图标和通用元素

组件尺寸（像素）
图标24 × 24
标题栏高度44
单行列表高度44 或 48
矩形内边距20
分隔线宽度 115
分隔线宽度 220

来源：document/axure/app-design.md22-46

颜色调色板

颜色用途十六进制代码用途
应用主色#2AB795关键元素的主要品牌色
屏幕背景#EEEEEE默认页面背景
弹出背景#04040F (40% 不透明度)模态对话框
强调色 1#FB0017错误状态，重要通知
强调色 2#FD994B警告，次要高亮
文本颜色 1#333333主要文本
文本颜色 2#666666次要文本
文本颜色 3#999999三级文本，占位符
边框和分隔线#CCCCCCUI 分隔线，表单字段边框
图标颜色#666666 或主色UI 图标
半透明颜色黑色（调整不透明度）覆盖层

来源：document/axure/app-design.md47-61

UI 架构

UI 组件层级结构

下图说明了 UI 组件的层次结构及其与后端服务类的关系

来源：系统架构图，来自所提供概述的模块结构

客户 App 屏幕流程

下图说明了客户移动应用程序中的主要屏幕流程及其对应的 API 端点

来源：系统架构图，用户和产品管理流程图

UI 组件实现

Mall App Web UI 组件

客户前端应用程序 (mall-app-web) 遵循基于组件的架构，其中 UI 组件直接映射到后端数据模型和服务

来源：系统架构图，来自所提供概述的模块结构

响应式设计原则

Mall 电子商务系统实施响应式设计原则，以确保在不同设备尺寸上提供一致的用户体验

  1. 流式网格布局：组件使用基于百分比的尺寸适应屏幕宽度
  2. 弹性图片：产品图片在其容器内按比例调整大小
  3. 媒体查询：根据设备屏幕尺寸应用不同的 CSS 规则
  4. 触摸友好型 UI：交互式元素的大小适合触摸输入（最小 44 像素）
  5. 平台特定调整：UI 元素适应 Android（Material Design）和 iOS（Human Interface Guidelines）标准

通用布局模式

标准屏幕布局

来源：document/axure/app-design.md39-45

结论

此处记录的 UI 设计规范是 Mall 电子商务系统视觉和交互用户体验的基础。这些规范确保了管理员和客户前端应用程序之间的一致性，同时为不同设备和平台提供了响应式和易于访问的界面。

UI 组件和屏幕与相应的后端服务紧密集成，保持了关注点的清晰分离，同时实现了前端和后端系统之间高效的数据流。