Photoshop新手学UI艺术设计(txt+pdf+epub+mobi电子书下载)


发布时间:2020-06-14 21:16:53

点击下载

作者:王红卫 等

出版社:机械工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Photoshop新手学UI艺术设计

Photoshop新手学UI艺术设计试读:

前言

随着移动智能设备的普及,从安卓智能手机到苹果公司的iPad平板电脑,再到快速发展的Windows Phone智能手机,正快速地走进人们的生活,甚至改变着人们的生活方式。这些智能设备都有一个共同点,那就是大多抛弃了繁琐的实体按键,改为全屏触摸操作,同时具备更加丰富的拓展功能。此时UI设计也伴随着智能设备的发展渐渐被越来越多的人所熟知,智能设备屏幕变大了,功能更多了,人们对其视觉效果也越来越重视,大部分用户希望界面的图标更加漂亮,更具识别性,手机主题更加个性、时尚,本书的出现就是为了让你快速了解并掌握UI设计。本书内容

通过阅读本书,读者可以快速学到以下内容:

·UI设计快速入门

·UI基础控件设计

·简约扁平化图标设计

·超写实元素设计

·立体化图标设计

·界面图像及特效处理

·精彩游戏界面设计

·应用系统界面设计

本书采用最新版Photoshop CC2015制作和讲解,让你在第一时间领略PS最新版本的精彩之处。同时本书并不局限于软件版本,同样适用于Photoshop CS、CS2、CS3、CS4、CS5、CS6、CC版本,所以读者完全不用担心会受软件版本的困扰,相信掌握的是UI设计的实战技术!本书特色(1)从快速认识并了解UI设计开始到各类风格的界面制作,让读者有一个全面的了解和学习。(2)在全面讲解过程中会加入相关的内容提示,让读者在学习的过程中能够避免犯下小错误的同时将学习到的知识举一反三。(3)更加贴近读者生活,大量采用了生活中常见的界面设计风格追随最前沿的设计潮流,让自己掌握的技术不落伍,无论在真正的界面设计中,还是在启发设计灵感过程中都能收获更多,掌握更多!(4)实用性与理论性完美结合,无论是刚接触设计的菜鸟还是已经熟练掌握设计软件的大鸟都可以快速入门并上手。

本书由王红卫主编,同时参与编写的还有张四海、余昊、贺容、王英杰、崔鹏、桑晓洁、王世迪、吕保成、蔡桢桢、王红启、胡瑞芳、王翠花、夏红军、李慧娟、杨树奇、王巧伶、陈家文、王香、杨曼、马玉旋、张田田、谢颂伟、张英、石珍珍、陈志祥等。

在创作的过程中,由于时间仓促,错误在所难免,希望广大读者批评指正。如果在学习过程中发现问题或有更好的建议,欢迎发邮件至smbook@163.com与我们联系。

与本书配套的案例视频文件、素材及源文件下载地址为:

http://pan.baidu.com/s/1o80Q5cA(注意区分英文大小写)。

如果下载有问题,请电子邮件联系booksaga@126.com,邮件主题为“Photoshop新手学UI艺术设计”。编者2017年3月第1章UI设计快速入门内容摘要

本章主要讲解UI设计快速入门的相关知识,在进入专业的UI设计领域之前需要掌握相关的基础知识,通过对不同的名词剖析,在短时间内理解专业名词的含义,为以后的设计之路打下坚实的基础。教学目标

·UI设计概念

·UI设计组成部分

·UI设计与产品团队合作流程关系

·各类尺寸单位解析

·UI设计原则

·GUI设计过程中的表现力

·提升Android视觉效果的设计技巧

·免费的UI界面设计工具、资源及网站

·色彩学基础知识

·UI设计常见配色方案

·色彩的性格

·精彩UI设计赏析

·手绘草图的重要性1.1 UI设计概念

UI(User Interface)即用户界面,它是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。好的UI设计不仅让软件变得有个性,有品味,还会让软件操作变得舒适、简单、自由,充分体现软件的定位和特点。UI设计主要由以下三个部分组成。

1.图形界面设计(Graphical User Interface)

图形界面设计是指采用图形方式显示的用户操作界面。图形界面对于用户来说,在完美视觉效果上十分明显,它通过图形界面向用户展示了功能、模块、媒体等信息。

