App开发中的UI设计技巧

张欣悦

摘要：移动4G时代的到来让人们越来越离不开手机，离不开手机应用。该文首先介绍了4G时代UI设计的重要性和UI设计的特点；分析了移动设备的特点。并在此基础上将App开发中的UI设计技巧进行了简单的总结和分析。

关键词：UI；App；界面设计

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）02-0082-02

在3G商用近五年之后，工信部正式发放4G牌照，国内的三大电信运营商中国移动、中国电信、中国联通，拿到了启动4G商用的资格。4G网络正式在中国推出。中国的4G时代随之到来，移动4G的到来成为了众多企业发展的新风标。以前人们在电脑上的很多工作都转移到了手机上来，手机上购物、缴费、手机导航、炒股、看新闻等等，人们对手机的依赖程度日益增大。政府机构、事业单位、各大银行纷纷开发了相应业务的手机端应用，而各大企业尤其是互联网企业更是重视移动端各种App应用的开发。

1 UI设计的重要性

UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。如果App的开发仅限于编码开发实现必要功能，图形化的界面和简单易用的交互式方式没有得到体现，那么这类App将没有任何市场竞争力。所以，界面设计不仅仅是简单的美术绘画，他在艺术设计的基础上需要考量使用者的喜好、使用的环境、使用的人群特点等众多因素，最终使用者的用户体验是评价UI设计好坏的关键因素。因此，界面设计与使用人群分析要紧密结合。

随着App应用的不断普及，具有类似功能的App应用数量繁多，企业怎样才能让自身的App应用在让人应接不暇的App中脱颖而出？友好的界面设计是提升用户体验的有效方法之一。一款成熟的App应用不仅仅要具有实用的功能、安全的保障，还要具有令人愉悦、方便使用的用户界面。好的UI设计具有以下特点：

1）具有友好的操作界面，能让使用者操作便捷，易上手。用户体验因人而异，然而好的用户界面一定是简单、易用的，能引导用户顺利完成相应的操作。

2）让App应用有自己的个性和特色，进而提高品牌的识别度。如苹果手机中的基本应用一样，具有自己鲜明的风格。

3）能延长App的使用寿命，让应用深入人心，提升在App市场上的竞争力。

2 移动设备的特点

与电脑相比，移动设备的屏幕要小很多，因此显示的内容要尽量保持内容简洁。简单直观的交互能帮助用户快速地完成任务。由于移动设备的便携性，用户很有可能是在移动的环境下进行设备的操作，而无线网络通常不太不稳定，所以用户在一次屏幕更新后，应该尽量获得较多的信息，因此，显示的控件数量或有效信息也不能过少。

不同品牌不同型号的移动设备有不同的屏幕尺寸和分辨率，在设计前需要针对不同的移动设备进行相应的测试。分辨率和像素是我们需要测试的两个必要指标。屏幕分辨率通常是对经典VGA分辨率的修改，经典VGA分辨率是640*480。现在，移动手机端最大的尺寸是800*480（WVGA）。小一点的尺寸是竖屏，大一点的尺寸是横屏。目前很多移动手机端可以改变方向。大多数移动手机端的屏幕尺寸以240*320或者QVGA为主。也有许多公司涉及1920*1080的比例或者超高的清晰度。对于屏幕的像素，常见的几个标准像素密度有：Idpi（像素密度：100dpi-140dpi）、mdpi（像素密度：140dpi-190dpi）、hdpi（像素密度：大于等于190dpi）和xhdpi（像素密度：320dpi）。

3 App开发中的UI设计

一个完整的App设计由编码设计与UI设计构成。长期以来，开发者都重视功能的开发而忽略了UI的设计，导致很多实用性很强的App用户下载安装后不会用，或者觉得操作复杂不好用。由此，界面设计慢慢被互联网企业所重视，认为界面设计也是产品的重要卖点。

