手机APP界面的视觉设计

陈岩

摘要：随着移动无线互联网的快速发展，手机网民也在不断增加，随着各类手机 APP的使用率也在逐年增加。手机APP的市场竞争也在日益激烈。手机布设的界面要带有新颖性，显示新式美感，增添 APP 架构下的互动性，侧重人机交互感受，添加了平日之内的多样便捷，创设愉快体验。唯有如此，才会吸纳用户，从APP应用市场中脱颖而出。

关键词：手机APP；视觉传达设计；用户体验；创意设计

中图分类号：TP391 文献标识码：A 文章编号：1009-3044（2018）25-0089-02

本文简单的论述了一款手机APP从战略草图到制作完成过程中，视觉传达设计的原理在其中的重要运用。 目前我国的手机APP自主研发的有很多，但是许多用户反映同类手机 APP 的界面很相似。如何从根本上做好一款手机APP，解决同类型手机APP界面的相似性，是本文讨论的重点。

1 研究背景

随着移动互联网技术的成熟，以及移动端泛娱乐体验场景的多样化，原先以其他形式呈现、在其他渠道触达用户的内容，开始跟移动端有了更紧密的结合，并催生出全新的产品形态。比如，当下用户对移动端游戏的需求提升就非常明显。在手机性能不断提升的当下，手机的功能已越来越多，于是各种不同的手机APP也应运而生。进入2018年以来，各类手机APP被开发出来手机的功能不仅只局限在打电话上，还可以满足人们娱乐、交友、交易、办公、获取信息等诸多功能。因此，在人们将来的生活中对智能手机的依赖将越来越高，而手机APP的设计也将成为手机设计中重要的一环。

所以，如今的我们已经迎来一个属于智能手机的时代。将来的智能手机市场竞争也会越来越激烈，智能手机的APP界面设计也会变成智能手机生产制造中重要的一环。

2 智能手机的概念

2.1 智能手机的定义

智能手机是一种小型的具有独立操作系统的便携式工具，并且计算能力远远优于传统的按键式手机，更加强大的计算能力使得用户可以通过安装不同类型的手机APP来满足用户的各种需要。本文主要讲述的是智能手机手机APP界面的视觉设计。

2.2 手机界面定义

手机界面是手机的显示部分，在人机交互的过程中，进行信息输入和输出的重要媒介。手机屏幕既可以用于人从手机中接收信息，也可以通过触控等方式进行信息输入。任何手机信息交换的大部分过程都是通过手机界面进行的，不同种类的手机界面也将带给人不同的视觉感受，在本文中将不再对手机界面做出明确区分。而是将手机APP界面的设计给人的视觉体验作为研究的重点。

2.3 有限的屏幕尺寸

与传统PC桌面不同，手机屏幕的尺寸更加小巧操作，方式也已触控为主，设计师再设计界面时要充分考虑两种操作界面的不同。在APP界面设计时设计师不但要保证APP功能的完整性和合理性，又要保证APP的功能性和实用性，然后再处理APP界面给人带来的视觉感受。在保证其拥有流畅的操作感受的同时，满足人们的审美需求。

3 手机APP相关概念

APP是“Application”的简写，在维基百科上对有如下解释：移动应用程序（英语：mobile application，简称mobile app、app），或手机应用程序、移动应用程序、手机APP等，是指计给智能手机、平板电脑和其他移动设备上运行的应用程序。本文的主要研究对象为手机APP。

4 手机APP设计思路

4.1 注重人机交互概念

人在操作手机时，主要以人的意识为主体，手机起到辅助作用。设计师应考虑到人与手机的各自特点，使得两者之间相互协调，从而使工作条件达到最優。在使用手机的过程中应尽量减少人的计算和记忆负担，从最大程度上发挥机器计算的优势，同时注重人的特性，是的人与手机的配合达到最佳，从而有效地提高对手机的使用效率。

4.2 界面设计原则

4.2.1 保证功能性和实用性

我们在对手机APP界面进行设计时，需要考虑APP本身的使用特点，保证大多数用户都能获得使用体验，界面中应尽量减少按键数量，保证APP功能的合理性，这样的界面会使得用户操作更加方便流畅，也能相应的减少手机的运算负担，所以一个结构完善的APP界面是设计一个优秀的APP的良好开端。

4.2.2 内涵丰富，寓意明确

设计时，应在有限的二维空间中调整图形、文字、按键、符号等元素的位置关系和比例大小，增加对界面内容表达的准确性和界面操控的灵活性。

4.2.3 图形简洁，易识别

设计师应考虑界面中的点、线、面的构成，界面既要做到简洁并具有概括性，使用户能更容易理解和接受；又要做到内容丰富，不让人感觉单调乏味。设计图形要遵循一种秩序美，让视觉上的感受更加平衡。增加界面操控的舒适感，使得界面更方便用户认知，方便识别。

手机APP界面内空间的布局的合理性，不但影响用户的整体视觉体验之外，还能增加用户操作是的准确性、流畅性和实用性。

5 颜色搭配方案

色彩是APP界面设计中的重中之重，这关乎是否能够正确表现出产品气质和定位。

主色决定了手机APP界面的整体设计风格，这个主色代表了产品的文化方向，同时也向用户传达了产品的情感。在设计线框图之前，研发团队的每个人就应明确产品的定位，提炼出最贴切产品的主色。许多手机APP界面的主色都是选择了此款APP应用图标的主色，在不同界面中主色的面积会发生大小变化，可能会有同色系渐变界面，也可能出现同色的系功能图标，但主色的视觉效果依然是占主导地位的。

