好文共享
1引言
1.1设计说明
本文档是对系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。
1.2概念和定义
用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。
GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。
1.3用户假定
将使用本系统的用户定义为：对应用程序或计算机的一般用法有一定了解，用户希望界面符合WINDOWS9X特别是OFFICE97风格，对易用性、简洁性有比较高的要求，对界面快速交互没有很强的要求（即不希望通过命令方式快速交互）。
2用户界面设计规范
2.1用户界面设计原则
本系统坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
 界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
 界面设计必须经过确认才能完成。
2.2界面一致性
在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
1）显示信息一致性标准 
（1）标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号（10号）； 
（2）日期:正常字体、宋体、白底黑字、3-D lowered；
（3）对齐方法：
l 左对齐:一般文字、单个数字、日期等
l 右对齐:数字、时间、日期加时间。 
（4）分辨率为800*600，增强色16色
（5）字体缺省为宋替、五号、黑色
（6）底色缺省采用灰色
这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注意力,影响这一软件的使用，因此开发者应当注意在同一软件中表现形式的一致性。
2）布局合理化原则
应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。
在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab 的顺序是先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 布局力求简洁、有序、易于操作。
3）鼠标与键盘对应原则
应遵循的是可不用鼠标的原则:应用中的功能只用键盘也应当可以完成,即设计的应用中还应加入一些必要的按钮和菜单项。
但是,许多鼠标的操作,如双击、拖动对象等,并不能简单地用键盘来模拟即可实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容。为了用键盘也能实现这一功能,必须在窗口中定义一个表示选中的按钮,以作为实现双击功能的替代（或其它方式）。又如在一个窗口中有两个数据窗口,可以用鼠标从一个数据窗口中将一项拖出然后放到另一个中。如果只用键盘,就应当在菜单中设置拷贝或移动的菜单项。 
4）快捷键
在菜单项中使用快捷键可以让使用键盘的用户操作得更快一些,在西文Windows及其应用软件中快捷键的使用大多是一致的。本系统中应用的快捷键在各个配置项上语义必须保持一致。
面向事务的: 
l Ctrl-D 删除 
l Ctrl-F 寻找 
l Ctrl-I 插入 
l Ctrl-N 新记录 
l Ctrl-S 保存 
查询/列表: 
l Ctrl-O 
l Ctrl-R 
其它: 
l Ctrl-C 拷贝 
l Ctrl-H 帮助 
l Ctrl-P 打印 
l Ctrl-V 粘贴 
l Ctrl-W 关闭 
l Ctrl-X 剪切 
MS Windows保留键: 
l Ctrl-Tab 下一窗口 
l Ctrl-Esc 任务列表 
l Ctrl-F4 关闭窗口 
l Alt-F4 结束应用 
l Alt-Tab 下一应用 
l Enter 缺省按钮/确认操作 
l Esc 取消按钮/取消操作 
l Shift-F1 上下文相关帮助 
其它快捷键
其它快捷键使用汉语拼音的开头字母，不常用的可以没有快捷键。 
 
2.3向导（WIZARD）使用原则
对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。
2.4系统响应时间
系统响应时间包括两个方面：时间长度和时间的易变性。用户响应时间应该适中，系统响应时间过长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快操作节奏，从而导致错误。系统响应时间的易变性是指相对于平均响应时间的偏差。即使响应时间比较长，低的响应时间易变性也有助于用户建立稳定的节奏。因此在系统响应时间上坚持如下原则：
响应时间长度               界面设计 
0-10 秒                       鼠 标 显 示 成 为 沙 漏 
10 到18 秒               由微帮助来显示处理进度 
18 秒 以 上                   显示处理窗口，或显示进度条 
一个长时间的处理完成时       应给予完成警告信息 

响应时间的易变性             界面设计 
用户感觉不到                     不考虑 
用户稍微感觉到                     由微帮助提供易变性说明 
容易性大而且时间绝对差别大          显示易变性提示 
2.5用户帮助设施
常用的帮助设施有两种：集成的和附加的。集成的帮助设施一开始就是设计在软件中的，它与语境有关，用户可以直接选择与所要执行操作相关的主题。通过集成帮助设施可以缩短用户获得帮助的时间，增加界面的友好性。附加的帮助设施在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。
本系统提供这两种帮助设施，设计和实现时遵循以下原则：
1） 进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助
2） 用户可以通过帮助菜单、F1键和帮助按钮（如果有的话）访问帮助
3） 表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文档
4） 用户如何回到正常交互方式有两种选择：返回键和功能键
5） 帮助信息的构造：采用分层式帮助
6） 微帮助提供：由状态栏提供，或控件上的提示文本
2.6出错信息和警告
出错信息和警告是指出现问题时系统给出的坏消息，本系统对于出错信息和警告应该遵循以下原则：
1） 信息以用户可以理解的术语描述；
2） 信息应提供如何从错误中恢复的建设性意见；
3） 信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正；
4） 信息应伴随着视觉上的提示，如特殊的图像、颜色或信息闪烁。
5） 信息不能带有判断色彩，即任何情况下不能指责用户
2.7命令交互
由于本系统用户是WINDOWS用户，故本系统不提供命令交互。
2.8一般交互原则
 本系统一般交互遵循以下原则：
1） 一致性：菜单选择、数据显示以及其它功能都应使用一致的格式。
2） 提供有意义的反馈
3） 执行有较大破坏性的动作前要求确认
4） 在数据录入上允许取消大多数操作
5） 减少在动作间必须记忆的信息数量
6） 在对话、移动和思考中提高效率
7） 允许用户非恶意错误，系统应保护自己不受致命作物的破坏
8） 按功能对动作分类，并按此排列屏幕布局，设计者应那里提高命令和动作组织的内聚性
9） 提供语境相关的帮助机制
2.9信息显示原则
本系统信息显示遵循以下原则：
1） 只显示与当前用户语境环境有关的信息；
2） 不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息；
3） 使用一致的标记、标准缩写和可预测的颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；
4） 产生有意义的出错信息，见2.6；
5） 使用缩进和文本来辅助理解；
6） 使用窗口分隔控件分隔不同类型的信息；
7） 高效地使用显示器的显示空间。
2.10数据输入原则
 本系统数据输入遵循以下原则：
1） 尽量减少用户输入动作的数量；
2） 维护信息显示和数据输入的一致性；
3） 交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持；
4） 在当前动作的语境中使不合适的命令不起作用；
5） 让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；
6） 为所有输入的动作提供帮助，见2.5；
7） 消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。
3用户界面设计更改和追加说明
3.1更改说明
更改本用户界面设计时应该征得所有开发者的同意，所有开发者应该按更正后的原则修改和设计用户界面。
3.2追加说明
追加本用户界面设计时应该发布给所有开发者，所有开发者应该按追加后的原则修改和设计用户界面。

用户界面原型开发：技巧和技术
http://www-900.ibm.com/developerWorks/cn/components/tip-interfaceproto/index.shtml
在开发原型 UI 时，请尝试这些技巧。本列表改编自 The Object Primer 2nd Edition 的第 8 章。
图形用户界面设计
http://www.ccw.com.cn/htm/app/course/01_6_26_6.asp
http://www.ccw.com.cn/htm/app/course/01_6_26_7.asp
Windows用户界面设计
http://www.cic.tsinghua.edu.cn/sys/book4/dqz.htm
http://www.cic.tsinghua.edu.cn/sys/book4/dbz.htm
http://www.cic.tsinghua.edu.cn/sys/book4/djz.htm
VisualBasic中用户界面的设计原则
http://www.swm.com.cn/yingyong/yy-00-05/yy09.htm
文化指数与全球网络用户界面设计
Culture Index & Web User Interface Design
作者：格瑞特•霍夫史迪德 By Greert Hofstede
http://www.nextfuzhou.com/sword/study/yj1.asp?ID=200
http://www.nextfuzhou.com/sword/study/yj1.asp?ID=201
用户界面设计 －东日软件开发者网络文摘
http://www.sunistudio.com/ssdn/index.asp?act=-1&type=77&page=1
用户界面设计基础 
http://www.copathway.com/cndevforum/subject_view.asp?subject_id=6409&forum_id=61
网站设计和图形用户界面设计的不同 
http://www.unionbyte.com/tech/read.asp?id=100011
创建更加韵味的网站界面 
http://pctrend.net/bbs/wdbread.php?forumid=6&filename=f_34
人机在线
http://www.ergocn.com/link.htm

声明：本篇文章为转载自https://www.jianshu.com/p/91844c5bca78，在原作者的基础上添加目录导航，旨在帮助大家以更高效率进行学习和开发。
Python-Tkinter 图形化界面设计（详细教程）
本文目录


一、图形化界面设计的基本理解


二、 窗体控件布局

2.1 根窗体呈现示例
2.2 tkinter 常用控件

2.2.1 控件的共同属性


2.3 控件布局

2.3.1  place() 使用方法





三、tkinter常见控件的特征属性

3.1 文本输入和输出相关控件

3.1.1 标签（Label）和 消息（Message）
3.1.2 文本框（Text）
 3.1.3 输入框（Entry）


3.2 按钮(Button)
3.3 单选按钮
3.4 复选框
3.5 列表框 与 组合框

3.5.1 列表框
3.5.2 组合框


3.6 滑块)
3.7 菜单
3.8 子窗体
3.9 模式对话框(Modal)

3.9.1 交互对话框
3.9.2 文件选择对话框
 3.9.3 颜色选择对话框





 四、事件响应


 五、背景图片


 六、打开摄像头，显示


一.图形化界面设计的基本理解
当前流行的计算机桌面应用程序大多数为图形化用户界面（Graphic User Interface,GUI）,即通过鼠标对菜单、按钮等图形化元素触发指令,并从标签、对话框等图型化显示容器中获取人机对话信息。

Python自带了tkinter 模块，实质上是一种流行的面向对象的GUI工具包 TK 的Python编程接口，提供了快速便利地创建GUI应用程序的方法。其图像化编程的基本步骤通常包括：
○ 导入 tkinter 模块

○  创建 GUI 根窗体

○  添加人机交互控件并编写相应的函数。

○  在主事件循环中等待用户触发事件响应。
二.窗体控件布局
2.1. 数据集导入
根窗体是图像化应用程序的根控制器，是tkinter的底层控件的实例。当导入tkinter模块后，调用 Tk()方法可初始化一个根窗体实例 root ,用 title() 方法可设置其标题文字，用geometry()方法可以设置窗体的大小（以像素为单位）。将其置于主循环中，除非用户关闭，否则程序始终处于运行状态。执行该程序，一个窗体就呈现出来了。在这个主循环的根窗体中，可持续呈现中的其他可视化控件实例，监测事件的发生并执行相应的处理程序。下面是根窗体呈现示例：
from tkinter import *
root= Tk()
root.title('我的第一个Python窗体')
root.geometry('240x240') # 这里的乘号不是 * ，而是小写英文字母 x
root.mainloop()


2.2. tkinter 常用控件
返回目录
常用控件：常用的10 多种，如下：


2.2.1  控件的共同属性
返回目录
在窗体上呈现的可视化控件，通常包括尺寸、颜色、字体、相对位置、浮雕样式、图标样式和悬停光标形状等共同属性。不同的控件由于形状和功能不同，又有其特征属性。在初始化根窗体和根窗体主循环之间，可实例化窗体控件，并设置其属性。父容器可为根窗体或其他容器控件实例。常见的控件共同属性如下表：



