界面原型设计工具使用系列(一)-Frame Box

本文介绍了一款名为FrameBox的免费界面原型设计工具,它支持拖拽操作,易于上手,适用于网页原型设计。文章详细展示了如何注册、创建项目及设计界面,并介绍了其分享功能。
 

在开发具有界面的软件系统时,首先进行界面原型设计是很重要的,它可以让我们更清楚自己的系统该怎么做,也很方便与别人交流探讨。这是我长久以来忽视的一个重要方面,因此我打算对一些相关的工具进行实际的使用测试,并通过一系列的文章记录使用的过程,以图文的形式记录下来,备忘并方便大家选择适合自己的界面原型设计工具。

作为第一篇文章首先介绍 Frame Box,这是一个免费的,十分轻量级的工具,可以拖放、设置大小、复制粘贴它的UI组件,可以非常轻松的通过它的拖拽很容易地完成原型制作。并且还可以把你的设计与别人分享,让他们可以看到甚至可以修改这个设计(私有权限控制即将实现)。

1、首先需要注册一个用户

未注册的用户将不能使用部分功能,所以注册一个吧,注册过程也很简单。

注册地址:http://framebox.org/c/signup/

frame box 1 界面原型设计工具使用系列(一) Frame Box

2、管理界面

使用帐号登录进来以后,左侧 是功能选项,右侧是具体功能的内容。

frame box 2 界面原型设计工具使用系列(一) Frame Box

Frames是界面原型设计图,可以直接新建一个(New Frame),查看已经设计好的没有归属任何项目(Frames (none Projects))的 设计。

Projects是你的项目,可以新建一个项目(New project)。

frame box 3 界面原型设计工具使用系列(一) Frame Box

新建的项目会显示在Projects节点的下方,如我创建的my guestbook。

在左侧点击新创建的项目,页面右侧可以管理这个项目的界面原型设计:

frame box 4 界面原型设计工具使用系列(一) Frame Box

点击“Create new frame”可以创建一个新的Frame。

3、设计界面

进入frame设计界面,左侧是工具箱,包含了我们可以使用的全部控件。

frame box 5 界面原型设计工具使用系列(一) Frame Box

你可以很方便的把他们拖到右边的设计图中,像我这样。

frame box 6 界面原型设计工具使用系列(一) Frame Box

设计的差不多了,记得保存,在设计图的右侧有一些选项和按钮:

frame box 7 界面原型设计工具使用系列(一) Frame Box

SWITCH VIEW可以切换编辑视图和查看视图。

UNIT ACTIONS可以 对设计图中选中的控件进行复制、粘贴以及删除操作。

FRAME ACTIONS可以编辑设计图的说明,设置为只读(read only),选择归属的项目,设置背景图,复制设计图,保存设计图等。

目前设计图还不支持设置为私有(Private),点击如下的按钮:

frame box 8 界面原型设计工具使用系列(一) Frame Box

会提示你这个功能即将实现,你可以留下你的Email,当这个功能可用时可以发邮件通知你。

编辑模式和查看模式的显示是有很大不同的,如下是查看模式:

frame box 9 界面原型设计工具使用系列(一) Frame Box

设计完成以后你就可以与别人分享了,在设计图的右侧有一个地址提供分享 。

frame box 10 界面原型设计工具使用系列(一) Frame Box

目前的情况下,任何人都可以看到你的设计图(私有的权限控制将要实现),如果你不设为只读,别人还能修改。

但是这个设计图不支持导出到本地,这一点有点不爽,不知道以后会不会加上。

关于这个工具的介绍就到这里了,总体来说:这是一个简单的原型设计工具,更适合进行网页原型设计,可以按照项目管理,方便地拖拽设计,可以与你的工作成员分享、修改,但是只能在线使用,目前还不支持私有(任何人都可以看到,官方说即将实现)。