通常人们所说的视觉设计师就是指设计图形界面的设计师,一般从事此类行业的设计师大多都经过专业的美术培训,有一定的专业背景。

2.交互设计(Interaction Design)

交互设计在于定义人造物的行为方式(人工制品在特定场景下的反应方式)相关的界面。

交互设计的出发点在于研究人和物交流的过程中,人的心理模式和行为模式,并在此研究基础上,设计出可提供的交互方式以满足人对使用人工物的需求。交互设计是设计方法,而界面设计是交互设计的自然结果。同时界面设计不一定由显意识交互设计驱动,但界面设计必然包含交互设计(人和物是如何进行交流的)。

交互设计师首先进行用户研究相关领域以及潜在用户,设计人造物的行为,并从有用、可用及易用性等方面来评估设计质量。

3.用户研究(user study)

与软件开发测试类似,UI设计中也有用户测试,工作的主要内容是测试交互设计的合理性以及图形设计的美观性。一款应用经过交互设计、图形界面设计等工作之后需要最终的用户测试才可以上线,此项工作尤为重要,通过测试可以发现应用中某些地方的不足或不合理性。1.2 UI设计组成部分

在UI设计领域,常规整套设计主要由ADS、绘制草图、低保真原型与高保真原型、Axure和图形界面设计五部分组成。

1.ADS(Application Definition Statement)

ADS(Application Definition Statement)即应用定义声明,它由用户(audience)、定位(differentiator)和方案(solution)三部分组成。

在设计过程中,一句话简短说明应用(APP)的作用,它能为(哪些)用户(在说明情况下)解决(什么)问题?从而展现出它的定位,然后列出最主要的功能,如图1.1所示。图1.1 ADS功能图示

2.绘制草图

由于ADS是基于文字表达的一种方式,为了能够更清楚地表达意图,就需要以绘制草图的方法来实现。既然是草图,就无须精确表达,只需要特别注意将整体布局及重要模块表现出来即可,同时可以根据实际情况来绘制彩色或灰度的草图,如图1.2所示。图1.2 草图效果提示与技巧

如今更多的公司采用草图设计模板,快速、高效集多项优点于一身,由于是采用硬质不诱钢结构,可以多次利用。如图1.3所示为Android4.0UI设计模板实物展示。图1.3 Android4.0UI设计模板实物展示

3.低保真原型与高保真原型

低保真原型是指将草图通过Axure、Mockup、Visio等交互设计软件在计算机上生成框架效果图。

高保真原型则追求细节,如屏幕尺寸、色彩细节等,比低保真原型更加耗时。高保真原型通常是在低保真原型得到确认后才开始制作,如图1.4所示。图1.4 框架效果图

4.Axure即Axure Rp

Axure RP是一个款业的快速原型设计工具,Axure代表美国Axure公司,RP则是Rapid Prototyping(快速原型)的缩写。Axure RP主要负责UI设计过程中的定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型及规格说明文档。作为专业的原型设计工具,它不但能够快速、高效地创建原型,而且还支持多人协作设计和版本控制管理。

Axure RP的用户主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师、程序开发工程师等。Axure RP界面如图1.5所示。图1.5 Axure RP界面

5.图形界面设计

在高保真原型完成的基础上,对其进行视觉细化设计,具有针对性地为图形添加阴影、高光、质感等效果。图形界面设计如图1.6所示。图1.6 图形界面设计1.3 UI设计与产品团队合作流程关系

UI设计与产品团队合作流程关系如下。一、团队成员

1.产品经理

对用户需求进行分析调研,针对不同的需求进行产品卖点规划,然后将规划的结果陈述给公司上级,以此来取得项目所要用到的各类资源(人力、物力、财力等)。

2.产品设计师

产品设计师侧重于功能设计,考虑技术的可行性,比如在设计一款多动端播放器的时候是否在播放的过程中添加动画提示甚至一些更复杂的功能,而这些功能的添加都是要经过深思熟虑的。

3.用户体验工程师

用户体验工程师需要了解更多商业层面的内容,其工作通常与产品设计师相辅相承,从产品的商业价值角度出发,以用户的切身体验出发,对产品与用户交互方面的环节进行设计方面的改良。

4.图形界面设计师

图形界面设计师为应用设计一款能适应用户需求的界面,一款应用能否成功与图形界面也有着分不开的关系。图形界面设计师常用软件有Photoshop、IIIustrator、Fireworks等。二、UI设计与项目流程步骤

