UI设计基础知识课件

UI设计基础知识课件1目录

UI简介

UI设计原则

UI设计的工作流程

UI设计的界面布局

UI设计的色彩搭配

网站UI

手机UI

软件UI目录UI简介UI设计原则UI设2UI简介

UI即User

Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

UI设计发展至今可分为：PC端UI（网站和软件）、移动端UI以及游戏UI。3大领域看似相差不多，但就偏重点、设计思路、制作规则等实际操作上其实是大相径庭的。我们将着重介绍网站UI、软件UI和手机UI。UI简介 UI即UserInterface(用户界面)的简31、个性化的视觉程现2、便捷的交互体验3、统一的整体风格4、精致的细节诉求UI设计原则1、个性化的视觉程现UI设计原则4UI设计的工作流程

分析•

了解产品

的市场定

位、产品

定义、客

户群体、

运营方式

等，提出

可用性设

计建议。

架构•

制定交互

方式、操

作与跳转

流程、结

构、布局、

信息和其

他元素。

界面•

对前面所

有工作加

以设计，

色调、风

格、界面、

窗口、图

标、皮肤

的表现是

最关键的。

输出•

配合好开

发人员完

成相关的

界面结合。

完善•

可用性的

循环研究、

用户体验

回馈、测

试回馈，

UI人员把

可行性建

议进行完

善。UI设计的工作流程 分析 架构 界面 输出 完善51.

界面构成要素互联网与传统媒体最大的不同就在于除文字和图像以外，还包含声音、视频和画等新兴多媒体元素，增加了网页界面动性。UI设计的界面布局1.界面构成要素互联网与传统媒体最大的不同就在于除文字和图6UI设计基础知识课件7

文字元素作为网站内容传达的主体，有着其他任何元素无法取代的重要作用。首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。网页中的文字主要包括标题、信息、文字链接等形式。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、字体、颜色和排布对页面整体设计影响极大。以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活泼，分类条例清晰，不会给人单调感觉。 文字元素作为网站内容传达的主体，有着其他任何元素无法取代的8UI设计基础知识课件9网页中常用的图形格式包括JPG、GIF和BMP。图形元素包括标题、背景、主图、链接图标四种。图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题。以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强生动和形象性。

主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题。主图是整个网页的视觉中心，可以为单调的文字信息增强活力，能给人强烈的视觉信息。网页中常用的图形格式包括JPG、GIF和BMP。图形元素包括10网页构成中的多媒体元素主要包括音频、视频和动画。

这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站与浏览者之间的互动交流。网页构成中的多媒体元素主要包括音频、视频和动画。 这些是界面112.

界面布局网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器，这样就为设计者提出了更为苛刻的要求。UI设计的界面布局2.界面布局网页设计源于平面设计但又与平面设计有所区别不同12电脑显示器电脑显示器13手机显示器手机显示器14UI设计基础知识课件15平面的视觉影响力上强下弱，左强右弱，上部和中上部被称为“最佳视域”，在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。平面的视觉影响力上强下弱，左强右弱，上部和中上部被称为“最佳16在电脑上对画面进行分割，确定好在什么地方布置什么栏目、大小等。粗略布局使色彩，LOGO，导航条，内容图片等一一实现。布局细化在网页设计中同样离不开平面设计中最基本的点、线、面的运用。点线面的运用在电脑上对画面进行分割，粗略布局使色彩，LOGO，导航条，内17UI设计的色彩搭配UI设计的色彩搭配18色彩的基础知识色彩的基础知识19冷暖色冷暖色20互补色、对比色、类似色和临近色互补色、对比色、类似色和临近色21色彩与心理情感色彩与心理情感22一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是件很酷的事情。色彩有冷暖色之分，冷暖色的巧妙运用可以让网站产生意想不到的效果。色彩与人的心理感觉和情绪也有一定的关系，一般情况下，各种色彩给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥；橙色代表光明、华丽、兴奋、甜蜜、快乐；黄色代表明朗、愉快、高贵、希望；绿色代表新鲜、平静、和平、柔和、安逸、青春；蓝色代表深远、永恒、沉静、理智、诚实、寒冷；紫色代表优雅、高贵、魅力、自傲；白色代表纯洁、纯真、朴素、神圣、明快；灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞；黑色代表崇高、坚实、严肃、刚健、粗莽。除了考虑界面设计本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是23色彩搭配要注意的问题通过调整色彩的饱和度和透明度产生变化，使网站避免单调产生。使用单色例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。使用领近色产生强烈的视觉效果，能够使网站特色鲜明、重点突出。以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。使用对比色黑色是一种特殊的颜色，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。黑色的使用一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。背景色的使用一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。色彩的数量色彩搭配要注意的问题通过调整色彩的饱和度和透明度产生变化，使24网站UI

网站UI

发展简

史设计细节的发

展网站UI

未来趋

势和走

向网站设计注意

事项网站UI设计细网站UI网站设25网站UI发展简史

1991年，全球第一个网站诞生，网址为http://info.cern.ch。早期的网页完全由文本构成，只有一些小图片和毫无布局科研的标题与段落。接下来出现了表格布局，然后是Flash，最后是基于CSS的网页设计。到目前为止，我们可以把网站建设的发展分为4个阶段。这四个阶段分别代表了互联网技术的发展历程。网站UI发展简史 1991年，全球第一个网站诞早期的网页完全26第一