界面的设计大致需要经过目标人群确定、用户需求调查、交互式流程设计、界面风格定位功能icon的设计、整体视觉效果的优化和应用icon的设计几个阶段。其中目标人群确定、用户需求调查和交互式流程设计需要软件开发人员和设计人员共同完成。同时，App产品的UI设计需要对相应的功能需求有清晰的把握。由此，将界面设计的技巧总结如下：

1）页面布局

在开发前期进行App的原型设计，针对Android和ios制定不同的输出规范，而在页面布局时则可尽量兼顾Android系统和ios系统，在后期经过微调后输出适用安卓和ios不同的尺寸要求即可。同时，针对目标人群要尽量使用用户熟悉的界面风格，方便用户按照以往的使用习惯来操作软件，这样更容易让用户接受。如果设计得过于另类，则可能会很难符合大众口味，而不被大众接受。

2）颜色和字体

合理的色彩搭配和色彩选取将直接影响整个项目的成功与否，客户的满意度等等，所以在进行美工前，要确定好App的用色标准。一般，重要的颜色不要多于3种，而在这其中又要分为：用于特别强调或者需要重点突出的文字、按钮等小面积使用的色彩；用于普通级信息、文字等信息的通用色彩；和用于标题、列表等比较重要信息的颜色。其中用于背景色和需要弱化显示的信息要用较弱的颜色。

针对字体也要分为重要字体、较重要字体和一般字体；根据文字信息的重要性来确定文字的字体和字号。其中重要的文字一般为大标题、导航栏；较重要的文字为二级页面小标题、栏目标题等；一般字体为普通正文文字和说明性文字。在字体字号选择时，还可以结合其相应的背景色来选择，运用色彩的搭配太突出显示或者弱化显示相应的文字。

3）图标、按钮设计

功能icon是在App中用来表达某一操作或者功能示意的图形，如“主页”、“设置”等功能能图标。功能图标的设计应当尽可能的形象、简洁，力求能准确的表达其代表的功能。而针对应用icon的设计要在界面设计的最后再进行，便于让icon与整体界面的风格相匹配。同时，还需要输出不同尺寸的应用到界面上。icon设计需要创建的是一套不同尺寸的PNG文件（大小：29*29px～1024*1024px），且需要与应用捆绑。

设计中要善于利用图标语义引导用户行为，设计者可以用象形图形来制作图标，如日历、短信、通讯簿等；也可以用字符来制作图标，如IE浏览器、支付宝的图标；此外还可以用一些抽象的符号来隐喻要代表的应用，当目标人群反复使用和查看这些图标，会普遍认可这些符号的含义。

4）风格的统一

在界面设计前，要对界面进行风格定位，让界面的整体风格符合视觉流程，符合目标人群的偏好。

第一，统一界面各个元素间的间距。正文的行间距、按钮与按钮之间的距离、栏目标题与正文之间的距离、导航与栏目之间的距离，都需要进行统一，这样能使界面整洁清晰，条理清楚。

第二，善于使用用圆角效果。在App应用中，通常会有按钮、弹出的信息提示框等必要元素，而这些必要元素通常会设计成各种大小不一的矩形。我们可以为矩形设计圆角效果，统一矩形的圆角像素来软化用户界面，并形成统一风格。

第三，适当使用光照效果。在成套的图标设计中，在弹出框的使用时，可以为这些元素添加一定的光照效果，让他们更加立体化。但在使用光照效果时，要注意保持光照角度的一致性，这样才能保证元素的阴影在屏幕上的朝向是一致的。

4 小结

随着App应用的普及，软件开发师越来越重视用户体验的效果。因此，在开发中必须要与前端开发、产品经理达成共识，以用户对界面的需求变化为出发点， 使用户界面的外在形式和App实际应用的内部功能都能符合不用用户的需求。

参考文献：

[1] 梅哲.图形图像界面中的图标设计[D].武汉： 武汉理工大学，2009.

[2]马克波斯特. 信息方式[M]. 周宪，译.北京：商务印书馆，2000.