产品定位→产品风格→产品控件→方案制订→方案提交→方案选定。1.4 各类尺寸单位解析

在UI界面设计中,单位的应用非常关键,下面就讲解常用单位的使用。

1.英寸

英寸为长度单位,从计算机屏幕到电视机屏幕再到各类多媒体设备的屏幕大小,通常指屏幕对角的长度,并且手持移动设备、手机屏幕等也沿用了这个概念。

2.分辨率

分辨率为屏幕物理像素的总和,用屏幕宽乘以屏幕高的像素数来表示,比如笔记本电脑上的1366px×768px,液晶电视上的1200px×1080px,手机上的480px×800px、640px×960px等。

3.网点密度

网点密度是指屏幕物理面积内所包含的像素数,以DPI(每英寸像素点数或像素/英寸)为单位来计量,DPI越高,显示的画面质量就越精细。在手机UI设计时,DPI要与手机相匹配,因为低分辨率的手机无法满足高DPI图片对手机硬件的要求,显示效果十分糟糕,所以在设计过程中就涉及一个全新的名词——屏幕密度。

4.屏幕密度(Screen Densities)

以搭载Android操作系统的手机为例,分别为:

·iDPI(低密度):120像素/英寸;

·mDPI(中密度):160像素/英寸;

·hDPI(高密度):240像素/英寸;

·xhDPI(超高密度):320像素/英寸。

与Android相比,iPhon手机对密度版本的数量要求没有那么多,因为目前iPhon界面仅有两种设计尺寸:960px×640px和640px×1136px,网点密度(DPI)采用mDPI,即160像素/英寸就可以满足设计要求。1.5 常见的图片格式

界面设计常用的格式主要有以下几种:

·JPEG:JPEG是一种位图文件格式,其缩写是JPG。JPEG几乎不同于当前使用的任何一种数字压缩方法,它无法重建原始图像。目前各类浏览器均支持JPEG格式,因为该格式的文件尺寸较小,下载速度快,使得Web页可以以较短的下载时间提供大量美观的图像,JPEG也就顺理成章地成为网络上最受欢迎的图像格式,但是它不支持透明背景。

·GIF:GIF(Graphics Interchange Format)的原义是“图像互换格式”,是CompuServe公司在1987年开发的图像文件格式。GIF图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。GIF格式的另一个特点是其在一个GIF文件中可以保存多幅彩色图像,如果把保存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可以构成一种最简单的动画。

·PNG:PNG图像文件存储格式,其目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。可移植网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的PNG's Not GIF,是一种位图文件(bitmap file)存储格式,读成ping。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法,因为其压缩比高,生成文件容量小,一般应用于JAVA程序中,或者背景网页及S60程序中。PNG它是一种在网页设计中常见的格式,并且支持透明背景显示,相同图像相比其他两种格式体积稍大。如图1.7所示为三种不同格式的显示效果。图1.7 不同格式的显示效果1.6 智能手机操作系统简介

现今主流的智能手机操作系统主要有Android、iOS和Windows Phone三类,这三类系统都有各自的特点。

Android:中文名称为安卓,Android是一个基于开放源代码的Linux平台衍生而来的操作系统,Android最初是由一家小型公司所创建,后来被谷歌收购,它也是当下最为流行的一款智能手机操作系统。其显著特点在于,它是一款基于开放源代码的操作系统,这句话可以理解为它相比其他操作系统具有超强的可扩展性。如图1.8所示为装载Android操作系统的手机。图1.8 装载Android操作系统的手机

IOS:源自苹果公司MAC机器装载的OS X系统发展而来的一款智能操作系统,目前最新版本为7.0,此款操作系统是苹果公司独家开发并且只使用于自家的iPhon、iPod Touch、iPad等设备上。相比其他智能手机操作系统,IOS智能手机操作系统的流畅性、完美的优化及安全等特性是其他操作系统无法比拟的,不过由于它是采用封闭源代码开发,所以在拓展性上要略显逊色。如图1.9所示为苹果公司生产的装载IOS智能操作系统的设备。图1.9 装载IOS智能操作系统的设备

