1、,完善 可用性的循环研究、用户体验回馈、测试回馈，UI人员把可行性建议进行完善。,1.界面构成要素,互联网与传统媒体最大的不同就在于除文字和图像以,外，还包含声音、视频和画等新兴多媒体元素，增加,了网页界面动性。,UI设计的界面布局,文字元素作为网站内容传达的主体，有着其他任何元素无法取代的重要作用。首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。,网页中的文字主要包括标题、信息、文字链接等形式。,文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、,字体、颜色和排布对页面整体设计影响极大。,以文字排布为主的网页界面，只要文字排布得当，版面同样可
2、以生动活,泼，分类条例清晰，不会给人单调感觉。,网页中常用的图形格式包括JPG、GIF和BMP。,图形元素包括标题、背景、主图、链接图标四种。,图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以,生动直观、形象地表现设计主题。,以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强,生动和形象性。,主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题。主图是整个网页的视觉中心，可以为单调的文字信息增强活力，能给人强烈的视觉信息。,网页构成中的多媒体元素主要包括音频、视频和动画。,这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提
3、高网站与浏览者之间的互动交流。,2.界面布局,网页设计源于平面设计但又与平面设计有所区别不同，,相同的是在设计中多运用平面构成的基本原理，不同的,是它的大小比较固定，传载的媒体只限于电子显示器，,这样就为设计者提出了更为苛刻的要求。,UI设计的界面布局,电脑显示器,手机显示器,平面的视觉影响力上强下弱，左强右弱，上部和中上部被称为“最佳视域”，在网页设,计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。,在电脑上对画,面进行分割，确定好在什么地方布置什么栏目、大小等。,粗略布,局,使色彩，LOGO，,导航条，内容图片等一一实现。,布局细,化,在网页设计中,同样离不开平面设计中最
4、基本的点、线、面的运用。,点线面,的运用,UI设计的色彩搭配,色彩的基础知识,冷暖色,互补色、对比色、类似色和临近色,色彩与心理情感,一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是件很,酷的事情。,色彩有冷暖色之分，冷暖色的巧妙运用可以让网站产生意想不到的效果。,色彩与人的心理感觉和情绪也有一定的关系，一般情况下，各种色彩给人的感,觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥；橙色代表光明、华丽、,兴奋、甜蜜、快乐；黄色代表明朗、愉快、高贵、希望；绿色代表新鲜、平静、,和平、柔和、安逸、青春；蓝色代表深远、永恒、沉静、理智、诚实、寒冷；,紫色代表优雅、高贵、魅力、自傲；白色代
5、表纯洁、纯真、朴素、神圣、明快；,灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞；黑色代表崇高、坚实、,严肃、刚健、粗莽。,除了考虑界面设计本身的特点外，还要遵循一定的艺术规律，从而设计出,色彩鲜明、性格独特的网站。,色彩搭配要注意的问题,通过调整色彩的饱和度和透,明度产生变化，使网站避免单调产生。,使用单,色,例如绿色和蓝色，红色和黄,色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。,使用领,近色,产生强烈的视觉效果，能够,使网站特色鲜明、重点突出。以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。,使用对,比色,黑色是一种特殊的颜色，往,往产生
6、很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。,黑色的,使用,一般采用素淡清雅的色彩，,避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。,背景色,的使用,一般控制在三种色彩以内，,通过调整色彩的各种属性来产生变化。,色彩的,数量,网站UI网站UI发展简史,设计细节的发展,网站UI未来趋势和走向,网站设计注意事项,网站UI发展简史,1991年，全球第一个网站诞生，网址为http:/info.cern.ch。,早期的网页完全由文本构,成，只有一些小图片和毫无布,局科研的标题与段落。接下来,出现了表格布局，然后是Flash，最后是基于CSS的
7、网页设计。,到目前为止，我们可以把,网站建设的发展分为4个阶段。,这四个阶段分别代表了互联网,技术的发展历程。,第一 纯静态代 网站,第二 数据库代 管理,第三 智能建代 站,智能可视化建站,第四代,设计细节的发展,早期的网页完全由文本构成，接下来出现了表格布局，图文并,茂的纯静态网站，然后是加入了Flash、视频、音频等多媒体动画的网站，最后是基于web2.0技术，用CSS设计出更具视觉冲击力，但,加载速度更快的网站。,在这期间，文字、链接、图片、按钮、动画以及背景都发生了,极大变化。,单一英文字体,各个国家的文字,文字各种文字,的上百种的字体,单一的文字链接,图文混排和按钮链,接,链接fl
8、ash动画,链接,图片,静态的图片,GIF动态图片,按钮,文字按钮,图标按钮,动态按钮,文字、图片GIF动画,FLASH动画,动画3D动画和,视频,背景,颜色背景,图片背景,动画背景,未来趋势和走向网站UI设计风格从清新到复古，插画手绘到拟真设计，无奇不有。无论是版面版式，还是设计元素，用标新立异这个词形容绝不为过。web2.0技术的支持，使得网站程序更加人性化，而设计上也更加追求感官化，网站UI设计将向以下的设计走向持续发展。,技术上1、响应式网页设计2、全屏网页设计3、滚动设计,版面设计1、欧美简洁风（扁平化）2、韩国绚丽风3、中国风,响应式网页设计,能够适应不同尺寸显示屏的网页是现在的潮
9、流，是未来很长一段时间的设计趋势，那,么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分,辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视,觉效果。,全屏网页设计,利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可以很好的吸引,观者注意。主要以图片展示为主，少量文字加上精美的排版使之变得更加吸引人。这个样,子的网站多用于摄影团队或个人作品集展示，虽然简单养眼，但是承载信息有限，公司部,门的主页很少见这样的设计。,滚动设计,滚动设计又可分为视差滚动设计、滚动侦测设计和无限滚动模式（瀑布流）三种。,视差滚动是让多层背景以不同速度
10、滚动，以形成一种3D立体的运动效果，给观者带来,一种独特的视觉感受。鼠标滚轮的流畅体验，让用户在观看此类网站时有一种控制感，简,单来说这是有响应的交互体验。,滚动侦测网页设计利用CSS将导航栏固定在网页顶部、侧面或底部，并将版面内容按照导航顺序垂直或横向排布，使得用户点击相应导航tab时页面自动滑到相应页面，而点击内容，导航也将随之改变。这样的网页设计页面基本不会跳转，每一个tab所指向的页面内容,也基本一屏显示完整，所以在页面内容的呈现上会有所局限。,无限滚动模式（瀑布流）大大减少了分页的数量，有一些网站内容很多，但他们并没,有简单分页，而是将那些内容垂直排布，当用户纵向滚动时，内容会不断更
11、新好像永无止,境。对于这类信息量大，每日更新数据块的网站是比较不错的方案。,欧美简洁风（扁平化）,它提供了一种新的设计思维，设计仅仅采用二维元素，可以说是去繁从简的设计美学,，去掉所有装饰性的设计阴影、斜面、突起、渐变，拒绝特效，从图片框到按钮，再,到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效，注重排版和色彩，可以说是,对之前所推崇的拟物化设计的颠覆。,韩国绚丽风,韩国的商业性网站很具代表性，色彩丰富独特，但又不杂乱。,韩国设计者运用色彩非常得当，给人的感觉要不是淡雅迷人，要不就是另类大胆。网,站的各个栏位在表达不同主题时，比较喜欢采用不同的色调。灰色是他们最倾向使用的颜,色，因为灰色
12、虽然显得比较中庸，但能和任何色彩搭配，极大地改变色彩的韵味，使对比,更强烈。其正文文字也大都采用灰色，局部则喜欢用色彩绚丽的色带或色块来区分。,中国风,中国风格的网站，因其气势磅礴，高贵典雅，独具韵味而受到很多人的喜爱，近年来,被大量应用于传统文化、历史人文景点、地产项目等网站中。,数千年的文明传承下来，中国人有其独特的构图审美。对称美是中国传统美学中重要,的一部分，网页由于其特殊性，一般用到最多的是左右对称，再加上文字的竖排以及国画,留白的运用，使得整个画面有了平衡、和谐、庄重之美。,网站设计的注意事项,网站设计的尺寸,Web命名规范,网页制作规范,Web排版,网站设计尺寸,目前比较流行的电
13、脑显示器的尺寸为800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024、1366*768、1680*1050、1920*1080，而目前主流设计网站页面的宽度一般为950、1002、1190、1260、1900，设计宽度始终要比显示器的实际大小窄20像素，而页面的高度则可以根据内容的多少而进行调整，这为的是给右侧的滚动条留有一定的空间。,在图上呈现,文字,Web命名规范,文件命名的原则：以最少的字母达到最容易理解的意义。,一般文件及目录命名规范：每一个目录中应该包含一个缺省的html文件，文件名统一用index.htm，文件
14、名称统一用小写的英文字母、数字和下划线的组合，尽量按单词的英语翻译为名称。例如：aboutus（关于我们）。多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。news_01.hm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm,图片的命名规范：名称分为头尾两两部分，用下划线隔开。头部分表示此图片的大类,性质。,涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:hover，点击：click，已浏览：visited。如:搜索按钮:btn-search、
15、btn-search-hover、btn-search-visited,网页制作规范,在图上呈现,文字,形象设计规范：使用标志（logo）标准色做为主体色，采用web安全色之内的色彩。,标准字体：原则上定义两种，一种中文字体，一种英文字体（不包括文本内容字体）,内容编辑规范：内容必须遵守我国计算机信息网络国际联网安全保护管理办法的,规定。标题力求简短、醒目、新颖、吸引人。正文杜绝错字、别字和自造字，简体版中不,得夹杂繁体字，译名要按我国规范。,新技术使用规范：兼容浏览器，保证下载速度，照顾最多数的用户。,导航规范：简单、清晰，建议不超过3层的链接。导航的文字要简明扼要。连续性页面,应加入上一页，下一页按钮，页面过长应在底部加上go top按钮