纯静态

代

网站第二

数据库

代

管理第三

智能建

代

站智能可视化建

站第四

代第一纯静态第二数据库第三智能建智能可27设计细节的发展早期的网页完全由文本构成，接下来出现了表格布局，图文并茂的纯静态网站，然后是加入了Flash、视频、音频等多媒体动画的网站，最后是基于web2.0技术，用CSS设计出更具视觉冲击力，但加载速度更快的网站。在这期间，文字、链接、图片、按钮、动画以及背景都发生了极大变化。设计细节的发展早期的网页完全由文本构成，接下来出现了表格布局28单一英文字体各个国家的文字文字

各种文字的上百种的字体单一英文各个国家文字的上百种29单一的文字链接图文混排和按钮链接链接

flash动画链接单一的文图文混排接链接链接30图片静态的图片GIF动态图片图片静态的图片GIF动态图片31按钮文字按钮图标按钮动态按钮按钮文字按钮图标按钮动态按钮32文字、图片GIF动画FLASH动画动画

3D动画和视频文字、图FLASH动画动画视频33背景颜色背景图片背景动画背景背景颜色背景图片背景动画背景34

未来趋势和走向

网站UI设计风格从清新到复古，插画手绘到拟真设计，无奇不有。无论是版面版式，还是设计元素，用标新立异这个词形容绝不为过。web2.0技术的支持，使得网站程序更加人性化，而设计上也更加追求感官化，网站UI设计将向以下的设计走向持续发展。

技术上1、响应式网页设计2、全屏网页设计3、滚动设计

版面设计1、欧美简洁风（扁平化）2、韩国绚丽风3、中国风 未来趋势和走向 技术上 版面设计35响应式网页设计能够适应不同尺寸显示屏的网页是现在的潮流，是未来很长一段时间的设计趋势，那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视觉效果。响应式网页设计能够适应不同尺寸显示屏的网页是现在的潮流，是未36全屏网页设计利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可以很好的吸引观者注意。主要以图片展示为主，少量文字加上精美的排版使之变得更加吸引人。这个样子的网站多用于摄影团队或个人作品集展示，虽然简单养眼，但是承载信息有限，公司部门的主页很少见这样的设计。全屏网页设计利用精心挑选设计的漂亮背景，加上合理的页面布局，37滚动设计滚动设计又可分为视差滚动设计、滚动侦测设计和无限滚动模式（瀑布流）三种。视差滚动是让多层背景以不同速度滚动，以形成一种3D立体的运动效果，给观者带来一种独特的视觉感受。鼠标滚轮的流畅体验，让用户在观看此类网站时有一种控制感，简单来说这是有响应的交互体验。

滚动侦测网页设计利用CSS将导航栏固定在网页顶部、侧面或底部，并将版面内容按照导航顺序垂直或横向排布，使得用户点击相应导航tab时页面自动滑到相应页面，而点击内容，导航也将随之改变。这样的网页设计页面基本不会跳转，每一个tab所指向的页面内容也基本一屏显示完整，所以在页面内容的呈现上会有所局限。无限滚动模式（瀑布流）大大减少了分页的数量，有一些网站内容很多，但他们并没有简单分页，而是将那些内容垂直排布，当用户纵向滚动时，内容会不断更新好像永无止境。对于这类信息量大，每日更新数据块的网站是比较不错的方案。滚动设计滚动设计又可分为视差滚动设计、滚动侦测设计和无限滚动38欧美简洁风（扁平化）它提供了一种新的设计思维，设计仅仅采用二维元素，可以说是去繁从简的设计美学，去掉所有装饰性的设计——阴影、斜面、突起、渐变，拒绝特效，从图片框到按钮，再到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效，注重排版和色彩，可以说是对之前所推崇的拟物化设计的颠覆。欧美简洁风（扁平化）它提供了一种新的设计思维，设计仅仅采用二39韩国绚丽风韩国的商业性网站很具代表性，色彩丰富独特，但又不杂乱。韩国设计者运用色彩非常得当，给人的感觉要不是淡雅迷人，要不就是另类大胆。网站的各个栏位在表达不同主题时，比较喜欢采用不同的色调。灰色是他们最倾向使用的颜色，因为灰色虽然显得比较中庸，但能和任何色彩搭配，极大地改变色彩的韵味，使对比更强烈。其正文文字也大都采用灰色，局部则喜欢用色彩绚丽的色带或色块来区分。韩国绚丽风韩国的商业性网站很具代表性，色彩丰富独特，但又不杂40中国风中国风格的网站，因其气势磅礴，高贵典雅，独具韵味而受到很多人的喜爱，近年来被大量应用于传统文化、历史人文景点、地产项目等网站中。数千年的文明传承下来，中国人有其独特的构图审美。对称美是中国传统美学中重要的一部分，网页由于其特殊性，一般用到最多的是左右对称，再加上文字的竖排以及国画留白的运用，使得整个画面有了平衡、和谐、庄重之美。中国风中国风格的网站，因其气势磅礴，高贵典雅，独具韵味而受到41网站设计的注意事项网站设计的尺

