25學堂的小編就來跟大家開門見山的聊聊，APP設計師如何運用好視覺焦點來設計我們的UI界面。

一、什么是視覺焦點？

視覺焦點的概念最初來源于攝影，視覺焦點就是在有限的視線范圍內快速捕捉你自己認為吸引你的區(qū)域。反映在互聯(lián)網(wǎng)產(chǎn)品設計中，就是指設計的頁面上最吸引人注意的地方，視線上集中交匯的地方，這個位置就叫焦點。

最簡單的視覺焦點利用：那就是文章當中的字體加粗，改變亮一點的顏色等等。

我們先來做做這樣的小調查，有abcdefg七個按鈕，a為最重要的，g為最不重要的，以此排列。如下圖所示，在視覺語言保持一致的情況下，你會如何根據(jù)重要程度擺放這七個按鈕。

通常來說，我們閱讀的順序是從上到下，從左至右，而在移動端，因為可視區(qū)域（屏幕大小，屏幕與人眼的距離都影響著視覺中心）的不同，我們的閱讀習慣則不太一樣。

在移動端APP界面設計當中，我們通常所關注的焦點在中心的內容上，之后再內容中如果找不到所需要的信息，則回頭頁面上方的篩選、排序中去進行下一步的操作。

二、我們再來看一個案例進行分析學習：

這兩個移動端的界面都是對于以計時功能為主的設計UI頁面，初步一看，是不是視覺效果相差很大呢？

這就是APP視覺焦點運用的好與不好的差別。

具體分析：

1、左邊的頁面視覺大數(shù)字與底色的對比讓視覺焦點很明確——現(xiàn)在跑了多少公里。操作也很簡單。

2、右圖則是一個循環(huán)計時的工具，設計的內容很巧妙，通過對每個步驟的時間設定，設計一個循環(huán)，便可以開始一個循環(huán)的倒計時，對于健身來說是很好的設計。但是這個頁面的視覺焦點并不突出。兩排等大的數(shù)字，讓頁面均質化，并不能一眼看出現(xiàn)在正在倒計時的是什么。

于是作者將這個頁面結合一些健身場景所需要的功能進行再設計。得到了這樣的APP界面。

下面是2種不一樣的APP界面設計風格和產(chǎn)品思維。

這樣的APP界面設計，整體界面的視覺焦點是不是突出了呢？

方案一：目前正在進行的倒計時用大數(shù)字來顯示，而進度條則縮小，并和下一個步驟統(tǒng)一排列。同時在頁面上方，增加動作指南，給用戶更好的體驗。

方案二：目前正在進行的倒計時用大數(shù)字來顯示，而進度條則縮小，同時顯示了當前強度的高中低、同時在頁面上方，增加視頻播放教程，給用戶按照視頻教程進行學習操作。體驗更加。

因此根據(jù)視覺焦點所做的設計會有這樣的好處：增強設計的可讀性、提高頁面閱讀效率，使設計整體感強。

下面的APP設計案例也是如此。所以，在我們的APP界面設計當中，需要合理的運用好視覺焦點這個秘密武器。讓我們的APP設計作品頓時的高大上。

最后，大家不要忘記上面的那個小調查實驗哦！你會如何根據(jù)重要程度擺放這七個按鈕？