Windows Phone(简称:WP):WP是微软发布的一款移动操作系统,它是一款十分年轻的操作系统,相比其他操作系统而言具有桌面定制、图标拖拽、滑动控制等一系列前卫的操作体验。由于该操作系统是初入智能手机市场,所以在份额上暂时无法与安卓和IOS相比。但更是因为其比较年轻,才有很多新奇的功能及操作,同时也是因为源自微软,在与PC端的Windows操作系统互通性上占有很大的优势。如图1.10所示为装载Windows Phone的几款智能手机。图1.10 装载Windows Phone的几款智能手机1.7 UI设计常用的软件

如今UI设计中常用的软件有Adobe公司的Photoshop和Illustrator,Corel公司的CorelDRAW等,主要以Photoshop和Illustrator为主。

1.Photoshop

Photoshop是集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件,深受广大平面设计人员和电脑美术爱好者的喜爱。

Photoshop的专长在于图像处理,而不是图形创作,有必要区分一下这两个概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果,其重点在于对图像的处理加工;图形创作软件是按照自己的构思创意,使用矢量图形来设计图形,这类软件主要有Adobe公司的另一个著名软件Illustrator和Macromedia公司的Freehand,不过Freehand已经快要淡出历史舞台了。

平面设计是Photoshop应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招帖、海报,这些具有丰富图像的平面印刷品,基本上都需要Photoshop软件对图像进行处理。

2.Illustrator

Illustrator是美国Adobe公司推出的专业矢量绘图工具,是出版、多媒体和在线图像的工业标准矢量插画软件。

无论是生产印刷出版线稿的设计者和专业插画家、生产多媒体图像的艺术家,还是互联网页或在线内容的制作者,都会发现Illustrator不仅仅是一个艺术产品工具,还适用于大部分小型设计到大型的复杂项目。

3.CorelDRAW

CorelDRAW是集矢量图形设计、矢量动画、页面设计、网站制作、位图编辑、印刷排版、文字编辑处理和图形高品质输出于一体的平面设计软件,深受广大平面设计人员的喜爱,目前主要在广告制作、图书出版等方面得到广泛的应用,功能与其类似的软件有Illustrator、Freehand。

CorelDRAW是一款屡获殊荣的图形、图像编辑软件,它包含两个绘图应用程序:一个用于矢量图及页面设计;一个用于图像编辑。这款绘图软件组合可以创作出多种图形图像效果,在简单的操作中就可得到实现,并且不会丢失当前的工作。通过CoreldRAW全方位的设计及网页功能可以融合到用户现有的设计方案中,灵活性十足。

对于目前流行的UI界面设计,由于没有具有针对性的专业设计软件,所以大部分设计师会选择使用这三款软件来制作UI界面,如图1.11所示。图1.11 三款软件的界面效果1.8 UI设计原则

UI设计是一个系统化整套的设计工程,看似简单,其实不然,在这套“设计工程”中一定要按照设计原则进行设计。UI设计原则主要有以下几点。

1.简易性

在整个UI设计的过程中一定要注意设计的简易性,界面设计要简洁、易用,并能最大程度地减少选择性的错误。

2.一致性

出色的应用应该拥有一个优秀的界面,这也是所有优秀应用界面设计应当具备的特点。一款应用中的界面设计必须保证视觉交互的一致性,同时与整体风格保持相同。

3.提升用户的熟知度

用户在第一时间内接触到界面时必须是之前所接触到或者已掌握的知识,新的应用绝对不能超过一般常识,比如无论是拟物化的写实图标设计还是扁平化的界面都要以用户所掌握的知识为基准。

4.可控性

在设计之初就要考虑到用户想要做什么,需要做什么,而此时在设计中就要加入相应的操控提示。

5.记性负担最小化

一定要科学分配应用中的功能说明,力求操作最简化,从人脑的思维模式出发,不要打破传统的思维方式,不要给用户增加思维负担。

6.从用户的角度考虑

想用户所想,思用户所思,研究用户的行为。因为大多数的用户是不具备专业知识的,他们往往只习惯于从自身的行为习惯出发进行思考和操作,在设计的过程中把自己当作用户,以切身体会去设计。

7.顺序性

按一定规律进行排列,一方面可以让用户在极短的时间内找到自己需要的功能,另一方面也可以拥有直观的简洁易用的感受。

8.安全性

无论任何应用,在用户进行自由操作时,他所做出的这些动作都应该是可逆的,比如在用户做出一个不恰当的或错误操作时,应当有危险信息介入。

