《交互界面设计》课件-1.5UI设计中图片与排版

双击安装字体，安装后重启PPT请安装字体山东科技职业学院交互界面设计UIdesignUI设计UIdesign山东科技职业学院1.5UI设计中图片与排版讲课人：王萃学习目的1.了解UI设计的图片类别与格式2.了解UI设计的图片比例3.掌握UI设计的图片与排版UI设计的图片类别与格式1.5.1UI设计的图片类别与格式一、UI设计的图片类别1.位图位图也称栅格图像，我们用数码相机拍摄的照片、扫描仪扫描的图片，及在计算机中抓取的图像都属于位图。

位图的特点是可以表现色彩的细微过渡，产生逼真的效果，但同时也会占用较多的存储空间。正常显示位图放大600%的位图

从图可以看出位图是由紧密排列的像素组成的，在Photoshop中处理的图像一般是位图。1.5.1UI设计的图片类别与格式一、UI设计的图片类别2.矢量图矢量图是图形软件通过数学的向量方式进行计算得到的图形，它与分辨率无关，可任意缩放、旋转，而不影响图像的清晰度和光滑度。从右图可以看出，图形依然光滑、清晰。因此，设计师常用矢量软件制作图标、Logo等需要经常缩放的图形。正常显示矢量图放大600%的矢量图1.5.1UI设计的图片类别与格式二、图片的格式图片是UI设计中很常见的元素，根据图片的用途将其可分为多种格式。PSDGIFJPG/JPEGPNGAI1.5.1UI设计的图片类别与格式二、图片的格式1.PSD

PSD是Adobe公司的图形设计软件Photoshop的专用格式。PSD文件可以存储成RGB或CMYK模式，还能够自定义颜色数并加以存储，还可以保存Photoshop的图层、通道、路径等信息，是唯一能够支持全部图像色彩模式的格式。

PSD格式文件很少为其它软件和工具所支持，在图像制作完成后，通常需要转化为一些比较通用的图像格式，以便于输出到其它软件中继续编辑。1.5.1UI设计的图片类别与格式二、图片的格式2.GIF

对于灰度图像表现最佳；采用改进的LZW压缩算法处理图像数据；调色板数据有通用调色板和局部调色板之分，有不同的颜色取值；

最多存储256色。GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。1.5.1UI设计的图片类别与格式二、图片的格式3.JPEGJPEG格式也称JPG格式，支持CMYK、RGB、灰度等多种颜色模式，多用于网页素材图像。它采用有损压缩的算法，从而使文件体积更小，下载时间更短。JPEG格式适合色彩丰富，尺寸较大的图片。1.5.1UI设计的图片类别与格式二、图片的格式4.PNGPNG格式采用无损压缩，支持透明背景显示，iOS系统和Android系统都使用PNG格式作为控件和图标的标准格式。它是目前界面设计的主流图片格式。PNG8适合作为颜色简单，尺寸较小的图片格式；PNG24适合作为APP中各种自定义的控件图标等。1.5.1UI设计的图片类别与格式二、图片的格式5.AIAI格式文件是一种矢量图形文件，适用于Adobe公司的Illustrator软件的输出格式，与PSD格式文件相同，AI文件也是一种分层文件，用户可以对图形内所存在的层进行操作，所不同的是AI格式文件是基于矢量输出，可在任何尺寸大小下按最高分辨率输出，而PSD文件是基于位图输出。与AI格式类似基于矢量输出的格式还有EPS、WMF、CDR等。UI设计的图片比例1.5.2UI设计的图片比例01图片的使用规范了解图片的格式后，设计人员还需要掌握图片的使用规范，包括图片的比例与尺寸规范。图片的比例图片的尺寸规范在UI设计中，对于图片的比例没有严格的规定，设计人员可根据需要进行调整。App个人中心界面的用户头像大小多为144px×144px和120px×120px个人资料界面的用户头像大小多为96px×96px消息列表界面的用户头像大小多为80px×80px帖子详情页界面的用户头像大小多为44px×44px和60px×60px。1.5.2UI设计的图片比例02常见图片长宽比例1:1是比较常见的图片设计比例，相同的长宽比例将构图变得简单而规范，常用于产品、头像、特写等展示模块。1比11.5.2UI设计的图片比例02常见图片长宽比例4:3是常用图片比例之一，通常该比例的图片会作为界面的主体，或在文章中以插图的形式出现。4比31.5.2UI设计的图片比例02常见图片长宽比例

该比例的图片可以呈现观影般的视觉效果，是很多新闻资讯或视频播放APP常用的尺寸之一，能带给用户开阔的视觉体验。16比9UI设计的图片与排版1.5.3UI设计的图片与排版01平衡构图一般情况下，为保证界面平衡，设计人员会使用左图右文、左文右图、上图下文、左中右三分构图等多种构图方式，以使界面整体的轻重感保持平衡。1.5.3UI设计的图片与排版02放射构图放射式构图是指以主体物为核心，将核心作为视觉的中心点并向四周扩散的一种构图方式。这种构图方式有利于凸显位于界面中间内容或功能点，同时产生一种导向作用，将用户的注意力快速聚集到展现的主体物上。1.5.3UI设计的图片与排版03九宫格构图九宫格构图也称井字构图，是指在画面上横、竖各画两条与边平行、等分的直线，将画面分成9个相等的方块。UI设计中的九宫格构图主要运用于App的分类界面，可以让功能分区更加明确和突出。1.5.3UI设计的图片与排版04三角构图三角形构图是以3个视觉中心为支点位置来构成的几何面，能让界面保持平衡稳定。其形式既可以是正三角形，也可以倒三角形或者斜三角形。下图所示的3个界面即采用了三角形构图。1.5.3UI设计的图片与排版05F型构图

F形构图常用于Banner界面中，能让标题更加吸引视线，使整个界面更有张力，产品信息更为简单、明确。F形的构图方式灵活多样，也符合用户的视觉审美要求。如图所示的网站Banner界面中即采用了F形构图。1.5.3UI设计的图片与排版06S型构图在进行UI设计时，对用户的视觉流向的预测非常重要，可以让用户获得更加自然、舒适的阅读体验。S形构图在引导视线的作用上优势非常明显。它可以将图片和文字完美地结合在一起，再搭配大量的留白，给用户一种轻松、舒畅的感觉。1.5.3UI设计的图片与排版07满版构图以图片作为主体或背景铺满整个画面，常搭配文字信息或图标（icon）修饰，常用于登录界面。1.5.3UI设计的图片与排版08通栏构图图片与整体页面的宽度相同，而高度为其几分之一甚至更小的一种图片排版方式。用于强调和展示重要的