标签及常见属性示例：
from  tkinter import *
root = Tk()
lb = Label(root,text='我是第一个标签',\
        bg='#d3fbfb',\
        fg='red',\
        font=('华文新魏',32),\
        width=20,\
        height=2,\
        relief=SUNKEN)
lb.pack()
root.mainloop()



其中，标签实例lb 在父容器root中实例化，具有代码中所示的text（文本）、bg（背景色）、fg(前景色)、font（字体）、width（宽，默认以字符为单位）、height（高，默认以字符为单位）和 relief（浮雕样式）等一系列属性。

在实例化控件时，实例的属性可以“属性=属性值”的形式枚举列出，不区分先后次序。例如：“ text=‘我是第一个标签’ ”显示标签的文本内容，“bg=’#d3fbfb’”设置背景色为十六进制数RGB色 #d3fbfb等等。属性值通常用文本形式表示。

当然如果这个控件实例只需要一次性呈现，也可以不必命名，直接实例化并布局呈现出来，例如：
Label(root,text='我是第一个标签',font='华文新魏').pack()

属性 relief 为控件呈现出来的3D浮雕样式，有 FLAT(平的)、RAISED(凸起的)、SUNKEN(凹陷的)、GROOVE(沟槽状边缘)和 RIDGE(脊状边缘) 5种。


2.3 控件布局
返回目录
控件的布局通常有pack()、grid() 和 place() 三种方法。

pack和grid请参考：https://www.jianshu.com/p/91844c5bca78
2.3.1 place()方法
返回目录
根据控件实例在父容器中的绝对或相对位置参数进行布局。其常用布局参数如下：

x,y：控件实例在根窗体中水平和垂直方向上的其实位置（单位为像素）。注意，根窗体左上角为0,0,水平向右，垂直向下为正方向。

relx,rely：控件实例在根窗体中水平和垂直方向上起始布局的相对位置。即相对于根窗体宽和高的比例位置，取值在0.0~1.0之间。

height,width：控件实例本身的高度和宽度（单位为像素）。

relheight,relwidth：控件实例相对于根窗体的高度和宽度比例，取值在0.0~1.0之间。
利用place()方法配合relx,rely和relheight,relwidth参数所得的到的界面可自适应根窗体尺寸的大小。place()方法与grid()方法可以混合使用。如下例子：利用place()方法排列消息（多行标签）。


from tkinter import *
root = Tk()
root.geometry('320x240')

msg1 = Message(root,text='''我的水平起始位置相对窗体 0.2，垂直起始位置为绝对位置 80 像素，我的高度是窗体高度的0.4，宽度是200像素''',relief=GROOVE)
msg1.place(relx=0.2,y=80,relheight=0.4,width=200)
root.mainloop()

三、tkinter常见控件的特征属性
3.1、文本输入和输出相关控件
文本的输入与输出控件通常包括：标签（Label）、消息（Message）、输入框（Entry）、文本框（Text）。他们除了前述共同属性外，都具有一些特征属性和功能。
○ 3.1.1 标签（Label）和 消息（Message）
返回目录
除了单行与多行的不同外，属性和用法基本一致，用于呈现文本信息。值得注意的是：属性text通常用于实例在第一次呈现时的固定文本，而如果需要在程序执行后发生变化，则可以使用下列方法之一实现：1、用控件实例的configure()方法来改变属性text的值，可使显示的文本发生变化；2、先定义一个tkinter的内部类型变量var=StringVar() 的值也可以使显示文本发生变化。

看下面的一个例子：制作一个电子时钟，用root的after()方法每隔1秒time模块以获取系统当前时间，并在标签中显示出来。

方法一：利用configure()方法或config()来实现文本变化。


import tkinter
import time

def gettime():
      timestr = time.strftime("%H:%M:%S") # 获取当前的时间并转化为字符串
      lb.configure(text=timestr)   # 重新设置标签文本
      root.after(1000,gettime) # 每隔1s调用函数 gettime 自身获取时间

root = tkinter.Tk()
root.title('时钟')

lb = tkinter.Label(root,text='',fg='blue',font=("黑体",80))
lb.pack()
gettime()
root.mainloop()

方法二：利用textvariable变量属性来实现文本变化
import tkinter
import time

def gettime():
      var.set(time.strftime("%H:%M:%S"))   # 获取当前时间
      root.after(1000,gettime)   # 每隔1s调用函数 gettime 自身获取时间

root = tkinter.Tk()
root.title('时钟')
var=tkinter.StringVar()

lb = tkinter.Label(root,textvariable=var,fg='blue',font=("黑体",80))
lb.pack()
gettime()
root.mainloop()

○ 3.1.2  文本框（Text）
文本框的常用方法如下：



上表位置的取值可为整数，浮点数或END（末尾），例如0.0表示第0列第0行

如下一个例子： 每隔1秒获取一次当前日期的时间，并写入文本框中，如下：本例中调用 datetime.now()获取当前日期时间，用insert()方法每次从文本框txt的尾部（END）开始追加文本。


from tkinter import *
import time
import datetime

def gettime():
       s=str(datetime.datetime.now())+'\n'
       txt.insert(END,s)
       root.after(1000,gettime)  # 每隔1s调用函数 gettime 自身获取时间

root=Tk()
root.geometry('320x240')
txt=Text(root)
txt.pack()
gettime()
root.mainloop()

○ 3.1.3 输入框（Entry）
返回目录
通常作为功能比较单一的接收单行文本输入的控件，虽然也有许多对其中文本进行操作的方法，但通常用的只有取值方法get()和用于删除文本的delete(起始位置，终止位置)，例如：清空输入框为delete(0，END)。
3.2 按钮(Button)
返回目录
主要是为响应鼠标单击事件触发运行程序所设的，故其除控件共有属性外，属性command是最为重要的属性。通常，将按钮要触发执行的程序以函数形式预先定义，然后可以用一下两种方法调用函数。Button按钮的状态有：'normal','active','disabled'
○ 直接调用函数。参数表达式为“command=函数名”，注意函数名后面不要加括号，也不能传递参数。如下面的command=run1：

○ 利用匿名函数调用函数和传递参数。参数的表达式为“command=lambda”:函数名（参数列表）。例如下面的："command=lambda:run2(inp1.get(),inp2.get())"。
○ 看下面的例子：1.从两个输入框去的输入文本后转为浮点数值进行加法运算，要求每次单击按钮产生的算是结果以文本的形式追加到文本框中，将原输入框清空。2.按钮方法一不传参数调用函数run1()实现，按钮“方法二”用lambda调用函数run2(x,y)同时传递参数实现。


from tkinter import *

def run1():
     a = float(inp1.get())
     b = float(inp2.get())
     s = '%0.2f+%0.2f=%0.2f\n' % (a, b, a + b)
     txt.insert(END, s)   # 追加显示运算结果
     inp1.delete(0, END)  # 清空输入
     inp2.delete(0, END)  # 清空输入

def run2(x, y):
     a = float(x)
     b = float(y)
     s = '%0.2f+%0.2f=%0.2f\n' % (a, b, a + b)
     txt.insert(END, s)   # 追加显示运算结果
     inp1.delete(0, END)  # 清空输入
     inp2.delete(0, END)  # 清空输入

root = Tk()
root.geometry('460x240')
root.title('简单加法器')

lb1 = Label(root, text='请输入两个数，按下面两个按钮之一进行加法计算')
lb1.place(relx=0.1, rely=0.1, relwidth=0.8, relheight=0.1)
inp1 = Entry(root)
inp1.place(relx=0.1, rely=0.2, relwidth=0.3, relheight=0.1)
inp2 = Entry(root)
inp2.place(relx=0.6, rely=0.2, relwidth=0.3, relheight=0.1)

# 方法-直接调用 run1()
btn1 = Button(root, text='方法一', command=run1)
btn1.place(relx=0.1, rely=0.4, relwidth=0.3, relheight=0.1)

# 方法二利用 lambda 传参数调用run2()
btn2 = Button(root, text='方法二', command=lambda: run2(inp1.get(), inp2.get()))
btn2.place(relx=0.6, rely=0.4, relwidth=0.3, relheight=0.1)

# 在窗体垂直自上而下位置60%处起，布局相对窗体高度40%高的文本框
txt = Text(root)
txt.place(rely=0.6, relheight=0.4)

root.mainloop()

3.3 单选按钮
返回目录
(Radiobutton)是为了响应故乡排斥的若干单选项的单击事件以触发运行自定义函数所设的，该控件排除具有共有属性外，还具有显示文本（text）、返回变量（variable）、返回值（value）、响应函数名（command）等重要属性。响应函数名“command=函数名”的用法与Button相同，函数名最后也要加括号。返回变量variable=var通常应预先声明变量的类型var=IntVar()或var=StringVar(),在所调用的函数中方可用var.get()方法获取被选中实例的value值。例如下面：


from tkinter import *
def Mysel():
      dic = {0:'甲',1:'乙',2:'丙'}
      s = "您选了" + dic.get(var.get()) + "项"
      lb.config(text = s)

root = Tk()
root.title('单选按钮')
lb = Label(root)
lb.pack()

var = IntVar()
rd1 = Radiobutton(root,text="甲",variable=var,value=0,command=Mysel)
rd1.pack()

rd2 = Radiobutton(root,text="乙",variable=var,value=1,command=Mysel)
rd2.pack()

rd3 = Radiobutton(root,text="丙",variable=var,value=2,command=Mysel)
rd3.pack()

root.mainloop()

3.4 复选框
返回目录
(Checkbutton) 是为了返回多个选项值的交互控件，通常不直接触发函数的执行。该控件除具有共有属性外，还具有显示文本（text）、返回变量（variable）、选中返回值（onvalue）和未选中默认返回值（offvalue）等重要属性。返回变量variable=var 通常可以预先逐项分别声明变量的类型var=IntVar() (默认)或 var=StringVar(), 在所调用的函数中方可分别调用 var.get()方法 取得被选中实例的 onvalue或offvalue值。复选框实例通常还可分别利用 select()、deselect()和 toggle() 方法对其进行选中、清除选中和反选操作。
○ 如下的例子： 利用复选框实现，单击OK，可以将选中的结果显示在标签上。效果如下：


○ 方法：利用函数中的 if-else 分支实现多项显示
from tkinter import *
import tkinter

def run():
     if(CheckVar1.get()==0 and CheckVar2.get()==0 and CheckVar3.get()==0 and CheckVar4.get()==0):
         s = '您还没选择任何爱好项目'
     else:
         s1 = "足球" if CheckVar1.get()==1 else ""
         s2 = "篮球" if CheckVar2.get() == 1 else ""
         s3 = "游泳" if CheckVar3.get() == 1 else ""
         s4 = "田径" if CheckVar4.get() == 1 else ""
         s = "您选择了%s %s %s %s" % (s1,s2,s3,s4)
     lb2.config(text=s)

root = tkinter.Tk()
root.title('复选框')
lb1=Label(root,text='请选择您的爱好项目')
lb1.pack()

CheckVar1 = IntVar()
CheckVar2 = IntVar()
CheckVar3 = IntVar()
CheckVar4 = IntVar()

ch1 = Checkbutton(root,text='足球',variable = CheckVar1,onvalue=1,offvalue=0)
ch2 = Checkbutton(root,text='篮球',variable = CheckVar2,onvalue=1,offvalue=0)
ch3 = Checkbutton(root,text='游泳',variable = CheckVar3,onvalue=1,offvalue=0)
ch4 = Checkbutton(root,text='田径',variable = CheckVar4,onvalue=1,offvalue=0)

ch1.pack()
ch2.pack()
ch3.pack()
ch4.pack()

