手机APP界面设计知识点：如何运用好视觉焦点

25学堂的小编就来跟大家开门见山的聊聊，APP设计师如何运用好视觉焦点来设计我们的UI界面。

 

一、什么是视觉焦点？

视觉焦点的概念最初来源于摄影，视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。

最简单的视觉焦点利用：那就是文章当中的 字体加粗 ， 改变亮一点的颜色 等等。

 

我们先来做做这样的小调查，有abcdefg七个按钮，a为最重要的，g为最不重要的，以此排列。如下图所示，在视觉语言保持一致的情况下，你会如何根据重要程度摆放这七个按钮。

 

通常来说，我们阅读的顺序是从上到下，从左至右，而在移动端，因为可视区域（屏幕大小，屏幕与人眼的距离都影响着视觉中心）的不同，我们的阅读习惯则不太一样。

在移动端APP界面设计当中，我们通常所关注的焦点在中心的内容上，之后再内容中如果找不到所需要的信息，则回头页面上方的筛选、排序中去进行下一步的操作。

二、我们再来看一个案例进行分析学习：

这两个移动端的界面都是对于以 计时功能 为主的设计UI页面，初步一看，是不是视觉效果相差很大呢？

这就是APP视觉焦点运用的好与不好的差别。

具体分析：

1、左边的页面视觉大数字与底色的对比让视觉焦点很明确——现在跑了多少公里。操作也很简单。

2、右图则是一个循环计时的工具，设计的内容很巧妙，通过对每个步骤的时间设定，设计一个循环，便可以开始一个循环的倒计时，对于健身来说是很好的设计。但是这个页面的视觉焦点并不突出。两排等大的数字，让页面均质化，并不能一眼看出现在正在倒计时的是什么。

于是作者将这个页面结合一些健身场景所需要的功能进行再设计。得到了这样的APP界面。

下面是2种不一样的APP界面设计风格和产品思维。

 

这样的APP界面设计，整体界面的视觉焦点是不是突出了呢？

方案一：目前正在进行的倒计时用大数字来显示，而进度条则缩小，并和下一个步骤统一排列。同时在页面上方，增加动作指南，给用户更好的体验。

方案二：目前正在进行的倒计时用大数字来显示，而进度条则缩小，同时显示了当前强度的高中低、同时在页面上方，增加视频播放教程，给用户按照视频教程进行学习操作。体验更加。

因此根据视觉焦点所做的设计会有这样的好处：增强设计的可读性、提高页面阅读效率，使设计整体感强。

下面的APP设计案例也是如此。所以，在我们的APP界面设计当中，需要合理的运用好视觉焦点这个秘密武器。让我们的APP设计作品顿时的高大上。

最后，大家不要忘记上面的那个小调查实验哦！你会如何根据重要程度摆放这七个按钮？