用户界面设计实验-系统界面设计实例

合集下载

java实验5图形用户界面设计试验

java实验5图形用户界面设计试验

java实验5图形⽤户界⾯设计试验常⽤布局1)、流布局: FlowLayout 从左到右,⾃上⽽下⽅式在容器中排列,控件的⼤⼩不会随容器⼤⼩变化.容器.setLayout(new FlowLayout(FlowLayout.LEFT));2)、⽹格布局: GridLayout 按照指定⾏数与列数,将容器分成⼤⼩相等的单元格每个单元格放置⼀个控件. 不能将控件放在指定单元格 容器.setLayout(new GridLayout(3,4,10,15));3)、边界布局: BorderLayout 将容器分成东、西、南、北、中五个部分 容器.setLayout(new BorderLayout()); 窗⼝的内容⾯板默认布局就是边界布局。

容器.add(控件,BorderLayout.NORTH);4)、混合布局: 使⽤JPanel,将多个布局组合在⼀起使⽤5)、绝对布局 null: 以坐标定位 容器.setLayout(null); 每个控件在放置在容器之前,必须设置其边界 setBounds(x,y,width,height); btn.setBounds(10,100,30,60);常⽤事件1)、事件源 EventSource:能够触发事件控件如:JButton,JTextField,JFrame,JComboBox,....2)、事件 Event:ActionEvent,KeyEvent,WindowEvent,TextEvent,...3)、事件侦听者Listener(接⼝) ActionListener,WindowListener,...class A implements ActionListener{public void actionPerformed(ActionEvent e){....}}A lis=new A();4)、事件处理函数public void actionPerformed(ActionEvent e){....}事件流程:事件源触发事件-->事件源侦听者接收事件-->⾃动调⽤相应事件处理函数.实践编程1.在应⽤程序窗体中安排1个⽂本框,⼀个标签。

ui界面设计实例100例

ui界面设计实例100例

ui界面设计实例100例UI界面设计实例100例UI(用户界面)设计的目的是让用户在使用产品时,可以直观地理解和操作。

随着移动互联网和移动应用的普及,UI设计变得越来越重要和普及,下面是100个实例,列举了UI设计的关键点,以及实现过程,希望可以给你启发和帮助!一、色彩搭配1.色彩调和原则:将多个颜色组合在一起,呈现出和谐、统一且美观的效果。

2.色彩分配原则:让色彩的分配呈现出一定的规律,可以通过设置不同颜色块大小、颜色的数量等方式来实现。

3. 对比度原则:在使用同一颜色的不同明度或不同颜色的色彩之间添加一定的对比度,使界面更加的清晰明了。

二、布局设计4.井字型排版:将界面分为四个区域,每个区域显示不同的内容,可以使页面更加简洁和清晰。

5.百叶窗设计:将不同的信息通过类似百叶窗的方式一层层叠加在一起展示,这种方式可以在屏幕上节省出更多的空间。

6.瀑布流设计:将内容以网格的形式呈现出来,通过滑动屏幕来实现翻页,这种方式可以使界面更加流畅和美观。

三、字体设计7.字体选择原则:对于UI设计来说,正常字体、加粗字体和斜体字体是最常用的三种,字体一定要符合产品的风格和文字的语境。

8.字体排版原则:对于排版,最好使用单列文本,在单列文本的基础上可以调整字体的大小和颜色,增加排版的美感。

四、形态设计9.图形形态原则:在UI设计中,为了提高用户的使用体验,可以通过设置图形形态来体现功能和操作性能。

例如:摇杆+按钮的形状、齿轮的形状、全屏手势等。

10.图片处理原则:图片处理不单单是对色彩、大小等方面的处理,还需要更加注重图片的剪裁、缩放等细节处理。

五、按钮设计11.按钮设计原则:按钮的设计一定要清晰,有较大的颜色对比度,并且需要设置相应的效果,例如:按下动画、禁用状态等。

12.按钮的状态设计:不同的状态会呈现出不同的界面,例如当前按钮被点击后就会出现“激活状态”。

六、交互设计13.交互动画设计:动画的出现会让界面更加的生动,交互动画更能引起用户的体验,例如:下拉加载数据时,可以设置旋转、下拉动画。

人机交互用户界面设计实验报告

人机交互用户界面设计实验报告

人机交互用户界面设计实验报告实验报告:人机交互用户界面设计一、引言人机交互用户界面设计是指将人与计算机之间的交互过程和界面设计有机结合,使用户能够更加便捷地操作计算机系统。

本实验主要针对用户界面设计进行研究,通过设计和实现一个实用的用户界面,评估其可用性和用户满意度,以进一步提升系统的用户体验。

二、实验目的1.掌握常用的用户界面设计原则和方法;2.通过实践设计一个简单的用户界面;3.评估用户界面的可用性和用户满意度。

三、实验方法1.研究用户界面设计的原则和方法;2.分析用户界面设计所需的功能和需求;3.设计和实现用户界面;4.进行实验测试,收集用户反馈和评估数据;5.分析结果并提出改进建议。

四、实验过程1.研究用户界面设计的原则和方法在研究过程中,我们发现了以下几点重要原则:-简洁性:用户界面应该简单明了,尽量减少冗余信息;-一致性:界面设计要保持一致性,具有可预测性,减少用户的学习成本;-可触达性:界面元素要易于触达和点击,方便用户进行操作;-可反馈性:用户操作后,界面应该及时给出反馈,告知用户操作是否成功;-可控性:用户界面要提供足够的操作控制权给用户。

2.分析用户界面设计所需的功能和需求我们选择设计一个音乐播放器的用户界面,通过分析用户需求,我们找到了以下几个主要功能:-播放/暂停:用户可以通过点击按钮或者按下快捷键来控制播放或暂停音乐;-上一首/下一首:用户可以切换到上一首或下一首音乐;-音量控制:用户可以通过滑动滑块来调节音量大小;-播放列表:用户可以在播放列表中选择需要播放的音乐;-音乐进度控制:用户可以通过拖动滑块来控制音乐的播放进度;-歌词显示:提供歌词显示功能,使用户更好地了解歌曲歌词内容。