寸Web命名规范网页制作规范Web排版网站设计的注意事项网站设计的尺Web命名规范网页制作规范We42网站设计尺寸

目前比较流行的电脑显示器的尺寸为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像素，而页面的高度则可以根据内容的多少而进行调整，这为的是给右侧的滚动条留有一定的空间。网站设计尺寸 目前比较流行的电脑显示器的尺寸为800*60043在图上呈现文字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在图上呈现文字Web命名规范文件命名的原则：以最少的字母达到44网页制作规范在图上呈现文字形象设计规范：使用标志（logo）标准色做为主体色，采用web安全色之内的色彩。标准字体：原则上定义两种，一种中文字体，一种英文字体（不包括文本内容字体）内容编辑规范：内容必须遵守我国《计算机信息网络国际联网安全保护管理办法》的规定。标题力求简短、醒目、新颖、吸引人。正文杜绝错字、别字和自造字，简体版中不得夹杂繁体字，译名要按我国规范。新技术使用规范

：兼容浏览器，保证下载速度，照顾最多数的用户。导航规范：简单、清晰，建议不超过3层的链接。导航的文字要简明扼要。连续性页面应加入上一页，下一页按钮，页面过长应在底部加上go

top按钮。网页制作规范在图上呈现文字形象设计规范：使用标志（logo）45•文字或者透明Web排版•标志是网站最重要

的部分之一，可使用

与主题色相反的颜色。在图上呈现

选择纯度

度较低的背景，文字

用较为突出的亮色。•链接是网站中不可

缺少的，做了链接的

文字应清晰，明了。•网页标题是网站的

指航标，要清晰、明

了，层次分明。

网页

链接网页标志网页标题网页文字•文字或者透明Web排版•标志是网站最重要在图上呈现•链接是46手机

UI

手机UI

发展简

史设计风格的发

展用户界面发展

趋势手机UI

手机UI

设计尺

寸设计规

范注意事

项手机UI设计风手机UI设计规47手机UI发展简史从1983年第一部手机诞生以来，从最初的“大哥大”到苹果多点触控用户界面，界面屏幕所占据手机的比例越来越大。在整个手机用户界面中，容括屏幕图像、触控按键、文字等无形界面和按钮、屏幕等有形界面。

手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计，手机UI设计一直被业界称为产品的“脸面”，好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点，界面也从狭义的图形界面发展到广义的交互界面设计。下面，我们首先从智能手机系统的发展历史开始说起，梳理一下交互设计的发展：手机UI发展简史从1983年第一部手机诞生以来，从最初的“大48设计风格的发展

在苹果一统高端智能手机市场的时期，乔布斯曾带领苹果的设计师团队打造了一个拟真化UI体验的传奇，而随着乔纳森·

艾维操刀iOS

7，拟真化被苹果抛弃，扁平化设计成为2013年移动应用平台设计的潮流。设计风格的发展 在苹果一统高端智能手机市场的时期，乔布斯曾带49拟真

扁

的设格。它始于2007年的乔布斯的手机革命，据苹果公司内部人士透露，也正是乔布斯把麻布材质、木质书架、实体书效果等诸多拟真元素带到了设计当中。苹果公司先是将这种设计风格其用到iOS的用户界面设计上，然后扩展到了OSX

Mountain

Lion桌面系统等其他平台。在2011年乔布斯逝世后，苹果动荡不断，在原软件设计主管斯科特·

福斯特离职后，设计师艾维被任命操刀iOS

7设计，他主张简洁的扁平风格，拟真化设计逐渐淡出苹果UI界面。拟真（

个拟真化UI体验的

）是

操

多

一种人们常在

维

（Flat7

设计，化被苹

人认为

拟真与扁平化的发展历史

在苹果一统高端智能手机市场的时期，乔布斯曾带领苹果

平化

计师团队打造了一

Skeuomorphism

传奇，而随着乔纳森·

艾

扁平化

刀iOS

）

，拟真并不像许

果抛弃，

的，来源与德国公司Metro

AG商标纠纷，更名为ModernUI，现今一般冠名“扁平化”）。在20世纪初，Hochschule

für

Gestaltung俗称包豪斯提出的“为建筑而生的设计学校”的主张，把工艺技术提高到与视觉艺术平等的位置，从而削弱传统的等级划分的工业设计的理念事实上就是扁平设计的开始。后来历经简约（Simple）设计时代（20世纪初期）、波普（POP）设计时代（20世纪50年代）、极简主义（Minimal

Art）设计时代20。扁平设计一直在发展、变化。拟真50拟真与扁平化的界面特点和优缺点

拟真特点界面：模拟真实物体的材质、质感、细节、光亮等。交互：人机交互也拟真化，模拟现实中的交互方式。优点：界面令用户感到熟悉，而且传达了丰富的人性化的感情。缺点：过度追求设计会造成不必要的信息误解和过载负担，影响用户体验。增加开发者的负担，与日趋简洁的硬件设备风格背道而驰。

