11.UI设计说明课件

第11章、UI设计UI简介与设计原则|UI设计的工作流程与界面布局|UI设计的色彩搭配|常见Ui分类|案例分析UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即UserInterface(用户界面)的简称。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。本章主要介绍了UI设计的的基本流程和操作技巧，掌握UI设计的排版构成、元素使用。【本章学习目标】通过本章的学习，读者能够掌握：1.熟悉UI的种类以及构成2.掌握UI设计的基本创意方法和制作流程目录1UI的简介及设计原则2Ui设计流程及界面布局3UI设计的色彩搭配4常见Ui设计分类5案例分析

UI即User

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

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

分析•

了解产品

的市场定

位、产品

定义、客

户群体、

运营方式

等，提出

可用性设

计建议。

架构•

制定交互

方式、操

作与跳转

流程、结

构、布局、

信息和其

他元素。

界面•

对前面所

有工作加

以设计，

色调、风

格、界面、

窗口、图

标、皮肤

的表现是

最关键的。

输出•

配合好开

发人员完

成相关的

界面结合。

完善•

可用性的

循环研究、

用户体验

回馈、测

试回馈，

UI人员把

可行性建

议进行完

善。第二节Ui设计流程及界面布局界面构成要素：互联网与传统媒体最大的不同就在于除文字和图像以外，还包含声音、视频和画等新兴多媒体元素，增加了网页界面动性。第二节Ui设计流程及界面布局

文字元素作为网站内容传达的主体，有着其他任何元素无法取代的重要作用。首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。网页中的文字主要包括标题、信息、文字链接等形式。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、字体、颜色和排布对页面整体设计影响极大。以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活泼，分类条例清晰，不会给人单调感觉。第二节Ui设计流程及界面布局第二节Ui设计流程及界面布局图形元素包括标题、背景、主图、链接图标四种。图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题。以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强生动和形象性。主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题。主图是整个网页的视觉中心，可以为单调的文字信息增强活力，能给人强烈的视觉信息。第二节Ui设计流程及界面布局网页构成中的多媒体元素主要包括音频、视频和动画。这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站与浏览者之间的互动交流。网页界面布局网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器，这样就为设计者提出了更为苛刻的要求。第二节Ui设计流程及界面布局电脑显示器第二节Ui设计流程及界面布局手机显示器第二节Ui设计流程及界面布局第二节Ui设计流程及界面布局平面的视觉影响力上强下弱，左强右弱，上部和中上部被称为“最佳视域”，在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。第二节Ui设计流程及界面布局在电脑上对画面进行分割，确定好在什么地方布置什么栏目、大小等。粗略布局使色彩，LOGO，导航条，内容图片等一一实现。布局细化在网页设计中同样离不开平面设计中最基本的点、线、面的运用。点线面的运用第二节Ui设计流程及界面布局UI设计的色彩搭配第三节Ui设计的色彩搭配冷暖色第三节Ui设计的色彩搭配互补色、对比色、类似色和临近色第三节Ui设计的色彩搭配色彩与心理情感第三节Ui设计的色彩搭配一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是件很酷的事情。色彩有冷暖色之分，冷暖色的巧妙运用可以让网站产生意想不到的效果。色彩与人的心理感觉和情绪也有一定的关系，一般情况下，各种色彩给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥；橙色代表光明、华丽、兴奋、甜蜜、快乐；黄色代表明朗、愉快、高贵、希望；绿色代表新鲜、平静、和平、柔和、安逸、青春；蓝色代表深远、永恒、沉静、理智、诚实、寒冷；紫色代表优雅、高贵、魅力、自傲；白色代表纯洁、纯真、朴素、神圣、明快；灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞；黑色代表崇高、坚实、严肃、刚健、粗莽。除了考虑界面设计本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。第三节Ui设计的色彩搭配色彩搭配要注意的问题通过调整色彩的饱和度和透明度产生变化，使网站避免单调产生。使用单色例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。使用领近色产生强烈的视觉效果，能够使网站特色鲜明、重点突出。以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。使用对比色黑色是一种特殊的颜色，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。黑色的使用一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。背景色的使用一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。色彩的数量第三节Ui设计的色彩搭配网站UI发展简史

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

纯静态

代

网站第二

数据库

代

管理第三

智能建

代

站智能可视化建

站第四

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

各种文字的上百种的字体第四节常见Ui分类单一的文字链接图文混排和按钮链接链接

第四节常见Ui分类flash动画链接图片静态的图片GIF动态图片第四节常见Ui分类按钮文字按钮图标按钮动态按钮第四节常见Ui分类文字、图片GIF动画FLASH动画动画

第四节常见Ui分类3D动画和视频背景颜色背景图片背景动画背景第四节常见Ui分类

未来趋势和走向

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

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

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

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

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

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

艾维操刀iOS

7，拟真化被苹果抛弃，扁平化设计成为2013年移动应用平台设计的潮流。第四节常见Ui分类（手机UI）拟真与扁平化的界面特点和优缺点

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

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

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

480x854,

540x960,

720x1280,

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

640x1136,

750x1334,

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

xxdhpi,xxxdhpi几种分辨率的机器。第四节常见Ui分类（手机UI）注意事项光线明暗细

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

弱化增加空白空

间只用适合的

字体第四节常见Ui分类（手机UI）设计规范整体性、一致性个性化视觉元素的规范第四节常见Ui分类（手机UI）软件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分类（软件UI）Windows

1.0

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

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

1.0允许使用鼠标，可以在程序之间进行切换，可以调整窗口大小和最小化窗口。这套系统在当时非常流行。第四节常见Ui分类（软件UI）Windows

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

Word和Excel软件。这个还是没有脱离dos，已经初具规模。第四节常见Ui分类（软件UI）1991年的Windows

3.1让Windows成为IBM-PC的标配系统，这也是最后一款看上去还残存MS-DOS风格的Windows系统。第四节常见Ui分类（软件UI）Windows

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

95也成为至今为止所有Windows系统的界面蓝本。第四节常见Ui分类（软件UI）Windows

98界面设计看不出有什么大的改动只是功能上稍微有些改进。第四节常见Ui分类（软件UI）2000年发布的Windows

ME基本上也是Windows

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

XP。第四节常见Ui分类（软件UI）Windows

XP标志性的桌面。第四节常见Ui分类（软件UI）Windows

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

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

XP。Vista的真正价值可能是它的界面风格。第四节常见Ui分类（软件UI）Windows

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

UI作为有利于触控的界面。第四节常见Ui分类（软件UI）软件UI设计原则易用性规范性帮助设施合理性美观与协调性菜单位置

设定独特性快捷方式

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

统资源第四节常见Ui分类（软件UI）软件UI设计技巧暂时不可操作的菜单命令项一般要

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

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

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

联菜单

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

进行分组照顾用户的

感觉第四节常见Ui分类（软件UI）第五节案例分析

案例一：本项目是通过illustrator和Photoshop设计和制作结伴APP用户登录界面UI。登陆注册页面在APP设计当中的重要程度从业者想必也是很清楚的，一个优秀的美观的登陆设计让人留恋忘返，在第一眼爱上这款APP；而一款很糟糕的APP登陆注册界面设计可能在第一眼就惹恼用户，莫名流失了用户。除了界面设计美观外，基本的功能信息也必须保证出现。在illustrator中，制作结伴LOGO。在Photoshop中，进行APP登录界面的设计，使用文本工具进行文字排版，使用矩形工具进行图形装饰，效果图如下图所示。第五节案例分析第五节