UI设计基础知识PPT文档格式.pptx

UI设计基础知识PPT文档格式.pptx

《UI设计基础知识PPT文档格式.pptx》由会员分享，可在线阅读，更多相关《UI设计基础知识PPT文档格式.pptx（83页珍藏版）》请在冰豆网上搜索。

,完善可用性的循环研究、用户体验回馈、测试回馈，UI人员把可行性建议进行完善。

1.界面构成要素,互联网与传统媒体最大的不同就在于除文字和图像以,外，还包含声音、视频和画等新兴多媒体元素，增加,了网页界面动性。

UI设计的界面布局,文字元素作为网站内容传达的主体，有着其他任何元素无法取代的重要作用。

首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。

网页中的文字主要包括标题、信息、文字链接等形式。

文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、,字体、颜色和排布对页面整体设计影响极大。

以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活,泼，分类条例清晰，不会给人单调感觉。

网页中常用的图形格式包括JPG、GIF和BMP。

图形元素包括标题、背景、主图、链接图标四种。

图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以,生动直观、形象地表现设计主题。

以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强,生动和形象性。

主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题。

主图是整个网页的视觉中心，可以为单调的文字信息增强活力，能给人强烈的视觉信息。

网页构成中的多媒体元素主要包括音频、视频和动画。

这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站与浏览者之间的互动交流。

2.界面布局,网页设计源于平面设计但又与平面设计有所区别不同，,相同的是在设计中多运用平面构成的基本原理，不同的,是它的大小比较固定，传载的媒体只限于电子显示器，,这样就为设计者提出了更为苛刻的要求。

UI设计的界面布局,电脑显示器,手机显示器,平面的视觉影响力上强下弱，左强右弱，上部和中上部被称为“最佳视域”，在网页设,计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。

在电脑上对画,面进行分割，确定好在什么地方布置什么栏目、大小等。

粗略布,局,使色彩，LOGO，,导航条，内容图片等一一实现。

布局细,化,在网页设计中,同样离不开平面设计中最基本的点、线、面的运用。

点线面,的运用,UI设计的色彩搭配,色彩的基础知识,冷暖色,互补色、对比色、类似色和临近色,色彩与心理情感,一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是件很,酷的事情。

色彩有冷暖色之分，冷暖色的巧妙运用可以让网站产生意想不到的效果。

色彩与人的心理感觉和情绪也有一定的关系，一般情况下，各种色彩给人的感,觉是：

红色代表热情、活泼、热闹、温暖、幸福、吉祥；

橙色代表光明、华丽、,兴奋、甜蜜、快乐；

黄色代表明朗、愉快、高贵、希望；

绿色代表新鲜、平静、,和平、柔和、安逸、青春；

蓝色代表深远、永恒、沉静、理智、诚实、寒冷；

紫色代表优雅、高贵、魅力、自傲；

白色代表纯洁、纯真、朴素、神圣、明快；

灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞；

黑色代表崇高、坚实、,严肃、刚健、粗莽。

除了考虑界面设计本身的特点外，还要遵循一定的艺术规律，从而设计出,色彩鲜明、性格独特的网站。

色彩搭配要注意的问题,通过调整色彩的饱和度和透,明度产生变化，使网站避免单调产生。

使用单,色,例如绿色和蓝色，红色和黄,色就互为邻近色。

采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。

使用领,近色,产生强烈的视觉效果，能够,使网站特色鲜明、重点突出。

以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。

使用对,比色,黑色是一种特殊的颜色，往,往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。

黑色的,使用,一般采用素淡清雅的色彩，,避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。

背景色,的使用,一般控制在三种色彩以内，,通过调整色彩的各种属性来产生变化。

色彩的,数量,网站UI网站UI发展简史,设计细节的发展,网站UI未来趋势和走向,网站设计注意事项,网站UI发展简史,1991年，全球第一个网站诞生，网址为http:

/info.cern.ch。

早期的网页完全由文本构,成，只有一些小图片和毫无布,局科研的标题与段落。

接下来,出现了表格布局，然后是Flash，最后是基于CSS的网页设计。

到目前为止，我们可以把,网站建设的发展分为4个阶段。

这四个阶段分别代表了互联网,技术的发展历程。

第一纯静态代网站,第二数据库代管理,第三智能建代站,智能可视化建站,第四代,设计细节的发展,早期的网页完全由文本构成，接下来出现了表格布局，图文并,茂的纯静态网站，然后是加入了Flash、视频、音频等多媒体动画的网站，最后是基于web2.0技术，用CSS设计出更具视觉冲击力，但,加载速度更快的网站。

在这期间，文字、链接、图片、按钮、动画以及背景都发生了,极大变化。

单一英文字体,各个国家的文字,文字各种文字,的上百种的字体,单一的文字链接,图文混排和按钮链,接,链接flash动画,链接,图片,静态的图片,GIF动态图片,按钮,文字按钮,图标按钮,动态按钮,文字、图片GIF动画,FLASH动画,动画3D动画和,视频,背景,颜色背景,图片背景,动画背景,未来趋势和走向网站UI设计风格从清新到复古，插画手绘到拟真设计，无奇不有。

