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