3.设计和实现用户界面根据以上功能和需求,我们设计了一个简洁明了的用户界面,界面上有一个播放/暂停按钮、上一首/下一首按钮、音量调节滑块、播放列表选项、音乐进度控制滑块和歌词显示区域。

4.进行实验测试,收集用户反馈和评估数据我们通过实验室内部调查的方式,邀请一些用户来测试我们设计的用户界面。

实验报告3 用户界面设计

实验报告3 用户界面设计
四、实验结果与结论:(经调试正确的源程序和程序的运行结果)
1.运行结果:
运行源代码:
publicForm1()
{
InitializeComponent();
}
privatevoidbutton1_Click(objectsender,EventArgse)
{
textBox1.Clear();
if(radioButton1.Checked)
if(radioButton5.Checked)
textBox1.Text+=radioButton5.Text;
if(radioButton6.Checked)
textBox1.Text+=radioButton6.Text;
if(radioButton7.Checked)
textBox1.Text +=radioButton7.Text;
在这次实验中,我了解到了如何把一些工具放在一个组件里,如何做到单选、多选;如何把所选的东西显示出来;这些功能的实现都借助了一定的控件,就像单选按钮、多选按钮、文本框等。但在实验过程中还遇到了一些问题,就是在登录时,密码是以明文显示出来的,这是就需要将这个文本框的PasswardChar改为“*”,这时显示出的密码就为密文“***”了。还有就是实验中的第二个题没有实现。
专业:________________班级:___________姓名:________________
一、实验目的:
掌握常用控件的属性、事件和方法,初步掌握利用常用控件创建基于图形用户界面应用程序的技术
二、实验内容:
1.设计如图所示的应用程序。当用户选定了基本配置并单击“确定”按钮后,在右边的列表框中显示所选择的信息。

利用Matlab的图形用户界面(GUI)功能,设计与实现实验.

利用Matlab的图形用户界面(GUI)功能,设计与实现实验.

(1 利用Matlab 的图形用户界面(GUI )功能,设计与实现实验主界面;(2 实现在“数值计算”图形用户界面中的各项数值计算,如实现Matlab 的线性方程组的求解、数据统计与分析、数值插值、曲线拟合、常微分方程的数值求解等数值计算;(3 利用Matlab 的二维、三维绘图功能,实现图形用户界面(GUI )中的数值计算的可视化,即给出数值计算实例的同时实现该实例的图形化描述。

如下图给出了一个简单的GUI 界面,学生可以参考如下图设计出自己的GUI 界面。

figure('Color' ,[1,1,1],'Position' ,[100,100,700,600],...'Name' , '' , ...'NumberTitle' , 'off' , 'MenuBar' , 'none' ;uicontrol('Style' , 'Frame' , 'Position' ,[0,0.08,0.45,1],...'Units' , 'normalized' , 'Back' ,[0,1,1];XIANQIU=['a=str2num(get(xishu,''String'';', ...'b=str2num(get(changshu,''String'';', ...'b=b'';x=a\b;', ...'set(jieguo,''string'',x;'];uicontrol('Style' , 'Push' , 'Position' ,[0.02,0.92,0.20,0.06],...'String' , 'ÏßÐÔ·½³Ì×éÇó½â', 'Units' , 'normalized' , 'Call' ,XIANQIU;uicontrol('Style' , 'Text' , 'Position' ,[0.01,0.83,0.1,0.05],... 'Units' , 'normalized' , 'Horizontal' , 'center' , ...'String' , 'ϵÊý¾ØÕó', 'Back' ,[0,1,1];xishu=uicontrol('Style' , 'Edit' , 'Position' ,[0.16,0.83,0.25,0.06],... 'Units' ,'normalized' , 'Back' ,[0,1,0];uicontrol('Style' , 'Text' , 'Position' ,[0.01,0.72,0.1,0.05],... 'Units' , 'normalized' , 'Horizontal' , 'center' , ...'String' , '³£ÊýÏî¾ØÕó', 'Back' ,[0,1,1];changshu=uicontrol('Style' , 'Edit' , 'Position' ,[0.16,0.72,0.25,0.06],.. .'Units' , 'normalized' , 'Back' ,[0,1,0];uicontrol('Style' , 'Push' , 'Position' ,[0.02,0.63,0.20,0.06],... 'String' ,'Êýֵͳ¼ÆÓë·ÖÎö';uicontrol('Style' , 'Text' , 'Position' ,[0.23,0.63,0.2,0.05],... 'Units' , 'normalized' , 'Horizontal' , 'center' , ...'String' , 'ÔÚϵÊý¾ØÕóÊäÈë¿òÖÐÊäÈëÒª·ÖÎöµÄ¾ØÕó', 'Back' ,[0,1,1];uicontrol('Style' , 'Push' , 'Position' ,[0.06,0.55,0.1,0.05],... 'String' , 'ÊýÖµ²åÖµ';uicontrol('Style' , 'Push' , 'Position' ,[0.22,0.55,0.1,0.05],... 'String' , 'ÇúÏßÄâºÏ';uicontrol('Style' , 'Text' , 'Position' ,[0.005,0.45,0.05,0.05],... 'Units' , 'normalized' , 'Horizontal' , 'center' , ...'String' , 'X' , 'Back' ,[0,1,1];chazhi=uicontrol('Style' , 'Edit' , 'Position' ,[0.05,0.45,0.15,0.06],... 'Units' ,'normalized' , 'Back' ,[0,1,0];uicontrol('Style' , 'Text' , 'Position' ,[0.2,0.45,0.05,0.05],... 'Units' , 'normalized' , 'Horizontal' , 'center' , ...'String' , 'Y' , 'Back' ,[0,1,1];nihe=uicontrol('Style' , 'Edit' , 'Position' ,[0.25,0.45,0.15,0.06],... 'Units' ,'normalized' , 'Back' ,[0,1,0];XIANXING=['s=(get(changwei,''String'';', ...'c=(get(tiaojian,''String'';', ...'c_f=dsolve(''s'',''b'',''x'';', ...'set(jieguo,''string'',char(c_f;'];uicontrol('Style' , 'Push' , 'Position' ,[0.02,0.35,0.25,0.06],...'String' , '³£Î¢·Ö·½³ÌÊýÖµÇó½â', 'Units' , 'normalized' , 'Call' ,XIANXING;chengwei=uicontrol('Style' , 'Edit' , 'Position' ,[0.16,0.25,0.25,0.06],.. .'Units' , 'normalized' , 'Back' ,[0,1,0];uicontrol('Style' , 'Text' , 'Position' ,[0.01,0.25,0.1,0.05],... 'Units' , 'normalized' ,'Horizontal' , 'center' , ...'String' , '΢·Ö·½³Ì', 'Back' ,[0,1,1];tiaojian=uicontrol('Style' , 'Edit' , 'Position' ,[0.16,0.15,0.25,0.06],.. .'Units' , 'normalized' , 'Back' ,[0,1,0];uicontrol('Style' , 'Text' , 'Position' ,[0.01,0.15,0.1,0.05],... 'Units' , 'normalized' ,'Horizontal' , 'center' , ...'String' , '³õÖµÌõ¼þ', 'Back' ,[0,1,1];h_axes=axes('position' ,[0.5,0.15,0.4,0.4];jieguo=uicontrol('Style' , 'text' , 'Position' ,[0.5,0.6,0.45,0.25],... 'Units' , 'normalized' , 'Back' ,[0,1,0];uicontrol('Style' , 'Text' , 'Position' ,[0.6,0.85,0.3,0.1],... 'Units' , 'normalized' ,'Horizontal' , 'center' , ...'String' , '½á¹û', 'Back' ,[1,1,1],'FontSize' ,35;uicontrol('Style' , 'Push' , 'Position' ,[0.018,0.02,0.08,0.05],... 'String' , 'Í˳ö', 'Units' , 'normalized' , 'Call' , 'close' ;uicontrol('Style' , 'Push' , 'Position' ,[0.65,0.025,0.08,0.05],...'String' , '°¡Êµ´òʵ', 'Units' , 'normalized' , 'Call' , '»æͼº¯Êý°´Å¥';。

系统界面设计案例

系统界面设计案例

系统界面设计案例:谷歌搜索引擎的界面设计背景谷歌搜索引擎是全球最大的搜索引擎之一,每天处理数十亿次的搜索请求。

谷歌的成功部分归功于其简洁而直观的界面设计。

谷歌在不断改进和优化其搜索界面,以提供更好的用户体验和更高效的搜索结果。

过程1. 简洁而直观的搜索框谷歌搜索引擎将搜索框置于页面中央,使其成为用户注意力的焦点。

搜索框采用白色背景和黑色边框,突出显示在页面上。

文字输入时会有光标闪烁,提示用户可以在此处输入内容。

2. 搜索建议和自动完成当用户开始输入关键词时,谷歌会提供实时的搜索建议和自动完成功能。

这些建议根据用户输入的关键词和常见查询进行动态生成。

这样做可以帮助用户快速找到他们想要的信息,并减少输入错误。

3. 搜索按钮和高级搜索选项在搜索框旁边放置了一个蓝色按钮,上面标有“Google 搜索”文字。

这个按钮使用户能够轻松地开始他们的搜索过程。

在搜索按钮下方,还提供了一个“高级搜索”链接,点击后可以展开更多搜索选项,如时间范围、语言、文件类型等。

这些高级搜索选项帮助用户进一步细化他们的搜索结果。

4. 搜索结果页面布局谷歌搜索结果页面采用了简洁的布局,以确保用户能够快速找到他们需要的信息。

在页面顶部是相关的广告和商业链接,其下是有机搜索结果。

每个有机搜索结果都包括一个标题、URL 和元描述。

这些元素通过字体大小、颜色和样式进行区分,使用户能够快速扫描和理解结果。

5. 搜索过滤和排序选项在谷歌搜索结果页面的左侧提供了一系列过滤和排序选项。

这些选项允许用户根据时间、相关性、地理位置等条件对搜索结果进行进一步筛选和排序。

用户可以根据自己的需求调整这些选项,以获得最符合他们需求的结果。

6. 响应式设计谷歌的界面设计采用了响应式设计原则,使其能够适应不同屏幕尺寸和设备类型(如手机、平板电脑、桌面电脑)。

无论用户使用何种设备访问谷歌搜索,他们都能获得一致的用户体验和界面布局。

结果谷歌搜索引擎的界面设计取得了巨大的成功和影响力。

西安财经学院 VB 实验七用户界面设计

西安财经学院 VB 实验七用户界面设计
(2)设计一个如图A7.5所示的应用程序。当单击【改变标签标题颜色】按钮后,打开【颜色】对话框,为标签标题选择一个颜色;当单击【编辑文本文件】按钮后,打开【打开文件】对话框,选择一个文本文件后调用记事本程序编辑该文件。
(3)设计一个如图A7.6所示的应用程序。当选择选项卡中不同选项后可以对文本框内两个数字进行相应的运算,结果在窗体右边的标签内显示。文本框中数字值可以通过单击箭头进行改变,每次单击可以改变量是2。
Next i
If Check2.Value = 1 Then Sum = Sum - Min
If Check1.Value = 1 Then Sum = Sum - Max
Select Case Index
Case 0
Picture1.Print Sum
Case 1
Picture1.Print Sum / 5
menitalic.Checked = False
End If
End Sub
Private Sub mensize_Click(Index As Integer)
Select Case Index
Case 0
Text1.Foked = True
mensize(1).Checked = False
Label1(i).Top = Label1(i - 1).Top + Label1(i).Height + 100
Label1(i).Caption = "第" & i + 1 & "个成绩"
Label1(i).Visible = True
Next i
End Sub
Private Sub Option1_Click(Index As Integer)

[精品]用户登录界面的设计与实现

[精品]用户登录界面的设计与实现

Window
TextArea TextField
9
6
三、方法。添加按钮单击事件响 应代码
• • class LoginFrame extends Frame implements ActionListener//步骤1:声明实现 ActionListener接口 button_login.addActionListener(this);//步骤3:在构造方法中给按钮添加监听对象
7
小结
• 一、类。Frame类 • 二、属性。TextField与Button类 • 三、方法。ActionListener接口
8
本节涉及到的 各组件类间的继承关系
Object Component
Button
Container Lable TextComponent
Panel
Applet Frame
一、类。自定义登录 窗口类LoginFrame 二、属性。向窗口中 添加文本框与按钮 三、方法。添加按钮 单击事件响应代码
4
一、类。自定义登录窗口类
• • • • • • • • • • • • class LoginFrame extends Frame //步骤1:声明继承自Frame类 { public LoginFrame()//步骤2:定义构造方法 { this.setSize(200,200); this.setVisible(true); } public static void main(String[] args) { new LoginFrame();//步骤3:创建自定义窗口对象 } }
• 本节任务:使用java完成用户登录窗口 • 实验目的:熟练掌握继承与接口
3
任务分析

《软件工程实验》用户界面设计

《软件工程实验》用户界面设计
《软件工程》实验报告
2011至2012学年第1学期
姓名
系别
计算机系
实验地点
E1A_302
学号
年级班
08级一班
实验时间
2011年10月18日
实验项目
实验十四用户界面设计
一、实验目的
了解用户界面的类型、要素,了解界面设计的一般原则,掌握用户界面设计的方法。
二、实验环境
硬件设备:联网的计算机。
软件设备:Windows系列操作系统,VISO。
8、尽可能少得排列可选项,尽可能少的安排操作步骤。
9、操作逻辑无漏洞,保证数据是Fra bibliotek作安全的。1、输入控件的自动聚焦和可用键盘切换输入焦点。
2、可用Enter键提交,确保和点击提交按钮的效果是相同的。
3、鼠标动作提示和回应。
4、尽可能的再客户端完成输入数据合法性验证。
5、根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面。
6、防止表单重复提交处理。
7、页面链接是打开新窗口、使用原窗口还是弹出窗口的原则。
教辅设备:投影设备、扩音设备等。
三、实验内容及步骤
汽车售后管理系统
1、进入系统后的界面如图14-1所示。
图14-1
2、打开“客户管理”后的界面如图14-2所示。
图14-2
3、打开“零件订货”界面如图14-3所示。
图14-3
4、打开“维修业务”后的界面如图14-4所示。
图14-4
四、实验总结
就我所做系统,界面设计的指导性原则总结有如下几点:

实验8MATLAB图形用户界面设计实验报告

实验8MATLAB图形用户界面设计实验报告

实验报告课程名称:MATLAB 应用实验项目名称:MATLAB 图形用户界面设计 实验时间:11.6班级:XXXXX 姓名:XXXXX 学号:XXX实 验 目 的:1. 熟悉MATLAB 的菜单设计方法2. 熟悉MATLAB 的主要控件使用方法3. 熟悉MATLAB 的GUI 设计流程实 验 环 境:MATLAB 7.1实 验 内 容 及 过 程:简单计算器的设计:在MATLAB GUI 的实验环境中,通过MATLAB 图形用户界面设计的方法,设计一个简单的计算器,以实现简单数据的退出、清屏、删除、四则运算等基本功能。

实 验 过 程、结 果 及 分 析:计算器代码:function varargout = jsq(varargin)gui_Singleton = 1;gui_State = struct('gui_Name', mfilename, ...'gui_Singleton', gui_Singleton, ...成 绩: 指导教师(签名):'gui_OpeningFcn', @jsq_OpeningFcn, ...'gui_OutputFcn', @jsq_OutputFcn, ...'gui_LayoutFcn', [] , ...'gui_Callback', []);if nargin && ischar(varargin{1})gui_State.gui_Callback = str2func(varargin{1});endif nargout[varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});elsegui_mainfcn(gui_State, varargin{:});endfunction jsq_OpeningFcn(hObject, eventdata, handles, varargin)guidata(hObject, handles);function varargout = jsq_OutputFcn(hObject, eventdata, handles)varargout{1} = handles.output;function edit1_Callback(hObject, eventdata, handles)function edit1_CreateFcn(hObject, eventdata, handles)if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor')) set(hObject,'BackgroundColor','white');endfunction pushbutton19_Callback(hObject, eventdata, handles)close(gcf);function pushbutton17_Callback(hObject, eventdata, handles)set(handles.edit1,'String','0');function pushbutton18_Callback(hObject, eventdata, handles)global a;a=get(handles.edit1,'String');switch acase ' 'b='0';case '0'b=a;otherwiseb=a(1:length(a)-1);endset(handles.edit1,'String',b);guidata(hObject, handles);% --- Executes on button press in pushbutton4.function pushbutton16_Callback(hObject, eventdata, handles)global a;global b;b=strcat(b,strcat(a,'+'));set(handles.edit1,'String','0');function pushbutton15_Callback(hObject, eventdata, handles)global a;global b;b=strcat(b,strcat(a,'-'));set(handles.edit1,'String','0');function pushbutton14_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='9';elsea=strcat(a,'9');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton13_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='8';elsea=strcat(a,'8');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton12_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='7';elsea=strcat(a,'7');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton11_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='4';elsea=strcat(a,'4');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton10_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='5';elsea=strcat(a,'5');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton9_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='6';elsea=strcat(a,'6');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton8_Callback(hObject, eventdata, handles) global a;global b;b=strcat(b,strcat(a,'*'));set(handles.edit1,'String','0');function pushbutton7_Callback(hObject, eventdata, handles) global a;global b;b=strcat(b,strcat(a,'/'));set(handles.edit1,'String','0');function pushbutton6_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='3';elsea=strcat(a,'3');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton5_Callback(hObject, eventdata, handles) global a;if a=='0';a='2';elsea=strcat(a,'2');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton4_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='1';elsea=strcat(a,'1');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton3_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');if a=='0';a='0';elsea=strcat(a,'0');%字符串连接endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton2_Callback(hObject, eventdata, handles) global a;a=get(handles.edit1,'String');b=strfind(a,'.');if numel(b)==0a=strcat(a,'.');elseset(handles.edit1,'String',a);endset(handles.edit1,'String',a);guidata(hObject, handles);function pushbutton1_Callback(hObject, eventdata, handles) global a;global b;c=get(handles.edit1,'String');d=strcat(b,c);a=eval(d);b='0'; %避免出现累加问题a=num2str(a);guidata(hObject, handles);。

3.BS结构用户界面设计报告书

3.BS结构用户界面设计报告书

B/S结构用户界面设计
【实验编号】
10003809548j Web界面设计
【实验学时】
8学时
【实验环境】
●所需硬件环境为微机;
●所需软件环境为dreamweaver
【实验内容】
进行BS结构的web界面设计,选择临朐旅游美食系统进行开发
【关键步骤】
设计流程图,进行纸面操作设计,寻求补足。

进行DreamWeaver的学习,上网查询视频内容。

设计构思,利用DW进行设计,完成操作。

操作步骤:
点击任务栏:
进入相对应的界面。

在临朐旅游界面:点击
景点进入,或者点击下面“[详情]”进入。

【程序运行截图】
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
【实验体会】
进行学习操作BS结构的操作设计,进行完成操作,顺利便捷,同时进行dw的学习进行操作完成对htnl的理解,加深界面的操作理解,增强对BSweb开发的人机交互的作用。

操作系统实验 几种操作系统的界面

操作系统实验 几种操作系统的界面

操作系统实验几种操作系统的界面操作系统实验几种操作系统的界面一、引言在计算机科学领域,操作系统是一个关键的概念,它是管理和控制计算机硬件和软件资源的系统。

操作系统通过提供用户界面来使得用户可以与计算机交互,并执行各种任务。

不同的操作系统会有不同的用户界面设计和交互方式。

本实验将介绍几种常见的操作系统界面。

二、Windows操作系统界面Windows操作系统是一种由微软公司开发的图形用户界面操作系统。

它提供了直观的桌面环境,包括任务栏、开始菜单、桌面图标等。

用户可以通过鼠标和键盘来操作计算机,执行各种任务,如打开文件、运行程序、浏览互联网等。

Windows操作系统还提供了丰富的应用程序和工具,使得用户可以方便地进行各种工作和娱乐活动。

三、Linux操作系统界面Linux操作系统是一种基于Unix的操作系统,它采用了类似Windows的图形用户界面(即桌面环境),同时也支持命令行界面。

常见的Linux桌面环境有GNOME、KDE、Xfce等。

用户可以通过鼠标和键盘来操作计算机,执行各种任务。

与Windows不同的是,Linux操作系统注重开放性和自由性,用户可以自由定制和配置系统,增强系统的安全性和稳定性。

四、Mac操作系统界面Mac操作系统是由苹果公司开发的操作系统,它专门用于苹果的Mac电脑和移动设备。

Mac操作系统采用了独特的图形用户界面,包括任务栏、启动台、底部Dock栏等。

通过鼠标和触摸板,用户可以进行各种操作,如浏览互联网、打开应用程序、编辑文档等。

Mac操作系统以其优雅的设计和良好的用户体验而受到广大用户的喜爱。

五、移动操作系统界面移动操作系统是为移动设备(如智能方式、平板电脑)设计的操作系统。

常见的移动操作系统包括Android和iOS。

移动操作系统采用了触摸屏幕的交互方式,用户通过手指触摸、滑动、捏合等手势来进行操作。

移动操作系统提供了各种应用程序和功能,方便用户进行通讯、娱乐、办公等活动。

实验报告3用户界面设计

实验报告3用户界面设计

实验报告3用户界面设计一、引言用户界面是指用户与计算机或其他设备进行交互时所看到的屏幕和操作界面。

良好的用户界面设计能够提高用户的满意度和效率,从而提升整个系统的使用体验。

本实验报告将介绍用户界面设计的基本原则和方法,并通过一个案例分析来展示如何设计出符合用户需求的用户界面。

二、用户界面设计原则1.简单和直观:用户界面应尽量简洁明了,避免过多的信息和复杂的操作流程,使用户能够迅速上手并理解系统的功能。

2.一致性:用户界面中的各个元素应保持一致性,包括颜色、字体、按钮形状等,以便用户能够准确地识别和操作。

3.反馈:系统应提供即时的反馈,告知用户操作结果或状态,以便用户能够及时调整操作。

4.易学性:用户界面应符合用户习惯和认知规律,尽量减少用户的学习成本。

5.可访问性:用户界面应考虑到不同用户群体的需求,包括身体残疾人士、老年人等特殊群体。

三、用户界面设计方法1.用户需求分析:通过对用户的需求进行调研和分析,了解用户的背景、技能水平、使用场景等,从而为用户界面的设计提供参考。

2.信息架构设计:根据用户需求,将系统的功能和信息进行分类和组织,形成一个清晰的结构,以便用户能够快速找到所需内容。

3.交互设计:确定用户与系统之间的交互方式,包括输入、输出、菜单等,确保用户能够直观地理解和操作系统的功能。

4.视觉设计:通过选择合适的颜色、图标、布局等来设计用户界面的外观,使其具有吸引力和可视性。

5.测试和迭代:设计好用户界面后,进行功能测试和用户测试,根据反馈和评价来改进和优化用户界面设计。

四、案例分析以一个在线购物网站为例,介绍如何进行用户界面设计。

1.用户需求分析:调研用户的购物习惯、需求和偏好,了解用户对商品信息、支付等方面的要求。

2.信息架构设计:将商品按照类别、品牌等分类,设置功能和筛选功能,便于用户找到所需商品。

3.交互设计:在首页设置商品推荐、热门活动等模块,为用户提供直观的导航和操作入口。

在商品详细页面设置加入购物车、立即购买等按钮,方便用户进行操作。

实验二 Visio用户界面设计.

实验二  Visio用户界面设计.

实验二(3)用Microsoft Visio工具设计用户界面一、实验目的1.掌握Microsoft Visio的使用方法使用方法,熟悉其中的各种图表2.学会利用Microsoft Visio来建立所需要的用户界面二、实验内容1.设计用户界面以教师管理系统为例,使用Microsoft Visio来创建教师信息录入窗口:(1)选择图表类型从开始菜单中选择程序——Microsoft Visio,在文件菜单中选择新建,选择软件,选择Windows用户界面。

如图2-1所示。

图2-1Visio文件菜单(2)Windows用户界面中控件的识别和基本操作1.控件识别,如图2-2所示为Visio绘制用户界面常用控件。

图2-2常用控件2.调整显示比例,如图2-3所示。

图2-3把屏幕的显示比例从42调整到1503.控件选取,在左边的控件列表中选取所需控件,把它拖至页面中。

如图2-4、选择分组框、顶层菜单项、以及网格列。

图2-4选取控件4.网格行列值的选取,如图2-5所示。

图2-5设置网格5.字体大小的设定,如图2-6所示。

图2-6设置字体(3)创建教师信息录入窗口1.按上述实验步骤,选择所需要的用户界面,在这里,我们选择Windows用户界面。

2.调整页面大小,从42调整到150。

3.选择所需要的控件,把控件拖入页面中,并标明这个控件,如图3-7所示:图2-7教师信息录入窗口教师信息主要包括教师姓名,职称编号,年龄,性别,家庭地址,联系方式等信息,我们把他们一一列入其中。

同时我们使用一张表格来具体显示存储并显示这些信息。

表中的命令按钮包括添加,保存和删除。

添加命令实现把录入的信息存如表格中,保存是把表格中的信息存入数据库,删除是把表格中的一行信息删除。

(4)调整个控件的位置,并进行必要的组合操作。

合并后的效果如图2-8所示。

图2-8空间位置设置(5)对窗口进行润色,增加背景颜色或改变字体颜色等操作。

效果如图2-9所示。

系统页面设计实验报告(3篇)

系统页面设计实验报告(3篇)

第1篇一、实验目的本次实验旨在通过实践操作,掌握系统页面设计的基本原则和方法,提高系统界面的美观性和用户体验。

通过本次实验,我希望能够:1. 理解系统页面设计的基本概念和原则。

2. 掌握页面布局、色彩搭配、字体选择等设计技巧。

3. 学会使用相关设计软件进行页面设计。

4. 提高对用户体验的重视,设计出既美观又实用的系统界面。

二、实验内容本次实验主要涉及以下内容:1. 系统页面设计的基本原则2. 页面布局设计3. 色彩搭配与字体选择4. 设计软件应用三、实验步骤1. 理解系统页面设计的基本原则在进行页面设计之前,我们需要了解一些基本的设计原则,如:(1)一致性:保持界面元素的一致性,使用户在使用过程中感到舒适。

(2)简洁性:界面简洁明了,避免过多的装饰元素,减少用户的认知负担。

(3)可访问性:确保所有用户都能使用系统,包括色盲、视障等特殊群体。

(4)易用性:界面操作简单,用户能够快速上手。

2. 页面布局设计页面布局是页面设计的基础,以下是一些常用的布局方法:(1)水平布局:将页面元素水平排列,适用于信息展示类页面。

(2)垂直布局:将页面元素垂直排列,适用于导航类页面。

(3)网格布局:将页面元素按照网格形式排列,适用于内容丰富的页面。

3. 色彩搭配与字体选择色彩搭配和字体选择对页面美观度有很大影响,以下是一些技巧:(1)色彩搭配:选择与主题相关的颜色,保持色彩之间的和谐与对比。

(2)字体选择:根据页面内容和风格选择合适的字体,确保字体大小适中、清晰易读。

4. 设计软件应用本次实验主要使用Photoshop进行页面设计,以下是使用Photoshop进行页面设计的步骤:(1)新建文件:选择合适的分辨率和色彩模式。

(2)创建图层:根据页面布局创建多个图层,方便后期编辑。

(3)添加元素:在图层上添加文字、图片等元素,并进行排版。

(4)调整色彩与字体:根据页面风格调整色彩和字体。

(5)保存与导出:保存设计文件,并导出为适合网页使用的格式。

用户界面设计实验报告

用户界面设计实验报告

用户界面设计实验报告用户界面设计实验报告一、引言在当今信息技术高速发展的时代,用户界面设计的重要性愈发凸显。

一个好的用户界面设计可以提升用户体验,增加用户的满意度和忠诚度。

为了探索有效的用户界面设计原则和方法,本实验旨在通过对比不同设计方案的实际应用效果,评估其对用户体验的影响。

二、实验设计本实验采用了对比实验设计,选取了两种不同的用户界面设计方案进行比较。

实验对象为20名大学生,他们被随机分为两组,每组10人。

每个组分别使用不同的用户界面进行操作,然后根据他们的反馈和实际操作情况进行评估。

三、实验过程1. 设计方案A设计方案A采用了简洁、直观的界面风格,注重信息的整合和布局的合理性。

在设计过程中,我们参考了经典的用户界面设计原则,如一致性、可见性、可理解性和可控制性等。

在实验中,用户使用设计方案A进行了一系列任务的操作,包括查找信息、填写表单和进行交互等。

2. 设计方案B设计方案B则更加注重用户的个性化需求和情感体验。

在界面设计中,我们融入了更多的交互元素和动画效果,以增加用户的参与感和乐趣感。

同时,我们也充分考虑了用户的心理感受和认知特点,力求让用户在使用过程中感到愉悦和舒适。

四、实验结果通过实验数据的收集和分析,我们得出了以下结论:1. 设计方案A在用户操作的效率和准确性方面表现较好。

由于其简洁明了的界面风格和合理布局,用户能够快速找到所需的功能按钮和信息,提高了操作的效率。

2. 设计方案B在用户的情感体验和参与感方面表现较好。

用户对于方案B中的交互元素和动画效果给予了较高的评价,认为这种设计更加有趣和有吸引力。

五、讨论与建议根据实验结果,我们可以得出以下讨论与建议:1. 用户界面设计应综合考虑用户的操作需求和情感体验。

简洁明了的界面布局可以提高用户的操作效率,而个性化的交互元素和动画效果则可以增加用户的参与感和乐趣感。

2. 用户界面设计应注重用户的心理感受和认知特点。

通过调研用户的喜好和习惯,设计师可以更好地满足用户的需求,提高用户对界面的接受度。

用户界面设计模板

用户界面设计模板

用户界面设计模板在现代科技发展迅速的时代,用户界面设计成为了各种应用程序和网站的重要组成部分。

一个精心设计的用户界面能够提升用户体验,使用户更加便捷地使用产品或服务。

为了帮助开发者更好地设计用户界面,以下是一个用户界面设计模板的示范。

1. 页面布局用户界面的页面布局是用户第一时间接触到的,因此需要设计得简洁明了。

以下是一个常见的页面布局示例:顶部导航栏:放置网站或应用的Logo、主要功能入口、搜索栏等;主要内容区域:展示核心信息、功能区域等;侧边栏:放置次要功能入口、个性化设置等;底部导航栏:放置版权信息、社交媒体链接等。

2. 色彩搭配色彩在用户界面设计中起着重要作用,能够影响用户的情绪和行为。

以下是一个常见的色彩搭配示例:主色调:选择一个与品牌定位一致的主色调,用于突出重要元素;辅助色调:选择一至两种与主色调相搭配的辅助色调,用于强调、分类等;背景色:选择与主色调相协调的背景色,避免对内容阅读产生干扰。

3. 字体选择合适的字体选择能够提升用户界面的可读性和美感。

以下是一个常见的字体选择示例:标题字体:选择一种醒目、有力的字体作为标题的展示字体;正文字体:选择一种简洁、易读的字体作为正文内容的展示字体;链接字体:选择一种与主题风格相符的字体作为链接文字的展示字体。

4. 图标使用图标能够更直观地传达信息和功能。

以下是一个常见的图标使用示例:主要功能图标:使用清晰易辨认的图标,便于用户理解和点击;辅助功能图标:使用与功能相关的图标,帮助用户快速识别和操作;动效图标:使用动画效果的图标,增加用户的交互体验。

5. 页面交互用户界面的交互设计是决定用户体验质量的关键因素之一。

以下是一个常见的页面交互示例:按钮设计:选择合适的按钮样式和颜色,使用户容易理解和操作;反馈设计:提供反馈信息,如点击按钮后的状态变化、加载进度等;过渡效果:使用过渡动画来平滑页面切换,避免用户的不适感。

总结用户界面设计模板是一个指导开发者设计界面的示范,通过页面布局、色彩搭配、字体选择、图标使用和页面交互等方面的设计,能够提高用户的使用体验。

用户界面实验报告

用户界面实验报告

用户界面实验报告一、实验背景在当今数字化的时代,用户界面(UI)的设计对于产品的成功至关重要。

一个优秀的用户界面能够提供良好的用户体验,提高用户的满意度和忠诚度,从而促进产品的推广和使用。

因此,为了探究不同用户界面设计对用户行为和满意度的影响,我们进行了本次实验。

二、实验目的本次实验的主要目的是评估不同用户界面设计在可用性、易用性和用户满意度方面的表现,并找出最优的设计方案,为后续的产品开发提供参考。

三、实验对象本次实验选取了具体数量名年龄在年龄范围之间的志愿者作为实验对象。

他们具有不同的教育背景、职业和使用习惯,以确保实验结果的普遍性和代表性。

四、实验设计1、界面设计方案我们设计了三种不同的用户界面方案,分别为方案 A、方案 B 和方案 C。

方案 A 采用了简洁明了的布局,突出主要功能;方案 B 注重色彩搭配和图形元素的运用,以增强视觉吸引力;方案 C 则结合了方案A 和方案B 的特点,并进行了一些创新的交互设计。

2、实验任务为了评估用户界面的性能,我们设计了一系列典型的任务,包括注册登录、信息搜索、购物下单等。

实验对象需要在规定的时间内完成这些任务,并记录完成任务的时间和遇到的问题。

3、评估指标我们采用了以下评估指标来衡量用户界面的效果:(1)任务完成时间:记录实验对象完成每个任务所需的时间,时间越短表示界面的可用性越高。

(2)错误率:统计实验对象在完成任务过程中出现的错误次数,错误率越低表示界面的易用性越好。

(3)满意度评分:实验结束后,让实验对象对每个用户界面进行满意度评分,评分范围为 1 到 5 分,5 分为非常满意,1 分为非常不满意。

五、实验过程1、实验前准备在实验开始前,对实验对象进行了简单的培训,介绍了实验的目的和流程,并让他们熟悉实验环境和设备。

2、实验进行实验对象按照随机顺序分别使用三种用户界面方案完成实验任务。

在实验过程中,实验人员对实验对象的操作进行观察和记录,同时使用专业软件记录实验对象的操作数据。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

用户界面设计实例
● 设计的系统名称:个人日常事务管理系统
● 针对用户群是:广大电脑用户(有一定的电脑操作基础),officer 和广大学生。

一、系统需求分析(The system requirement )
针对officer 和学生们的需求分析,从我自身分析:对于我日常的安排我平时会用专门的记事本记录和更改,对于日常各种事务可能会冲突或不变携带,现在针对这些需求,设计出符合此人群适合的一款系统来帮助人们更好的安排日程和完成工作。

此系统是要面向个人的,同企业系统相比,此软件要力求操作简单,效率要高效,由于针对的人群是officer 和大学生,这些人都是年轻的一代人,对计算机和系统都比较了解,而且倾向于华丽的界面,但是该系统同时要解决高效,较少的操作较快地达到用户的需求。

由于工作原因或计算机系统崩溃等用户在本机保存的日程安排等数据可能丢失的情况,同时,有些情况下可能无法连接网络,此系统应支持 1.、本机数据保存。

2、可以上传到服务器数据库,用户注册可获得免费的空间,用户注册后,只要登录就能在随时随地获得自己的日程安排等信息。

二、系统功能定义(The function definitions )
个人日程管理系统主要是提供个人时间日程安排系统软件,它具有相当方便的操作接口,让用户能够对所安排的行程一目了然,除去主要功能还附带了更多功能和小工具,安排的行程可以生成通行路线,并会根据天气预报提醒当天安排是否影响。

而且用户可以注册,注册后用户有更多的服务,安排的日程数据可以保存到本地同时可以更新到服务器,这样用户就算到外地也可以随时查看自己的日程安排,同时其他功能有:时钟提醒、通讯录、效率评估等。

实现功能(主界面导航):
个人日常事 务管理系统
一、工作台(主要功能):
1、待办事件
2、日程安排
3、效率评估
4、通讯录
5、定时提醒
二、通行路线:
可以和平时安排联系起来,可以提前安排好行车路线
三、天气情况
和日程安排联系起来,提醒用户天气状况,便于用户及时修改自己的日程安排。

四、桌面图标
将桌面快捷方式整理到这里,这是方便用户的一个小工具,此功能为了挽留用户,功能太单一,用户可能会流失。

三、界面设计和标准(The Principles)
风格设计分析:针对用户年轻,更加偏好色彩丰富,但是针对于此软件要求的功能应符合操作简单。

则主要用鼠标点击操作就可以方便的查看用户的日程安排信息。

虽然要追求界面的时尚和华丽,但是界面过于艳丽,容易导致用户视觉疲劳。

则轻松的淡彩色为主配色,灰色系为主。

用户导航显示:简单明了,文字描述要明了,通过文字和图标配合示意,用户看到按钮,可以快速的明白此按钮功能。

布局应该满足用户习惯,结合广大软件按钮布局方式。

为了保持界面在设计过程中,要求各个界面的风格的统一,先做出表格,列出界面制作统一的原则和规范。

四、我设计的界面(The GUIs)
1、登录界面:
2、主界面
●界面左侧为:工作界面、今日事务、通行路线、天气状况、桌面图标
●界面上面是:日程安排、代办事件、效率评估、定时提醒、通讯录
●界面左上角:显示用户登录头像,登录ID名称、登录、注销、注册按钮●界面右侧是:日历,用户可以选择时间直接添加日程或查看日程
3、日程管理子界面显示
主要功能:日程安排
分为日程主题、开始时间、结束时间、完成情况、持续时间、备注用户可以直接点击然后输入内容。

由于可能日程安排太多,用户可以在搜索框中输入关键内容,就可以快速搜索出所锁定的日程。

4、添加日程子界面
添加日程,输入主题,时间是图形操作快速选择时间同时也可以输入时间,持续时间会根据开始和结束时间自动计算,优先级的选择,软件会给出日程重要性排序,完成进度帮助用户安排时间。

备注:用来记录日程的注意事项等。

5、错误提示界面
错误提示界面:要清楚的向用户作出错误提示,表明错误产生的原因,此框体和软件的框体保持风格和色调一致,并且请求用户是否发送错误报告,这样充分考虑到了用户的心理,而且用户可以选择不显示此框体,错误可以在后台自动
解决并发送报告,前提这都是用户根据自己的要求设置好的,这样可以满足用户帮忙改进这个软件而且不会打扰到用户。

五、界面的可用性评估(The guidelines)
1、Time to learn:
在进入界面开始,会有导航,和新手入门,一步步帮助用户去了解和学习本软件的功能,由于主要面对的用户群是广大的学生和officer们,都是有一定电脑操作基础的人群,设计的这个界面简洁,按钮文字很清楚的描述了所带的功能,用户会比较快的时间内掌握此软件的使用。

2、Speed of performance:
此软件设计数据支持本地存储和上传服务器,当网速或其他原因,不便从服务器读取数据时,则可以先在本地操作,这种设计就加快了运行的速度。

由于面向的个人事务管理,功能不够强大,但是运行速度会较快,这很好的满足了用户的需要。

3、Rate of errors by users:
软件界面是分为三层的,主要都是在主界面完成的,而且会帮助用户提醒所犯的错误,用户的日程安排对时间的精确性要求比较高,则在时间设置和设置提醒方面则不允许出错,否则可能会给用户带来不便,则在时间方面会有纠错能力,并且取出歧义,例如:24时或12时会明确指出上午、下午和晚上,也提醒用户注意时间安排,如果有冲突也会提出有错,并会指出错误的原因。

4、Subjective satisfaction:
此界面清爽,颜色柔和,并且增加了一些小工具,在帮助用户安排日程的同时,用户也可以用此软件帮助自己更好生活。

天气状况,行车路线,在安排日程的同时也会和这些情况结合起来。

例如:人们在安排日程任务的时候都会受到这些情况的影响,我们设计这款软件就是为了满足用户的需求,则在需求分析中就设计到了这点,这款软件暂时集合了这些功能来满足用户安排好事务,结合良好的界面,估计用户对这款软件会比较满意。

5、Retention over time:
此界面按钮和字体设计比较大,排版也很清晰,在很好满足功能的同时尽可能划分不同功能的区域于固定位置,这样可以避免由于界面过于繁杂和密集导致用户产生疲劳感,而且各种功能的实现基本都是通过主界面的导航实现的,这样
可以使用户方便简捷的操作,从而让用户得到较好的用户体验。

六、用户测评和建议(Review)
从班中找学生评价
用户身份:大学生
分析:有一定的操作电脑的知识,接触过较多的软件
●测试用户一:
身份:大二学生(男)
感受:认为功能实现上是满意的,但是认为按钮分布比较乱,不清楚一些按钮的功能,认为一些按钮分布没有必要,认为有些功能与想要实现的功能没有关系,认为桌面快捷方式没有关系。

建议:可以让界面色彩更丰富些,使界面可以换各种皮肤,按钮字体可以小些。

●测试用户二:
身份:大二学生(男)
感受:感觉不错,各种功能都为用户考虑到了,但是在输入内容的界面有垂直滚动,翻屏页数过多会导致使用很不好的感觉。

建议:应该尽可能减少这种滚动,尽可能不超过两屏。

这样使用更方便些。

在按钮布局有层次性很好,但是最好考虑到达到一个功能,有关联的顺序点击的按钮之间的距离尽可能的达到最短,这样可以使使用效率更高些。

相关文档
最新文档