无论是版面版式，还是设计元素，用标新立异这个词形容绝不为过。

web2.0技术的支持，使得网站程序更加人性化，而设计上也更加追求感官化，网站UI设计将向以下的设计走向持续发展。

技术上1、响应式网页设计2、全屏网页设计3、滚动设计,版面设计1、欧美简洁风（扁平化）2、韩国绚丽风3、中国风,响应式网页设计,能够适应不同尺寸显示屏的网页是现在的潮流，是未来很长一段时间的设计趋势，那,么响应式网页设计就是来解决这个问题的。

这种特别的开发方式能保证网页适应不同的分,辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视,觉效果。

全屏网页设计,利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可以很好的吸引,观者注意。

主要以图片展示为主，少量文字加上精美的排版使之变得更加吸引人。

这个样,子的网站多用于摄影团队或个人作品集展示，虽然简单养眼，但是承载信息有限，公司部,门的主页很少见这样的设计。

滚动设计,滚动设计又可分为视差滚动设计、滚动侦测设计和无限滚动模式（瀑布流）三种。

视差滚动是让多层背景以不同速度滚动，以形成一种3D立体的运动效果，给观者带来,一种独特的视觉感受。

鼠标滚轮的流畅体验，让用户在观看此类网站时有一种控制感，简,单来说这是有响应的交互体验。

滚动侦测网页设计利用CSS将导航栏固定在网页顶部、侧面或底部，并将版面内容按照导航顺序垂直或横向排布，使得用户点击相应导航tab时页面自动滑到相应页面，而点击内容，导航也将随之改变。

这样的网页设计页面基本不会跳转，每一个tab所指向的页面内容,也基本一屏显示完整，所以在页面内容的呈现上会有所局限。

无限滚动模式（瀑布流）大大减少了分页的数量，有一些网站内容很多，但他们并没,有简单分页，而是将那些内容垂直排布，当用户纵向滚动时，内容会不断更新好像永无止,境。

对于这类信息量大，每日更新数据块的网站是比较不错的方案。

欧美简洁风（扁平化）,它提供了一种新的设计思维，设计仅仅采用二维元素，可以说是去繁从简的设计美学,，去掉所有装饰性的设计阴影、斜面、突起、渐变，拒绝特效，从图片框到按钮，再,到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效，注重排版和色彩，可以说是,对之前所推崇的拟物化设计的颠覆。

韩国绚丽风,韩国的商业性网站很具代表性，色彩丰富独特，但又不杂乱。

韩国设计者运用色彩非常得当，给人的感觉要不是淡雅迷人，要不就是另类大胆。

网,站的各个栏位在表达不同主题时，比较喜欢采用不同的色调。

灰色是他们最倾向使用的颜,色，因为灰色虽然显得比较中庸，但能和任何色彩搭配，极大地改变色彩的韵味，使对比,更强烈。

其正文文字也大都采用灰色，局部则喜欢用色彩绚丽的色带或色块来区分。

中国风,中国风格的网站，因其气势磅礴，高贵典雅，独具韵味而受到很多人的喜爱，近年来,被大量应用于传统文化、历史人文景点、地产项目等网站中。

数千年的文明传承下来，中国人有其独特的构图审美。

对称美是中国传统美学中重要,的一部分，网页由于其特殊性，一般用到最多的是左右对称，再加上文字的竖排以及国画,留白的运用，使得整个画面有了平衡、和谐、庄重之美。

网站设计的注意事项,网站设计的尺寸,Web命名规范,网页制作规范,Web排版,网站设计尺寸,目前比较流行的电脑显示器的尺寸为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，文件名称统一用小写的英文字母、数字和下划线的组合，尽量按单词的英语翻译为名称。

例如：

aboutus（关于我们）。

多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。

news_01.hm。

注意，数字位数与文件个数成正比，不够的用0补齐。

例如共有200条新闻，其中第18条命名为news_018.htm,图片的命名规范：

名称分为头尾两两部分，用下划线隔开。

头部分表示此图片的大类,性质。

涉及到交互行为的元素命名:

凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:

鼠标悬停:

hover，点击：

click，已浏览：

visited。

如:

搜索按钮:

btn-search、btn-search-hover、btn-search-visited,网页制作规范,在图上呈现,文字,形象设计规范：

使用标志（logo）标准色做为主体色，采用web安全色之内的色彩。

标准字体：

原则上定义两种，一种中文字体，一种英文字体（不包括文本内容字体）,内容编辑规范：

内容必须遵守我国计算机信息网络国际联网安全保护管理办法的,规定。

标题力求简短、醒目、新颖、吸引人。

正文杜绝错字、别字和自造字，简体版中不,得夹杂繁体字，译名要按我国规范。

新技术使用规范：

兼容浏览器，保证下载速度，照顾最多数的用户。

导航规范：

简单、清晰，建议不超过3层的链接。

导航的文字要简明扼要。

连续性页面,应加入上一页，下一页按钮，页面过长应在底部加上gotop按钮