9.灵活性

快速、高效率及整体满意度在用户看来都是人性化的体验,在设计过程中需要尽可能地考虑到特殊用户群体的操作体验,比如残疾人、色盲、语言障碍者等,在这一点可以在IOS操作系统上得到最直观的感受。1.9 GUI设计过程中的表现力

前面已经讲过,GUI表示图形界面设计,直观来讲就是产品外观设计,在一款应用达到一定功能的基础上应该使产品更具有个性与美观性,这也是吸引用户眼球的首要环节。

现今的UI设计中,GUI主要由两部分组成,即图标(icon)设计和界面(interface)设计。

1.图标(icon)

图标能够将产品或应用的功能信息快速传达给用户,并且获得良好的视觉体验,在整个应用中具有一定的价值,并且还能够强调产品的重要特点,向用户传达操作重点。

图标还具有以下几个特点:

·可以减轻对应用的认识负担,尤其对于复杂的应用效果十分明显;

·增强人机交互的乐趣,不会显得空洞乏味;

·统一的图标风格还能够增强用户的记忆。

图标的表现技法如下。

·光感表现(玻璃球)如图1.12所示。图1.12 玻璃球光感

·质感表现(金属云)如图1.13所示。图1.13 金属云质感

2.界面(interface)

界面设计是整个UI设计中的精华所在,它与人机交互体验同为重要的组成部分。界面不只是一味地追求华丽,在设计的过程中需要从产品定位入手,从写实风格的界面到扁平化的界面都应该以产品及用户为中心。

界面的表现技法如下。

·流行风格界面(android)如图1.14所示。图1.14 流行风格界面

·扁平风格界面(iOS7)如图1.15所示。图1.15 扁平风格界面提示与技巧

早期的手机UI界面受限于屏幕尺寸、硬件及操作系统等原因,并不像今天流行的界面如此好看,分辩率低、屏幕过小给用户的视觉感受比较一般,如图1.16所示。图1.16 低分辨率、小屏幕效果1.10 提升Android视觉效果的设计技巧

图形界面设计重心还是在最终的用户直观感受上,无论交互的工作做得如何完美,这些都不会影响到用户对界面的视觉感受,或许用户只会觉得这款应用设计比较合理、易用。以下是关于提升Android视觉效果设计的技巧。

1.确定适当大小的图像

在图像添加方面,许多应用开发者通常习惯采用大小单一的做法,虽然这样做会使资源管理变得更简单,但是就应用的视觉吸引力而言,这种做法是不太恰当的。应当针对不同的屏幕,在应用图像制作过程中,保证图像大小的对应,这样才可以生成最合适的图像以达到最佳的用户体验。

2.使用适当格式的图像

有时在使用一款应用的过程中,由于图像的原因一直在加载,这不仅仅是因为图像的大小存在偏差,还有可能是因为图像采用了非理想的格式。Android平台支持多种媒体格式,比如PNG、JPEG、GIF、BMP等,除了过时的格式之外,选取具有针对性的图片格式才能达到理想的应用效果。PNG是无损图片的理想格式,而JPEG的呈现质量并不稳定。

3.运用微妙动画颜色来呈现状态改变

在屏幕转场时运用微妙动画以及色彩变化来呈现应用状态改变,会让应用更显专业,比如在切换一二级页面的时候加入动态的淡入/淡出效果;在卸载当前应用时加入高斯模糊效果等元素都可以为应用加分。注意,在添加转场效果时,一定要与当前应用相匹配。

4.注意配色方案中的对比度

当用户在首次使用应用时,是一种黑蓝的高对比度配色方案,而在后面的使用过程中再次接触到是浅色系或白色色系,就会导致视觉上的不明确,可能会造成屏幕内容的阅读困难。使用适当的高对比度颜色可以让屏幕更易于查看。

5.使用易读的字体

与配色方案相同,在字体使用上应尽量与应用相匹配。如果在手机中的邮箱应用上查看对方发过来的邮件,过小或过于少见的字体就会造成阅读困难,因此,在字体采用上也应该遵循易读的原则。

6.严守平台规范

每一款成功的手机应用都会使用人们较为熟悉的用户界面。它们有简单且主流的用户界面,采用了用户所熟悉的控制方式。在用户界面控制和屏幕设计中,与平台其他应用的表现保持一致,以平台作为决定应用表现。

