25學(xué)堂的小編就來(lái)跟大家開(kāi)門(mén)見(jiàn)山的聊聊，APP設(shè)計(jì)師如何運(yùn)用好視覺(jué)焦點(diǎn)來(lái)設(shè)計(jì)我們的UI界面。

一、什么是視覺(jué)焦點(diǎn)？

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

最簡(jiǎn)單的視覺(jué)焦點(diǎn)利用：那就是文章當(dāng)中的字體加粗，改變亮一點(diǎn)的顏色等等。

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

通常來(lái)說(shuō)，我們閱讀的順序是從上到下，從左至右，而在移動(dòng)端，因?yàn)榭梢晠^(qū)域（屏幕大小，屏幕與人眼的距離都影響著視覺(jué)中心）的不同，我們的閱讀習(xí)慣則不太一樣。

在移動(dòng)端APP界面設(shè)計(jì)當(dāng)中，我們通常所關(guān)注的焦點(diǎn)在中心的內(nèi)容上，之后再內(nèi)容中如果找不到所需要的信息，則回頭頁(yè)面上方的篩選、排序中去進(jìn)行下一步的操作。

二、我們?cè)賮?lái)看一個(gè)案例進(jìn)行分析學(xué)習(xí)：

這兩個(gè)移動(dòng)端的界面都是對(duì)于以計(jì)時(shí)功能為主的設(shè)計(jì)UI頁(yè)面，初步一看，是不是視覺(jué)效果相差很大呢？

這就是APP視覺(jué)焦點(diǎn)運(yùn)用的好與不好的差別。

具體分析：

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

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

于是作者將這個(gè)頁(yè)面結(jié)合一些健身場(chǎng)景所需要的功能進(jìn)行再設(shè)計(jì)。得到了這樣的APP界面。

下面是2種不一樣的APP界面設(shè)計(jì)風(fēng)格和產(chǎn)品思維。

這樣的APP界面設(shè)計(jì)，整體界面的視覺(jué)焦點(diǎn)是不是突出了呢？

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

方案二：目前正在進(jìn)行的倒計(jì)時(shí)用大數(shù)字來(lái)顯示，而進(jìn)度條則縮小，同時(shí)顯示了當(dāng)前強(qiáng)度的高中低、同時(shí)在頁(yè)面上方，增加視頻播放教程，給用戶按照視頻教程進(jìn)行學(xué)習(xí)操作。體驗(yàn)更加。

因此根據(jù)視覺(jué)焦點(diǎn)所做的設(shè)計(jì)會(huì)有這樣的好處：增強(qiáng)設(shè)計(jì)的可讀性、提高頁(yè)面閱讀效率，使設(shè)計(jì)整體感強(qiáng)。

下面的APP設(shè)計(jì)案例也是如此。所以，在我們的APP界面設(shè)計(jì)當(dāng)中，需要合理的運(yùn)用好視覺(jué)焦點(diǎn)這個(gè)秘密武器。讓我們的APP設(shè)計(jì)作品頓時(shí)的高大上。

最后，大家不要忘記上面的那個(gè)小調(diào)查實(shí)驗(yàn)哦！你會(huì)如何根據(jù)重要程度擺放這七個(gè)按鈕？