APP界面设计视觉思维研究

【摘要】APP界面设计师基于用户交互体验基础上创设的界面设计，通过对用户体验的视觉思维研究，使得APP界面设计不仅拥有独特的个性与品位，还能够为用户带来舒适、自由、良好的视觉感受，在实际的操作中更加符合用户的认知习惯，在设计上为用户带来合理性和便利性的两重体验。

【关键词】界面设计;交互设计;用户体验

一、基础布局与界面色调

（一）界面布局的调整

设备屏幕的布局需要满足用户的操作习惯以及视觉习惯。用户在屏幕中的阅读顺序通常是从上到下，从左到右，因此，为了节约用户的时间成本，重要的信息应该放在屏幕的最上方;用户在屏幕上的操作通常通过大拇指来完成，这就要求设计师将用户最常用的操作置于屏幕最下方，但要尽量避免将按钮置于手指的触碰死角。通常我们可以通过设置长按出现操作按钮的方式来使界面更加简洁，环状排列的按钮也更加符合人体的手指滑动轨迹。例如IPHONE辅助功能中的辅助触控，在触控按钮中可调用出自定功能以及通知。

（二）界面色调的选择

界面色调的选择是十分重要的过程，色调首先需要根据客户和用户的定位以及诉求来选择。冷色调给人的感觉偏理性，暖色调给人的感觉偏感性，适宜的颜色能够在本身特性的基础上赋予APP更多的主观感受，而APP反过来也能够促进不同颜色带给人们的更多心理感知。在进行界面色调的选择时，首先可以参考竞品颜色，选择与竞品相近的颜色。例如，淘宝、小红书、网易考拉等购物类APP，普遍选择了橙色、红色;而金融类APP，如支付宝、手机银行普遍选择了蓝色和白色作为界面主色调。其次也可以采用与竞品完全不同的颜色来进行区别定位，例如微信采用的是绿色和黑色，QQ则采用较明亮的白色底，这种颜色区别，使QQ更符合面向青少年的定位，凸显微信的受众群体定位更加大众化，颜色的不同也促进了两者视觉风格上的差异化发展。

二、图标绘制与交互动画设计

（一）图标绘制

图标对于界面设计师来说是花费时间最多的一项工作内容，图标能够加快用户获取信息的速度。画好一个图标需要关注图标的大小、造型以及氛围。图标的大小事实上影响到了每个功能的优先级，但对于不确定用户需求优先级的功能按钮，就需要设计一整套平级的图标，避免因图标大小带来对界面元素优先级的影响。在设计时，除了判断优先级大小以外，还必须要考虑到人的视觉影响因素。例如，正方形边长和圆形直径相等，但是在视觉上，正方形比圆形更大，因此在设计时，我们就要通过限定框，在画图前先规定好不同图形的视觉等大框，限定框可以参考Iconfont（阿里巴巴矢量图标库）中的矢量图形设计模版。

设计师在进行界面风格设计时，常常想突破原有的设计进行风格的创新，但这样的创新是具有一定风险的，如果能从趋势中发现潜在的先进点，的确能够使你的设计脱颖而出，但前提是它必须经得起使用者的验证，任何设计师都不能为了标新立异而铤而走险。

（二）交互动画设计

对于任何用户界面来说，视觉反馈都举足轻重，一方面视觉反馈可以明确用户对APP的有效操控，另一方面视觉反馈可以提示用户APP的正常运转。动效还可以反馈按钮功能的改变、屏幕空间的扩展、操作结果的提示等，动效还能够表现按钮与功能之间的层级关系，例如长按出现复制选项，则该选项应从按钮处从下往上弹出，而不是从屏幕侧面划出。

需要注意的是，UI设计中的动效并没有大量应用，但正是这些简单的动效解决了转换生硬的衔接，起到了润滑的效果，帮助设计师进行概念的快速展示。精美的视觉设计加上简单的动效辅助，同样能够得到与复杂动效相同的视觉效果。

早期的APP动画较少，大部分动效是为了解决某个具体的交互问题而诞生的，具有较强的目的性。例如读书类APP上的翻页效果，就是针对用户对翻页手势缺乏认知而设计出来的。模拟真实的翻页效果能够让用户更快地适应操作手势，也让用户有一种回归现实情境的使用体验。

（三）表现跳转和页面之间的层级关系

视觉感应上的连贯性，是最常用到的一个场景，也是拟物化状态的呈现。首先用直白的方式理解跳转关系，我们用喝水的过程来举例，桌上放著一杯水，那么需要先把手伸过去，然后端起水杯，再把水杯凑近嘴边，喝水，这是一系列非常连贯的动作。而不会像不符合逻辑的那样，桌上有杯水，下一秒水直接在嘴里。这样的呈现方式不符合正常的视觉逻辑，理解起来的难度也将相应增加。

