UI设计报告范文
UI设计报告范文
篇一：UI设计报告.doc兼容
超市会员管理系统UI设计报告
一基于B/S以下特点，设计选用B/S架构。
1：主要事务逻辑在服务器端（Server）实现，能大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。 2：它是一次性到位的开发，能实现不同的人员，从不同的地点，以不同的接入方式访问和操作共同的数据库。
3：它能有效地保护数据平台和管理访问权限，服务器数据库也很安全 。特别是在JAVA这样的跨平台语言出现之后，B/S架构管理软件更是方便、快捷、高效。 二:要用到的软件
1平面设计软件photoshop 2网页制作软件dreamweaver 三：Ui设计将遵循以下原则 1：界面美观而简单
2：界面风格一致
3：采用分组的方法，将相关控件分组，以体现他们的关系同时显示相关信息
4：使用强调，运用分组，层次，大小，颜色等字体来将注意力集中在首先需要看到的界面控件上，尽量以可视化的方式引导用户进行操作。 四：界面设计图初稿 1登录页面
注：其实蓝色为明艳的亮色调，登录框与页面色有颜色上的差别
2会员进入的界面
3管理员进入页面 主按钮点击主按钮后呈现的分类信息
4销售者进入的页面
五：关于网页的明度配色
1登录页面采用整体明度相差较小的高明的构成柔和淡雅的弱对比效果，即高短调 其余页面整体画面采用中明度并使用明度差较大的明度对比做页面主体，容易产生强烈对比
2所有页面配色均以蓝色调为主，因其给人一种沉稳，静谧感，使浏览者获得视力的舒缓，会提高浏览者阅读页面的内容的判别率
篇二：web ui设计报告
第一部分:实训目的
21世纪是一个信息时代，Internet已经进入人们生活与工作的各方面，而网页作为Internet信息传递的重要载体，其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力，并且上传到网上去，让更多人认识我，更好的宣传自己。
个人网站的总体规划和步骤
1． 设计的思路
我的个人网站主要是以绿为主，以淡色为辅。主要是希望所有的朋友看到这个空间能一种和谐、安宁、充满生机的感觉。得到心灵的慰藉！
2． 绿色网站的意义
我设计的这个网站主要是给人轻松舒爽、赏心悦目的感觉，让人们置身于一种美丽大自然的意境中 ，明快而错落的绿，让人仿佛来到青山翠谷。 网站的总体风格
网站的总体风格主要是以绿色为主，以淡色为辅，充满活力，生机。具有个性色彩。
网站的布局其实很简单，主要是做好一个模版，模版做好框架了，那网站就初步形成了，虽然主要框架做好了，但是也不要高兴得太早哦，但是你也要想清楚怎样把整个界面搭配得更具有个性化。首先，在框架的最top要插入一个能体现你个人网站的主图。然后在主图的下面插入按钮导航条，之后下面就插入自己想要的风格，虽然用模版做出来的风格都非常相似，但是各个页面都具有各自的特色，让我们感受到自己的空间的个性。
绿色网站的内容结构也很简单，分类清楚。页面链接的层次也很明确，访问者可以很明确的感受到制作网站的人的心情和性格。
绿色网站的主要色调是以绿色为主。鲜艳的绿色是一种非常美丽、优雅的颜色，它生机勃勃，象征着生命。绿色宽容、大度，几乎能容纳所有的颜色。绿色
的用途极为广阔，无论是童年、青年、中年、还是老年，使用绿色决不失其活泼、大方。以淡色为辅，两种颜色的结合更体现出了青春与活力。
淡绿色网站主要采用的是环型结构，每一个页面连接另一个页面，使各个页面能方便的跳转。
4 网站的分析与设计
设计一个个人网站,主要需要考虑两个方面的因素:
1.速度:反应出用户访问网站页面的速度。主页是经常被访问的页面，最好把每页的风格统一起来，例如：导航部分最好放在每页相同的位置，便于在每个页面中的跳转。
2．布局：是个人网站具有吸引力的根本所在，它主要说的是信息显示的视觉效果。
5．规划站点
站点规划是设计站点前的一个重要步骤。合理地规划站点对以后站点的设计甚至网站的制作会有事半功倍的效果。
4．1 导航草图的制作有利于理清思路，避免在制作网站的过程中乱了方寸。如
图4-1所示就是个人粉色网站的初始导航草图。
图4-1 导航图
在导航草图中，网站首页下面有6个二级网页。各网页主要内容如下：
首页：总述。
我的简介：个人资料。
相册：包括了我自己的相册，家人相册、朋友相册、明星相
册和漫画图片。
留言板： 是访问我的朋友其中可以写上姓名、联系方式和
对我的网站的看法。让朋友给我留言，增进彼此的了解与交流。
日记：是用框架素材的，有我的作品，最新自己日记，我收
藏的文章，动画效果，文字飘动，供访问者观赏。
音乐：有我最喜欢的音乐，我收藏的音乐，可以播放，带歌
词，下载，有飘动图片，共访问者分享。
4．2 创建站点文件夹
合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，这对以后网站的制作是极其有利的。创建“绿色”网站的站点文件夹的具体操作如下：
步骤1 在本地磁E盘创建一个文件夹，该文件夹在创建动态站点时将作为站点的根目录。这里在E盘下创建一个名为黄裕福个人网
站的文件夹。
步骤2 在黄裕福个人网站文件夹内创建不同功能的文件来，文件夹分别命名为图片素材库,按钮素材，我的主页，我的档案，登陆注册，相册，日记，音乐8个文件夹，并将对应的素材放到各自的文件夹中。
4．1创建站点
步骤1 进入Dreamweaver 8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。
步骤2 在该对话框中的“基本”选项卡中的“ 您打算为您的站点起什么名字？”文本框中输入 hyfu
步骤2 单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在“哪种种服务器技术？”下拉列表中选择“ASP VBScript”。
步骤3 单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？”文本框中输入F: index
步骤4 在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？”中输入http://localhost/index/ ,输完后，单击“测试URL”按钮。如果这时它提醒你URL前缀测试成功，点击“确定”按钮，你就可以进入下一步了，否则的话，你再按照前面的步骤检查站点出现的问题。
步骤5 单击“下一步”按钮，在对话框中选择“否”。
步骤6 单击“下一步”按钮，点击“完成”按钮即可完成本地站点的创建，这时，创建的站点就显示在“文件”面板中了
如图所示
4．4首页的布局
步骤1 选择“布局模式”，将页面布局为
步骤2 在第1行第1列里插入一张主要的图片。
步骤3 在第2行第2列里面插入导航条。
步骤4 在相应的位置插入相应的图片的Flash影片。
步骤5 在第2行第1列中插入一个表单，在表单中插入一个4行2列的表格，输入相应的信息
篇三：UI网页设计实训报告
郑州轻工业学院 实 训 报 告
实训名称：姓 名：宋得洋院 （系）：
专业班级： 指导教师： 徐洁赵晓君 成 绩：
时间： 20XX年 12月 24日至 20XX年 1月 4日
实训报告
实训内容：
第一周的时候老师对我们以往学习的知识进行了详细的了解，对我们以前学习不到的知识进行了总结，别且勉励我们在今后学习的道路上不骄不躁。老师对向我们灌输了网站的搭配技巧和大致结构，这些只能在公司的实践中才能得到的东西，我们在老师的帮助下得到了大致的了解，感谢老师。前几天老师主要讲解了PS的知识，比如怎么做灯光效果，我们在下午的时候进行了练习。老师说在2个星期的时间里学习到很多的知识是不可能的，但是我们要有信心和勇气去学习，只有自己不放弃才能得到自己想要的知识。在让我们得到理论知识灌输的同时，老师注重我们的实践，实践是根本，没有实践的东西是不成形的，也是不可靠的，无论怎么样的想象，没有起飞总是会坠毁的。老师对于蒙版效果的使用让我耳目一新，以前总是不重视这些不太中心的东西，但是通过老师对于蒙板的讲解，我了解了那些外观上的刺激和强悍的作用，往往能让人耳目一新。
老师对于蒙版的使用以及做出的一些精美的图片，让我认识到了蒙版的重要性。因为现在的人们对于美观的要求性很高，我们需要对此下很大的功夫，这样做出的东西才能满足人们的口味。长久经验的积累让老师在这个行业走的很远，以后我会更加努力的实践，让自己在走上社会的道路上有一个良好的基础。
老师讲解的PS知识对PS进行了剖析，许多小技巧让我们在作图的时候效率有了很大的提高。 大概可以分为以下几类：1.魔棒、套索、矩形选区工具、圆形选区工具、像素选择工具等等，这一类使用简单，对规则图形和对比度大的图像进行操作；2.通道选择法，以不同颜色通道的亮度及对比度为基础，进行绘制及选择；3.矢量路径方法选择，工具包含绘制的图形、钢笔工具、网格工具等；
4.图像具有相对复杂的背景，前景（即我们要扣取的对象）边缘细微，例如发丝毛发等，可用抽出这类的滤镜或者用其他第三方滤镜，如Knockout、Mask Pro、ReMask、蒙娜丽莎等等；5.要扣取的前景具有半透明属性，例如婚纱、水珠、气泡、玻璃制品等，最好选用各种第三方滤镜进行操作（因为功能较强，抠图效果好），例如Knockout、Mask Pro、ReMask、蒙娜丽莎等；6.图像复杂，单种工具无法完成抠图，就要考虑多种工具和滤镜组合扣取。
他还让我们记住一些常用的快捷键如：比如，按住Ctrl Alt键拖动鼠标可以复制当前层或选区内容； 如果你最近拷贝了一张图片存在剪贴板里，Photoshop在新建文件(Ctrl N)的时候会以剪贴板中图片的尺寸作为新建图的默认大小。要略过这个特性而使用上一次的设置，在打开的时候按住Alt键(Ctrl Alt N)；如果创作一幅新作品，需要与一幅已打开的图片有一样的尺寸、解析度、格式的文件。只要选取“文件”→“New”，点Photoshop菜单栏的Windows选项，在弹出菜单的最下面一栏点击已开启的图片名称就ok（实在太方便了）；在使用自由变换工
具(Ctrl T)时按住Alt键(Ctrl Alt T)即可先复制原图层(在当前的选区)后在复制层上进行变换；Ctrl Shift T为再次执行上次的变换，Ctrl Alt Shift T为复制原图后再执行变换。使用“通过复制新建层(Ctrl J)”或“通过剪切新建层(Ctrl J)”命令可以在一步之间完成拷贝到粘贴和剪切到粘贴的工作；通过复制(剪切)新建层命令粘贴时仍会放在它们原来的地方，然而通过拷贝(剪切)再粘贴，就会贴到图片(或选区)的中心；若要直接复制图像而不希望出现命名对话框，可先按住Alt键，再执行“图像”→“副本”命令；Photoshop的剪贴板也很好用，但你更希望直接使用Windows系统剪贴板，直接处理从屏幕上截取的图像。好的，按下Ctrl＋K，在弹出的面板上将“输出到剪贴板”点中吧！
老师讲解的蒙板是将不同灰度色值转化为不同的透明度，并作用到它所在的图层，使图层不同部位透明度产生相应的变化。黑色为完全透明，白色为完全不透明。这些优点：1.修改方便，不会因为使用橡皮擦或剪切删除而造成不可返回的遗憾；2.可运用不同滤镜，以产生一些意想不到的特效；3.任何一张灰度图都可用来用为蒙板。以及主要的作用：1.用来扣图；2.做图的边缘淡化效果；3.图层间的溶合；在蒙板上应用不同的滤镜，便会使淡化的边缘出现不同的效果。在蒙板和图层之间的空处有一个链接符号，默认是链接着的，点击可解开蒙板与图层的链接。此时如果移动图层或蒙板，只会移动你选择的相应图层或蒙板，这点与图层间的链接是一回事。扣比较复杂的图，比喻人的头发，植物的枝叶等时，可将图片转为CMYK或LAB等不同颜色模式，找出一个对比最强，边缘轮廓最清晰的通道，调整其色阶，然后应用到蒙板，再作进一步修整。这些东西不仅仅教会了我们东西，更加的让我的态度得到了端正。老师说态度很重要，没有了端正的态度如何能用自己的心将自己的灵感融入到自己的作品中去，一个良好的态度是一个好的开端，同时也是自己能在做作品的时候用自己灵感浇筑眼下的作品。
这是老师的作品让我们网站页面的设计和图形视觉的认识有了一个全新的了解，一张图片有好的颜色和文字的合理设计才会让被人认同你的作品，所以这一周的ps实训使我对PS有了全新的认识。而真正的知识是理解和认知，而不是那些琐碎的篇幅。
第二周的时候这一周老师给我们讲了当前最流行的网页布局的方法Div+css，老师也讲了层布局与表格布局的区别，他们都是网页布局的方式，一个便于以后的维护、一个便于制作他们各有好处，需要设计人员在制作时自己来取舍的，并且还有一些设计技巧：
1、灵活运用样式
熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准，在网页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。
2、要让Windows（特别是95/NT）使用定制的显示器 匹配曲线，只需要如下操作：
（1）在开始菜单的“启动”中删除“Adobe Gamma Loader”。
（2）确定ICM曲线的路径/名称（基本上是处在C:WinNTSystem32Color中）。
（3）运行RegEdit，找到如下项目：
HKEY_LOCAL_MACHINE>Software>Adobe>Color>Monitor>Monitor0
（4）创建一个新的项，叫做“Monitor Profile”
（5）在这个显示器曲线的项中输入步骤2中的路径/名称。
注意：在设置了这个曲线后，由于Adobe Gamma已经重新配置了Adobe Gamma Loader，因此不要再运行它。
3、同时链接到两个网页我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。
4、不给文件起中文名称
大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。
5、要创建网络安全颜色，须确保色彩的R、G和B元素都是十六进制数的33或十进制的51的倍数，任何以下的值都是可接受的：00 (0)、33 (51)、66 (102)、 99 (153)、CC (204)、FF (255)。
6、巧妙隐藏标签
如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应的元素标签，以便于我们选择不可见元素。但这并不全是件好事，比我们在一个有很多层的页面中的第一行便插入一个表格，就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行，虽然在浏览时并不影
【UI设计报告】相关文章：
《ui un》优秀教学设计07-18
关于《ai ei ui》教学设计07-18
《ai ei ui 》精品教学设计06-06
《ai ei ui特好》教学设计06-06
ai ei ui 教学反思07-08
《ai ei ui》教学反思08-18
网页设计实习报告04-26
网页设计实习报告04-26
网页设计实习报告04-26