扁平化特点界面：去掉所有装饰性的设计——阴影、斜面、突起、渐变，拒绝特效，从图片框到按钮，再到导航栏都极力避免羽化、阴影这样的特效，注重排版和色彩。交互：去掉了冗余的界面和交互，而使用更直接的设计完成任务。优点：界面和交互简约，信息更直观，信息量更大。缺点：新用户使用需先学习与适应，且传达的感情不丰富。拟真与扁平化的界面特点和优缺点 拟真 扁平化51拟真与扁平化的设计要点拟真扁平化1、可用性2、熟悉3、美学/怀旧1、几何拟物2、复色方案3、矩阵语言拟真与扁平化的设计要点拟真扁平化1、可用性1、几何拟物52中国风—UI设计的另一走向

随着2006年“中国元素国际广告创意大赛”的创办，中国风广告在国内外广告界引起了极大反响，第一届就收到来自世界40多个国家地区的作品，5000多份。

在2007年和2008年结合社会时事发起了分别以“中国元素-奥运精神”和“盛世中国红”为主题发起了第二届和第三届“中国元素国际广告创意大赛”。

2009年，在

以“中国力量！”为主题的第四届大赛也已经成功举办。

伴随着大赛的开办和进行，在中国广告界引领了一股风潮，包括长城奖、艾菲广告奖在内的很多其他广告节的参赛作品和获奖作品中运用"中国元素"的比例越来越大，中国风广告也得到了消费者的认同和欢迎。随着这几年古典文化越来越多的出现在我们日常生活中，受此影响，手机Ui也将会慢慢的加入进来，也算是一场中国古典文化的文艺复兴吧！中国风—UI设计的另一走向 随着2006年“中国元素国际广告53UI设计基础知识课件54UI设计基础知识课件55UI设计基础知识课件56UI设计基础知识课件57用户界面发展趋势扁平化拟真化中国风用户界面发展趋势扁平化拟真化中国风58手机UI设计尺寸

移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800,

480x854,

540x960,

720x1280,

1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960,

640x1136,

750x1334,

1242x2208。手机尺寸在最新的规范网址中，官方为我们提供了有mdpi,hdpi,xhdpi

xxdhpi,xxxdhpi几种分辨率的机器。手机UI设计尺寸 移动端设备屏幕尺寸非常多，碎片化严重。尤其59各种分辨率从横向上来看：mdpi：

360左右Hhdpi：480左右(1.5倍)xhdpi：720左右(2倍)xxdhpi：1080左右(3倍)xxxdhpi：1440左右(4倍)

这里需要说明一点的是：设备的尺寸和分辨率没有绝对的关系，不是说屏幕大的手机就一定更清晰。我们再来看一组数据:各种分辨率从横向上来看：mdpi：360左右Hhdpi：460320*480属于mdpi，480*800、480*854、540*960属于hdpi，720*1280属于xhdpi，1080*1920属于xxhdpi。对于设计师，还需要关注屏幕长宽比，才知道以怎样的尺寸和比例来设定画布。请看六种分辨等比例缩放图：320*480属于mdpi，480*800、480*854、61注意事项光线明暗细

微的把握学会在图片上呈现文字黑白优先保持干净简洁做好强调和

弱化增加空白空

间只用适合的

字体注意事项光线明暗细黑白优先保增加空白空62设计规范整体性、一致性个性化视觉元素的规范设计规范整体性、一致性个性化视觉元素的规范63软件UI软件UI

软件UI发

展简史

未来趋势

和走向设计细节注意事项设计技巧

设计原则软件UI软件UI 未来趋势设计技巧64软件UI发展简史2000年传入国内，国内最早专业从事UI的公司还是我们的民族软件——金山，据说在2000年已成立人机界面组，只有2个人。2001年2月出版的《软件创新之路》中文版，在技术专著角度强调了交互与界面的重要性，为UI概念被广泛认可做好了铺垫。

2001年到2003年之间，国内大小公司相继设立UI职位。因为当时从事web

design非常不景气，整体水平低下，市场环境糟糕。2003年随着ChinaUI论坛的上线，此概念开始在数字设计领域声名鹊起。同年5月，由金山转会腾讯的唐沐主导了QQ发展史上革命性的界面升级。耳目一新的QQ界面给粉丝们带来了极大惊喜，在外观和人性化方面做了较大改善。从此各大IT公司开始重视UI，中国的PC端UI从此开始正式走上舞台。下面，我们看一下windows的发展史，来了解PC界面设计的发展变化。软件UI发展简史2000年传入国内，国内最早专业从事UI的公65Windows

1.0

的UI还完全是MS-DOS的风格。1985年，微软发布了Windows

1.0。这款系统虽然使用了图形操作界面，不过看上去也只不过是给MS-DOS加了一张皮。Windows

1.0允许使用鼠标，可以在程序之间进行切换，可以调整窗口大小和最小化窗口。这套系统在当时非常流行。Windows1.0的UI还完全是MS-DOS的风格。166Windows

2.0发布于1987年。为我们带来了第一版Microsoft

Word和Excel软件。这个还是没有脱离dos，已经初具规模。Windows2.0发布于1987年。为我们带来了第一版M671991年的Windows

3.1让Windows成为IBM-PC的标配系统，这也是最后一款看上去还残存MS-DOS风格的Windows系统。1991年的Windows3.1让Windows成为IBM68Windows

