1111

uml_describe/界面设计图绘制要求.md

@@ -0,0 +1,50 @@
+这张图片展示的是一张标准的 **UI 线框图（Wireframe）** 或 **网页低保真原型图**。它具体描绘了一个电商网站的 **“购物车”页面** 布局。
+
+为了让你或他人能够绘制出完全相同风格和结构的图表，请结合以下内容与样式规范进行绘制：
+
+### 1. 整体布局逻辑：经典网页结构
+图表采用标准的 **“上 - 中-下”垂直分层布局**，模拟了浏览器窗口的显示效果。
+*   **顶部（Header）**：全局导航栏。
+*   **次顶部（Sub-Header）**：页面标题/面包屑。
+*   **中部（Main Content）**：核心数据表格区域。
+*   **底部（Footer/Action Bar）**：结算操作区域。
+
+### 2. 元素样式规范
+*   **形状**：所有元素（按钮、输入框、图片占位符）均使用 **矩形**。
+*   **风格**：极简黑白线稿。所有矩形均为 **白色填充，黑色细实线边框**。
+*   **文字**：文字位于矩形框内部或上方，作为标签，字体清晰。
+
+### 3. 详细区域绘制指南（从上到下）
+
+**第一层：顶部导航栏**
+*   **左侧**：画一个较大的横向矩形，内部文字为 **“春日蛋糕甜品”**（代表 Logo 或网站名称）。
+*   **右侧**：水平排列 **7个** 小矩形按钮/链接。
+    *   前5个为导航： **“首页”**、**“所有商品”**、**“下午茶点”**、**“生日蛋糕”**、**“草莓红颜”**。
+    *   后3个为用户功能： **“登录”**、**“注册”**、**“购物车”**。
+
+**第二层：页面标题栏**
+*   在导航栏下方，画一个长条矩形，靠左放置，内部文字为 **“我的购物车”**。
+
+**第三层：商品列表表格（核心区域）**
+这是一个隐形的表格结构，分为 **表头** 和 **内容行**。
+*   **表头行**：不画框，直接写文字标签，从左到右依次为： **“商品”**、**“单价”**、**“数量”**、**“小计”**、**“操作”**。
+*   **内容行（商品项）**：
+    *   **最左侧**：画一个 **正方形** 大框（代表商品图片占位符），内部可画个叉或写“图片”。
+    *   **图片右侧**：画一个横向矩形（代表 **“蛋糕名称”**）。
+    *   **数据列**：在“单价”、“数量”、“小计”下方，分别对应画 **3个** 小矩形框，内部文字分别为 **“价格”**、**“数量”**、**“价格”**（代表金额）。
+    *   **最右侧**：在“操作”下方画一个矩形按钮，文字为 **“增加/减少”**。
+
+**第四层：底部结算栏**
+*   位于图表的最右下角。
+*   画两个并排的矩形框。
+    *   左边一个标签为 **“合计：”**。
+    *   右边一个按钮为 **“去结算”**。
+
+### 4. 绘图执行建议
+*   **对齐**：
+    *   顶部导航的右侧按钮组右对齐。
+    *   表格内的元素（图片、名称、价格框）要严格按照上方的表头文字垂直对齐。
+*   **间距**：表格行内的元素水平间距要拉大，模拟表格列的宽度；底部结算区要与上方商品列表保持较大的垂直间距。
+*   **比例**：商品图片框（正方形）应明显大于价格输入框（小矩形）。
+
+按照以上规范，你就可以绘制出一张清晰的“电商购物车页面 UI 线框图”。