btn = Button(root,text="OK",command=run)
btn.pack()

lb2 = Label(root,text='')
lb2.pack()
root.mainloop()

3.5 列表框 与 组合框
3.5.1 列表框
返回目录
(Listbox) 可供用户单选或多选所列条目以形成人机交互。列表框控件的主要方法见下面的表：



执行自定义函数时，通常使用“实例名.surselection()” 或 “selected” 来获取选中项的位置索引。由于列表框实质上就是将Python 的列表类型数据可视化呈现，在程序实现时，也可直接对相关列表数据进行操作，然后再通过列表框展示出来，而不必拘泥于可视化控件的方法。看下面的一个例子：实现列表框的初始化、添加、插入、修改、删除和清空操作，如下：


from tkinter import *
def ini():
      Lstbox1.delete(0,END)
      list_items = ["数学","物理","化学","语文","外语"]
      for item in list_items:
           Lstbox1.insert(END,item)

def clear():
      Lstbox1.delete(0,END)

def ins():
      if entry.get() != '':
          if Lstbox1.curselection() == ():
              Lstbox1.insert(Lstbox1.size(),entry.get())
          else:
              Lstbox1.insert(Lstbox1.curselection(),entry.get())

def updt():
      if entry.get() != '' and Lstbox1.curselection() != ():
           selected=Lstbox1.curselection()[0]
           Lstbox1.delete(selected)
           Lstbox1.insert(selected,entry.get())

def delt():
      if Lstbox1.curselection() != ():
           Lstbox1.delete(Lstbox1.curselection())

root = Tk()
root.title('列表框实验')
root.geometry('320x240')

frame1 = Frame(root,relief=RAISED)
frame1.place(relx=0.0)

frame2 = Frame(root,relief=GROOVE)
frame2.place(relx=0.5)

Lstbox1 = Listbox(frame1)
Lstbox1.pack()

entry = Entry(frame2)
entry.pack()

btn1 = Button(frame2,text='初始化',command=ini)
btn1.pack(fill=X)

btn2 = Button(frame2,text='添加',command=ins)
btn2.pack(fill=X)

btn3 = Button(frame2,text='插入',command=ins) # 添加和插入功能实质上是一样的
btn3.pack(fill=X)

btn4 = Button(frame2,text='修改',command=updt)
btn4.pack(fill=X)

btn5 = Button(frame2,text='删除',command=delt)
btn5.pack(fill=X)

btn6 = Button(frame2,text='清空',command=clear)
btn6.pack(fill=X)

root.mainloop()

3.5.2  组合框
返回目录
(Combobox) 实质上是带文本框的上拉列表框，其功能也将是Python 的列表类型数据可视化呈现，并提供用户单选或多选所列条目以形成人机交互。在图形化界面设计时，由于其具有灵活的界面，因此往往比列表框更受喜爱。但该控件并不包含在 tkinter 模块中，而是与 TreeView、Progressbar、Separator等控件一同包含在tkinter 的子模块ttk中。如果使用该控件，应先与from tkinter import ttk 语句引用ttk子模块，然后创建组合框实例： 实例名=Combobox(根对象,[属性列表])

指定变量var=StringVar(),并设置实例属性 textvariable = var,values=[列表…]。组合框控件常用方法有：获得所选中的选项值get()和获得所选中的选项索引current()。

看下面的一个例子：实现四则运算计算器，将两个操作数分别填入两个文本框后，通过选择组合框中的算法触发运算，如下：


from tkinter.ttk import *

def calc(event):
       a = float(t1.get())
       b = float(t2.get())
       dic = {0:a+b,1:a-b,2:a*b,3:a/b}
       c = dic[comb.current()]
       lbl.config(text=str(c))

root = Tk()
root.title('四则运算')
root.geometry('320x240')

t1 = Entry(root)
t1.place(relx=0.1,rely=0.1,relwidth=0.2,relheight=0.1)

t2 = Entry(root)
t2.place(relx=0.5,rely=0.1,relwidth=0.2,relheight=0.1)

var = StringVar()

comb = Combobox(root,textvariable=var,values=['加','减','乘','除',])
comb.place(relx=0.1,rely=0.5,relwidth=0.2)
comb.bind('<<ComboboxSelected>>',calc)

lbl=Label(root,text='结果')
lbl.place(relx=0.5,rely=0.7,relwidth=0.2,relheight=0.3)

root.mainloop()

3.6 滑块
返回目录
(Scale) 是一种 直观地进行数值输入的交互控件，其主要属性见下表：



滑块控件实例的主要方法比较简单，有 get()和set(值)，分别为取值和将滑块设在某特定值上。滑块实例也可绑定鼠标左键释放事件<ButtoonRelease-1>,并在执行函数中添加参数event来实现事件响应。

例如：在一个窗体上设计一个200像素宽的水平滑块，取值范围为1.0~5.0，分辨精度为0.05，刻度间隔为 1，用鼠标拖动滑块后释放鼠标可读取滑块值并显示在标签上。效果如下：


from tkinter  import  *

def show(event):
      s = '滑块的取值为' + str(var.get())
      lb.config(text=s)

root = Tk()
root.title('滑块实验')
root.geometry('320x180')
var=DoubleVar()
scl = Scale(root,orient=HORIZONTAL,length=200,from_=1.0,to=5.0,label='请拖动滑块',tickinterval=1,resolution=0.05,variable=var)
scl.bind('<ButtonRelease-1>',show)
scl.pack()

lb = Label(root,text='')
lb.pack()

root.mainloop()

3.7 菜单
返回目录
(Menu)用于可视化地为一系列的命令分组，从而方便用户找到和触发执行这些命令。这里Menu所实例化别的主要是菜单，其通式为：
菜单实例名=Menu(根窗体)
菜单分组1=Menu(菜单实例名)
菜单实例名.add_cascade(<label=菜单分组1 显示文本>,<menu=菜单分组1>)
菜单分组1.add_command(<label=命令1文本>,<command=命令1函数名>)

其中较为常见的方法有：add_cascade()、add_command()和add_separator()，分别用于添加一个菜单分组、添加一条菜单命令和添加一条分割线。

利用Menu控件也可以创建快捷菜单（又称为上下文菜单）。通常需要右击弹出的控件实例绑定鼠标右击响应事件,并指向一个捕获event参数的自定义函数，在该自定义函数中，将鼠标的触发位置event.x_root 和 event.y_root以post()方法传给菜单。

例子: 仿照window自带的“记事本”中的文件和编辑 菜单，实现在主菜单个快捷菜单上触发菜单命令，并相应改变窗体上的标签的文本内容。效果如下：


from tkinter import *

def new():
     s = '新建'
     lb1.config(text=s)

def ope():
     s = '打开'
     lb1.config(text=s)

def sav():
     s = '保存'
     lb1.config(text=s)

def cut():
     s = '剪切'
     lb1.config(text=s)

def cop():
     s = '复制'
     lb1.config(text=s)

def pas():
     s = '粘贴'
     lb1.config(text=s)

def popupmenu(event):
     mainmenu.post(event.x_root,event.y_root)

root = Tk()
root.title('菜单实验')
root.geometry('320x240')

lb1 = Label(root,text='显示信息',font=('黑体',32,'bold'))
lb1.place(relx=0.2,rely=0.2)

mainmenu = Menu(root)
menuFile = Menu(mainmenu)  # 菜单分组 menuFile
mainmenu.add_cascade(label="文件",menu=menuFile)
menuFile.add_command(label="新建",command=new)
menuFile.add_command(label="打开",command=ope)
menuFile.add_command(label="保存",command=sav)
menuFile.add_separator()  # 分割线
menuFile.add_command(label="退出",command=root.destroy)

menuEdit = Menu(mainmenu)  # 菜单分组 menuEdit
mainmenu.add_cascade(label="编辑",menu=menuEdit)
menuEdit.add_command(label="剪切",command=cut)
menuEdit.add_command(label="复制",command=cop())
menuEdit.add_command(label="粘贴",command=pas())

root.config(menu=mainmenu)
root.bind('Button-3',popupmenu) # 根窗体绑定鼠标右击响应事件
root.mainloop()

3.8 子窗体
返回目录
用Toplevel可新建一个显示在最前面的子窗体，其通式为： 字体实例名=Toplevel(根窗体)，子窗体与根窗体类似，也可设置title、geomerty等属性，并在画布上布局其他控件。如下的例子：在根窗体上创建菜单，触发创建一个新的窗体


from tkinter import *

def newwind():
      winNew = Toplevel(root)
      winNew.geometry('320x240')
      winNew.title('新窗体')
      lb2 = Label(winNew,text='我在新窗体上')
      lb2.place(relx=0.2,rely=0.2)
      btClose=Button(winNew,text='关闭',command=winNew.destroy)
      btClose.place(relx=0.7,rely=0.5)

root = Tk()
root.title('新建窗体实验')
root.geometry('320x240')

lb1 = Label(root,text='主窗体',font=('黑体',32,'bold'))
lb1.place(relx=0.2,rely=0.2)

mainmenu = Menu(root)
menuFile = Menu(mainmenu)
mainmenu.add_cascade(label='菜单',menu=menuFile)
menuFile.add_command(label='新窗体',command=newwind)
menuFile.add_separator()
menuFile.add_command(label='退出',command=root.destroy)

root.config(menu=mainmenu)
root.mainloop()

关闭窗体程序运行的方法通常用 destory(),而不建议用 quit()。用Toplevel 所创建的子窗体是非模式（Modeless）的窗体，虽然初建时子窗体在最前面，但根窗体上的控件实例也是可以被操作的。
3.9 模式对话框(Modal)
返回目录
是相对于前面介绍的非模式窗体而言的，所弹出的对话框必须应答，在关闭之前无法操作其后面的其他窗体。常见的模式对话框有消息对话框、输入对话框、文件选择对话框、颜色选择对话框等。
3.9.1 交互对话框
返回目录
(一)、消息对话框: 引用 tkinter.messagebox 包，可使用消息对话框函数。执行这些函数，可弹出模式消息对话框，并根据用户的响应但会一个布尔值。其通式为：
消息对话框函数(<title=标题文本>,<message=消息文本>,[其他参数])

看下面的例子：单击按钮，弹出确认取消对话框，并将用户回答显示在标签中。效果如下：


from tkinter import *
import tkinter.messagebox

def xz():
    answer=tkinter.messagebox.askokcancel('请选择','请选择确定或取消')
    if answer:
        lb.config(text='已确认')
    else:
        lb.config(text='已取消')

root = Tk()

lb = Label(root,text='')
lb.pack()
btn=Button(root,text='弹出对话框',command=xz)
btn.pack()
root.mainloop()

(二)、输入对话框: 引用tkinter.simpledialog包，可弹出输入对话框，用以接收用户的简单输入。输入对话框常用 askstring()、askfloat()和askfloat() 三种函数，分别用于接收字符串、整数和浮点数类型的输入。

如下面的例子：单击按钮，弹出输入对话框，接收文本输入显示在窗体的标签上。如下：


from tkinter.simpledialog import *

def xz():
    s=askstring('请输入','请输入一串文字')
    lb.config(text=s)

root = Tk()

lb = Label(root,text='')
lb.pack()
btn=Button(root,text='弹出输入对话框',command=xz)
btn.pack()
root.mainloop()

