ASCII Design UX——专业的 ASCII 界面原型设计工具
快速生成软件界面、Web 页面、移动端 App 线框图和原型设计
🪢
📖 简介
ASCII Design UX 是一个强大的 ASCII 艺术界面设计工具
能够根据需求描述或字段列表，快速生成专业的界面线框图、mockup 和原型。
支持多种界面类型和风格，适用于软件界面、Web 页面、移动端 App、安装向导等多种场景。
51%
49%
✨ 核心特性
🎨 自动保存设计稿：自动保存到项目根目录的 ascii-ui-design/ 文件夹
🎭 多种界面风格：支持标准、模块化、紧凑仪表板视图等多种布局模式
🧩 完整组件库：涵盖抽屉、确认消息框、下拉、单选、级联选择、复选框、标签页等常用 UI 组件
📱 多平台支持：支持软件界面、Web 页面、移动端 App、安装向导等多种界面类型
📐 响应式设计：区分 Web 端和移动端的布局差异，适配不同屏幕尺寸
📝 设计文档：提供完整的设计说明、布局思路和交互元素标注
🚀 快速开始
安装
本项目无需安装，直接使用即可。确保你的系统已安装 Python 3.6+（用于运行保存脚本）。
基本使用
描述你的需求
代码块
Plain Text
创建一个登录页面，包含用户名、密码输入框和登录按钮
生成设计稿 工具会根据你的需求自动生成 ASCII 设计稿
自动保存 设计稿会自动保存到 ascii-ui-design/ 文件夹
📚 使用方法
工作流程
代码块
Plain Text
用户需求 → 生成 ASCII 设计稿 → 自动保存到 ascii-ui-design/ → 输出设计说明
手动保存脚本
如果需要手动保存设计稿，可以使用提供的 Python 脚本：
代码块
Plain Text
python scripts/save_design.py "设计内容" "页面名称" [版本号或时间戳]
示例：
代码块
Bash
# 使用版本号
python scripts/save_design.py "$(cat design.txt)" "login_page" "v1"
文件命名规则
•
{页面名称}_{时间戳}.txt（例如：login_page_20250112.txt）
•
{页面名称}_v{版本号}.txt（例如：ticket_detail_v1.txt）
🎨 UI 组件库
抽屉（Drawer）
移动端常用的交互组件，从屏幕侧边或底部滑出。
代码块
Plain Text
确认消息框（Alert/Dialog）
用于显示重要提示信息、确认用户操作或警告。
代码块
Plain Text
┌─────────────────────────────────────┐
下拉选择框（Dropdown/Select）
代码块
Plain Text
┌──────────────────────┐
│ 请选择选项 ▼ │ ← 未展开
└──────────────────────┘
┌──────────────────────┐
│ 请选择选项 ▲ │ ← 展开状态
单选按钮（Radio Button）
代码块
Plain Text
选择支付方式：
( ) 支付宝
( ) 微信支付
(•) 银行卡 ← 选中状态
( ) 现金
级联选择（Cascading Select）
代码块
Plain Text
其他组件
复选框：
代码块
Plain Text
选择兴趣：
[ ] 阅读
[x] 运动 ← 选中状态
[ ] 音乐
标签页：
代码块
Plain Text
┌──────┬──────┬──────┐
│ 全部 │ 待办 │ 已完成│ ← 当前标签
└──────┴──────┴──────┘
分页器：
代码块
Plain Text
< 上一页 1 2 [3] 4 5 下一页 > ← [3] 表示当前页
💡 使用示例
示例 1：登录页面
需求： "创建一个登录页面，包含用户名、密码输入框和登录按钮"
生成内容：
•
页面标题
•
用户名输入框
•
密码输入框
•
登录按钮
•
可选：记住我、忘记密码等链接
示例 2：数据表格界面
需求： "创建一个数据表格界面，显示用户列表"
生成内容：
•
表格标题
•
列标题行
•
数据行（示例数据）
•
分页控件
•
操作按钮区域
示例 3：移动端 App 界面
需求： "创建一个移动端的主页界面"
生成内容：
•
顶部状态栏
•
主要内容区域（适配移动端宽度）
•
底部导航栏
•
移动端特有的交互元素
示例 4：带抽屉和确认消息框的页面
需求： "创建一个用户编辑页面，点击编辑按钮打开抽屉，点击保存时弹出确认对话框"
生成内容：
•
主内容区域（用户信息展示）
•
编辑按钮
•
抽屉设计（从右侧或底部滑出）
•
确认消息框（保存时的确认对话框）
🎯 设计原则
ASCII 字符使用规范
•
边框和分隔线： 使用 |, -, + 创建清晰的边界
•
标题和强调： 使用 =, #, * 突出重要内容
•
内容区域： 使用空格和缩进创建层次结构
•
图标和符号： 使用 :, ., o, * 等表示交互元素
布局模式
标准布局：
•
清晰的顶部导航
•
主要内容区域
•
侧边栏（如需要）
•
底部信息栏
模块化设计：
•
功能模块清晰划分
•
模块间用分隔线区分
•
每个模块独立且完整
紧凑仪表板视图：
•
信息密度高
•
使用表格和网格布局
•
最小化空白区域
📱 响应式设计考虑
Web 端设计特点
•
宽屏布局：充分利用横向空间，支持多列布局
•
鼠标交互：悬停效果、精确点击区域
•
导航系统：顶部导航栏、侧边栏、面包屑导航
•
信息密度：可以显示更多信息，支持复杂的数据表格
移动端设计特点
•
窄屏布局：单列布局为主，垂直滚动
•
触摸交互：按钮和交互元素需要足够大的点击区域（建议最小 44x44 像素）
•
导航系统：底部标签栏、抽屉式导航、手势操作
•
信息密度：精简信息展示，重要内容优先
•
抽屉设计：从侧边或底部滑出的抽屉更符合移动端手势操作习惯
设计适配建议
•
移动端组件通常比 Web 端更大，便于触摸操作
•
移动端表单字段垂直堆叠，避免横向排列
•
移动端优先使用抽屉而非居中弹窗
•
移动端级联选择建议垂直布局，避免横向空间不足
•
确认消息框适用于 Web 和移动端，内容简洁，居中显示
✅ 最佳实践
保持一致性：同一项目中的组件表示方式应保持一致
清晰标注：使用注释说明交互行为和状态变化
层次分明：通过边框、分隔线和缩进建立清晰的视觉层次
完整展示：包含所有关键交互元素，不遗漏重要功能
平台适配：根据目标平台调整布局和组件尺寸
可读性优先：确保 ASCII 设计稿易于阅读和理解
📂 项目结构
代码块
Python
ascii-design-ux/
├── README.md # 项目说明文档
🔧 开发
运行保存脚本
代码块
Bash
脚本功能
•
自动查找项目根目录（通过 .git 或 package.json 识别）
•
自动创建 ascii-ui-design/ 输出目录
•
支持版本号和时间戳两种命名方式
•
UTF-8 编码保存，确保中文正常显示