第1章 开启界面设计这扇窗
本章主要讲解初识界面设计的基本知识,从各专业名词剖析,引导读者逐步迈向界面设计,让零基础的读者通过本章的学习对界面设计有一个全新的认识并为以后的设计界面打下坚实基础,同时本章中采用的名词大多比较容易理解,可以快速掌握。
了解手机UI设计相关基本概念
了解各类智能手机操作系统
初识UI界面设计常用的软件
了解屏幕尺寸相关的术语和概念
认识图标格式
掌握低保真与高保真原型设计原理
1.1 手机UI设计相关基本概念
UI即User Interface的简称,中文称之为用户界面,亦指用户界面工程。UI设计是指:建立在用户体验、人机交互基础之上对各种软件、电子通信设备、应用及网站等界面的设计;界面设计的目的是让使用者在完成自己操作过程之前与操作的对象保持一种简单、效率的交流。
理想的UI设计能够让用户在与界面交流的过程中保持一种愉悦、理解、简单直接的使用体验,所以在设计过程中通过技术功能的实现与视觉、感觉之间找到完美的平衡点才能做出成功的设计以适应用户的最终需求,同时UI设计应当遵循友好、易用、可识别性等原则。
如今,用户界面无所不在,它已经融入到人们的生活、工作和学习当中,从移动电话、平板电脑到工作中必不可少的PC甚至汽车、家电等,例如如图1.1所示的各类应用的UI界面。
图1.1 各种UI界面效果
1.2 智能手机操作系统有哪些
现今主流的智能手机操作系统主要有Android、iOS和Windows Phone三类,这三类系统都有各自的特点。
1. Android
Android中文名称为安卓,Android是一个基于开放源代码的Linux平台衍生而来的操作系统,Android最初是由一家小型的公司创建的,后来被谷歌所收购,它也是当下最为流行的一款智能手机操作系统。其显著特点在于它是一款基于开放源代码的操作系统,这句话可以理解为它相比其他操作系统具有超强的可扩展性,如图1.2所示为装载Android操作系统的手机。
图1.2 装载Android操作系统的手机
2. iOS
iOS是源自苹果公司Mac机器装载的OS X系统发展而来的一款智能操作系统,目前为止最新为7.0版本,此款操作系统是苹果公司独家开发并且只使用于自家的iPhone、iPod Touch、iPad等设备上。相比其他智能手机操作系统,iOS智能手机操作系统的流畅性、完美的优化及安全等特性是其他操作系统无法比拟的,同时配合苹果公司出色的工业设计一直以来都以高端、上档次为代名词,不过由于它是采用封闭源代码开发,所以在拓展性上要略显逊色,如图1.3所示为苹果公司生产的装载iOS智能操作系统的设备。
. 图1.3 装载iOS智能操作系统的设备
3. Windows Phone
Windows Phone(简称WP)是微软发布的一款移动操作系统,由于它是一款十分年轻的操作系统,所以Windows Phone相比较其他操作系统而言具有桌面定制、图标拖曳、滑动控制等一系列前卫的操作体验。由于是初入智能手机市场,所以在份额上暂无法与安卓及iOS相比,但是正是因为年轻,所以此款操作系统有很多新奇的功能及操作,同时也是因为源自微软,在与PC端的Windows操作系统互通性上占有很大的优势,如图1.4所示为装载Windows Phone的几款智能手机。
图1.4 装载Windows Phone的几款智能手机
1.3 UI界面设计常用的软件
如今UI界面设计中常用的主要软件有Adobe公司的Photoshop和Illustrator、Corel公司的CorelDRAW等,在这些软件中以Photoshop和Illustrator最为常用。
1. Photoshop
Photoshop是Adobe公司旗下最为出名的图像处理软件之一,集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件,深受广大平面设计人员和电脑美术爱好者的喜爱。这款美国Adobe公司的软件一直是图像处理领域的巨无霸,在出版印刷、广告设计、美术创意、图像编辑等领域得到了极为广泛的应用。
Photoshop的专长在于图像处理,而不是图形创作。有必要区分一下这两个概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果,其重点在于对图像的处理加工;图形创作软件是按照自己的构思创意,使用矢量图形来设计图形,这类软件主要有Adobe公司的另一个著名软件Illustrator和Macromedia公司的Freehand,不过Freehand已经快要淡出历史舞台了。
平面设计是Photoshop应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招贴、海报,这些具有丰富图像的平面印刷品,基本上都需要Photoshop软件对图像进行处理。
2. Illustrator
Illustrator是美国Adobe公司推出的专业矢量绘图工具,是出版、多媒体和在线图像的工业标准矢量插画软件。Illustrator是由Adobe公司出品,英文全称是Adobe Systems Inc,始创于 1982 年,是广告、印刷、出版和Web领域首屈一指的图形设计、出版和成像软件设计公司,同时也是世界上第二大桌面软件公司。公司为图形设计人员、专业出版人员、文档处理机构和Web设计人员,以及商业用户和消费者提供了首屈一指的软件。
无论是生产印刷出版线稿的设计者和专业插画家、生产多媒体图像的艺术家,还是互联网页或在线内容的制作者,都会发现Illustrator 不仅仅是一个艺术产品工具,能适合大部分小型设计到大型的复杂项目。
3. CorelDRAW
CorelDRAW Graphics Suite是一款由世界顶尖软件公司之一的加拿大的Corel公司开发的图形图像软件。集矢量图形设计、矢量动画、页面设计、网站制作、位图编辑、印刷排版、文字编辑处理和图形高品质输出于一体的平面设计软件,深受广大平面设计人员的喜爱,目前主要在广告制作、图书出版等方面得到广泛的应用,功能与其类似的软件有Illustrator、Freehand。
CorelDRAW图像软件是一套屡获殊荣的图形、图像编辑软件,它包含两个绘图应用程序:一个用于矢量图及页面设计;一个用于图像编辑。这套绘图软件组合带给用户强大的交互式工具,使用户可创作出多种富于动感的特殊效果及点阵图像即时效果,在简单的操作中就可得到实现,而不会丢失当前的工作。通过CorelDRAW的全方位设计及网页功能可以融合到用户现有的设计方案中,灵活性十足。
CorelDRAW软件非凡的设计能力广泛地应用于商标设计、标志制作、模型绘制、插图描画、排版及分色输出等诸多领域。其被喜爱的程度可用事实说明,用于商业设计和美术设计的PC电脑上几乎都安装了CorelDRAW。CorelDRAW以其强大的功能及友好界面一直以来在标志制作、模型绘制、排版及分色输出等诸多领域都能看到它的身影,同时它的排版功能也十分强大,但是由于它与Photoshop、Illustrator不是同一家公司软件,所以在软件操作上互通性稍差。
对于目前刚流行的UI界面设计,由于没有具有针对性的专业设计软件,所以大部分设计师会选择使用这3款软件来制作UI界面,如图1.5所示。
图1.5 不同设计软件的界面效果
1.4 屏幕尺寸相关的术语和概念
1. 屏幕尺寸
屏幕的物理尺寸,是以屏幕的对角线长度作为依据并且以英寸为单位。现今主流的手机屏幕尺寸主要有3.5,4.0,4.7,5.0,更大的有6.0,7.0等大屏幕的手机往往是跨界产品并非主流,而平板电脑常见的屏幕大小主要有7.0,8.0,9.7,10.1等。
2. 分辨率
分辨率是指屏幕上拥有的像素的总数。像素数量越多就越清晰,分辩率就越高,现在某些平板电脑的屏幕分辩率已经高达2048px×1536px,号称已经超出了人类眼睛的观察极限,这类设备的屏幕相当清晰。
主流的屏幕分辩率如下:
WVGA854:854px×480px
WVGA800:800px×480px
HVGA:640px×480px
QVGA:320px×240px
WQVGA432:432px×240px
WQVGA400:400px×240px
WXGA:800px×1280px
3. DPI
DPI是指每英寸的像素,类似于密度,即每英寸图片上的像素点数量,用来表示图片的清晰度,DPI越高屏幕自然越精细。
4. 屏幕密度
以Android系统为例,屏幕密度分为低密度(idpi)、中密度(mdpi)、高密度(hdpi),如表1所示表示在不同的密度下图标制作的大小。
表1
图标类型 标准屏幕尺寸
低密度(idpi) 中密度(mdpi) 高密度(hdpi)
Launcher 36px×36px 48px×48px 72px×72px
Menu 36px×36px 48px×48px 72px×72px
Status Bar 24px×24px 32px×32px 48px×48px
Tab 24px×24px 32px×32px 48px×48px
Dialog 24px×24px 32px×32px 48px×48px
List View 24px×24px 32px×32px 48px×48px
表2中为iOS图标的大小,iOS设备中的屏幕密度默认为中密度(mdpi),所以并不会像Android那样细分,在设计界面的时候只需要按照设备的版本来区分即可。
表2
图标类型 标准屏幕尺寸
设备 iPhone 4(4s) iPod touch iPad
Launcher 114px×114px 57px×57px 72px×72px
设备 29px×29px 29px×29px 29px×29px
spotlight 29px×29px 29px×29px 50px×50px
App store 512px×512px 512px×512px 512px×512px
相比Android和iOS设备,Windows Phone的图标就十分简单了,如表3所示是Windows Phone 7系统中的图标尺寸。
表3
图标类型 标准屏幕尺寸
应用工具栏 48px×48px
菜单图标 173px×73px
px(Pixels,像素):对应屏幕上的实际像素点。
in(Inches,英寸):屏幕物理长度单位。
mm(Millimeters ,毫米):屏幕物理长度单位。
pt(Points,磅):屏幕物理长度单位,1/72in。
dp(与密度无关的像素):逻辑长度单位,比如在 160 dpi 屏幕上,1dp=1px=1/160in。随着密度变化,对应的像素数量也变化。
1.5 界面设计常见图标格式
界面设计常用的格式主要有以下几种:
1. JPEG
JPEG格式是一种位图文件格式,JPEG的缩写是JPG,JPEG几乎不同于当前使用的任何一种数字压缩方法,它无法重建原始图像。由于JPEG优异的品质和杰出的表现,因此应用非常广泛,特别是在网络和光盘读物上。目前各类浏览器均支持JPEG这种图像格式,因为JPEG格式的文件尺寸较小,下载速度快,使得网页有可能以较短的下载时间提供大量美观的图像,JPEG同时也就顺理成章地成为网络上最受欢迎的图像格式,但是不支持透明背景。
2. GIF
GIF(Graphics Interchange Format)的原义是“图像互换格式”,是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右,它不属于任何应用程序。目前几乎所有相关软件都支持它,公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画,GIF格式自1987年由CompuServe公司引入后,因其体积小而成像相对清晰,特别适合于初期慢速的互联网,而因此大受欢迎。支持透明背景显示,可以以动态形式存在,制作动态图像时会用到这种格式。
3. 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程序中是因为它压缩比高,生成文件容量小。它是一种在网页设计中常的格式并且支持透明样式显示,相同图像相比其他两种格式体积稍大,如图1.6所示为3种不同格式的显示效果。
图1.6 3种不同格式的显示效果
1.6 低保真与高保真原型设计
低保真原型设计是对产品原始大体框架的一个模拟,它停留在产品的外部特征和功能构架上,可以通过简单的设计工具快速制作出来,主要表现最初的设计概念和思路,最常用的方法就是利用铅笔、草图等工具绘制线框图来表达最初的设计框架,如图1.7所示为低保真原型的线框图。
图1.7 低保真原型的线框图
高保真原型设计是全部功能及完整互动的原型设计,它可以展示产品/界面主要或全部的功能和工作流程,与用户之间具有完全的互动性。高保真原型的设计是建立在低保真原型设计的基础之上的,在进行设计的时候会以原始的低保真原型为基础,如图1.8所示为高保真原型设计的效果。
图1.8 高保真原型设计的效果
低保真到高保真原型设计图释如图1.9所示。
图1.9 低保真到高保真原型设计图释
1.7 色彩基础知识
在五彩缤纷的大千世界里,人们可以感受到纷繁复杂的色彩,比如天空、草原、花朵等都有它们各自的色彩。对于一个设计师来说,要设计出好的作品,必须学会在作品中灵活、巧妙地运用色彩,使作品达到艺术表现效果,需要掌握色彩的基础知识,下面就来详细讲解这些知识。
1. 三原色
原色又称为基色,三基色(三原色)是指红(R)、绿(G)、蓝(B)三色,是调配其他色彩的基本色。原色的色纯度最高,最纯净、最鲜艳。可以调配出绝大多数色彩,而其他颜色不能调配出三原色,如图1.10所示。
加色三原色基于加色法原理。人的眼睛是根据所看见的光的波长来识别颜色的。可见光谱中的大部分颜色可以由三种基本色光按不同的比例混合而成,这三种基本色光的颜色就是红(Red)、绿(Green)、蓝(Blue)三原色光。这三种光以相同的比例混合且达到一定的强度,就呈现白色;若三种光的强度均为零,就是黑色。这就是加色法原理,加色法原理被广泛应用于电视机、监视器等主动发光的产品中。
图1.10 三原色及色标样本
减色原色是指一些颜料,当按照不同的组合将这些颜料添加在一起时,可以创建一个色谱。减色原色基于减色法原理。与显示器不同,在打印、印刷、油漆、绘画等靠介质表面的反射被动发光的场合,物体所呈现的颜色是光源中被颜料吸收后所剩余的部分,所以其成色的原理叫做减色法原理。打印机使用减色原色(青色、洋红色、黄色和黑色颜料)并通过减色混合来生成颜色。减色法原理被广泛应用于各种被动发光的场合。在减色法原理中的三原色颜料分别是青(Cyan)、品红(Magenta)和黄(Yellow),如图1.11所示。通常所说的CMYK模式就是基于这种原理。
图1.11 CMYK混合效果及色标样本
2. 色彩的分类
色彩从属性上分,一般可分为无彩色和有彩色两种。
(1)无彩色
无彩色是指白色、黑色和由黑、白两色相互调和而形成的各种深浅不同的灰色系列,即反射白光的色彩。从物理学的角度看,它们不包括在可见光谱之中,故能称之为无彩色。
无彩色按照一定的变化规律,可以排成一系列。由白色渐变到浅灰、中灰到黑色,色度学上称此为黑白系列。黑白系列中由白到黑的变化,可以用一条水平轴表示,一端为白,一端为黑,中间有各种过渡的灰色,如图1.12所示。
无彩色系中的所有颜色只有一种基本性质,即明度。它们不具备色相和纯度的性质,也就是说它们的色相和纯度从理论上来说都等于零。明度的变化能使无彩色系呈现出梯度层次的中间过渡色,色彩的明度可用黑白度来表示,愈接近白色,明度愈高;愈接近黑色,明度愈低,无彩色设计示例如图1.13所示。
图1.12 无彩色过渡效果
图1.13 无彩色设计示例效果
(2)有彩色
有彩色是指包括在可见光谱中的全部色彩,有彩色的物理色彩有6种基本色:红、橙、黄、绿、蓝、紫。基本色之间不同量的混合、基本色与无彩色之间不同量的混合所产生的千千万万种色彩都属于有彩色系。有彩色是由光的波长和振幅决定的,波长决定色相,振幅决定色调。这6种基本色中,一般称红、黄、蓝为三原色;橙(红加黄)、绿(黄加蓝)、紫(蓝加红)为间色。从中可以看到,这6种基本色的排列中原色总是间隔一个间色,所以,只需要记住基本色就可以区分原色和间色,如图1.14所示。
有彩色具有色相、明度、饱和度(也称彩度、纯度、艳度)的变化,色相、明度、饱和度是色彩最基本的三要素,在色彩学上也称为色彩的三属性。将有彩色系按顺序排成一个圆形,这便成为色相环。色环对于了解色彩之间的关系具有很大的作用,有彩色设计示例如图1.15所示。
图1.14 有彩色效果
图1.15 有彩色设计示例
3. 色彩概念
在平面设计中,经常接触到有关图像的色相(Hue)、明度(Brightness )和饱和度(Saturation)的色彩概念,从HSB颜色模型中可以看出这些概念的基本情况,如图1.16所示。
图1.16 HSB颜色模型
4. 色相
色相,是指各类色彩的相貌称谓,是区别色彩种类的名称。如红、黄、绿、蓝、青等都代表一种具体的色相。色相是一种颜色区别于其他颜色最显著的特性,在0~360°的标准色环上,按位置度量色相,如图1.17所示。色相体现着色彩外向的性格,是色彩的灵魂。
图1.17 色相及色相环
因色相不同而形成的色彩对比叫色相对比。以色相环为依据,颜色在色相环上的距离远近决定色相的强弱对比;距离越近,色相对比越弱;距离越远,色相对比越强烈,如图1.18所示。
色相对比一般包括对比色对比、互补色对比、邻近色对比和同类色对比。这些对比中互补色对比是最强烈鲜明的,比如黑白对比就是互补对比;而同类色对比是最弱的对比,同类色对比是同一色相里的不同明度和纯度的色彩对比,因为它是距离最小的色相,属于模糊难分的色相,色相设计示例如图1.19所示。
图1.18 色相对比效果
图1.19 色相设计示例
5. 明度
明度指的是色彩的明暗程度。有时也可称为亮度或深浅度。在无彩色中,最高明度为白,最低明度为黑色。在有彩色中,任何一种色相中都有着一个明度特征。不同色相的明度也不同,黄色明度最高,紫色明度最低。任何一种色相如果加入白色,都会提高明度,白色成分愈多,明度也就愈高;任何一种色相如果加入黑色,明度相对降低,黑色愈多,明度愈低,如图1.20所示。
明度是全部色彩都有的属性,明度关系是搭配色彩的基础,在设计中,明度最适宜于表现物体的立体感与空间感。
图1.20 明度效果
色相之间由于色彩明暗差别而产生的对比,称为明度对比,有时也叫黑白度对比。色彩对比的强弱决定与明度差别大小,明度差别越大,对比越强;明度差别越小,对比越弱。利用明度的对比可以很好地表现色彩的层次与空间关系。
明度对比越强的色彩最明快、清晰,最具有刺激性;明度对比处于中等的色彩刺激性相对小些,表现比较明快,所以通常用在室内装饰、服装设计和包装装潢上;而处于最低等的明度对比不具备刺激性,多使用在柔美、含蓄的设计中,如图1.21所示为明度对比及设计应用。
图1.21 明度对比及设计应用
6. 饱和度
饱和度是指色彩的强度或纯净程度,也称彩度、纯度、艳度或色度。对色彩的饱和度进行调整也就是调整图像的彩度。饱和度表示色相中灰色分量所占的比例,它使用从 0% (灰色)至 100% 的百分比来度量,当饱和度降低为0时,则会变成一个灰色图像,增加饱和度会增加其彩度。在标准色轮上,饱和度从中心到边缘递增。饱和度受到屏幕亮度和对比度的双重影响,一般亮度好对比度高的屏幕可以得到很好的饱和度,如图1.22所示。
图1.22 饱和度效果
色相之间因饱和度的不同而形成的对比叫纯度对比。很难划分高、中、低纯度的统一标准。笼统的可以这样理解,将一种颜色(比如红色)与黑色相混成9个等差级别,1~3为低纯度色,4~6为中纯度色,7~9为高纯度色。
纯度相近的色彩对比,如3级以内的对比叫纯度弱对比,纯度弱对比的画面视觉效果比较弱,形象的清晰度较低,适合长时间及近距离观看;纯度相差4~6级的色彩对比叫纯度中对比,纯度中对比是最和谐的,画面效果含蓄丰富,主次分明;纯度相差7~9级的色彩对比叫纯度强对比,纯度强对比会出现鲜的更鲜、浊的更浊的现象,画面对比明朗、富有生气,色彩认知度也较高,纯度对比及设计应用如图1.23所示。
图1.23 纯度对比及设计应用
7. 色彩的性格
当人们看到颜色时,对它所描绘的印象中具有很多共通性,比方说当人们看到红色、橙色或黄色会产生温暖感;当人们看到海水或月光时,会产生清爽的感觉,于是当人们看到青、绿之类的颜色,也相应会产生凉爽感;由此可见,色彩的温度感不过是人们的习惯反映,是人们长期实践的结果。
人们将红、橙之类的颜色叫暖色;把青、青绿的颜色叫冷色。红紫到黄绿属暖色,青绿到青属冷色,以青色为最冷,紫色是由属于暖色的红和属于冷色的青色组合成,所以紫和绿被称为温色,黑、白、灰、金、银等色称为中性色。
需要注意的是,色彩的冷暖是相对的,比如无彩色(如黑、白)与有彩色(黄、绿等)后者比前者暖;而如果由无彩色本身看,黑色比白色暖;从有彩色来看,同一色彩中含红、橙、黄成分偏多时偏暖;含青的成分偏多时偏冷;所以说,色彩的冷暖并不是绝对的,如图1.24所示为色彩性格及设计应用。
图1.24 色彩性格及设计应用
1.8 界面设计配色秘笈
无论在任何设计领域,颜色的搭配永远都是至关重要的,优秀的配色不仅带给用户完美的体验,更能让使用者的心情舒畅,提升整个应用的价值,下面是几种常见的配色对用户的影响。
1. 百搭黑白灰
提起黑白灰这三种色彩,人们总是觉得在任何地方都离不开它们,也是最常见到的色彩,它们既能是和任何色彩作百搭的辅助色,同时又能作为主色调。通过对一些流行应用的观察,它们的主色调大多离不开这三种颜色,白色具有洁白、纯真、清洁的感受;而黑色则能带给人一种深沉、神秘、压抑的感受;灰色则具有中庸、平凡、中立和高雅的感觉,所以说在搭配方面这三种颜色几乎是万能的百搭色,同时最强的可识别性也是黑白灰配色里的一大特点,如图1.25所示为黑白灰配色效果展示。
图1.25 黑白灰配色效果展示
2. 甜美温暖橙
橙色是一种界于红色和黄色之间的一种色彩,它不同于大红色过于刺眼又比黄色更加富有视觉冲击感,在设计过程中这种色彩既可以大面积使用,同样可以作为搭配色用来点缀,常与黄色、红色、白色等搭配,如果和绿色搭配则给人一种清新甜美的感觉,在大面积的橙色中稍添加绿色可以起到一种画龙点睛的效果,这样可以避免只使用一种橙色而引起的视觉疲劳,如图1.26所示为甜美温暖橙配色效果展示。
图1.26 甜美温暖橙配色效果展示
3. 气质冷艳蓝
蓝色给人的第一感觉就是舒适,没有过多的刺激感,给人一种非常直观的清新、静谧、专业、冷静的感觉,同时蓝色也很容易和别的色彩搭配。在界面设计过程中可以把蓝色做的相对大牌,也可以用得趋于小清新,假如在搭配的过程中找不出别的颜色搭配,此时选用蓝色总是相对安全的色彩,在搭配时通常和黄色、红色、白色、黑色等搭配。蓝色是冷色系里最典型的代表,而红色、黄色、橙色则是暖色系里最典型的代表,这两种冷暖色系对比之下,会更加具有跳跃感,这时感觉一种强烈的兴奋感,很容易感染用户的情绪;蓝色和白色的搭配会显得更清新、素雅、极具品质感,蓝色和黑色的搭配类似于红色和黑色搭配则能产生一种极强的时尚感,能瞬间让人眼前一亮,通常在做一些质感类图形图标设计时用到较多,如图1.27所示为气质冷艳蓝配色效果展示。
图1.27 气质冷艳蓝配色效果展示
4. 清新自然绿
和蓝色一样,绿色是一个和大自然相关的灵活色彩,它与不同的颜色进行搭配时带给人不同的心理感受。柠檬绿代表了一种潮流,橄榄绿则显得十分平和贴近,而淡绿色可以给人一种清爽的春天的感觉,紫色和绿色是奇妙的搭配,紫色神秘又成熟,绿色又代表希望和清新,所以它是一种非常奇妙的颜色,如图1.28所示为清新自然绿配色效果展示。
图1.28 清新自然绿配色效果展示
5. 热情狂热红
大红色在界面设计中是一种不常见的颜色,一般作为点缀色使用,表示警告、强调、警示,使用过度的话容易造成视觉疲劳。和黄色搭配是中国比较传统的喜庆搭配。这种艳丽浓重的色彩向来会让我们想到节日庆典,因此喜庆感会更强。而红色和白色搭配相对会让人感觉更干净整洁,也容易体现出应用的品质感;红色和黑色的搭配比较常见,会带给人一种强烈的时尚气质感,比如大红和纯黑搭配能带给人一种炫酷的感觉,红色和橙色的搭配则给人一种甜美的感觉,如图1.29所示为热情狂热红配色效果展示。
图1.29 热情狂热红配色效果展示
6. 靓丽醒目黄
黄色亮度最高,多用于大面积配色中的点睛色,它没有红色那么抢眼和俗气,确可以更加柔和地让人产生刺激感,在进行配色的过程中,通常和白色、黑色、白色、蓝色等进行搭配,黄色和黑色、白色的对比较强,容易形成较高层次的对比,突出主题;而与黄色、蓝色、紫色搭配,除强烈地对比刺激眼球外,还能够有较强的轻快时尚感,在日常店铺装修中常用于各种促俏活动的页面并与红色进行搭配,这样能起到欢快、明亮的感觉,并且活跃度较高,如图1.30所示为靓丽醒目黄配色效果展示。
图1.30 靓丽醒目黄配色效果展示