3.9.2 文件选择对话框
返回目录
引用tkinter.filedialog包，可弹出文件选择对话框，让用户直观地选择一个或一组文件，以供进一步的文件操作。常用的文件选择对话框函数有 askopenfilename()、askopenfilenames()和asksaveasfilename(),分别用于进一步打开一个文件、一组文件和保存文件。其中，askopenfilename()和asksaveasfilenamme()函数的返回值类型为包含文件路径的文件名字符串，而askopenfilenames()函数的返回值类型为元组。

例如：单击按钮，弹出文件选择对话框（“打开”对话框），并将用户所选择的文件路径和文件名显示在窗体的标签上。如下


from tkinter import *
import tkinter.filedialog

def xz():
    filename=tkinter.filedialog.askopenfilename()
    if filename != '':
         lb.config(text='您选择的文件是'+filename)
    else:
         lb.config(text='您没有选择任何文件')

root = Tk()

lb = Label(root,text='')
lb.pack()
btn=Button(root,text='弹出文件选择对话框',command=xz)
btn.pack()
root.mainloop()

3.9.3、颜色选择对话框
返回目录
引用tkinter.colorchooser包，可使用 askcolor()函数弹出模式颜色选择对话框，让用户可以个性化地设置颜色属性。该函数的返回形式为包含RGB十进制浮点元组和RGB十六进制字符串的元组类型，例如：“((135.527343.52734375,167.65234375,186.7265625)),’#87a7ba’”。通常，可将其转换为字符串类型后，再截取以十六进制数表示的RGB颜色字符串用于为属性赋值。

举例：单击按钮，弹出颜色选择对话框，并将用户所选择的颜色设置为窗体上标签的背景颜色，如下：


from tkinter import *
import tkinter.colorchooser

def xz():
    color=tkinter.colorchooser.askcolor()
    colorstr=str(color)
    print('打印字符串%s 切掉后=%s' % (colorstr,colorstr[-9:-2]))
    lb.config(text=colorstr[-9:-2],background=colorstr[-9:-2])

root = Tk()

lb = Label(root,text='请关注颜色的变化')
lb.pack()
btn=Button(root,text='弹出颜色选择对话框',command=xz)
btn.pack()
root.mainloop()

四、事件响应
返回目录
用tkinter 可将用户事件与自定义函数绑定，用键盘或鼠标的动作事件来响应触发自定义函数的执行。其通式为：
控件实例.bind(<事件代码>,<函数名>)

其中，事件代码通常以半角小于号“<”和大于号“>” 界定，包括事件和按键等 2~3个部分，它们之间用减号分隔，常见事件代码见下表：



例如,将框架控件实例frame 绑定鼠标右键单击事件,调用自定义函数 myfunc()可表示为"frame.bind(’’,myfunc)",注意: myfunc后面没有括号。将控件实例绑定到键盘事件和部分光标不落在具体控件实例上的鼠标事件时，还需要设置该实例执行focus_set() 方法获得焦点，才能对事件持续响应。例如： frame.focus_set()。所调用的自定义函数若需要利用鼠标或键盘的响应值，可将event作为参数，通过event的属性获取。event的属性见下表：




from tkinter import *

def show(event):
s=event.keysym
lb.config(text=s)

root=Tk()
root.title('按键实验')
root.geometry('200x200')
lb=Label(root,text='请按键',font=('黑体',48))
lb.bind('<Key>',show)
lb.focus_set()
lb.pack()
root.mainloop()

补充：
五、背景图片
1、添加背景
返回目录
#插入文件图片
import tkinter as tk

root = tk.Tk()

#创建一个标签类, [justify]:对齐方式
textLabel = tk.Label(root,text="你在右边会看到一个图片，\n我在换个行",
justify = tk.LEFT)#左对齐
textLabel.pack(side=tk.LEFT)#自动对齐,side：方位

 

#创建一个图片管理类
photo = tk.PhotoImage(file="18.png")#file：t图片路径
imgLabel = tk.Label(root,image=photo)#把图片整合到标签类中
imgLabel.pack(side=tk.RIGHT)#自动对齐


tk.mainloop()


返回目录
import tkinter as tk

root = tk.Tk()


#增加背景图片
photo = tk.PhotoImage(file="背景.png")
theLabel = tk.Label(root,
　　　　　　　　　text="我是内容,\n请你阅读",#内容
　　　　　　　　　justify=tk.LEFT,#对齐方式
　　　　　　　　　image=photo,#加入图片
　　　　　　　　　compound = tk.CENTER,#关键:设置为背景图片
　　　　　　　　　font=("华文行楷",20),#字体和字号
　　　　　　　　　fg = "white")#前景色
theLabel.pack()

 

tk.mainloop()


返回目录
#插入文件图片
import tkinter as tk

root = tk.Tk()

frame1 = tk.Frame(root)#这是上面的框架
frame2 = tk.Frame(root)#这是下面的框架


var = tk.StringVar()#储存文字的类
var.set("你在右边会看到一个图片，\n我在换个行")#设置文字

#创建一个标签类, [justify]:对齐方式，[frame]所属框架
textLabel = tk.Label(frame1,textvariable=var,
　　　　　　　　　justify = tk.LEFT)#显示文字内容 
textLabel.pack(side=tk.LEFT)#自动对齐,side：方位

 

#创建一个图片管理类
photo = tk.PhotoImage(file="18.png")#file：t图片路径
imgLabel = tk.Label(frame1,image=photo)#把图片整合到标签类中
imgLabel.pack(side=tk.RIGHT)#自动对齐


def callback():#触发的函数
　　var.set("你还真按了")#设置文字

#[frame]所属框架 ，text 文字内容 command：触发方法
theButton = tk.Button(frame2,text="我是下面的按钮",command=callback)
theButton.pack()#自动对齐

 

frame1.pack(padx=10,pady=10)#上框架对齐
frame2.pack(padx=10,pady=10)#下框架对齐


tk.mainloop()




返回目录
六、打开摄像头，显示
效果：



代码：
  from tkinter import *
    import cv2
    from PIL import Image,ImageTk
    
    
    def take_snapshot():
        print("有人给你点赞啦！")
    
    def video_loop():
        success, img = camera.read()  # 从摄像头读取照片
        if success:
            cv2.waitKey(100)
            cv2image = cv2.cvtColor(img, cv2.COLOR_BGR2RGBA)#转换颜色从BGR到RGBA
            current_image = Image.fromarray(cv2image)#将图像转换成Image对象
            imgtk = ImageTk.PhotoImage(image=current_image)
            panel.imgtk1 = imgtk
            panel.config(image=imgtk)
            root.after(1, video_loop)
    
    camera = cv2.VideoCapture(0)    #摄像头
    
    root = Tk()
    root.title("opencv + tkinter")
    #root.protocol('WM_DELETE_WINDOW', detector)
    
    
    panel = Label(root)  # initialize image panel
    panel.pack(padx=10, pady=10)
    # root.config(cursor="arrow")
    btn = Button(root, text="点赞!", command=take_snapshot)
    btn.pack(fill="both", expand=True, padx=10, pady=10)
    
    video_loop()
    
    root.mainloop()
    # 当一切都完成后，关闭摄像头并释放所占资源
    camera.release()
    cv2.destroyAllWindows()

感谢前辈：

https://www.jianshu.com/p/91844c5bca78

https://www.cnblogs.com/banzhen/p/7427201.html

https://blog.csdn.net/a1_a1_a/article/details/79981788

 专题八    MATLAB图形用户界面设计

一    图形窗口与坐标轴

1. 图形对象的句柄

1.1 句柄的概念

在MATLAB中，每一个具体的图形都是由若干个不同的图形对象组成的。

在MATLAB中，用句柄来标识对象，通过句柄来访问相应对象的属性。

1.2 访问图形对象

访问图形对象是指获取或设置图形对象的属性。不同图形对象所具有的属性不同，但访问的方法是一样的。一般使用点运算符来访问对象属性。如下：

对象句柄 . 属性名

例1。



得到结果图为：



可以通过修改图形对象的属性来改变上图，如下：





1.3 获取特定图形对象句柄的函数

gcf：获取当前图形窗口的句柄。
	
gca：获取当前坐标轴的句柄。
	
gco：获取最近被选中的图形对象的句柄。
	
findobj：按照指定的属性来获取图形对象的句柄。
2. 图形对象的属性

2.1 图形对象的常用公共属性

Children属性：该对象的所有子对象的句柄组成的一个向量。
	
Parent属性：该对象的父对象的句柄。
	
Type属性：对象的类型，这是一个只读属性。
	
Tag属性：用于给对象定义一个标识符。
例2：分别在两个子图中绘制曲线和曲面。然后设置子图1的背景色为黄色，曲线线条的颜色为红色，设置子图2的背景色为青色。

subplot(1,2,1);
h1 = fplot(@(t)t.*sin(t), @(t)t.*cos(t), [0, 6*pi]); % h1是曲线的句柄
axis equal;
subplot(1,2,2);
[x, y, z] = peaks(20);
h2 = mesh(x, y, z); % h2是曲面的句柄
h10 = h1.Parent; % h10是曲线父对象的句柄，即坐标轴的句柄
h10.Color = 'y'; % 设置坐标轴的颜色为黄色
h1.Color = 'r'; % 设置曲线的颜色为红色
h2.Parent.Color = 'cyan'; % 设置坐标轴的颜色为青色



2.2 图形对象的常用动态属性

KeyPressFcn属性：定义按下键盘按键事件的响应。
	
CreateFcn属性：定义创建图形对象时做出的响应。
	
DeleteFcn属性：定义取消图形对象时做出的响应。
	
WindowButtonDownFcn或ButtonDownFcn属性：定义单击鼠标左键事件的响应。
3. 图形窗口的操作

3.1 建立图形窗口对象

MATLAB通过figure函数来创建窗口对象，其调用格式为：

句柄变量=figure(属性1, 属性值1, 属性2, 属性值2, ...)，其中，属性用于设置图形窗口的特征。
	
句柄变量=figure，按MATLAB默认的属性值建立图形窗口。
	
figure(窗口句柄)，设定该句柄对应的窗口为当前窗口。
3.2 图形窗口属性

MenuBar属性：控制图形窗口是否具有菜单条，其取值为'none'或'figure'。
	
Name属性：指定图形窗口的标题。
	
NumberTitle属性：决定着在图形窗口的标题中是否以“Figure n：”为标题前缀。取值为'on'或者'off'。
	
Color属性：设定图形窗口背景的颜色。
	
其他属性查看帮助文档。
例3：建立一个图形窗口。该图形窗口没有菜单条，标题名称为“图形窗口示例”。图形窗口对象起始于屏幕左下角(1,1)处，宽度和高度分别是300像素点和200像素点。背景颜色为青色。当用户从键盘按下任意一个键时，然后在窗口中单击鼠标左键，在鼠标指针所在的位置将显示“Hello World!”。

hf = figure; % 建立一个图形窗口
hf.Color = 'cyan'; % 设置背景颜色为青色
hf.Position = [1, 1, 300, 200]; 
hf.Name = '图形窗口示例';
hf.NumberTitle = 'on'; % 以Figure n：为图形窗口的标题前缀 
hf.MenuBar = 'none'; % 图形窗口无菜单条
hf.ButtonDownFcn = 'gtext(''Hello World!'')';



4. 坐标轴对象的操作

4.1 建立坐标轴对象

使用axes函数，其调用格式是：

句柄变量=axes(属性1，属性值1，属性2，属性值2，…)，其中，属性用于设置坐标轴的外观和行为。
	
句柄变量=axes，按MATLAB默认的属性值在当前图形窗口创建坐标轴。
	
axes(坐标轴句柄)，设定该句柄代表的坐标轴为当前坐标轴。
4.2 坐标轴对象的属性