<think>我们正在设计个图书管理系统的课程设计方案,使用Python的Tkinter和PyQt两种GUI库来实现。系统需要包含基本功能:添加图书、删除图书、查询图书,并且要有图形用户界面。我们将分别设计两个版本:Tkinter版本和PyQt版本,然后进行对比分析。参考引用中提到了Tkinter和PyQt的基本使用,以及些简单的示例。我们将基于这些信息来设计图书管理系统。方案设计思路:1.功能需求:-添加图书:输入图书信息(如书名、作者、ISBN等),点击添加按钮将图书添加到系统中。-删除图书:选择图书(通过列表或表格展示),点击删除按钮删除。-查询图书:输入查询条件(如书名、作者等),显示查询结果。2.界面设计:-主窗口:包含个列表(或表格)用于显示图书列表,以及几个功能按钮(添加、删除、查询)和输入框。-添加图书:可以弹出个对话框来输入新图书的信息。-查询:可以在主窗口上放置个搜索框和按钮,实时或点击后显示查询结果。3.数据存储:为了简化,我们可以使用内存中的列表或字典来存储图书数据,也可以使用文件(如CSV)或数据库(如SQLite)来存储。考虑到课程设计的要求,我们先使用内存存储,这样简单易实现。4.分别用Tkinter和PyQt实现:、Tkinter版本:-使用Tkinter创建主窗口。-使用Listbox或Treeview(在ttk中)来显示图书列表。-使用Entry组件作为输入框,Button组件作为按钮。-添加图书时,可以弹出个Toplevel窗口作为对话框。-删除图书时,获取当前选中的图书,然后从数据列表和Listbox中删除。-查询图书时,根据输入的关键字过滤图书列表并更新显示。二、PyQt版本:-使用PyQt5创建主窗口。-使用QListWidget或QTableWidget来显示图书列表。-使用QLineEdit作为输入框,QPushButton作为按钮。-添加图书时,使用QDialog作为对话框。-删除和查询功能类似Tkinter版本。5.对比分析:在完成两个版本后,我们可以从以下几个方面对比:-代码复杂度-界面美观度-扩展性-学习曲线下面分别给出两个版本的简单代码框架:、Tkinter版本代码框架:```pythonimporttkinterastkfromtkinterimportttk,messageboxclassBook:def__init__(self,title,author,isbn):self.title=titleself.author=authorself.isbn=isbnclassLibraryAppTk:def__init__(self,root):self.root=rootself.root.title("图书管理系统(Tkinter)")self.books=[]#存储图书列表#创建界面组件self.create_widgets()defcreate_widgets(self):#搜索框和按钮search_frame=tk.Frame(self.root)search_frame.pack(padx=10,pady=5,fill=tk.X)self.search_entry=tk.Entry(search_frame)self.search_entry.pack(side=tk.LEFT,fill=tk.X,expand=True,padx=(0,5))search_button=tk.Button(search_frame,text="搜索",command=self.search_book)search_button.pack(side=tk.RIGHT)#图书列表(使用Treeview,可以显示多列)columns=("书名","作者","ISBN")self.tree=ttk.Treeview(self.root,columns=columns,show="headings")forcolincolumns:self.tree.heading(col,text=col)self.tree.pack(padx=10,pady=5,fill=tk.BOTH,expand=True)#按钮框架button_frame=tk.Frame(self.root)button_frame.pack(padx=10,pady=5,fill=tk.X)add_button=tk.Button(button_frame,text="添加图书",command=self.open_add_dialog)add_button.pack(side=tk.LEFT,padx=(0,5))delete_button=tk.Button(button_frame,text="删除图书",command=self.delete_book)delete_button.pack(side=tk.LEFT)defopen_add_dialog(self):#创建添加图书对话框dialog=tk.Toplevel(self.root)dialog.title("添加图书")#添加输入框和按钮,这里省略具体实现#示例:三个输入框和个提交按钮#提交按钮绑定self.add_book方法defadd_book(self,book_info):#将新书添加到列表,并更新Treeviewpassdefdelete_book(self):#删除选中的图书selected=self.tree.selection()ifnotselected:return#从books列表中删除,并更新Treeviewpassdefsearch_book(self):#根据搜索框内容过滤图书列表,更新Treeviewkeyword=self.search_entry.get().strip().lower()#过滤self.books,显示匹配的图书passif__name__=="__main__":root=tk.Tk()app=LibraryAppTk(root)root.mainloop()```二、PyQt版本代码框架:```pythonimportsysfromPyQt5.QtWidgetsimportQApplication,QMainWindow,QWidget,QVBoxLayout,QHBoxLayout,QLineEdit,QPushButton,QListWidget,QDialog,QLabel,QFormLayout,QDialogButtonBoxclassBook:def__init__(self,title,author,isbn):self.title=titleself.author=authorself.isbn=isbnclassAddBookDialog(QDialog):def__init__(self,parent=None):super().__init__(parent)self.setWindowTitle("添加图书")self.setup_ui()defsetup_ui(self):layout=QFormLayout()self.title_edit=QLineEdit()self.author_edit=QLineEdit()self.isbn_edit=QLineEdit()layout.addRow("书名:",self.title_edit)layout.addRow("作者:",self.author_edit)layout.addRow("ISBN:",self.isbn_edit)button_box=QDialogButtonBox(QDialogButtonBox.Ok|QDialogButtonBox.Cancel)button_box.accepted.connect(self.accept)button_box.rejected.connect(self.reject)layout.addRow(button_box)self.setLayout(layout)defget_book_info(self):returnBook(self.title_edit.text().strip(),self.author_edit.text().strip(),self.isbn_edit.text().strip())classLibraryAppQt(QMainWindow):def__init__(self):super().__init__()self.setWindowTitle("图书管理系统(PyQt)")self.books=[]#存储图书列表self.central_widget=QWidget()self.setCentralWidget(self.central_widget)self.main_layout=QVBoxLayout(self.central_widget)self.setup_ui()defsetup_ui(self):#搜索框和按钮search_layout=QHBoxLayout()self.search_edit=QLineEdit()search_button=QPushButton("搜索")search_button.clicked.connect(self.search_book)search_layout.addWidget(self.search_edit)search_layout.addWidget(search_button)#图书列表(使用QListWidget,也可以使用QTableWidget)self.book_list=QListWidget()#按钮button_layout=QHBoxLayout()add_button=QPushButton("添加图书")add_button.clicked.connect(self.open_add_dialog)delete_button=QPushButton("删除图书")delete_button.clicked.connect(self.delete_book)button_layout.addWidget(add_button)button_layout.addWidget(delete_button)self.main_layout.addLayout(search_layout)self.main_layout.addWidget(self.book_list)self.main_layout.addLayout(button_layout)defopen_add_dialog(self):dialog=AddBookDialog(self)ifdialog.exec_()==QDialog.Accepted:book=dialog.get_book_info()self.add_book(book)defadd_book(self,book):self.books.append(book)self.update_book_list()#更新列表显示defdelete_book(self):selected=self.book_list.currentRow()ifselected>=0:delself.books[selected]self.update_book_list()defsearch_book(self):keyword=self.search_edit.text().strip().lower()#这里我们暂时不实现,可以类似Tkinter版本过滤并更新列表passdefupdate_book_list(self):self.book_list.clear()forbookinself.books:self.book_list.addItem(f"{book.title}-{book.author}({book.isbn})")if__name__=="__main__":app=QApplication(sys.argv)window=LibraryAppQt()window.show()sys.exit(app.exec_())```对比分析:1.Tkinter是Python标准库的部分,无需额外安装,但界面相对简单。PyQt需要安装,但界面更美观,功能更强大。2.Tkinter版本使用Treeview来显示多列数据,而PyQt版本使用QListWidget(单列,用字符串显示)或QTableWidget(多列)。这里为了简单,PyQt版本使用了QListWidget,但实际中可以使用QTableWidget来显示多列。3.两个版本都实现了基本的添加、删除和查询(查询功能留作练习)功能。4.PyQt提供了更丰富的组件和更好的事件处理机制,但代码量相对较大。课程设计报告可以包括:-需求分析-系统设计(包括界面设计图)-两种实现版本的代码和功能说明-两种版本的对比分析-总结在实现时,可以进步完善功能,例如:-数据持久化(保存到文件或数据库)-更复杂的查询(按多个条件)-编辑图书信息-界面美化希望这个方案对您的课程设计有所帮助!相关问题:1.如何为Tkinter界面添加菜单栏?2.在PyQt中如何实现多窗口之间的数据传递?3.如何将图书数据保存到CSV文件?4.Tkinter和PyQt在事件处理机制上有什么主要区别?</think>### Python图书管理系统课程设计方案(Tkinter与PyQt实现) 我将为您提供个完整的图书管理系统课程设计方案,包含Tkinter和PyQt两种实现方式,满足添加、删除、查询等核心功能需求。 #### 、系统功能设计 1. **核心功能**: - 图书添加:$ \text{书名}, \text{作者}, \text{ISBN}, \text{出版年份} $ - 图书删除:支持单选/多选删除 - 图书查询:支持书名/作者/ISBN多条件查询 - 数据存储:SQLite数据库(轻量级,适合课程设计) 2. **界面模块**: ```mermaid graph TD A[主界面] --> B[图书列表] A --> C[查询面板] A --> D[操作按钮] D --> E[添加图书] D --> F[删除图书] D --> G[刷新数据] ``` #### 二、Tkinter实现方案 ```python import tkinter as tk from tkinter import ttk, messagebox import sqlite3 class BookManagerTk: def __init__(self, root): self.root = root self.root.title("图书管理系统 (Tkinter)") self.root.geometry("800x600") # 创建数据库连接 self.conn = sqlite3.connect('library.db') self.create_table() # 界面组件 self.create_widgets() self.load_data() def create_table(self): cursor = self.conn.cursor() cursor.execute('''CREATE TABLE IF NOT EXISTS books ( id INTEGER PRIMARY KEY, title TEXT NOT NULL, author TEXT NOT NULL, isbn TEXT UNIQUE, year INTEGER)''') self.conn.commit() def create_widgets(self): # 搜索面板 search_frame = ttk.Frame(self.root) search_frame.pack(padx=10, pady=10, fill=tk.X) ttk.Label(search_frame, text="搜索:").pack(side=tk.LEFT) self.search_entry = ttk.Entry(search_frame, width=30) self.search_entry.pack(side=tk.LEFT, padx=5) ttk.Button(search_frame, text="查询", command=self.search_books).pack(side=tk.LEFT) # 图书列表 columns = ("id", "书名", "作者", "ISBN", "出版年份") self.tree = ttk.Treeview(self.root, columns=columns, show="headings") for col in columns: self.tree.heading(col, text=col) self.tree.column(col, width=100) self.tree.pack(fill=tk.BOTH, expand=True, padx=10, pady=5) # 操作按钮 btn_frame = ttk.Frame(self.root) btn_frame.pack(pady=10) ttk.Button(btn_frame, text="添加图书", command=self.add_book).pack(side=tk.LEFT, padx=5) ttk.Button(btn_frame, text="删除图书", command=self.delete_book).pack(side=tk.LEFT, padx=5) ttk.Button(btn_frame, text="刷新", command=self.load_data).pack(side=tk.LEFT, padx=5) def load_data(self): for item in self.tree.get_children(): self.tree.delete(item) cursor = self.conn.cursor() cursor.execute("SELECT * FROM books") for row in cursor.fetchall(): self.tree.insert("", tk.END, values=row) def search_books(self): keyword = self.search_entry.get().strip() if not keyword: self.load_data() return for item in self.tree.get_children(): self.tree.delete(item) cursor = self.conn.cursor() cursor.execute("SELECT * FROM books WHERE title LIKE ? OR author LIKE ? OR isbn LIKE ?", (f"%{keyword}%", f"%{keyword}%", f"%{keyword}%")) for row in cursor.fetchall(): self.tree.insert("", tk.END, values=row) def add_book(self): # 添加窗口实现(省略详细代码) pass def delete_book(self): selected = self.tree.selection() if not selected: messagebox.showwarning("警告", "请选择要删除的图书") return ids = [self.tree.item(i, "values")[0] for i in selected] cursor = self.conn.cursor() cursor.execute(f"DELETE FROM books WHERE id IN ({','.join('?'*len(ids))})", ids) self.conn.commit() self.load_data() ``` #### 三、PyQt实现方案 ```python from PyQt5.QtWidgets import (QApplication, QMainWindow, QTableView, QHeaderView, QPushButton, QLineEdit, QVBoxLayout, QWidget, QHBoxLayout) from PyQt5.QtSql import QSqlDatabase, QSqlTableModel import sys class BookManagerQt(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle("图书管理系统 (PyQt)") self.setGeometry(100, 100, 800, 600) # 初始化数据库 self.init_db() # 创建UI self.create_ui() def init_db(self): self.db = QSqlDatabase.addDatabase("QSQLITE") self.db.setDatabaseName("library.db") if not self.db.open(): print("无法连接数据库") return False query = self.db.exec("""CREATE TABLE IF NOT EXISTS books ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, author TEXT NOT NULL, isbn TEXT UNIQUE, year INTEGER)""") return True def create_ui(self): central_widget = QWidget() self.setCentralWidget(central_widget) layout = QVBoxLayout(central_widget) # 搜索面板 search_layout = QHBoxLayout() self.search_input = QLineEdit() self.search_input.setPlaceholderText("输入书名/作者/ISBN") search_btn = QPushButton("搜索") search_btn.clicked.connect(self.search_books) search_layout.addWidget(self.search_input) search_layout.addWidget(search_btn) layout.addLayout(search_layout) # 图书表格 self.model = QSqlTableModel() self.model.setTable("books") self.model.select() self.table = QTableView() self.table.setModel(self.model) self.table.horizontalHeader().setSectionResizeMode(QHeaderView.Stretch) layout.addWidget(self.table) # 操作按钮 btn_layout = QHBoxLayout() add_btn = QPushButton("添加图书") add_btn.clicked.connect(self.add_book) del_btn = QPushButton("删除图书") del_btn.clicked.connect(self.delete_book) refresh_btn = QPushButton("刷新") refresh_btn.clicked.connect(self.refresh_data) btn_layout.addWidget(add_btn) btn_layout.addWidget(del_btn) btn_layout.addWidget(refresh_btn) layout.addLayout(btn_layout) def search_books(self): keyword = self.search_input.text().strip() if keyword: filter_str = f"title LIKE '%{keyword}%' OR author LIKE '%{keyword}%' OR isbn LIKE '%{keyword}%'" self.model.setFilter(filter_str) else: self.model.setFilter("") self.model.select() def add_book(self): # 添加窗口实现(使用QDialog) pass def delete_book(self): indexes = self.table.selectionModel().selectedRows() if not indexes: return for index in sorted(indexes, reverse=True): self.model.removeRow(index.row()) self.model.submitAll() self.model.select() def refresh_data(self): self.model.select() if __name__ == "__main__": app = QApplication(sys.argv) window = BookManagerQt() window.show() sys.exit(app.exec_()) ``` #### 四、两种实现对比分析 | **特性** | **Tkinter** | **PyQt** | |----------------|------------------------------------------|-----------------------------------------| | **开发难度** | 简单易学 | 学习曲线较陡峭 | | **界面美观度** | 基础界面,可扩展性有限 | 专业级界面,支持CSS样式 | | **数据库支持** | 需手动处理SQL | 内置QSql模块,ORM支持 | | **组件丰富度** | 基础组件 | 丰富组件(表格、模型视图等) | | **跨平台性** | 优秀(Python标准库) | 优秀(Qt跨平台支持) | | **性能** | 适合中小型应用 | 高性能(C++底层) | | **推荐场景** | 快速原型开发、简单应用 | 商业级应用、复杂界面需求 | #### 五、课程设计建议 1. **功能扩展方向**: - 添加用户登录模块 - 实现图书借阅/归还功能 - 添加数据导出(Excel/CSV) - 集成条形码扫描(ISBN) 2. **界面美化技巧**: - Tkinter:使用`ttkthemes`库更换主题 - PyQt:使用Qt样式表(QSS)自定义界面 - 添加图表展示(借阅统计等) 3. **评估要点**: - 功能完整性(增删改查) - 代码质量与架构 - 异常处理机制 - 用户交互体验 - 文档完整性(设计文档+使用说明) > **推荐学习资源**: > - Tkinter官方文档:https://docs.python.org/3/library/tk.html > - PyQt官方教程:https://www.riverbankcomputing.com/static/Docs/PyQt5/ > - SQLite Python指南:https://docs.python.org/3/library/sqlite3.html --- ### 相关问题 1. Tkinter和PyQt在开发图书管理系统时的主要性能差异是什么? 2. 如何在PyQt中实现高级搜索功能(多条件组合查询)? 3. Tkinter如何通过Treeview组件实现表格数据的排序功能? 4. 图书管理系统的数据库设计需要考虑哪些规范化原则? 5. 如何为PyQt应用添加现代化的界面主题? 6. 在Tkinter中如何处理并发数据库操作可能引发的线程安全问题?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值