第8章 界面设计
第8章 常用EDA软件介绍
第八章 常用EDA软件介绍
5) 查看元件属性 ViewDraw中所有的元件除了有一个惟一的标识符以
外， 还拥有属性（Properties）。 设计元件会拥有名称
（Name）和特性（Attribute）， 某些部件可能还包括管 脚（Pin）， 这些管脚可能又拥有它们自己的名称和属性。
(1) 选中一个元件， 点击鼠标右键， 弹出一个菜单。
第八章 常用EDA软件介绍
图 8 – 16 8位串并转换器原理图
第八章 常用EDA软件介绍
3) 确认设计中的元件
所有ViewDraw的原理图都由不同的设计元件组成， 如元件、 连线、 总线等。 把鼠标的指针放在一个基本 元件上， 点击鼠标左键， 就可以很快地确认这个元件。 点亮这个基本元件， 在原理图窗口的左下角就会显示 出这个元件的名称。
图8 - 15所示。
第八章 常用EDA软件介绍
图 8 - 13 ViewDraw的绘图界面
第八章 常用EDA软件介绍
图 8 - 14 New对话框
第八章 常用EDA软件介绍
图 8 - 15 一个新的设计文件
第八章 常用EDA软件介绍
2) 关于8位串并转换器 8位串并转换器电路的逻辑功能是实现串行输入并
第八章 常用EDA软件介绍
创建工程 ↓
←→Dashboard ←→ ViewDraw ←→ Schemetic Check
绘制电路图
↓ 验证电路图 ↓ 仿真
←→ Fusion
↓
网表文件传给PCB生产方 ←→ Creat PCB Netlist
第八章 常用EDA软件介绍
1. 建立工程（Project Setup） 1) 关于工程
在使用eProduct Designer进行设计时， 首先必须创
第8章 常用控件(2)
② MouseUp
鼠标的任一键被释放时触发该事件。
语法格式：
Private Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
③ MouseMove：
鼠标被移动时触发该事件
语法格式：
Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
说明：
Button:指示用户按下或释放了哪个鼠标按钮
Shift:
指示“Shift”、“Ctrl”、“Alt”键的状态
信息
X、Y：指当前鼠标的位置
例:编写程序：单击左键、右键、Shift+左键、 Ctrl+左键分别显示不同的图片。 程序代码如下：
Private Sub Image1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single) If Shift = 1 Then Image1.Picture = LoadPicture(App.Path + "\12.jpg") ElseIf Shift = 2 Then Image1.Picture = LoadPicture(App.Path + "\13.jpg") ElseIf Button = 1 Then Image1.Picture = LoadPicture(App.Path + "\14.jpg") ElseIf Button = 2 Then Image1.Picture = LoadPicture(App.Path + "\15.jpg") End If End Sub
第8章 人机界面简述
（5）人机界面显示柑认局的美观性，增强软件系统对人 的吸引力。 （6）系统对用户的操作提供立即可视的反馈信息。反馈 信息可以以文本方式提供，也可以以图形、乃至声音信 息等方式提供。 （7）对用户出错的宽容性。应该允许用户发生错误，不 致于毁坏系统。系统能检测、报告错误，提出改正错误 的办法。系统具备恢复功能，可使系统恢复到出错前的 状态。 （8）认识与适应人类的能力及弱点，使系统设计充分考 虑和满足人的认知、行为因素，充分发挥人、机两方的 特长。
20世纪最伟大的十一种
人 机 界 面 装 置
1、扩音器
扩音器是1915年发明的。
● 扩音器的问世使得人们不仅在乘坐地铁或去 郊外远足时能够欣赏自己喜爱的音乐和广播节 目，而且还能聆听以电子手段保存下来的早已 与世长辞的人的声音以及大自然中根本不存在 的种种奇妙声音。
● 在电影院里，扩音器所营造的声的世界将观 众们带入一个想象的世界。
应有及时的出错处理和帮助功能（Help）
系统设计应该能够对可能出现的错误进行检测和处理， 出错信息应清楚、易理解。其内容应包含出错位置、 出错原因及修改出错建议等方面的内容。而且，良好 的系统设计应能预防错误的发生。例如应该具备保护 功能，防止因用户的误操作而破坏系统的运行状态和 信息存储。此外系统应提供帮助功能，帮助用户学习 使用系统。帮助信息应该在用户发生困难时随时提供， 帮助信息可以是综述性的内容介绍，也可以是与系统 当前状态上下文相关的针对性信息。
3、方向盘
● 最初的汽车是用舵来控制驾驶的，但是它会把汽 车行驶中产生的剧烈振动传导给驾驶者，增加其控 制方向的难度。 ● 方向盘这种新设计便应运而生，这一齿轮系统操 作灵活，很好地隔绝了道路的剧烈振动。 ● 方向盘却成了造成驾驶员丧命的罪魁祸首
8.界面设计概述[17页]
![8.界面设计概述[17页]](https://img.taocdn.com/s3/m/27a0addb2af90242a995e5a0.png)
13
4．侧滑式 如果界面内容较多，可以先将部 分内容隐藏于界面边缘，需要时 再展开，这样就可以选用侧滑式 布局，使交互体验更加自然。
Part 1 布局方式
14
5．混合式 如果界面中分类较多，不好管理， 可以选用混合式布局，通过形状 对功能进行分组，形式活泼。
Part 1 颜色设计方法
15
1．统一的色相 在一个界面当中，只采用一种色 相，根据信息层级的需要调整不 同的亮度、饱和度。 此外，一般只搭配黑色、白色和 灰色。
132px
132px
147px
iPhone 6/7/8
750px ×1334px
40px
88px
98px
iPhone 5/5C/5S 640px ×1136px
40px
88px
98px
iPhone 4/4S
640px ×960px
40px
88px
98px
iOS设计规范
状态栏 36px
高度 标题栏 64px
Part 1 颜色设计方法
16
2．统一的亮度、饱和度 在同一界面中，色相可以使用多 个，但是颜色的亮度、饱和度相 同，这样可以使界面效果和谐、 统一。
Part 1 颜色设计方法
17
3．从图片中吸取颜色 从认为好看的图片中吸取颜色来 构建自己的色盘，筛选确定配色 方案。
UI设计基础与实战项目教程
第三单元 移动端UI设计
任务四 界面设计概述
Part 1 什么是界面
2
界面是用户与系统、应用进行交互的窗口。 用户通过界面对移动端系统发送指令，系统通过界面展示响应效果，
Part通常分为典型界面和特殊界面。 典型界面一般包括主界面、详情界面和弹窗界面等。 特殊界面一般包括启动页、登录注册界面等
[工学]SWT图形界面开发第8章
![[工学]SWT图形界面开发第8章](https://img.taocdn.com/s3/m/7c8548c55ef7ba0d4a733b45.png)
7
}
}
final Combo c = new Combo(s, SWT.READ_ONLY); c.setBounds(50, 50, 150, 65); String items[] = {"Item One", "Item Two", "Item Three", "Item Four", "Item Five"}; c.setItems(items); s.open(); while(!s.isDisposed()){ if(!d.readAndDispatch()) d.sleep(); } d.dispose();
String item = c.getText( );
12
这会返回所选项目的String值。如果你需要索引值，可 以用下面的方式：
int i = c.getSelectionIndex( );
getSelectionIndex()会返回所选项目的索引值（零基 准），若没有项目被选取时则返回-1。
SWT 图形用户界面设计
1
第八章 SWT Combo
四种基本SWT widget的class中的最后一种是Combo。 Combo是用来让用户从一组项目选择或是输入不在项目中的 文字来收集信息。它结合了List与Text这两个class的功能， 因此叫做combo。 因为Combo是两种class的结合，所以必须要分别以两种 class的观点来考虑。这一章会先从List的观点来查看 Combo，然后再以Text的观点继续下去。
c.select(0);
因为Combo是由text部分加上list部分所组成，你也可 以通过设定text字段的文字来使某个项目被选取。这对 以SWT.READ_ONLY样式创建出的Combo建出的则不会起作用：
第8章 常用控件(1)
单选钮（OptionButton）通常成组出现， 主要用于处理“多选一”的问题。
用户在一组单选钮中必须选择一项，并且 最多只能选择一项。 当某一项被选定后，其左边的圆圈中出现 一个黑点。
结束
单选按钮常用属性： （1）Value属性 该属性表示单选按钮选中或不被选中的状态。 True：为选中；False：为不被选中。 （2）Caption属性 该属性显示出现在单选钮旁边的文本 （3）Style属性 该属性用来设置控件的外观。值为0时，控件显 示标准样式；值为1时，控件外观类似命令按钮。 （4）Alignment属性： 设置单选按钮标题的对齐方式。0：左对齐，圆 形按钮位于控件的左边，文字显示在右边；1： 右对齐，圆形按钮位于控件的右边，文字显示在 左边。 结束
结束
（2）RemoveItem方法 用于删除列表框中的列表项，其语法是： Listname.RemoveItem index 其中，Listname表示列表框控件的名称， index参数是要删除的列表项的索引号。需 要注意的是，与AddItem方法不同，index参 数是必须提供的。 例如： List1.RemoveItem 0 删除List1列表框中的第一个列表项
该属性是一个逻辑数组，其元素对应列表框
中相应的项。表示相应的项在程序运行期间
是否被选中。
例如：
Selected(0)的值为True，表示第一项
被选中，若为False，则表示未被选中。
结束
（6）MultiSelect（多选择列表项）属性 该属性值表明是否能够在列表框控件中进行复 选以及如何进行复选。 它决定用户是否可以在控件中做多重选择，它 必须在设计时设置，运行时只能读取该属性。 （7）SelCount属性 其值表示在列表框控件中所选列表项的数目， 只有在MultiSelect属性值设置为1(Simple)或 2（Extended)时起作用， 通常与Selected数组一起使用，用于处理控件 中的所选项目。
软件界面设计规范操作手册
软件界面设计规范操作手册第1章设计原则与规范概述 (3)1.1 设计理念与目标 (3)1.2 设计原则 (4)1.3 设计规范 (4)第2章色彩与字体 (5)2.1 色彩运用 (5)2.1.1 色彩选择原则 (5)2.1.2 色彩使用规范 (5)2.2 字体选择 (5)2.2.1 字体类型 (5)2.2.2 字体大小 (6)2.3 字体排版 (6)2.3.1 字间距 (6)2.3.2 行间距 (6)2.3.3 对齐方式 (6)2.3.4 段落排版 (6)第3章布局与排版 (6)3.1 界面布局 (6)3.1.1 布局原则 (6)3.1.2 布局元素 (6)3.1.3 布局规范 (7)3.2 栅格系统 (7)3.2.1 栅格定义 (7)3.2.2 栅格参数 (7)3.2.3 栅格应用 (7)3.3 信息层次 (7)3.3.1 层次原则 (7)3.3.2 层次划分 (7)3.3.3 层次规范 (7)第4章交互设计 (8)4.1 交互元素 (8)4.1.1 定义 (8)4.1.2 设计原则 (8)4.1.3 设计规范 (8)4.2 交互反馈 (8)4.2.1 定义 (8)4.2.2 设计原则 (8)4.2.3 设计规范 (9)4.3 动效设计 (9)4.3.1 定义 (9)4.3.2 设计原则 (9)第5章图标与按钮 (10)5.1 图标设计 (10)5.1.1 图标概述 (10)5.1.2 图标分类 (10)5.1.3 图标设计要求 (10)5.2 按钮设计 (10)5.2.1 按钮概述 (10)5.2.2 按钮分类 (11)5.2.3 按钮设计要求 (11)5.3 图标与按钮的运用 (11)5.3.1 图标与按钮的搭配 (11)5.3.2 图标与按钮的布局 (11)5.3.3 图标与按钮的反馈 (11)5.3.4 图标与按钮的适应性 (11)第6章表单与输入 (11)6.1 表单设计 (11)6.1.1 表单布局 (11)6.1.2 表单元素 (12)6.1.3 表单验证 (12)6.2 输入框设计 (12)6.2.1 输入框样式 (12)6.2.2 输入框功能 (12)6.3 提示信息 (12)6.3.1 错误提示 (12)6.3.2 成功提示 (13)6.3.3 帮助提示 (13)第7章导航与菜单 (13)7.1 导航设计 (13)7.1.1 概述 (13)7.1.2 导航类型 (13)7.1.3 导航布局 (13)7.1.4 导航交互 (13)7.2 菜单设计 (14)7.2.1 概述 (14)7.2.2 菜单类型 (14)7.2.3 菜单布局 (14)7.2.4 菜单交互 (14)7.3 选项卡与标签页 (14)7.3.1 概述 (14)7.3.2 设计原则 (15)7.3.3 交互设计 (15)第8章列表与表格 (15)8.1 列表设计 (15)8.1.2 列表布局 (15)8.1.3 列表交互 (15)8.2 表格设计 (16)8.2.1 表格结构 (16)8.2.2 表格样式 (16)8.2.3 表格交互 (16)8.3 列表与表格的排序与筛选 (16)8.3.1 排序功能 (16)8.3.2 筛选功能 (16)第9章消息提示与通知 (17)9.1 消息提示 (17)9.1.1 设计原则 (17)9.1.2 提示类型 (17)9.1.3 提示位置 (17)9.1.4 提示方式 (17)9.2 通知设计 (17)9.2.1 设计原则 (17)9.2.2 通知类型 (17)9.2.3 通知位置 (17)9.2.4 通知方式 (18)9.3 确认与警告 (18)9.3.1 设计原则 (18)9.3.2 确认操作 (18)9.3.3 警告操作 (18)9.3.4 设计注意事项 (18)第10章响应式与兼容性 (18)10.1 响应式设计 (18)10.1.1 设计原则 (18)10.1.2 设计方法 (19)10.2 设备兼容性 (19)10.2.1 识别设备类型 (19)10.2.2 适配策略 (19)10.3 浏览器兼容性 (19)10.3.1 主流浏览器 (19)10.3.2 兼容性测试 (19)10.3.3 兼容性处理 (20)第1章设计原则与规范概述1.1 设计理念与目标在设计软件界面时，应以用户为中心，提升用户体验，满足用户需求为设计理念。
[Python程序设计基础(第2版)][李东方 (8)[47页]
![[Python程序设计基础(第2版)][李东方 (8)[47页]](https://img.taocdn.com/s3/m/143b63835022aaea998f0fef.png)
【例8-5】 用grid()方法排列标签，效果如图8-6所示。设想有一个3×4 的表格，起始行、列序号均为0。将标签lbred置于第2列第0行；将标签 lbgreen置于第0列第1行；将标签lbblue置于第1列起跨2列第2行，占 20像素宽
import tkinter root = () lbred = bel(root, text="Red",
# 创建一个320×240的窗体
8.1.2 tkinter常用控件
【例8-2】 标签及其常见属性示例
import tkinter root=() lb=bel(root,text='我是一个标签',\
bg='#d3fbfb',\ fg='red',\ font=('华文新魏',32),\ width=20,\ height=2,\ relief=tkinter.SUNKEN) lb.pack() root.mainloop()
8.1.3 控件布局 控件的布局通常有pack()、grid()和place()三种方法。 1．pack()方法 方法pack()是一种简单的布局方法，如果用不加参数的默认方式，将按布 局语句的先后，以最小占用空间的方式自上而下地排列控件实例，并且保 持控件本身的最小尺寸。 【例8-3】 用pack()方法不加参数排列标签。为看清楚各控件实例所占用 的空间大小，文本使用了不同长度的中英文，并设置 relief=tkinter.GROOVE的凹陷边缘属性
2．grid()方法 方法grid()是基于网格的布局。先虚拟一个二维表格，再在该表格中布局 控件实例。由于在虚拟表格的单元格中所布局的控件实例大小不一，单 元格也没有固定或均一的大小，因此其仅用于布局的定位。grid()方法与 pack()方法不能混合使用。 方法grid()常用的布局参数如下。