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