计算机图像处理技术在UI设计的应用

前言:寻找写作灵感?中文期刊网用心挑选的计算机图像处理技术在UI设计的应用,希望能为您的阅读和创作带来灵感,欢迎大家阅读并分享。

计算机图像处理技术在UI设计的应用

摘要:图像数字化时代,计算机图像处理技术广泛应用于各行各业。计算机图像处理技术主要是在Photoshop软件基础上实现的,作为当前设计领域必备的主流软件,Photoshop软件的应用基础比较广泛,在不断改进和完善的过程中,软件的功能也更趋向于实用性和人性化,ui设计主要用到图像处理软件Photoshop,文章通过Photoshop在UI设计中的应用来研究计算机图像处理技术在UI设计中的应用。

关键词:图像处理;用户界面设计;图形图像;图标设计;界面设计

在计算机领域,图像数字化是指利用数字对图像进行记录、处理和保存。数字化图像有两种,一种是矢量图形,一种是位图图像。图形是对场景空间位置、颜色等的描述和定义,通过专门的软件,将人们描述的图形指令变成计算机屏幕上的形状和颜色,形成图形,适用于色彩不丰富、描述轮廓不复杂的对象。图像是通过矩阵表示场景的结构、外观,对画面或者场景投影进行数字化处理。在矩阵中,每个元素都表示画面里的1个像素灰度值,图像不仅能够表达真实照片,还能表达小细节。图像由多个像素排列而成,具有较强的创造力。图像和图形的主要区别是图形可以任意缩放,并且不会变形,但是图像如果变大,就会变形、失真。

1计算机图像处理

计算机图像处理是对图像进行分析、加工和处理,使其满足视觉、心理以及其他要求的技术。图像处理是信号处理在图像域上的一个应用。大多数的图像是以数字形式存储,因而图像处理很多情况下指的是数字图像处理。计算机图像处理的主要内容包括大小的调整、亮度和色彩的调整、图片优化、抠图、文字编排、保存图片和输出图片。

2Photoshop软件相关介绍

Photoshop,简称“PS”,是由AdobeSystems开发和发行的图像处理软件。Photoshop是一款位图处理软件。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作,功能强大,在图像、图形、文字、视频、出版、界面设计等各方面都有涉及。该软件可分为图像编辑、图像合成、校色调色及特效制作等。图像编辑是图像处理的基础,可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等,也可进行复制、去除斑点、修补、修饰图像的残损等。图像合成则是将几幅图像通过图层操作、工具应用,合成完整的、传达明确意义的图像。该软件提供的绘图工具让外来图像与创意很好地融合。校色调色可方便、快捷地对图像的颜色进行明暗、色偏的调整和校正。特效制作在该软件中主要由滤镜、通道及工具综合应用完成,包括图像的特效创意和特效字的制作,常用的传统美术技巧都可借由该软件特效完成。界面设计是一个新兴的领域,由于Photoshop的功能可以满足界面设计的需要,绝大多数设计者都使用该软件进行界面的设计与制作。

3UI设计的相关介绍

用户界面(UserInterface,UI),是系统和用户之间进行交互和信息交换的媒介。界面被设计者设计制作出来,利用它将计算机的内部信息转换成普通用户可以接受的信息形式,是硬件和用户之间的桥梁。用户界面定义广泛,包含了人机交互与图形用户接口,凡参与人类与机械信息交流的领域都存在着用户界面。界面的设计大致包括图形用户界面(GraphicalUserInterface,GUI)交互设计和视觉设计,这里讨论的是计算机图像处理技术在UI设计中的应用,所以只讨论界面视觉设计的范畴,主要包括图标(icon)设计、界面编排、插图设计、切图输出这4个部分。

4计算机图像处理技术在UI设计中的应用

4.1图标设计与制作