Position属性：定义坐标轴在图形窗口中的位置和大小。
	
Units属性：定义坐标轴使用的度量单位，默认值是'normalized'。
	
Box属性：决定坐标轴是否带有边框，可取值是'on'或'off'，默认值为'off'。
	
GridLineStyle属性：用于定义网格线的类型，可取值是':'，'-'，'-.'，'--'，'none'，默认值是':'。
	
Title属性：用于对坐标轴标题对象进行操作，取值是通过title函数建立的标题对象的句柄。
	
XLabel, YLabel, ZLabel属性：取值分别是通过xlabel, ylabel, zlabel函数建立的标签对象的句柄。
	
XLim, YLim, ZLim属性：分别定义各坐标轴的下限和上限，取值是2元向量[Lmin, Lmax]，默认值是[0,1]。
	
XScale, YScale, ZScale属性：定义各坐标轴的刻度类型。可取值是'linear'，'log'。
	
View属性：定义视点。取值是2元向量[az, el]，az定义视点的方位角，el定义视点的仰角。坐标轴默认视点的方位角是0°，仰角是90°。
	
ColorOrder属性：用于设置多条曲线的颜色顺序，是一个n×3矩阵，矩阵的每一行用RGB三元组表示一种颜色，默认n为7（即有7种颜色）。
例4：利用坐标轴对象实现图形窗口的分割。

close all; clear; clc; 
hal = axes('Position', [0.1, 0.1, 0.7, 0.7]); 
contour(peaks(20));
hal.Title = title('等高线');
hal.YLabel = ylabel('南北向');
hal.XLabel = xlabel('东西向');
hal = axes('Position', [0.65, 0.7, 0.28, 0.28]); 
surf(peaks(20));
ha2.View = [-30, 45]; 



例5：定义包含4种颜色的ColorOrder属性，绘制6条曲线。

close all; clear; clc; 
x = [0, 0]; 
y = [0, 1]; 
ha = axes; % 按MATLAB默认的属性值在当前图形窗口创建坐标轴。
ha.ColorOrder = [0,0,0; 1,0,0; 0,1,0; 0,0,1]; % 定义4种颜色
hold on; 
plot(x,y, x+0.5,y, x+1,y, x+1.5,y, x+2,y, x+2.5,y); % 绘制6条曲线
ha.XLim = [-0.2, 3];
ha.YLim = [-0.2, 1.2];



二    曲线与曲面对象

曲线和曲面是MATLAB中常见的图形对象。本部分介绍如何在坐标轴中建立曲线对象和曲面对象，以及如何修改这些对象的属性来调整它们的特征。

2.1 建立曲线对象

line函数的调用格式为：句柄变量=line(x, y, z, 属性1, 属性值1, 属性2, 属性值2, ...)，其中，x, y, z是等长的向量或同型的矩阵，存储数据点的坐标。

2.2 曲线对象的常用属性

Color属性：定义曲线的颜色，默认值为[0,0,0]。
	
LineStyle属性：定义线型，默认值为‘-’。
	
LineWidth属性：定义线宽，默认值为0.5磅。
	
Marker属性：定义数据点标记符号，默认值为‘none’。
	
MarkerSize属性：定义数据点标记符号的大小，默认值为6磅。
	
XData、YData、ZData属性：设置3个坐标轴的数据源。
例6：利用曲线对象绘制奥运五环图案。

close all; clear; clc; 
t = -0.1 : 0.1 : 2*pi; % 取-0.1开始是为了让各个圆环首尾闭合
x = cos(t); 
y = sin(t); 
line(x, y, 'Color', 'b');
line(x+1.2, y-1, 'Color', 'y');
line(x+2.4, y, 'Color', 'k'); % k表示黑色
line(x+3.6, y-1, 'Color', 'g');
line(x+4.8, y, 'Color', 'r');
ha = gca; % 获取当前坐标轴的句柄
for n = 1 : size(ha.Children) % ha.Children表示坐标轴对象的所有子对象句柄组成的向量
    ha.Children(n).LineWidth = 5; % 逐个设置曲线的线宽
end
ha.XLim = [-2, 7]; 
ha.YLim = [-4, 3]; 
axis equal; 



2.3 建立曲面对象

建立曲面对象使用surface函数，其调用格式为：句柄变量=surface(x, y, z, c, 属性1, 属性值1, 属性2, 属性值2, ...)，其中，x, y, z是等长的向量或者同型的矩阵，存储数据点的坐标，与mesh、surf函数含义相同。c用于指定在不同高度下的曲面颜色。 

surf函数每调用一次，就会刷新坐标轴，清空原有图形，再绘制新的图形。而surface函数生成的曲面则在已有图形上叠加显示。利用surface函数建立的曲面对象，默认视点在图形正上方，即方位角为0°，仰角为90°。

2.4 与曲面对象有关的属性

曲面对象除了有与曲线对象相同的属性以外，还有其他一些常用的属性，如：

FaceColor属性：定义曲面网格片的颜色。可取值为：
‘flat’
			
每一个网格片用单一颜色填充。
		
'interp'
			
用渐变方式填充网格片
		
'none'
			
网格片无颜色
		
'texturemap'
			
用Cdata属性定义的颜色填充网格片
		
RGB向量或代表颜色的字符
			
-
		
EdgeColor属性：定义曲面网格线的颜色。
例7：利用曲面对象绘制立体圆环，圆环方程为：

，其中u∈[0, 2π]，v∈[0, 2π]

close all; clear; clc; 
r = linspace(0, 2*pi, 60); 
[u,v] = meshgrid(r); 
x = (8+3*cos(v)).*cos(u);
y = (8+3*cos(v)).*sin(u);
z = 3*sin(v);
axes('View', [-37.5, 30]); % 建立坐标轴对象
hs = surface(x, y, z); % 建立曲面对象
axis equal; 
hs.EdgeColor = 'none'; % 网格线无颜色
hs.FaceColor = 'interp'; % 设置曲面网格片的颜色



2.5 光照处理

2.5.1 创建光源对象

light函数的调用格式为：对象句柄=linght(属性1，属性值1，属性2，属性值2，...)，其中，属性指定光源的特性。

2.5.2 光源对象的属性

Color属性：设置光的颜色，值是RGB三元数组或者代表颜色的字符，默认为白色。
	
Style属性：设置光源类型，其取值为‘infinite’（默认值）或'local'，分别表示无穷远光和近光。
	
Position属性：指定光源位置，值是一个3元向量。
2.5.3 设置光照模式

利用lighting命令可以设置光照模式，lighting命令格式为：lighting 选项，其中，选项可取值为：

flat（默认值）：使得入射光均匀洒落在图形对象的每个面上。
	
gouraud：先对顶点颜色插补，再对顶点勾画的面上颜色进行插补。
	
phong：对顶点处的法线插值，再计算各个像素的反光。
	
none：关闭所有光源。
例8：绘制光照处理后的圆环面并观察不同光照模式下的效果。

close all; clear; clc; 
r = linspace(0, 2*pi, 60); 
[u, v] = meshgrid(r); 
x = (8+3*cos(v)).*cos(u); 
y = (8+3*cos(v)).*sin(u);
z = 3*sin(v);
axes('Position', [0.05, 0.675, 1.0, 0.3], 'View', [-37.5, 30]);
hs1 = surface(x, y, z);
axis equal; 
hs1.EdgeColor = 'none'; 
hs1.FaceColor = 'interp'; 
axes('Position', [0.05, 0.35, 1.0, 0.3], 'View', [-37.5, 30]);
hs2 = surface(x, y, z);
axis equal; 
hs2.EdgeColor = 'none'; 
hs2.FaceColor = 'interp'; 
light('Position', [0, 0, 8]); 
lighting flat; 
axes('Position', [0.05, 0.025, 1.0, 0.3], 'View', [-37.5, 30]);
hs3 = surface(x, y, z);
axis equal; 
hs3.EdgeColor = 'none'; 
hs3.FaceColor = 'interp'; 
light('Position', [0, 0, 8]); 
lighting phong; 



2.6 图形对象的反射特性

SpecularStrength属性：控制对象表面镜面反射的强度，属性值取0-1之间的数，默认值为0.9。
	
DiffuseStrength属性：控制对象表面漫反射的强度，属性值取0-1之间的数，默认值为0.6。
	
AmbientStrength属性：确定环境光的强度，属性值取0-1之间的数，默认值为0.3。
	
SpecularExponent属性：控制镜面反射指数，值大于等于1，大多设置在5-20之间，默认值为10。
	
BackFaceLinghting属性：控制对象内表面和外表面的差别，取值为‘unlit’，‘lit’，‘reverselit’，默认值为‘reverselit’。
三   图形用户界面设计方法 

1. 图形用户界面

图形用户界面（Graphical User Interface, GUI）：用户与计算机进行信息交流的窗口。

设计图形用户界面的方法：

调用建立用户界面控件的函数
	
使用MATLAB提供的GUIDE工具进行可视化设计
2. 控件对象及其操作

2.1 常用控件

输入和输出类控件：编辑框、静态文本、列表框、滑动条等。
	
实施确认、选择操作类控件：按钮、双位按钮、单选按钮、复选框等。
2.2 建立控件对象

uicontrol函数用于建立控件对象，其调用格式为：句柄变量=uicontrol(图形窗口句柄, 属性1, 属性值1, 属性2, 属性值2, ...)，其中，属性及其取值决定了控件的特征。若省略图形窗口句柄，默认在当前图形窗口建立控件对象。

2.3 控件对象的基本控制属性

控件对象除了具有图形对象的公共属性外，还具有一些特殊的控制属性，如：

Style属性：定义控件对象的类型。例如'pushbutton'表示按钮对象，'edit'表示编辑框，等等。
	
String属性：定义控件对象的说明文字。
	
Tag属性：标识控件对象。
	
Enable属性：控制控件对象是否可用。
	
Position属性：定义控件对象在父对象上的位置和大小，其取值形式为[x, y, w, h]。
	
Callback属性：其属性值是描述命令的字符串或函数句柄，当选中控件时，系统将自动执行字符串描述的命令或调用句柄所代表的的函数，实施相关操作。
例9：在图形窗口中建立三个按钮对象，当单击按钮时分别绘制正弦曲线、显示或隐藏坐标轴的网格、清除坐标轴的图形。

close all; clear; clc; 
ha = axes('Units', 'pixels', 'Position', [40, 40, 360, 360]); 
ptgrid = uicontrol('Style', 'pushbutton', ...
    'String', '网格', 'Position', [450, 150, 60, 30], 'Callback', 'grid'); 
btncla = uicontrol('Style', 'pushbutton', ...
    'String', '清除', 'Position', [450, 100, 60, 30], 'Callback', 'cla');
btnplot = uicontrol('Style', 'pushbutton', ...
    'String', '绘图', 'Position', [450, 200, 60, 30]);

写完上述代码之后，可以生成如下效果：



此时点击“绘图”按钮是不会绘制正弦曲线的。因为此时并未给“绘图”按钮写入回调函数。回调函数定义对象怎样处理信息并响应某事件。回调函数的定义格式为：

function 函数名(source, eventdata)
...
end

其中，参数source是发生事件的源控件对象句柄，eventdata存储事件数据。例如，将上例的“绘图”按钮要实现的功能定义为回调函数plot_sin。将回调函数保存在当前文件夹下。

function plot_sin(source, callbackdata)
t = -pi : pi/20 : pi; 
plot(t, sin(t));
end

设置“绘图”按钮的Callback属性值是plot_sin函数句柄。完整的代码如下：