在UI发展的历程中，经历过从粗糙到细腻的过程。例如早期windows版本，单击桌面上的“我的电脑”图标，将直接打开一个窗口。而现在的ios 12版本，单击桌面上的图标，会有一个逐步放大的过程，从这个图标开始放大，然后展示出一个具体的窗口。而关闭窗口也同样是，从展示窗口缩小到日历图标的位置。

（三）色彩感知

用户的视觉思维对色彩的感知最为敏感，不同的色彩更是为人们传递着不同的信息，APP设计中常应用蓝色、紫色等颜色来表示科技感，红色表示积极、向上，能够为用户带来较为明显的视觉刺激，提升视觉关注度。因此，在用户交互体验的设计上，需要有效地把控用户色彩感知这一视觉思维特性，合理调节设计中的色彩占比，通过色彩的对立通道设计流畅、自然的色彩过度。

三、图标的可用性分析

图标种类有很多，在一款APP里面，图标几乎会出现在每一个界面中。从应用场景来区分，我们可以把图标大致分为3类，即桌面图标、应用内图标和插图类的图标。这3类图标的侧重点是有所不同的。桌面图标一般使用产品的LOGO来做，不同的系统对桌面图标的要求和尺寸也是不同的，具体需要查找该平台的《用户界面设计指南》，找到具体的尺寸再去进行设计。桌面图标尽量简洁，不要太复杂，具有辨识度，图标内元素不能过多。桌面图标的设计原则是，尽量让用户在需要使用这个APP时，能一眼从众多App图标中找到这个图标。

应用内图标，使用场景就更多了，包括底部菜单栏的导航、页面内的导航、分类列表等。对于应用内图标，规范不是太多，设计原则是尽量让整个产品内的图标有统一的设计语言。设计的要点在于，能用最简洁易懂的图形来传达给用户该按钮的核心功能，切忌只顾着图标好看而忽略了实用性。界面设计是为了内容服务的，界面设计师的职责之一就是让产品既好用又好看，实在不能兼顾的情况下，也要优先保证信息传达的准确。

插图类图标常用于一些空白页面，例如提示没有新消息、提示网络连接失败等，或者一些新手引导页面，这里的图标会比较大，也可以理解为插图。

四、字体的样式

从大的分类上讲，字体可以分为两大类，一类是衬线字，另一类是无衬线字。字体学里，衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体称为衬线字体;没有衬线的字体则称为无衬线体。

这两种类型的字体出现的原因主要有两个方面：其一是这两种字体能够传达出不一样的设计风格，其二就是它们都是在历史进程中自然形成的。古代没有现代的精雕技术，人民在刻碑文或是手写书法时，在开头结尾处不易修饰平整，而使用衬线，则能够起到一定的修饰作用，令字体的开头结尾更加平整，且修饰后的字体显得更加美观。

在现代社会中，衬线宇和非衬线字都有各自的适用场合，衬线字更多地用于印刷，由于衬线字字体笔画粗细不同，笔画末端特别的修饰，会让文字在字号很小的时候也有不错的显示效果。而在屏幕端显示的时候，受到屏幕分辨率的影响，衬线字在不同的屏幕渲染下，会让笔画的末端变得模糊，不如无衬线字来得干净和犀利。由上比对可知，在进行UI设计时，应用无衬线字的场景会远远多于应用衬线字的场景。

衬线字中的宋体是比较特殊的。宋体本身是一种衬线字，并不适合在屏幕上展示，但在过去12点无样式宋体是最常用的字体。这是因为宋体12点是最适合在低像素屏幕下展示的点阵字，可以较为清晰地展示中文字体。

如今随着高清化屏幕的普及，移动设备显示屏的分辨率越来越高，字体方面的限制逐渐变小，因此现在可以更多地应用普通平滑效果的无衬线字。

结语

APP界面设计中用户交互体验与视觉思维有着很强的视觉需求、加强对界面設计的基础布局、界面色调、图标设计、交互动画和字体的应用等视觉思维的实际应用，将使得APP界面设计中用户交互体验的整体视觉效果更加显著，进而促进UI设计的整体质量与水平不断提升。 -

参考文献：

[1]晏艳.UI设计中用户交互体验的视觉表现[J].西部文革，2019，41（01）：108-109.

[2]杨媛.UI设计中用户交互体验的视觉思维[J].山东工业技术，2019（05）：245.

[3]冯敏，界面设计的拟物化和扁平化的风格探讨[J].设计，2019，32（05）：69-71.

[4]任葆轩，试论拟物化与扁平化在UI设计中的比较[J].艺术科技，2017，30（11）：123.

【作者简介】李智，硕士，上海理工大学公共实验中心，助理实验师;主要从事计算机前端设计研究。