在设计手机APP时设计师可以使用互补色，在手机APP界面设计中互补色菜的对比效是果最为强烈的。这种互补色给用户带来强烈的冲击，情感丰富，给人留下深刻印象。这种手法非常易于传播的，一般使用夸张的、张扬的手机APP界面中。但这种颜色的过度使用过多也容易给用户带来视觉上的疲劳，导致用户不知何处才是重点信息。所以这种视觉冲击很强的互补色只能在小面积使用，同时注意使用位置，要放在手机APP界面信息提示出。设计师还可以使用冷暖色对比，这样的配色会使手机APP界面变得非常出彩。使得分类内容一目了然。

6 字体设计方案

设计文字时应保证文字辨识度高，和信息传达的准确性。相对于图片文字拥有更加清晰准确的表达能力，使得用户能更加清晰从APP中获取信息信息，界面内容也更加直观。文字设计要遵循以下原则：

用语要简洁，信息内容清楚。避免使用专业的语言，同时减少不必要的修饰词语。使得用户可以更加迅速的理解手机APP的功能。文字布局上也应做到排版布局合理，结构层次清晰。

在字体设计中不同风格的字体会给人带来不同的视觉体验，但无论使用哪种字体，都应该将文字与图片看成一个整体。文字应该带有“意向性”不同的文字给人带来不同的视觉效果。传统的文字都有一个共同点就是大多都有曲线，正是这些很小的曲线组成的文字，营造出了优美高雅的感觉。同时在搭配图片的时候，应当给这些传统文字足够的空间舒展，也就是留白，而且字号也不应过大，选取与背景亮度对比强烈的颜色，更给人带来信任感。亲近感与柔和感：尖锐的物体会给人带来危险的感觉，文字也有同样的心理作用，想要文字给人带来温柔的感觉，首先应使用线条粗一些、前端浑圆的字体，最好是手写体；其次避免使用黑色或藏蓝色的文字，应选取与背景颜色亮度差异较小的暖色。未来性与先进性：应选择装饰性弱的无衬线体和黑体，或者利用图形组成具有“图形化”的文字，需要注意的是，越是抽象的字识别性越低，这种字可以用在logo上，注意小范围使用。颜色则可以考虑黑白灰这些简单的配色。纤细与美丽：女性化的文字通常给人优美、纤细的印象，需要选用线条细且有曲线的字体，流畅的手写细线体可以运用在女性产品上，更能给人带来娇媚的视觉效果。怀旧与复古：字体的设计具有流行性，所以字体的设计通常可以反映出流行的趋势。

在字体设计时要选用与背景颜色差异大的色彩，比如黑色的粗字体配上明亮的背景色，视觉的冲击力在哪里运用都不会减弱。特别需要注意的是，在标题中这种字体不适用于整个篇幅，容易造成视觉的疲惫，字与字之间的间距也不宜过大，容易显得松散。说到字间距，设计师就要考虑到文字的容易阅读性了，可以利用作图软件调节字体的间距以及横竖排版。在一个版面内，字体的间距要一致，才能达到容易阅读的效果。字间距设定比较窄时，呈现出凌然的张力；字间距比较大时，能呈现出悠然的感觉。文字在排版时，也具有视觉导向的作用。设计师需要根据人的浏览习惯来安排文字，比如从上到下，从左到右。同时注意主标题、副标题、正文之间的间隔。内容关联性大的文字安排在一起，其余的用适当的間隔分隔开，才不容易造成视觉上的混乱。具有节奏感和层次感的字体设计，不仅可以吸引人的目光，同时能达到让人眼前一亮的效果。字体设计的节奏感体现在字号对比、重量对比、色彩对比上。当字号越大时，文字就会显得越重要，字号的大小变化能让版面展现出强弱变化；最引人注意的标题，在版面中会比其他字体更粗，但需要设计师考虑什么情况下使用何种重量感的字体是关键；重要的文字可以换作其他颜色加以区分，红、黄、橙等暖色被称为“前进色”，它们比蓝、绿这些冷色更能起到吸引人眼球的作用。

7 结束语

手机 APP 的界面设计师，在如今市场对的手机APP界面设计需求量之大的趋势下，地位也得到了前所未有的提升，但是许多公司对APP的视觉设计的认知还停留在普通的制图和美工上，APP设计也不仅仅局限在APP功能的本身。随着APP应用的发展，陈旧的“美工”意识已经跟不上手机 APP界面对视觉层面的需求了。作为一名优秀的手机APP设计师，不仅仅需要满足用户对功能的需求，还需要满足用户对视觉层面的需求。积极学习平面设计构成原理，以及界面的交互原理。可以从根本上提高APP设计师对视觉层面的表达能力。才能抓住用户的心里，从根本上提高我国自主研发的手机APP在的质量，提升我国自主研发的手机APP在国际上的竞争力，为我国的手机APP设计贡献出一份力量。

参考文献：

[1] 董华君.手机App界面的视觉设计研究[J].艺术科技，2017，30（8）：291.

[2] 丁磊，李欣霏.APP界面视觉设计艺术研究[J].中国包装工业，2013（16）：58.

【通联编辑：唐一东】