close all; clear; clc; 
ha = axes('Units', 'pixels', 'Position', [40, 40, 360, 360]); 
ptgrid = uicontrol('Style', 'pushbutton', ...
    'String', '网格', 'Position', [450, 150, 60, 30], 'Callback', 'grid'); 
btncla = uicontrol('Style', 'pushbutton', ...
    'String', '清除', 'Position', [450, 100, 60, 30], 'Callback', 'cla');
btnplot = uicontrol('Style', 'pushbutton', ...
    'String', '绘图', 'Position', [450, 200, 60, 30]);
btnplot.Callback = @plot_sin;   

%%%%%%%%%%%% btnplot的回调函数 %%%%%%%%%%%%%%%
function plot_sin(source, callbackdata)
t = -pi : pi/20 : pi; 
plot(t, sin(t));
end

程序运行之后，上例中的3个按钮可以正常操作。

3. 菜单对象及其操作

3.1 建立菜单对象

用户菜单一般包括一级菜单和二级菜单，每一级菜单又包括若干菜单项。MATLAB提供了uimenu函数用于创建、设置、修改菜单。

建立一级菜单项的函数调用格式为：
一级菜单项句柄 = uimenu(图形窗口句柄，属性1，属性值1，属性2，属性值2，…)

建立子菜单项的函数调用格式为：
子菜单项句柄=uimenu(上级菜单项句柄，属性1，属性值1，属性2，属性值2，…)

3.2 菜单属性

菜单对象除了具有Children、Parent、Tag等公共属性外，还具有其他一些特殊属性：

Label属性：定义菜单项的名字。
	
Accelerator属性：定义菜单项的快捷键。
	
Checked属性：指示菜单项是否已选中。
	
Enable属性：控制菜单项的可选择性。
	
Separator属性：在菜单项上方添加一条分隔线。
例10：在例9的界面中添加“图形选项”菜单项，其中包括一个二级菜单项“线型”，其下又有3个子菜单项，分别为“实线”、“虚线”、“双划线”。

close all; clear; clc; 
ha = axes('Units', 'pixels', 'Position', [40, 40, 360, 360]); 
ptgrid = uicontrol('Style', 'pushbutton', ...
    'String', '网格', 'Position', [450, 150, 60, 30], 'Callback', 'grid'); 
btncla = uicontrol('Style', 'pushbutton', ...
    'String', '清除', 'Position', [450, 100, 60, 30], 'Callback', 'cla');
btnplot = uicontrol('Style', 'pushbutton', ...
    'String', '绘图', 'Position', [450, 200, 60, 30]);
btnplot.Callback = @plot_sin;   

%%%%%%%%%%% 例10添加的代码 %%%%%%%%%%%%%%%%%%%
hopt = uimenu(gcf, 'Label', '图形选项', 'Accelerator', 'L'); % hopt是一级菜单句柄
% gcf获取当前图形窗口的句柄，Label定义菜单项的名字为“图形选项”，Accelerator定义菜单项的快捷键为L
hLStyle = uimenu(hopt, 'Label', '线型', 'Tag', 'LStyle', 'Enable', 'off'); 
% hLStyle是子菜单项句柄，Label定义子菜单项的名字为“线型”，Tag定义标签为LStyle，Enable控制菜单项的可选择性
hL_Solid = uimenu(hLStyle, 'Label', '实线', ...
    'Tag', 'Solid', 'Callback', @MLine_Type);
hL_Dotted = uimenu(hLStyle, 'Label', '虚线', ...
    'Tag', 'Dotted', 'Callback', @MLine_Type); 
hL_Dashed = uimenu(hLStyle, 'Label', '双划线', ...
    'Tag', 'Dashed', 'Callback', @MLine_Type); 

%%%%%%%%%%% 定义函数MLine_Type %%%%%%%%%%%%%%%
function MLine_Type(source, callbackdata)
    hline = findobj('Type', 'line'); % findobj按照指定的属性来获取图形对象的句柄
    if strcmp(source.Tag, 'Solid') == 1  % strcmp函数作用：比较字符串是否相同
        hline.LineStyle = '-';
    elseif strcmp(source.Tag, 'Dotted') == 1
        hline.LineStyle = ':';
    elseif strcmp(source.Tag, 'Dashed') == 1
        hline.LineStyle = '--';
    end
end

%%%%%%%%%%%% btnplot的回调函数 %%%%%%%%%%%%%%%
function plot_sin(source, callbackdata)
    t = -pi : pi/20 : pi; 
    plot(t, sin(t));
    h1 = findobj('Tag', 'LStyle'); 
    h1.Enable = 'on'; 
end

程序运行后，图形界面的菜单栏将多出“图形选项”菜单项，这是菜单项“线型”处于不可选取的状态。单击“绘图”按钮绘制正弦曲线后，菜单项“线型”变为可选取状态，这是可以改变线型。

四    用户界面设计工具

GUIDE: Graphical User Interface Development Environment（图形用户界面开发环境）

4.1 图形用户界面设计窗口

4.1.1 打开GUIDE有两种方法：

在MATLAB命令行窗口输入guide命令。
	
在MATLAB主窗口中选择“主页”选项卡，单击工具栏的“新建”命令按钮，再选择“应用程序（APP）”下的GUIDE命令。
4.1.2 图形用户界面设计模板

设计模板有4种，如下图：



4.1.3 图形用户界面设计窗口

图形用户界面设计窗口由菜单栏、工具栏、控件选项板、界面设计区、状态栏等部分组成。如下图：



工具栏中几个按钮的作用：

属性检查器：用于检查/修改对象属性的工具。
	
菜单编辑器：添加自定义菜单，设置菜单项的属性。
	
对象浏览器：用于查看图形对象和展示界面的组织架构。
例11：建立一个图形用户界面，该界面包括1个坐标轴，3个静态文本，3个可编辑文本，2个按钮。还有1个按钮组，里面有两个单选按钮。

在图形用户界面设计窗口中设计的效果图（自己瞎设计颜色的）如下：



可在属性编辑器中修改控件对象的属性，修改之后，如下图：



保存之后，会生成.fig文件，同时系统会自动生成一个同名的.m文件。该.m文件保存了图形窗口的初始化函数，以及各控件对象的回调函数。

回调属性与回调函数：

1. 回调属性

Callback属性：按钮类控件和菜单项的单击事件的默认回调属性。
	
CreateFcn属性：定义创建图形对象的响应。
	
DeleteFcn属性：定义取消图形对象的响应。
	
ButtonDownFcn属性：定义单击鼠标键按下的响应。
	
KeyPressFcn属性：定义键盘键按下的响应。
	
SelectionChangeFcn属性：定义改变选项的响应。
2. 回调函数框架

function 对象标识_Callback(hObject, eventdata, handles)


其中，hObject为发生事件的源控件，eventdata为事件数据，handles保存图形界面中所有对象的句柄。

例12：在例11的菜单栏添加1个一级菜单项“绘图选项”，而且这个菜单只有在画有曲线时才是可用的。其下有6项，前3项定义线型，后3项定义曲线颜色。

function varargout = test(varargin)
% TEST MATLAB code for test.fig
%      TEST, by itself, creates a new TEST or raises the existing
%      singleton*.
%
%      H = TEST returns the handle to a new TEST or the handle to
%      the existing singleton*.
%
%      TEST('CALLBACK',hObject,eventData,handles,...) calls the local
%      function named CALLBACK in TEST.M with the given input arguments.
%
%      TEST('Property','Value',...) creates a new TEST or raises the
%      existing singleton*.  Starting from the left, property value pairs are
%      applied to the GUI before test_OpeningFcn gets called.  An
%      unrecognized property name or invalid value makes property application
%      stop.  All inputs are passed to test_OpeningFcn via varargin.
%
%      *See GUI Options on GUIDE's Tools menu.  Choose "GUI allows only one
%      instance to run (singleton)".
%
% See also: GUIDE, GUIDATA, GUIHANDLES

% Edit the above text to modify the response to help test

% Last Modified by GUIDE v2.5 27-Jul-2018 10:34:37

% Begin initialization code - DO NOT EDIT
gui_Singleton = 1;
gui_State = struct('gui_Name',       mfilename, ...
                   'gui_Singleton',  gui_Singleton, ...
                   'gui_OpeningFcn', @test_OpeningFcn, ...
                   'gui_OutputFcn',  @test_OutputFcn, ...
                   'gui_LayoutFcn',  [] , ...
                   'gui_Callback',   []);
if nargin && ischar(varargin{1})
    gui_State.gui_Callback = str2func(varargin{1});
end