图标设计是界面设计中一个重要的组成部分,图标除了是一种图形,它还是一种标识,如同交通指示牌具有指示的作用。在开启软件和使用软件过程中发挥着巨大的作用。图标主要有应用图标和功能图标两类:(1)应用图标,有展示软件形象,功能以及开启软件的功能。(2)功能图标,在使用软件的过程中有交互、指引、入口等功能。可以对图标进行设计和绘制的软件很多,应用最为广泛的是Photoshop和illustrate,Photoshop是位图软件,illustrate是矢量软件,两个软件在绘制图标上各有优势,都拥有数量庞大的使用者。图标本身偏图形一些,所以,作为矢量软件的illustrate有天然的优势,使用illustrate绘制的图标,放大、缩小都不会影响图标的清晰度和造形。在对线条进行删除、扭曲、规律行的变形等处理时非常方便。经过产品的不断优化,illustrateCC以上的版本将以前处理圆角的外部插件内化进软件自身,使绘制图标时重要的圆角处理过程变得更加有效率。illustrate中设置的一些专门对形状进行造形的工具如形状生成器、效果器、极坐标等可以轻松获得漂亮的图形。Photoshop是一个位图软件,Photoshop中也设置了一些矢量工具:钢笔工具的形状模式、工具栏上矩形工具按钮下的一组工具(椭圆工具、圆角矩形工具、直线工具、多边形工具、自定义形状工具)、直接选择工具、路径工具。这些工具都可以让我们绘制出一个矢量图标。在图形造形上确实不如illustrate便利,当然,有经验的设计师会用自己的经验和技巧尽量地弥补这个缺陷,但是造形的效率缺陷仍然存在。即便如此仍有数量不少的设计师使用Photoshop设计制作图标,因为Photoshop有强大的图像处理功能、丰富的图层混合模式、调色功能以及便捷的图层管理功能,可以得到细腻的图像,在绘制图标色彩、图标肌理、图标光影的时候非常方便。

4.2界面设计与制作

Photoshop是目前主流的界面设计工具之一,主要运行终端是PC机。苹果电脑用户主要使用Sketch软件进行界面编排与设计。界面设计主要是图文编排和一些界面的绘制。对于图文编排,Photoshop拥有完善的对齐辅助功能,可以帮助设计者进行准确的对齐操作。Photoshop有齐全的字库,有文字形状化编辑功能。设计者可以使用图层管理不同的界面图形。

4.3插图设计与制作

由于互联网文化的发展,插图被频繁地使用,在进行界面设计时,会涉及不少插图的设计与制作:引导页插图、运营插图、节日插图、活动插图等。或优美、或亲切、或时尚、或温馨的插图,会增加软件的友好度,增加用户黏性。绘制插图时需要较强的图像创作能力和图像处理能力。绘制插图的软件同样很多:Photoshop,illustrate(擅长矢量插图的创作)、专项绘图软件SAI(软件体量轻盈,对计算机的资源占用小)。计算机图像处理使用的Photoshop软件在绘图功能上不输上述软件,有数量可观的用户使用它创作绘制插画。

4.4切图输出

UI设计输出的界面和图标,最终由编程人员应用到软件中。在进行编程之前,需要将界面和图标进行切图。切图的作用主要是两个:(1)使界面中的各个元素独立,便于写入程序。(2)配适各种尺寸的终端以及操作系统。目前,主流的操作系统有苹果系统和安卓系统,每一个操作系统有不同的设计规范。这两大系统下的移动产品终端尺寸也是多种多样,通常需要将设计原图切成2倍大、3倍大的切图来配适各种尺寸的终端。

5在教学实践中的“UI设计”课程教学改革

基于多年的“UI设计”课程教学实践,以及多年对该领域的研究,笔者认为在课程内容上,应改变以往的以视觉设计为主,单纯将图标绘制和界面设计作为主要教学重点的课程内容,增加产品创意、UI交互设计、用户体验设计、图标动效设计与制作、界面动效设计与制作、插图绘制等内容。在课程设置上,应根据专业和学校的实际情况选择性增设“UI交互设计”“插图设计”“动效设计”“游戏UI设计”课程。在教学评价方面,改变单一的评价方式,除了将UI设计作品作为评价主体外,增加对小组报告形式、讨论形式、论文形式的教学成果评价,将学习成果评价与学习过程评价相结合。

作者:耿甜 胡垂立 单位:广州工商学院