95让1995年成为PC历史上的一个里程碑。这套系统完全洗掉了MS-DOS的痕迹，整个界面焕然一新，带来了在当时犹如从科幻电影走出来的UI；IE浏览器，回收站，还有开始菜单这些元素成为Windows的经典标志。Windows

95也成为至今为止所有Windows系统的界面蓝本。Windows95让1995年成为PC历史上的一个里程碑。69Windows

98界面设计看不出有什么大的改动只是功能上稍微有些改进。Windows98界面设计看不出有什么大的改动只是功能上稍702000年发布的Windows

ME基本上也是Windows

98的加强版，具备一些没有很大突破性的新功能，这套系统的销量并不好。因为大家都知道不久之后就会有Windows

XP。2000年发布的WindowsME基本上也是Windows71Windows

XP标志性的桌面。WindowsXP标志性的桌面。72Windows

Vista的半透明UI是这套系统最大的价值。2006年微软发布了Windows

Vista，这套系统最终并没有流行起来，人们宁愿选择硬件要求不那么高的Windows

XP。Vista的真正价值可能是它的界面风格。WindowsVista的半透明UI是这套系统最大的价值。73Windows

8将保留Windows的传统操作界面，不过在这之上将会加入一层Metro

UI作为有利于触控的界面。Windows8将保留Windows的传统操作界面，不过在74未来趋势和走向扁平化半扁平化水晶半透明中国风未来趋势和走向扁平化半扁平化水晶半透明中国风75扁平化扁平化76半扁平化半扁平化77水晶半透明水晶半透明78中国风中国风79设计细则注意事项图标按钮字体留白设计细则注意事项图标按钮字体留白80软件UI设计原则易用性规范性帮助设施合理性美观与协调性菜单位置

设定独特性快捷方式

组合安全性多窗口的应用与系

统资源软件UI设计原则易用性规范性帮助设施合理性美观与协调性菜单位81软件UI设计技巧暂时不可操作的菜单命令项一般要

屏蔽变灰建立动态菜单，提高软件的灵活性正在起作用的菜单命令旁打上选中标记（√）生成弹出式菜单，增强软件的可操

作性为命令选项增加快捷键

窗体设计用右指向的箭头引出级

联菜单

菜单设计对相关的命令用分隔条

进行分组照顾用户的

感觉软件UI设计技巧暂时不可操正在起作用为命令选项用右指向的对相82谢谢观赏！谢谢观赏！83UI设计基础知识课件84目录

UI简介

UI设计原则

UI设计的工作流程

UI设计的界面布局

UI设计的色彩搭配

网站UI

手机UI

软件UI目录UI简介UI设计原则UI设85UI简介

UI即User

Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

UI设计发展至今可分为：PC端UI（网站和软件）、移动端UI以及游戏UI。3大领域看似相差不多，但就偏重点、设计思路、制作规则等实际操作上其实是大相径庭的。我们将着重介绍网站UI、软件UI和手机UI。UI简介 UI即UserInterface(用户界面)的简861、个性化的视觉程现2、便捷的交互体验3、统一的整体风格4、精致的细节诉求UI设计原则1、个性化的视觉程现UI设计原则87UI设计的工作流程

分析•

了解产品

的市场定

位、产品

定义、客

户群体、

运营方式

等，提出

可用性设

计建议。

架构•

制定交互

方式、操

作与跳转

流程、结

构、布局、

信息和其

他元素。

界面•

对前面所

有工作加

以设计，

色调、风

格、界面、

窗口、图

标、皮肤

的表现是

最关键的。

输出•

配合好开

发人员完

成相关的

界面结合。

完善•

可用性的

循环研究、

用户体验

回馈、测

试回馈，

UI人员把

可行性建

议进行完

善。UI设计的工作流程 分析 架构 界面 输出 完善881.

界面构成要素互联网与传统媒体最大的不同就在于除文字和图像以外，还包含声音、视频和画等新兴多媒体元素，增加了网页界面动性。UI设计的界面布局1.界面构成要素互联网与传统媒体最大的不同就在于除文字和图89UI设计基础知识课件90

文字元素作为网站内容传达的主体，有着其他任何元素无法取代的重要作用。首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。网页中的文字主要包括标题、信息、文字链接等形式。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、字体、颜色和排布对页面整体设计影响极大。以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活泼，分类条例清晰，不会给人单调感觉。 文字元素作为网站内容传达的主体，有着其他任何元素无法取代的91UI设计基础知识课件92网页中常用的图形格式包括JPG、GIF和BMP。图形元素包括标题、背景、主图、链接图标四种。图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题。以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强生动和形象性。

主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题。主图是整个网页的视觉中心，可以为单调的文字信息增强活力，能给人强烈的视觉信息。网页中常用的图形格式包括JPG、GIF和BMP。图形元素包括93网页构成中的多媒体元素主要包括音频、视频和动画。

这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站与浏览者之间的互动交流。网页构成中的多媒体元素主要包括音频、视频和动画。 这些是界面942.