if nargout
    [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
    gui_mainfcn(gui_State, varargin{:});
end
% End initialization code - DO NOT EDIT


% --- Executes just before test is made visible.
function test_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
% varargin   command line arguments to test (see VARARGIN)

% Choose default command line output for test
handles.output = hObject;

% Update handles structure
guidata(hObject, handles);

% UIWAIT makes test wait for user response (see UIRESUME)
% uiwait(handles.figure1);


% --- Outputs from this function are returned to the command line.
function varargout = test_OutputFcn(hObject, eventdata, handles) 
% varargout  cell array for returning output args (see VARARGOUT);
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Get default command line output from handles structure
varargout{1} = handles.output;


function editfz_Callback(hObject, eventdata, handles)
% hObject    handle to editfz (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'String') returns contents of editfz as text
%        str2double(get(hObject,'String')) returns contents of editfz as a double


% --- Executes during object creation, after setting all properties.
function editfz_CreateFcn(hObject, eventdata, handles)
% hObject    handle to editfz (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: edit controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


function editpl_Callback(hObject, eventdata, handles)
% hObject    handle to editpl (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'String') returns contents of editpl as text
%        str2double(get(hObject,'String')) returns contents of editpl as a double


% --- Executes during object creation, after setting all properties.
function editpl_CreateFcn(hObject, eventdata, handles)
% hObject    handle to editpl (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: edit controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


function editxj_Callback(hObject, eventdata, handles)
% hObject    handle to editxj (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'String') returns contents of editxj as text
%        str2double(get(hObject,'String')) returns contents of editxj as a double


% --- Executes during object creation, after setting all properties.
function editxj_CreateFcn(hObject, eventdata, handles)
% hObject    handle to editxj (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: edit controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
A = str2double(handles.editfz.String); % 幅值
f = str2double(handles.editpl.String)/50; % 频率
theta = str2double(handles.editxj.String)/180*pi; % 相角
x = linspace(0, 2*pi, 60); 
if handles.OpSin.Value == 1
   y = A*sin(f*x+theta);
else
   y = A*cos(f*x+theta);
end
plot(x, y); 
handles.PStyle.Enable = 'on';


% --- Executes on button press in pushbutton2.
function pushbutton2_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton2 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
cla; 
handles.PStyle.Enable = 'off'; 


% --------------------------------------------------------------------
function PStyle_Callback(hObject, eventdata, handles)
% hObject    handle to PStyle (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)


% --------------------------------------------------------------------
function Solid_Callback(hObject, eventdata, handles)
% hObject    handle to Solid (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
hline = findobj('Type', 'line'); 
hline.LineStyle = '-'; 
handles.Solid.Checked = 'on';
handles.Dotted.Checked = 'off'; 
handles.Dashed.Checked = 'off'; 


% --------------------------------------------------------------------
function Dotted_Callback(hObject, eventdata, handles)
% hObject    handle to Dotted (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
hline = findobj('Type', 'line'); 
hline.LineStyle = ':'; 
handles.Solid.Checked = 'off';
handles.Dotted.Checked = 'on'; 
handles.Dashed.Checked = 'off'; 


% --------------------------------------------------------------------
function Dashed_Callback(hObject, eventdata, handles)
% hObject    handle to Dashed (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
hline = findobj('Type', 'line'); 
hline.LineStyle = '--'; 
handles.Solid.Checked = 'off';
handles.Dotted.Checked = 'off'; 
handles.Dashed.Checked = 'on'; 


% --------------------------------------------------------------------
function r_Callback(hObject, eventdata, handles)
% hObject    handle to r (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
hline = findobj('Type', 'line'); 
hline.Color = 'r'; 
handles.r.Checked = 'on'; 
handles.g.Checked = 'off'; 
handles.b.Checked = 'off'; 


% --------------------------------------------------------------------
function g_Callback(hObject, eventdata, handles)
% hObject    handle to g (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
hline = findobj('Type', 'line'); 
hline.Color = 'g'; 
handles.r.Checked = 'off'; 
handles.g.Checked = 'on'; 
handles.b.Checked = 'off'; 


% --------------------------------------------------------------------
function b_Callback(hObject, eventdata, handles)
% hObject    handle to b (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
hline = findobj('Type', 'line'); 
hline.Color = 'b'; 
handles.r.Checked = 'off'; 
handles.g.Checked = 'off'; 
handles.b.Checked = 'on'; 




五    APP设计工具

这里的APP是指具有图形用户界面的MATLAB程序。APP Designer是一个可视化的集成开发环境，提供了仪表、旋钮等组件，采用面向对象的设计方法。利用APP Designer可以快速开发出应用程序。

5.1 打开APP Designer

在MATLAB命令行窗口输入appdesigner命令。
	
在MATLAB主窗口中选择“主页”选项卡，单击工具栏“新建”命令按钮，再选择“应用程序”下的“APP Designer”命令。
5.2 APP Designer窗口

APP Designer窗口由3个部分组成，分别是：快速访问工具栏、功能区、APP编辑器。



5.3 APP编辑器

设计视图：用于编辑用户界面。
	
代码视图：用于编辑、调试、分析代码。
例13：建立一个APP用户界面，该界面包括1个坐标轴，2个旋钮，2个按钮和1个按钮组。

步骤1：打开APP设计器窗口，添加组件

步骤2：利用属性面板设置组件对象的属性



步骤3：定义回调函数。在定义回调函数之前，需要补充以下内容：

APP程序采用面向对象设计模式，声明对象、定义函数、设置属性和共享数据都封装在一个类中，一个MATLAB文件就是一个类的定义。

(1) 类的基本结构

properties段：属性的定义，主要包含属性声明代码。
	
methods段：方法的定义，由若干函数组成。回调函数只有一个参数app，为界面句柄，存储了界面中各个成员的数据。
classdef 类名 < matlab.apps.AppBase
    properties (Access = public)
        ...
    end

    methods (Access = private)
        function 函数1(app)
            ...
        end
        function 函数2(app)
            ...
        end    
    end 
end

(2) 访问权限

存取数据和调用函数称为访问对象成员。

public：可用于与App的其他类共享数据。
	
private：只允许在本类中访问。以下属性和函数的默认访问权限为private：属性的声明、界面的启动函数startupFcn、建立界面组件的函数createComponents、回调函数。
步骤4：将APP程序打包，打包安装之后可以在MATLAB主窗口中APP主页下直接使用该APP程序。

单击App Designer窗口的“设计器”选项卡工具栏中的“App打包”按钮，弹出“应用程序打包”对话框。

回到例13中：实现界面的绘图功能。单击“绘图”按钮，以“倍频”旋钮的值和“相角”旋钮的值为三角函数的参数绘制曲线。单击“清空”按钮，清除坐标轴中的图形。

classdef AppDomo < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure     matlab.ui.Figure
        UIAxes       matlab.ui.control.UIAxes
        Label        matlab.ui.control.Label
        Knob         matlab.ui.control.Knob
        ButtonGroup  matlab.ui.container.ButtonGroup
        sinxButton   matlab.ui.control.ToggleButton
        cosxButton   matlab.ui.control.ToggleButton
        Button_2     matlab.ui.control.Button
        Button_3     matlab.ui.control.Button
        Knob_2Label  matlab.ui.control.Label
        Knob_2       matlab.ui.control.DiscreteKnob
    end

    methods (Access = private)

        % Button pushed function: Button_2
        function Button_2Pushed(app, event)
            f = str2double(app.Knob_2.Value); 
            theta = app.Knob.Value/180*pi; 
            x = linspace(0, 2*pi, 60); 
            if app.sinxButton.Value == 1
               y = sin(f*x + theta);
            else
               y = cos(f*x + theta);  
            end
            % plot函数的第1个参数必须是坐标轴对象句柄
            % plot函数默认的线宽是1，APP程序的线宽必须小于0.4
            plot(app.UIAxes, x, y, 'LineWidth', 0.2); 
        end

        % Button pushed function: Button_3
        function Button_3Pushed(app, event)
            cla(app.UIAxes); 
        end
    end

    % App initialization and construction
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure
            app.UIFigure = uifigure;
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'UI Figure';

            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, '显示区')
            xlabel(app.UIAxes, 'X')
            ylabel(app.UIAxes, 'Y')
            app.UIAxes.Box = 'on';
            app.UIAxes.Position = [61 239 300 185];

            % Create Label
            app.Label = uilabel(app.UIFigure);
            app.Label.HorizontalAlignment = 'center';
            app.Label.Position = [454 265 29 15];
            app.Label.Text = '相角';

            % Create Knob
            app.Knob = uiknob(app.UIFigure, 'continuous');
            app.Knob.Limits = [0 360];
            app.Knob.Position = [438 314 60 60];

            % Create ButtonGroup
            app.ButtonGroup = uibuttongroup(app.UIFigure);
            app.ButtonGroup.Title = '图形函数';
            app.ButtonGroup.Position = [106 108 123 83];

            % Create sinxButton
            app.sinxButton = uitogglebutton(app.ButtonGroup);
            app.sinxButton.Text = 'sin(x)';
            app.sinxButton.Position = [11 30 100 22];
            app.sinxButton.Value = true;

            % Create cosxButton
            app.cosxButton = uitogglebutton(app.ButtonGroup);
            app.cosxButton.Text = 'cos(x)';
            app.cosxButton.Position = [11 9 100 22];

            % Create Button_2
            app.Button_2 = uibutton(app.UIFigure, 'push');
            app.Button_2.ButtonPushedFcn = createCallbackFcn(app, @Button_2Pushed, true);
            app.Button_2.Position = [271 169 100 22];
            app.Button_2.Text = '绘图';

            % Create Button_3
            app.Button_3 = uibutton(app.UIFigure, 'push');
            app.Button_3.ButtonPushedFcn = createCallbackFcn(app, @Button_3Pushed, true);
            app.Button_3.Position = [271 117 100 22];
            app.Button_3.Text = '清空';

            % Create Knob_2Label
            app.Knob_2Label = uilabel(app.UIFigure);
            app.Knob_2Label.HorizontalAlignment = 'center';
            app.Knob_2Label.Position = [456 117 29 15];
            app.Knob_2Label.Text = '倍频';

            % Create Knob_2
            app.Knob_2 = uiknob(app.UIFigure, 'discrete');
            app.Knob_2.Items = {'0', '1', '2', '3'};
            app.Knob_2.Position = [439 147 60 60];
            app.Knob_2.Value = '0';
        end
    end

    methods (Access = public)

        % Construct app
        function app = AppDomo

            % Create and configure components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end



六    图形用户界面应用举例

本节介绍一个GUIDE设计实例。

例14：利用GUIDE设计工具设计如图所示的用户界面。该界面可以显示表面图、网格图、等高线图。绘制图形的功能通过3个命令按钮来实现，绘制图形所需要的数据通过一个列表来选取。方位角和仰角在视点面板中设置，图形使用的色图通过下拉列表进行选择，着色方式通过单选按钮组进行选择。切换按钮用于隐藏或显示坐标轴网格。



步骤1：打开图形用户界面设计窗口，添加有关图形对象，并保存图形用户界面。



步骤2：利用属性检查器设置界面对象的属性。

String属性：用于指定控件上的文本以及列表框和弹出式菜单的选项。弹出式菜单的选项间使用Enter作为分隔符。
	
Tag属性：定义控件标识。
	
Value属性：设置控件的值。
本例中按下图方式设置界面对象的属性：（图中静态文本1和静态文本2的String属性分别输入仰角和方位角）



设置好之后如下图所示：



步骤3：利用对齐对象工具，调整控件对象的相对位置。

步骤4：编写代码，实现控件功能。

(1) .m文件中回调函数的框架

控件Tag_Call类型(hObject, eventdata, handles)

其中，hObject是发生事件的源控件，eventdata是事件数据，handles是对象句柄集。

(2) 跟图形窗口有关的3个函数：

_OpeningFcn函数：可以在这个函数内完成数据初始化设置、GUI界面的控制和调整等工作。
	
_OutputFcn函数：用于控制输出运行结果。
	
_Callback函数：用于控制窗口的默认事件，即单击窗口空白区域的触发行为。
(3) 为图形窗口的打开事件编写响应代码。代码写在_OpeningFcn函数中。

(4) 为3个绘图按钮编写响应代码。

(5) 为切换按钮编写响应代码。

(6) 为列表框编写响应代码。

(7) 为色图弹出式菜单编写响应代码。

(8) 为视点设置按钮编写响应代码。

(9) 为着色方式按钮组ChooseShading的SelectionChanged事件编写响应代码。

(10) 运行图形用户界面。

完整效果如下，各功能可用：



代码如下：

function varargout = GUIDemo(varargin)
% GUIDEMO MATLAB code for GUIDemo.fig
%      GUIDEMO, by itself, creates a new GUIDEMO or raises the existing
%      singleton*.
%
%      H = GUIDEMO returns the handle to a new GUIDEMO or the handle to
%      the existing singleton*.
%
%      GUIDEMO('CALLBACK',hObject,eventData,handles,...) calls the local
%      function named CALLBACK in GUIDEMO.M with the given input arguments.
%
%      GUIDEMO('Property','Value',...) creates a new GUIDEMO or raises the
%      existing singleton*.  Starting from the left, property value pairs are
%      applied to the GUI before GUIDemo_OpeningFcn gets called.  An
%      unrecognized property name or invalid value makes property application
%      stop.  All inputs are passed to GUIDemo_OpeningFcn via varargin.
%
%      *See GUI Options on GUIDE's Tools menu.  Choose "GUI allows only one
%      instance to run (singleton)".
%
% See also: GUIDE, GUIDATA, GUIHANDLES

% Edit the above text to modify the response to help GUIDemo

% Last Modified by GUIDE v2.5 06-Aug-2018 10:15:31

% Begin initialization code - DO NOT EDIT
gui_Singleton = 1;
gui_State = struct('gui_Name',       mfilename, ...
                   'gui_Singleton',  gui_Singleton, ...
                   'gui_OpeningFcn', @GUIDemo_OpeningFcn, ...
                   'gui_OutputFcn',  @GUIDemo_OutputFcn, ...
                   'gui_LayoutFcn',  [] , ...
                   'gui_Callback',   []);
if nargin && ischar(varargin{1})
    gui_State.gui_Callback = str2func(varargin{1});
end

if nargout
    [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
    gui_mainfcn(gui_State, varargin{:});
end
% End initialization code - DO NOT EDIT


% --- Executes just before GUIDemo is made visible.
function GUIDemo_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
% varargin   command line arguments to GUIDemo (see VARARGIN)
handles.peaks = peaks(34); 
handles.membrane = membrane; 
[x, y] = meshgrid(-8:0.3:8); 
r = sqrt(x.^2+y.^2); 
sinc = sin(r)./(r+eps);
handles.sinc = sinc; 
handles.current_data = handles.sinc; 
colormap(spring); 
grid on; 

% Choose default command line output for GUIDemo
handles.output = hObject;

% Update handles structure
guidata(hObject, handles);

% UIWAIT makes GUIDemo wait for user response (see UIRESUME)
% uiwait(handles.figure1);


% --- Outputs from this function are returned to the command line.
function varargout = GUIDemo_OutputFcn(hObject, eventdata, handles) 
% varargout  cell array for returning output args (see VARARGOUT);
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Get default command line output from handles structure
varargout{1} = handles.output;


% --- Executes on button press in Mesh.
function Mesh_Callback(hObject, eventdata, handles)
% hObject    handle to Mesh (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
mesh(handles.current_data); 
handles.GridSwitch.String = '隐藏网格';
handles.GridSwitch.Value = 1;


% --- Executes on button press in Surf.
function Surf_Callback(hObject, eventdata, handles)
% hObject    handle to Surf (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
surf(handles.current_data); 
handles.GridSwitch.String = '隐藏网格';
handles.GridSwitch.Value = 1;


% --- Executes on button press in Contour3.
function Contour3_Callback(hObject, eventdata, handles)
% hObject    handle to Contour3 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
contour3(handles.current_data);
handles.GridSwitch.String = '隐藏网格';
handles.GridSwitch.Value = 1;


% --- Executes on selection change in ChooseFun.
function ChooseFun_Callback(hObject, eventdata, handles)
% hObject    handle to ChooseFun (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
str = hObject.String;
val = hObject.Value; 
switch strtrim(str{val}) % strtrim函数用于去除字符串的首尾空格
    case 'Peaks' 
        handles.current_data = handles.peaks; 
    case 'Membrane'
        handles.current_data = handles.membrane;
    case 'Sinc'
        handles.current_data = handles.sinc;
end
guidata(hObject, handles); % guidata函数用于保存和更新数据

% Hints: contents = cellstr(get(hObject,'String')) returns ChooseFun contents as cell array
%        contents{get(hObject,'Value')} returns selected item from ChooseFun


% --- Executes during object creation, after setting all properties.
function ChooseFun_CreateFcn(hObject, eventdata, handles)
% hObject    handle to ChooseFun (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: listbox controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


% --- Executes on selection change in ChooseCMap.
function ChooseCMap_Callback(hObject, eventdata, handles)
% hObject    handle to ChooseCMap (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
str = hObject.String; 
cm = hObject.Value; 
colormap(eval(str{cm})); 

% Hints: contents = cellstr(get(hObject,'String')) returns ChooseCMap contents as cell array
%        contents{get(hObject,'Value')} returns selected item from ChooseCMap


% --- Executes during object creation, after setting all properties.
function ChooseCMap_CreateFcn(hObject, eventdata, handles)
% hObject    handle to ChooseCMap (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: popupmenu controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


% --- Executes on button press in GridSwitch.
function GridSwitch_Callback(hObject, eventdata, handles)
% hObject    handle to GridSwitch (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
if hObject.Value == 1
   grid on; 
   hObject.String = '隐藏网格';
else
   grid off; 
   hObject.String = '显示网格';
end

% Hint: get(hObject,'Value') returns toggle state of GridSwitch

function edit_el_Callback(hObject, eventdata, handles)
% hObject    handle to edit_el (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'String') returns contents of edit_el as text
%        str2double(get(hObject,'String')) returns contents of edit_el as a double


% --- Executes during object creation, after setting all properties.
function edit_el_CreateFcn(hObject, eventdata, handles)
% hObject    handle to edit_el (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: edit controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


function edit_az_Callback(hObject, eventdata, handles)
% hObject    handle to edit_az (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'String') returns contents of edit_az as text
%        str2double(get(hObject,'String')) returns contents of edit_az as a double


% --- Executes during object creation, after setting all properties.
function edit_az_CreateFcn(hObject, eventdata, handles)
% hObject    handle to edit_az (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: edit controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


% --- Executes on button press in ConfigView.
function ConfigView_Callback(hObject, eventdata, handles)
% hObject    handle to ConfigView (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
el = str2double(handles.edit_el.String);
az = str2double(handles.edit_az.String);
view(az, el); 

% Hint: get(hObject,'Value') returns toggle state of ConfigView


% --- Executes on button press in clear.
function clear_Callback(hObject, eventdata, handles)
% hObject    handle to clear (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

axes(handles.axes1); 
cla reset; 
grid on; 
handles.GridSwitch.String = '隐藏网格';
handles.GridSwitch.Value = 1;
 
% --- Executes when selected object is changed in ChooseShading.
function ChooseShading_SelectionChangedFcn(hObject, eventdata, handles)
% hObject    handle to the selected object in ChooseShading 
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

switch eventdata.NewValue.Tag   % 按钮组中的控件标签
    case 'flat'
        shading flat; 
    case 'interp'
        shading interp;
    case 'faceted'
        shading faceted;
end


 

 

在前几篇文章中，我们分享了一些最受欢迎的原型设计工具，今天我们来谈谈界面设计工具。工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名出色的UI设计师，你需要多掌握一些技能，才能增强自身竞争力。同时也给那些想转行做UI设计师的朋友一些工具建议，接下来我们就来盘点一下那些UI设计师需要掌握的界面设计工具。

1. Sketch-强大的矢量绘图工具

支持平台：只支持Mac



Sketch是一款强大的界面设计工具，专为UI设计师打造的软件，可让你的界面设计变得更简单，更高效。如果你是一个UX或者UI设计师，那么你一定知道Sketch这个强大的UI界面设计软件。如果你想转行做UI设计师，那么你一定不能错过这个好用的设计工具。

在Sketch中用户能轻松地设置图层面板，可批量命名图层、智能标注页面、填充头像和文字等，可实现多层式填充、渐变、噪点等操作功能；Sketch提供“全部导出”功能，因为它是基于矢量的，所以可导出PDF，JPG和PNG（可选择2x）等格式。不得不提的就是Sketch为设计师提供了丰富的插件，越来越能满足不同人群的设计需求，所有你需要的工具都触手可及。

特色：

出色的用户体验

非常简单易用

提供大量实用的插件

Sketch插件集合可戳：sketch.im

2. Photoshop-强大的图片处理软件

支持平台：Windows＆Mac



Photoshop是最流行的图像编辑器之一，UI设计师入门的必备界面设计工具。相信不是设计行业的小伙伴，也略知一二。PS作为UI界面设计神器，有着强大的图片编辑和处理功能，想要什么的图形都可以用PS来实现，可用于摄影的后期制作，可给图像添加各种滤镜，调整亮度，对比度等，生成高分辨的图形。借助图层面板可非常简单和高效的处理修复图片；并且PS提供了不同文件格式保存的选项，调整图像大小和分辨率也不会丢失图像质量。

PS：如果要制作图标，需要用到矢量绘图软件AI来制作，这样放大才不会失真。

特色：

照片处理技术（剪裁背景，裁剪，调整光线，调整颜色，过滤，消除红眼等功能）

强大的图层功能 处理副本时保存原件

批量处理照片

兼容其他Abode套件程序，如After Effect，InDesign，Illustrator

Photoshop可以将图像保存为各种格式



3. Mockplus-强大的原型界面设计工具

支持平台：Windows＆Mac



Mockplus是一款高效简单的app界面设计工具，产品经理圈子中比较流行的一款国产界面原型设计工具。软件提供了封装好的3000多个图标以及200多个组件，拖拽即可进行UI界面设计，学习成本低，无需代码参与，所以对于UI设计师来说是一个非常好的选择。如果一个UI设计师连基本的原型设计能力都没有，怎么和开发进行有效的沟通呢。

值得一提的是Mockplus最近发布的一款摹客设计系统（https://ds.mockplus.cn/）可谓是给UI设计师提供的一大福利了，该系统提供标准色、标准字、图标、布局等等这类大纲，几乎囊括了一份设计规范文档该有的所有内容，并且支持Sketch插件，意思是设计师们可在Sketch中一键复用你自己的设计规范，节省了大量的操作时间。

特色：

简单，零门槛

丰富的图标及组件

拖拽实现交互效果

小程序预览，随时随地跟客户演示



4. Zeplin-强大的协作工具

支持平台：只支持Mac



专为UI设计师与开发工程师量身打造的协作型界面设计工具。作为一名UI设计师，你需要把你的设计传达给开发团队，而Zeplin的设计是为了实现这一目标。Zeplin操作很简单，设计师直接从Sketch上传制作的UI界面设计，应用会自动生成一些注释，在面板右侧会直观的看到每个元素的大小，颜色，边距甚至是某些元素的代码信息。

另外，UI设计师还可以直接在UI界面上给开发人员添加注释，标记，备注等。填补了开发与设计之间的沟通障碍，为设计师和开发人员节省了大量宝贵的时间。

特色：

良好的用户体验

轻松查看界面的间距，尺寸，颜色等

创建样式，帮助设计团队保持一致。

通过插件快速同步Sketch中的项目

支持PS，Sketch，Adobe等工具



5. AE-强大的动效视觉处理软件

支持平台：Windows＆Mac



Adobe After Effects简称“AE”是Adobe公司推出的一款关于图形和视频处理的界面设计工具，如今动效设计在UI界面设计中的应用已经越来越广泛，而且国内许多公司开始重视动效设计了，所以作为UI设计师，也应该掌握一些动效设计。动效在UI设计中的应用其实比我们想象中的还要强大，好的动效设计可以给用户提供一个良好的视觉感受，从而加强与用户之间的交互体验。

AE这款界面设计工具可以帮助UI设计师对图像视频进行任何特效处理，是一个灵活的基于层的2D和3D后期合成软件，包含了上百种特效及预置动画效果，可与Premiere，Photoshop，Illustrator等软件无缝结合，创建无与伦比的视觉效果。它还借鉴了许多优秀的软件的成功之处，将图像视频特效合成技术推到一个新的高度。

特色：

震撼的视觉效果

与Premiere，Photoshop，Illustrator无缝兼容



加分工具-Dreamweaver

支持平台：Windows＆Mac



Dreamweaver是一款网页代码编辑器，帮助设计师和程序员快速制作和进行网站建设。为什么要把它单独列出来，是因为我觉得UI设计师不仅仅需要掌握一些界面设计工具，还需要学习和了解一些前端的布局和设计，才能够更好的配合前端工程师们做好产品开发的工作。UI设计师如果了解一些基础的代码知识，可作为一个加分项在面试中脱颖而出。

【界面设计工具推荐】综上，如果你想要选择：

最好的图片编辑和数码绘画工具：Photoshop

最好的图标设计和图形界面设计工具：AI

最好用的矢量绘图界面设计工具：Sketch

最好用的UI界面设计规范管理平台：摹客设计系统

最简单高效的界面原型设计工具：摹客原型

归根结底，技多不压身，想要成为一名优秀的UI设计师，掌握界面设计工具只是其中一部分，UI界面设计需要设计师们掌握色彩搭配，设计规范，界面排版，沟通能力，切图标注，尺寸标注，用户体验等相关知识。因此需要的就是不断学习，不断坚持，不断的丰富自己的综合能力。