浅析移动APP设计教学中的界面设计要点

王婧然

北京信息职业技术学院

在移动APP设计的课程教学中，涉及的知识点包含用户研究、用户体验、原型设计、界面设计等。对于一个APP产品的成型，每一部分各司其职，但根据实际教学经验，学生设计的APP作品，成败的关键因素就是最终界面的呈现。对于一个APP，所有的前期设计构思后期都要落地到界面上，半数以上的学生，虽能把前期调研工作和原型创意阶段做得很好，但完成的作品总是差强人意，恰恰就是在界面设计的细节上有所欠缺。本文将基于实际教学中的经验，根据学生在界面细节的设计上经常出现的问题，进行界面设计要点的分析。

一、 界面控件

在学生设计的界面中，时常会看到某些按钮太小的情况。原则上讲，可触控的控件在设计时，尺寸不得小于44*44像素，而如今大部分智能手机已是高清屏，是两倍率，所以也就是88*88像素。只有这样才能确保触摸的精度和命中率。学生在设计时，很容易使每个控件之间离得过近并且很小，没有充分考虑手指的触摸范围，导致实际应用时容易误操作。针对这个问题，除了以上讲到的原则外，还建议让学生下载一个叫Ps Play的应用，利用它，在PS上做的界面可以随时映射在手机屏幕上，各控件的大小是否合适也就一目了然。

二、界面文本

（一）文本尺寸

一般来说，正文字号大小是24～28像素，小标题字号则是32～36像素，这样才能确保在常规距离下无需缩放就可以清晰地阅读文本。试想如果文字很小，同时也会导致一个页面承载过多的文字，使人不想阅读。

（二）文本对比度

尽量确保文字和背景色彩对比更明显，调整好文字与背景的对比会提高文本的可读性。

设想两种情况，一种是白色背景和高纯度的黑色文字，配以高纯度绿色的标题，而另一种同样是白色背景，但文字是灰色，标题是低纯度的绿色，可想而知，后者的整体对比度较低，可读性差，容易造成文本和背景或背景图片混为一体的情况。

（三）文本间距

适当地增加行间距，会提高文字的易读性。学生在界面文本的设计中，最常出现的就是行间距过小的问题，在这里必须提示学生，除了要考虑字号本身的大小，行间距也同等重要。可以让学生做一个实验，设置两组文本，两组用完全相同的字号，但是设置成两种不同的行间距，让学生感受相同字号下不同行间距带来的易读性差异。

三、界面图片

（一）高分辨率

为所有图片资源提供高分辨率的版本。低于手机屏幕尺寸的图像在高清屏幕上会出现模糊或马赛克的状况。指导学生在具体操作时，找的图片尺寸不要低于在PS上建的屏幕尺寸。例如学生按照iphone6屏幕尺寸去做界面，即750*1334像素，那么找的全屏图片就不能小于这个尺寸。

（二）防止拉伸

学生在设计界面图片时有个屡见不鲜的问题，就是图片经常被纵向拉高或横向压扁。为了防止图片的拉伸，学生在实际操作时，始终要提醒学生控制好图片的高宽比。原始图片往往不能保证是理想尺寸，应用时可以进行大小缩放，但是一定要避免拉伸导致的失真问题。具体操作也就是在用Photoshop做缩放时，不能忘记按住Shift键，这样即可保证图片按照原有比例缩放，不会出现拉伸的问题。

四、界面排版

让控件、文本、图片在界面上保持对齐，相似和相关的内容合理地靠近，可以让用户更容易理解界面信息。移动APP的界面，除了涉及排版的问题，同时也必须按照用户习惯去设计各元素的位置。例如挂断电话的按钮，最合适的位置就是放在中间靠下，因为从用户习惯的角度来说，是容易触摸，而从排版的角度来说，既然放在下面中间的位置，就一定要和页面居中对齐。学生设计的界面中，不对齐的情况比比皆是，有的是本该居中的元素没和界面居中对齐，有的是同等的元素之间没有对齐，还有的是每个元素位置排得比较乱，缺乏规律。在这里必须要求学生严格遵循排版的规律，随时关注左对齐、右对齐、居中对齐以及同等元素之间的对齐。

五、结语

在移动APP的界面设计部分的教学中，归根结底要让学生明确一个问题，UI界面设计和平面设计本质的区别是什么？答案是，除了美观还要考虑是否好用。其实以上分析到的界面设计要点，都是最基本的界面设计要求，是原则也是底线，没有任何高超的设计技巧，但这些问题仍时有发生。所以在指导学生时，只要能让学生理解了上面说的要考虑是否好用这个问题的基础上，同时保证做到本文分析到的所有要点，相信学生的界面设计不会差。