界面布局网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器，这样就为设计者提出了更为苛刻的要求。UI设计的界面布局2.界面布局网页设计源于平面设计但又与平面设计有所区别不同95电脑显示器电脑显示器96手机显示器手机显示器97UI设计基础知识课件98平面的视觉影响力上强下弱，左强右弱，上部和中上部被称为“最佳视域”，在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。平面的视觉影响力上强下弱，左强右弱，上部和中上部被称为“最佳99在电脑上对画面进行分割，确定好在什么地方布置什么栏目、大小等。粗略布局使色彩，LOGO，导航条，内容图片等一一实现。布局细化在网页设计中同样离不开平面设计中最基本的点、线、面的运用。点线面的运用在电脑上对画面进行分割，粗略布局使色彩，LOGO，导航条，内100UI设计的色彩搭配UI设计的色彩搭配101色彩的基础知识色彩的基础知识102冷暖色冷暖色103互补色、对比色、类似色和临近色互补色、对比色、类似色和临近色104色彩与心理情感色彩与心理情感105一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是件很酷的事情。色彩有冷暖色之分，冷暖色的巧妙运用可以让网站产生意想不到的效果。色彩与人的心理感觉和情绪也有一定的关系，一般情况下，各种色彩给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥；橙色代表光明、华丽、兴奋、甜蜜、快乐；黄色代表明朗、愉快、高贵、希望；绿色代表新鲜、平静、和平、柔和、安逸、青春；蓝色代表深远、永恒、沉静、理智、诚实、寒冷；紫色代表优雅、高贵、魅力、自傲；白色代表纯洁、纯真、朴素、神圣、明快；灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞；黑色代表崇高、坚实、严肃、刚健、粗莽。除了考虑界面设计本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是106色彩搭配要注意的问题通过调整色彩的饱和度和透明度产生变化，使网站避免单调产生。使用单色例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。使用领近色产生强烈的视觉效果，能够使网站特色鲜明、重点突出。以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。使用对比色黑色是一种特殊的颜色，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。黑色的使用一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。背景色的使用一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。色彩的数量色彩搭配要注意的问题通过调整色彩的饱和度和透明度产生变化，使107网站UI

网站UI

发展简

史设计细节的发

展网站UI

未来趋

势和走

向网站设计注意

事项网站UI设计细网站UI网站设108网站UI发展简史

1991年，全球第一个网站诞生，网址为http://info.cern.ch。早期的网页完全由文本构成，只有一些小图片和毫无布局科研的标题与段落。接下来出现了表格布局，然后是Flash，最后是基于CSS的网页设计。到目前为止，我们可以把网站建设的发展分为4个阶段。这四个阶段分别代表了互联网技术的发展历程。网站UI发展简史 1991年，全球第一个网站诞早期的网页完全109第一

纯静态

代

网站第二

数据库

代

管理第三

智能建

代

站智能可视化建

站第四

代第一纯静态第二数据库第三智能建智能可110设计细节的发展早期的网页完全由文本构成，接下来出现了表格布局，图文并茂的纯静态网站，然后是加入了Flash、视频、音频等多媒体动画的网站，最后是基于web2.0技术，用CSS设计出更具视觉冲击力，但加载速度更快的网站。在这期间，文字、链接、图片、按钮、动画以及背景都发生了极大变化。设计细节的发展早期的网页完全由文本构成，接下来出现了表格布局111单一英文字体各个国家的文字文字

各种文字的上百种的字体单一英文各个国家文字的上百种112单一的文字链接图文混排和按钮链接链接

flash动画链接单一的文图文混排接链接链接113图片静态的图片GIF动态图片图片静态的图片GIF动态图片114按钮文字按钮图标按钮动态按钮按钮文字按钮图标按钮动态按钮115文字、图片GIF动画FLASH动画动画

3D动画和视频文字、图FLASH动画动画视频116背景颜色背景图片背景动画背景背景颜色背景图片背景动画背景117

未来趋势和走向

网站UI设计风格从清新到复古，插画手绘到拟真设计，无奇不有。无论是版面版式，还是设计元素，用标新立异这个词形容绝不为过。web2.0技术的支持，使得网站程序更加人性化，而设计上也更加追求感官化，网站UI设计将向以下的设计走向持续发展。

技术上1、响应式网页设计2、全屏网页设计3、滚动设计

版面设计1、欧美简洁风（扁平化）2、韩国绚丽风3、中国风 未来趋势和走向 技术上 版面设计118响应式网页设计能够适应不同尺寸显示屏的网页是现在的潮流，是未来很长一段时间的设计趋势，那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视觉效果。响应式网页设计能够适应不同尺寸显示屏的网页是现在的潮流，是未119全屏网页设计利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可以很好的吸引观者注意。主要以图片展示为主，少量文字加上精美的排版使之变得更加吸引人。这个样子的网站多用于摄影团队或个人作品集展示，虽然简单养眼，但是承载信息有限，公司部门的主页很少见这样的设计。全屏网页设计利用精心挑选设计的漂亮背景，加上合理的页面布局，120滚动设计滚动设计又可分为视差滚动设计、滚动侦测设计和无限滚动模式（瀑布流）三种。视差滚动是让多层背景以不同速度滚动，以形成一种3D立体的运动效果，给观者带来一种独特的视觉感受。鼠标滚轮的流畅体验，让用户在观看此类网站时有一种控制感，简单来说这是有响应的交互体验。