7.测试用户界面

最优秀的开发者也无法得到用户的使用或体验反馈,当应用稳定运行时,面向完全不熟悉应用设计和意图的用户开展深入测试是十分正确的做法。只有做好了用户测试这项重要的工作之后,才能够在发布应用前发现许多意料之外的问题。1.11 免费的UI设计工具、资源及网站

在设计工作中,如果能有强大的工具、资源供你利用的话,那么整个设计工作必将事半功倍,下面这些免费的UI设计工具、资源及网站可以在设计过程中助你一臂之力。

1.Lumzy(http://www.lumzy.com/)

Lumzy是一个网站应用和原型界面制作工具,使用Lumzy可以轻松创建UI模型并即时发送到客户电脑中,Lumzy还具有团队协作编辑工具,如图1.17所示。图1.17 Lumzy

2.Mockingbird(https://gomockingbird.com)

Mockingbird(百舌鸟)是一个在线工具,它可以轻松地创建UI界面模型并预览,如图1.18所示。图1.18 Mockingbird(百舌鸟)

3.The Pencil Project(http://pencil.evolus.vn/en-US/Home.aspx)

The Pencil Project为设计图表和用户界面图形原型开发的一个自由和开源工具,如图1.19所示。图1.19 The Pencil Project

4.Serena Prototype Composer(http://www.serena.com/products/prototype-composer/index.html)

Serena Prototype Composer是制作流程图,模拟程序流程和用户界面设计程序。

5.Cacoo(http://cacoo.com/)

Cocoo是一个用户友好的在线绘图工具,允许你创建一个如网站地图、线框、UML和网络图等。1.12 色彩学基础知识

与很多设计相同,在UI设计中也十分注重色彩的搭配,想要为界面搭配出专业的色彩,就需要对色彩学基础知识有所了解。下面就为大家讲解关于色彩学的基础知识,希望通过对这些知识的了解与学习可以为UI设计之路添砖加瓦。

1.颜色的概念

树叶为什么是绿色的?树叶中的叶绿素大量吸收红光和蓝光,而对绿光吸收最少,大部分绿光被反射出来进入人眼,人就看到绿色。“绿色物体”反射绿光,吸收其他色光,因此看上去是绿色。“白色物体”反射所有色光,因此看上去是白色。

颜色其实是一个非常主观的概念,不同动物的视觉系统不同,看到的颜色就会不一样。比如,蛇眼不但能察觉可见光,而且还能感应红外线,因此蛇眼看到的颜色就与人眼不同。界面颜色效果如图1.22所示。图1.22 界面颜色效果

2.色彩三要素

色彩三要素包括色相、饱和度和明度。

色相

色相又称色调,色相是一种颜色区别于另外一种颜色的特征,日常生活中所接触到的“红”“绿”“蓝”就是指色彩的色相。色相两端分别是暖色、冷色,中间为中间色或中性色。在0~360°的标准色环上,按位置度量色相,如图1.23所示。色相体现着色彩外向的性格,是色彩的灵魂。图1.23 色相及色相环

饱和度

饱和度是指色彩的强度或纯净程度,也称彩度、纯度、艳度或色度。对色彩的饱和度进行调整,也就是调整图像的彩度。饱和度表示色相中灰色分量所占的比例,它使用从0%(灰色)~100%的百分比来度量,当饱和度降低为0时,则会变成一个灰色图像,增加饱和度会增加其彩度。在标准色轮上,饱和度从中心到边缘递增。饱和度受到屏幕亮度和对比度的双重影响,一般亮度好对比度高的屏幕可以得到很好的色饱和度,如图1.24所示。图1.24 不同饱和度效果

明度

明度是指色彩的明暗程度,有时也可称为亮度或深浅度。在无彩色中,最高明度为白色,最低明度为黑色。在有彩色中,任何一种色相中都有着一个明度特征。不同色相的明度也不同,黄色为明度最高的色,紫色为明度最低的色。任何一种色相如加入白色,都会提高明度,白色成分越多,明度也就越高;任何一种色相如加入黑色,明度相对降低,黑色越多,明度越低,如图1.25所示。

明度是全部色彩都有的属性,明度关系可以说是搭配色彩的基础,在设计中,明度最适宜于表现物体的立体感与空间感。图1.25 明度效果

3.加法混色

原色又称为基色,三基色(三原色)是指红(R)、绿(G)、蓝(B)三色,是调配其他色彩的基本色。原色的色纯度最高、最纯净、最鲜艳,可以调配出绝大多数色彩,而其他颜色不能调配出三原色,如图1.26所示。

加色三原色基于加色法原理。人的眼睛是根据所看见的光的波长来识别颜色的,可见光谱中的大部分颜色可以由三种基本色光按不同的比例混合而成,这三种基本色光的颜色就是红(Red)、绿(Green)、蓝(Blue)三原色光。这三种光以相同的比例混合,且达到一定的强度,就呈现白色;若三种光的强度均为零,就是黑色。这就是加色法原理,加色法原理被广泛应用于电视机、监视器等主动发光的产品中。图1.26 三原色及色标样本

4.减法混色

减色原色是指一些颜料,当按照不同的组合将这些颜料添加在一起时,可以创建一个色谱。减色原色基于减色法原理。与显示器不同,在打印、印刷、油漆、绘画等靠介质表面的反射被动发光的场合,物体所呈现的颜色是光源中被颜料吸收后所剩余的部分,所以其成色的原理叫做减色法原理。打印机使用减色原色(青色、洋红色、黄色和黑色颜料)并通过减色混合来生成颜色。减色法原理被广泛应用于各种被动发光的场合。在减色法原理中的三原色颜料分别是青(Cyan)、品红(Magenta)和黄(Yellow),如图1.27所示。通常所说的CMYK模式就是其于这种原理。图1.27 CMYK混合效果及色标样本

5.补色

两种颜色混合在一起产生中性色,则称为这两种颜色互为补色。补色是指两种混合后会产生白色的颜色,比如,红+绿+蓝=白,红+绿=黄,黄+蓝=白,因此,黄色是蓝色的补色。

对于颜料,补色是混合后产生黑色的颜色,比如,红+蓝+黄=黑,黄+蓝=绿,因此,红色是绿色的补色。

在色环上相对的两种颜色互为补色,一种颜色与其补色是强烈对比的,补色搭配会产生强烈的视觉效果。

6.芒塞尔色彩系统(Munsell color system)

人们通常描述颜色是模糊的,比如草绿色、嫩绿等,事实上不同人对于“草绿色”的理解又有细微的差异,因此,就需要一种精确描述颜色的系统。

芒塞尔色彩系统由美国教授A.H.Munsell在20世纪初提出,芒塞尔色彩系统提供了一种数值化的精确描述颜色的方法,该系统使用色相(Hue)、纯度(Chroma)、明度(Value)三个维度来表示色彩,如图1.28所示。

·色相分为红(R)、红黄(YR)、黄(Y)、黄绿(GY)、绿(G)、绿蓝(BG)、蓝(B)、蓝紫(PB)、紫(P)、紫红(RP)这5种主色调与5种中间色调,其中每种色调又分为10级(1~10),其中第5级是该色调的中间色。

·明度分为11级,数值越大,表示明度越高,最小值是0(黑色),最大值是10(白色)。

·纯度最小值是0,理论上没有最大值。数值越大,表示纯度越纯。图1.28 芒塞尔色彩系统1.13 UI设计常见配色方案

只有控制好构成整体色调的色相、明度、纯度关系和面积关系等,才能控制好我们设计的整体色调,通常这是一整套的色彩结构并且是有规律可循的。通过下面几种常见的配色方案就比较容易找到这种规律。

·单色搭配:由一种色相的不同明度组成的搭配,这种搭配很好地体验了明暗的层次感。单色搭配效果如图1.29所示。图1.29 单色搭配效果

·近似色搭配:相邻的二或三种颜色称为近似色,这种搭配比较让人赏心悦目,低对比度,较和谐。近似色搭配效果如图1.30所示。图1.30 近似色搭配效果

·补色搭配:色环中相对的两个色相搭配。颜色对比强烈,传达能量、活力、兴奋等意图,补色中最好让一个颜色多,一个颜色少。补色搭配效果如图1.31所示。图1.31 补色搭配效果

·分裂补色搭配:同时用补色及类比色的方法确定颜色关系,就称为分裂补色。这种搭配,既有类比色的低对比度,又有补色的力量

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载