手机应用程序用户界面的视觉设计研究

手机应用程序用户界面的视觉设计研究

吴倩

（四川工商学院，成都610000）

随着信息社会的到来，科技的进步对于人类生活最大的改变在于影响了我们的日常生活的习惯性方式，比如阅读的纸媒传播途径很大程度上已经被可移动设备端所替代。有形的文字信息接受方式也逐渐被有声系统所分流。这样的发展进步，一方面给我们的生活与工作带来了高效与便捷。另一方面，也使得日常所需接受的信息元素过大过广，从而导致对于所接收信息的筛选难度增大。同时也伴随着信息可视化的要求更为精准，信息可视化的应用对于受众而言更多体现在手机应用程序的方式上。我们经常被类型丰富的APP所吸引，例如户外运动、备忘记录、饮食养生、购物平台等方面的应用程序，实用性高而且视觉辨识度也相对具有个性化，给我们的生活与工作带来了很大程度上的便捷条件，所以对于APP界面的视觉设计合理化与美观化显得尤为重要。

界面的视觉化设计过程包含在UI设计的宏观范畴中。主要解决的是应用程序在受众使用过程中，视觉上所能感知到的图标元素的指代意义设计与应用程序情感表达相匹配的色彩环境要素，或者是图片环境要素。最重要的还包括了整款APP从启动页面到信息注册，再到首页中导航系统的分流设计的合理化和视觉统一化。那么实现这一整体的界面视觉设计要求的具体步骤和设计要点，具体包括哪几方面呢？下面我们详细梳理一番。

一、设计与用户的定位

在做任何视觉设计之前，首先我们需要对方案主题进行主旨性的提炼。针对于界面视觉稿我们需要了解APP开发使用的核心价值体现。也就是它的功能意义所在。把握清楚关于应用程序的服务宗旨，或者它的品牌文化理念之后，关于视觉方面的色彩情感表达把握，就会有较为准确的定位方案做引导。配套的图标风格也可以针对APP的服务宗旨理念，在拟物化、插画风和扁平化等分类风格图标中进行针对性选择。尤其是对于启动图标周边搭配的广告语或者是标志文字，也可以在风格定位的基础之上进行设计、改变，尽量做能够形成与产品方案本身配套的独一无二的文字元素。另一方面，除了对方案设计本身进行定位之外，关于受众人群的潜在目标与有效目标，也需要进行明确的划分。因为目标群体的年龄区别与性别差异亦或是工作类型的不同都会影响APP视觉稿中的视觉要素具体的选用倾向，从而导致所形成的视觉情感表达也会随之具有明显的差异化。

二、信息架构的梳理

在整款应用程序的设计定位以及目标人群定位做到了准确指向性的基础之上，便需要对整款APP的功能作用进行性质划分。这个步骤可以用脑图风暴类的软件进行辅助完成，便于我们提取应用程序功能理念以及文案中的主次关系，形成一种目录化的父子及顺序，层层递进，级级细化。这样做的优势是便于设计师对信息进行分层化处理，能够明确地掌握到每一级界面在不做视觉编排的基础之上，具体要展现怎样的应用程序功能？这一步是对APP产品本身最核心有效的信息化梳理。

三、线框关系图的绘制

在每一个界面具体肩负怎样的APP实现功能清楚梳理的奠基步骤之上。我们需要对具体的每一个界面，进行区块化的布局。比如文字信息与图片信息，两者之间的呼应与相互阐述就需要距离较近的位置分布以及风格站位相似的区块划分。更重要的是每一个界面经过手绘的线稿图进行大致的占位划分之后。我们需要进一步地将每一个界面之间的层次父子级关系通过画笔进行主观的视觉引导及确定。设计线稿虽然在视觉层面上不够精准，但是它的主要目的在于为今后的设计修改以及大概的信息布局进行位置安放，起到便捷的服务作用。

四、低保真原型图的划分

界面设计相区别于传统纸媒平面设计而言在视觉效果的形成方面，具有严谨性和尺寸要求的标准化。在纸媒视觉效果作品中主要讲究的是版式的形成原理。具有版面设计美感的作品基本能够达到视觉效果的设计层次感。但是由于界面主要应用的载体媒介是PC端或移动端设备的显示屏幕，所以存在一定的分辨率、机型、界面尺寸配比问题。直接导致的结果就是我们不能随意的将界面元素进行自由化排版而应该相对局限在线框图梳理过程中形成的占位符区块当中。这整个过程其实就是低保真原型设计的区块占位划分的体现。低保真原型图的特性在于，不要求我们将视觉元素直接放在占位符位置当中，而是用纯色块进行区块划分就可以。主要针对的是解决界面中不同视觉要素安放位置的具体尺寸配比问题。

五、高保真原型图的实现

高保真原型图的特征是在整体应用程序信息梳理合理化基础之上，并且通过低保真原型图的具体占位符位置以及尺寸标注的严格驱使状态下，将界面中常见的图标文字、色彩、信息、图片以及广告标语等视觉要素进行呈现的步骤过程。我们在日常使用APP过程中所能见到的视觉外观效果，是通过刚才的4个步骤完成基础之上的最终一步呈现出来的高保真原型结构。

形成UI视觉界面设计过程呈现效果的以上总结性步骤，分别肩负着性质、和指向性功能各异的产品与市场使用需求。定位统筹影响着应用程序自身的信息架构层次划分，用线框图结构将界面的父子级衍生关系分明化，促进低保真尺寸的诞生，从而协助视觉元素在界面上的合理展示。虽然界面视觉设计在UI设计中只属于其中一种“画龙点睛”的分支，但是相对来说是对于产品本身与受众实现交互效果的最直接途径良好的界面视觉设计能够促使受众人群在使用过程中的良好体验感从而达到APP应用程序自身的使用推广市场占有率。

参考文献

[1]何冬.浅议手机用户就UI界面设计的需求研究[J].山东工业技术,2019(16):207.

[2]刘昕.视觉传达设计中视觉思维模式的创新研究[J/OL].现代交际,2019(20)[2019-05-31].http://kns.cnki.net/kcms/detail/22.1010.C.20190513.2041.004.html.

[3]李丹骏.浅析视觉设计对新媒体运营推广的影响[J].艺术科技,2019,32(04):193.

[4]王婵婧.新媒体时代下视觉传达设计的创新解析[J].艺术科技,2019,32(03):194.

[5]王桂霞,赵洪文.基于Ui界面设计中色彩应用研究[J].新媒体研究,2018,4(22):52-53.

[6]贾业.智能手机UI界面设计研究[J].艺术科技,2018,31(06):179.

[7]吴宜桐.平面视觉语言在手机UI界面设计中的交互研究[D].东北电力大学,2018.

[8]张雪铭,赵晓明.设计美学在移动应用UI界面设计中的体现[J].设计,2018(07):40-41.

[9]巫骑伟.基于企业项目导向的UI界面设计课程设计研究[J].职业,2018(08):77-78.

[10]贺茂恩,卢鹏羽,宋俊飞.色彩心理学在UI界面设计中的研究[J].通讯世界,2018(01):333.