滚动侦测网页设计利用CSS将导航栏固定在网页顶部、侧面或底部，并将版面内容按照导航顺序垂直或横向排布，使得用户点击相应导航tab时页面自动滑到相应页面，而点击内容，导航也将随之改变。这样的网页设计页面基本不会跳转，每一个tab所指向的页面内容也基本一屏显示完整，所以在页面内容的呈现上会有所局限。无限滚动模式（瀑布流）大大减少了分页的数量，有一些网站内容很多，但他们并没有简单分页，而是将那些内容垂直排布，当用户纵向滚动时，内容会不断更新好像永无止境。对于这类信息量大，每日更新数据块的网站是比较不错的方案。滚动设计滚动设计又可分为视差滚动设计、滚动侦测设计和无限滚动121欧美简洁风（扁平化）它提供了一种新的设计思维，设计仅仅采用二维元素，可以说是去繁从简的设计美学，去掉所有装饰性的设计——阴影、斜面、突起、渐变，拒绝特效，从图片框到按钮，再到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效，注重排版和色彩，可以说是对之前所推崇的拟物化设计的颠覆。欧美简洁风（扁平化）它提供了一种新的设计思维，设计仅仅采用二122韩国绚丽风韩国的商业性网站很具代表性，色彩丰富独特，但又不杂乱。韩国设计者运用色彩非常得当，给人的感觉要不是淡雅迷人，要不就是另类大胆。网站的各个栏位在表达不同主题时，比较喜欢采用不同的色调。灰色是他们最倾向使用的颜色，因为灰色虽然显得比较中庸，但能和任何色彩搭配，极大地改变色彩的韵味，使对比更强烈。其正文文字也大都采用灰色，局部则喜欢用色彩绚丽的色带或色块来区分。韩国绚丽风韩国的商业性网站很具代表性，色彩丰富独特，但又不杂123中国风中国风格的网站，因其气势磅礴，高贵典雅，独具韵味而受到很多人的喜爱，近年来被大量应用于传统文化、历史人文景点、地产项目等网站中。数千年的文明传承下来，中国人有其独特的构图审美。对称美是中国传统美学中重要的一部分，网页由于其特殊性，一般用到最多的是左右对称，再加上文字的竖排以及国画留白的运用，使得整个画面有了平衡、和谐、庄重之美。中国风中国风格的网站，因其气势磅礴，高贵典雅，独具韵味而受到124网站设计的注意事项网站设计的尺

寸Web命名规范网页制作规范Web排版网站设计的注意事项网站设计的尺Web命名规范网页制作规范We125网站设计尺寸

目前比较流行的电脑显示器的尺寸为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像素，而页面的高度则可以根据内容的多少而进行调整，这为的是给右侧的滚动条留有一定的空间。网站设计尺寸 目前比较流行的电脑显示器的尺寸为800*600126在图上呈现文字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在图上呈现文字Web命名规范文件命名的原则：以最少的字母达到127网页制作规范在图上呈现文字形象设计规范：使用标志（logo）标准色做为主体色，采用web安全色之内的色彩。标准字体：原则上定义两种，一种中文字体，一种英文字体（不包括文本内容字体）内容编辑规范：内容必须遵守我国《计算机信息网络国际联网安全保护管理办法》的规定。标题力求简短、醒目、新颖、吸引人。正文杜绝错字、别字和自造字，简体版中不得夹杂繁体字，译名要按我国规范。新技术使用规范

：兼容浏览器，保证下载速度，照顾最多数的用户。导航规范：简单、清晰，建议不超过3层的链接。导航的文字要简明扼要。连续性页面应加入上一页，下一页按钮，页面过长应在底部加上go

top按钮。网页制作规范在图上呈现文字形象设计规范：使用标志（logo）128•文字或者透明Web排版•标志是网站最重要

的部分之一，可使用

与主题色相反的颜色。在图上呈现

选择纯度

度较低的背景，文字

用较为突出的亮色。•链接是网站中不可

缺少的，做了链接的

文字应清晰，明了。•网页标题是网站的

指航标，要清晰、明

了，层次分明。

网页

链接网页标志网页标题网页文字•文字或者透明Web排版•标志是网站最重要在图上呈现•链接是129手机

UI

手机UI

发展简

史设计风格的发

展用户界面发展

趋势手机UI

手机UI

设计尺

寸设计规

范注意事

项手机UI设计风手机UI设计规130手机UI发展简史从1983年第一部手机诞生以来，从最初的“大哥大”到苹果多点触控用户界面，界面屏幕所占据手机的比例越来越大。在整个手机用户界面中，容括屏幕图像、触控按键、文字等无形界面和按钮、屏幕等有形界面。

手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计，手机UI设计一直被业界称为产品的“脸面”，好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点，界面也从狭义的图形界面发展到广义的交互界面设计。下面，我们首先从智能手机系统的发展历史开始说起，梳理一下交互设计的发展：手机UI发展简史从1983年第一部手机诞生以来，从最初的“大131设计风格的发展

在苹果一统高端智能手机市场的时期，乔布斯曾带领苹果的设计师团队打造了一个拟真化UI体验的传奇，而随着乔纳森·

艾维操刀iOS

7，拟真化被苹果抛弃，扁平化设计成为2013年移动应用平台设计的潮流。设计风格的发展 在苹果一统高端智能手机市场的时期，乔布斯曾带132拟真

扁

的设格。它始于2007年的乔布斯的手机革命，据苹果公司内部人士透露，也正是乔布斯把麻布材质、木质书架、实体书效果等诸多拟真元素带到了设计当中。苹果公司先是将这种设计风格其用到iOS的用户界面设计上，然后扩展到了OSX

Mountain

Lion桌面系统等其他平台。在2011年乔布斯逝世后，苹果动荡不断，在原软件设计主管斯科特·

福斯特离职后，设计师艾维被任命操刀iOS

7设计，他主张简洁的扁平风格，拟真化设计逐渐淡出苹果UI界面。拟真（

个拟真化UI体验的

）是

操

多

一种人们常在

维

（Flat7

设计，化被苹

人认为

拟真与扁平化的发展历史

在苹果一统高端智能手机市场的时期，乔布斯曾带领苹果

平化

计师团队打造了一

Skeuomorphism

传奇，而随着乔纳森·

艾

扁平化

刀iOS

）

，拟真并不像许

果抛弃，

的，来源与德国公司Metro

AG商标纠纷，更名为ModernUI，现今一般冠名“扁平化”）。在20世纪初，Hochschule

für

Gestaltung俗称包豪斯提出的“为建筑而生的设计学校”的主张，把工艺技术提高到与视觉艺术平等的位置，从而削弱传统的等级划分的工业设计的理念事实上就是扁平设计的开始。后来历经简约（Simple）设计时代（20世纪初期）、波普（POP）设计时代（20世纪50年代）、极简主义（Minimal

Art）设计时代20。扁平设计一直在发展、变化。拟真133拟真与扁平化的界面特点和优缺点

拟真特点界面：模拟真实物体的材质、质感、细节、光亮等。交互：人机交互也拟真化，模拟现实中的交互方式。优点：界面令用户感到熟悉，而且传达了丰富的人性化的感情。缺点：过度追求设计会造成不必要的信息误解和过载负担，影响用户体验。增加开发者的负担，与日趋简洁的硬件设备风格背道而驰。

扁平化特点界面：去掉所有装饰性的设计——阴影、斜面、突起、渐变，拒绝特效，从图片框到按钮，再到导航栏都极力避免羽化、阴影这样的特效，注重排版和色彩。交互：去掉了冗余的界面和交互，而使用更直接的设计完成任务。优点：界面和交互简约，信息更直观，信息量更大。缺点：新用户使用需先学习与适应，且传达的感情不丰富。拟真与扁平化的界面特点和优缺点 拟真 扁平化134拟真与扁平化的设计要点拟真扁平化1、可用性2、熟悉3、美学/怀旧1、几何拟物2、复色方案3、矩阵语言拟真与扁平化的设计要点拟真扁平化1、可用性1、几何拟物135中国风—UI设计的另一走向

随着2006年“中国元素国际广告创意大赛”的创办，中国风广告在国内外广告界引起了极大反响，第一届就收到来自世界40多个国家地区的作品，5000多份。

在2007年和2008年结合社会时事发起了分别以“中国元素-奥运精神”和“盛世中国红”为主题发起了第二届和第三届“中国元素国际广告创意大赛”。

2009年，在

以“中国力量！”为主题的第四届大赛也已经成功举办。

伴随着大赛的开办和进行，在中国广告界引领了一股风潮，包括长城奖、艾菲广告奖在内的很多其他广告节的参赛作品和获奖作品中运用"中国元素"的比例越来越大，中国风广告也得到了消费者的认同和欢迎。随着这几年古典文化越来越多的出现在我们日常生活中，受此影响，手机Ui也将会慢慢的加入进来，也算是一场中国古典文化的文艺复兴吧！中国风—UI设计的另一走向 随着2006年“中国元素国际广告136UI设计基础知识课件137UI设计基础知识课件138UI设计基础知识课件139UI设计基础知识课件140用户界面发展趋势扁平化拟真化中国风用户界面发展趋势扁平化拟真化中国风141手机UI设计尺寸

移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800,

480x854,

540x960,

720x1280,

1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960,

640x1136,

750x1334,

1242x2208。手机尺寸在最新的规范网址中，官方为我们提供了有mdpi,hdpi,xhdpi

xxdhpi,xxxdhpi几种分辨率的机器。手机UI设计尺寸 移动端设备屏幕尺寸非常多，碎片化严重。尤其142各种分辨率从横向上来看：mdpi：

360左右Hhdpi：480左右(1.5倍)xhdpi：720左右(2倍)xxdhpi：1080左右(3倍)xxxdhpi：1440左右(4倍)

这里需要说明一点的是：设备的尺寸和分辨率没有绝对的关系，不是说屏幕大的手机就一定更清晰。我们再来看一组数据:各种分辨率从横向上来看：mdpi：360左右Hhdpi：4143320*480属于mdpi，480*800、480*854、540*960属于